@kjaniec-dev/design 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +21 -0
  2. package/src/tailwind.css +40 -0
  3. package/src/theme.css +81 -0
  4. package/tailwind.css +40 -0
  5. package/theme.css +85 -0
  6. package/tokens.json +554 -0
package/package.json ADDED
@@ -0,0 +1,21 @@
1
+ {
2
+ "name": "@kjaniec-dev/design",
3
+ "version": "0.1.0",
4
+ "exports": {
5
+ "./theme.css": {
6
+ "style": "./theme.css",
7
+ "default": "./theme.css"
8
+ },
9
+ "./tailwind.css": {
10
+ "style": "./tailwind.css",
11
+ "default": "./tailwind.css"
12
+ },
13
+ "./tokens.json": "./tokens.json"
14
+ },
15
+ "files": [
16
+ "theme.css",
17
+ "tailwind.css",
18
+ "tokens.json",
19
+ "src"
20
+ ]
21
+ }
package/src/tailwind.css ADDED
@@ -0,0 +1,40 @@
1
+ @import "./theme.css";
2
+
3
+ @theme {
4
+ --color-background: var(--kj-background);
5
+ --color-foreground: var(--kj-foreground);
6
+ --color-surface: var(--kj-surface);
7
+ --color-card: var(--kj-card);
8
+ --color-card-foreground: var(--kj-card-foreground);
9
+ --color-primary: var(--kj-primary);
10
+ --color-primary-hover: var(--kj-primary-hover);
11
+ --color-primary-foreground: var(--kj-primary-foreground);
12
+ --color-secondary: var(--kj-secondary);
13
+ --color-secondary-hover: var(--kj-secondary-hover);
14
+ --color-secondary-foreground: var(--kj-secondary-foreground);
15
+ --color-muted: var(--kj-muted);
16
+ --color-muted-foreground: var(--kj-muted-foreground);
17
+ --color-border: var(--kj-border);
18
+ --color-input: var(--kj-input);
19
+ --color-ring: var(--kj-ring);
20
+ --color-success: var(--kj-success);
21
+ --color-success-surface: var(--kj-success-surface);
22
+ --color-warning: var(--kj-warning);
23
+ --color-warning-surface: var(--kj-warning-surface);
24
+ --color-danger: var(--kj-danger);
25
+ --color-danger-surface: var(--kj-danger-surface);
26
+ --color-info: var(--kj-info);
27
+ --color-info-surface: var(--kj-info-surface);
28
+ --font-sans: var(--kj-font-sans);
29
+ --font-mono: var(--kj-font-mono);
30
+ --radius-kj-sm: var(--kj-radius-sm);
31
+ --radius-kj-md: var(--kj-radius-md);
32
+ --radius-kj-lg: var(--kj-radius-lg);
33
+ --radius-kj-xl: var(--kj-radius-xl);
34
+ --radius-kj-2xl: var(--kj-radius-2xl);
35
+ --shadow-kj-xs: var(--kj-shadow-xs);
36
+ --shadow-kj-sm: var(--kj-shadow-sm);
37
+ --shadow-kj-md: var(--kj-shadow-md);
38
+ --shadow-kj-lg: var(--kj-shadow-lg);
39
+ --shadow-kj-glow: var(--kj-shadow-glow);
40
+ }
package/src/theme.css ADDED
@@ -0,0 +1,81 @@
1
+ :root {
2
+ color-scheme: light;
3
+ --kj-background: #fafafa;
4
+ --kj-foreground: #09090b;
5
+ --kj-surface: #ffffff;
6
+ --kj-card: #ffffff;
7
+ --kj-card-foreground: #09090b;
8
+ --kj-primary: #f59e0b;
9
+ --kj-primary-hover: #d97706;
10
+ --kj-primary-foreground: #09090b;
11
+ --kj-secondary: #14b8a6;
12
+ --kj-secondary-hover: #0d9488;
13
+ --kj-secondary-foreground: #ffffff;
14
+ --kj-muted: #f4f4f5;
15
+ --kj-muted-foreground: #71717a;
16
+ --kj-border: #e4e4e7;
17
+ --kj-input: #e4e4e7;
18
+ --kj-ring: #f59e0b;
19
+ --kj-success: #059669;
20
+ --kj-success-surface: #ecfdf5;
21
+ --kj-warning: #d97706;
22
+ --kj-warning-surface: #fffbeb;
23
+ --kj-danger: #e11d48;
24
+ --kj-danger-surface: #fff1f2;
25
+ --kj-info: #0284c7;
26
+ --kj-info-surface: #f0f9ff;
27
+ --kj-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
28
+ --kj-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
29
+ --kj-radius-sm: 0.5rem;
30
+ --kj-radius-md: 0.75rem;
31
+ --kj-radius-lg: 1rem;
32
+ --kj-radius-xl: 1.25rem;
33
+ --kj-radius-2xl: 1.5rem;
34
+ --kj-shadow-xs: 0 1px 2px rgb(15 23 42 / 0.05);
35
+ --kj-shadow-sm: 0 1px 3px rgb(15 23 42 / 0.08), 0 1px 2px rgb(15 23 42 / 0.04);
36
+ --kj-shadow-md: 0 8px 30px rgb(15 23 42 / 0.08);
37
+ --kj-shadow-lg: 0 20px 60px rgb(15 23 42 / 0.12);
38
+ --kj-shadow-glow: 0 0 0 1px rgb(245 158 11 / 0.16), 0 16px 48px rgb(245 158 11 / 0.18);
39
+ }
40
+
41
+ .dark {
42
+ color-scheme: dark;
43
+ --kj-background: #09090b;
44
+ --kj-foreground: #fafafa;
45
+ --kj-surface: #18181b;
46
+ --kj-card: #18181b;
47
+ --kj-card-foreground: #fafafa;
48
+ --kj-primary: #fbbf24;
49
+ --kj-primary-hover: #f59e0b;
50
+ --kj-primary-foreground: #09090b;
51
+ --kj-secondary: #2dd4bf;
52
+ --kj-secondary-hover: #14b8a6;
53
+ --kj-secondary-foreground: #042f2e;
54
+ --kj-muted: #27272a;
55
+ --kj-muted-foreground: #a1a1aa;
56
+ --kj-border: #27272a;
57
+ --kj-input: #27272a;
58
+ --kj-ring: #fbbf24;
59
+ --kj-success: #10b981;
60
+ --kj-success-surface: #022c22;
61
+ --kj-warning: #fbbf24;
62
+ --kj-warning-surface: #451a03;
63
+ --kj-danger: #f43f5e;
64
+ --kj-danger-surface: #4c0519;
65
+ --kj-info: #0ea5e9;
66
+ --kj-info-surface: #082f49;
67
+ }
68
+
69
+ html {
70
+ background: var(--kj-background);
71
+ color: var(--kj-foreground);
72
+ font-family: var(--kj-font-sans);
73
+ }
74
+
75
+ .kj-card {
76
+ background: var(--kj-card);
77
+ color: var(--kj-card-foreground);
78
+ border: 1px solid var(--kj-border);
79
+ border-radius: var(--kj-radius-2xl);
80
+ box-shadow: var(--kj-shadow-sm);
81
+ }
package/tailwind.css ADDED
@@ -0,0 +1,40 @@
1
+ @import "./theme.css";
2
+
3
+ @theme {
4
+ --color-background: var(--kj-background);
5
+ --color-foreground: var(--kj-foreground);
6
+ --color-surface: var(--kj-surface);
7
+ --color-card: var(--kj-card);
8
+ --color-card-foreground: var(--kj-card-foreground);
9
+ --color-primary: var(--kj-primary);
10
+ --color-primary-hover: var(--kj-primary-hover);
11
+ --color-primary-foreground: var(--kj-primary-foreground);
12
+ --color-secondary: var(--kj-secondary);
13
+ --color-secondary-hover: var(--kj-secondary-hover);
14
+ --color-secondary-foreground: var(--kj-secondary-foreground);
15
+ --color-muted: var(--kj-muted);
16
+ --color-muted-foreground: var(--kj-muted-foreground);
17
+ --color-border: var(--kj-border);
18
+ --color-input: var(--kj-input);
19
+ --color-ring: var(--kj-ring);
20
+ --color-success: var(--kj-success);
21
+ --color-success-surface: var(--kj-success-surface);
22
+ --color-warning: var(--kj-warning);
23
+ --color-warning-surface: var(--kj-warning-surface);
24
+ --color-danger: var(--kj-danger);
25
+ --color-danger-surface: var(--kj-danger-surface);
26
+ --color-info: var(--kj-info);
27
+ --color-info-surface: var(--kj-info-surface);
28
+ --font-sans: var(--kj-font-sans);
29
+ --font-mono: var(--kj-font-mono);
30
+ --radius-kj-sm: var(--kj-radius-sm);
31
+ --radius-kj-md: var(--kj-radius-md);
32
+ --radius-kj-lg: var(--kj-radius-lg);
33
+ --radius-kj-xl: var(--kj-radius-xl);
34
+ --radius-kj-2xl: var(--kj-radius-2xl);
35
+ --shadow-kj-xs: var(--kj-shadow-xs);
36
+ --shadow-kj-sm: var(--kj-shadow-sm);
37
+ --shadow-kj-md: var(--kj-shadow-md);
38
+ --shadow-kj-lg: var(--kj-shadow-lg);
39
+ --shadow-kj-glow: var(--kj-shadow-glow);
40
+ }
package/theme.css ADDED
@@ -0,0 +1,85 @@
1
+ :root {
2
+ color-scheme: light;
3
+ --kj-background: #fafafa;
4
+ --kj-foreground: #09090b;
5
+ --kj-surface: #ffffff;
6
+ --kj-card: #ffffff;
7
+ --kj-card-foreground: #09090b;
8
+ --kj-primary: #f59e0b;
9
+ --kj-primary-hover: #d97706;
10
+ --kj-primary-foreground: #09090b;
11
+ --kj-secondary: #14b8a6;
12
+ --kj-secondary-hover: #0d9488;
13
+ --kj-secondary-foreground: #ffffff;
14
+ --kj-muted: #f4f4f5;
15
+ --kj-muted-foreground: #71717a;
16
+ --kj-border: #e4e4e7;
17
+ --kj-input: #e4e4e7;
18
+ --kj-ring: #f59e0b;
19
+ --kj-success: #059669;
20
+ --kj-success-surface: #ecfdf5;
21
+ --kj-warning: #d97706;
22
+ --kj-warning-surface: #fffbeb;
23
+ --kj-danger: #e11d48;
24
+ --kj-danger-surface: #fff1f2;
25
+ --kj-info: #0284c7;
26
+ --kj-info-surface: #f0f9ff;
27
+ --kj-font-sans:
28
+ Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
29
+ "Segoe UI", sans-serif;
30
+ --kj-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
31
+ --kj-radius-sm: 0.5rem;
32
+ --kj-radius-md: 0.75rem;
33
+ --kj-radius-lg: 1rem;
34
+ --kj-radius-xl: 1.25rem;
35
+ --kj-radius-2xl: 1.5rem;
36
+ --kj-shadow-xs: 0 1px 2px rgb(15 23 42 / 0.05);
37
+ --kj-shadow-sm:
38
+ 0 1px 3px rgb(15 23 42 / 0.08), 0 1px 2px rgb(15 23 42 / 0.04);
39
+ --kj-shadow-md: 0 8px 30px rgb(15 23 42 / 0.08);
40
+ --kj-shadow-lg: 0 20px 60px rgb(15 23 42 / 0.12);
41
+ --kj-shadow-glow:
42
+ 0 0 0 1px rgb(245 158 11 / 0.16), 0 16px 48px rgb(245 158 11 / 0.18);
43
+ }
44
+
45
+ .dark {
46
+ color-scheme: dark;
47
+ --kj-background: #09090b;
48
+ --kj-foreground: #fafafa;
49
+ --kj-surface: #18181b;
50
+ --kj-card: #18181b;
51
+ --kj-card-foreground: #fafafa;
52
+ --kj-primary: #fbbf24;
53
+ --kj-primary-hover: #f59e0b;
54
+ --kj-primary-foreground: #09090b;
55
+ --kj-secondary: #2dd4bf;
56
+ --kj-secondary-hover: #14b8a6;
57
+ --kj-secondary-foreground: #042f2e;
58
+ --kj-muted: #27272a;
59
+ --kj-muted-foreground: #a1a1aa;
60
+ --kj-border: #27272a;
61
+ --kj-input: #27272a;
62
+ --kj-ring: #fbbf24;
63
+ --kj-success: #10b981;
64
+ --kj-success-surface: #022c22;
65
+ --kj-warning: #fbbf24;
66
+ --kj-warning-surface: #451a03;
67
+ --kj-danger: #f43f5e;
68
+ --kj-danger-surface: #4c0519;
69
+ --kj-info: #0ea5e9;
70
+ --kj-info-surface: #082f49;
71
+ }
72
+
73
+ html {
74
+ background: var(--kj-background);
75
+ color: var(--kj-foreground);
76
+ font-family: var(--kj-font-sans);
77
+ }
78
+
79
+ .kj-card {
80
+ background: var(--kj-card);
81
+ color: var(--kj-card-foreground);
82
+ border: 1px solid var(--kj-border);
83
+ border-radius: var(--kj-radius-2xl);
84
+ box-shadow: var(--kj-shadow-sm);
85
+ }
package/tokens.json ADDED
@@ -0,0 +1,554 @@
1
+ {
2
+ "$schema": "https://design-tokens.github.io/community-group/format/",
3
+ "name": "KJ Product Kit",
4
+ "version": "0.1.0",
5
+ "description": "Personal product design system tokens for KJ apps, portfolio, dashboards and SaaS tools.",
6
+ "color": {
7
+ "primitive": {
8
+ "zinc": {
9
+ "50": {
10
+ "$type": "color",
11
+ "$value": "#fafafa"
12
+ },
13
+ "100": {
14
+ "$type": "color",
15
+ "$value": "#f4f4f5"
16
+ },
17
+ "200": {
18
+ "$type": "color",
19
+ "$value": "#e4e4e7"
20
+ },
21
+ "300": {
22
+ "$type": "color",
23
+ "$value": "#d4d4d8"
24
+ },
25
+ "400": {
26
+ "$type": "color",
27
+ "$value": "#a1a1aa"
28
+ },
29
+ "500": {
30
+ "$type": "color",
31
+ "$value": "#71717a"
32
+ },
33
+ "600": {
34
+ "$type": "color",
35
+ "$value": "#52525b"
36
+ },
37
+ "700": {
38
+ "$type": "color",
39
+ "$value": "#3f3f46"
40
+ },
41
+ "800": {
42
+ "$type": "color",
43
+ "$value": "#27272a"
44
+ },
45
+ "900": {
46
+ "$type": "color",
47
+ "$value": "#18181b"
48
+ },
49
+ "950": {
50
+ "$type": "color",
51
+ "$value": "#09090b"
52
+ }
53
+ },
54
+ "amber": {
55
+ "50": {
56
+ "$type": "color",
57
+ "$value": "#fffbeb"
58
+ },
59
+ "100": {
60
+ "$type": "color",
61
+ "$value": "#fef3c7"
62
+ },
63
+ "200": {
64
+ "$type": "color",
65
+ "$value": "#fde68a"
66
+ },
67
+ "300": {
68
+ "$type": "color",
69
+ "$value": "#fcd34d"
70
+ },
71
+ "400": {
72
+ "$type": "color",
73
+ "$value": "#fbbf24"
74
+ },
75
+ "500": {
76
+ "$type": "color",
77
+ "$value": "#f59e0b"
78
+ },
79
+ "600": {
80
+ "$type": "color",
81
+ "$value": "#d97706"
82
+ },
83
+ "700": {
84
+ "$type": "color",
85
+ "$value": "#b45309"
86
+ },
87
+ "800": {
88
+ "$type": "color",
89
+ "$value": "#92400e"
90
+ },
91
+ "900": {
92
+ "$type": "color",
93
+ "$value": "#78350f"
94
+ },
95
+ "950": {
96
+ "$type": "color",
97
+ "$value": "#451a03"
98
+ }
99
+ },
100
+ "teal": {
101
+ "50": {
102
+ "$type": "color",
103
+ "$value": "#f0fdfa"
104
+ },
105
+ "100": {
106
+ "$type": "color",
107
+ "$value": "#ccfbf1"
108
+ },
109
+ "200": {
110
+ "$type": "color",
111
+ "$value": "#99f6e4"
112
+ },
113
+ "300": {
114
+ "$type": "color",
115
+ "$value": "#5eead4"
116
+ },
117
+ "400": {
118
+ "$type": "color",
119
+ "$value": "#2dd4bf"
120
+ },
121
+ "500": {
122
+ "$type": "color",
123
+ "$value": "#14b8a6"
124
+ },
125
+ "600": {
126
+ "$type": "color",
127
+ "$value": "#0d9488"
128
+ },
129
+ "700": {
130
+ "$type": "color",
131
+ "$value": "#0f766e"
132
+ },
133
+ "800": {
134
+ "$type": "color",
135
+ "$value": "#115e59"
136
+ },
137
+ "900": {
138
+ "$type": "color",
139
+ "$value": "#134e4a"
140
+ },
141
+ "950": {
142
+ "$type": "color",
143
+ "$value": "#042f2e"
144
+ }
145
+ },
146
+ "emerald": {
147
+ "50": {
148
+ "$type": "color",
149
+ "$value": "#ecfdf5"
150
+ },
151
+ "500": {
152
+ "$type": "color",
153
+ "$value": "#10b981"
154
+ },
155
+ "600": {
156
+ "$type": "color",
157
+ "$value": "#059669"
158
+ },
159
+ "950": {
160
+ "$type": "color",
161
+ "$value": "#022c22"
162
+ }
163
+ },
164
+ "rose": {
165
+ "50": {
166
+ "$type": "color",
167
+ "$value": "#fff1f2"
168
+ },
169
+ "500": {
170
+ "$type": "color",
171
+ "$value": "#f43f5e"
172
+ },
173
+ "600": {
174
+ "$type": "color",
175
+ "$value": "#e11d48"
176
+ },
177
+ "950": {
178
+ "$type": "color",
179
+ "$value": "#4c0519"
180
+ }
181
+ },
182
+ "sky": {
183
+ "50": {
184
+ "$type": "color",
185
+ "$value": "#f0f9ff"
186
+ },
187
+ "500": {
188
+ "$type": "color",
189
+ "$value": "#0ea5e9"
190
+ },
191
+ "600": {
192
+ "$type": "color",
193
+ "$value": "#0284c7"
194
+ },
195
+ "950": {
196
+ "$type": "color",
197
+ "$value": "#082f49"
198
+ }
199
+ }
200
+ },
201
+ "semantic": {
202
+ "light": {
203
+ "background": {
204
+ "$type": "color",
205
+ "$value": "#fafafa"
206
+ },
207
+ "foreground": {
208
+ "$type": "color",
209
+ "$value": "#09090b"
210
+ },
211
+ "surface": {
212
+ "$type": "color",
213
+ "$value": "#ffffff"
214
+ },
215
+ "card": {
216
+ "$type": "color",
217
+ "$value": "#ffffff"
218
+ },
219
+ "cardForeground": {
220
+ "$type": "color",
221
+ "$value": "#09090b"
222
+ },
223
+ "primary": {
224
+ "$type": "color",
225
+ "$value": "#f59e0b"
226
+ },
227
+ "primaryHover": {
228
+ "$type": "color",
229
+ "$value": "#d97706"
230
+ },
231
+ "primaryForeground": {
232
+ "$type": "color",
233
+ "$value": "#09090b"
234
+ },
235
+ "secondary": {
236
+ "$type": "color",
237
+ "$value": "#14b8a6"
238
+ },
239
+ "secondaryHover": {
240
+ "$type": "color",
241
+ "$value": "#0d9488"
242
+ },
243
+ "secondaryForeground": {
244
+ "$type": "color",
245
+ "$value": "#ffffff"
246
+ },
247
+ "muted": {
248
+ "$type": "color",
249
+ "$value": "#f4f4f5"
250
+ },
251
+ "mutedForeground": {
252
+ "$type": "color",
253
+ "$value": "#71717a"
254
+ },
255
+ "border": {
256
+ "$type": "color",
257
+ "$value": "#e4e4e7"
258
+ },
259
+ "input": {
260
+ "$type": "color",
261
+ "$value": "#e4e4e7"
262
+ },
263
+ "ring": {
264
+ "$type": "color",
265
+ "$value": "#f59e0b"
266
+ },
267
+ "success": {
268
+ "$type": "color",
269
+ "$value": "#059669"
270
+ },
271
+ "successSurface": {
272
+ "$type": "color",
273
+ "$value": "#ecfdf5"
274
+ },
275
+ "warning": {
276
+ "$type": "color",
277
+ "$value": "#d97706"
278
+ },
279
+ "warningSurface": {
280
+ "$type": "color",
281
+ "$value": "#fffbeb"
282
+ },
283
+ "danger": {
284
+ "$type": "color",
285
+ "$value": "#e11d48"
286
+ },
287
+ "dangerSurface": {
288
+ "$type": "color",
289
+ "$value": "#fff1f2"
290
+ },
291
+ "info": {
292
+ "$type": "color",
293
+ "$value": "#0284c7"
294
+ },
295
+ "infoSurface": {
296
+ "$type": "color",
297
+ "$value": "#f0f9ff"
298
+ }
299
+ },
300
+ "dark": {
301
+ "background": {
302
+ "$type": "color",
303
+ "$value": "#09090b"
304
+ },
305
+ "foreground": {
306
+ "$type": "color",
307
+ "$value": "#fafafa"
308
+ },
309
+ "surface": {
310
+ "$type": "color",
311
+ "$value": "#18181b"
312
+ },
313
+ "card": {
314
+ "$type": "color",
315
+ "$value": "#18181b"
316
+ },
317
+ "cardForeground": {
318
+ "$type": "color",
319
+ "$value": "#fafafa"
320
+ },
321
+ "primary": {
322
+ "$type": "color",
323
+ "$value": "#fbbf24"
324
+ },
325
+ "primaryHover": {
326
+ "$type": "color",
327
+ "$value": "#f59e0b"
328
+ },
329
+ "primaryForeground": {
330
+ "$type": "color",
331
+ "$value": "#09090b"
332
+ },
333
+ "secondary": {
334
+ "$type": "color",
335
+ "$value": "#2dd4bf"
336
+ },
337
+ "secondaryHover": {
338
+ "$type": "color",
339
+ "$value": "#14b8a6"
340
+ },
341
+ "secondaryForeground": {
342
+ "$type": "color",
343
+ "$value": "#042f2e"
344
+ },
345
+ "muted": {
346
+ "$type": "color",
347
+ "$value": "#27272a"
348
+ },
349
+ "mutedForeground": {
350
+ "$type": "color",
351
+ "$value": "#a1a1aa"
352
+ },
353
+ "border": {
354
+ "$type": "color",
355
+ "$value": "#27272a"
356
+ },
357
+ "input": {
358
+ "$type": "color",
359
+ "$value": "#27272a"
360
+ },
361
+ "ring": {
362
+ "$type": "color",
363
+ "$value": "#fbbf24"
364
+ },
365
+ "success": {
366
+ "$type": "color",
367
+ "$value": "#10b981"
368
+ },
369
+ "successSurface": {
370
+ "$type": "color",
371
+ "$value": "#022c22"
372
+ },
373
+ "warning": {
374
+ "$type": "color",
375
+ "$value": "#fbbf24"
376
+ },
377
+ "warningSurface": {
378
+ "$type": "color",
379
+ "$value": "#451a03"
380
+ },
381
+ "danger": {
382
+ "$type": "color",
383
+ "$value": "#f43f5e"
384
+ },
385
+ "dangerSurface": {
386
+ "$type": "color",
387
+ "$value": "#4c0519"
388
+ },
389
+ "info": {
390
+ "$type": "color",
391
+ "$value": "#0ea5e9"
392
+ },
393
+ "infoSurface": {
394
+ "$type": "color",
395
+ "$value": "#082f49"
396
+ }
397
+ }
398
+ }
399
+ },
400
+ "typography": {
401
+ "font": {
402
+ "sans": {
403
+ "$type": "fontFamily",
404
+ "$value": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
405
+ },
406
+ "mono": {
407
+ "$type": "fontFamily",
408
+ "$value": "'JetBrains Mono', 'SFMono-Regular', Consolas, monospace"
409
+ }
410
+ },
411
+ "size": {
412
+ "xs": {
413
+ "$type": "dimension",
414
+ "$value": "0.75rem"
415
+ },
416
+ "sm": {
417
+ "$type": "dimension",
418
+ "$value": "0.875rem"
419
+ },
420
+ "base": {
421
+ "$type": "dimension",
422
+ "$value": "1rem"
423
+ },
424
+ "lg": {
425
+ "$type": "dimension",
426
+ "$value": "1.125rem"
427
+ },
428
+ "xl": {
429
+ "$type": "dimension",
430
+ "$value": "1.25rem"
431
+ },
432
+ "2xl": {
433
+ "$type": "dimension",
434
+ "$value": "1.5rem"
435
+ },
436
+ "3xl": {
437
+ "$type": "dimension",
438
+ "$value": "1.875rem"
439
+ },
440
+ "4xl": {
441
+ "$type": "dimension",
442
+ "$value": "2.25rem"
443
+ },
444
+ "5xl": {
445
+ "$type": "dimension",
446
+ "$value": "3rem"
447
+ }
448
+ },
449
+ "weight": {
450
+ "regular": {
451
+ "$type": "fontWeight",
452
+ "$value": "400"
453
+ },
454
+ "medium": {
455
+ "$type": "fontWeight",
456
+ "$value": "500"
457
+ },
458
+ "semibold": {
459
+ "$type": "fontWeight",
460
+ "$value": "600"
461
+ },
462
+ "bold": {
463
+ "$type": "fontWeight",
464
+ "$value": "700"
465
+ }
466
+ }
467
+ },
468
+ "space": {
469
+ "1": {
470
+ "$type": "dimension",
471
+ "$value": "0.25rem"
472
+ },
473
+ "2": {
474
+ "$type": "dimension",
475
+ "$value": "0.5rem"
476
+ },
477
+ "3": {
478
+ "$type": "dimension",
479
+ "$value": "0.75rem"
480
+ },
481
+ "4": {
482
+ "$type": "dimension",
483
+ "$value": "1rem"
484
+ },
485
+ "6": {
486
+ "$type": "dimension",
487
+ "$value": "1.5rem"
488
+ },
489
+ "8": {
490
+ "$type": "dimension",
491
+ "$value": "2rem"
492
+ },
493
+ "12": {
494
+ "$type": "dimension",
495
+ "$value": "3rem"
496
+ },
497
+ "16": {
498
+ "$type": "dimension",
499
+ "$value": "4rem"
500
+ },
501
+ "24": {
502
+ "$type": "dimension",
503
+ "$value": "6rem"
504
+ }
505
+ },
506
+ "radius": {
507
+ "sm": {
508
+ "$type": "dimension",
509
+ "$value": "0.5rem"
510
+ },
511
+ "md": {
512
+ "$type": "dimension",
513
+ "$value": "0.75rem"
514
+ },
515
+ "lg": {
516
+ "$type": "dimension",
517
+ "$value": "1rem"
518
+ },
519
+ "xl": {
520
+ "$type": "dimension",
521
+ "$value": "1.25rem"
522
+ },
523
+ "2xl": {
524
+ "$type": "dimension",
525
+ "$value": "1.5rem"
526
+ },
527
+ "full": {
528
+ "$type": "dimension",
529
+ "$value": "9999px"
530
+ }
531
+ },
532
+ "shadow": {
533
+ "xs": {
534
+ "$type": "shadow",
535
+ "$value": "0 1px 2px rgb(15 23 42 / 0.05)"
536
+ },
537
+ "sm": {
538
+ "$type": "shadow",
539
+ "$value": "0 1px 3px rgb(15 23 42 / 0.08), 0 1px 2px rgb(15 23 42 / 0.04)"
540
+ },
541
+ "md": {
542
+ "$type": "shadow",
543
+ "$value": "0 8px 30px rgb(15 23 42 / 0.08)"
544
+ },
545
+ "lg": {
546
+ "$type": "shadow",
547
+ "$value": "0 20px 60px rgb(15 23 42 / 0.12)"
548
+ },
549
+ "glow": {
550
+ "$type": "shadow",
551
+ "$value": "0 0 0 1px rgb(245 158 11 / 0.16), 0 16px 48px rgb(245 158 11 / 0.18)"
552
+ }
553
+ }
554
+ }