@repobit/dex-system-design 0.18.0 → 0.19.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 (20) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/package.json +15 -4
  3. package/src/components/anchor/anchor.stories.js +9 -9
  4. package/src/components/badge/badge.css.js +52 -5
  5. package/src/components/badge/badge.js +58 -5
  6. package/src/components/badge/badge.stories.js +183 -15
  7. package/src/components/carousel/carousel.css.js +13 -13
  8. package/src/components/footer/footer-links-group.css.js +1 -5
  9. package/src/components/footer/footer-lp.css.js +49 -533
  10. package/src/components/footer/footer-lp.js +86 -203
  11. package/src/components/footer/footer-nav-menu.css.js +33 -19
  12. package/src/components/footer/footer-nav-menu.js +3 -3
  13. package/src/components/footer/footer.css.js +263 -193
  14. package/src/components/footer/footer.js +163 -166
  15. package/src/tokens/tokens.js +877 -116
  16. package/src/components/Button/icons.css +0 -5
  17. package/src/components/Button/index.js +0 -0
  18. package/src/components/FAQ/faq.css.js +0 -117
  19. package/src/components/FAQ/faq.js +0 -0
  20. package/src/components/FAQ/faq.stories.js +0 -66
package/src/tokens/tokens.js CHANGED
@@ -2,59 +2,99 @@ import { css } from 'lit';
2
2
 
