index.css

/*
 * Main stylesheet for the public site: docs, home page, careers, etc. Also used in e2e/regression tests.
 *
 * Rules when writing CSS for the public site (except demos):
 *   - Components' CSS must be wrapped in "@layer components".
 *   - Use component name as the prefix to avoid conflicts, e.g. ".SelectTriggerIcon".
 *   - Prefix CSS variables with component name too, e.g. "--root-layout-padding-x".
 *   - Use custom utility classes (./utilities) for layout and one-off styles.
 *   - There are two reset layers:
 *     - "@layer all" is a truly global reset (includes all demos).
 *     - "@layer base" is Tailwind's reset (`tailwindcss/preflight`) that is reverted in non-Tailwind demos.
 *     - We rely on both to build the docs.
 *
 * Demos:
 * - Do not use our custom styles or CSS vars in demos.
 * - Only the Tailwind demos in the (docs) use Tailwind.
 *   - Use only what's available in Tailwind's default theme, both classes and CSS vars.
 */

/* Extend Tailwind layers to add our global reset layer `all` */
@layer all, base, theme, components, utilities;

@import 'tailwindcss/preflight' layer(base);
@import 'tailwindcss/theme' layer(theme);
/* `source(none)` disables automatic detection of sources to generate Tailwind classes. Use the safelist below instead. */
@import 'tailwindcss/utilities' layer(utilities) source(none);

/* ═══ Demo-specific theme ═══ */
/* We defined grays, red, and blue in the theme used for demos. */
/* Uses gray scale that is roughly compatible with Tailwind's grays. */
/* This is injected in demos when opening in a sandbox like StackBlitz. */
@import '../demo-data/theme/css-modules/theme.css' layer(theme);

/* ═══ Docs-only imports ═══ */

@import './fonts/index.css';
@import './custom-media.css';

/* TODO: Remove these component imports once we make these components' styles truly isolated and they import their own styles. */
@import '../components/Code.css';
@import '../components/Accordion.css';
@import '../components/Table.css';
@import '../components/TableCode.css';
@import '../components/DescriptionList.css';
@import '../components/ReferenceTable/ReferenceTable.css';

@import './syntax.css';

@import './utilities/index.css';

/* ═══ Safelist to generate Tailwind classes ═══ */

@source '../app/(docs)/react/**/demos/**/*.{ts,tsx}';

/* Temporary sources until Tailwind CSS vars are no longer used in them */
@source './mdx-components.css';
@source '../src/components/**/*.css';

/* ═══ Tailwind theme ═══ */
/* Register demo-relevant tokens so Tailwind can generate utility classes. */

@theme {
  /* Handy link to the default Tailwind theme: https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/theme.css */

  /* Color */
  --color-*: initial; /* Disable all Tailwind colors to only add our own */
  --color-white: white;
  --color-black: black;

  /* Gray, red and blue colors defined in file://../demo-data/theme/css-modules/theme.css */
  --color-gray-50: inherit;
  --color-gray-100: inherit;
  --color-gray-200: inherit;
  --color-gray-300: inherit;
  --color-gray-400: inherit;
  --color-gray-500: inherit;
  --color-gray-600: inherit;
  --color-gray-700: inherit;
  --color-gray-800: inherit;
  --color-gray-900: inherit;
  --color-gray-950: inherit;

  --color-blue: inherit;
  --color-red: inherit;

  --color-blue-800: var(--color-blue);
  --color-red-800: var(--color-red);

  /* Typography */
  --font-mono: 'Paper Mono', monospace;
  --font-sans: 'die grotesk a', system-ui, sans-serif;
  --font-sans-b: 'die grotesk b', system-ui, sans-serif;
  --font-serif: Georgia, 'Times New Roman', Times, 'Noto Serif', 'DejaVu Serif', serif;

  --text-xs: 0.8125rem;
  --text-xs--line-height: 1.25rem;
  --text-xs--letter-spacing: 0.001em;

  --text-sm: 0.875rem;
  --text-sm--line-height: 1.25rem;
  --text-sm--letter-spacing: 0.016em;

  --text-base: 1rem;
  --text-base--line-height: 1.5rem;
  --text-base--letter-spacing: 0em;

  --text-lg: 1.125rem;
  --text-lg--line-height: 1.75rem;
  --text-lg--letter-spacing: -0.0025em;

  --text-xl: 1.3125rem;
  --text-xl--line-height: 1.625rem;
  --text-xl--letter-spacing: -0.005em;

  --text-2xl: 1.5rem;
  --text-2xl--line-height: 1.25;
  --text-2xl--letter-spacing: -0.0125em;

  --text-3xl: 1.875rem;
  --text-3xl--line-height: 1.2;
  --text-3xl--letter-spacing: -0.015em;

  --text-4xl: 2.25rem;
  --text-4xl--line-height: 2.5rem;
  --text-4xl--letter-spacing: -0.015em;

  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --text-5xl--letter-spacing: -0.015em;

  --text-6xl: 3.75rem;
  --text-6xl--line-height: 0.95;
  --text-6xl--letter-spacing: -0.015em;
}

