@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/tokens.css CHANGED
@@ -1,101 +1,58 @@
1
1
  :root {
2
- /* ================================
3
- CORE TYPOGRAPHY TOKENS
4
- ================================ */
5
-
6
- --typography-fontFamily-sans: "IBM Plex Sans", system-ui, -apple-system,
7
- BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
8
- --typography-fontFamily-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular,
9
- Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
10
-
11
- --typography-fontSize-xxs: 0.6875rem; /* 11px */
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: 2rem; /* 32px */
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
2
 
46
3
  /* =====================
47
4
  COLORS
48
5
  ====================== */
49
- --color-blue-50: #f0f7ff;
50
- --color-blue-100: #d6e8ff;
51
- --color-blue-200: #9ec8ff;
52
- --color-blue-300: #6babff;
53
- --color-blue-400: #338bff;
6
+ --color-blue-50: #F0F7FF;
7
+ --color-blue-100: #D6E8FF;
8
+ --color-blue-200: #9EC8FF;
9
+ --color-blue-300: #6BABFF;
10
+ --color-blue-400: #338BFF;
54
11
  --color-blue-500: #006dff;
55
- --color-blue-600: #0059d6;
56
- --color-blue-700: #0045ad;
12
+ --color-blue-600: #0059D6;
13
+ --color-blue-700: #0045AD;
57
14
  --color-blue-800: #003385;
58
- --color-blue-900: #00225c;
15
+ --color-blue-900: #00225C;
59
16
  --color-blue-950: #001947;
60
17
 
61
- --color-red-50: #fff0f0;
62
- --color-red-100: #ffd6d6;
63
- --color-red-200: #ff9e9e;
64
- --color-red-300: #ff6b6b;
65
- --color-red-400: #ff3333;
66
- --color-red-500: #ff0000;
67
- --color-red-600: #d60000;
68
- --color-red-700: #ad0000;
18
+ --color-red-50: #FFF0F0;
19
+ --color-red-100: #FFD6D6;
20
+ --color-red-200: #FF9E9E;
21
+ --color-red-300: #FF6B6B;
22
+ --color-red-400: #FF3333;
23
+ --color-red-500: #FF0000;
24
+ --color-red-600: #D60000;
25
+ --color-red-700: #AD0000;
69
26
  --color-red-800: #850000;
70
- --color-red-900: #5c0000;
27
+ --color-red-900: #5C0000;
71
28
  --color-red-950: #470000;
72
29
 
73
- --color-green-50: #edfdf1;
74
- --color-green-100: #d1fadc;
75
- --color-green-200: #9af4b4;
76
- --color-green-300: #63ee8d;
77
- --color-green-400: #2ce767;
78
- --color-green-500: #15c14f;
79
- --color-green-600: #12a641;
80
- --color-green-700: #0e8532;
81
- --color-green-800: #0b6a26;
82
- --color-green-900: #084a1a;
83
- --color-green-950: #063c14;
84
-
85
- --color-yellow-50: #fffbf0;
86
- --color-yellow-100: #fff5d6;
87
- --color-yellow-200: #ffe89e;
88
- --color-yellow-300: #ffdc6b;
89
- --color-yellow-400: #ffcf33;
90
- --color-yellow-500: #ffc400;
91
- --color-yellow-600: #d6a000;
92
- --color-yellow-700: #ad7f00;
93
- --color-yellow-800: #855f00;
94
- --color-yellow-900: #5c4000;
30
+ --color-green-50: #EDFDF1;
31
+ --color-green-100: #D1FADC;
32
+ --color-green-200: #9AF4B4;
33
+ --color-green-300: #63EE8D;
34
+ --color-green-400: #2CE767;
35
+ --color-green-500: #15C14F;
36
+ --color-green-600: #12A641;
37
+ --color-green-700: #0E8532;
38
+ --color-green-800: #0B6A26;
39
+ --color-green-900: #084A1A;
40
+ --color-green-950: #063C14;
41
+
42
+ --color-yellow-50: #FFFBF0;
43
+ --color-yellow-100: #FFF5D6;
44
+ --color-yellow-200: #FFE89E;
45
+ --color-yellow-300: #FFDC6B;
46
+ --color-yellow-400: #FFCF33;
47
+ --color-yellow-500: #FFC400;
48
+ --color-yellow-600: #D6A000;
49
+ --color-yellow-700: #AD7F00;
50
+ --color-yellow-800: #855F00;
51
+ --color-yellow-900: #5C4000;
95
52
  --color-yellow-950: #473100;
96
53
 
97
- --color-neutral-0: #ffffff;
98
- --color-neutral-25: #fafafa;
54
+ --color-neutral-0: #FFFFFF;
55
+ --color-neutral-25: #FAFAFA;
99
56
  --color-neutral-50: #f1f2f3;
100
57
  --color-neutral-100: #e1e3e5;
101
58
  --color-neutral-200: #c5c9ce;
@@ -109,771 +66,161 @@
109
66
  --color-neutral-950: #0c0d0e;
110
67
  --color-neutral-1000: #000000;
111
68
 
112
- /* ================================
113
- CORE BORDER TOKENS
114
- ================================ */
115
-
116
- --border-width-0: 0;
117
- --border-width-1: 1px;
118
- --border-width-2: 2px;
119
- --border-width-3: 3px;
120
- --border-width-4: 4px;
121
- --border-width-8: 8px;
122
-
123
- --radius-none: 0;
124
- --radius-sm: 0.25rem; /* 4px */
125
- --radius-md: 0.375rem; /* 6px */
126
- --radius-lg: 0.5rem; /* 8px */
127
- --radius-xl: 0.75rem; /* 12px */
128
- --radius-2xl: 1rem; /* 16px */
129
- --radius-3xl: 1.5rem; /* 24px */
130
- --radius-full: 9999px;
131
- /* ================================
132
- CORE DIMENSION TOKENS
133
- ================================ */
134
-
135
- --dimension-2px: 2px;
136
- --dimension-4px: 4px;
137
- --dimension-8px: 8px;
138
- --dimension-12px: 12px;
139
- --dimension-16px: 16px;
140
- --dimension-20px: 20px;
141
- --dimension-24px: 24px;
142
- --dimension-32px: 32px;
143
- --dimension-34px: 34px;
144
- --dimension-40px: 40px;
145
- --dimension-45px: 45px;
146
- --dimension-48px: 48px;
147
- --dimension-55px: 55px;
148
- --dimension-64px: 64px;
149
-
150
- /* ================================
151
- CORE TRANSITION TOKENS
152
- ================================ */
153
-
154
- --transition-duration-fast: 150ms;
155
- --transition-duration-normal: 200ms;
156
- --transition-duration-slow: 300ms;
157
- --transition-duration-slower: 500ms;
158
-
159
- --transition-easing-linear: linear;
160
- --transition-easing-smooth: ease-in-out;
161
- --transition-easing-ease-in: ease-in;
162
- --transition-easing-ease-out: ease-out;
163
- --transition-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
164
-
165
- /* ================================
166
- CORE SHADOW TOKENS
167
- ================================ */
168
-
169
- --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
170
- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
171
- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
172
- 0 4px 6px -4px rgb(0 0 0 / 0.1);
173
- --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
174
- 0 8px 10px -6px rgb(0 0 0 / 0.1);
175
- --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
176
- --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
177
-
178
- /* Focus Shadows - Box Shadow Version */
179
- --shadow-focus-outline-blue: 0 0 0 3px rgba(6, 109, 255, 0.15);
180
- --shadow-focus-outline-red: 0 0 0 3px rgba(239, 68, 68, 0.15);
181
- --shadow-focus-outline-green: 0 0 0 3px rgba(34, 197, 94, 0.15);
182
-
183
- /* Focus Outlines - Two-Color System for Universal Visibility */
184
- --focus-outline-primary: 0 0 0 2px var(--color-neutral-0),
185
- 0 0 0 4px var(--color-blue-500);
186
- --focus-outline-secondary: 0 0 0 2px var(--color-neutral-0),
187
- 0 0 0 4px var(--color-neutral-600);
188
- --focus-outline-error: 0 0 0 2px var(--color-neutral-0),
189
- 0 0 0 4px var(--color-red-500);
190
- --focus-outline-success: 0 0 0 2px var(--color-neutral-0),
191
- 0 0 0 4px var(--color-green-500);
192
-
193
- /* Traditional Outline Values for Fallback */
194
- --focus-outline-traditional: 2px solid var(--color-blue-500);
195
- --focus-outline-offset: 2px;
196
-
197
- /* ================================
198
- COMPONENT TOKENS - TYPOGRAPHY
199
- ================================ */
200
-
201
- /* Heading Tokens */
202
- --typography-heading-h1-fontSize: var(--typography-fontSize-5xl);
203
- --typography-heading-h1-fontWeight: var(--typography-fontWeight-bold);
204
- --typography-heading-h1-lineHeight: var(--typography-lineHeight-snug);
205
- --typography-heading-h1-letterSpacing: var(--typography-letterSpacing-normal);
206
- --typography-heading-h1-fontFamily: var(--typography-fontFamily-sans);
207
-
208
- --typography-heading-h2-fontSize: var(--typography-fontSize-4xl);
209
- --typography-heading-h2-fontWeight: var(--typography-fontWeight-bold);
210
- --typography-heading-h2-lineHeight: var(--typography-lineHeight-snug);
211
- --typography-heading-h2-letterSpacing: var(--typography-letterSpacing-normal);
212
- --typography-heading-h2-fontFamily: var(--typography-fontFamily-sans);
213
-
214
- --typography-heading-h3-fontSize: var(--typography-fontSize-3xl);
215
- --typography-heading-h3-fontWeight: var(--typography-fontWeight-semibold);
216
- --typography-heading-h3-lineHeight: var(--typography-lineHeight-snug);
217
- --typography-heading-h3-letterSpacing: var(--typography-letterSpacing-normal);
218
- --typography-heading-h3-fontFamily: var(--typography-fontFamily-sans);
219
-
220
- --typography-heading-h4-fontSize: var(--typography-fontSize-2xl);
221
- --typography-heading-h4-fontWeight: var(--typography-fontWeight-semibold);
222
- --typography-heading-h4-lineHeight: var(--typography-lineHeight-snug);
223
- --typography-heading-h4-letterSpacing: var(--typography-letterSpacing-normal);
224
- --typography-heading-h4-fontFamily: var(--typography-fontFamily-sans);
225
-
226
- --typography-heading-h5-fontSize: var(--typography-fontSize-xl);
227
- --typography-heading-h5-fontWeight: var(--typography-fontWeight-medium);
228
- --typography-heading-h5-lineHeight: var(--typography-lineHeight-normal);
229
- --typography-heading-h5-letterSpacing: var(--typography-letterSpacing-normal);
230
- --typography-heading-h5-fontFamily: var(--typography-fontFamily-sans);
231
-
232
- --typography-heading-h6-fontSize: var(--typography-fontSize-lg);
233
- --typography-heading-h6-fontWeight: var(--typography-fontWeight-medium);
234
- --typography-heading-h6-lineHeight: var(--typography-lineHeight-normal);
235
- --typography-heading-h6-letterSpacing: var(--typography-letterSpacing-normal);
236
- --typography-heading-h6-fontFamily: var(--typography-fontFamily-sans);
237
-
238
- /* Body Text Tokens */
239
- --typography-body-large-fontSize: var(--typography-fontSize-lg);
240
- --typography-body-large-fontWeight: var(--typography-fontWeight-normal);
241
- --typography-body-large-lineHeight: var(--typography-lineHeight-relaxed);
242
- --typography-body-large-letterSpacing: var(--typography-letterSpacing-normal);
243
- --typography-body-large-fontFamily: var(--typography-fontFamily-sans);
244
-
245
- --typography-body-regular-fontSize: var(--typography-fontSize-base);
246
- --typography-body-regular-fontWeight: var(--typography-fontWeight-normal);
247
- --typography-body-regular-lineHeight: var(--typography-lineHeight-normal);
248
- --typography-body-regular-letterSpacing: var(
249
- --typography-letterSpacing-normal
250
- );
251
- --typography-body-regular-fontFamily: var(--typography-fontFamily-sans);
252
-
253
- --typography-body-small-fontSize: var(--typography-fontSize-sm);
254
- --typography-body-small-fontWeight: var(--typography-fontWeight-normal);
255
- --typography-body-small-lineHeight: var(--typography-lineHeight-normal);
256
- --typography-body-small-letterSpacing: var(--typography-letterSpacing-normal);
257
- --typography-body-small-fontFamily: var(--typography-fontFamily-sans);
258
-
259
- --typography-body-lead-fontSize: var(--typography-fontSize-xl);
260
- --typography-body-lead-fontWeight: var(--typography-fontWeight-normal);
261
- --typography-body-lead-lineHeight: var(--typography-lineHeight-relaxed);
262
- --typography-body-lead-letterSpacing: var(--typography-letterSpacing-normal);
263
- --typography-body-lead-fontFamily: var(--typography-fontFamily-sans);
264
-
265
- /* Label Tokens */
266
- --typography-label-default-fontSize: var(--typography-fontSize-sm);
267
- --typography-label-default-fontWeight: var(--typography-fontWeight-medium);
268
- --typography-label-default-lineHeight: var(--typography-lineHeight-normal);
269
- --typography-label-default-letterSpacing: var(
270
- --typography-letterSpacing-normal
271
- );
272
- --typography-label-default-fontFamily: var(--typography-fontFamily-sans);
273
-
274
- --typography-label-small-fontSize: var(--typography-fontSize-xs);
275
- --typography-label-small-fontWeight: var(--typography-fontWeight-medium);
276
- --typography-label-small-lineHeight: var(--typography-lineHeight-normal);
277
- --typography-label-small-letterSpacing: var(--typography-letterSpacing-wide);
278
- --typography-label-small-fontFamily: var(--typography-fontFamily-sans);
279
-
280
- --typography-label-extra-small-fontSize: var(--typography-fontSize-xxs);
281
-
282
- --typography-label-large-fontSize: var(--typography-fontSize-base);
283
- --typography-label-large-fontWeight: var(--typography-fontWeight-medium);
284
- --typography-label-large-lineHeight: var(--typography-lineHeight-normal);
285
- --typography-label-large-letterSpacing: var(
286
- --typography-letterSpacing-normal
287
- );
288
- --typography-label-large-fontFamily: var(--typography-fontFamily-sans);
289
-
290
- --typography-label-xl-fontSize: var(--typography-fontSize-lg);
291
- --typography-label-xl-fontWeight: var(--typography-fontWeight-medium);
292
- --typography-label-xl-lineHeight: var(--typography-lineHeight-normal);
293
- --typography-label-xl-letterSpacing: var(--typography-letterSpacing-normal);
294
- --typography-label-xl-fontFamily: var(--typography-fontFamily-sans);
295
-
296
- /* Caption Tokens */
297
- --typography-caption-default-fontSize: var(--typography-fontSize-xs);
298
- --typography-caption-default-fontWeight: var(--typography-fontWeight-normal);
299
- --typography-caption-default-lineHeight: var(--typography-lineHeight-normal);
300
- --typography-caption-default-letterSpacing: var(
301
- --typography-letterSpacing-normal
302
- );
303
- --typography-caption-default-fontFamily: var(--typography-fontFamily-sans);
304
-
305
- --typography-caption-small-fontSize: var(--typography-fontSize-xs);
306
- --typography-caption-small-fontWeight: var(--typography-fontWeight-normal);
307
- --typography-caption-small-lineHeight: var(--typography-lineHeight-normal);
308
- --typography-caption-small-letterSpacing: var(
309
- --typography-letterSpacing-wide
310
- );
311
- --typography-caption-small-fontFamily: var(--typography-fontFamily-sans);
312
-
313
- /* Link Tokens */
314
- --typography-link-default-fontSize: inherit;
315
- --typography-link-default-fontWeight: var(--typography-fontWeight-normal);
316
- --typography-link-default-lineHeight: inherit;
317
- --typography-link-default-letterSpacing: inherit;
318
- --typography-link-default-fontFamily: inherit;
319
- --typography-link-default-textDecoration-default: underline;
320
- --typography-link-default-textDecoration-hover: none;
321
-
322
- --typography-link-standalone-fontSize: var(--typography-fontSize-base);
323
- --typography-link-standalone-fontWeight: var(--typography-fontWeight-medium);
324
- --typography-link-standalone-lineHeight: var(--typography-lineHeight-normal);
325
- --typography-link-standalone-letterSpacing: var(
326
- --typography-letterSpacing-normal
327
- );
328
- --typography-link-standalone-fontFamily: var(--typography-fontFamily-sans);
329
- --typography-link-standalone-textDecoration-default: underline;
330
- --typography-link-standalone-textDecoration-hover: none;
331
-
332
- /* Code Tokens */
333
- --typography-code-inline-fontSize: 0.875em;
334
- --typography-code-inline-fontWeight: var(--typography-fontWeight-normal);
335
- --typography-code-inline-lineHeight: inherit;
336
- --typography-code-inline-letterSpacing: var(
337
- --typography-letterSpacing-normal
338
- );
339
- --typography-code-inline-fontFamily: var(--typography-fontFamily-mono);
340
-
341
- --typography-code-block-fontSize: var(--typography-fontSize-sm);
342
- --typography-code-block-fontWeight: var(--typography-fontWeight-normal);
343
- --typography-code-block-lineHeight: var(--typography-lineHeight-relaxed);
344
- --typography-code-block-letterSpacing: var(--typography-letterSpacing-normal);
345
- --typography-code-block-fontFamily: var(--typography-fontFamily-mono);
346
-
347
- /* Display Typography Tokens */
348
- --typography-display-3xl-fontSize: var(--typography-fontSize-9xl);
349
- --typography-display-3xl-fontWeight: var(--typography-fontWeight-bold);
350
- --typography-display-3xl-lineHeight: var(--typography-lineHeight-tight);
351
- --typography-display-3xl-letterSpacing: var(--typography-letterSpacing-tight);
352
- --typography-display-3xl-fontFamily: var(--typography-fontFamily-sans);
353
-
354
- --typography-display-2xl-fontSize: var(--typography-fontSize-8xl);
355
- --typography-display-2xl-fontWeight: var(--typography-fontWeight-bold);
356
- --typography-display-2xl-lineHeight: var(--typography-lineHeight-tight);
357
- --typography-display-2xl-letterSpacing: var(--typography-letterSpacing-tight);
358
- --typography-display-2xl-fontFamily: var(--typography-fontFamily-sans);
359
-
360
- --typography-display-xl-fontSize: var(--typography-fontSize-7xl);
361
- --typography-display-xl-fontWeight: var(--typography-fontWeight-bold);
362
- --typography-display-xl-lineHeight: var(--typography-lineHeight-tight);
363
- --typography-display-xl-letterSpacing: var(--typography-letterSpacing-tight);
364
- --typography-display-xl-fontFamily: var(--typography-fontFamily-sans);
365
-
366
- --typography-display-lg-fontSize: var(--typography-fontSize-6xl);
367
- --typography-display-lg-fontWeight: var(--typography-fontWeight-bold);
368
- --typography-display-lg-lineHeight: var(--typography-lineHeight-tight);
369
- --typography-display-lg-letterSpacing: var(--typography-letterSpacing-tight);
370
- --typography-display-lg-fontFamily: var(--typography-fontFamily-sans);
371
-
372
- --typography-display-md-fontSize: var(--typography-fontSize-5xl);
373
- --typography-display-md-fontWeight: var(--typography-fontWeight-bold);
374
- --typography-display-md-lineHeight: var(--typography-lineHeight-tight);
375
- --typography-display-md-letterSpacing: var(--typography-letterSpacing-tight);
376
- --typography-display-md-fontFamily: var(--typography-fontFamily-sans);
377
-
378
- --typography-display-sm-fontSize: var(--typography-fontSize-4xl);
379
- --typography-display-sm-fontWeight: var(--typography-fontWeight-bold);
380
- --typography-display-sm-lineHeight: var(--typography-lineHeight-tight);
381
- --typography-display-sm-letterSpacing: var(--typography-letterSpacing-tight);
382
- --typography-display-sm-fontFamily: var(--typography-fontFamily-sans);
383
-
384
- /* ================================
385
- COMPONENT TOKENS - FORM
386
- ================================ */
387
-
388
- /* Form Label Tokens */
389
- --form-label-default-fontSize: var(--typography-fontSize-sm);
390
- --form-label-default-fontWeight: var(--typography-fontWeight-medium);
391
- --form-label-default-lineHeight: var(--typography-lineHeight-normal);
392
- --form-label-default-letterSpacing: var(--typography-letterSpacing-normal);
393
- --form-label-default-fontFamily: var(--typography-fontFamily-sans);
394
- --form-label-default-color: var(--color-neutral-900);
395
- --form-label-default-marginBottom: var(--spacing-1);
396
-
397
- --form-label-large-fontSize: var(--typography-fontSize-lg);
398
- --form-label-large-fontWeight: var(--typography-fontWeight-medium);
399
- --form-label-large-lineHeight: var(--typography-lineHeight-normal);
400
- --form-label-large-letterSpacing: var(--typography-letterSpacing-normal);
401
- --form-label-large-fontFamily: var(--typography-fontFamily-sans);
402
- --form-label-large-color: var(--color-neutral-900);
403
- --form-label-large-marginBottom: var(--spacing-2);
404
-
405
- --form-label-small-fontSize: var(--typography-fontSize-xs);
406
- --form-label-small-fontWeight: var(--typography-fontWeight-medium);
407
- --form-label-small-lineHeight: var(--typography-lineHeight-normal);
408
- --form-label-small-letterSpacing: var(--typography-letterSpacing-wide);
409
- --form-label-small-fontFamily: var(--typography-fontFamily-sans);
410
- --form-label-small-color: var(--color-neutral-900);
411
- --form-label-small-marginBottom: var(--spacing-1);
412
-
413
- --form-label-required-color: var(--color-red-500);
414
- --form-label-required-marginLeft: var(--spacing-1);
415
-
416
- /* Form Input Tokens */
417
- --form-input-small-height: var(--dimension-34px);
418
- --form-input-small-fontSize: var(--typography-fontSize-sm);
419
- --form-input-small-padding: var(--spacing-2) var(--spacing-3);
420
- --form-input-small-borderRadius: var(--radius-sm);
421
-
422
- --form-input-medium-height: var(--dimension-45px);
423
- --form-input-medium-fontSize: var(--typography-fontSize-base);
424
- --form-input-medium-padding: var(--spacing-3) var(--spacing-4);
425
- --form-input-medium-borderRadius: var(--radius-md);
426
-
427
- --form-input-large-height: var(--dimension-55px);
428
- --form-input-large-fontSize: var(--typography-fontSize-lg);
429
- --form-input-large-padding: var(--spacing-4) var(--spacing-5);
430
- --form-input-large-borderRadius: var(--radius-lg);
431
-
432
- --form-input-default-backgroundColor: var(--color-neutral-0);
433
- --form-input-default-borderColor: var(--color-neutral-300);
434
- --form-input-default-borderWidth: var(--border-width-1);
435
- --form-input-default-color: var(--color-neutral-900);
436
- --form-input-default-fontFamily: var(--typography-fontFamily-sans);
437
- --form-input-default-lineHeight: var(--typography-lineHeight-normal);
438
-
439
- --form-input-focus-borderColor: var(--color-blue-500);
440
- --form-input-focus-boxShadow: var(--shadow-focus-outline-blue);
441
-
442
- --form-input-error-backgroundColor: var(--color-red-50);
443
- --form-input-error-borderColor: var(--color-red-500);
444
- --form-input-error-placeholderColor: var(--color-red-400);
445
-
446
- --form-input-success-backgroundColor: var(--color-green-50);
447
- --form-input-success-borderColor: var(--color-green-500);
448
- --form-input-success-placeholderColor: var(--color-green-400);
449
-
450
- --form-input-disabled-backgroundColor: var(--color-neutral-100);
451
- --form-input-disabled-borderColor: var(--color-neutral-300);
452
- --form-input-disabled-color: var(--color-neutral-500);
453
- --form-input-disabled-placeholderColor: var(--color-neutral-400);
454
-
455
- /* Form Help Text Tokens */
456
- --form-help-text-default-fontSize: var(--typography-fontSize-xs);
457
- --form-help-text-default-fontWeight: var(--typography-fontWeight-normal);
458
- --form-help-text-default-lineHeight: var(--typography-lineHeight-normal);
459
- --form-help-text-default-letterSpacing: var(
460
- --typography-letterSpacing-normal
461
- );
462
- --form-help-text-default-fontFamily: var(--typography-fontFamily-sans);
463
- --form-help-text-default-color: var(--color-neutral-600);
464
- --form-help-text-default-marginTop: var(--spacing-1);
465
-
466
- --form-help-text-error-color: var(--color-red-600);
467
- --form-help-text-success-color: var(--color-green-600);
468
-
469
- /* Form Layout Tokens */
470
- --form-fieldSpacing: var(--spacing-6);
471
- --form-sectionSpacing: var(--spacing-8);
472
- --form-labelSpacing: var(--spacing-1);
473
- --form-helpTextSpacing: var(--spacing-1);
474
-
475
- /* ================================
476
- COMPONENT TOKENS - BUTTON
477
- ================================ */
478
-
479
- /* Button Size Tokens */
480
- --button-small-height: var(--dimension-34px);
481
- --button-small-fontSize: var(--typography-fontSize-sm);
482
- --button-small-padding: var(--spacing-2) var(--spacing-3);
483
- --button-small-borderRadius: var(--radius-sm);
484
-
485
- --button-medium-height: var(--dimension-45px);
486
- --button-medium-fontSize: var(--typography-fontSize-base);
487
- --button-medium-padding: var(--spacing-3) var(--spacing-4);
488
- --button-medium-borderRadius: var(--radius-md);
489
-
490
- --button-large-height: var(--dimension-55px);
491
- --button-large-fontSize: var(--typography-fontSize-lg);
492
- --button-large-padding: var(--spacing-4) var(--spacing-5);
493
- --button-large-borderRadius: var(--radius-lg);
494
-
495
- /* Button Default State */
496
- --button-default-backgroundColor: var(--color-neutral-0);
497
- --button-default-borderColor: var(--color-neutral-300);
498
- --button-default-borderWidth: var(--border-width-1);
499
- --button-default-color: var(--color-neutral-900);
500
- --button-default-fontFamily: var(--typography-fontFamily-sans);
501
- --button-default-fontWeight: var(--typography-fontWeight-medium);
502
- --button-default-lineHeight: var(--typography-lineHeight-normal);
503
-
504
- /* Button Shared Tokens */
505
- --button-shared-fontFamily: var(--typography-fontFamily-sans);
506
- --button-shared-fontWeight: var(--typography-fontWeight-medium);
507
- --button-shared-lineHeight: var(--typography-lineHeight-tight);
508
- --button-shared-letterSpacing: var(--typography-letterSpacing-normal);
509
- --button-shared-borderWidth: var(--border-width-1);
510
- --button-shared-transition-properties: background-color, border-color, color,
511
- 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
-
699
- /* ================================
700
- CORE SPACING TOKENS
701
- ================================ */
702
-
703
- --spacing-0: 0;
704
- --spacing-1: 0.0625rem; /* 1px */
705
- --spacing-2: 0.125rem; /* 2px */
706
- --spacing-4: 0.25rem; /* 4px */
707
- --spacing-6: 0.375rem; /* 6px */
708
- --spacing-8: 0.5rem; /* 8px */
709
- --spacing-10: 0.625rem; /* 10px */
710
- --spacing-12: 0.75rem; /* 12px */
711
- --spacing-14: 0.875rem; /* 14px */
712
- --spacing-16: 1rem; /* 16px */
713
- --spacing-18: 1.125rem; /* 18px */
714
- --spacing-20: 1.25rem; /* 20px */
715
- --spacing-22: 1.375rem; /* 22px */
716
- --spacing-24: 1.5rem; /* 24px */
717
- --spacing-28: 1.75rem; /* 28px */
718
- --spacing-32: 2rem; /* 32px */
719
- --spacing-36: 2.25rem; /* 36px */
720
- --spacing-40: 2.5rem; /* 40px */
721
- --spacing-44: 2.75rem; /* 44px */
722
- --spacing-48: 3rem; /* 48px */
723
- --spacing-52: 3.25rem; /* 52px */
724
- --spacing-56: 3.5rem; /* 56px */
725
- --spacing-64: 4rem; /* 64px */
726
- --spacing-80: 5rem; /* 80px */
727
- --spacing-96: 6rem; /* 96px */
728
- --spacing-112: 7rem; /* 112px */
729
- --spacing-128: 8rem; /* 128px */
730
-
69
+
731
70
  /* =====================
732
- OLD VALUES -------------------------------------------------------------------------------
71
+ DISPLAY FONT SIZES
733
72
  ====================== */
734
73
 
735
- /* Display default */
736
- --display-xxsmall: 44px; /* 58.652px = 3.666rem */
737
- --display-xsmall: 48px; /* 63.984px = 3.999rem */
738
- --display-small: 52px; /* 69.316px = 4.332rem */
739
- --display-medium: 56px; /* 74.648px = 4.666rem */
740
- --display-large: 60px; /* 79.98px = 5rem */
741
- --display-xlarge: 64px; /* 85.312px = 5.333rem */
742
-
743
- /* Display mobile */
744
- --display-xxsmall-mobile: 34px; /* 45.322px = 2.833rem */
745
- --display-xsmall-mobile: 36px; /* 47.988px = 2.999rem */
746
- --display-small-mobile: 38px; /* 50.654px = 3.167rem */
747
- --display-medium-mobile: 40px; /* 53.32px = 3.333rem */
748
- --display-large-mobile: 44px; /* 58.652px = 3.666rem */
749
- --display-xlarge-mobile: 48px; /* 63.984px = 3.999rem */
750
-
751
- /* Heading default */
752
- --heading-xxsmall: 18px; /* 23.994px = 1.5rem */
753
- --heading-xsmall: 20px; /* 26.66px = 1.667rem */
754
- --typography-heading-h4-fontSize: 24px; /* 31.992px = 2rem */
755
- --heading-medium: 28px; /* 37.324px = 2.333rem */
756
- --typography-fontSize-3xl: 32px; /* 42.656px = 2.667rem */
757
- --heading-xlarge: 36px; /* 47.988px = 2.999rem */
758
- --heading-xxlarge: 40px; /* 53.32px = 3.333rem */
759
-
760
- /* Body default */
761
- --body-small: 13px; /* 17.329px = 1.083rem */
762
- --typography-body-small-fontSize: 14px; /* 18.662px = 1.167rem */
763
- --typography-body-regular-fontSize: 16px; /* 21.328px = 1.333rem */
764
- --body-xlarge: 18px; /* 23.994px = 1.5rem */
765
-
766
- /* Caption default */
767
- --typography-label-extra-small-fontSize: 11px; /* 14.663px = 0.917rem */
768
- --typography-label-small-fontSize: 12px; /* 15.996px = 1rem */
769
-
770
- /* Display Default */
771
- --display-xlarge-line-height: 1.1; /* For 60px */
772
- --display-medium-line-height: 1.15; /* For 52px */
773
-
774
- /* Display Mobile */
775
- --display-xlarge-mobile-line-height: 1.15; /* For 44px */
776
- --display-medium-mobile-line-height: 1.2; /* For 38px */
777
-
778
- /* Heading */
779
- --heading-xlarge-line-height: 1.2; /* For 36px */
780
- --typography-heading-h4-fontSize-line-height: 1.3; /* For 24px */
781
-
782
- /* Body */
783
- --typography-body-regular-fontSize-line-height: 1.5; /* For 16px */
784
-
785
- /* Caption */
786
- --typography-label-small-fontSize-line-height: 1.35; /* For 12px */
787
-
788
- /* --spacing-0: 0;
789
- --spacing-1: 1px;
790
- --spacing-2: 2px;
791
- --spacing-4: 4px;
792
- --spacing-6: 6px;
793
- --spacing-8: 8px;
794
- --spacing-10: 10px;
795
- --spacing-12: 12px;
796
- --spacing-14: 14px;
797
- --spacing-16: 16px;
798
- --spacing-18: 18px;
799
- --spacing-20: 20px;
800
- --spacing-22: 22px;
801
- --spacing-24: 24px;
802
- --spacing-32: 32px;
803
- --spacing-36: 36px;
804
- --spacing-40: 40px;
805
- --spacing-44: 44px;
806
- --spacing-52: 52px;
807
- --spacing-64: 64px;
808
- --spacing-full: 99999999999999999999;
809
- */
74
+ /* Display default */
75
+ --display-xxsmall: 44px; /* 58.652px = 3.666rem */
76
+ --display-xsmall: 48px; /* 63.984px = 3.999rem */
77
+ --display-small: 52px; /* 69.316px = 4.332rem */
78
+ --display-medium: 56px; /* 74.648px = 4.666rem */
79
+ --display-large: 60px; /* 79.98px = 5rem */
80
+ --display-xlarge: 64px; /* 85.312px = 5.333rem */
81
+
82
+ /* Display mobile */
83
+ --display-xxsmall-mobile: 34px; /* 45.322px = 2.833rem */
84
+ --display-xsmall-mobile: 36px; /* 47.988px = 2.999rem */
85
+ --display-small-mobile: 38px; /* 50.654px = 3.167rem */
86
+ --display-medium-mobile: 40px; /* 53.32px = 3.333rem */
87
+ --display-large-mobile: 44px; /* 58.652px = 3.666rem */
88
+ --display-xlarge-mobile: 48px; /* 63.984px = 3.999rem */
89
+
90
+ /* Heading default */
91
+ --heading-xxsmall: 18px; /* 23.994px = 1.5rem */
92
+ --heading-xsmall: 20px; /* 26.66px = 1.667rem */
93
+ --heading-small: 24px; /* 31.992px = 2rem */
94
+ --heading-medium: 28px; /* 37.324px = 2.333rem */
95
+ --heading-large: 32px; /* 42.656px = 2.667rem */
96
+ --heading-xlarge: 36px; /* 47.988px = 2.999rem */
97
+ --heading-xxlarge: 40px; /* 53.32px = 3.333rem */
98
+
99
+ /* Body default */
100
+ --body-small: 13px; /* 17.329px = 1.083rem */
101
+ --body-medium: 14px; /* 18.662px = 1.167rem */
102
+ --body-large: 16px; /* 21.328px = 1.333rem */
103
+ --body-xlarge: 18px; /* 23.994px = 1.5rem */
104
+
105
+ /* Caption default */
106
+ --caption-small: 11px; /* 14.663px = 0.917rem */
107
+ --caption-large: 12px; /* 15.996px = 1rem */
108
+
109
+
110
+
111
+
112
+ /* Display Default */
113
+ --display-xlarge-line-height: 1.1; /* For 60px */
114
+ --display-medium-line-height: 1.15; /* For 52px */
115
+
116
+ /* Display Mobile */
117
+ --display-xlarge-mobile-line-height: 1.15; /* For 44px */
118
+ --display-medium-mobile-line-height: 1.2; /* For 38px */
119
+
120
+ /* Heading */
121
+ --heading-xlarge-line-height: 1.2; /* For 36px */
122
+ --heading-small-line-height: 1.3; /* For 24px */
123
+
124
+ /* Body */
125
+ --body-large-line-height: 1.5; /* For 16px */
126
+
127
+ /* Caption */
128
+ --caption-large-line-height: 1.35; /* For 12px */
129
+ /* =====================
130
+ PADDING SIZES
131
+ ====================== */
810
132
 
133
+ /* PADDING VALUES */
134
+ --size-0: 0;
135
+ --size-1: 1px;
136
+ --size-2: 2px;
137
+ --size-4: 4px;
138
+ --size-6: 6px;
139
+ --size-8: 8px;
140
+ --size-10: 10px;
141
+ --size-12: 12px;
142
+ --size-14: 14px;
143
+ --size-16: 16px;
144
+ --size-18: 18px;
145
+ --size-20: 20px;
146
+ --size-22: 22px;
147
+ --size-24: 24px;
148
+ --size-32: 32px;
149
+ --size-36: 36px;
150
+ --size-40: 40px;
151
+ --size-44: 44px;
152
+ --size-52: 52px;
153
+ --size-64: 64px;
154
+ --size-full: 99999999999999999999;
155
+
156
+
811
157
  /* Spacing Tokens
812
158
  -----------------------------------------------*/
813
159
  /* Base spacing tokens - Based on 4px grid */
814
160
  --space-none: 0;
815
- --space-4xs: 0.125rem; /* 2px */
816
- --space-3xs: 0.25rem; /* 4px */
817
- --space-2xs: 0.5rem; /* 8px */
818
- --space-xs: 0.75rem; /* 12px */
819
- --space-sm: 1rem; /* 16px */
820
- --space-md: 1.5rem; /* 24px */
821
- --space-lg: 2rem; /* 32px */
822
- --space-xl: 2.5rem; /* 40px */
823
- --space-2xl: 3rem; /* 48px */
824
- --space-3xl: 4rem; /* 64px */
825
- --space-4xl: 6rem; /* 96px */
826
- --space-5xl: 8rem; /* 128px */
827
-
161
+ --space-4xs: 0.125rem; /* 2px */
162
+ --space-3xs: 0.25rem; /* 4px */
163
+ --space-2xs: 0.5rem; /* 8px */
164
+ --space-xs: 0.75rem; /* 12px */
165
+ --space-sm: 1rem; /* 16px */
166
+ --space-md: 1.5rem; /* 24px */
167
+ --space-lg: 2rem; /* 32px */
168
+ --space-xl: 2.5rem; /* 40px */
169
+ --space-2xl: 3rem; /* 48px */
170
+ --space-3xl: 4rem; /* 64px */
171
+ --space-4xl: 6rem; /* 96px */
172
+ --space-5xl: 8rem; /* 128px */
173
+
828
174
  /* Semantic Padding Tokens */
829
175
  --padding-button: var(--space-xs) var(--space-md);
830
176
  --padding-input: var(--space-xs);
831
177
  --padding-card: var(--space-md);
832
178
  --padding-card-sm: var(--space-sm);
833
179
  --padding-card-lg: var(--space-lg);
834
-
180
+
835
181
  --padding-section: var(--space-3xl) 0;
836
182
  --padding-section-sm: var(--space-2xl) 0;
837
183
  --padding-section-lg: var(--space-4xl) 0;
838
-
184
+
839
185
  /* Container and Layout Tokens */
840
186
  --container-padding: var(--space-md);
841
187
  --container-padding-sm: var(--space-sm);
842
188
  --container-padding-lg: var(--space-lg);
843
-
189
+
844
190
  /* Inset (Padding All Sides) Tokens */
845
191
  --inset-xs: var(--space-xs);
846
192
  --inset-sm: var(--space-sm);
847
193
  --inset-md: var(--space-md);
848
194
  --inset-lg: var(--space-lg);
849
-
195
+
850
196
  /* Stack (Vertical Spacing) Tokens */
851
197
  --stack-xs: var(--space-xs);
852
198
  --stack-sm: var(--space-sm);
853
199
  --stack-md: var(--space-md);
854
200
  --stack-lg: var(--space-lg);
855
201
  --stack-xl: var(--space-xl);
856
-
202
+
857
203
  /* Inline (Horizontal Spacing) Tokens */
858
204
  --inline-xs: var(--space-xs);
859
205
  --inline-sm: var(--space-sm);
860
206
  --inline-md: var(--space-md);
861
207
  --inline-lg: var(--space-lg);
862
-
208
+
863
209
  /* Accessibility Spacing Tokens
864
210
  -----------------------------------------------*/
865
211
  /* Touch Target Sizes - WCAG 2.1 Success Criterion 2.5.5 (AAA) and 2.5.8 (AA) */
866
212
  --touch-target-size: 44px; /* Minimum touch target size (44px × 44px) */
867
213
  --touch-target-spacing: 8px; /* Minimum space between touch targets */
868
-
214
+
869
215
  /* Readable Line Lengths - For optimal readability */
870
216
  --content-width-readable: 70ch; /* Approximately 70 characters per line */
871
217
  --content-width-max: 1200px; /* Maximum overall content width */
872
218
 
219
+
873
220
  /** GRID TOKENS
874
221
  */
875
- /* Grid container max widths */
876
- --grid-container-max-xs: 100%; /* mobile full width */
222
+ /* Grid container max widths */
223
+ --grid-container-max-xs: 100%; /* mobile full width */
877
224
  --grid-container-max-sm: 540px;
878
225
  --grid-container-max-md: 720px;
879
226
  --grid-container-max-lg: 960px;
@@ -902,145 +249,145 @@
902
249
  --breakpoint-lg: 992px;
903
250
  --breakpoint-xl: 1200px;
904
251
  --breakpoint-xxl: 1400px;
905
- /* =====================
252
+ /* =====================
906
253
  FONT-FACE DEFINITIONS
907
254
  ====================== */
908
255
 
909
256
  @font-face {
910
- font-family: "IBM Plex Mono";
257
+ font-family: 'IBM Plex Mono';
911
258
  font-style: normal;
912
- font-weight: 700;
913
- src: url("/assets/fonts/IBMPlexMono-Bold.woff2") format("woff2");
259
+ font-weight: 700;
260
+ src: url('/assets/fonts/IBMPlexMono-Bold.woff2') format('woff2');
914
261
  }
915
262
  @font-face {
916
- font-family: "IBM Plex Mono";
263
+ font-family: 'IBM Plex Mono';
917
264
  font-style: normal;
918
- font-weight: 700;
919
- src: url("/assets/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
265
+ font-weight: 700;
266
+ src: url('/assets/fonts/IBMPlexMono-BoldItalic.woff2') format('woff2');
920
267
  }
921
-
268
+
922
269
  @font-face {
923
- font-family: "IBM Plex Mono";
270
+ font-family: 'IBM Plex Mono';
924
271
  font-style: italic;
925
- font-weight: 300;
926
- src: url("/assets/fonts/IBMPlexMono-Italic.woff2") format("woff2");
272
+ font-weight: 300;
273
+ src: url('/assets/fonts/IBMPlexMono-Italic.woff2') format('woff2');
927
274
  }
928
275
  @font-face {
929
- font-family: "IBM Plex Mono";
276
+ font-family: 'IBM Plex Mono';
930
277
  font-style: normal;
931
- font-weight: 300;
932
- src: url("/assets/fonts/IBMPlexMono-Light.woff2") format("woff2");
278
+ font-weight: 300;
279
+ src: url('/assets/fonts/IBMPlexMono-Light.woff2') format('woff2');
933
280
  }
934
281
  @font-face {
935
- font-family: "IBM Plex Mono";
282
+ font-family: 'IBM Plex Mono';
936
283
  font-style: italic;
937
- font-weight: 300;
938
- src: url("/assets/fonts/IBMPlexMono-LightItalic.woff2") format("woff2");
284
+ font-weight: 300;
285
+ src: url('/assets/fonts/IBMPlexMono-LightItalic.woff2') format('woff2');
939
286
  }
940
-
287
+
941
288
  @font-face {
942
- font-family: "IBM Plex Mono";
289
+ font-family: 'IBM Plex Mono';
943
290
  font-style: italic;
944
- font-weight: 500;
945
- src: url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
946
- }
291
+ font-weight: 500;
292
+ src: url('/assets/fonts/IBMPlexMono-Medium.woff2') format('woff2');
293
+ }
947
294
  @font-face {
948
- font-family: "IBM Plex Mono";
295
+ font-family: 'IBM Plex Mono';
949
296
  font-style: italic;
950
- font-weight: 500;
951
- src: url("/assets/fonts/IBMPlexMono-MediumItalic.woff2") format("woff2");
297
+ font-weight: 500;
298
+ src: url('/assets/fonts/IBMPlexMono-MediumItalic.woff2') format('woff2');
952
299
  }
953
300
  @font-face {
954
- font-family: "IBM Plex Mono";
301
+ font-family: 'IBM Plex Mono';
955
302
  font-style: italic;
956
- font-weight: 400;
957
- src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
303
+ font-weight: 400;
304
+ src: url('/assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');
958
305
  }
959
306
  @font-face {
960
- font-family: "IBM Plex Mono";
307
+ font-family: 'IBM Plex Mono';
961
308
  font-style: italic;
962
- font-weight: 600;
963
- src: url("/assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
309
+ font-weight: 600;
310
+ src: url('/assets/fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
964
311
  }
965
312
  @font-face {
966
- font-family: "IBM Plex Mono";
313
+ font-family: 'IBM Plex Mono';
967
314
  font-style: italic;
968
- font-weight: 600;
969
- src: url("/assets/fonts/IBMPlexMono-SemiBoldItalic.woff2") format("woff2");
315
+ font-weight: 600;
316
+ src: url('/assets/fonts/IBMPlexMono-SemiBoldItalic.woff2') format('woff2');
970
317
  }
971
-
972
- /*
318
+
319
+ /*
973
320
  IBM PLEX SANS
974
321
  */
975
322
 
976
323
  @font-face {
977
- font-family: "IBMPlexSans";
324
+ font-family: 'IBMPlexSans';
978
325
  font-style: normal;
979
- font-weight: 700;
980
- src: url("/assets/fonts/IBMPlexSans-Bold.woff2") format("woff2");
326
+ font-weight: 700;
327
+ src: url('/assets/fonts/IBMPlexSans-Bold.woff2') format('woff2');
981
328
  }
982
329
  @font-face {
983
- font-family: "IBMPlexSans";
330
+ font-family: 'IBMPlexSans';
984
331
  font-style: normal;
985
- font-weight: 700;
986
- src: url("/assets/fonts/IBMPlexSans-BoldItalic.woff2") format("woff2");
332
+ font-weight: 700;
333
+ src: url('/assets/fonts/IBMPlexSans-BoldItalic.woff2') format('woff2');
987
334
  }
988
-
335
+
989
336
  @font-face {
990
- font-family: "IBMPlexSans";
337
+ font-family: 'IBMPlexSans';
991
338
  font-style: italic;
992
- font-weight: 300;
993
- src: url("/assets/fonts/IBMPlexSans-Italic.woff2") format("woff2");
339
+ font-weight: 300;
340
+ src: url('/assets/fonts/IBMPlexSans-Italic.woff2') format('woff2');
994
341
  }
995
342
  @font-face {
996
- font-family: "IBMPlexSans";
343
+ font-family: 'IBMPlexSans';
997
344
  font-style: normal;
998
- font-weight: 300;
999
- src: url("/assets/fonts/IBMPlexSans-Light.woff2") format("woff2");
345
+ font-weight: 300;
346
+ src: url('/assets/fonts/IBMPlexSans-Light.woff2') format('woff2');
1000
347
  }
1001
348
  @font-face {
1002
- font-family: "IBMPlexSans";
349
+ font-family: 'IBMPlexSans';
1003
350
  font-style: italic;
1004
- font-weight: 300;
1005
- src: url("/assets/fonts/IBMPlexSans-LightItalic.woff2") format("woff2");
351
+ font-weight: 300;
352
+ src: url('/assets/fonts/IBMPlexSans-LightItalic.woff2') format('woff2');
1006
353
  }
1007
-
354
+
1008
355
  @font-face {
1009
- font-family: "IBMPlexSans";
356
+ font-family: 'IBMPlexSans';
1010
357
  font-style: italic;
1011
- font-weight: 500;
1012
- src: url("/assets/fonts/IBMPlexSans-Medium.woff2") format("woff2");
1013
- }
358
+ font-weight: 500;
359
+ src: url('/assets/fonts/IBMPlexSans-Medium.woff2') format('woff2');
360
+ }
1014
361
  @font-face {
1015
- font-family: "IBMPlexSans";
362
+ font-family: 'IBMPlexSans';
1016
363
  font-style: italic;
1017
- font-weight: 500;
1018
- src: url("/assets/fonts/IBMPlexSans-MediumItalic.woff2") format("woff2");
364
+ font-weight: 500;
365
+ src: url('/assets/fonts/IBMPlexSans-MediumItalic.woff2') format('woff2');
1019
366
  }
1020
367
  @font-face {
1021
- font-family: "IBMPlexSans";
368
+ font-family: 'IBMPlexSans';
1022
369
  font-style: italic;
1023
- font-weight: 400;
1024
- src: url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
370
+ font-weight: 400;
371
+ src: url('/assets/fonts/IBMPlexSans-Regular.woff2') format('woff2');
1025
372
  }
1026
373
  @font-face {
1027
- font-family: "IBMPlexSans";
374
+ font-family: 'IBMPlexSans';
1028
375
  font-style: italic;
1029
- font-weight: 600;
1030
- src: url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
376
+ font-weight: 600;
377
+ src: url('/assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
1031
378
  }
1032
379
  @font-face {
1033
- font-family: "IBMPlexSans";
380
+ font-family: 'IBMPlexSans';
1034
381
  font-style: italic;
1035
- font-weight: 600;
1036
- src: url("/assets/fonts/IBMPlexSans-SemiBoldItalic.woff2") format("woff2");
382
+ font-weight: 600;
383
+ src: url('/assets/fonts/IBMPlexSans-SemiBoldItalic.woff2') format('woff2');
1037
384
  }
1038
385
 
1039
386
  /* =====================
1040
387
  FONT TOKENS
1041
388
  ====================== */
1042
389
  /* IBM Plex Mono */
1043
- --font-family-mono: "IBM Plex Mono", monospace;
390
+ --font-family-mono: 'IBM Plex Mono', monospace;
1044
391
  --font-weight-mono-light: 300;
1045
392
  --font-weight-mono-regular: 400;
1046
393
  --font-weight-mono-medium: 500;
@@ -1051,13 +398,15 @@ IBM PLEX SANS
1051
398
  --font-style-mono-italic: italic;
1052
399
 
1053
400
  /* IBMPlexSans */
1054
- --typography-fontFamily-sans: "IBM Plex Sans", sans-serif;
401
+ --font-family-sans: 'IBM Plex Sans', sans-serif;
1055
402
  --font-weight-sans-light: 300;
1056
- --typography-body-large-fontWeight: 400;
403
+ --font-weight-sans-regular: 400;
1057
404
  --font-weight-sans-medium: 500;
1058
- --typography-fontWeight-semibold: 600;
1059
- --typography-fontWeight-bold: 700;
405
+ --font-weight-sans-semibold: 600;
406
+ --font-weight-sans-bold: 700;
1060
407
 
1061
408
  --font-style-sans-normal: normal;
1062
409
  --font-style-sans-italic: italic;
410
+
411
+
1063
412
  }