3
3
  export const tokens = css`
4
4
  :host {
5
+ --typography-fontFamily-sans: "IBM Plex Sans", system-ui, -apple-system,
6
+ BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
7
+ --typography-fontFamily-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular,
8
+ Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
9
+
10
+ --typography-fontSize-xxs: 0.6875rem; /* 11px */
11
+ --typography-fontSize-xs: 0.75rem; /* 12px */
12
+ --typography-fontSize-sm: 0.875rem; /* 14px */
13
+ --typography-fontSize-base: 1rem; /* 16px */
14
+ --typography-fontSize-lg: 1.125rem; /* 18px */
15
+ --typography-fontSize-xl: 1.25rem; /* 20px */
16
+ --typography-fontSize-2xl: 1.5rem; /* 24px */
17
+ --typography-fontSize-3xl: 2rem; /* 32px */
18
+ --typography-fontSize-4xl: 2.25rem; /* 36px */
19
+ --typography-fontSize-5xl: 3rem; /* 48px */
20
+ --typography-fontSize-6xl: 3.75rem; /* 60px */
21
+ --typography-fontSize-7xl: 4.5rem; /* 72px */
22
+ --typography-fontSize-8xl: 6rem; /* 96px */
23
+ --typography-fontSize-9xl: 8rem; /* 128px */
24
+
25
+ --typography-fontWeight-light: 300;
26
+ --typography-fontWeight-normal: 400;
27
+ --typography-fontWeight-medium: 500;
28
+ --typography-fontWeight-semibold: 600;
29
+ --typography-fontWeight-bold: 700;
30
+
31
+ --typography-lineHeight-none: 1;
32
+ --typography-lineHeight-tight: 1.25;
33
+ --typography-lineHeight-snug: 1.375;
34
+ --typography-lineHeight-normal: 1.5;
35
+ --typography-lineHeight-relaxed: 1.625;
36
+ --typography-lineHeight-loose: 2;
37
+
38
+ --typography-letterSpacing-tighter: -0.05em;
39
+ --typography-letterSpacing-tight: -0.025em;
40
+ --typography-letterSpacing-normal: 0em;
41
+ --typography-letterSpacing-wide: 0.025em;
42
+ --typography-letterSpacing-wider: 0.05em;
43
+ --typography-letterSpacing-widest: 0.1em;
44
+
5
45
  /* =====================
6
46
  COLORS
7
47
  ====================== */
8
- --color-blue-50: #F0F7FF;
9
- --color-blue-100: #D6E8FF;
10
- --color-blue-200: #9EC8FF;
11
- --color-blue-300: #6BABFF;
12
- --color-blue-400: #338BFF;
48
+ --color-blue-50: #f0f7ff;
49
+ --color-blue-100: #d6e8ff;
50
+ --color-blue-200: #9ec8ff;
51
+ --color-blue-300: #6babff;
52
+ --color-blue-400: #338bff;
13
53
  --color-blue-500: #006dff;
14
- --color-blue-600: #0059D6;
15
- --color-blue-700: #0045AD;
54
+ --color-blue-600: #0059d6;
55
+ --color-blue-700: #0045ad;
16
56
  --color-blue-800: #003385;
17
- --color-blue-900: #00225C;
57
+ --color-blue-900: #00225c;
18
58
  --color-blue-950: #001947;
19
59
 
20
- --color-red-50: #FFF0F0;
21
- --color-red-100: #FFD6D6;
22
- --color-red-200: #FF9E9E;
23
- --color-red-300: #FF6B6B;
24
- --color-red-400: #FF3333;
25
- --color-red-500: #FF0000;
26
- --color-red-600: #D60000;
27
- --color-red-700: #AD0000;
60
+ --color-red-50: #fff0f0;
61
+ --color-red-100: #ffd6d6;
62
+ --color-red-200: #ff9e9e;
63
+ --color-red-300: #ff6b6b;
64
+ --color-red-400: #ff3333;
65
+ --color-red-500: #ff0000;
66
+ --color-red-600: #d60000;
67
+ --color-red-700: #ad0000;
28
68
  --color-red-800: #850000;
29
- --color-red-900: #5C0000;
69
+ --color-red-900: #5c0000;
30
70
  --color-red-950: #470000;
31
71
 
32
- --color-green-50: #EDFDF1;
33
- --color-green-100: #D1FADC;
34
- --color-green-200: #9AF4B4;
35
- --color-green-300: #63EE8D;
36
- --color-green-400: #2CE767;
37
- --color-green-500: #15C14F;
38
- --color-green-600: #12A641;
39
- --color-green-700: #0E8532;
40
- --color-green-800: #0B6A26;
41
- --color-green-900: #084A1A;
42
- --color-green-950: #063C14;
43
-
44
- --color-yellow-50: #FFFBF0;
45
- --color-yellow-100: #FFF5D6;
46
- --color-yellow-200: #FFE89E;
47
- --color-yellow-300: #FFDC6B;
48
- --color-yellow-400: #FFCF33;
49
- --color-yellow-500: #FFC400;
50
- --color-yellow-600: #D6A000;
51
- --color-yellow-700: #AD7F00;
52
- --color-yellow-800: #855F00;
53
- --color-yellow-900: #5C4000;
72
+ --color-green-50: #edfdf1;
73
+ --color-green-100: #d1fadc;
74
+ --color-green-200: #9af4b4;
75
+ --color-green-300: #63ee8d;
76
+ --color-green-400: #2ce767;
77
+ --color-green-500: #15c14f;
78
+ --color-green-600: #12a641;
79
+ --color-green-700: #0e8532;
80
+ --color-green-800: #0b6a26;
81
+ --color-green-900: #084a1a;
82
+ --color-green-950: #063c14;
83
+
84
+ --color-yellow-50: #fffbf0;
85
+ --color-yellow-100: #fff5d6;
86
+ --color-yellow-200: #ffe89e;
87
+ --color-yellow-300: #ffdc6b;
88
+ --color-yellow-400: #ffcf33;
89
+ --color-yellow-500: #ffc400;
90
+ --color-yellow-600: #d6a000;
91
+ --color-yellow-700: #ad7f00;
92
+ --color-yellow-800: #855f00;
93
+ --color-yellow-900: #5c4000;
54
94
  --color-yellow-950: #473100;
55
95
 
56
- --color-neutral-0: #FFFFFF;
57
- --color-neutral-25: #FAFAFA;
96
+ --color-neutral-0: #ffffff;
97
+ --color-neutral-25: #fafafa;
58
98
  --color-neutral-50: #f1f2f3;
59
99
  --color-neutral-100: #e1e3e5;
60
100
  --color-neutral-200: #c5c9ce;
@@ -68,9 +108,628 @@ export const tokens = css`
68
108
  --color-neutral-950: #0c0d0e;
