Default theme

Kristal is built entirely using CSS variables (also known as CSS custom properties). almost everything can be customized by overriding a property, making it very easy to theme Kristal to fit your brand.

Theme tokens

$theme: (
  "color": (
    "black": 0% 0 100%,
    "white": 0% 0 0%,
    "gray": colors.$gray,
    "blue": colors.$blue,
    "indigo": colors.$indigo,
    "purple": colors.$purple,
    "pink": colors.$pink,
    "red": colors.$red,
    "yellow": colors.$yellow,
    "green": colors.$green,
    // Semantic colors
    "text":
      (
        "primary": var(--color-gray-900),
        "secondary": var(--color-gray-500),
      ),
    "bg": (
      "body": var(--color-white),
      "primary": var(--color-gray-50),
      "secondary": var(--color-gray-100),
    ),
    "border": (
      "primary": var(--color-gray-200),
      "secondary": var(--color-gray-100),
    ),
  ),
  "border": (
    "1": 1px,
    "2": 2px,
    "3": 3px,
  ),
  "fonts": (
    "sans":
      'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
    "serif": 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
    "mono":
      'ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace',
  ),
  "fontsize": (
    "xs": 0.75rem,
    "sm": 0.875rem,
    "base": 1rem,
    "lg": 1.125rem,
    "xl": 1.25rem,
    "2xl": 1.5rem,
    "3xl": 1.875rem,
    "4xl": 2.25rem,
  ),
  "fontweight": (
    "light": 300,
    "normal": 400,
    "medium": 500,
    "semibold": 600,
    "bold": 700,
    "extrabold": 800,
  ),
  "letterspacing": (
    "tight": -0.025em,
    "normal": 0,
    "wide": 0.025em,
  ),
  "lineheight": (
    "1": 1,
    "sm": 1.25,
    "base": 1.5,
    "lg": 1.75,
  ),
  "radii": (
    "sm": 0.125rem,
    "base": 0.25rem,
    "lg": 0.5rem,
    "circle": 50%,
    "pill": 9999px,
  ),
  "space": (
    "0": 0,
    "1": 0.25rem,
    "2": 0.5rem,
    "3": 0.75rem,
    "4": 1rem,
    "5": 1.25rem,
    "6": 1.5rem,
    "7": 1.75rem,
    "8": 2rem,
  ),
  "shadow": (
    "xs": "0 0 0 1px hsl(var(--color-black) / 5%)",
    "sm": "0 1px 2px 0 hsl(var(--color-black) / 5%)",
    "base":
      "0 1px 2px 0 hsl(var(--color-black) / 5%), 0 1px 2px 0 hsl(var(--color-black) / 4%)",
    "lg":
      "0 4px 6px -1px hsl(var(--color-black) / 1%), 0 2px 4px -1px hsl(var(--color-black) / 6%)",
    "xl":
      "0 10px 15px -3px hsl(var(--color-black) / 1%), 0 4px 6px -2px hsl(var(--color-black) / 5%)",
  ),
  "size": (
    "container-sm": 576px,
    "container-md": 768px,
    "container-lg": 992px,
    "container-xl": 1200px,
  ),
);

Customize theme

Out of the box, your project will automatically inherit the values from the default theme configuration. In some scenarios, you might need to customize the theme tokens to match your design requirements. All tokens of the $theme map are automatically converted to CSS variables.

Extending the default theme

For example, if you’d like to add your brand colors but preserve the existing ones, here’s what you’ll do:

@use "kristal" with (
  $theme: (
    "extend": (
      "colors": (
        "brand": (
          "100": #0088e3,
          "200": #0088e3,
          "300": #0088e3,
        ),
      ),
    ),
  );
);

Overriding the default theme

To override an option in the default theme, add your overrides directly under the key of the theme map.

For example, if you’d like to update the colors in the theme to include your blue colors, here’s what you’ll do:\

@use "kristal" with (
  $theme: (
    "colors": (
      "blue": (
        "100": #0088e3,
        "200": #0088e3,
        "300": #0088e3,
      ),
    ),
  );
);

This will completely replace Kristal’s default configuration for that key, so in the example above none of the default, colors would be generated.