@db-vincent/tokens 0.0.0-stage → 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 (7) hide show
  1. package/package.json +22 -4
  2. package/tokens/tokens.css +1140 -0
  3. package/tokens/tokens.json +1427 -0
  4. package/tokens/tokens.scss +120 -0
  5. package/tokens/tokens.ts +721 -0
  6. package/tokens/utilities.css +181 -0
  7. package/README.md +0 -3
package/tokens/tokens.ts ADDED
@@ -0,0 +1,721 @@
1
+ // GENERATED FILE - do not edit. Source of truth: internal/scripts/build-tokens.py
2
+ // Minerva Blue Metallic #1383DA. OKLCH source, hex output.
3
+
4
+ export const palette = {
5
+ blue: { "50": "#EEF7FF", "100": "#DAEEFF", "200": "#B6D8FB", "300": "#8DC0F2", "400": "#55A1E8", "500": "#1383DA", "600": "#006FBD", "700": "#005CA1", "800": "#024679", "900": "#053256", "950": "#041E35" },
6
+ neutral: { "0": "#FFFFFF", "50": "#F7F9FC", "100": "#EDF1F5", "200": "#DCE2E8", "300": "#C5CDD6", "400": "#9CA6B0", "500": "#7C8893", "600": "#616C77", "700": "#424B55", "800": "#2C343C", "900": "#232A31", "950": "#1A1F24", "1000": "#101419", "1050": "#080C0F", "1100": "#040608" },
7
+ green: { "50": "#EAFAEC", "100": "#D1F2D7", "200": "#A6DEB1", "300": "#73C385", "400": "#3AA85B", "500": "#0E8C41", "600": "#007531", "700": "#005B23", "800": "#004218", "900": "#002D0E", "950": "#011A07" },
8
+ amber: { "50": "#FFF5E1", "100": "#FFE7BB", "200": "#FED081", "300": "#F7B83D", "400": "#E9A200", "500": "#D58F00", "600": "#B17600", "700": "#895C00", "800": "#644400", "900": "#452E00", "950": "#291A00" },
9
+ red: { "50": "#FFF0EE", "100": "#FFDCD7", "200": "#FFBEB6", "300": "#FF9890", "400": "#F66D67", "500": "#DB4241", "600": "#BA2B2E", "700": "#971A20", "800": "#721216", "900": "#4F0A0D", "950": "#2F0405" },
10
+ } as const;
11
+
12
+ export type ColorFamily = keyof typeof palette;
13
+
14
+ export const semanticLight = {
15
+ "canvas": "#F7F9FC",
16
+ "surface": "#FFFFFF",
17
+ "surface-raised": "#FFFFFF",
18
+ "surface-sunken": "#EDF1F5",
19
+ "overlay": "#FFFFFF",
20
+ "text-primary": "#1A1F24",
21
+ "text-secondary": "#424B55",
22
+ "text-tertiary": "#616C77",
23
+ "text-inverse": "#F7F9FC",
24
+ "link": "#005CA1",
25
+ "link-hover": "#024679",
26
+ "accent": "#1383DA",
27
+ "accent-hover": "#55A1E8",
28
+ "accent-active": "#006FBD",
29
+ "accent-on": "#FFFFFF",
30
+ "accent-strong": "#005CA1",
31
+ "accent-strong-hover": "#024679",
32
+ "accent-strong-active": "#053256",
33
+ "accent-strong-fg": "#FFFFFF",
34
+ "accent-subtle": "#EEF7FF",
35
+ "accent-subtle-hover": "#DAEEFF",
36
+ "accent-subtle-fg": "#005CA1",
37
+ "success": "#005B23",
38
+ "success-bg": "#EAFAEC",
39
+ "success-bg-hover": "#D1F2D7",
40
+ "success-fg": "#004218",
41
+ "warning": "#895C00",
42
+ "warning-bg": "#FFF5E1",
43
+ "warning-bg-hover": "#FFE7BB",
44
+ "warning-fg": "#644400",
45
+ "danger": "#BA2B2E",
46
+ "danger-bg": "#FFF0EE",
47
+ "danger-bg-hover": "#FFDCD7",
48
+ "danger-fg": "#971A20",
49
+ "danger-strong": "#BA2B2E",
50
+ "danger-strong-hover": "#971A20",
51
+ "danger-strong-fg": "#FFFFFF",
52
+ "border-subtle": "#DCE2E8",
53
+ "border-default": "#C5CDD6",
54
+ "border-control": "#7C8893",
55
+ "border-control-hover": "#616C77",
56
+ "border-strong": "#7C8893",
57
+ "focus": "#006FBD",
58
+ "focus-offset": "#FFFFFF",
59
+ "selection": "#DAEEFF"
60
+ } as const;
61
+
62
+ export const semanticDark = {
63
+ "canvas": "#080C0F",
64
+ "surface": "#101419",
65
+ "surface-raised": "#1A1F24",
66
+ "surface-sunken": "#040608",
67
+ "overlay": "#1A1F24",
68
+ "text-primary": "#F7F9FC",
69
+ "text-secondary": "#C5CDD6",
70
+ "text-tertiary": "#7C8893",
71
+ "text-inverse": "#101419",
72
+ "link": "#8DC0F2",
73
+ "link-hover": "#B6D8FB",
74
+ "accent": "#1383DA",
75
+ "accent-hover": "#55A1E8",
76
+ "accent-active": "#006FBD",
77
+ "accent-on": "#FFFFFF",
78
+ "accent-strong": "#005CA1",
79
+ "accent-strong-hover": "#006FBD",
80
+ "accent-strong-active": "#024679",
81
+ "accent-strong-fg": "#FFFFFF",
82
+ "accent-subtle": "#041E35",
83
+ "accent-subtle-hover": "#053256",
84
+ "accent-subtle-fg": "#8DC0F2",
85
+ "success": "#73C385",
86
+ "success-bg": "#011A07",
87
+ "success-bg-hover": "#002D0E",
88
+ "success-fg": "#A6DEB1",
89
+ "warning": "#F7B83D",
90
+ "warning-bg": "#291A00",
91
+ "warning-bg-hover": "#452E00",
92
+ "warning-fg": "#FED081",
93
+ "danger": "#FF9890",
94
+ "danger-bg": "#2F0405",
95
+ "danger-bg-hover": "#4F0A0D",
96
+ "danger-fg": "#FFBEB6",
97
+ "danger-strong": "#BA2B2E",
98
+ "danger-strong-hover": "#971A20",
99
+ "danger-strong-fg": "#FFFFFF",
100
+ "border-subtle": "#2C343C",
101
+ "border-default": "#424B55",
102
+ "border-control": "#616C77",
103
+ "border-control-hover": "#7C8893",
104
+ "border-strong": "#7C8893",
105
+ "focus": "#8DC0F2",
106
+ "focus-offset": "#040608",
107
+ "selection": "#024679"
108
+ } as const;
109
+
110
+ export const type = {
111
+ "2xs": { size: "0.579rem", lineHeight: "1.000rem", tracking: "0.01em" },
112
+ "xs": { size: "0.694rem", lineHeight: "1.125rem", tracking: "0.005em" },
113
+ "sm": { size: "0.833rem", lineHeight: "1.375rem", tracking: "0.0em" },
114
+ "base": { size: "1.000rem", lineHeight: "1.625rem", tracking: "0.0em" },
115
+ "lg": { size: "1.200rem", lineHeight: "1.750rem", tracking: "-0.005em" },
116
+ "xl": { size: "1.440rem", lineHeight: "1.875rem", tracking: "-0.01em" },
117
+ "2xl": { size: "1.728rem", lineHeight: "2.125rem", tracking: "-0.015em" },
118
+ "3xl": { size: "2.074rem", lineHeight: "2.375rem", tracking: "-0.02em" },
119
+ "4xl": { size: "2.488rem", lineHeight: "2.750rem", tracking: "-0.025em" },
120
+ "5xl": { size: "2.986rem", lineHeight: "3.250rem", tracking: "-0.03em" },
121
+ "6xl": { size: "3.583rem", lineHeight: "3.750rem", tracking: "-0.03em" },
122
+ } as const;
123
+
124
+ export const componentTokens = {
125
+ "button": {
126
+ "--button-font": "var(--font-body)",
127
+ "--button-font-weight": "var(--weight-medium)",
128
+ "--button-radius": "var(--radius-md)",
129
+ "--button-gap": "var(--space-2)",
130
+ "--button-height-sm": "var(--space-8)",
131
+ "--button-height-md": "var(--space-10)",
132
+ "--button-height-lg": "var(--space-12)",
133
+ "--button-padding-x-sm": "var(--space-3)",
134
+ "--button-padding-x-md": "var(--space-4)",
135
+ "--button-padding-x-lg": "var(--space-5)",
136
+ "--button-font-sm": "var(--text-sm)",
137
+ "--button-font-md": "var(--text-sm)",
138
+ "--button-font-lg": "var(--text-base)",
139
+ "--button-primary-bg": "var(--color-accent-strong)",
140
+ "--button-primary-bg-hover": "var(--color-accent-strong-hover)",
141
+ "--button-primary-bg-active": "var(--color-accent-strong-active)",
142
+ "--button-primary-fg": "var(--color-accent-strong-fg)",
143
+ "--button-primary-border": "var(--color-accent-strong)",
144
+ "--button-primary-border-hover": "var(--color-accent-strong-hover)",
145
+ "--button-secondary-bg": "var(--color-surface)",
146
+ "--button-secondary-bg-hover": "var(--color-surface-sunken)",
147
+ "--button-secondary-bg-active": "var(--color-surface-sunken)",
148
+ "--button-secondary-fg": "var(--color-text-primary)",
149
+ "--button-secondary-border": "var(--color-border-control)",
150
+ "--button-secondary-border-hover": "var(--color-border-control-hover)",
151
+ "--button-ghost-bg": "transparent",
152
+ "--button-ghost-bg-hover": "var(--color-surface-sunken)",
153
+ "--button-ghost-bg-active": "var(--color-surface-sunken)",
154
+ "--button-ghost-fg": "var(--color-text-secondary)",
155
+ "--button-ghost-fg-hover": "var(--color-text-primary)",
156
+ "--button-ghost-border": "transparent",
157
+ "--button-danger-bg": "var(--color-danger-strong)",
158
+ "--button-danger-bg-hover": "var(--color-danger-strong-hover)",
159
+ "--button-danger-fg": "var(--color-danger-strong-fg)",
160
+ "--button-danger-border": "transparent",
161
+ "--button-disabled-bg": "var(--color-surface-sunken)",
162
+ "--button-disabled-fg": "var(--color-text-tertiary)",
163
+ "--button-disabled-border": "var(--color-border-subtle)",
164
+ "--button-focus-color": "var(--focus-ring-color)",
165
+ "--button-focus-offset": "var(--focus-ring-offset)",
166
+ "--button-focus-width": "var(--focus-ring-width)",
167
+ "--button-icon-size-sm": "var(--space-4)",
168
+ "--button-icon-size-md": "var(--space-4)",
169
+ "--button-icon-size-lg": "var(--space-5)"
170
+ },
171
+ "input": {
172
+ "--input-font": "var(--font-body)",
173
+ "--input-font-size": "var(--text-sm)",
174
+ "--input-radius": "var(--radius-md)",
175
+ "--input-height-sm": "var(--space-8)",
176
+ "--input-height-md": "var(--space-10)",
177
+ "--input-height-lg": "var(--space-12)",
178
+ "--input-padding-x": "var(--space-3)",
179
+ "--input-padding-y": "var(--space-2)",
180
+ "--input-bg": "var(--color-surface)",
181
+ "--input-bg-hover": "var(--color-surface)",
182
+ "--input-bg-disabled": "var(--color-surface-sunken)",
183
+ "--input-fg": "var(--color-text-primary)",
184
+ "--input-fg-disabled": "var(--color-text-tertiary)",
185
+ "--input-placeholder": "var(--color-text-tertiary)",
186
+ "--input-border": "var(--color-border-control)",
187
+ "--input-border-hover": "var(--color-border-control-hover)",
188
+ "--input-border-focus": "var(--color-focus)",
189
+ "--input-border-invalid": "var(--color-danger)",
190
+ "--input-border-valid": "var(--color-success)",
191
+ "--input-ring-focus": "var(--color-focus)",
192
+ "--input-ring-invalid": "var(--color-danger)",
193
+ "--input-label-fg": "var(--color-text-primary)",
194
+ "--input-hint-fg": "var(--color-text-secondary)",
195
+ "--input-count-fg": "var(--color-text-tertiary)",
196
+ "--input-error-fg": "var(--color-danger-fg)",
197
+ "--input-required-fg": "var(--color-danger)",
198
+ "--input-reveal-fg": "var(--color-text-secondary)",
199
+ "--input-reveal-fg-hover": "var(--color-text-primary)",
200
+ "--input-reveal-bg-hover": "var(--color-surface-sunken)",
201
+ "--input-focus-width": "var(--focus-ring-width)",
202
+ "--input-focus-offset": "var(--focus-ring-offset)"
203
+ },
204
+ "checkbox": {
205
+ "--checkbox-size": "1.125rem",
206
+ "--checkbox-radius": "var(--radius-xs)",
207
+ "--checkbox-gap": "var(--space-2-5)",
208
+ "--checkbox-bg": "var(--color-surface)",
209
+ "--checkbox-bg-hover": "var(--color-surface-sunken)",
210
+ "--checkbox-bg-checked": "var(--color-accent)",
211
+ "--checkbox-bg-disabled": "var(--color-surface-sunken)",
212
+ "--checkbox-border": "var(--color-border-strong)",
213
+ "--checkbox-border-checked": "var(--color-accent)",
214
+ "--checkbox-fg-check": "var(--color-accent-on)",
215
+ "--checkbox-fg-disabled": "var(--color-text-tertiary)",
216
+ "--checkbox-label-fg": "var(--color-text-primary)",
217
+ "--checkbox-label-fg-disabled": "var(--color-text-tertiary)",
218
+ "--checkbox-focus-color": "var(--color-focus)",
219
+ "--checkbox-focus-offset": "var(--focus-ring-offset)",
220
+ "--checkbox-focus-width": "var(--focus-ring-width)"
221
+ },
222
+ "radio": {
223
+ "--radio-bg-checked": "var(--color-accent)",
224
+ "--radio-bg-disabled": "var(--color-surface-sunken)",
225
+ "--radio-border-checked": "var(--color-accent)",
226
+ "--radio-dot": "var(--color-accent-on)",
227
+ "--radio-dot-size": "0.4375rem"
228
+ },
229
+ "badge": {
230
+ "--badge-radius": "var(--radius-full)",
231
+ "--badge-height": "var(--space-5)",
232
+ "--badge-padding-x": "var(--space-2)",
233
+ "--badge-font": "var(--font-body)",
234
+ "--badge-font-size": "var(--text-xs)",
235
+ "--badge-font-weight": "var(--weight-medium)",
236
+ "--badge-neutral-bg": "var(--color-surface-sunken)",
237
+ "--badge-neutral-fg": "var(--color-text-secondary)",
238
+ "--badge-accent-bg": "var(--color-accent-subtle)",
239
+ "--badge-accent-fg": "var(--color-accent-subtle-fg)",
240
+ "--badge-success-bg": "var(--color-success-bg)",
241
+ "--badge-success-fg": "var(--color-success-fg)",
242
+ "--badge-warning-bg": "var(--color-warning-bg)",
243
+ "--badge-warning-fg": "var(--color-warning-fg)",
244
+ "--badge-danger-bg": "var(--color-danger-bg)",
245
+ "--badge-danger-fg": "var(--color-danger-fg)",
246
+ "--badge-dot-size": "0.375rem"
247
+ },
248
+ "select": {
249
+ "--select-bg": "var(--color-surface)",
250
+ "--select-bg-disabled": "var(--color-surface-sunken)",
251
+ "--select-fg": "var(--color-text-primary)",
252
+ "--select-fg-disabled": "var(--color-text-tertiary)",
253
+ "--select-placeholder": "var(--color-text-tertiary)",
254
+ "--select-border": "var(--color-border-control)",
255
+ "--select-border-hover": "var(--color-border-control-hover)",
256
+ "--select-border-focus": "var(--color-focus)",
257
+ "--select-border-invalid": "var(--color-danger)",
258
+ "--select-radius": "var(--radius-md)",
259
+ "--select-height": "var(--space-10)",
260
+ "--select-height-sm": "var(--space-8)",
261
+ "--select-height-lg": "var(--space-12)",
262
+ "--select-padding-x": "var(--space-3)",
263
+ "--select-chevron": "var(--color-text-secondary)",
264
+ "--select-focus-width": "var(--focus-ring-width)",
265
+ "--select-focus-offset": "var(--focus-ring-offset)",
266
+ "--select-focus-offset-color": "var(--focus-ring-offset-color)",
267
+ "--select-popup-bg": "var(--color-surface-raised)",
268
+ "--select-popup-border": "var(--color-border-control)",
269
+ "--select-popup-radius": "var(--radius-md)",
270
+ "--select-popup-shadow": "var(--shadow-lg)",
271
+ "--select-popup-padding": "var(--space-1)",
272
+ "--select-popup-gap": "var(--space-1)",
273
+ "--select-popup-max-height": "18rem",
274
+ "--select-popup-z": "var(--z-dropdown)",
275
+ "--select-option-fg": "var(--color-text-primary)",
276
+ "--select-option-fg-muted": "var(--color-text-tertiary)",
277
+ "--select-option-description": "var(--color-text-tertiary)",
278
+ "--select-popup-footer-border": "var(--color-border-subtle)",
279
+ "--select-option-bg-hover": "var(--color-surface-sunken)",
280
+ "--select-option-bg-selected": "var(--color-accent-subtle)",
281
+ "--select-option-fg-selected": "var(--color-accent-subtle-fg)",
282
+ "--select-option-radius": "var(--radius-sm)",
283
+ "--select-option-padding-x": "var(--space-3)",
284
+ "--select-option-padding-y": "var(--space-2)",
285
+ "--select-indicator-bg": "var(--color-accent)",
286
+ "--select-indicator-fg": "var(--color-accent-on)",
287
+ "--select-indicator-size": "var(--space-4)"
288
+ },
289
+ "chip": {
290
+ "--chip-bg": "var(--color-surface)",
291
+ "--chip-bg-hover": "var(--color-surface-sunken)",
292
+ "--chip-bg-selected": "var(--color-accent-subtle)",
293
+ "--chip-fg": "var(--color-text-secondary)",
294
+ "--chip-fg-hover": "var(--color-text-primary)",
295
+ "--chip-fg-selected": "var(--color-accent-subtle-fg)",
296
+ "--chip-fg-disabled": "var(--color-text-tertiary)",
297
+ "--chip-remove-bg-hover": "var(--color-border-default)",
298
+ "--chip-border": "var(--color-border-control)",
299
+ "--chip-border-hover": "var(--color-border-control-hover)",
300
+ "--chip-border-selected": "var(--color-accent)",
301
+ "--chip-radius": "var(--radius-full)",
302
+ "--chip-height": "var(--space-8)",
303
+ "--chip-height-sm": "var(--space-6)",
304
+ "--chip-padding-x": "var(--space-3)",
305
+ "--chip-font-size": "var(--text-sm)",
306
+ "--chip-focus-color": "var(--color-focus)",
307
+ "--chip-focus-offset": "var(--focus-ring-offset)",
308
+ "--chip-focus-width": "var(--focus-ring-width)"
309
+ },
310
+ "accordion": {
311
+ "--accordion-item-radius": "var(--radius-md)",
312
+ "--accordion-item-bg": "var(--color-surface)",
313
+ "--accordion-item-border": "var(--color-border-subtle)",
314
+ "--accordion-gap": "var(--space-2)",
315
+ "--accordion-trigger-fg": "var(--color-text-primary)",
316
+ "--accordion-trigger-bg-hover": "var(--color-surface-sunken)",
317
+ "--accordion-trigger-bg-open": "var(--color-surface-sunken)",
318
+ "--accordion-trigger-padding-x": "var(--space-4)",
319
+ "--accordion-trigger-padding-y": "var(--space-4)",
320
+ "--accordion-font-size": "var(--text-sm)",
321
+ "--accordion-icon": "var(--color-text-tertiary)",
322
+ "--accordion-panel-fg": "var(--color-text-secondary)",
323
+ "--accordion-panel-bg": "var(--color-surface)",
324
+ "--accordion-panel-border": "var(--color-border-subtle)",
325
+ "--accordion-panel-padding": "var(--space-4)",
326
+ "--accordion-focus-color": "var(--color-focus)",
327
+ "--accordion-focus-offset": "calc(-1 * var(--focus-ring-offset))",
328
+ "--accordion-focus-width": "var(--focus-ring-width)",
329
+ "--accordion-max-width": "var(--layout-prose)"
330
+ },
331
+ "card": {
332
+ "--card-radius": "var(--radius-lg)",
333
+ "--card-padding": "var(--space-6)",
334
+ "--card-bg": "var(--color-surface)",
335
+ "--card-border": "var(--color-border-subtle)",
336
+ "--card-fg": "var(--color-text-primary)",
337
+ "--card-body-fg": "var(--color-text-secondary)",
338
+ "--card-header-gap": "var(--space-1)",
339
+ "--card-footer-bg": "transparent",
340
+ "--card-footer-border": "var(--color-border-subtle)",
341
+ "--card-accent-bg": "var(--color-surface)",
342
+ "--card-accent-border": "var(--color-warning)",
343
+ "--card-raised-bg": "var(--color-surface-raised)",
344
+ "--card-raised-border": "var(--color-border-subtle)",
345
+ "--card-raised-shadow": "var(--shadow-md)",
346
+ "--card-flat-bg": "var(--color-surface-sunken)",
347
+ "--card-flat-border": "transparent",
348
+ "--card-hover-border": "var(--color-border-control)",
349
+ "--card-title-fg": "var(--color-text-primary)",
350
+ "--card-meta-fg": "var(--color-text-tertiary)"
351
+ },
352
+ "modal": {
353
+ "--modal-backdrop": "rgb(3 6 10 / 0.62)",
354
+ "--modal-footer-bg": "var(--color-surface-sunken)",
355
+ "--modal-bg": "var(--color-overlay)",
356
+ "--modal-fg": "var(--color-text-primary)",
357
+ "--modal-border": "var(--color-border-subtle)",
358
+ "--modal-radius": "var(--radius-xl)",
359
+ "--modal-shadow": "var(--shadow-lg)",
360
+ "--modal-padding": "var(--space-6)",
361
+ "--modal-gap": "var(--space-4)",
362
+ "--modal-max-width-sm": "24rem",
363
+ "--modal-max-width-md": "32rem",
364
+ "--modal-max-width-lg": "44rem",
365
+ "--modal-title-fg": "var(--color-text-primary)",
366
+ "--modal-body-fg": "var(--color-text-secondary)",
367
+ "--modal-close-bg-hover": "var(--color-surface-sunken)",
368
+ "--modal-close-fg": "var(--color-text-secondary)",
369
+ "--modal-focus-color": "var(--color-focus)",
370
+ "--modal-focus-offset": "var(--focus-ring-offset)",
371
+ "--modal-focus-width": "var(--focus-ring-width)"
372
+ },
373
+ "nav": {
374
+ "--nav-bg": "var(--color-surface)",
375
+ "--nav-border": "var(--color-border-subtle)",
376
+ "--nav-width": "var(--layout-sidebar)",
377
+ "--nav-item-fg": "var(--color-text-secondary)",
378
+ "--nav-item-fg-hover": "var(--color-text-primary)",
379
+ "--nav-item-fg-active": "var(--color-text-primary)",
380
+ "--nav-item-bg-hover": "var(--color-surface-sunken)",
381
+ "--nav-item-bg-active": "var(--color-accent-subtle)",
382
+ "--nav-item-indicator": "var(--color-accent)",
383
+ "--nav-item-radius": "var(--radius-md)",
384
+ "--nav-item-height": "var(--space-10)",
385
+ "--nav-item-padding-x": "var(--space-3)",
386
+ "--nav-item-gap": "var(--space-2-5)",
387
+ "--nav-group-label-fg": "var(--color-text-tertiary)",
388
+ "--nav-group-label-size": "var(--text-xs)",
389
+ "--nav-brand-fg": "var(--color-text-primary)",
390
+ "--nav-brand-size": "var(--text-sm)",
391
+ "--nav-brand-mark-bg": "var(--color-accent)",
392
+ "--nav-brand-mark-fg": "var(--color-accent-on)",
393
+ "--nav-icon": "var(--color-text-tertiary)",
394
+ "--nav-mobilebar-bg": "var(--color-surface)",
395
+ "--nav-toggle-bg": "transparent",
396
+ "--nav-toggle-fg": "var(--color-text-secondary)",
397
+ "--nav-toggle-border": "var(--color-border-control)",
398
+ "--nav-focus-color": "var(--color-focus)",
399
+ "--nav-focus-offset": "var(--focus-ring-offset)",
400
+ "--nav-focus-width": "var(--focus-ring-width)",
401
+ "--nav-mobile-backdrop": "rgb(3 6 10 / 0.62)",
402
+ "--nav-scrollbar": "var(--color-border-default)"
403
+ },
404
+ "navbar": {
405
+ "--navbar-bg": "var(--color-canvas)",
406
+ "--navbar-tint": "72%",
407
+ "--navbar-blur": "12px",
408
+ "--navbar-height": "var(--layout-header)",
409
+ "--navbar-padding-x": "var(--space-6)",
410
+ "--navbar-gap": "var(--space-4)",
411
+ "--navbar-brand-fg": "var(--color-text-primary)",
412
+ "--navbar-brand-size": "var(--text-sm)",
413
+ "--navbar-brand-mark-bg": "var(--color-accent)",
414
+ "--navbar-brand-mark-fg": "var(--color-accent-on)",
415
+ "--navbar-link-fg": "var(--color-text-secondary)",
416
+ "--navbar-link-fg-hover": "var(--color-text-primary)",
417
+ "--navbar-link-fg-current": "var(--color-text-primary)",
418
+ "--navbar-link-bg-hover": "var(--color-surface-sunken)",
419
+ "--navbar-link-bg-open": "var(--color-surface-sunken)",
420
+ "--navbar-link-bg-current": "var(--color-accent-subtle)",
421
+ "--navbar-link-bg-current-hover": "var(--color-accent-subtle-hover)",
422
+ "--navbar-current-icon-fg": "var(--color-accent)",
423
+ "--navbar-link-radius": "var(--radius-md)",
424
+ "--navbar-link-height": "var(--space-8)",
425
+ "--navbar-link-padding-x": "var(--space-3)",
426
+ "--navbar-link-gap": "var(--space-1-5)",
427
+ "--navbar-link-size": "var(--text-sm)",
428
+ "--navbar-viewport-bg": "var(--color-overlay)",
429
+ "--navbar-viewport-border": "var(--color-border-default)",
430
+ "--navbar-viewport-shadow": "var(--shadow-lg)",
431
+ "--navbar-viewport-radius": "var(--radius-lg)",
432
+ "--navbar-viewport-offset": "var(--space-2)",
433
+ "--navbar-panel-padding": "var(--space-2)",
434
+ "--navbar-panel-gap": "var(--space-1)",
435
+ "--navbar-panel-width-list": "20rem",
436
+ "--navbar-panel-width-grid": "34rem",
437
+ "--navbar-panel-width-group": "15rem",
438
+ "--navbar-row-fg": "var(--color-text-primary)",
439
+ "--navbar-row-desc-fg": "var(--color-text-secondary)",
440
+ "--navbar-row-icon-fg": "var(--color-text-tertiary)",
441
+ "--navbar-row-bg-hover": "var(--color-surface-sunken)",
442
+ "--navbar-row-bg-current": "var(--color-accent-subtle)",
443
+ "--navbar-row-radius": "var(--radius-md)",
444
+ "--navbar-row-padding": "var(--space-2-5) var(--space-3)",
445
+ "--navbar-feature-bg": "var(--color-surface-sunken)",
446
+ "--navbar-feature-bg-hover": "var(--color-accent-subtle)",
447
+ "--navbar-feature-icon-bg": "var(--color-accent)",
448
+ "--navbar-feature-icon-fg": "var(--color-accent-on)",
449
+ "--navbar-feature-min-height": "12rem",
450
+ "--navbar-eyebrow-fg": "var(--color-text-tertiary)",
451
+ "--navbar-toggle-fg": "var(--color-text-primary)",
452
+ "--navbar-toggle-bg-hover": "var(--color-surface-sunken)",
453
+ "--navbar-sheet-bg": "var(--color-overlay)",
454
+ "--navbar-sheet-border": "var(--color-border-subtle)",
455
+ "--navbar-sheet-backdrop": "rgb(3 6 10 / 0.32)",
456
+ "--navbar-sheet-radius": "var(--radius-xl)",
457
+ "--navbar-sheet-inset": "var(--space-2)",
458
+ "--navbar-sheet-max-width": "26rem",
459
+ "--navbar-sheet-padding": "var(--space-6)",
460
+ "--navbar-sheet-row-height": "var(--space-10)",
461
+ "--navbar-sheet-row-size": "var(--text-base)",
462
+ "--navbar-sheet-meta-fg": "var(--color-text-secondary)",
463
+ "--navbar-focus-color": "var(--color-focus)",
464
+ "--navbar-focus-offset": "var(--focus-ring-offset)",
465
+ "--navbar-focus-width": "var(--focus-ring-width)"
466
+ },
467
+ "topbar": {
468
+ "--topbar-bg": "var(--color-canvas)",
469
+ "--topbar-border": "var(--color-border-subtle)",
470
+ "--topbar-height": "var(--space-8)",
471
+ "--topbar-padding-x": "var(--space-6)",
472
+ "--topbar-gap": "var(--space-4)"
473
+ },
474
+ "page-header": {
475
+ "--page-header-title-fg": "var(--color-text-primary)",
476
+ "--page-header-title-size": "var(--text-4xl)",
477
+ "--page-header-title-leading": "var(--leading-4xl)",
478
+ "--page-header-title-tracking": "-0.025em",
479
+ "--page-header-title-max": "var(--layout-prose)",
480
+ "--page-header-lede-fg": "var(--color-text-secondary)",
481
+ "--page-header-lede-size": "var(--text-lg)",
482
+ "--page-header-lede-leading": "var(--leading-lg)",
483
+ "--page-header-lede-max": "var(--layout-prose)",
484
+ "--page-header-gap": "var(--space-4)",
485
+ "--page-header-meta-gap": "var(--space-2)",
486
+ "--page-header-actions-gap": "var(--space-3)",
487
+ "--page-header-actions-margin": "var(--space-2)",
488
+ "--page-header-display-size": "var(--text-5xl)",
489
+ "--page-header-display-leading": "var(--leading-5xl)",
490
+ "--page-header-display-tracking": "-0.03em",
491
+ "--page-header-emphasis-fg": "var(--color-text-secondary)"
492
+ },
493
+ "section": {
494
+ "--section-border": "var(--color-border-subtle)",
495
+ "--section-margin-top": "var(--space-12)",
496
+ "--section-padding-top": "var(--space-6)",
497
+ "--section-head-gap": "var(--space-4)",
498
+ "--section-title-size": "var(--text-xl)",
499
+ "--section-title-leading": "var(--leading-xl)",
500
+ "--section-title-margin": "var(--space-4)",
501
+ "--section-index-fg": "var(--color-text-tertiary)",
502
+ "--section-index-size": "var(--text-sm)",
503
+ "--section-intro-fg": "var(--color-text-secondary)",
504
+ "--section-intro-size": "var(--text-base)",
505
+ "--section-intro-max": "var(--layout-prose)",
506
+ "--section-intro-margin": "var(--space-5)"
507
+ },
508
+ "example": {
509
+ "--example-bg": "var(--color-surface-sunken)",
510
+ "--example-border": "transparent",
511
+ "--example-radius": "var(--radius-lg)",
512
+ "--example-padding": "var(--space-6)",
513
+ "--example-gap": "var(--space-3)",
514
+ "--example-label-fg": "var(--color-text-tertiary)",
515
+ "--example-label-size": "var(--text-xs)",
516
+ "--example-description-fg": "var(--color-text-tertiary)",
517
+ "--example-preview-min": "var(--space-16)"
518
+ },
519
+ "code": {
520
+ "--code-bg": "var(--color-surface)",
521
+ "--code-fg": "var(--color-text-primary)",
522
+ "--code-border": "var(--color-border-subtle)",
523
+ "--code-radius": "var(--radius-md)",
524
+ "--code-padding": "var(--space-4)",
525
+ "--code-font-size": "var(--text-sm)",
526
+ "--code-line-height": "1.6",
527
+ "--code-label-fg": "var(--color-text-tertiary)",
528
+ "--code-label-size": "var(--text-xs)",
529
+ "--code-label-margin": "var(--space-2)",
530
+ "--code-scrollbar": "var(--color-border-default)"
531
+ },
532
+ "grid": {
533
+ "--grid-gap": "var(--space-6)",
534
+ "--grid-gap-sm": "var(--space-4)",
535
+ "--grid-gap-lg": "var(--space-8)",
536
+ "--grid-container": "var(--layout-container)",
537
+ "--grid-gutter": "var(--space-4)"
538
+ },
539
+ "breadcrumbs": {
540
+ "--breadcrumbs-link-fg": "var(--color-text-secondary)",
541
+ "--breadcrumbs-link-fg-hover": "var(--color-text-primary)",
542
+ "--breadcrumbs-current-fg": "var(--color-text-primary)",
543
+ "--breadcrumbs-separator-fg": "var(--color-text-tertiary)",
544
+ "--breadcrumbs-font-size": "var(--text-sm)",
545
+ "--breadcrumbs-gap": "var(--space-2)",
546
+ "--breadcrumbs-focus-color": "var(--color-focus)",
547
+ "--breadcrumbs-focus-offset": "var(--focus-ring-offset)",
548
+ "--breadcrumbs-focus-width": "var(--focus-ring-width)"
549
+ },
550
+ "pagination": {
551
+ "--pagination-item-size": "var(--space-10)",
552
+ "--pagination-radius": "var(--radius-md)",
553
+ "--pagination-bg": "transparent",
554
+ "--pagination-bg-hover": "var(--color-surface-sunken)",
555
+ "--pagination-bg-current": "var(--color-accent-strong)",
556
+ "--pagination-fg": "var(--color-text-secondary)",
557
+ "--pagination-fg-hover": "var(--color-text-primary)",
558
+ "--pagination-fg-current": "var(--color-accent-strong-fg)",
559
+ "--pagination-fg-disabled": "var(--color-text-tertiary)",
560
+ "--pagination-font-size": "var(--text-sm)",
561
+ "--pagination-gap": "var(--space-1)",
562
+ "--pagination-focus-color": "var(--color-focus)",
563
+ "--pagination-focus-offset": "var(--focus-ring-offset)",
564
+ "--pagination-focus-width": "var(--focus-ring-width)"
565
+ },
566
+ "table": {
567
+ "--table-bg": "var(--color-surface)",
568
+ "--table-header-bg": "var(--color-surface-sunken)",
569
+ "--table-header-fg": "var(--color-text-secondary)",
570
+ "--table-header-size": "var(--text-xs)",
571
+ "--table-cell-fg": "var(--color-text-primary)",
572
+ "--table-cell-fg-muted": "var(--color-text-secondary)",
573
+ "--table-cell-size": "var(--text-sm)",
574
+ "--table-min-width": "36rem",
575
+ "--table-row-border": "var(--color-border-subtle)",
576
+ "--table-row-hover": "var(--color-surface-sunken)",
577
+ "--table-row-selected": "var(--color-accent-subtle)",
578
+ "--table-cell-padding-x": "var(--space-4)",
579
+ "--table-cell-padding-y": "var(--space-3)",
580
+ "--table-caption-fg": "var(--color-text-tertiary)",
581
+ "--table-caption-size": "var(--text-xs)",
582
+ "--table-radius": "var(--radius-lg)",
583
+ "--table-border": "var(--color-border-subtle)",
584
+ "--table-numeric-font": "var(--font-mono)",
585
+ "--table-sort-hover": "var(--color-text-primary)",
586
+ "--table-focus-color": "var(--color-focus)",
587
+ "--table-focus-offset": "calc(-1 * var(--focus-ring-offset))",
588
+ "--table-focus-width": "var(--focus-ring-width)",
589
+ "--table-toolbar-gap": "var(--space-3)",
590
+ "--table-toolbar-padding": "var(--space-3)",
591
+ "--table-toolbar-bg": "var(--color-surface)",
592
+ "--table-filter-width": "18rem"
593
+ },
594
+ "toast": {
595
+ "--toast-bg": "var(--color-overlay)",
596
+ "--toast-border": "var(--color-border-default)",
597
+ "--toast-fg": "var(--color-text-primary)",
598
+ "--toast-shadow": "var(--shadow-lg)",
599
+ "--toast-radius": "var(--radius-xl)",
600
+ "--toast-padding": "var(--space-4)",
601
+ "--toast-gap": "var(--space-3)",
602
+ "--toast-width": "24rem",
603
+ "--toast-title-size": "var(--text-sm)",
604
+ "--toast-title-weight": "var(--weight-medium)",
605
+ "--toast-body-size": "var(--text-sm)",
606
+ "--toast-body-fg": "var(--color-text-secondary)",
607
+ "--toast-body-gap": "var(--space-1)",
608
+ "--toast-icon-fg": "var(--color-text-primary)",
609
+ "--toast-info-icon": "var(--color-accent)",
610
+ "--toast-success-icon": "var(--color-success)",
611
+ "--toast-warning-icon": "var(--color-warning)",
612
+ "--toast-danger-icon": "var(--color-danger)",
613
+ "--toast-loading-icon": "var(--color-text-secondary)",
614
+ "--toast-close-fg": "var(--color-text-tertiary)",
615
+ "--toast-close-fg-hover": "var(--color-text-primary)",
616
+ "--toast-close-bg-hover": "var(--color-surface-sunken)",
617
+ "--toast-action-bg": "transparent",
618
+ "--toast-action-bg-hover": "var(--color-surface-sunken)",
619
+ "--toast-action-border": "var(--color-border-default)",
620
+ "--toast-action-fg": "var(--color-text-primary)",
621
+ "--toast-action-radius": "var(--radius-md)",
622
+ "--toast-action-height": "var(--space-8)",
623
+ "--toast-action-padding-x": "var(--space-3)",
624
+ "--toast-action-font-size": "var(--text-sm)",
625
+ "--toast-action-font-weight": "var(--weight-medium)",
626
+ "--toast-viewport-gap": "var(--space-3)",
627
+ "--toast-stack-peek": "0.75rem",
628
+ "--toast-stack-scale-step": "0.08",
629
+ "--toast-focus-color": "var(--color-focus)",
630
+ "--toast-focus-offset": "var(--focus-ring-offset)",
631
+ "--toast-focus-width": "var(--focus-ring-width)"
632
+ },
633
+ "alert": {
634
+ "--alert-radius": "var(--radius-md)",
635
+ "--alert-padding": "var(--space-4)",
636
+ "--alert-gap": "var(--space-3)",
637
+ "--alert-title-size": "var(--text-sm)",
638
+ "--alert-body-size": "var(--text-sm)",
639
+ "--alert-body-fg": "var(--color-text-secondary)",
640
+ "--alert-info-bg": "var(--color-accent-subtle)",
641
+ "--alert-info-border": "var(--color-accent)",
642
+ "--alert-info-fg": "var(--color-accent-subtle-fg)",
643
+ "--alert-success-bg": "var(--color-success-bg)",
644
+ "--alert-success-border": "var(--color-success)",
645
+ "--alert-success-fg": "var(--color-success-fg)",
646
+ "--alert-warning-bg": "var(--color-warning-bg)",
647
+ "--alert-warning-border": "var(--color-warning)",
648
+ "--alert-warning-fg": "var(--color-warning-fg)",
649
+ "--alert-danger-bg": "var(--color-danger-bg)",
650
+ "--alert-danger-border": "var(--color-danger)",
651
+ "--alert-danger-fg": "var(--color-danger-fg)",
652
+ "--alert-info-close-fg": "var(--color-accent-subtle-fg)",
653
+ "--alert-info-close-bg-hover": "var(--color-accent-subtle-hover)",
654
+ "--alert-success-close-fg": "var(--color-success-fg)",
655
+ "--alert-success-close-bg-hover": "var(--color-success-bg-hover)",
656
+ "--alert-warning-close-fg": "var(--color-warning-fg)",
657
+ "--alert-warning-close-bg-hover": "var(--color-warning-bg-hover)",
658
+ "--alert-danger-close-fg": "var(--color-danger-fg)",
659
+ "--alert-danger-close-bg-hover": "var(--color-danger-bg-hover)",
660
+ "--alert-focus-color": "var(--color-focus)",
661
+ "--alert-focus-offset": "var(--focus-ring-offset)",
662
+ "--alert-focus-width": "var(--focus-ring-width)"
663
+ },
664
+ "skeleton": {
665
+ "--skeleton-bg": "var(--color-surface-sunken)",
666
+ "--skeleton-highlight": "var(--color-border-subtle)",
667
+ "--skeleton-radius": "var(--radius-sm)",
668
+ "--skeleton-heading-height": "var(--space-4)",
669
+ "--skeleton-text-height": "var(--space-3)",
670
+ "--skeleton-text-gap": "var(--space-2)",
671
+ "--skeleton-image-radius": "var(--radius-md)",
672
+ "--skeleton-duration": "1.6s"
673
+ },
674
+ "spinner": {
675
+ "--spinner-size-sm": "var(--space-4)",
676
+ "--spinner-size-md": "var(--space-5)",
677
+ "--spinner-size-lg": "var(--space-8)",
678
+ "--spinner-track": "var(--color-border-default)",
679
+ "--spinner-indicator": "var(--color-accent)",
680
+ "--spinner-duration": "700ms",
681
+ "--spinner-stroke": "2px"
682
+ },
683
+ "empty": {
684
+ "--empty-padding": "var(--space-16) var(--space-6)",
685
+ "--empty-icon-size": "var(--space-12)",
686
+ "--empty-icon-bg": "var(--color-surface-sunken)",
687
+ "--empty-icon-fg": "var(--color-text-tertiary)",
688
+ "--empty-title-fg": "var(--color-text-primary)",
689
+ "--empty-title-size": "var(--text-lg)",
690
+ "--empty-body-fg": "var(--color-text-secondary)",
691
+ "--empty-body-size": "var(--text-sm)",
692
+ "--empty-gap": "var(--space-3)",
693
+ "--empty-max-width": "26rem",
694
+ "--empty-dashed-border": "var(--color-border-strong)",
695
+ "--empty-radius": "var(--radius-lg)",
696
+ "--empty-skeleton-gap": "var(--space-4)",
697
+ "--empty-skeleton-width": "24rem"
698
+ },
699
+ "motion": {
700
+ "--motion-lift-y": "-2px",
701
+ "--motion-lift-shadow": "var(--shadow-md)",
702
+ "--motion-underline-thickness": "1px",
703
+ "--motion-underline-offset": "0.2em",
704
+ "--motion-nudge": "3px",
705
+ "--motion-row-nudge": "4px",
706
+ "--motion-duration": "var(--duration-base)",
707
+ "--motion-duration-fast": "var(--duration-fast)",
708
+ "--motion-duration-slow": "var(--duration-slow)",
709
+ "--motion-delay-none": "0ms",
710
+ "--motion-delay-short": "var(--duration-fast)",
711
+ "--motion-delay-long": "var(--duration-slow)",
712
+ "--motion-ease": "var(--ease-standard)"
713
+ },
714
+ } as const;
715
+
716
+ export const focus = {
717
+ "--focus-ring-width": "2px",
718
+ "--focus-ring-offset": "2px",
719
+ "--focus-ring-color": "var(--color-focus)",
720
+ "--focus-ring-offset-color": "var(--color-focus-offset)"
721
+ } as const;