69
109
  --color-neutral-1000: #000000;
70
110
 
71
-
111
+ /* ================================
112
+ CORE BORDER TOKENS
113
+ ================================ */
114
+ --border-width-0: 0;
115
+ --border-width-1: 1px;
116
+ --border-width-2: 2px;
117
+ --border-width-3: 3px;
118
+ --border-width-4: 4px;
119
+ --border-width-8: 8px;
120
+
121
+ --radius-none: 0;
122
+ --radius-sm: 0.25rem; /* 4px */
123
+ --radius-md: 0.375rem; /* 6px */
124
+ --radius-lg: 0.5rem; /* 8px */
125
+ --radius-xl: 0.75rem; /* 12px */
126
+ --radius-2xl: 1rem; /* 16px */
127
+ --radius-3xl: 1.5rem; /* 24px */
128
+ --radius-full: 9999px;
129
+
130
+ /* ================================
131
+ CORE DIMENSION TOKENS
132
+ ================================ */
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
+
72
731
  /* =====================
73
- DISPLAY FONT SIZES
732
+ OLD VALUES -------------------------------------------------------------------------------
74
733
  ====================== */
75
734
 
76
735
  /* Display default */
@@ -92,137 +751,106 @@ export const tokens = css`
92
751
  /* Heading default */
93
752
  --heading-xxsmall: 18px; /* 23.994px = 1.5rem */
94
753
  --heading-xsmall: 20px; /* 26.66px = 1.667rem */
95
- --heading-small: 24px; /* 31.992px = 2rem */
754
+ --typography-heading-h4-fontSize: 24px; /* 31.992px = 2rem */
96
755
  --heading-medium: 28px; /* 37.324px = 2.333rem */
97
- --heading-large: 32px; /* 42.656px = 2.667rem */
756
+ --typography-fontSize-3xl: 32px; /* 42.656px = 2.667rem */
98
757
  --heading-xlarge: 36px; /* 47.988px = 2.999rem */
99
758
  --heading-xxlarge: 40px; /* 53.32px = 3.333rem */
100
759
 
101
760
  /* Body default */
102
761
  --body-small: 13px; /* 17.329px = 1.083rem */
103
- --body-medium: 14px; /* 18.662px = 1.167rem */
104
- --body-large: 16px; /* 21.328px = 1.333rem */
762
+ --typography-body-small-fontSize: 14px; /* 18.662px = 1.167rem */
763
+ --typography-body-regular-fontSize: 16px; /* 21.328px = 1.333rem */
105
764
  --body-xlarge: 18px; /* 23.994px = 1.5rem */
106
765
 
107
766
  /* Caption default */
108
- --caption-small: 11px; /* 14.663px = 0.917rem */
109
- --caption-large: 12px; /* 15.996px = 1rem */
110
-
111
-
112
-
767
+ --typography-label-extra-small-fontSize: 11px; /* 14.663px = 0.917rem */
768
+ --typography-label-small-fontSize: 12px; /* 15.996px = 1rem */
113
769
 
114
770
  /* Display Default */
115
- --display-xlarge-line-height: 1.1; /* For 60px */
116
- --display-medium-line-height: 1.15; /* For 52px */
771
+ --display-xlarge-line-height: 1.1; /* For 60px */
772
+ --display-medium-line-height: 1.15; /* For 52px */
117
773
 
118
774
  /* Display Mobile */
119
- --display-xlarge-mobile-line-height: 1.15; /* For 44px */
120
- --display-medium-mobile-line-height: 1.2; /* For 38px */
775
+ --display-xlarge-mobile-line-height: 1.15; /* For 44px */
776
+ --display-medium-mobile-line-height: 1.2; /* For 38px */
121
777
 
122
778
  /* Heading */
123
- --heading-xlarge-line-height: 1.2; /* For 36px */
124
- --heading-small-line-height: 1.3; /* For 24px */
779
+ --heading-xlarge-line-height: 1.2; /* For 36px */
780
+ --typography-heading-h4-fontSize-line-height: 1.3; /* For 24px */
125
781
 
126
782
  /* Body */
127
- --body-large-line-height: 1.5; /* For 16px */
783
+ --typography-body-regular-fontSize-line-height: 1.5; /* For 16px */
128
784
 
129
785
  /* Caption */
130
- --caption-large-line-height: 1.35; /* For 12px */
131
- /* =====================
132
- PADDING SIZES
133
- ====================== */
786
+ --typography-label-small-fontSize-line-height: 1.35; /* For 12px */
134
787
 
135
- /* PADDING VALUES */
136
- --size-0: 0;
137
- --size-1: 1px;
138
- --size-2: 2px;
139
- --size-4: 4px;
140
- --size-6: 6px;
141
- --size-8: 8px;
142
- --size-10: 10px;
143
- --size-12: 12px;
144
- --size-14: 14px;
145
- --size-16: 16px;
146
- --size-18: 18px;
147
- --size-20: 20px;
148
- --size-22: 22px;
149
- --size-24: 24px;
150
- --size-32: 32px;
151
- --size-36: 36px;
152
- --size-40: 40px;
153
- --size-44: 44px;
154
- --size-52: 52px;
155
- --size-64: 64px;
156
- --size-full: 99999999999999999999;
157
-
158
-
159
788
  /* Spacing Tokens
160
789
  -----------------------------------------------*/
161
790
  /* Base spacing tokens - Based on 4px grid */
162
791
  --space-none: 0;
163
- --space-4xs: 0.125rem; /* 2px */
164
- --space-3xs: 0.25rem; /* 4px */
165
- --space-2xs: 0.5rem; /* 8px */
166
- --space-xs: 0.75rem; /* 12px */
167
- --space-sm: 1rem; /* 16px */
168
- --space-md: 1.5rem; /* 24px */
169
- --space-lg: 2rem; /* 32px */
170
- --space-xl: 2.5rem; /* 40px */
171
- --space-2xl: 3rem; /* 48px */
172
- --space-3xl: 4rem; /* 64px */
173
- --space-4xl: 6rem; /* 96px */
174
- --space-5xl: 8rem; /* 128px */
175
-
792
+ --space-4xs: 0.125rem; /* 2px */
793
+ --space-3xs: 0.25rem; /* 4px */
794
+ --space-2xs: 0.5rem; /* 8px */
795
+ --space-xs: 0.75rem; /* 12px */
796
+ --space-sm: 1rem; /* 16px */
797
+ --space-md: 1.5rem; /* 24px */
798
+ --space-lg: 2rem; /* 32px */
799
+ --space-xl: 2.5rem; /* 40px */
800
+ --space-2xl: 3rem; /* 48px */
801
+ --space-3xl: 4rem; /* 64px */
802
+ --space-4xl: 6rem; /* 96px */
803
+ --space-5xl: 8rem; /* 128px */
804
+
176
805
  /* Semantic Padding Tokens */
177
806
  --padding-button: var(--space-xs) var(--space-md);
178
807
  --padding-input: var(--space-xs);
179
808
  --padding-card: var(--space-md);
180
809
  --padding-card-sm: var(--space-sm);
181
810
  --padding-card-lg: var(--space-lg);
182
-
811
+
183
812
  --padding-section: var(--space-3xl) 0;
184
813
  --padding-section-sm: var(--space-2xl) 0;
185
814
  --padding-section-lg: var(--space-4xl) 0;
186
-
815
+
187
816
  /* Container and Layout Tokens */
188
817
  --container-padding: var(--space-md);
189
818
  --container-padding-sm: var(--space-sm);
190
819
  --container-padding-lg: var(--space-lg);
191
-
820
+
192
821
  /* Inset (Padding All Sides) Tokens */
193
822
  --inset-xs: var(--space-xs);
194
823
  --inset-sm: var(--space-sm);
195
824
  --inset-md: var(--space-md);
196
825
  --inset-lg: var(--space-lg);
197
-
826
+
198
827
  /* Stack (Vertical Spacing) Tokens */
199
828
  --stack-xs: var(--space-xs);
200
829
  --stack-sm: var(--space-sm);
201
830
  --stack-md: var(--space-md);
202
831
  --stack-lg: var(--space-lg);
203
832
  --stack-xl: var(--space-xl);
204
-
833
+
205
834
  /* Inline (Horizontal Spacing) Tokens */
206
835
  --inline-xs: var(--space-xs);
207
836
  --inline-sm: var(--space-sm);
208
837
  --inline-md: var(--space-md);
209
838
  --inline-lg: var(--space-lg);
210
-
839
+
211
840
  /* Accessibility Spacing Tokens
212
841
  -----------------------------------------------*/
213
842
  /* Touch Target Sizes - WCAG 2.1 Success Criterion 2.5.5 (AAA) and 2.5.8 (AA) */
214
843
  --touch-target-size: 44px; /* Minimum touch target size (44px × 44px) */
215
844
  --touch-target-spacing: 8px; /* Minimum space between touch targets */
216
-
845
+
217
846
  /* Readable Line Lengths - For optimal readability */
218
847
  --content-width-readable: 70ch; /* Approximately 70 characters per line */
219
848
  --content-width-max: 1200px; /* Maximum overall content width */
220
849
 
221
-
222
850
  /** GRID TOKENS
223
- */
851
+ */
224
852
  /* Grid container max widths */
225
- --grid-container-max-xs: 100%; /* mobile full width */
853
+ --grid-container-max-xs: 100%; /* mobile full width */
226
854
  --grid-container-max-sm: 540px;
227
855
  --grid-container-max-md: 720px;
228
856
  --grid-container-max-lg: 960px;
@@ -251,12 +879,145 @@ export const tokens = css`
251
879
  --breakpoint-lg: 992px;
