Tokens

In this page you will find the values of all the tokens exposed via the useTheme() hook.

`colorScheme`

colorScheme can be either "light" or "dark". It can be toggled by calling toggleColorScheme().

import { useTheme } from "flair-kit";

const Component = () => {
  const { colorScheme, toggleColorScheme } = useTheme();

  return (
    <button onClick={toggleColorScheme}>Current theme: {colorScheme}</button>
  );
};

`space`

space = {
  xs: "2px",
  sm: "4px",
  md: "8px",
  lg: "16px",
  xl: "24px",
  "2xl": "40px",
  "3xl": "60px",
  "4xl": "80px",
};

`radii`

radii = {
  xs: "2px",
  sm: "3px",
  md: "4px",
  lg: "8px",
  xl: "12px",
  "2xl": "20px",
  "3xl": "30px",
  "4xl": "40px",
};

`shadow`

shadow = {
  subtle: "0 0 6px 2px var(--color-background-500)",
};

`mediaQuery`

mediaQuery = {
  onMobileUp: "@media (min-width: 37.5rem)",
  onTabletUp: "@media (min-width: 59.375rem)",
  onDesktopUp: "@media (min-width: 81.25rem)",
  onReducedMotion: "@media (prefers-reduced-motion)",
};

`transition`

transition = {
  default:
    "background 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out, opacity 0.15s ease-out",
  transform: "transform 0.4s cubic-bezier(0.280, 1.840, 0.420, 1)",
  tamerTransform: "transform 0.15s ease-out",
};

`fontSizes`

fontSizes = {
  h1: "4rem",
  h2: "2.5rem",
  h3: "1.8rem",
  subheading: "1.5rem",
  body: "1rem",
  small: "0.875rem",
};

`mobileFontSizes`

mobileFontSizes = {
  h1: "2.5rem",
  h2: "2rem",
  h3: "1.6rem",
  subheading: "1.35rem",
  body: "1rem",
  small: "0.875rem",
};

`lineHeights`

lineHeights = {
  h1: "1.19",
  h2: "1.175",
  h3: "1.2",
  subheading: "1.3",
  body: "1.45",
  small: "1.45",
};

`colors`

Color tokens are simple map to the correlated CSS variables. Learn more about how colors work in Flair in the Colors page.

