Gigabits Styles Documentation

The styles package provides a set of base styles and themes for your project as well as a utility Section component to make applying themes easy.

Installation

To use Gigabits styles, install the package and then import the css to your global stylesheet.

bash
npm install @anakin-gbit/styles

css
@import '@anakin-gbit/styles/base.css;
@import "@anakin-gbit/styles/colors.css";

This will apply default styles to common html components, and make a set of color variables available throughout your application. These are:

--pallet-background --pallet-background-alt --pallet-heading --pallet-subheading --pallet-text --pallet-text-muted --pallet-highlight --pallet-link --pallet-link-hover --pallet-button --pallet-button-text --pallet-button-hover --pallet-button-hovertext --pallet-border --pallet-divider

Basic Usage

This is a div with classname="theme2" and style={{ color: 'var(--pallet-text)', backgroundColor: 'var(--pallet-background)' }}.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaque nam ipsa hic, cum praesentium harum reiciendis consequatur quaerat vero inventore ea ratione veritatis enim labore!

Section component

The styles package also includes a Section component which allows you to apply theme colors from the globally defined styles. It wraps children inside nested <div> elements, with optional theming applied to both outer and inner containers.

jsx
<Section theme="theme1" innerTheme="theme3" maxWidth={600} padding="40px" />

If no children are passed, this placeholder will be returned, which can be useful for prototyping.

Section: theme1

This placeholder section is returned by the Section component if no children are passed. It is intended to be used for quick prototyping.

  • Inner Theme: theme3
  • Max Width: 600px
  • Padding: 40px

Primary headings defauilt to --pallet-heading.

Primary headings are h1, h2, h3.

Secondary headings defauilt to --pallet-subheading.

Secondary headings are h4, h5, h6.

  • Main body text uses --pallet-text. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo cupiditate ea eveniet beatae neque omnis ipsam commodi? Rem tenetur, pariatur maxime sunt deleniti eos eveniet nihil labore aperiam quidem perferendis.
  • Apply --pallet-text-muted for less important text. Lorem ipsum dolor, sit amet consectetur adipisicing elit.
  • Apply --pallet-highlight for more important text. Nemo cupiditate ea eveniet beatae neque omnis ipsam commodi?

The default background for the theme is --pallet-background. This div uses --pallet-background-alt.

The border uses --pallet-border, and the divider uses --pallet-divider.

Link

Customizing Palettes

If you'd like to customize the theme palettes to better suit your design, you can override the default variables defined in colors.css in your global CSS file. Here’s an example of how to redefine these colors.

Below, we redefine --color1 and --color2 to customize the primary colors used throughout each theme.

css
/* global.css */
@import "~@anakin-gbit/section/colors.css";

/* Override the default color variables */
:root {
--color1: #ff6347; /* Custom color for highlights */
--color2: #4682b4; /* Custom color for links */
--gray-8: #f0f0f0; /* Custom light gray background */
}

.theme0 {
/* Customize theme-specific colors */
--pallet-background: var(--gray-8);
--pallet-heading: var(--color1);
--pallet-link: var(--color2);
}

.theme1 {
/* Another custom theme example */
--pallet-background: var(--color2);
--pallet-button: var(--color1);
--pallet-button-text: var(--gray-8);
}

By customizing the :root or specific theme classes (e.g., .theme0), you can tailor the Section component’s appearance to match your branding. This makes it easy to create a cohesive color scheme across your app.

Props

  • children: Content to display inside the section. If no content is provided, a placeholder is rendered.
  • className: Additional CSS classes for the innermost container.
  • theme: Applies a theme to the outermost container (theme0 to theme4).
  • innerTheme: Theme for the inner container, which can be different from the outer theme.
  • maxWidth: Sets the max width of the inner container, defaulting to 800.
  • padding: Custom padding for the inner container, defaulting to 20px.