/* ═══ Demo isolation ═══ */
/* Undo `tailwindcss/preflight` in non-Tailwind demos. */

@layer base {
  /* Undo Die Grotesk OpenType features in demos and regression tests */
  [data-demo],
  [data-testid='testcase'] {
    font-feature-settings: normal;
  }

  [data-demo]:not([data-demo='tailwind']) * {
    all: revert-layer;
  }

  [data-demo='tailwind'] {
    --text-sm--letter-spacing: 0em;
    --text-md--letter-spacing: 0em;
  }
}

/* ═══ Docs-only theme tokens ═══ */

@layer theme {
  :root {
    /* Colors */
    --gray-s1: hsl(0deg 0% 99%);
    --gray-s2: hsl(0deg 0% 97.5%);
    --gray-c1: hsl(0deg 0% 95.25%);
    --gray-c2: hsl(0deg 0% 94%);
    --gray-c3: hsl(0deg 0% 88%);
    --gray-p1: hsl(0deg 0% 55%);
    --gray-p2: hsl(0deg 0% 51%);
    --gray-t1: hsl(0deg 0% 46.4%);
    --gray-t2: hsl(0deg 0% 18%);

    --indigo-s1: hsl(204deg 100% 98.75%);
    --indigo-s2: hsl(198deg 100% 97.5%);
    --indigo-c1: hsl(204deg 100% 95%);
    --indigo-c2: hsl(205deg 100% 93.5%);
    --indigo-c3: hsl(206deg 100% 92.5%);
    --indigo-p1: hsl(214deg 98% 50%);
    --indigo-p2: hsl(207deg 96% 48%);
    --indigo-t1: hsl(221deg 74% 51%);
    --indigo-t2: hsl(221deg 74% 19.8%);

    --blackA-1: hsl(0deg 0% 0% / 4%);
    --blackA-2: hsl(0deg 0% 0% / 8%);
    --blackA-3: hsl(0deg 0% 0% / 12%);
    --blackA-4: hsl(0deg 0% 0% / 16%);
    --blackA-5: hsl(0deg 0% 0% / 24%);
    --blackA-6: hsl(0deg 0% 0% / 64%);

    --poppy-t1: hsl(10deg 86% 48%);
    --blue-t1: hsl(211deg 100% 49%);
    --green-t1: hsl(156deg 81% 29%);
    --orange-t1: hsl(14deg 96% 52.5%);
    --pink-t1: hsl(316deg 84% 51%);
    --grape-t1: hsl(276deg 66% 54%);
    --lime-t1: hsl(91deg 64% 38.75%);

    /* Functional colors */
    --color-content: white;
    --color-background: var(--gray-s2);
    --color-foreground: var(--gray-t2);
    --color-popup: white;
    --color-gridline: var(--gray-c3);
    --color-selection: oklch(80% 28% 264deg / 50%);
    --color-line-highlight: oklch(80% 28% 264deg / 20%);
    --color-line-highlight-strong: oklch(80% 28% 264deg / 35%);
    --color-line-highlight-strong-mark: oklch(80% 28% 264deg / 50%);

    /* Syntax highlighting */
    --color-gray: var(--color-gray-600);
    --color-navy: oklch(31% 25% 264deg);
    --color-green: oklch(46% 30% 150deg);
    --color-violet: oklch(40% 60% 300deg);

    /* Font size */
    --font-size-13: 0.8125rem; /* 13px */
    --font-size-14: 0.875rem; /* 14px */
    --font-size-15: 0.9375rem; /* 15px */
    --font-size-16: 1rem; /* 16px */
    --font-size-18: 1.125rem; /* 18px */
    --font-size-21: 1.3125rem; /* 21px */
    --font-size-24: 1.5rem; /* 24px */
    --font-size-34: 2.125rem; /* 34px */
    --font-size-42: 2.625rem; /* 42px */

    /* Font weight */
    --font-weight-400: 400;
    --font-weight-700: 700;

    /* Spacing (`--spacing-*` is used by Tailwind) */
    --space-4: 0.25rem; /* 4px */
    --space-8: 0.5rem; /* 8px */
    --space-12: 0.75rem; /* 12px */
    --space-16: 1rem; /* 16px */
    --space-20: 1.25rem; /* 20px */
    --space-24: 1.5rem; /* 24px */
    --space-28: 1.75rem; /* 28px */
    --space-32: 2rem; /* 32px */
    --space-40: 2.5rem; /* 40px */
    --space-48: 3rem; /* 48px */

    /* Radius */
    --radius-2: 0.125rem; /* 2px */
    --radius-3: 0.1875rem; /* 3px */
    --radius-4: 0.25rem; /* 4px */
    --radius-6: 0.375rem; /* 6px */
    --radius-8: 0.5rem; /* 8px */
    --radius-12: 0.75rem; /* 12px */
    --radius-16: 1rem; /* 16px */
    --radius-pill: 9999px;
    --radius-circle: 50%;

    /* Shadow */
    --shadow-1:
      0 1px 1px 0 var(--blackA-1), 0 2px 1px -1px var(--blackA-1), 0 1px 3px 0 var(--blackA-1);
    --shadow-2:
      0 1px 1px 0 var(--blackA-1), 0 1px 3px -1px var(--blackA-1), 0 4px 8px -2px var(--blackA-1);
    --shadow-3:
      0 1px 1px 0 var(--blackA-1), 0 2px 6px -1px var(--blackA-1), 0 6px 12px -3px var(--blackA-1),
      0 8px 16px -4px var(--blackA-1);
    --shadow-4:
      0 1px 1px 0 var(--blackA-1), 0 2px 4px -1px var(--blackA-1), 0 4px 8px -2px var(--blackA-1),
      0 12px 32px -6px var(--blackA-3), 0 20px 48px -10px var(--blackA-1);
    --shadow-5:
      0 10px 32px var(--blackA-5), 0 1px 1px var(--blackA-1), 0 4px 6px var(--blackA-2),
      0 1px 1px var(--blackA-2), 0 24px 68px var(--blackA-4);

    /* Breakpoints (use custom-media.css where possible) */
    --breakpoint-max-layout-width: 89rem; /* 1424px - this is a 1440px device minus 16px scrollbar */

    --ease-out-fast: cubic-bezier(0.45, 1.005, 0, 1.005);
    --ease-in-slow: cubic-bezier(0.375, 0.015, 0.545, 0.455);
    --header-height: 3rem;
  }

  /* ═══ Dark mode overrides ═══ */

  @media (prefers-color-scheme: dark) {
    :root {
      --gray-s1: hsl(0deg 0% 7.5%);
      --gray-s2: hsl(0deg 0% 10%);
      --gray-c1: hsl(0deg 0% 13%);
      --gray-c2: hsl(0deg 0% 16%);
      --gray-c3: hsl(0deg 0% 32%);
      --gray-p1: hsl(0deg 0% 60%);
      --gray-p2: hsl(0deg 0% 64%);
      --gray-t1: hsl(0deg 0% 70%);
      --gray-t2: hsl(0deg 0% 90%);

      --indigo-s1: hsl(223deg 38% 10%);
      --indigo-s2: hsl(223deg 42% 12%);
      --indigo-c1: hsl(222deg 50% 16%);
      --indigo-c2: hsl(221deg 56% 20%);
      --indigo-c3: hsl(220deg 62% 24%);
      --indigo-p1: hsl(214deg 94% 60%);
      --indigo-p2: hsl(207deg 96% 64%);
      --indigo-t1: hsl(214deg 93% 66%);
      --indigo-t2: hsl(210deg 100% 86%);

      --blackA-1: transparent;
      --blackA-2: transparent;
      --blackA-3: transparent;
      --blackA-4: transparent;
      --blackA-5: transparent;
      --blackA-6: transparent;

      --poppy-t1: hsl(10deg 96% 63%);
      --blue-t1: hsl(210deg 98% 66%);
      --green-t1: hsl(156deg 68% 54%);
      --orange-t1: hsl(26deg 98% 63%);
      --pink-t1: hsl(316deg 86% 68%);
      --grape-t1: hsl(276deg 86% 70%);
      --lime-t1: hsl(91deg 72% 56%);

      /* Functional colors */
      --color-content: black;
      --color-background: black;
      --color-popup: var(--gray-s1);
      --color-gridline: var(--gray-c1);
      --color-selection: oklch(50% 50% 264deg / 40%);
      --color-line-highlight: oklch(50% 50% 264deg / 20%);
      --color-line-highlight-strong: oklch(50% 50% 264deg / 35%);
      --color-line-highlight-strong-mark: oklch(50% 50% 264deg / 50%);

      /* Syntax highlighting */
      --color-gray: var(--color-gray-600);
      --color-green: oklch(75% 25% 150deg);
      --color-navy: oklch(85% 25% 264deg);
      --color-violet: oklch(80% 60% 280deg);
    }
  }

  /* ═══ Disable docs-specific variables in demos ═══ */
  /* Keep this in sync with the :root block above. */

  [data-demo] {
    --gray-s1: initial;
    --gray-s2: initial;
    --gray-c1: initial;
    --gray-c2: initial;
    --gray-c3: initial;
    --gray-p1: initial;
    --gray-p2: initial;
    --gray-t1: initial;
    --gray-t2: initial;

    --indigo-s1: initial;
    --indigo-s2: initial;
    --indigo-c1: initial;
    --indigo-c2: initial;
    --indigo-c3: initial;
    --indigo-p1: initial;
    --indigo-p2: initial;
    --indigo-t1: initial;
    --indigo-t2: initial;

    --blackA-1: initial;
    --blackA-2: initial;
    --blackA-3: initial;
    --blackA-4: initial;
    --blackA-5: initial;
    --blackA-6: initial;

    --poppy-t1: initial;
    --blue-t1: initial;
    --green-t1: initial;
    --orange-t1: initial;
    --pink-t1: initial;
    --grape-t1: initial;
    --lime-t1: initial;

    --radius-2: initial;
    --radius-3: initial;
    --radius-4: initial;
    --radius-6: initial;
    --radius-8: initial;
    --radius-12: initial;
    --radius-16: initial;
    --radius-pill: initial;
    --radius-circle: initial;

    --space-4: initial;
    --space-8: initial;
    --space-12: initial;
    --space-16: initial;
    --space-20: initial;
    --space-24: initial;
    --space-28: initial;
    --space-32: initial;
    --space-40: initial;
    --space-48: initial;

    --color-content: initial;
    --color-background: initial;
    --color-foreground: initial;
    --color-popup: initial;
    --color-gridline: initial;
    --color-highlight: initial;
    --color-line-highlight: initial;
    --color-line-highlight-strong: initial;
    --color-line-highlight-strong-mark: initial;

    --color-gray: initial;
    --color-navy: initial;
    --color-green: initial;
    --color-violet: initial;

    --shadow-1: initial;
    --shadow-2: initial;
    --shadow-3: initial;
    --shadow-4: initial;
    --shadow-5: initial;

    --font-size-13: initial;
    --font-size-14: initial;
    --font-size-15: initial;
    --font-size-16: initial;
    --font-size-18: initial;
    --font-size-21: initial;
    --font-size-24: initial;
    --font-size-34: initial;
    --font-size-42: initial;

    --ease-out-fast: initial;
    --ease-in-slow: initial;
    --header-height: initial;

    --breakpoint-max-layout-width: initial;
  }
}

/* ═══ Global rules ═══ */

@layer all {
  html {
    color-scheme: light dark;
    word-break: break-word;
  }

  body {
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Stable scrollbar */
    overflow-y: scroll;
    /* Die Grotesk OpenType features */
    font-feature-settings:
      'ss02' 1,
      'zero' 1;
  }

  /* Debugging red text? You just forgot to set or inherit color in your demo. */
  :where([data-demo]) {
    color: red;
  }
  /* Controls usually have #000 text that needs to be explicitly overridden; only Tailwind reset handles it */
  :where([data-demo]:not([data-demo='tailwind'])) :where(button, input, textarea) {
    color: red;
  }
}