Colors

Star Forge uses CSS custom properties (variables) for its design tokens. These variables are defined in src/app/global.css and mapped to Tailwind CSS utilities via the @theme inline directive.

Color System

The color system follows the shadcn/ui convention with semantic tokens for both light and dark modes. All components consume these variables, ensuring consistent theming across the entire library.

How it works

Each semantic token is defined as a CSS variable:

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  /* ... */
}

Tailwind maps these variables to utility classes:

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  /* ... */
}

This allows usage like bg-primary, text-muted-foreground, border-input, etc.

Preview

How Colors are Defined

The palette is defined in src/app/global.css using CSS custom properties:

• :root — Light mode values
• .dark — Dark mode values

Tailwind CSS v4 maps these variables to utility classes via the @theme inline directive, so every component uses the same semantic tokens consistently.

Theme Reference