colors = {
  foreground: {
    400: {
      color: "var(--color-foreground-400)",
      contrastingColor: "var(--contrasting-color-foreground-400)",
    },
    500: {
      color: "var(--color-foreground-500)",
      contrastingColor: "var(--contrasting-color-foreground-500)",
    },
    600: {
      color: "var(--color-foreground-600)",
      contrastingColor: "var(--contrasting-color-foreground-600)",
    },
    700: {
      color: "var(--color-foreground-700)",
      contrastingColor: "var(--contrasting-color-foreground-700)",
    },
    800: {
      color: "var(--color-foreground-800)",
      contrastingColor: "var(--contrasting-color-foreground-800)",
    },
  },
  background: {
    400: {
      color: "var(--color-background-400)",
      contrastingColor: "var(--contrasting-color-background-400)",
    },
    500: {
      color: "var(--color-background-500)",
      contrastingColor: "var(--contrasting-color-background-500)",
    },
    600: {
      color: "var(--color-background-600)",
      contrastingColor: "var(--contrasting-color-background-600)",
    },
    700: {
      color: "var(--color-background-700)",
      contrastingColor: "var(--contrasting-color-background-700)",
    },
    800: {
      color: "var(--color-background-800)",
      contrastingColor: "var(--contrasting-color-background-800)",
    },
  },
  dark: {
    400: {
      color: "var(--color-dark-400)",
      contrastingColor: "var(--contrasting-color-dark-400)",
    },
    500: {
      color: "var(--color-dark-500)",
      contrastingColor: "var(--contrasting-color-dark-500)",
    },
    600: {
      color: "var(--color-dark-600)",
      contrastingColor: "var(--contrasting-color-dark-600)",
    },
    700: {
      color: "var(--color-dark-700)",
      contrastingColor: "var(--contrasting-color-dark-700)",
    },
    800: {
      color: "var(--color-dark-800)",
      contrastingColor: "var(--contrasting-color-dark-800)",
    },
  },
  light: {
    400: {
      color: "var(--color-light-400)",
      contrastingColor: "var(--contrasting-color-light-400)",
    },
    500: {
      color: "var(--color-light-500)",
      contrastingColor: "var(--contrasting-color-light-500)",
    },
    600: {
      color: "var(--color-light-600)",
      contrastingColor: "var(--contrasting-color-light-600)",
    },
    700: {
      color: "var(--color-light-700)",
      contrastingColor: "var(--contrasting-color-light-700)",
    },
    800: {
      color: "var(--color-light-800)",
      contrastingColor: "var(--contrasting-color-light-800)",
    },
  },
  primary: {
    400: {
      color: "var(--color-primary-400)",
      contrastingColor: "var(--contrasting-color-primary-400)",
    },
    500: {
      color: "var(--color-primary-500)",
      contrastingColor: "var(--contrasting-color-primary-500)",
    },
    600: {
      color: "var(--color-primary-600)",
      contrastingColor: "var(--contrasting-color-primary-600)",
    },
    700: {
      color: "var(--color-primary-700)",
      contrastingColor: "var(--contrasting-color-primary-700)",
    },
    800: {
      color: "var(--color-primary-800)",
      contrastingColor: "var(--contrasting-color-primary-800)",
    },
  },
  secondary: {
    400: {
      color: "var(--color-secondary-400)",
      contrastingColor: "var(--contrasting-color-secondary-400)",
    },
    500: {
      color: "var(--color-secondary-500)",
      contrastingColor: "var(--contrasting-color-secondary-500)",
    },
    600: {
      color: "var(--color-secondary-600)",
      contrastingColor: "var(--contrasting-color-secondary-600)",
    },
    700: {
      color: "var(--color-secondary-700)",
      contrastingColor: "var(--contrasting-color-secondary-700)",
    },
    800: {
      color: "var(--color-secondary-800)",
      contrastingColor: "var(--contrasting-color-secondary-800)",
    },
  },
  success: {
    400: {
      color: "var(--color-success-400)",
      contrastingColor: "var(--contrasting-color-success-400)",
    },
    500: {
      color: "var(--color-success-500)",
      contrastingColor: "var(--contrasting-color-success-500)",
    },
    600: {
      color: "var(--color-success-600)",
      contrastingColor: "var(--contrasting-color-success-600)",
    },
    700: {
      color: "var(--color-success-700)",
      contrastingColor: "var(--contrasting-color-success-700)",
    },
    800: {
      color: "var(--color-success-800)",
      contrastingColor: "var(--contrasting-color-success-800)",
    },
  },
  warning: {
    400: {
      color: "var(--color-warning-400)",
      contrastingColor: "var(--contrasting-color-warning-400)",
    },
    500: {
      color: "var(--color-warning-500)",
      contrastingColor: "var(--contrasting-color-warning-500)",
    },
    600: {
      color: "var(--color-warning-600)",
      contrastingColor: "var(--contrasting-color-warning-600)",
    },
    700: {
      color: "var(--color-warning-700)",
      contrastingColor: "var(--contrasting-color-warning-700)",
    },
    800: {
      color: "var(--color-warning-800)",
      contrastingColor: "var(--contrasting-color-warning-800)",
    },
  },
  error: {
    400: {
      color: "var(--color-error-400)",
      contrastingColor: "var(--contrasting-color-error-400)",
    },
    500: {
      color: "var(--color-error-500)",
      contrastingColor: "var(--contrasting-color-error-500)",
    },
    600: {
      color: "var(--color-error-600)",
      contrastingColor: "var(--contrasting-color-error-600)",
    },
    700: {
      color: "var(--color-error-700)",
      contrastingColor: "var(--contrasting-color-error-700)",
    },
    800: {
      color: "var(--color-error-800)",
      contrastingColor: "var(--contrasting-color-error-800)",
    },
  },
};