ui/tailwind.config.ts at main · base/ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import type { Config } from 'tailwindcss';

// BDS palette. The CSS variables (--bds-<family>-<step>) are defined in
// globals.css, so Tailwind color utilities resolve straight onto them. This
// mirrors the Base Design System config so classes like `bg-bds-gray-5` port as-is.
const BDS_COLOR_FAMILIES = [
  'blue',
  'teal',
  'green',
  'chartreuse',
  'yellow',
  'orange',
  'red',
  'pink',
  'purple',
  'indigo',
  'gray',
] as const;

const BDS_COLOR_STEPS = [
  '0',
  '5',
  '10',
  '15',
  '20',
  '30',
  '40',
  '50',
  '60',
  '70',
  '80',
  '90',
  '100',
] as const;

const bdsColors = Object.fromEntries(
  BDS_COLOR_FAMILIES.map((family) => [
    family,
    Object.fromEntries(BDS_COLOR_STEPS.map((step) => [step, `var(--bds-${family}-${step})`])),
  ]),
);

const config: Config = {
  // `data-theme` is set on <html> by the inline script in layout.tsx and
  // toggled/persisted by AppShell. It is an attribute rather than a class
  // because React owns <html className> (the next/font variables live there)
  // and reasserts it on render — which strips a `.dark` class on any route
  // that re-renders the root on the client, notably not-found and error
  // pages. React never touches attributes it does not render, so this sticks.
  darkMode: ['selector', '[data-theme="dark"]'],
  content: ['./app/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      colors: {
        background: 'var(--bds-gray-0)',
        foreground: 'var(--bds-gray-100)',
        base: {
          blue: 'var(--base-blue-p3)',
        },
        brand: {
          blue: 'var(--bds-brand)',
        },
        bds: bdsColors,
      },
      maxWidth: {
        content: 'var(--content-max-width, 1280px)',
      },
      width: {
        content: 'var(--content-max-width, 1280px)',
      },
      fontFamily: {
        sans: ['var(--font-base-sans)', 'sans-serif'],
        base: ['var(--font-base-sans)', 'sans-serif'],
        mono: ['var(--font-base-sans-mono)', 'monospace'],
        'base-sans': ['var(--font-base-sans)', 'sans-serif'],
        'base-text': ['var(--font-base-sans-text)', 'var(--font-base-sans)', 'sans-serif'],
        doto: ['var(--font-doto)', 'monospace'],
      },
      // Radix tooltip open/close transitions, ported with app/benchmark from
      // base/benchmark (which had them in its own Tailwind config).
      keyframes: {
        'fade-in': { '0%': { opacity: '0' }, '100%': { opacity: '1' } },
        'fade-out': { '0%': { opacity: '1' }, '100%': { opacity: '0' } },
      },
      animation: {
        'fade-in': 'fade-in 0.2s ease-out',
        'fade-out': 'fade-out 0.2s ease-out',
      },
    },
  },
  plugins: [],
};

export default config;