1{
2  "$schema": "https://design-tokens.org/schema.json",
3  "primitive": {
4    "color": {
5      "gray": {
6        "50": { "$value": "#F9FAFB", "$type": "color" },
7        "100": { "$value": "#F3F4F6", "$type": "color" },
8        "200": { "$value": "#E5E7EB", "$type": "color" },
9        "300": { "$value": "#D1D5DB", "$type": "color" },
10        "400": { "$value": "#9CA3AF", "$type": "color" },
11        "500": { "$value": "#6B7280", "$type": "color" },
12        "600": { "$value": "#4B5563", "$type": "color" },
13        "700": { "$value": "#374151", "$type": "color" },
14        "800": { "$value": "#1F2937", "$type": "color" },
15        "900": { "$value": "#111827", "$type": "color" },
16        "950": { "$value": "#030712", "$type": "color" }
17      },
18      "blue": {
19        "50": { "$value": "#EFF6FF", "$type": "color" },
20        "500": { "$value": "#3B82F6", "$type": "color" },
21        "600": { "$value": "#2563EB", "$type": "color" },
22        "700": { "$value": "#1D4ED8", "$type": "color" },
23        "800": { "$value": "#1E40AF", "$type": "color" }
24      },
25      "red": {
26        "500": { "$value": "#EF4444", "$type": "color" },
27        "600": { "$value": "#DC2626", "$type": "color" },
28        "700": { "$value": "#B91C1C", "$type": "color" }
29      },
30      "green": {
31        "500": { "$value": "#22C55E", "$type": "color" },
32        "600": { "$value": "#16A34A", "$type": "color" }
33      },
34      "yellow": {
35        "500": { "$value": "#EAB308", "$type": "color" }
36      },
37      "white": { "$value": "#FFFFFF", "$type": "color" }
38    },
39    "spacing": {
40      "0": { "$value": "0", "$type": "dimension" },
41      "1": { "$value": "0.25rem", "$type": "dimension" },
42      "2": { "$value": "0.5rem", "$type": "dimension" },
43      "3": { "$value": "0.75rem", "$type": "dimension" },
44      "4": { "$value": "1rem", "$type": "dimension" },
45      "5": { "$value": "1.25rem", "$type": "dimension" },
46      "6": { "$value": "1.5rem", "$type": "dimension" },
47      "8": { "$value": "2rem", "$type": "dimension" },
48      "10": { "$value": "2.5rem", "$type": "dimension" },
49      "12": { "$value": "3rem", "$type": "dimension" },
50      "16": { "$value": "4rem", "$type": "dimension" }
51    },
52    "fontSize": {
53      "xs": { "$value": "0.75rem", "$type": "dimension" },
54      "sm": { "$value": "0.875rem", "$type": "dimension" },
55      "base": { "$value": "1rem", "$type": "dimension" },
56      "lg": { "$value": "1.125rem", "$type": "dimension" },
57      "xl": { "$value": "1.25rem", "$type": "dimension" },
58      "2xl": { "$value": "1.5rem", "$type": "dimension" },
59      "3xl": { "$value": "1.875rem", "$type": "dimension" },
60      "4xl": { "$value": "2.25rem", "$type": "dimension" }
61    },
62    "radius": {
63      "none": { "$value": "0", "$type": "dimension" },
64      "sm": { "$value": "0.125rem", "$type": "dimension" },
65      "default": { "$value": "0.25rem", "$type": "dimension" },
66      "md": { "$value": "0.375rem", "$type": "dimension" },
67      "lg": { "$value": "0.5rem", "$type": "dimension" },
68      "xl": { "$value": "0.75rem", "$type": "dimension" },
69      "full": { "$value": "9999px", "$type": "dimension" }
70    },
71    "shadow": {
72      "none": { "$value": "none", "$type": "shadow" },
73      "sm": { "$value": "0 1px 2px 0 rgb(0 0 0 / 0.05)", "$type": "shadow" },
74      "default": { "$value": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)", "$type": "shadow" },
75      "md": { "$value": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)", "$type": "shadow" },
76      "lg": { "$value": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)", "$type": "shadow" }
77    },
78    "duration": {
79      "fast": { "$value": "150ms", "$type": "duration" },
80      "normal": { "$value": "200ms", "$type": "duration" },
81      "slow": { "$value": "300ms", "$type": "duration" }
82    }
83  },
84  "semantic": {
85    "color": {
86      "background": { "$value": "{primitive.color.gray.50}", "$type": "color" },
87      "foreground": { "$value": "{primitive.color.gray.900}", "$type": "color" },
88      "primary": { "$value": "{primitive.color.blue.600}", "$type": "color" },
89      "primary-hover": { "$value": "{primitive.color.blue.700}", "$type": "color" },
90      "primary-foreground": { "$value": "{primitive.color.white}", "$type": "color" },
91      "secondary": { "$value": "{primitive.color.gray.100}", "$type": "color" },
92      "secondary-foreground": { "$value": "{primitive.color.gray.900}", "$type": "color" },
93      "muted": { "$value": "{primitive.color.gray.100}", "$type": "color" },
94      "muted-foreground": { "$value": "{primitive.color.gray.500}", "$type": "color" },
95      "destructive": { "$value": "{primitive.color.red.600}", "$type": "color" },
96      "destructive-foreground": { "$value": "{primitive.color.white}", "$type": "color" },
97      "border": { "$value": "{primitive.color.gray.200}", "$type": "color" },
98      "ring": { "$value": "{primitive.color.blue.500}", "$type": "color" }
99    },
100    "spacing": {
101      "component": { "$value": "{primitive.spacing.4}", "$type": "dimension" },
102      "section": { "$value": "{primitive.spacing.12}", "$type": "dimension" }
103    }
104  },
105  "component": {
106    "button": {
107      "bg": { "$value": "{semantic.color.primary}", "$type": "color" },
108      "fg": { "$value": "{semantic.color.primary-foreground}", "$type": "color" },
109      "hover-bg": { "$value": "{semantic.color.primary-hover}", "$type": "color" },
110      "padding-x": { "$value": "{primitive.spacing.4}", "$type": "dimension" },
111      "padding-y": { "$value": "{primitive.spacing.2}", "$type": "dimension" },
112      "radius": { "$value": "{primitive.radius.md}", "$type": "dimension" },
113      "font-size": { "$value": "{primitive.fontSize.sm}", "$type": "dimension" }
114    },
115    "input": {
116      "bg": { "$value": "{semantic.color.background}", "$type": "color" },
117      "border": { "$value": "{semantic.color.border}", "$type": "color" },
118      "focus-ring": { "$value": "{semantic.color.ring}", "$type": "color" },
119      "padding-x": { "$value": "{primitive.spacing.3}", "$type": "dimension" },
120      "padding-y": { "$value": "{primitive.spacing.2}", "$type": "dimension" },
121      "radius": { "$value": "{primitive.radius.md}", "$type": "dimension" }
122    },
123    "card": {
124      "bg": { "$value": "{primitive.color.white}", "$type": "color" },
125      "border": { "$value": "{semantic.color.border}", "$type": "color" },
126      "shadow": { "$value": "{primitive.shadow.default}", "$type": "shadow" },
127      "padding": { "$value": "{primitive.spacing.6}", "$type": "dimension" },
128      "radius": { "$value": "{primitive.radius.lg}", "$type": "dimension" }
129    }
130  },
131  "dark": {
132    "semantic": {
133      "color": {
134        "background": { "$value": "{primitive.color.gray.950}", "$type": "color" },
135        "foreground": { "$value": "{primitive.color.gray.50}", "$type": "color" },
136        "secondary": { "$value": "{primitive.color.gray.800}", "$type": "color" },
137        "muted": { "$value": "{primitive.color.gray.800}", "$type": "color" },
138        "muted-foreground": { "$value": "{primitive.color.gray.400}", "$type": "color" },
139        "border": { "$value": "{primitive.color.gray.800}", "$type": "color" }
140      }
141    }
142  }
143}
144