@repobit/dex-system-design 0.12.0 → 0.14.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 (18) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/package.json +2 -2
  3. package/src/components/Input/custom-form.stories.js +4 -4
  4. package/src/components/Input/index.js +0 -0
  5. package/src/stories/demo.stories.js +21 -22
  6. package/src/tokens/colors.js +10 -10
  7. package/src/tokens/fonts.stories.js +5 -5
  8. package/src/tokens/layout.css +3 -3
  9. package/src/tokens/spacing.stories.js +1 -1
  10. package/src/tokens/tokens.css +224 -875
  11. package/src/tokens/tokens.stories.js +3 -3
  12. package/src/tokens/typography.css.js +4 -0
  13. package/src/tokens/typography.stories.js +2 -2
  14. package/src/assets/icons/arrow_down.png +0 -0
  15. package/src/assets/icons/arrow_up.png +0 -0
  16. package/src/tokens/fonts.css +0 -166
  17. package/src/tokens/new-tokens.css +0 -698
  18. package/src/tokens/tokens.js +0 -281
package/src/tokens/new-tokens.css DELETED
@@ -1,698 +0,0 @@
1
- /* Design System Tokens - CSS Custom Properties */
2
- /* Generated from design token files */
3
-
4
- :root {
5
- /* ================================
6
- CORE TYPOGRAPHY TOKENS
7
- ================================ */
8
-
9
- --typography-fontFamily-sans: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
10
- --typography-fontFamily-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
11
-
12
- --typography-fontSize-xs: 0.75rem; /* 12px */
13
- --typography-fontSize-sm: 0.875rem; /* 14px */
14
- --typography-fontSize-base: 1rem; /* 16px */
15
- --typography-fontSize-lg: 1.125rem; /* 18px */
16
- --typography-fontSize-xl: 1.25rem; /* 20px */
17
- --typography-fontSize-2xl: 1.5rem; /* 24px */
18
- --typography-fontSize-3xl: 1.875rem; /* 30px */
19
- --typography-fontSize-4xl: 2.25rem; /* 36px */
20
- --typography-fontSize-5xl: 3rem; /* 48px */
21
- --typography-fontSize-6xl: 3.75rem; /* 60px */
22
- --typography-fontSize-7xl: 4.5rem; /* 72px */
23
- --typography-fontSize-8xl: 6rem; /* 96px */
24
- --typography-fontSize-9xl: 8rem; /* 128px */
25
-
26
- --typography-fontWeight-light: 300;
27
- --typography-fontWeight-normal: 400;
28
- --typography-fontWeight-medium: 500;
29
- --typography-fontWeight-semibold: 600;
30
- --typography-fontWeight-bold: 700;
31
-
32
- --typography-lineHeight-none: 1;
33
- --typography-lineHeight-tight: 1.25;
34
- --typography-lineHeight-snug: 1.375;
35
- --typography-lineHeight-normal: 1.5;
36
- --typography-lineHeight-relaxed: 1.625;
37
- --typography-lineHeight-loose: 2;
38
-
39
- --typography-letterSpacing-tighter: -0.05em;
40
- --typography-letterSpacing-tight: -0.025em;
41
- --typography-letterSpacing-normal: 0em;
42
- --typography-letterSpacing-wide: 0.025em;
43
- --typography-letterSpacing-wider: 0.05em;
44
- --typography-letterSpacing-widest: 0.1em;
45
-
46
- /* ================================
47
- CORE COLOR TOKENS
48
- ================================ */
49
-
50
- /* Neutral Colors */
51
- --color-neutral-0: #ffffff;
52
- --color-neutral-25: #fafafa;
53
- --color-neutral-50: #f5f5f5;
54
- --color-neutral-100: #e5e5e5;
55
- --color-neutral-200: #d4d4d4;
56
- --color-neutral-300: #a3a3a3;
57
- --color-neutral-400: #737373;
58
- --color-neutral-500: #6c7580;
59
- --color-neutral-600: #525252;
60
- --color-neutral-700: #404040;
61
- --color-neutral-800: #262626;
62
- --color-neutral-900: #171717;
63
-
64
- /* Blue Colors */
65
- --color-blue-50: #eff6ff;
66
- --color-blue-100: #dbeafe;
67
- --color-blue-200: #bfdbfe;
68
- --color-blue-300: #93c5fd;
69
- --color-blue-400: #60a5fa;
70
- --color-blue-500: #006dff;
71
- --color-blue-600: #0059d6;
72
- --color-blue-700: #1d4ed8;
73
- --color-blue-800: #1e40af;
74
- --color-blue-900: #1e3a8a;
75
-
76
- /* Red Colors */
77
- --color-red-50: #fef2f2;
78
- --color-red-100: #fee2e2;
79
- --color-red-200: #fecaca;
80
- --color-red-300: #fca5a5;
81
- --color-red-400: #f87171;
82
- --color-red-500: #ef4444;
83
- --color-red-600: #dc2626;
84
- --color-red-700: #b91c1c;
85
- --color-red-800: #991b1b;
86
- --color-red-900: #7f1d1d;
87
-
88
- /* Green Colors */
89
- --color-green-50: #f0fdf4;
90
- --color-green-100: #dcfce7;
91
- --color-green-200: #bbf7d0;
92
- --color-green-300: #86efac;
93
- --color-green-400: #4ade80;
94
- --color-green-500: #22c55e;
95
- --color-green-600: #16a34a;
96
- --color-green-700: #15803d;
97
- --color-green-800: #166534;
98
- --color-green-900: #14532d;
99
-
100
- /* Yellow Colors */
101
- --color-yellow-50: #fefce8;
102
- --color-yellow-100: #fef3c7;
103
- --color-yellow-200: #fde68a;
104
- --color-yellow-300: #fcd34d;
105
- --color-yellow-400: #fbbf24;
106
- --color-yellow-500: #f59e0b;
107
- --color-yellow-600: #d97706;
108
- --color-yellow-700: #b45309;
109
- --color-yellow-800: #92400e;
110
- --color-yellow-900: #78350f;
111
-
112
- /* ================================
113
- CORE SPACING TOKENS
114
- ================================ */
115
-
116
- --spacing-0: 0;
117
- --spacing-4: 0.25rem; /* 4px */
118
- --spacing-8: 0.5rem; /* 8px */
119
- --spacing-12: 0.75rem; /* 12px */
120
- --spacing-16: 1rem; /* 16px */
121
- --spacing-20: 1.25rem; /* 20px */
122
- --spacing-24: 1.5rem; /* 24px */
123
- --spacing-28: 1.75rem; /* 28px */
124
- --spacing-32: 2rem; /* 32px */
125
- --spacing-36: 2.25rem; /* 36px */
126
- --spacing-40: 2.5rem; /* 40px */
127
- --spacing-44: 2.75rem; /* 44px */
128
- --spacing-48: 3rem; /* 48px */
129
- --spacing-56: 3.5rem; /* 56px */
130
- --spacing-64: 4rem; /* 64px */
131
- --spacing-80: 5rem; /* 80px */
132
- --spacing-96: 6rem; /* 96px */
133
- --spacing-112: 7rem; /* 112px */
134
- --spacing-128: 8rem; /* 128px */
135
-
136
- /* ================================
137
- CORE BORDER TOKENS
138
- ================================ */
139
-
140
- --border-width-0: 0;
141
- --border-width-1: 1px;
142
- --border-width-2: 2px;
143
- --border-width-3: 3px;
144
- --border-width-4: 4px;
145
- --border-width-8: 8px;
146
-
147
- --radius-none: 0;
148
- --radius-sm: 0.25rem; /* 4px */
149
- --radius-md: 0.375rem; /* 6px */
150
- --radius-lg: 0.5rem; /* 8px */
151
- --radius-xl: 0.75rem; /* 12px */
152
- --radius-2xl: 1rem; /* 16px */
153
- --radius-3xl: 1.5rem; /* 24px */
154
- --radius-full: 9999px;
155
-
156
- /* ================================
157
- CORE DIMENSION TOKENS
158
- ================================ */
159
-
160
- --dimension-2px: 2px;
161
- --dimension-4px: 4px;
162
- --dimension-8px: 8px;
163
- --dimension-12px: 12px;
164
- --dimension-16px: 16px;
165
- --dimension-20px: 20px;
166
- --dimension-24px: 24px;
167
- --dimension-32px: 32px;
168
- --dimension-34px: 34px;
169
- --dimension-40px: 40px;
170
- --dimension-45px: 45px;
171
- --dimension-48px: 48px;
172
- --dimension-55px: 55px;
173
- --dimension-64px: 64px;
174
-
175
- /* ================================
176
- CORE TRANSITION TOKENS
177
- ================================ */
178
-
179
- --transition-duration-fast: 150ms;
180
- --transition-duration-normal: 200ms;
181
- --transition-duration-slow: 300ms;
182
- --transition-duration-slower: 500ms;
183
-
184
- --transition-easing-linear: linear;
185
- --transition-easing-smooth: ease-in-out;
186
- --transition-easing-ease-in: ease-in;
187
- --transition-easing-ease-out: ease-out;
188
- --transition-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
189
-
190
- /* ================================
191
- CORE SHADOW TOKENS
192
- ================================ */
193
-
194
- --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
195
- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
196
- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
197
- --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
198
- --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
199
- --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
200
-
201
- /* Focus Shadows - Box Shadow Version */
202
- --shadow-focus-outline-blue: 0 0 0 3px rgba(6, 109, 255, 0.15);
203
- --shadow-focus-outline-red: 0 0 0 3px rgba(239, 68, 68, 0.15);
204
- --shadow-focus-outline-green: 0 0 0 3px rgba(34, 197, 94, 0.15);
205
-
206
- /* Focus Outlines - Two-Color System for Universal Visibility */
207
- --focus-outline-primary: 0 0 0 2px var(--color-neutral-0), 0 0 0 4px var(--color-blue-500);
208
- --focus-outline-secondary: 0 0 0 2px var(--color-neutral-0), 0 0 0 4px var(--color-neutral-600);
209
- --focus-outline-error: 0 0 0 2px var(--color-neutral-0), 0 0 0 4px var(--color-red-500);
210
- --focus-outline-success: 0 0 0 2px var(--color-neutral-0), 0 0 0 4px var(--color-green-500);
211
-
212
- /* Traditional Outline Values for Fallback */
213
- --focus-outline-traditional: 2px solid var(--color-blue-500);
214
- --focus-outline-offset: 2px;
215
-
216
- /* ================================
217
- COMPONENT TOKENS - TYPOGRAPHY
218
- ================================ */
219
-
220
- /* Heading Tokens */
221
- --typography-heading-h1-fontSize: var(--typography-fontSize-5xl);
222
- --typography-heading-h1-fontWeight: var(--typography-fontWeight-bold);
223
- --typography-heading-h1-lineHeight: var(--typography-lineHeight-snug);
224
- --typography-heading-h1-letterSpacing: var(--typography-letterSpacing-normal);
225
- --typography-heading-h1-fontFamily: var(--typography-fontFamily-sans);
226
-
227
- --typography-heading-h2-fontSize: var(--typography-fontSize-4xl);
228
- --typography-heading-h2-fontWeight: var(--typography-fontWeight-bold);
229
- --typography-heading-h2-lineHeight: var(--typography-lineHeight-snug);
230
- --typography-heading-h2-letterSpacing: var(--typography-letterSpacing-normal);
231
- --typography-heading-h2-fontFamily: var(--typography-fontFamily-sans);
232
-
233
- --typography-heading-h3-fontSize: var(--typography-fontSize-3xl);
234
- --typography-heading-h3-fontWeight: var(--typography-fontWeight-semibold);
235
- --typography-heading-h3-lineHeight: var(--typography-lineHeight-snug);
236
- --typography-heading-h3-letterSpacing: var(--typography-letterSpacing-normal);
237
- --typography-heading-h3-fontFamily: var(--typography-fontFamily-sans);
238
-
239
- --typography-heading-h4-fontSize: var(--typography-fontSize-2xl);
240
- --typography-heading-h4-fontWeight: var(--typography-fontWeight-semibold);
241
- --typography-heading-h4-lineHeight: var(--typography-lineHeight-snug);
242
- --typography-heading-h4-letterSpacing: var(--typography-letterSpacing-normal);
243
- --typography-heading-h4-fontFamily: var(--typography-fontFamily-sans);
244
-
245
- --typography-heading-h5-fontSize: var(--typography-fontSize-xl);
246
- --typography-heading-h5-fontWeight: var(--typography-fontWeight-medium);
247
- --typography-heading-h5-lineHeight: var(--typography-lineHeight-normal);
248
- --typography-heading-h5-letterSpacing: var(--typography-letterSpacing-normal);
249
- --typography-heading-h5-fontFamily: var(--typography-fontFamily-sans);
250
-
251
- --typography-heading-h6-fontSize: var(--typography-fontSize-lg);
252
- --typography-heading-h6-fontWeight: var(--typography-fontWeight-medium);
253
- --typography-heading-h6-lineHeight: var(--typography-lineHeight-normal);
254
- --typography-heading-h6-letterSpacing: var(--typography-letterSpacing-normal);
255
- --typography-heading-h6-fontFamily: var(--typography-fontFamily-sans);
256
-
257
- /* Body Text Tokens */
258
- --typography-body-large-fontSize: var(--typography-fontSize-lg);
259
- --typography-body-large-fontWeight: var(--typography-fontWeight-normal);
260
- --typography-body-large-lineHeight: var(--typography-lineHeight-relaxed);
261
- --typography-body-large-letterSpacing: var(--typography-letterSpacing-normal);
262
- --typography-body-large-fontFamily: var(--typography-fontFamily-sans);
263
-
264
- --typography-body-regular-fontSize: var(--typography-fontSize-base);
265
- --typography-body-regular-fontWeight: var(--typography-fontWeight-normal);
266
- --typography-body-regular-lineHeight: var(--typography-lineHeight-normal);
267
- --typography-body-regular-letterSpacing: var(--typography-letterSpacing-normal);
268
- --typography-body-regular-fontFamily: var(--typography-fontFamily-sans);
269
-
270
- --typography-body-small-fontSize: var(--typography-fontSize-sm);
271
- --typography-body-small-fontWeight: var(--typography-fontWeight-normal);
272
- --typography-body-small-lineHeight: var(--typography-lineHeight-normal);
273
- --typography-body-small-letterSpacing: var(--typography-letterSpacing-normal);
274
- --typography-body-small-fontFamily: var(--typography-fontFamily-sans);
275
-
276
- --typography-body-lead-fontSize: var(--typography-fontSize-xl);
277
- --typography-body-lead-fontWeight: var(--typography-fontWeight-normal);
278
- --typography-body-lead-lineHeight: var(--typography-lineHeight-relaxed);
279
- --typography-body-lead-letterSpacing: var(--typography-letterSpacing-normal);
280
- --typography-body-lead-fontFamily: var(--typography-fontFamily-sans);
281
-
282
- /* Label Tokens */
283
- --typography-label-default-fontSize: var(--typography-fontSize-sm);
284
- --typography-label-default-fontWeight: var(--typography-fontWeight-medium);
285
- --typography-label-default-lineHeight: var(--typography-lineHeight-normal);
286
- --typography-label-default-letterSpacing: var(--typography-letterSpacing-normal);
287
- --typography-label-default-fontFamily: var(--typography-fontFamily-sans);
288
-
289
- --typography-label-small-fontSize: var(--typography-fontSize-xs);
290
- --typography-label-small-fontWeight: var(--typography-fontWeight-medium);
291
- --typography-label-small-lineHeight: var(--typography-lineHeight-normal);
292
- --typography-label-small-letterSpacing: var(--typography-letterSpacing-wide);
293
- --typography-label-small-fontFamily: var(--typography-fontFamily-sans);
294
-
295
- --typography-label-large-fontSize: var(--typography-fontSize-base);
296
- --typography-label-large-fontWeight: var(--typography-fontWeight-medium);
297
- --typography-label-large-lineHeight: var(--typography-lineHeight-normal);
298
- --typography-label-large-letterSpacing: var(--typography-letterSpacing-normal);
299
- --typography-label-large-fontFamily: var(--typography-fontFamily-sans);
300
-
301
- --typography-label-xl-fontSize: var(--typography-fontSize-lg);
302
- --typography-label-xl-fontWeight: var(--typography-fontWeight-medium);
303
- --typography-label-xl-lineHeight: var(--typography-lineHeight-normal);
304
- --typography-label-xl-letterSpacing: var(--typography-letterSpacing-normal);
305
- --typography-label-xl-fontFamily: var(--typography-fontFamily-sans);
306
-
307
- /* Caption Tokens */
308
- --typography-caption-default-fontSize: var(--typography-fontSize-xs);
309
- --typography-caption-default-fontWeight: var(--typography-fontWeight-normal);
310
- --typography-caption-default-lineHeight: var(--typography-lineHeight-normal);
311
- --typography-caption-default-letterSpacing: var(--typography-letterSpacing-normal);
312
- --typography-caption-default-fontFamily: var(--typography-fontFamily-sans);
313
-
314
- --typography-caption-small-fontSize: var(--typography-fontSize-xs);
315
- --typography-caption-small-fontWeight: var(--typography-fontWeight-normal);
316
- --typography-caption-small-lineHeight: var(--typography-lineHeight-normal);
317
- --typography-caption-small-letterSpacing: var(--typography-letterSpacing-wide);
318
- --typography-caption-small-fontFamily: var(--typography-fontFamily-sans);
319
-
320
- /* Link Tokens */
321
- --typography-link-default-fontSize: inherit;
322
- --typography-link-default-fontWeight: var(--typography-fontWeight-normal);
323
- --typography-link-default-lineHeight: inherit;
324
- --typography-link-default-letterSpacing: inherit;
325
- --typography-link-default-fontFamily: inherit;
326
- --typography-link-default-textDecoration-default: underline;
327
- --typography-link-default-textDecoration-hover: none;
328
-
329
- --typography-link-standalone-fontSize: var(--typography-fontSize-base);
330
- --typography-link-standalone-fontWeight: var(--typography-fontWeight-medium);
331
- --typography-link-standalone-lineHeight: var(--typography-lineHeight-normal);
332
- --typography-link-standalone-letterSpacing: var(--typography-letterSpacing-normal);
333
- --typography-link-standalone-fontFamily: var(--typography-fontFamily-sans);
334
- --typography-link-standalone-textDecoration-default: underline;
335
- --typography-link-standalone-textDecoration-hover: none;
336
-
337
- /* Code Tokens */
338
- --typography-code-inline-fontSize: 0.875em;
339
- --typography-code-inline-fontWeight: var(--typography-fontWeight-normal);
340
- --typography-code-inline-lineHeight: inherit;
341
- --typography-code-inline-letterSpacing: var(--typography-letterSpacing-normal);
342
- --typography-code-inline-fontFamily: var(--typography-fontFamily-mono);
343
-
344
- --typography-code-block-fontSize: var(--typography-fontSize-sm);
345
- --typography-code-block-fontWeight: var(--typography-fontWeight-normal);
346
- --typography-code-block-lineHeight: var(--typography-lineHeight-relaxed);
347
- --typography-code-block-letterSpacing: var(--typography-letterSpacing-normal);
348
- --typography-code-block-fontFamily: var(--typography-fontFamily-mono);
349
-
350
- /* Display Typography Tokens */
351
- --typography-display-3xl-fontSize: var(--typography-fontSize-9xl);
352
- --typography-display-3xl-fontWeight: var(--typography-fontWeight-bold);
353
- --typography-display-3xl-lineHeight: var(--typography-lineHeight-tight);
354
- --typography-display-3xl-letterSpacing: var(--typography-letterSpacing-tight);
355
- --typography-display-3xl-fontFamily: var(--typography-fontFamily-sans);
356
-
357
- --typography-display-2xl-fontSize: var(--typography-fontSize-8xl);
358
- --typography-display-2xl-fontWeight: var(--typography-fontWeight-bold);
359
- --typography-display-2xl-lineHeight: var(--typography-lineHeight-tight);
360
- --typography-display-2xl-letterSpacing: var(--typography-letterSpacing-tight);
361
- --typography-display-2xl-fontFamily: var(--typography-fontFamily-sans);
362
-
363
- --typography-display-xl-fontSize: var(--typography-fontSize-7xl);
364
- --typography-display-xl-fontWeight: var(--typography-fontWeight-bold);
365
- --typography-display-xl-lineHeight: var(--typography-lineHeight-tight);
366
- --typography-display-xl-letterSpacing: var(--typography-letterSpacing-tight);
367
- --typography-display-xl-fontFamily: var(--typography-fontFamily-sans);
368
-
369
- --typography-display-lg-fontSize: var(--typography-fontSize-6xl);
370
- --typography-display-lg-fontWeight: var(--typography-fontWeight-bold);
371
- --typography-display-lg-lineHeight: var(--typography-lineHeight-tight);
372
- --typography-display-lg-letterSpacing: var(--typography-letterSpacing-tight);
373
- --typography-display-lg-fontFamily: var(--typography-fontFamily-sans);
374
-
375
- --typography-display-md-fontSize: var(--typography-fontSize-5xl);
376
- --typography-display-md-fontWeight: var(--typography-fontWeight-bold);
377
- --typography-display-md-lineHeight: var(--typography-lineHeight-tight);
378
- --typography-display-md-letterSpacing: var(--typography-letterSpacing-tight);
379
- --typography-display-md-fontFamily: var(--typography-fontFamily-sans);
380
-
381
- --typography-display-sm-fontSize: var(--typography-fontSize-4xl);
382
- --typography-display-sm-fontWeight: var(--typography-fontWeight-bold);
383
- --typography-display-sm-lineHeight: var(--typography-lineHeight-tight);
384
- --typography-display-sm-letterSpacing: var(--typography-letterSpacing-tight);
385
- --typography-display-sm-fontFamily: var(--typography-fontFamily-sans);
386
-
387
- /* ================================
388
- COMPONENT TOKENS - FORM
389
- ================================ */
390
-
391
- /* Form Label Tokens */
392
- --form-label-default-fontSize: var(--typography-fontSize-sm);
393
- --form-label-default-fontWeight: var(--typography-fontWeight-medium);
394
- --form-label-default-lineHeight: var(--typography-lineHeight-normal);
395
- --form-label-default-letterSpacing: var(--typography-letterSpacing-normal);
396
- --form-label-default-fontFamily: var(--typography-fontFamily-sans);
397
- --form-label-default-color: var(--color-neutral-900);
398
- --form-label-default-marginBottom: var(--spacing-1);
399
-
400
- --form-label-large-fontSize: var(--typography-fontSize-lg);
401
- --form-label-large-fontWeight: var(--typography-fontWeight-medium);
402
- --form-label-large-lineHeight: var(--typography-lineHeight-normal);
403
- --form-label-large-letterSpacing: var(--typography-letterSpacing-normal);
404
- --form-label-large-fontFamily: var(--typography-fontFamily-sans);
405
- --form-label-large-color: var(--color-neutral-900);
406
- --form-label-large-marginBottom: var(--spacing-2);
407
-
408
- --form-label-small-fontSize: var(--typography-fontSize-xs);
409
- --form-label-small-fontWeight: var(--typography-fontWeight-medium);
410
- --form-label-small-lineHeight: var(--typography-lineHeight-normal);
411
- --form-label-small-letterSpacing: var(--typography-letterSpacing-wide);
412
- --form-label-small-fontFamily: var(--typography-fontFamily-sans);
413
- --form-label-small-color: var(--color-neutral-900);
414
- --form-label-small-marginBottom: var(--spacing-1);
415
-
416
- --form-label-required-color: var(--color-red-500);
417
- --form-label-required-marginLeft: var(--spacing-1);
418
-
419
- /* Form Input Tokens */
420
- --form-input-small-height: var(--dimension-34px);
421
- --form-input-small-fontSize: var(--typography-fontSize-sm);
422
- --form-input-small-padding: var(--spacing-2) var(--spacing-3);
423
- --form-input-small-borderRadius: var(--radius-sm);
424
-
425
- --form-input-medium-height: var(--dimension-45px);
426
- --form-input-medium-fontSize: var(--typography-fontSize-base);
427
- --form-input-medium-padding: var(--spacing-3) var(--spacing-4);
428
- --form-input-medium-borderRadius: var(--radius-md);
429
-
430
- --form-input-large-height: var(--dimension-55px);
431
- --form-input-large-fontSize: var(--typography-fontSize-lg);
432
- --form-input-large-padding: var(--spacing-4) var(--spacing-5);
433
- --form-input-large-borderRadius: var(--radius-lg);
434
-
435
- --form-input-default-backgroundColor: var(--color-neutral-0);
436
- --form-input-default-borderColor: var(--color-neutral-300);
437
- --form-input-default-borderWidth: var(--border-width-1);
438
- --form-input-default-color: var(--color-neutral-900);
439
- --form-input-default-fontFamily: var(--typography-fontFamily-sans);
440
- --form-input-default-lineHeight: var(--typography-lineHeight-normal);
441
-
442
- --form-input-focus-borderColor: var(--color-blue-500);
443
- --form-input-focus-boxShadow: var(--shadow-focus-outline-blue);
444
-
445
- --form-input-error-backgroundColor: var(--color-red-50);
446
- --form-input-error-borderColor: var(--color-red-500);
447
- --form-input-error-placeholderColor: var(--color-red-400);
448
-
449
- --form-input-success-backgroundColor: var(--color-green-50);
450
- --form-input-success-borderColor: var(--color-green-500);
451
- --form-input-success-placeholderColor: var(--color-green-400);
452
-
453
- --form-input-disabled-backgroundColor: var(--color-neutral-100);
454
- --form-input-disabled-borderColor: var(--color-neutral-300);
455
- --form-input-disabled-color: var(--color-neutral-500);
456
- --form-input-disabled-placeholderColor: var(--color-neutral-400);
457
-
458
- /* Form Help Text Tokens */
459
- --form-help-text-default-fontSize: var(--typography-fontSize-xs);
460
- --form-help-text-default-fontWeight: var(--typography-fontWeight-normal);
461
- --form-help-text-default-lineHeight: var(--typography-lineHeight-normal);
462
- --form-help-text-default-letterSpacing: var(--typography-letterSpacing-normal);
463
- --form-help-text-default-fontFamily: var(--typography-fontFamily-sans);
464
- --form-help-text-default-color: var(--color-neutral-600);
465
- --form-help-text-default-marginTop: var(--spacing-1);
466
-
467
- --form-help-text-error-color: var(--color-red-600);
468
- --form-help-text-success-color: var(--color-green-600);
469
-
470
- /* Form Layout Tokens */
471
- --form-fieldSpacing: var(--spacing-6);
472
- --form-sectionSpacing: var(--spacing-8);
473
- --form-labelSpacing: var(--spacing-1);
474
- --form-helpTextSpacing: var(--spacing-1);
475
-
476
- /* ================================
477
- COMPONENT TOKENS - BUTTON
478
- ================================ */
479
-
480
- /* Button Size Tokens */
481
- --button-small-height: var(--dimension-34px);
482
- --button-small-fontSize: var(--typography-fontSize-sm);
483
- --button-small-padding: var(--spacing-2) var(--spacing-3);
484
- --button-small-borderRadius: var(--radius-sm);
485
-
486
- --button-medium-height: var(--dimension-45px);
487
- --button-medium-fontSize: var(--typography-fontSize-base);
488
- --button-medium-padding: var(--spacing-3) var(--spacing-4);
489
- --button-medium-borderRadius: var(--radius-md);
490
-
491
- --button-large-height: var(--dimension-55px);
492
- --button-large-fontSize: var(--typography-fontSize-lg);
493
- --button-large-padding: var(--spacing-4) var(--spacing-5);
494
- --button-large-borderRadius: var(--radius-lg);
495
-
496
- /* Button Default State */
497
- --button-default-backgroundColor: var(--color-neutral-0);
498
- --button-default-borderColor: var(--color-neutral-300);
499
- --button-default-borderWidth: var(--border-width-1);
500
- --button-default-color: var(--color-neutral-900);
501
- --button-default-fontFamily: var(--typography-fontFamily-sans);
502
- --button-default-fontWeight: var(--typography-fontWeight-medium);
503
- --button-default-lineHeight: var(--typography-lineHeight-normal);
504
-
505
- /* Button Shared Tokens */
506
- --button-shared-fontFamily: var(--typography-fontFamily-sans);
507
- --button-shared-fontWeight: var(--typography-fontWeight-medium);
508
- --button-shared-lineHeight: var(--typography-lineHeight-tight);
509
- --button-shared-letterSpacing: var(--typography-letterSpacing-normal);
510
- --button-shared-borderWidth: var(--border-width-1);
511
- --button-shared-transition-properties: background-color, border-color, color, box-shadow;
512
- --button-shared-transition-duration: var(--transition-duration-normal);
513
- --button-shared-transition-easing: var(--transition-easing-smooth);
514
- --button-shared-focus-outline: var(--focus-outline-traditional);
515
- --button-shared-focus-outlineOffset: var(--focus-outline-offset);
516
- --button-shared-focus-boxShadow: var(--focus-outline-primary);
517
- --button-shared-disabled-opacity: 0.6;
518
- --button-shared-disabled-cursor: not-allowed;
519
-
520
- /* Button Size Tokens */
521
- --button-size-small-padding-vertical: var(--spacing-2);
522
- --button-size-small-padding-horizontal: var(--spacing-4);
523
- --button-size-small-fontSize: var(--typography-fontSize-sm);
524
- --button-size-small-height: var(--dimension-34px);
525
- --button-size-small-borderRadius: var(--radius-sm);
526
- --button-size-small-gap: var(--spacing-1);
527
-
528
- --button-size-medium-padding-vertical: var(--spacing-3);
529
- --button-size-medium-padding-horizontal: var(--spacing-5);
530
- --button-size-medium-fontSize: var(--typography-fontSize-base);
531
- --button-size-medium-height: var(--dimension-45px);
532
- --button-size-medium-borderRadius: var(--radius-md);
533
- --button-size-medium-gap: var(--spacing-2);
534
-
535
- --button-size-large-padding-vertical: var(--spacing-4);
536
- --button-size-large-padding-horizontal: var(--spacing-6);
537
- --button-size-large-fontSize: var(--typography-fontSize-lg);
538
- --button-size-large-height: var(--dimension-55px);
539
- --button-size-large-borderRadius: var(--radius-lg);
540
- --button-size-large-gap: var(--spacing-2);
541
-
542
- /* Button Primary State */
543
- --button-primary-background-default: var(--color-blue-500);
544
- --button-primary-text-default: var(--color-neutral-0);
545
- --button-primary-border-default: var(--color-blue-500);
546
- --button-primary-background-hover: var(--color-blue-600);
547
- --button-primary-border-hover: var(--color-blue-600);
548
- --button-primary-background-active: var(--color-blue-700);
549
- --button-primary-border-active: var(--color-blue-700);
550
- --button-primary-border-focus: var(--color-blue-500);
551
- --button-primary-background-disabled: var(--color-neutral-300);
552
- --button-primary-text-disabled: var(--color-neutral-500);
553
- --button-primary-border-disabled: var(--color-neutral-300);
554
-
555
- /* Button Secondary State */
556
- --button-secondary-background-default: var(--color-neutral-950);
557
- --button-secondary-text-default: var(--color-neutral-0);
558
- --button-secondary-border-default: var(--color-neutral-950);
559
- --button-secondary-background-hover: var(--color-neutral-900);
560
- --button-secondary-text-hover: var(--color-neutral-0);
561
- --button-secondary-border-hover: var(--color-neutral-900);
562
- --button-secondary-background-active: var(--color-neutral-800);
563
- --button-secondary-text-active: var(--color-neutral-0);
564
- --button-secondary-border-active: var(--color-neutral-800);
565
- --button-secondary-border-focus: var(--color-neutral-950);
566
- --button-secondary-background-disabled: var(--color-neutral-300);
567
- --button-secondary-text-disabled: var(--color-neutral-500);
568
- --button-secondary-border-disabled: var(--color-neutral-300);
569
-
570
- /* Button Tertiary Primary State */
571
- --button-tertiaryPrimary-background-default: transparent;
572
- --button-tertiaryPrimary-text-default: var(--color-blue-500);
573
- --button-tertiaryPrimary-border-default: var(--color-blue-500);
574
- --button-tertiaryPrimary-borderWidth: var(--border-width-2);
575
- --button-tertiaryPrimary-background-hover: var(--color-blue-50);
576
- --button-tertiaryPrimary-text-hover: var(--color-blue-500);
577
- --button-tertiaryPrimary-border-hover: var(--color-blue-500);
578
- --button-tertiaryPrimary-background-active: var(--color-blue-500);
579
- --button-tertiaryPrimary-text-active: var(--color-neutral-0);
580
- --button-tertiaryPrimary-border-active: var(--color-blue-500);
581
- --button-tertiaryPrimary-border-focus: var(--color-blue-500);
582
- --button-tertiaryPrimary-background-disabled: transparent;
583
- --button-tertiaryPrimary-text-disabled: var(--color-neutral-400);
584
- --button-tertiaryPrimary-border-disabled: var(--color-neutral-300);
585
-
586
- /* Button Tertiary Secondary State */
587
- --button-tertiarySecondary-background-default: transparent;
588
- --button-tertiarySecondary-text-default: var(--color-neutral-900);
589
- --button-tertiarySecondary-border-default: var(--color-neutral-900);
590
- --button-tertiarySecondary-borderWidth: var(--border-width-2);
591
- --button-tertiarySecondary-background-hover: var(--color-neutral-100);
592
- --button-tertiarySecondary-text-hover: var(--color-neutral-900);
593
- --button-tertiarySecondary-border-hover: var(--color-neutral-900);
594
- --button-tertiarySecondary-background-active: var(--color-neutral-900);
595
- --button-tertiarySecondary-text-active: var(--color-neutral-0);
596
- --button-tertiarySecondary-border-active: var(--color-neutral-900);
597
- --button-tertiarySecondary-border-focus: var(--color-neutral-900);
598
- --button-tertiarySecondary-background-disabled: transparent;
599
- --button-tertiarySecondary-text-disabled: var(--color-neutral-400);
600
- --button-tertiarySecondary-border-disabled: var(--color-neutral-300);
601
-
602
- /* Button CTA State */
603
- --button-cta-background-default: var(--color-red-500);
604
- --button-cta-text-default: var(--color-neutral-0);
605
- --button-cta-border-default: var(--color-red-500);
606
- --button-cta-background-hover: var(--color-red-600);
607
- --button-cta-border-hover: var(--color-red-600);
608
- --button-cta-background-active: var(--color-red-700);
609
- --button-cta-border-active: var(--color-red-700);
610
- --button-cta-border-focus: var(--color-red-500);
611
- --button-cta-background-disabled: var(--color-neutral-300);
612
- --button-cta-text-disabled: var(--color-neutral-500);
613
- --button-cta-border-disabled: var(--color-neutral-300);
614
-
615
- /* Button Empty State */
616
- --button-empty-background-default: var(--color-neutral-200);
617
- --button-empty-text-default: transparent;
618
- --button-empty-border-default: var(--color-neutral-200);
619
-
620
- /* Button Disabled State */
621
- --button-disabled-backgroundColor: var(--color-neutral-100);
622
- --button-disabled-borderColor: var(--color-neutral-300);
623
- --button-disabled-color: var(--color-neutral-500);
624
-
625
- /* Button Focus State */
626
- --button-focus-boxShadow: var(--shadow-focus-outline-blue);
627
-
628
- /* ================================
629
- COMPONENT TOKENS - ANNOTATION
630
- ================================ */
631
-
632
- /* Footnote Tokens */
633
- --footnote-reference-fontSize: 0.75em;
634
- --footnote-reference-fontWeight: var(--typography-fontWeight-normal);
635
- --footnote-reference-lineHeight: 1;
636
- --footnote-reference-verticalAlign: super;
637
- --footnote-reference-color: inherit;
638
- --footnote-reference-marginLeft: 0.1em;
639
- --footnote-reference-marginRight: 0.2em;
640
-
641
- /* Citation Tokens */
642
- --citation-reference-fontSize: inherit;
643
- --citation-reference-fontWeight: var(--typography-fontWeight-normal);
644
- --citation-reference-lineHeight: inherit;
645
- --citation-reference-color: var(--color-blue-600);
646
- --citation-reference-textDecoration: underline;
647
- --citation-reference-hover-color: var(--color-blue-700);
648
- --citation-reference-hover-textDecoration: none;
649
-
650
- /* Mathematical Notation Tokens */
651
- --math-superscript-fontSize: 0.75em;
652
- --math-superscript-fontWeight: var(--typography-fontWeight-normal);
653
- --math-superscript-lineHeight: 1;
654
- --math-superscript-verticalAlign: super;
655
- --math-superscript-marginLeft: 0.05em;
656
-
657
- --math-subscript-fontSize: 0.75em;
658
- --math-subscript-fontWeight: var(--typography-fontWeight-normal);
659
- --math-subscript-lineHeight: 1;
660
- --math-subscript-verticalAlign: sub;
661
- --math-subscript-marginLeft: 0.05em;
662
-
663
- /* ================================
664
- COMPONENT TOKENS - ICON
665
- ================================ */
666
-
667
- /* Icon Size Tokens */
668
- --icon-xs-size: var(--dimension-12px);
669
- --icon-sm-size: var(--dimension-16px);
670
- --icon-md-size: var(--dimension-20px);
671
- --icon-lg-size: var(--dimension-24px);
672
- --icon-xl-size: var(--dimension-32px);
673
- --icon-2xl-size: var(--dimension-48px);
674
- --icon-3xl-size: var(--dimension-64px);
675
-
676
- /* Icon Context Tokens */
677
- --icon-button-small-size: var(--dimension-16px);
678
- --icon-button-medium-size: var(--dimension-20px);
679
- --icon-button-large-size: var(--dimension-24px);
680
-
681
- --icon-form-small-size: var(--dimension-16px);
682
- --icon-form-medium-size: var(--dimension-20px);
683
- --icon-form-large-size: var(--dimension-24px);
684
-
685
- /* Icon State Tokens */
686
- --icon-default-color: var(--color-neutral-600);
687
- --icon-hover-color: var(--color-neutral-700);
688
- --icon-active-color: var(--color-neutral-800);
689
- --icon-disabled-color: var(--color-neutral-400);
690
-
691
- --icon-primary-color: var(--color-blue-500);
692
- --icon-primary-hover-color: var(--color-blue-600);
693
- --icon-primary-active-color: var(--color-blue-700);
694
-
695
- --icon-success-color: var(--color-green-500);
696
- --icon-warning-color: var(--color-yellow-500);
697
- --icon-error-color: var(--color-red-500);
698
- }