252
880
  --breakpoint-xl: 1200px;
253
881
  --breakpoint-xxl: 1400px;
882
+ /* =====================
883
+ FONT-FACE DEFINITIONS
884
+ ====================== */
885
+
886
+ @font-face {
887
+ font-family: "IBM Plex Mono";
888
+ font-style: normal;
889
+ font-weight: 700;
890
+ src: url("/assets/fonts/IBMPlexMono-Bold.woff2") format("woff2");
891
+ }
892
+ @font-face {
893
+ font-family: "IBM Plex Mono";
894
+ font-style: normal;
895
+ font-weight: 700;
896
+ src: url("/assets/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
897
+ }
898
+
899
+ @font-face {
900
+ font-family: "IBM Plex Mono";
901
+ font-style: italic;
902
+ font-weight: 300;
903
+ src: url("/assets/fonts/IBMPlexMono-Italic.woff2") format("woff2");
904
+ }
905
+ @font-face {
906
+ font-family: "IBM Plex Mono";
907
+ font-style: normal;
908
+ font-weight: 300;
909
+ src: url("/assets/fonts/IBMPlexMono-Light.woff2") format("woff2");
910
+ }
911
+ @font-face {
912
+ font-family: "IBM Plex Mono";
913
+ font-style: italic;
914
+ font-weight: 300;
915
+ src: url("/assets/fonts/IBMPlexMono-LightItalic.woff2") format("woff2");
916
+ }
917
+
918
+ @font-face {
919
+ font-family: "IBM Plex Mono";
920
+ font-style: italic;
921
+ font-weight: 500;
922
+ src: url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
923
+ }
924
+ @font-face {
925
+ font-family: "IBM Plex Mono";
926
+ font-style: italic;
927
+ font-weight: 500;
928
+ src: url("/assets/fonts/IBMPlexMono-MediumItalic.woff2") format("woff2");
929
+ }
930
+ @font-face {
931
+ font-family: "IBM Plex Mono";
932
+ font-style: italic;
933
+ font-weight: 400;
934
+ src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
935
+ }
936
+ @font-face {
937
+ font-family: "IBM Plex Mono";
938
+ font-style: italic;
939
+ font-weight: 600;
940
+ src: url("/assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
941
+ }
942
+ @font-face {
943
+ font-family: "IBM Plex Mono";
944
+ font-style: italic;
945
+ font-weight: 600;
946
+ src: url("/assets/fonts/IBMPlexMono-SemiBoldItalic.woff2") format("woff2");
947
+ }
948
+
949
+ /*
950
+ IBM PLEX SANS
951
+ */
952
+
953
+ @font-face {
954
+ font-family: "IBMPlexSans";
955
+ font-style: normal;
956
+ font-weight: 700;
957
+ src: url("/assets/fonts/IBMPlexSans-Bold.woff2") format("woff2");
958
+ }
959
+ @font-face {
960
+ font-family: "IBMPlexSans";
961
+ font-style: normal;
962
+ font-weight: 700;
963
+ src: url("/assets/fonts/IBMPlexSans-BoldItalic.woff2") format("woff2");
964
+ }
965
+
966
+ @font-face {
967
+ font-family: "IBMPlexSans";
968
+ font-style: italic;
969
+ font-weight: 300;
970
+ src: url("/assets/fonts/IBMPlexSans-Italic.woff2") format("woff2");
971
+ }
972
+ @font-face {
973
+ font-family: "IBMPlexSans";
974
+ font-style: normal;
975
+ font-weight: 300;
976
+ src: url("/assets/fonts/IBMPlexSans-Light.woff2") format("woff2");
977
+ }
978
+ @font-face {
979
+ font-family: "IBMPlexSans";
980
+ font-style: italic;
981
+ font-weight: 300;
982
+ src: url("/assets/fonts/IBMPlexSans-LightItalic.woff2") format("woff2");
983
+ }
984
+
985
+ @font-face {
986
+ font-family: "IBMPlexSans";
987
+ font-style: italic;
988
+ font-weight: 500;
989
+ src: url("/assets/fonts/IBMPlexSans-Medium.woff2") format("woff2");
990
+ }
991
+ @font-face {
992
+ font-family: "IBMPlexSans";
993
+ font-style: italic;
994
+ font-weight: 500;
995
+ src: url("/assets/fonts/IBMPlexSans-MediumItalic.woff2") format("woff2");
996
+ }
997
+ @font-face {
998
+ font-family: "IBMPlexSans";
999
+ font-style: italic;
1000
+ font-weight: 400;
1001
+ src: url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
1002
+ }
1003
+ @font-face {
1004
+ font-family: "IBMPlexSans";
1005
+ font-style: italic;
1006
+ font-weight: 600;
1007
+ src: url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
1008
+ }
1009
+ @font-face {
1010
+ font-family: "IBMPlexSans";
1011
+ font-style: italic;
1012
+ font-weight: 600;
1013
+ src: url("/assets/fonts/IBMPlexSans-SemiBoldItalic.woff2") format("woff2");
1014
+ }
254
1015
 
255
1016
  /* =====================
256
1017
  FONT TOKENS
257
1018
  ====================== */
258
1019
  /* IBM Plex Mono */
259
- --font-family-mono: 'IBM Plex Mono', monospace;
1020
+ --font-family-mono: "IBM Plex Mono", monospace;
260
1021
  --font-weight-mono-light: 300;
261
1022
  --font-weight-mono-regular: 400;
262
1023
  --font-weight-mono-medium: 500;
@@ -266,13 +1027,13 @@ export const tokens = css`
266
1027
  --font-style-mono-normal: normal;
267
1028
  --font-style-mono-italic: italic;
268
1029
 
269
- /* IBMPlexSans */
270
- --font-family-sans: 'IBM Plex Sans', sans-serif;
1030
+ /* IBM Plex Sans */
1031
+ --typography-fontFamily-sans: 'IBM Plex Sans', sans-serif;
271
1032
  --font-weight-sans-light: 300;
272
- --font-weight-sans-regular: 400;
1033
+ --typography-body-large-fontWeight: 400;
273
1034
  --font-weight-sans-medium: 500;
274
- --font-weight-sans-semibold: 600;
275
- --font-weight-sans-bold: 700;
1035
+ --typography-fontWeight-semibold: 600;
1036
+ --typography-fontWeight-bold: 700;
276
1037
 
277
1038
  --font-style-sans-normal: normal;
278
1039
  --font-style-sans-italic: italic;