@repobit/dex-system-design 0.17.0 → 0.18.1

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 (10) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/package.json +3 -3
  3. package/src/components/header/header.stories.js +53 -27
  4. package/src/components/{Input → input}/custom-form.stories.js +1 -1
  5. package/src/tokens/tokens.js +898 -115
  6. /package/src/components/{Input → input}/index.js +0 -0
  7. /package/src/components/{Input → input}/input-clipboard.css.js +0 -0
  8. /package/src/components/{Input → input}/input-clipboard.js +0 -0
  9. /package/src/components/{Input → input}/input.css.js +0 -0
  10. /package/src/components/{Input/Input.js → input/input.js} +0 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,29 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.18.1](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.18.0...@repobit/dex-system-design@0.18.1) (2025-09-30)
7
+
8
+ **Note:** Version bump only for package @repobit/dex-system-design
9
+
10
+
11
+
12
+
13
+
14
+ ## [0.18.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.17.0...@repobit/dex-system-design@0.18.0) (2025-09-11)
15
+
16
+
17
+ ### Features
18
+
19
+ * **DEX-1001:** update header.stories.js + fix for input issue on build ([44cb5df](https://github.com/bitdefender/dex-core/commit/44cb5dfc74c45d3c6835d47a09694006517864b3))
20
+
21
+
22
+ ### Bug Fixes
23
+
24
+ * **DEX-1001:** rename Input file -> input ([c05257c](https://github.com/bitdefender/dex-core/commit/c05257c690eeef94ee035a69feef8e393cffe5ea))
25
+ * **DEX-1001:** rename Input folder -> input ([940877d](https://github.com/bitdefender/dex-core/commit/940877dceabc897918a56dfa37f4e7107397229b))
26
+
27
+
28
+
6
29
  ## [0.17.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.16.0...@repobit/dex-system-design@0.17.0) (2025-09-11)
7
30
 
8
31
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@repobit/dex-system-design",
3
- "version": "0.17.0",
3
+ "version": "0.18.1",
4
4
  "description": "Design system based on Web Components.",
5
5
  "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
6
6
  "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -25,7 +25,7 @@
25
25
  "./faq": "./src/components/FAQ/faq.js",
26
26
  "./header": "./src/components/header/header.js",
27
27
  "./highlight": "./src/components/highlight/highlight.js",
28
- "./input": "./src/components/Input/Input.js",
28
+ "./input": "./src/components/input/input.js",
29
29
  "./light-carousel": "./src/components/light-carousel/light-carousel.js",
30
30
  "./paragraph": "./src/components/paragraph/paragraph.js",
31
31
  "./pricing-cards": "./src/components/pricing-cards/pricing-card.js",
@@ -68,5 +68,5 @@
68
68
  "volta": {
69
69
  "node": "22.14.0"
70
70
  },
71
- "gitHead": "4cf73a3f7bfd6c03c9b3f2fa8967d3e8de0e8f40"
71
+ "gitHead": "c84f08c8c82cddc5a067a5a484832b54401a335e"
72
72
  }
package/src/components/header/header.stories.js CHANGED
@@ -2,16 +2,21 @@ import { html } from 'lit';
2
2
  import './header.js';
3
3
 
4
4
  export default {
5
- title: 'Sections/Header',
5
+ title : 'Sections/Header',
6
6
  component: 'bd-header',
7
- argTypes: {
8
- productName: { control: 'text' },
9
- valueProp: { control: 'text' },
10
- description: { control: 'text' },
11
- fullPrice: { control: 'text' },
12
- discount: { control: 'text' },
13
- finalPrice: { control: 'text' },
14
- },
7
+ argTypes : {
8
+ productName : { control: 'text' },
9
+ valueProp : { control: 'text' },
10
+ description : { control: 'text' },
11
+ fullPrice : { control: 'text' },
12
+ discount : { control: 'text' },
13
+ finalPrice : { control: 'text' },
14
+ headerImage : { control: 'text' },
15
+ disclaimerTop : { control: 'text' },
16
+ disclaimerBottomStart: { control: 'text' },
17
+ disclaimerBottomLink : { control: 'text' },
18
+ disclaimerBottomEnd : { control: 'text' }
19
+ }
15
20
  };
16
21
 
17
22
  const Template = (args) => html`
@@ -23,35 +28,56 @@ const Template = (args) => html`
23
28
  .discount=${args.discount}
24
29
  .finalPrice=${args.finalPrice}
25
30
  >
31
+ ${args.headerImage
32
+ ? html`<img slot="header-image" src="${args.headerImage}" alt="Header Image">`
33
+ : ''}
34
+
35
+ ${args.disclaimerTop
36
+ ? html`<span slot="disclaimer-top">${args.disclaimerTop}</span>`
37
+ : ''}
38
+
39
+ ${args.disclaimerBottomStart || args.disclaimerBottomLink || args.disclaimerBottomEnd
40
+ ? html`
41
+ <span slot="disclaimer-bottom-text-start">${args.disclaimerBottomStart || ''}</span>
42
+ <a slot="disclaimer-bottom-link" href="#">${args.disclaimerBottomLink || ''}</a>
43
+ <span slot="disclaimer-bottom-text-end">${args.disclaimerBottomEnd || ''}</span>
44
+ `
45
+ : ''}
26
46
  </bd-header>
27
47
  `;
28
48
 
29
49
  export const Default = Template.bind({});
30
50
  Default.args = {
31
- productName: 'Bitdefender Ultimate Security',
32
- valueProp: 'Complete Security, Advanced Privacy, and Identity Protection',
33
- description: 'All in one plan to incorporate multi-awarded device protection, solid password management, unlimited VPN traffic & personalized protection for your online identity.',
34
- fullPrice: '$139.99',
35
- discount: 'Save 44%',
36
- finalPrice: '$79.99*',
51
+ productName : 'Bitdefender Ultimate Security',
52
+ valueProp : 'Complete Security, Advanced Privacy, and Identity Protection',
53
+ description : 'All in one plan to incorporate multi-awarded device protection, solid password management, unlimited VPN traffic & personalized protection for your online identity.',
54
+ fullPrice : '$139.99',
55
+ discount : 'Save 44%',
56
+ finalPrice : '$79.99*',
57
+ headerImage : '/assets/bd-header-us.jpg',
58
+ disclaimerTop : 'Protection for 1 account & 5 PCs, Macs, tablets, or smartphones. Windows® | macOS® | Android™ | iOS®',
59
+ disclaimerBottomStart: 'Learn more about',
60
+ disclaimerBottomLink : 'Terms & Conditions',
61
+ disclaimerBottomEnd : 'before purchasing.'
37
62
  };
38
63
 
39
64
  export const WithCustomImage = Template.bind({});
40
65
  WithCustomImage.args = {
41
- productName: 'Bitdefender Ultimate Security',
42
- valueProp: 'Complete Security, Advanced Privacy, and Identity Protection',
43
- description: 'All in one plan to incorporate multi-awarded device protection, solid password management, unlimited VPN traffic & personalized protection for your online identity.',
44
- fullPrice: '$139.99',
45
- discount: 'Save 44%',
46
- finalPrice: '$79.99*',
66
+ ...Default.args,
67
+ headerImage: '/assets/bd-header-us.jpg'
47
68
  };
48
69
 
49
70
  export const WithDiscountedPrice = Template.bind({});
50
71
  WithDiscountedPrice.args = {
51
- productName: 'Bitdefender Premium Security',
52
- valueProp: 'Advanced Security, Privacy & Identity Protection',
53
- description: 'Comprehensive security for all your devices with enhanced features and privacy options.',
54
- fullPrice: '$199.99',
55
- discount: 'Save 35%',
56
- finalPrice: '$129.99*',
72
+ productName : 'Bitdefender Premium Security',
73
+ valueProp : 'Advanced Security, Privacy & Identity Protection',
74
+ description : 'Comprehensive security for all your devices with enhanced features and privacy options.',
75
+ fullPrice : '$199.99',
76
+ discount : 'Save 35%',
77
+ finalPrice : '$129.99*',
78
+ headerImage : '/assets/bd-header-us.jpg',
79
+ disclaimerTop : 'Protection for 1 account & 5 devices.',
80
+ disclaimerBottomStart: 'See',
81
+ disclaimerBottomLink : 'Details',
82
+ disclaimerBottomEnd : 'for more info.'
57
83
  };
package/src/components/{Input → input}/custom-form.stories.js RENAMED
@@ -2,7 +2,7 @@ import { html } from 'lit';
2
2
 
3
3
  import '../dropdown/dropdown.js';
4
4
  import './input-clipboard.js';
5
- import './Input.js';
5
+ import './input.js';
6
6
 
7
7
 
8
8
  export default {
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,627 @@ 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
+
115
+ --border-width-0: 0;
116
+ --border-width-1: 1px;
117
+ --border-width-2: 2px;
118
+ --border-width-3: 3px;
119
+ --border-width-4: 4px;
120
+ --border-width-8: 8px;
121
+
122
+ --radius-none: 0;
123
+ --radius-sm: 0.25rem; /* 4px */
124
+ --radius-md: 0.375rem; /* 6px */
125
+ --radius-lg: 0.5rem; /* 8px */
126
+ --radius-xl: 0.75rem; /* 12px */
127
+ --radius-2xl: 1rem; /* 16px */
128
+ --radius-3xl: 1.5rem; /* 24px */
129
+ --radius-full: 9999px;
130
+ /* ================================
131
+ CORE DIMENSION TOKENS
132
+ ================================ */
133
+
134
+ --dimension-2px: 2px;
135
+ --dimension-4px: 4px;
136
+ --dimension-8px: 8px;
137
+ --dimension-12px: 12px;
138
+ --dimension-16px: 16px;
139
+ --dimension-20px: 20px;
140
+ --dimension-24px: 24px;
141
+ --dimension-32px: 32px;
142
+ --dimension-34px: 34px;
143
+ --dimension-40px: 40px;
144
+ --dimension-45px: 45px;
145
+ --dimension-48px: 48px;
146
+ --dimension-55px: 55px;
147
+ --dimension-64px: 64px;
148
+
149
+ /* ================================
150
+ CORE TRANSITION TOKENS
151
+ ================================ */
152
+
153
+ --transition-duration-fast: 150ms;
154
+ --transition-duration-normal: 200ms;
155
+ --transition-duration-slow: 300ms;
156
+ --transition-duration-slower: 500ms;
157
+
158
+ --transition-easing-linear: linear;
159
+ --transition-easing-smooth: ease-in-out;
160
+ --transition-easing-ease-in: ease-in;
161
+ --transition-easing-ease-out: ease-out;
162
+ --transition-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
163
+
164
+ /* ================================
165
+ CORE SHADOW TOKENS
166
+ ================================ */
167
+
168
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
169
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
170
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
171
+ 0 4px 6px -4px rgb(0 0 0 / 0.1);
172
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
173
+ 0 8px 10px -6px rgb(0 0 0 / 0.1);
174
+ --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
175
+ --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
176
+
177
+ /* Focus Shadows - Box Shadow Version */
178
+ --shadow-focus-outline-blue: 0 0 0 3px rgba(6, 109, 255, 0.15);
179
+ --shadow-focus-outline-red: 0 0 0 3px rgba(239, 68, 68, 0.15);
180
+ --shadow-focus-outline-green: 0 0 0 3px rgba(34, 197, 94, 0.15);
181
+
182
+ /* Focus Outlines - Two-Color System for Universal Visibility */
183
+ --focus-outline-primary: 0 0 0 2px var(--color-neutral-0),
184
+ 0 0 0 4px var(--color-blue-500);
185
+ --focus-outline-secondary: 0 0 0 2px var(--color-neutral-0),
186
+ 0 0 0 4px var(--color-neutral-600);
187
+ --focus-outline-error: 0 0 0 2px var(--color-neutral-0),
188
+ 0 0 0 4px var(--color-red-500);
189
+ --focus-outline-success: 0 0 0 2px var(--color-neutral-0),
190
+ 0 0 0 4px var(--color-green-500);
191
+
192
+ /* Traditional Outline Values for Fallback */
193
+ --focus-outline-traditional: 2px solid var(--color-blue-500);
194
+ --focus-outline-offset: 2px;
195
+
196
+ /* ================================
197
+ COMPONENT TOKENS - TYPOGRAPHY
198
+ ================================ */
199
+
200
+ /* Heading Tokens */
201
+ --typography-heading-h1-fontSize: var(--typography-fontSize-5xl);
202
+ --typography-heading-h1-fontWeight: var(--typography-fontWeight-bold);
203
+ --typography-heading-h1-lineHeight: var(--typography-lineHeight-snug);
204
+ --typography-heading-h1-letterSpacing: var(--typography-letterSpacing-normal);
205
+ --typography-heading-h1-fontFamily: var(--typography-fontFamily-sans);
206
+
207
+ --typography-heading-h2-fontSize: var(--typography-fontSize-4xl);
208
+ --typography-heading-h2-fontWeight: var(--typography-fontWeight-bold);
209
+ --typography-heading-h2-lineHeight: var(--typography-lineHeight-snug);
210
+ --typography-heading-h2-letterSpacing: var(--typography-letterSpacing-normal);
211
+ --typography-heading-h2-fontFamily: var(--typography-fontFamily-sans);
212
+
213
+ --typography-heading-h3-fontSize: var(--typography-fontSize-3xl);
214
+ --typography-heading-h3-fontWeight: var(--typography-fontWeight-semibold);
215
+ --typography-heading-h3-lineHeight: var(--typography-lineHeight-snug);
216
+ --typography-heading-h3-letterSpacing: var(--typography-letterSpacing-normal);
217
+ --typography-heading-h3-fontFamily: var(--typography-fontFamily-sans);
218
+
219
+ --typography-heading-h4-fontSize: var(--typography-fontSize-2xl);
220
+ --typography-heading-h4-fontWeight: var(--typography-fontWeight-semibold);
221
+ --typography-heading-h4-lineHeight: var(--typography-lineHeight-snug);
222
+ --typography-heading-h4-letterSpacing: var(--typography-letterSpacing-normal);
223
+ --typography-heading-h4-fontFamily: var(--typography-fontFamily-sans);
224
+
225
+ --typography-heading-h5-fontSize: var(--typography-fontSize-xl);
226
+ --typography-heading-h5-fontWeight: var(--typography-fontWeight-medium);
227
+ --typography-heading-h5-lineHeight: var(--typography-lineHeight-normal);
228
+ --typography-heading-h5-letterSpacing: var(--typography-letterSpacing-normal);
229
+ --typography-heading-h5-fontFamily: var(--typography-fontFamily-sans);
230
+
231
+ --typography-heading-h6-fontSize: var(--typography-fontSize-lg);
232
+ --typography-heading-h6-fontWeight: var(--typography-fontWeight-medium);
233
+ --typography-heading-h6-lineHeight: var(--typography-lineHeight-normal);
234
+ --typography-heading-h6-letterSpacing: var(--typography-letterSpacing-normal);
235
+ --typography-heading-h6-fontFamily: var(--typography-fontFamily-sans);
236
+
237
+ /* Body Text Tokens */
238
+ --typography-body-large-fontSize: var(--typography-fontSize-lg);
239
+ --typography-body-large-fontWeight: var(--typography-fontWeight-normal);
240
+ --typography-body-large-lineHeight: var(--typography-lineHeight-relaxed);
241
+ --typography-body-large-letterSpacing: var(--typography-letterSpacing-normal);
242
+ --typography-body-large-fontFamily: var(--typography-fontFamily-sans);
243
+
244
+ --typography-body-regular-fontSize: var(--typography-fontSize-base);
245
+ --typography-body-regular-fontWeight: var(--typography-fontWeight-normal);
246
+ --typography-body-regular-lineHeight: var(--typography-lineHeight-normal);
247
+ --typography-body-regular-letterSpacing: var(
248
+ --typography-letterSpacing-normal
249
+ );
250
+ --typography-body-regular-fontFamily: var(--typography-fontFamily-sans);
251
+
252
+ --typography-body-small-fontSize: var(--typography-fontSize-sm);
253
+ --typography-body-small-fontWeight: var(--typography-fontWeight-normal);
254
+ --typography-body-small-lineHeight: var(--typography-lineHeight-normal);
255
+ --typography-body-small-letterSpacing: var(--typography-letterSpacing-normal);
256
+ --typography-body-small-fontFamily: var(--typography-fontFamily-sans);
257
+
258
+ --typography-body-lead-fontSize: var(--typography-fontSize-xl);
259
+ --typography-body-lead-fontWeight: var(--typography-fontWeight-normal);
260
+ --typography-body-lead-lineHeight: var(--typography-lineHeight-relaxed);
261
+ --typography-body-lead-letterSpacing: var(--typography-letterSpacing-normal);
262
+ --typography-body-lead-fontFamily: var(--typography-fontFamily-sans);
263
+
264
+ /* Label Tokens */
265
+ --typography-label-default-fontSize: var(--typography-fontSize-sm);
266
+ --typography-label-default-fontWeight: var(--typography-fontWeight-medium);
267
+ --typography-label-default-lineHeight: var(--typography-lineHeight-normal);
268
+ --typography-label-default-letterSpacing: var(
269
+ --typography-letterSpacing-normal
270
+ );
271
+ --typography-label-default-fontFamily: var(--typography-fontFamily-sans);
272
+
273
+ --typography-label-small-fontSize: var(--typography-fontSize-xs);
274
+ --typography-label-small-fontWeight: var(--typography-fontWeight-medium);
275
+ --typography-label-small-lineHeight: var(--typography-lineHeight-normal);
276
+ --typography-label-small-letterSpacing: var(--typography-letterSpacing-wide);
277
+ --typography-label-small-fontFamily: var(--typography-fontFamily-sans);
278
+
279
+ --typography-label-extra-small-fontSize: var(--typography-fontSize-xxs);
280
+
281
+ --typography-label-large-fontSize: var(--typography-fontSize-base);
282
+ --typography-label-large-fontWeight: var(--typography-fontWeight-medium);
283
+ --typography-label-large-lineHeight: var(--typography-lineHeight-normal);
284
+ --typography-label-large-letterSpacing: var(
285
+ --typography-letterSpacing-normal
286
+ );
287
+ --typography-label-large-fontFamily: var(--typography-fontFamily-sans);
288
+
289
+ --typography-label-xl-fontSize: var(--typography-fontSize-lg);
290
+ --typography-label-xl-fontWeight: var(--typography-fontWeight-medium);
291
+ --typography-label-xl-lineHeight: var(--typography-lineHeight-normal);
292
+ --typography-label-xl-letterSpacing: var(--typography-letterSpacing-normal);
293
+ --typography-label-xl-fontFamily: var(--typography-fontFamily-sans);
294
+
295
+ /* Caption Tokens */
296
+ --typography-caption-default-fontSize: var(--typography-fontSize-xs);
297
+ --typography-caption-default-fontWeight: var(--typography-fontWeight-normal);
298
+ --typography-caption-default-lineHeight: var(--typography-lineHeight-normal);
299
+ --typography-caption-default-letterSpacing: var(
300
+ --typography-letterSpacing-normal
301
+ );
302
+ --typography-caption-default-fontFamily: var(--typography-fontFamily-sans);
303
+
304
+ --typography-caption-small-fontSize: var(--typography-fontSize-xs);
305
+ --typography-caption-small-fontWeight: var(--typography-fontWeight-normal);
306
+ --typography-caption-small-lineHeight: var(--typography-lineHeight-normal);
307
+ --typography-caption-small-letterSpacing: var(
308
+ --typography-letterSpacing-wide
309
+ );
310
+ --typography-caption-small-fontFamily: var(--typography-fontFamily-sans);
311
+
312
+ /* Link Tokens */
313
+ --typography-link-default-fontSize: inherit;
314
+ --typography-link-default-fontWeight: var(--typography-fontWeight-normal);
315
+ --typography-link-default-lineHeight: inherit;
316
+ --typography-link-default-letterSpacing: inherit;
317
+ --typography-link-default-fontFamily: inherit;
318
+ --typography-link-default-textDecoration-default: underline;
319
+ --typography-link-default-textDecoration-hover: none;
320
+
321
+ --typography-link-standalone-fontSize: var(--typography-fontSize-base);
322
+ --typography-link-standalone-fontWeight: var(--typography-fontWeight-medium);
323
+ --typography-link-standalone-lineHeight: var(--typography-lineHeight-normal);
324
+ --typography-link-standalone-letterSpacing: var(
325
+ --typography-letterSpacing-normal
326
+ );
327
+ --typography-link-standalone-fontFamily: var(--typography-fontFamily-sans);
328
+ --typography-link-standalone-textDecoration-default: underline;
329
+ --typography-link-standalone-textDecoration-hover: none;
330
+
331
+ /* Code Tokens */
332
+ --typography-code-inline-fontSize: 0.875em;
333
+ --typography-code-inline-fontWeight: var(--typography-fontWeight-normal);
334
+ --typography-code-inline-lineHeight: inherit;
335
+ --typography-code-inline-letterSpacing: var(
336
+ --typography-letterSpacing-normal
337
+ );
338
+ --typography-code-inline-fontFamily: var(--typography-fontFamily-mono);
339
+
340
+ --typography-code-block-fontSize: var(--typography-fontSize-sm);
341
+ --typography-code-block-fontWeight: var(--typography-fontWeight-normal);
342
+ --typography-code-block-lineHeight: var(--typography-lineHeight-relaxed);
343
+ --typography-code-block-letterSpacing: var(--typography-letterSpacing-normal);
344
+ --typography-code-block-fontFamily: var(--typography-fontFamily-mono);
345
+
346
+ /* Display Typography Tokens */
347
+ --typography-display-3xl-fontSize: var(--typography-fontSize-9xl);
348
+ --typography-display-3xl-fontWeight: var(--typography-fontWeight-bold);
349
+ --typography-display-3xl-lineHeight: var(--typography-lineHeight-tight);
350
+ --typography-display-3xl-letterSpacing: var(--typography-letterSpacing-tight);
351
+ --typography-display-3xl-fontFamily: var(--typography-fontFamily-sans);
352
+
353
+ --typography-display-2xl-fontSize: var(--typography-fontSize-8xl);
354
+ --typography-display-2xl-fontWeight: var(--typography-fontWeight-bold);
355
+ --typography-display-2xl-lineHeight: var(--typography-lineHeight-tight);
356
+ --typography-display-2xl-letterSpacing: var(--typography-letterSpacing-tight);
357
+ --typography-display-2xl-fontFamily: var(--typography-fontFamily-sans);
358
+
359
+ --typography-display-xl-fontSize: var(--typography-fontSize-7xl);
360
+ --typography-display-xl-fontWeight: var(--typography-fontWeight-bold);
361
+ --typography-display-xl-lineHeight: var(--typography-lineHeight-tight);
362
+ --typography-display-xl-letterSpacing: var(--typography-letterSpacing-tight);
363
+ --typography-display-xl-fontFamily: var(--typography-fontFamily-sans);
364
+
365
+ --typography-display-lg-fontSize: var(--typography-fontSize-6xl);
366
+ --typography-display-lg-fontWeight: var(--typography-fontWeight-bold);
367
+ --typography-display-lg-lineHeight: var(--typography-lineHeight-tight);
368
+ --typography-display-lg-letterSpacing: var(--typography-letterSpacing-tight);
369
+ --typography-display-lg-fontFamily: var(--typography-fontFamily-sans);
370
+
371
+ --typography-display-md-fontSize: var(--typography-fontSize-5xl);
372
+ --typography-display-md-fontWeight: var(--typography-fontWeight-bold);
373
+ --typography-display-md-lineHeight: var(--typography-lineHeight-tight);
374
+ --typography-display-md-letterSpacing: var(--typography-letterSpacing-tight);
375
+ --typography-display-md-fontFamily: var(--typography-fontFamily-sans);
376
+
377
+ --typography-display-sm-fontSize: var(--typography-fontSize-4xl);
378
+ --typography-display-sm-fontWeight: var(--typography-fontWeight-bold);
379
+ --typography-display-sm-lineHeight: var(--typography-lineHeight-tight);
380
+ --typography-display-sm-letterSpacing: var(--typography-letterSpacing-tight);
381
+ --typography-display-sm-fontFamily: var(--typography-fontFamily-sans);
382
+
383
+ /* ================================
384
+ COMPONENT TOKENS - FORM
385
+ ================================ */
386
+
387
+ /* Form Label Tokens */
388
+ --form-label-default-fontSize: var(--typography-fontSize-sm);
389
+ --form-label-default-fontWeight: var(--typography-fontWeight-medium);
390
+ --form-label-default-lineHeight: var(--typography-lineHeight-normal);
391
+ --form-label-default-letterSpacing: var(--typography-letterSpacing-normal);
392
+ --form-label-default-fontFamily: var(--typography-fontFamily-sans);
393
+ --form-label-default-color: var(--color-neutral-900);
394
+ --form-label-default-marginBottom: var(--spacing-1);
395
+
396
+ --form-label-large-fontSize: var(--typography-fontSize-lg);
397
+ --form-label-large-fontWeight: var(--typography-fontWeight-medium);
398
+ --form-label-large-lineHeight: var(--typography-lineHeight-normal);
399
+ --form-label-large-letterSpacing: var(--typography-letterSpacing-normal);
400
+ --form-label-large-fontFamily: var(--typography-fontFamily-sans);
401
+ --form-label-large-color: var(--color-neutral-900);
402
+ --form-label-large-marginBottom: var(--spacing-2);
403
+
404
+ --form-label-small-fontSize: var(--typography-fontSize-xs);
405
+ --form-label-small-fontWeight: var(--typography-fontWeight-medium);
406
+ --form-label-small-lineHeight: var(--typography-lineHeight-normal);
407
+ --form-label-small-letterSpacing: var(--typography-letterSpacing-wide);
408
+ --form-label-small-fontFamily: var(--typography-fontFamily-sans);
409
+ --form-label-small-color: var(--color-neutral-900);
410
+ --form-label-small-marginBottom: var(--spacing-1);
411
+
412
+ --form-label-required-color: var(--color-red-500);
413
+ --form-label-required-marginLeft: var(--spacing-1);
414
+
415
+ /* Form Input Tokens */
416
+ --form-input-small-height: var(--dimension-34px);
417
+ --form-input-small-fontSize: var(--typography-fontSize-sm);
418
+ --form-input-small-padding: var(--spacing-2) var(--spacing-3);
419
+ --form-input-small-borderRadius: var(--radius-sm);
420
+
421
+ --form-input-medium-height: var(--dimension-45px);
422
+ --form-input-medium-fontSize: var(--typography-fontSize-base);
423
+ --form-input-medium-padding: var(--spacing-3) var(--spacing-4);
424
+ --form-input-medium-borderRadius: var(--radius-md);
425
+
426
+ --form-input-large-height: var(--dimension-55px);
427
+ --form-input-large-fontSize: var(--typography-fontSize-lg);
428
+ --form-input-large-padding: var(--spacing-4) var(--spacing-5);
429
+ --form-input-large-borderRadius: var(--radius-lg);
430
+
431
+ --form-input-default-backgroundColor: var(--color-neutral-0);
432
+ --form-input-default-borderColor: var(--color-neutral-300);
433
+ --form-input-default-borderWidth: var(--border-width-1);
434
+ --form-input-default-color: var(--color-neutral-900);
435
+ --form-input-default-fontFamily: var(--typography-fontFamily-sans);
436
+ --form-input-default-lineHeight: var(--typography-lineHeight-normal);
437
+
438
+ --form-input-focus-borderColor: var(--color-blue-500);
439
+ --form-input-focus-boxShadow: var(--shadow-focus-outline-blue);
440
+
441
+ --form-input-error-backgroundColor: var(--color-red-50);
442
+ --form-input-error-borderColor: var(--color-red-500);
443
+ --form-input-error-placeholderColor: var(--color-red-400);
444
+
445
+ --form-input-success-backgroundColor: var(--color-green-50);
446
+ --form-input-success-borderColor: var(--color-green-500);
447
+ --form-input-success-placeholderColor: var(--color-green-400);
448
+
449
+ --form-input-disabled-backgroundColor: var(--color-neutral-100);
450
+ --form-input-disabled-borderColor: var(--color-neutral-300);
451
+ --form-input-disabled-color: var(--color-neutral-500);
452
+ --form-input-disabled-placeholderColor: var(--color-neutral-400);
453
+
454
+ /* Form Help Text Tokens */
455
+ --form-help-text-default-fontSize: var(--typography-fontSize-xs);
456
+ --form-help-text-default-fontWeight: var(--typography-fontWeight-normal);
457
+ --form-help-text-default-lineHeight: var(--typography-lineHeight-normal);
458
+ --form-help-text-default-letterSpacing: var(
459
+ --typography-letterSpacing-normal
460
+ );
461
+ --form-help-text-default-fontFamily: var(--typography-fontFamily-sans);
462
+ --form-help-text-default-color: var(--color-neutral-600);
463
+ --form-help-text-default-marginTop: var(--spacing-1);
464
+
465
+ --form-help-text-error-color: var(--color-red-600);
466
+ --form-help-text-success-color: var(--color-green-600);
467
+
468
+ /* Form Layout Tokens */
469
+ --form-fieldSpacing: var(--spacing-6);
470
+ --form-sectionSpacing: var(--spacing-8);
471
+ --form-labelSpacing: var(--spacing-1);
472
+ --form-helpTextSpacing: var(--spacing-1);
473
+
474
+ /* ================================
475
+ COMPONENT TOKENS - BUTTON
476
+ ================================ */
477
+
478
+ /* Button Size Tokens */
479
+ --button-small-height: var(--dimension-34px);
480
+ --button-small-fontSize: var(--typography-fontSize-sm);
481
+ --button-small-padding: var(--spacing-2) var(--spacing-3);
482
+ --button-small-borderRadius: var(--radius-sm);
483
+
484
+ --button-medium-height: var(--dimension-45px);
485
+ --button-medium-fontSize: var(--typography-fontSize-base);
486
+ --button-medium-padding: var(--spacing-3) var(--spacing-4);
487
+ --button-medium-borderRadius: var(--radius-md);
488
+
489
+ --button-large-height: var(--dimension-55px);
490
+ --button-large-fontSize: var(--typography-fontSize-lg);
491
+ --button-large-padding: var(--spacing-4) var(--spacing-5);
492
+ --button-large-borderRadius: var(--radius-lg);
493
+
494
+ /* Button Default State */
495
+ --button-default-backgroundColor: var(--color-neutral-0);
496
+ --button-default-borderColor: var(--color-neutral-300);
497
+ --button-default-borderWidth: var(--border-width-1);
498
+ --button-default-color: var(--color-neutral-900);
499
+ --button-default-fontFamily: var(--typography-fontFamily-sans);
500
+ --button-default-fontWeight: var(--typography-fontWeight-medium);
501
+ --button-default-lineHeight: var(--typography-lineHeight-normal);
502
+
503
+ /* Button Shared Tokens */
504
+ --button-shared-fontFamily: var(--typography-fontFamily-sans);
505
+ --button-shared-fontWeight: var(--typography-fontWeight-medium);
506
+ --button-shared-lineHeight: var(--typography-lineHeight-tight);
507
+ --button-shared-letterSpacing: var(--typography-letterSpacing-normal);
508
+ --button-shared-borderWidth: var(--border-width-1);
509
+ --button-shared-transition-properties: background-color, border-color, color,
510
+ box-shadow;
511
+ --button-shared-transition-duration: var(--transition-duration-normal);
512
+ --button-shared-transition-easing: var(--transition-easing-smooth);
513
+ --button-shared-focus-outline: var(--focus-outline-traditional);
514
+ --button-shared-focus-outlineOffset: var(--focus-outline-offset);
515
+ --button-shared-focus-boxShadow: var(--focus-outline-primary);
516
+ --button-shared-disabled-opacity: 0.6;
517
+ --button-shared-disabled-cursor: not-allowed;
518
+
519
+ /* Button Size Tokens */
520
+ --button-size-small-padding-vertical: var(--spacing-2);
521
+ --button-size-small-padding-horizontal: var(--spacing-4);
522
+ --button-size-small-fontSize: var(--typography-fontSize-sm);
523
+ --button-size-small-height: var(--dimension-34px);
524
+ --button-size-small-borderRadius: var(--radius-sm);
525
+ --button-size-small-gap: var(--spacing-1);
526
+
527
+ --button-size-medium-padding-vertical: var(--spacing-3);
528
+ --button-size-medium-padding-horizontal: var(--spacing-5);
529
+ --button-size-medium-fontSize: var(--typography-fontSize-base);
530
+ --button-size-medium-height: var(--dimension-45px);
531
+ --button-size-medium-borderRadius: var(--radius-md);
532
+ --button-size-medium-gap: var(--spacing-2);
533
+
534
+ --button-size-large-padding-vertical: var(--spacing-4);
535
+ --button-size-large-padding-horizontal: var(--spacing-6);
536
+ --button-size-large-fontSize: var(--typography-fontSize-lg);
537
+ --button-size-large-height: var(--dimension-55px);
538
+ --button-size-large-borderRadius: var(--radius-lg);
539
+ --button-size-large-gap: var(--spacing-2);
540
+
541
+ /* Button Primary State */
542
+ --button-primary-background-default: var(--color-blue-500);
543
+ --button-primary-text-default: var(--color-neutral-0);
544
+ --button-primary-border-default: var(--color-blue-500);
545
+ --button-primary-background-hover: var(--color-blue-600);
546
+ --button-primary-border-hover: var(--color-blue-600);
547
+ --button-primary-background-active: var(--color-blue-700);
548
+ --button-primary-border-active: var(--color-blue-700);
549
+ --button-primary-border-focus: var(--color-blue-500);
550
+ --button-primary-background-disabled: var(--color-neutral-300);
551
+ --button-primary-text-disabled: var(--color-neutral-500);
552
+ --button-primary-border-disabled: var(--color-neutral-300);
553
+
554
+ /* Button Secondary State */
555
+ --button-secondary-background-default: var(--color-neutral-950);
556
+ --button-secondary-text-default: var(--color-neutral-0);
557
+ --button-secondary-border-default: var(--color-neutral-950);
558
+ --button-secondary-background-hover: var(--color-neutral-900);
559
+ --button-secondary-text-hover: var(--color-neutral-0);
560
+ --button-secondary-border-hover: var(--color-neutral-900);
561
+ --button-secondary-background-active: var(--color-neutral-800);
562
+ --button-secondary-text-active: var(--color-neutral-0);
563
+ --button-secondary-border-active: var(--color-neutral-800);
564
+ --button-secondary-border-focus: var(--color-neutral-950);
565
+ --button-secondary-background-disabled: var(--color-neutral-300);
566
+ --button-secondary-text-disabled: var(--color-neutral-500);
567
+ --button-secondary-border-disabled: var(--color-neutral-300);
568
+
569
+ /* Button Tertiary Primary State */
570
+ --button-tertiaryPrimary-background-default: transparent;
571
+ --button-tertiaryPrimary-text-default: var(--color-blue-500);
572
+ --button-tertiaryPrimary-border-default: var(--color-blue-500);
573
+ --button-tertiaryPrimary-borderWidth: var(--border-width-2);
574
+ --button-tertiaryPrimary-background-hover: var(--color-blue-50);
575
+ --button-tertiaryPrimary-text-hover: var(--color-blue-500);
576
+ --button-tertiaryPrimary-border-hover: var(--color-blue-500);
577
+ --button-tertiaryPrimary-background-active: var(--color-blue-500);
578
+ --button-tertiaryPrimary-text-active: var(--color-neutral-0);
579
+ --button-tertiaryPrimary-border-active: var(--color-blue-500);
580
+ --button-tertiaryPrimary-border-focus: var(--color-blue-500);
581
+ --button-tertiaryPrimary-background-disabled: transparent;
582
+ --button-tertiaryPrimary-text-disabled: var(--color-neutral-400);
583
+ --button-tertiaryPrimary-border-disabled: var(--color-neutral-300);
584
+
585
+ /* Button Tertiary Secondary State */
586
+ --button-tertiarySecondary-background-default: transparent;
587
+ --button-tertiarySecondary-text-default: var(--color-neutral-900);
588
+ --button-tertiarySecondary-border-default: var(--color-neutral-900);
589
+ --button-tertiarySecondary-borderWidth: var(--border-width-2);
590
+ --button-tertiarySecondary-background-hover: var(--color-neutral-100);
591
+ --button-tertiarySecondary-text-hover: var(--color-neutral-900);
592
+ --button-tertiarySecondary-border-hover: var(--color-neutral-900);
593
+ --button-tertiarySecondary-background-active: var(--color-neutral-900);
594
+ --button-tertiarySecondary-text-active: var(--color-neutral-0);
595
+ --button-tertiarySecondary-border-active: var(--color-neutral-900);
596
+ --button-tertiarySecondary-border-focus: var(--color-neutral-900);
597
+ --button-tertiarySecondary-background-disabled: transparent;
598
+ --button-tertiarySecondary-text-disabled: var(--color-neutral-400);
599
+ --button-tertiarySecondary-border-disabled: var(--color-neutral-300);
600
+
601
+ /* Button CTA State */
602
+ --button-cta-background-default: var(--color-red-500);
603
+ --button-cta-text-default: var(--color-neutral-0);
604
+ --button-cta-border-default: var(--color-red-500);
605
+ --button-cta-background-hover: var(--color-red-600);
606
+ --button-cta-border-hover: var(--color-red-600);
607
+ --button-cta-background-active: var(--color-red-700);
608
+ --button-cta-border-active: var(--color-red-700);
609
+ --button-cta-border-focus: var(--color-red-500);
610
+ --button-cta-background-disabled: var(--color-neutral-300);
611
+ --button-cta-text-disabled: var(--color-neutral-500);
612
+ --button-cta-border-disabled: var(--color-neutral-300);
613
+
614
+ /* Button Empty State */
615
+ --button-empty-background-default: var(--color-neutral-200);
616
+ --button-empty-text-default: transparent;
617
+ --button-empty-border-default: var(--color-neutral-200);
618
+
619
+ /* Button Disabled State */
620
+ --button-disabled-backgroundColor: var(--color-neutral-100);
621
+ --button-disabled-borderColor: var(--color-neutral-300);
622
+ --button-disabled-color: var(--color-neutral-500);
623
+
624
+ /* Button Focus State */
625
+ --button-focus-boxShadow: var(--shadow-focus-outline-blue);
626
+
627
+ /* ================================
628
+ COMPONENT TOKENS - ANNOTATION
629
+ ================================ */
630
+
631
+ /* Footnote Tokens */
632
+ --footnote-reference-fontSize: 0.75em;
633
+ --footnote-reference-fontWeight: var(--typography-fontWeight-normal);
634
+ --footnote-reference-lineHeight: 1;
635
+ --footnote-reference-verticalAlign: super;
636
+ --footnote-reference-color: inherit;
637
+ --footnote-reference-marginLeft: 0.1em;
638
+ --footnote-reference-marginRight: 0.2em;
639
+
640
+ /* Citation Tokens */
641
+ --citation-reference-fontSize: inherit;
642
+ --citation-reference-fontWeight: var(--typography-fontWeight-normal);
643
+ --citation-reference-lineHeight: inherit;
644
+ --citation-reference-color: var(--color-blue-600);
645
+ --citation-reference-textDecoration: underline;
646
+ --citation-reference-hover-color: var(--color-blue-700);
647
+ --citation-reference-hover-textDecoration: none;
648
+
649
+ /* Mathematical Notation Tokens */
650
+ --math-superscript-fontSize: 0.75em;
651
+ --math-superscript-fontWeight: var(--typography-fontWeight-normal);
652
+ --math-superscript-lineHeight: 1;
653
+ --math-superscript-verticalAlign: super;
654
+ --math-superscript-marginLeft: 0.05em;
655
+
656
+ --math-subscript-fontSize: 0.75em;
657
+ --math-subscript-fontWeight: var(--typography-fontWeight-normal);
658
+ --math-subscript-lineHeight: 1;
659
+ --math-subscript-verticalAlign: sub;
660
+ --math-subscript-marginLeft: 0.05em;
661
+
662
+ /* ================================
663
+ COMPONENT TOKENS - ICON
664
+ ================================ */
665
+
666
+ /* Icon Size Tokens */
667
+ --icon-xs-size: var(--dimension-12px);
668
+ --icon-sm-size: var(--dimension-16px);
669
+ --icon-md-size: var(--dimension-20px);
670
+ --icon-lg-size: var(--dimension-24px);
671
+ --icon-xl-size: var(--dimension-32px);
672
+ --icon-2xl-size: var(--dimension-48px);
673
+ --icon-3xl-size: var(--dimension-64px);
674
+
675
+ /* Icon Context Tokens */
676
+ --icon-button-small-size: var(--dimension-16px);
677
+ --icon-button-medium-size: var(--dimension-20px);
678
+ --icon-button-large-size: var(--dimension-24px);
679
+
680
+ --icon-form-small-size: var(--dimension-16px);
681
+ --icon-form-medium-size: var(--dimension-20px);
682
+ --icon-form-large-size: var(--dimension-24px);
683
+
684
+ /* Icon State Tokens */
685
+ --icon-default-color: var(--color-neutral-600);
686
+ --icon-hover-color: var(--color-neutral-700);
687
+ --icon-active-color: var(--color-neutral-800);
688
+ --icon-disabled-color: var(--color-neutral-400);
689
+
690
+ --icon-primary-color: var(--color-blue-500);
691
+ --icon-primary-hover-color: var(--color-blue-600);
692
+ --icon-primary-active-color: var(--color-blue-700);
693
+
694
+ --icon-success-color: var(--color-green-500);
695
+ --icon-warning-color: var(--color-yellow-500);
696
+ --icon-error-color: var(--color-red-500);
697
+
698
+ /* ================================
699
+ CORE SPACING TOKENS
700
+ ================================ */
701
+
702
+ --spacing-0: 0;
703
+ --spacing-1: 0.0625rem; /* 1px */
704
+ --spacing-2: 0.125rem; /* 2px */
705
+ --spacing-4: 0.25rem; /* 4px */
706
+ --spacing-6: 0.375rem; /* 6px */
707
+ --spacing-8: 0.5rem; /* 8px */
708
+ --spacing-10: 0.625rem; /* 10px */
709
+ --spacing-12: 0.75rem; /* 12px */
710
+ --spacing-14: 0.875rem; /* 14px */
711
+ --spacing-16: 1rem; /* 16px */
712
+ --spacing-18: 1.125rem; /* 18px */
713
+ --spacing-20: 1.25rem; /* 20px */
714
+ --spacing-22: 1.375rem; /* 22px */
715
+ --spacing-24: 1.5rem; /* 24px */
716
+ --spacing-28: 1.75rem; /* 28px */
717
+ --spacing-32: 2rem; /* 32px */
718
+ --spacing-36: 2.25rem; /* 36px */
719
+ --spacing-40: 2.5rem; /* 40px */
720
+ --spacing-44: 2.75rem; /* 44px */
721
+ --spacing-48: 3rem; /* 48px */
722
+ --spacing-52: 3.25rem; /* 52px */
723
+ --spacing-56: 3.5rem; /* 56px */
724
+ --spacing-64: 4rem; /* 64px */
725
+ --spacing-80: 5rem; /* 80px */
726
+ --spacing-96: 6rem; /* 96px */
727
+ --spacing-112: 7rem; /* 112px */
728
+ --spacing-128: 8rem; /* 128px */
729
+
72
730
  /* =====================
73
- DISPLAY FONT SIZES
731
+ OLD VALUES -------------------------------------------------------------------------------
74
732
  ====================== */
75
733
 
76
734
  /* Display default */
@@ -92,137 +750,129 @@ export const tokens = css`
92
750
  /* Heading default */
93
751
  --heading-xxsmall: 18px; /* 23.994px = 1.5rem */
94
752
  --heading-xsmall: 20px; /* 26.66px = 1.667rem */
95
- --heading-small: 24px; /* 31.992px = 2rem */
753
+ --typography-heading-h4-fontSize: 24px; /* 31.992px = 2rem */
96
754
  --heading-medium: 28px; /* 37.324px = 2.333rem */
97
- --heading-large: 32px; /* 42.656px = 2.667rem */
755
+ --typography-fontSize-3xl: 32px; /* 42.656px = 2.667rem */
98
756
  --heading-xlarge: 36px; /* 47.988px = 2.999rem */
99
757
  --heading-xxlarge: 40px; /* 53.32px = 3.333rem */
100
758
 
101
759
  /* Body default */
102
760
  --body-small: 13px; /* 17.329px = 1.083rem */
103
- --body-medium: 14px; /* 18.662px = 1.167rem */
104
- --body-large: 16px; /* 21.328px = 1.333rem */
761
+ --typography-body-small-fontSize: 14px; /* 18.662px = 1.167rem */
762
+ --typography-body-regular-fontSize: 16px; /* 21.328px = 1.333rem */
105
763
  --body-xlarge: 18px; /* 23.994px = 1.5rem */
106
764
 
107
765
  /* Caption default */
108
- --caption-small: 11px; /* 14.663px = 0.917rem */
109
- --caption-large: 12px; /* 15.996px = 1rem */
110
-
111
-
112
-
766
+ --typography-label-extra-small-fontSize: 11px; /* 14.663px = 0.917rem */
767
+ --typography-label-small-fontSize: 12px; /* 15.996px = 1rem */
113
768
 
114
769
  /* Display Default */
115
- --display-xlarge-line-height: 1.1; /* For 60px */
116
- --display-medium-line-height: 1.15; /* For 52px */
770
+ --display-xlarge-line-height: 1.1; /* For 60px */
771
+ --display-medium-line-height: 1.15; /* For 52px */
117
772
 
118
773
  /* Display Mobile */
119
- --display-xlarge-mobile-line-height: 1.15; /* For 44px */
120
- --display-medium-mobile-line-height: 1.2; /* For 38px */
774
+ --display-xlarge-mobile-line-height: 1.15; /* For 44px */
775
+ --display-medium-mobile-line-height: 1.2; /* For 38px */
121
776
 
122
777
  /* Heading */
123
- --heading-xlarge-line-height: 1.2; /* For 36px */
124
- --heading-small-line-height: 1.3; /* For 24px */
778
+ --heading-xlarge-line-height: 1.2; /* For 36px */
779
+ --typography-heading-h4-fontSize-line-height: 1.3; /* For 24px */
125
780
 
126
781
  /* Body */
127
- --body-large-line-height: 1.5; /* For 16px */
782
+ --typography-body-regular-fontSize-line-height: 1.5; /* For 16px */
128
783
 
129
784
  /* Caption */
130
- --caption-large-line-height: 1.35; /* For 12px */
131
- /* =====================
132
- PADDING SIZES
133
- ====================== */
785
+ --typography-label-small-fontSize-line-height: 1.35; /* For 12px */
786
+
787
+ /* --spacing-0: 0;
788
+ --spacing-1: 1px;
789
+ --spacing-2: 2px;
790
+ --spacing-4: 4px;
791
+ --spacing-6: 6px;
792
+ --spacing-8: 8px;
793
+ --spacing-10: 10px;
794
+ --spacing-12: 12px;
795
+ --spacing-14: 14px;
796
+ --spacing-16: 16px;
797
+ --spacing-18: 18px;
798
+ --spacing-20: 20px;
799
+ --spacing-22: 22px;
800
+ --spacing-24: 24px;
801
+ --spacing-32: 32px;
802
+ --spacing-36: 36px;
803
+ --spacing-40: 40px;
804
+ --spacing-44: 44px;
805
+ --spacing-52: 52px;
806
+ --spacing-64: 64px;
807
+ --spacing-full: 99999999999999999999;
808
+ */
134
809
 
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
810
  /* Spacing Tokens
160
811
  -----------------------------------------------*/
161
812
  /* Base spacing tokens - Based on 4px grid */
162
813
  --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
-
814
+ --space-4xs: 0.125rem; /* 2px */
815
+ --space-3xs: 0.25rem; /* 4px */
816
+ --space-2xs: 0.5rem; /* 8px */
817
+ --space-xs: 0.75rem; /* 12px */
818
+ --space-sm: 1rem; /* 16px */
819
+ --space-md: 1.5rem; /* 24px */
820
+ --space-lg: 2rem; /* 32px */
821
+ --space-xl: 2.5rem; /* 40px */
822
+ --space-2xl: 3rem; /* 48px */
823
+ --space-3xl: 4rem; /* 64px */
824
+ --space-4xl: 6rem; /* 96px */
825
+ --space-5xl: 8rem; /* 128px */
826
+
176
827
  /* Semantic Padding Tokens */
177
828
  --padding-button: var(--space-xs) var(--space-md);
178
829
  --padding-input: var(--space-xs);
179
830
  --padding-card: var(--space-md);
180
831
  --padding-card-sm: var(--space-sm);
181
832
  --padding-card-lg: var(--space-lg);
182
-
833
+
183
834
  --padding-section: var(--space-3xl) 0;
184
835
  --padding-section-sm: var(--space-2xl) 0;
185
836
  --padding-section-lg: var(--space-4xl) 0;
186
-
837
+
187
838
  /* Container and Layout Tokens */
188
839
  --container-padding: var(--space-md);
189
840
  --container-padding-sm: var(--space-sm);
190
841
  --container-padding-lg: var(--space-lg);
191
-
842
+
192
843
  /* Inset (Padding All Sides) Tokens */
193
844
  --inset-xs: var(--space-xs);
194
845
  --inset-sm: var(--space-sm);
195
846
  --inset-md: var(--space-md);
196
847
  --inset-lg: var(--space-lg);
197
-
848
+
198
849
  /* Stack (Vertical Spacing) Tokens */
199
850
  --stack-xs: var(--space-xs);
200
851
  --stack-sm: var(--space-sm);
201
852
  --stack-md: var(--space-md);
202
853
  --stack-lg: var(--space-lg);
203
854
  --stack-xl: var(--space-xl);
204
-
855
+
205
856
  /* Inline (Horizontal Spacing) Tokens */
206
857
  --inline-xs: var(--space-xs);
207
858
  --inline-sm: var(--space-sm);
208
859
  --inline-md: var(--space-md);
209
860
  --inline-lg: var(--space-lg);
210
-
861
+
211
862
  /* Accessibility Spacing Tokens
212
863
  -----------------------------------------------*/
213
864
  /* Touch Target Sizes - WCAG 2.1 Success Criterion 2.5.5 (AAA) and 2.5.8 (AA) */
214
865
  --touch-target-size: 44px; /* Minimum touch target size (44px × 44px) */
215
866
  --touch-target-spacing: 8px; /* Minimum space between touch targets */
216
-
867
+
217
868
  /* Readable Line Lengths - For optimal readability */
218
869
  --content-width-readable: 70ch; /* Approximately 70 characters per line */
219
870
  --content-width-max: 1200px; /* Maximum overall content width */
220
871
 
221
-
222
872
  /** GRID TOKENS
223
- */
873
+ */
224
874
  /* Grid container max widths */
225
- --grid-container-max-xs: 100%; /* mobile full width */
875
+ --grid-container-max-xs: 100%; /* mobile full width */
226
876
  --grid-container-max-sm: 540px;
227
877
  --grid-container-max-md: 720px;
228
878
  --grid-container-max-lg: 960px;
@@ -251,12 +901,145 @@ export const tokens = css`
251
901
  --breakpoint-lg: 992px;
252
902
  --breakpoint-xl: 1200px;
253
903
  --breakpoint-xxl: 1400px;
904
+ /* =====================
905
+ FONT-FACE DEFINITIONS
906
+ ====================== */
907
+
908
+ @font-face {
909
+ font-family: "IBM Plex Mono";
910
+ font-style: normal;
911
+ font-weight: 700;
912
+ src: url("/assets/fonts/IBMPlexMono-Bold.woff2") format("woff2");
913
+ }
914
+ @font-face {
915
+ font-family: "IBM Plex Mono";
916
+ font-style: normal;
917
+ font-weight: 700;
918
+ src: url("/assets/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
919
+ }
920
+
921
+ @font-face {
922
+ font-family: "IBM Plex Mono";
923
+ font-style: italic;
924
+ font-weight: 300;
925
+ src: url("/assets/fonts/IBMPlexMono-Italic.woff2") format("woff2");
926
+ }
927
+ @font-face {
928
+ font-family: "IBM Plex Mono";
929
+ font-style: normal;
930
+ font-weight: 300;
931
+ src: url("/assets/fonts/IBMPlexMono-Light.woff2") format("woff2");
932
+ }
933
+ @font-face {
934
+ font-family: "IBM Plex Mono";
935
+ font-style: italic;
936
+ font-weight: 300;
937
+ src: url("/assets/fonts/IBMPlexMono-LightItalic.woff2") format("woff2");
938
+ }
939
+
940
+ @font-face {
941
+ font-family: "IBM Plex Mono";
942
+ font-style: italic;
943
+ font-weight: 500;
944
+ src: url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
945
+ }
946
+ @font-face {
947
+ font-family: "IBM Plex Mono";
948
+ font-style: italic;
949
+ font-weight: 500;
950
+ src: url("/assets/fonts/IBMPlexMono-MediumItalic.woff2") format("woff2");
951
+ }
952
+ @font-face {
953
+ font-family: "IBM Plex Mono";
954
+ font-style: italic;
955
+ font-weight: 400;
956
+ src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
957
+ }
958
+ @font-face {
959
+ font-family: "IBM Plex Mono";
960
+ font-style: italic;
961
+ font-weight: 600;
962
+ src: url("/assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
963
+ }
964
+ @font-face {
965
+ font-family: "IBM Plex Mono";
966
+ font-style: italic;
967
+ font-weight: 600;
968
+ src: url("/assets/fonts/IBMPlexMono-SemiBoldItalic.woff2") format("woff2");
969
+ }
970
+
971
+ /*
972
+ IBM PLEX SANS
973
+ */
974
+
975
+ @font-face {
976
+ font-family: "IBMPlexSans";
977
+ font-style: normal;
978
+ font-weight: 700;
979
+ src: url("/assets/fonts/IBMPlexSans-Bold.woff2") format("woff2");
980
+ }
981
+ @font-face {
982
+ font-family: "IBMPlexSans";
983
+ font-style: normal;
984
+ font-weight: 700;
985
+ src: url("/assets/fonts/IBMPlexSans-BoldItalic.woff2") format("woff2");
986
+ }
987
+
988
+ @font-face {
989
+ font-family: "IBMPlexSans";
990
+ font-style: italic;
991
+ font-weight: 300;
992
+ src: url("/assets/fonts/IBMPlexSans-Italic.woff2") format("woff2");
993
+ }
994
+ @font-face {
995
+ font-family: "IBMPlexSans";
996
+ font-style: normal;
997
+ font-weight: 300;
998
+ src: url("/assets/fonts/IBMPlexSans-Light.woff2") format("woff2");
999
+ }
1000
+ @font-face {
1001
+ font-family: "IBMPlexSans";
1002
+ font-style: italic;
1003
+ font-weight: 300;
1004
+ src: url("/assets/fonts/IBMPlexSans-LightItalic.woff2") format("woff2");
1005
+ }
1006
+
1007
+ @font-face {
1008
+ font-family: "IBMPlexSans";
1009
+ font-style: italic;
1010
+ font-weight: 500;
1011
+ src: url("/assets/fonts/IBMPlexSans-Medium.woff2") format("woff2");
1012
+ }
1013
+ @font-face {
1014
+ font-family: "IBMPlexSans";
1015
+ font-style: italic;
1016
+ font-weight: 500;
1017
+ src: url("/assets/fonts/IBMPlexSans-MediumItalic.woff2") format("woff2");
1018
+ }
1019
+ @font-face {
1020
+ font-family: "IBMPlexSans";
1021
+ font-style: italic;
1022
+ font-weight: 400;
1023
+ src: url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
1024
+ }
1025
+ @font-face {
1026
+ font-family: "IBMPlexSans";
1027
+ font-style: italic;
1028
+ font-weight: 600;
1029
+ src: url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
1030
+ }
1031
+ @font-face {
1032
+ font-family: "IBMPlexSans";
1033
+ font-style: italic;
1034
+ font-weight: 600;
1035
+ src: url("/assets/fonts/IBMPlexSans-SemiBoldItalic.woff2") format("woff2");
1036
+ }
254
1037
 
255
1038
  /* =====================
256
1039
  FONT TOKENS
257
1040
  ====================== */
258
1041
  /* IBM Plex Mono */
259
- --font-family-mono: 'IBM Plex Mono', monospace;
1042
+ --font-family-mono: "IBM Plex Mono", monospace;
260
1043
  --font-weight-mono-light: 300;
261
1044
  --font-weight-mono-regular: 400;
262
1045
  --font-weight-mono-medium: 500;
@@ -267,12 +1050,12 @@ export const tokens = css`
267
1050
  --font-style-mono-italic: italic;
268
1051
 
269
1052
  /* IBMPlexSans */
270
- --font-family-sans: 'IBM Plex Sans', sans-serif;
1053
+ --typography-fontFamily-sans: "IBM Plex Sans", sans-serif;
271
1054
  --font-weight-sans-light: 300;
272
- --font-weight-sans-regular: 400;
1055
+ --typography-body-large-fontWeight: 400;
273
1056
  --font-weight-sans-medium: 500;
274
- --font-weight-sans-semibold: 600;
275
- --font-weight-sans-bold: 700;
1057
+ --typography-fontWeight-semibold: 600;
1058
+ --typography-fontWeight-bold: 700;
276
1059
 
277
1060
  --font-style-sans-normal: normal;
278
1061
  --font-style-sans-italic: italic;
/package/src/components/{Input → input}/index.js RENAMED
File without changes
/package/src/components/{Input → input}/input.css.js RENAMED
File without changes