Theming

Understand theming and the default CSS Variables.

CSS Variables

The colors used in this component set come from the CSS variables in the main CSS file (e.g. global.css) and tailwind.config.js.

--primary: 37, 99, 244;

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: "rgba(var(--primary), <alpha-value>)",
        },
      },
    },
  },
}

Opacity Modifier Syntax

Many of our colors support Tailwind's opacity modifier syntax (opens in a new tab):

<div className="bg-primary/50">...</div>

Note that the following colors have opacity applied by default, so the opacity syntax cannot be used:

--secondary: 103, 120, 145, 0.1;
--secondary-hovered: 103, 120, 145, 0.2;
--secondary-pressed: 103, 120, 145, 0.3;
--accent: var(--secondary);
--accent-pressed: var(--secondary-hovered);

// Not supported
<div className="bg-secondary/50">...</div>

Convention

background and foreground

We use a simple background and foreground convention for colors. The background variable is used for the background color of the component and the foreground variable is used for the text color on them background color.

--background: 255, 255, 255; // body background, etc
--foreground: 8, 10, 12; // body text, etc

The background suffix is omitted when the variable is used for the background color of the component.

--primary: 37, 99, 244; // `background` suffix is omitted
--primary-foreground: 255, 255, 255;

hovered and pressed

Some colors have hovered or pressed suffix. These are the colors you see when you mouse over and down on an element filled with background.

--primary-hovered: 58, 114, 245;
--primary-pressed: 81, 130, 246;

text

text suffix is also used for text color, like foreground. foreground is the text color on its counterpart background, while text is the text color on --background.

--background: 255, 255, 255;
--info: 0, 177, 242;
--info-foreground: 255, 255, 255; // text color on the `--info`
--info-text: 0, 152, 208; // text color on the `--background`

muted

muted suffix is a softened tone variant of background color. Used for Alert, etc.

Color Schemes