React: How to create a design token system in React?

1/* tokens.css */
2:root {
3  /* Colors */
4  --color-primary: #3b82f6;
5  --color-primary-hover: #2563eb;
6  --color-primary-active: #1d4ed8;
7  --color-surface: #ffffff;
8  --color-surface-elevated: #f9fafb;
9  --color-text: #1f2937;
10  --color-text-secondary: #6b7280;
11  --color-border: #e5e7eb;
12
13  /* Spacing scale (4px base) */
14  --space-0: 0px;
15  --space-1: 4px;
16  --space-2: 8px;
17  --space-3: 12px;
18  --space-4: 16px;
19  --space-5: 20px;
20  --space-6: 24px;
21  --space-8: 32px;
22  --space-10: 40px;
23  --space-12: 48px;
24
25  /* Typography */
26  --font-size-xs: 12px;
27  --font-size-sm: 14px;
28  --font-size-md: 16px;
29  --font-size-lg: 20px;
30  --font-size-xl: 24px;
31  --font-size-2xl: 32px;
32  --line-height-tight: 1.25;
33  --line-height-normal: 1.5;
34  --line-height-relaxed: 1.75;
35  --font-weight-normal: 400;
36  --font-weight-medium: 500;
37  --font-weight-bold: 700;
38
39  /* Shadows */
40  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
41  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
42  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
43
44  /* Border radius */
45  --radius-sm: 4px;
46  --radius-md: 8px;
47  --radius-lg: 12px;
48  --radius-full: 9999px;
49
50  /* Transitions */
51  --transition-fast: 150ms ease;
52  --transition-normal: 250ms ease;
53  --transition-slow: 350ms ease;
54}
55
56.dark {
57  --color-primary: #60a5fa;
58  --color-surface: #111827;
59  --color-text: #f9fafb;
60  --color-border: #374151;
61}

1// src/design-tokens.ts
2export const tokens = {
3  colors: {
4    primary: "#3b82f6",
5    primaryHover: "#2563eb",
6    primaryActive: "#1d4ed8",
7    surface: "#ffffff",
8    surfaceElevated: "#f9fafb",
9    text: "#1f2937",
10    textSecondary: "#6b7280",
11    border: "#e5e7eb"
12  },
13  spacing: {
14    0: "0px",
15    1: "4px",
16    2: "8px",
17    3: "12px",
18    4: "16px",
19    5: "20px",
20    6: "24px",
21    8: "32px",
22    10: "40px",
23    12: "48px"
24  },
25  radii: {
26    sm: "4px",
27    md: "8px",
28    lg: "12px",
29    full: "9999px"
30  }
31} as const;
32
33// tailwind.config.ts
34import { tokens } from "./src/design-tokens";
35
36export default {
37  theme: {
38    extend: {
39      colors: tokens.colors,
40      spacing: tokens.spacing,
41      borderRadius: tokens.radii
42    }
43  }
44};

1// Using CSS custom properties directly
2function Card({ title, children }: { title: string; children: React.ReactNode }) {
3  return (
4    <div style={{
5      background: "var(--color-surface-elevated)",
6      color: "var(--color-text)",
7      padding: "var(--space-4)",
8      borderRadius: "var(--radius-md)",
9      boxShadow: "var(--shadow-md)",
10      transition: "all var(--transition-normal)"
11    }}>
12      <h3>{title}</h3>
13      {children}
14    </div>
15  );
16}