@denisluyo/theme-english-product 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +23 -0
  3. package/dist/css/tokens.css +551 -0
  4. package/dist/tokens.d.ts +16 -0
  5. package/dist/tokens.js +19445 -0
  6. package/dist/tokens.json +9876 -0
  7. package/package.json +30 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Denis Luyo
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,23 @@
1
+ # @denisluyo/theme-english-product
2
+
3
+ Tema oficial de English Product. Distribuye tokens de diseño como JavaScript, TypeScript, JSON y variables CSS.
4
+
5
+ ## Instalación
6
+
7
+ ```bash
8
+ npm install @denisluyo/theme-english-product
9
+ ```
10
+
11
+ ## Uso en CSS
12
+
13
+ ```ts
14
+ import '@denisluyo/theme-english-product/css';
15
+ ```
16
+
17
+ ## Uso programático
18
+
19
+ ```ts
20
+ import { tokens } from '@denisluyo/theme-english-product';
21
+ ```
22
+
23
+ También está disponible el export JSON mediante `@denisluyo/theme-english-product/json`.
package/dist/css/tokens.css ADDED
@@ -0,0 +1,551 @@
1
+ /* Generado desde packages/theme-english-product/src. No editar manualmente. */
2
+ :root {
3
+ --ds-primitive-color-blue-blue-100: #BCE3FB;
4
+ --ds-primitive-color-blue-blue-200: #8FCEFA;
5
+ --ds-primitive-color-blue-blue-300: #60B9FA;
6
+ --ds-primitive-color-blue-blue-400: #31A1FC;
7
+ --ds-primitive-color-blue-blue-50: #E7F5FD;
8
+ --ds-primitive-color-blue-blue-500: #0088FF;
9
+ --ds-primitive-color-blue-blue-600: #007AE6;
10
+ --ds-primitive-color-blue-blue-700: #006DCC;
11
+ --ds-primitive-color-blue-blue-800: #005FB3;
12
+ --ds-primitive-color-blue-blue-900: #005299;
13
+ --ds-primitive-color-brand-brand-100: #E5DFFD;
14
+ --ds-primitive-color-brand-brand-200: #CBBEFA;
15
+ --ds-primitive-color-brand-brand-300: #B19EF8;
16
+ --ds-primitive-color-brand-brand-400: #977DF5;
17
+ --ds-primitive-color-brand-brand-500: #7D5DF3;
18
+ --ds-primitive-color-brand-brand-600: #644AC2;
19
+ --ds-primitive-color-brand-brand-700: #4B3892;
20
+ --ds-primitive-color-brand-brand-800: #322561;
21
+ --ds-primitive-color-brand-brand-900: #191331;
22
+ --ds-primitive-color-brand-comp-1: #F3C45D;
23
+ --ds-primitive-color-brand-comp-2: #AA8941;
24
+ --ds-primitive-color-green-green-100: #BBF8C5;
25
+ --ds-primitive-color-green-green-200: #8EF4A0;
26
+ --ds-primitive-color-green-green-300: #60F27C;
27
+ --ds-primitive-color-green-green-400: #31F25A;
28
+ --ds-primitive-color-green-green-50: #E7FCEA;
29
+ --ds-primitive-color-green-green-500: #00F238;
30
+ --ds-primitive-color-green-green-600: #00DA32;
31
+ --ds-primitive-color-green-green-700: #00C22D;
32
+ --ds-primitive-color-green-green-800: #00A927;
33
+ --ds-primitive-color-green-green-900: #009122;
34
+ --ds-primitive-color-neutral-0: #FFFFFF;
35
+ --ds-primitive-color-neutral-100: #FAFAFA;
36
+ --ds-primitive-color-neutral-200: #EDEDED;
37
+ --ds-primitive-color-neutral-300: #E1E1E1;
38
+ --ds-primitive-color-neutral-400: #D3D3D3;
39
+ --ds-primitive-color-neutral-500: #B3B3B3;
40
+ --ds-primitive-color-neutral-600: #A0A0A0;
41
+ --ds-primitive-color-neutral-700: #6C6C6C;
42
+ --ds-primitive-color-neutral-800: #404040;
43
+ --ds-primitive-color-neutral-900: #000000;
44
+ --ds-primitive-color-opacity-10: rgba(0, 0, 0, 0.10000000149011612);
45
+ --ds-primitive-color-opacity-20: rgba(0, 0, 0, 0.20000000298023224);
46
+ --ds-primitive-color-opacity-30: rgba(0, 0, 0, 0.30000001192092896);
47
+ --ds-primitive-color-opacity-40: rgba(0, 0, 0, 0.4000000059604645);
48
+ --ds-primitive-color-opacity-50: rgba(0, 0, 0, 0.5);
49
+ --ds-primitive-color-opacity-60: rgba(0, 0, 0, 0.6000000238418579);
50
+ --ds-primitive-color-opacity-70: rgba(0, 0, 0, 0.699999988079071);
51
+ --ds-primitive-color-opacity-80: rgba(0, 0, 0, 0.800000011920929);
52
+ --ds-primitive-color-opacity-90: rgba(0, 0, 0, 0.8999999761581421);
53
+ --ds-primitive-color-red-red-100: #F8C2C3;
54
+ --ds-primitive-color-red-red-200: #F59999;
55
+ --ds-primitive-color-red-red-300: #F3716F;
56
+ --ds-primitive-color-red-red-400: #F24A44;
57
+ --ds-primitive-color-red-red-50: #FCE9EA;
58
+ --ds-primitive-color-red-red-500: #F22418;
59
+ --ds-primitive-color-red-red-600: #DA2016;
60
+ --ds-primitive-color-red-red-700: #C21D13;
61
+ --ds-primitive-color-red-red-800: #A91911;
62
+ --ds-primitive-color-red-red-900: #91160E;
63
+ --ds-primitive-color-yellow-yellow-100: #F8DABB;
64
+ --ds-primitive-color-yellow-yellow-200: #F4C48E;
65
+ --ds-primitive-color-yellow-yellow-300: #F2B060;
66
+ --ds-primitive-color-yellow-yellow-400: #F29E31;
67
+ --ds-primitive-color-yellow-yellow-50: #FCF1E7;
68
+ --ds-primitive-color-yellow-yellow-500: #F28E00;
69
+ --ds-primitive-color-yellow-yellow-600: #DA8000;
70
+ --ds-primitive-color-yellow-yellow-700: #C27200;
71
+ --ds-primitive-color-yellow-yellow-800: #A96300;
72
+ --ds-primitive-color-yellow-yellow-900: #915500;
73
+ --ds-primitive-typography-family-inter: Inter;
74
+ --ds-primitive-typography-letter-spacing-m: 0.5px;
75
+ --ds-primitive-typography-letter-spacing-none: 0px;
76
+ --ds-primitive-typography-letter-spacing-s: -0.5px;
77
+ --ds-primitive-typography-letter-spacing-xs: -1px;
78
+ --ds-primitive-typography-line-height-0: 44px;
79
+ --ds-primitive-typography-line-height-1: 36px;
80
+ --ds-primitive-typography-line-height-10: 10px;
81
+ --ds-primitive-typography-line-height-11: 11px;
82
+ --ds-primitive-typography-line-height-12: 12px;
83
+ --ds-primitive-typography-line-height-14: 14px;
84
+ --ds-primitive-typography-line-height-16: 16px;
85
+ --ds-primitive-typography-line-height-18: 18px;
86
+ --ds-primitive-typography-line-height-2: 32px;
87
+ --ds-primitive-typography-line-height-20: 20px;
88
+ --ds-primitive-typography-line-height-22: 22px;
89
+ --ds-primitive-typography-line-height-24: 24px;
90
+ --ds-primitive-typography-line-height-26: 26px;
91
+ --ds-primitive-typography-line-height-28: 28px;
92
+ --ds-primitive-typography-line-height-3: 28px;
93
+ --ds-primitive-typography-line-height-32: 32px;
94
+ --ds-primitive-typography-line-height-36: 36px;
95
+ --ds-primitive-typography-line-height-4: 26px;
96
+ --ds-primitive-typography-line-height-40: 40px;
97
+ --ds-primitive-typography-line-height-44: 44px;
98
+ --ds-primitive-typography-line-height-48: 48px;
99
+ --ds-primitive-typography-line-height-5: 24px;
100
+ --ds-primitive-typography-line-height-56: 56px;
101
+ --ds-primitive-typography-line-height-6: 22px;
102
+ --ds-primitive-typography-line-height-64: 64px;
103
+ --ds-primitive-typography-line-height-7: 20px;
104
+ --ds-primitive-typography-line-height-8: 16px;
105
+ --ds-primitive-typography-line-height-9: 14px;
106
+ --ds-primitive-typography-size-10: 10px;
107
+ --ds-primitive-typography-size-12: 12px;
108
+ --ds-primitive-typography-size-14: 14px;
109
+ --ds-primitive-typography-size-16: 16px;
110
+ --ds-primitive-typography-size-18: 18px;
111
+ --ds-primitive-typography-size-20: 20px;
112
+ --ds-primitive-typography-size-24: 24px;
113
+ --ds-primitive-typography-size-28: 28px;
114
+ --ds-primitive-typography-size-32: 32px;
115
+ --ds-primitive-typography-size-36: 36px;
116
+ --ds-primitive-typography-size-40: 40px;
117
+ --ds-primitive-typography-size-48: 48px;
118
+ --ds-primitive-typography-size-56: 56px;
119
+ --ds-primitive-typography-size-6: 6px;
120
+ --ds-primitive-typography-size-64: 64px;
121
+ --ds-primitive-typography-size-8: 8px;
122
+ --ds-primitive-typography-weight-regular: 400;
123
+ --ds-primitive-typography-weight-semi-bold: 600;
124
+ --ds-primitive-units-primitive-units-0: 0;
125
+ --ds-primitive-units-primitive-units-10: 10;
126
+ --ds-primitive-units-primitive-units-104: 104;
127
+ --ds-primitive-units-primitive-units-11: 11;
128
+ --ds-primitive-units-primitive-units-112: 112;
129
+ --ds-primitive-units-primitive-units-12: 12;
130
+ --ds-primitive-units-primitive-units-120: 120;
131
+ --ds-primitive-units-primitive-units-14: 14;
132
+ --ds-primitive-units-primitive-units-16: 16;
133
+ --ds-primitive-units-primitive-units-18: 18;
134
+ --ds-primitive-units-primitive-units-20: 20;
135
+ --ds-primitive-units-primitive-units-22: 22;
136
+ --ds-primitive-units-primitive-units-24: 24;
137
+ --ds-primitive-units-primitive-units-26: 26;
138
+ --ds-primitive-units-primitive-units-28: 28;
139
+ --ds-primitive-units-primitive-units-32: 32;
140
+ --ds-primitive-units-primitive-units-36: 36;
141
+ --ds-primitive-units-primitive-units-4: 4;
142
+ --ds-primitive-units-primitive-units-40: 40;
143
+ --ds-primitive-units-primitive-units-44: 44;
144
+ --ds-primitive-units-primitive-units-48: 48;
145
+ --ds-primitive-units-primitive-units-56: 56;
146
+ --ds-primitive-units-primitive-units-6: 6;
147
+ --ds-primitive-units-primitive-units-64: 64;
148
+ --ds-primitive-units-primitive-units-72: 72;
149
+ --ds-primitive-units-primitive-units-8: 8;
150
+ --ds-primitive-units-primitive-units-80: 80;
151
+ --ds-primitive-units-primitive-units-88: 88;
152
+ --ds-primitive-units-primitive-units-96: 96;
153
+ --ds-semantic-border-width-none: 0px;
154
+ --ds-semantic-border-width-s: 2px;
155
+ --ds-semantic-border-width-xs: 1px;
156
+ --ds-semantic-color-background-brand-chart: #AA8941;
157
+ --ds-semantic-color-background-brand-default: #7D5DF3;
158
+ --ds-semantic-color-background-brand-hover: #977DF5;
159
+ --ds-semantic-color-background-brand-lecture: #F3C45D;
160
+ --ds-semantic-color-background-brand-pressed: #B19EF8;
161
+ --ds-semantic-color-background-feedback-bold-alert: #F28E00;
162
+ --ds-semantic-color-background-feedback-bold-error: #F22418;
163
+ --ds-semantic-color-background-feedback-bold-informative: #0088FF;
164
+ --ds-semantic-color-background-feedback-bold-success: #00F238;
165
+ --ds-semantic-color-background-feedback-light-alert: #FCF1E7;
166
+ --ds-semantic-color-background-feedback-light-error-light: #FCE9EA;
167
+ --ds-semantic-color-background-feedback-light-informative: #E7F5FD;
168
+ --ds-semantic-color-background-feedback-light-success: #E7FCEA;
169
+ --ds-semantic-color-background-feedback-medium-alert: #F4C48E;
170
+ --ds-semantic-color-background-feedback-medium-error-light: #F59999;
171
+ --ds-semantic-color-background-feedback-medium-informative: #8FCEFA;
172
+ --ds-semantic-color-background-feedback-medium-success: #8EF4A0;
173
+ --ds-semantic-color-background-neutral-disabled: #E1E1E1;
174
+ --ds-semantic-color-background-neutral-inverse: #000000;
175
+ --ds-semantic-color-background-neutral-inverse2: #404040;
176
+ --ds-semantic-color-background-neutral-primary: #FAFAFA;
177
+ --ds-semantic-color-background-neutral-secondary: #EDEDED;
178
+ --ds-semantic-color-background-neutral-skeleton: #B3B3B3;
179
+ --ds-semantic-color-background-neutral-terciary: #D3D3D3;
180
+ --ds-semantic-color-border-brand-default: #7D5DF3;
181
+ --ds-semantic-color-border-brand-disabled: #E5DFFD;
182
+ --ds-semantic-color-border-brand-hover: #977DF5;
183
+ --ds-semantic-color-border-brand-pressed: #B19EF8;
184
+ --ds-semantic-color-border-brand-skeleton: #E1E1E1;
185
+ --ds-semantic-color-border-feedback-bold-alert: #F28E00;
186
+ --ds-semantic-color-border-feedback-bold-error: #F22418;
187
+ --ds-semantic-color-border-feedback-bold-informative: #0088FF;
188
+ --ds-semantic-color-border-feedback-bold-success: #00F238;
189
+ --ds-semantic-color-border-neutral-disabled: #E1E1E1;
190
+ --ds-semantic-color-border-neutral-invert: #FFFFFF;
191
+ --ds-semantic-color-border-neutral-primary: #000000;
192
+ --ds-semantic-color-border-neutral-secondary: #404040;
193
+ --ds-semantic-color-border-neutral-tertiary: #B3B3B3;
194
+ --ds-semantic-color-overlay-overlay: rgba(0, 0, 0, 0.4000000059604645);
195
+ --ds-semantic-color-text-brand-disabled: #CBBEFA;
196
+ --ds-semantic-color-text-brand-invert: #191331;
197
+ --ds-semantic-color-text-brand-primary: #7D5DF3;
198
+ --ds-semantic-color-text-brand-secondary: #977DF5;
199
+ --ds-semantic-color-text-brand-tertiary: #B19EF8;
200
+ --ds-semantic-color-text-feedback-bold-alert: #F28E00;
201
+ --ds-semantic-color-text-feedback-bold-error: #F22418;
202
+ --ds-semantic-color-text-feedback-bold-informative: #0088FF;
203
+ --ds-semantic-color-text-feedback-bold-success: #00F238;
204
+ --ds-semantic-color-text-neutral-disabled: #E1E1E1;
205
+ --ds-semantic-color-text-neutral-invert: #FFFFFF;
206
+ --ds-semantic-color-text-neutral-primary: #000000;
207
+ --ds-semantic-color-text-neutral-secondary: #6C6C6C;
208
+ --ds-semantic-color-text-neutral-tertiary: #A0A0A0;
209
+ --ds-semantic-layout-breakpoint-lg-max: 1440px;
210
+ --ds-semantic-layout-breakpoint-lg-min: 1200px;
211
+ --ds-semantic-layout-breakpoint-md-max: 1199px;
212
+ --ds-semantic-layout-breakpoint-md-min: 901px;
213
+ --ds-semantic-layout-breakpoint-sm-max: 900px;
214
+ --ds-semantic-layout-breakpoint-sm-min: 360px;
215
+ --ds-semantic-layout-container-max-width: 1440px;
216
+ --ds-semantic-layout-grid-lg-columns: 12;
217
+ --ds-semantic-layout-grid-lg-gutter: 24px;
218
+ --ds-semantic-layout-grid-lg-margin: 24px;
219
+ --ds-semantic-layout-grid-md-columns: 8;
220
+ --ds-semantic-layout-grid-md-gutter: 24px;
221
+ --ds-semantic-layout-grid-md-margin: 24px;
222
+ --ds-semantic-layout-grid-sm-columns: 4;
223
+ --ds-semantic-layout-grid-sm-gutter: 16px;
224
+ --ds-semantic-layout-grid-sm-margin: 24px;
225
+ --ds-semantic-motion-duration-fast: 120ms;
226
+ --ds-semantic-motion-duration-instant: 0ms;
227
+ --ds-semantic-motion-duration-moderate: 200ms;
228
+ --ds-semantic-motion-duration-slow: 320ms;
229
+ --ds-semantic-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
230
+ --ds-semantic-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
231
+ --ds-semantic-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
232
+ --ds-semantic-shadow-elevation-elevated: 0 8px 32px 0 rgba(0, 0, 0, 0.10);
233
+ --ds-semantic-shadow-elevation-overlay: 0 40px 64px 0 rgba(0, 0, 0, 0.10);
234
+ --ds-semantic-shadow-elevation-panel: 0 4px 24px 0 rgba(0, 0, 0, 0.10);
235
+ --ds-semantic-shadow-elevation-surface: 0 0 8px 0 rgba(0, 0, 0, 0.10);
236
+ --ds-semantic-typography-large-bodies-body1-regular-letter-spacing: 0px;
237
+ --ds-semantic-typography-large-bodies-body1-regular-line-height: 24px;
238
+ --ds-semantic-typography-large-bodies-body1-regular-size: 16px;
239
+ --ds-semantic-typography-large-bodies-body1-regular-weight: 400;
240
+ --ds-semantic-typography-large-bodies-body1-semibold-letter-spacing: 0px;
241
+ --ds-semantic-typography-large-bodies-body1-semibold-line-height: 24px;
242
+ --ds-semantic-typography-large-bodies-body1-semibold-size: 16px;
243
+ --ds-semantic-typography-large-bodies-body1-semibold-weight: 600;
244
+ --ds-semantic-typography-large-bodies-body2-regular-letter-spacing: 0px;
245
+ --ds-semantic-typography-large-bodies-body2-regular-line-height: 20px;
246
+ --ds-semantic-typography-large-bodies-body2-regular-size: 14px;
247
+ --ds-semantic-typography-large-bodies-body2-regular-weight: 400;
248
+ --ds-semantic-typography-large-bodies-body2-semibold-letter-spacing: 0px;
249
+ --ds-semantic-typography-large-bodies-body2-semibold-line-height: 20px;
250
+ --ds-semantic-typography-large-bodies-body2-semibold-size: 14px;
251
+ --ds-semantic-typography-large-bodies-body2-semibold-weight: 600;
252
+ --ds-semantic-typography-large-bodies-body3-regular-letter-spacing: 0px;
253
+ --ds-semantic-typography-large-bodies-body3-regular-line-height: 16px;
254
+ --ds-semantic-typography-large-bodies-body3-regular-size: 12px;
255
+ --ds-semantic-typography-large-bodies-body3-regular-weight: 400;
256
+ --ds-semantic-typography-large-bodies-body3-semibold-letter-spacing: 0px;
257
+ --ds-semantic-typography-large-bodies-body3-semibold-line-height: 16px;
258
+ --ds-semantic-typography-large-bodies-body3-semibold-size: 12px;
259
+ --ds-semantic-typography-large-bodies-body3-semibold-weight: 600;
260
+ --ds-semantic-typography-large-buttons-button1-letter-spacing: 0px;
261
+ --ds-semantic-typography-large-buttons-button1-line-height: 24px;
262
+ --ds-semantic-typography-large-buttons-button1-size: 16px;
263
+ --ds-semantic-typography-large-buttons-button1-weight: 600;
264
+ --ds-semantic-typography-large-buttons-button2-letter-spacing: 0px;
265
+ --ds-semantic-typography-large-buttons-button2-line-height: 20px;
266
+ --ds-semantic-typography-large-buttons-button2-size: 14px;
267
+ --ds-semantic-typography-large-buttons-button2-weight: 600;
268
+ --ds-semantic-typography-large-captions-caption1-semibold-letter-spacing: 0px;
269
+ --ds-semantic-typography-large-captions-caption1-semibold-line-height: 16px;
270
+ --ds-semantic-typography-large-captions-caption1-semibold-size: 14px;
271
+ --ds-semantic-typography-large-captions-caption1-semibold-weight: 400;
272
+ --ds-semantic-typography-large-captions-caption2-semibold-letter-spacing: 0px;
273
+ --ds-semantic-typography-large-captions-caption2-semibold-line-height: 14px;
274
+ --ds-semantic-typography-large-captions-caption2-semibold-size: 12px;
275
+ --ds-semantic-typography-large-captions-caption2-semibold-weight: 600;
276
+ --ds-semantic-typography-large-captions-caption3-semibold-letter-spacing: 0px;
277
+ --ds-semantic-typography-large-captions-caption3-semibold-line-height: 14px;
278
+ --ds-semantic-typography-large-captions-caption3-semibold-size: 10px;
279
+ --ds-semantic-typography-large-captions-caption3-semibold-weight: 600;
280
+ --ds-semantic-typography-large-captions-caption4-semibold-letter-spacing: 0px;
281
+ --ds-semantic-typography-large-captions-caption4-semibold-line-height: 14px;
282
+ --ds-semantic-typography-large-captions-caption4-semibold-size: 8px;
283
+ --ds-semantic-typography-large-captions-caption4-semibold-weight: 600;
284
+ --ds-semantic-typography-large-headings-h1-letter-spacing: 0px;
285
+ --ds-semantic-typography-large-headings-h1-line-height: 64px;
286
+ --ds-semantic-typography-large-headings-h1-size: 48px;
287
+ --ds-semantic-typography-large-headings-h1-weight: 600;
288
+ --ds-semantic-typography-large-headings-h2-letter-spacing: -0.5px;
289
+ --ds-semantic-typography-large-headings-h2-line-height: 56px;
290
+ --ds-semantic-typography-large-headings-h2-size: 36px;
291
+ --ds-semantic-typography-large-headings-h2-weight: 600;
292
+ --ds-semantic-typography-large-headings-h3-letter-spacing: 0px;
293
+ --ds-semantic-typography-large-headings-h3-line-height: 48px;
294
+ --ds-semantic-typography-large-headings-h3-size: 32px;
295
+ --ds-semantic-typography-large-headings-h3-weight: 600;
296
+ --ds-semantic-typography-large-headings-h4-letter-spacing: 0px;
297
+ --ds-semantic-typography-large-headings-h4-line-height: 40px;
298
+ --ds-semantic-typography-large-headings-h4-size: 28px;
299
+ --ds-semantic-typography-large-headings-h4-weight: 600;
300
+ --ds-semantic-typography-large-links-link-l-letter-spacing: 0px;
301
+ --ds-semantic-typography-large-links-link-l-line-height: 24px;
302
+ --ds-semantic-typography-large-links-link-l-size: 16px;
303
+ --ds-semantic-typography-large-links-link-l-weight: 600;
304
+ --ds-semantic-typography-large-links-link-m-letter-spacing: 0px;
305
+ --ds-semantic-typography-large-links-link-m-line-height: 20px;
306
+ --ds-semantic-typography-large-links-link-m-size: 14px;
307
+ --ds-semantic-typography-large-links-link-m-weight: 600;
308
+ --ds-semantic-typography-large-links-link-s-letter-spacing: 0px;
309
+ --ds-semantic-typography-large-links-link-s-line-height: 16px;
310
+ --ds-semantic-typography-large-links-link-s-size: 12px;
311
+ --ds-semantic-typography-large-links-link-s-weight: 600;
312
+ --ds-semantic-typography-large-links-link-xs-letter-spacing: 0px;
313
+ --ds-semantic-typography-large-links-link-xs-line-height: 14px;
314
+ --ds-semantic-typography-large-links-link-xs-size: 10px;
315
+ --ds-semantic-typography-large-links-link-xs-weight: 600;
316
+ --ds-semantic-typography-large-subtitles-subtitle1-letter-spacing: 0px;
317
+ --ds-semantic-typography-large-subtitles-subtitle1-line-height: 26px;
318
+ --ds-semantic-typography-large-subtitles-subtitle1-size: 18px;
319
+ --ds-semantic-typography-large-subtitles-subtitle1-weight: 600;
320
+ --ds-semantic-typography-large-subtitles-subtitle2-letter-spacing: 0px;
321
+ --ds-semantic-typography-large-subtitles-subtitle2-line-height: 24px;
322
+ --ds-semantic-typography-large-subtitles-subtitle2-size: 16px;
323
+ --ds-semantic-typography-large-subtitles-subtitle2-weight: 600;
324
+ --ds-semantic-typography-large-subtitles-subtitle3-letter-spacing: 0.5px;
325
+ --ds-semantic-typography-large-subtitles-subtitle3-line-height: 22px;
326
+ --ds-semantic-typography-large-subtitles-subtitle3-size: 14px;
327
+ --ds-semantic-typography-large-subtitles-subtitle3-weight: 600;
328
+ --ds-semantic-typography-medium-bodies-body1-regular-letter-spacing: 0px;
329
+ --ds-semantic-typography-medium-bodies-body1-regular-line-height: 24px;
330
+ --ds-semantic-typography-medium-bodies-body1-regular-size: 16px;
331
+ --ds-semantic-typography-medium-bodies-body1-regular-weight: 400;
332
+ --ds-semantic-typography-medium-bodies-body1-semibold-letter-spacing: 0px;
333
+ --ds-semantic-typography-medium-bodies-body1-semibold-line-height: 24px;
334
+ --ds-semantic-typography-medium-bodies-body1-semibold-size: 16px;
335
+ --ds-semantic-typography-medium-bodies-body1-semibold-weight: 600;
336
+ --ds-semantic-typography-medium-bodies-body2-regular-letter-spacing: 0px;
337
+ --ds-semantic-typography-medium-bodies-body2-regular-line-height: 20px;
338
+ --ds-semantic-typography-medium-bodies-body2-regular-size: 14px;
339
+ --ds-semantic-typography-medium-bodies-body2-regular-weight: 400;
340
+ --ds-semantic-typography-medium-bodies-body2-semibold-letter-spacing: 0px;
341
+ --ds-semantic-typography-medium-bodies-body2-semibold-line-height: 20px;
342
+ --ds-semantic-typography-medium-bodies-body2-semibold-size: 14px;
343
+ --ds-semantic-typography-medium-bodies-body2-semibold-weight: 600;
344
+ --ds-semantic-typography-medium-bodies-body3-regular-letter-spacing: 0px;
345
+ --ds-semantic-typography-medium-bodies-body3-regular-line-height: 16px;
346
+ --ds-semantic-typography-medium-bodies-body3-regular-size: 12px;
347
+ --ds-semantic-typography-medium-bodies-body3-regular-weight: 400;
348
+ --ds-semantic-typography-medium-bodies-body3-semibold-letter-spacing: 0px;
349
+ --ds-semantic-typography-medium-bodies-body3-semibold-line-height: 16px;
350
+ --ds-semantic-typography-medium-bodies-body3-semibold-size: 12px;
351
+ --ds-semantic-typography-medium-bodies-body3-semibold-weight: 600;
352
+ --ds-semantic-typography-medium-buttons-button1-letter-spacing: 0px;
353
+ --ds-semantic-typography-medium-buttons-button1-line-height: 24px;
354
+ --ds-semantic-typography-medium-buttons-button1-size: 16px;
355
+ --ds-semantic-typography-medium-buttons-button1-weight: 600;
356
+ --ds-semantic-typography-medium-buttons-button2-letter-spacing: 0px;
357
+ --ds-semantic-typography-medium-buttons-button2-line-height: 20px;
358
+ --ds-semantic-typography-medium-buttons-button2-size: 14px;
359
+ --ds-semantic-typography-medium-buttons-button2-weight: 600;
360
+ --ds-semantic-typography-medium-captions-caption1-semibold-letter-spacing: 0px;
361
+ --ds-semantic-typography-medium-captions-caption1-semibold-line-height: 16px;
362
+ --ds-semantic-typography-medium-captions-caption1-semibold-size: 14px;
363
+ --ds-semantic-typography-medium-captions-caption1-semibold-weight: 400;
364
+ --ds-semantic-typography-medium-captions-caption2-semibold-letter-spacing: 0px;
365
+ --ds-semantic-typography-medium-captions-caption2-semibold-line-height: 14px;
366
+ --ds-semantic-typography-medium-captions-caption2-semibold-size: 12px;
367
+ --ds-semantic-typography-medium-captions-caption2-semibold-weight: 600;
368
+ --ds-semantic-typography-medium-captions-caption3-semibold-letter-spacing: 0px;
369
+ --ds-semantic-typography-medium-captions-caption3-semibold-line-height: 14px;
370
+ --ds-semantic-typography-medium-captions-caption3-semibold-size: 10px;
371
+ --ds-semantic-typography-medium-captions-caption3-semibold-weight: 600;
372
+ --ds-semantic-typography-medium-captions-caption4-semibold-letter-spacing: 0px;
373
+ --ds-semantic-typography-medium-captions-caption4-semibold-line-height: 14px;
374
+ --ds-semantic-typography-medium-captions-caption4-semibold-size: 8px;
375
+ --ds-semantic-typography-medium-captions-caption4-semibold-weight: 600;
376
+ --ds-semantic-typography-medium-headings-h1-letter-spacing: 0px;
377
+ --ds-semantic-typography-medium-headings-h1-line-height: 56px;
378
+ --ds-semantic-typography-medium-headings-h1-size: 40px;
379
+ --ds-semantic-typography-medium-headings-h1-weight: 600;
380
+ --ds-semantic-typography-medium-headings-h2-letter-spacing: -0.5px;
381
+ --ds-semantic-typography-medium-headings-h2-line-height: 44px;
382
+ --ds-semantic-typography-medium-headings-h2-size: 32px;
383
+ --ds-semantic-typography-medium-headings-h2-weight: 600;
384
+ --ds-semantic-typography-medium-headings-h3-letter-spacing: 0px;
385
+ --ds-semantic-typography-medium-headings-h3-line-height: 36px;
386
+ --ds-semantic-typography-medium-headings-h3-size: 28px;
387
+ --ds-semantic-typography-medium-headings-h3-weight: 600;
388
+ --ds-semantic-typography-medium-headings-h4-letter-spacing: 0px;
389
+ --ds-semantic-typography-medium-headings-h4-line-height: 32px;
390
+ --ds-semantic-typography-medium-headings-h4-size: 24px;
391
+ --ds-semantic-typography-medium-headings-h4-weight: 600;
392
+ --ds-semantic-typography-medium-links-link-l-letter-spacing: 0px;
393
+ --ds-semantic-typography-medium-links-link-l-line-height: 24px;
394
+ --ds-semantic-typography-medium-links-link-l-size: 16px;
395
+ --ds-semantic-typography-medium-links-link-l-weight: 600;
396
+ --ds-semantic-typography-medium-links-link-m-letter-spacing: 0px;
397
+ --ds-semantic-typography-medium-links-link-m-line-height: 20px;
398
+ --ds-semantic-typography-medium-links-link-m-size: 14px;
399
+ --ds-semantic-typography-medium-links-link-m-weight: 600;
400
+ --ds-semantic-typography-medium-links-link-s-letter-spacing: 0px;
401
+ --ds-semantic-typography-medium-links-link-s-line-height: 16px;
402
+ --ds-semantic-typography-medium-links-link-s-size: 12px;
403
+ --ds-semantic-typography-medium-links-link-s-weight: 600;
404
+ --ds-semantic-typography-medium-links-link-xs-letter-spacing: 0px;
405
+ --ds-semantic-typography-medium-links-link-xs-line-height: 14px;
406
+ --ds-semantic-typography-medium-links-link-xs-size: 10px;
407
+ --ds-semantic-typography-medium-links-link-xs-weight: 600;
408
+ --ds-semantic-typography-medium-subtitles-subtitle1-letter-spacing: 0px;
409
+ --ds-semantic-typography-medium-subtitles-subtitle1-line-height: 26px;
410
+ --ds-semantic-typography-medium-subtitles-subtitle1-size: 18px;
411
+ --ds-semantic-typography-medium-subtitles-subtitle1-weight: 600;
412
+ --ds-semantic-typography-medium-subtitles-subtitle2-letter-spacing: 0px;
413
+ --ds-semantic-typography-medium-subtitles-subtitle2-line-height: 24px;
414
+ --ds-semantic-typography-medium-subtitles-subtitle2-size: 16px;
415
+ --ds-semantic-typography-medium-subtitles-subtitle2-weight: 600;
416
+ --ds-semantic-typography-medium-subtitles-subtitle3-letter-spacing: 0.5px;
417
+ --ds-semantic-typography-medium-subtitles-subtitle3-line-height: 22px;
418
+ --ds-semantic-typography-medium-subtitles-subtitle3-size: 14px;
419
+ --ds-semantic-typography-medium-subtitles-subtitle3-weight: 600;
420
+ --ds-semantic-typography-small-bodies-body1-regular-letter-spacing: 0px;
421
+ --ds-semantic-typography-small-bodies-body1-regular-line-height: 24px;
422
+ --ds-semantic-typography-small-bodies-body1-regular-size: 16px;
423
+ --ds-semantic-typography-small-bodies-body1-regular-weight: 400;
424
+ --ds-semantic-typography-small-bodies-body1-semibold-letter-spacing: 0px;
425
+ --ds-semantic-typography-small-bodies-body1-semibold-line-height: 24px;
426
+ --ds-semantic-typography-small-bodies-body1-semibold-size: 16px;
427
+ --ds-semantic-typography-small-bodies-body1-semibold-weight: 600;
428
+ --ds-semantic-typography-small-bodies-body2-regular-letter-spacing: 0px;
429
+ --ds-semantic-typography-small-bodies-body2-regular-line-height: 20px;
430
+ --ds-semantic-typography-small-bodies-body2-regular-size: 14px;
431
+ --ds-semantic-typography-small-bodies-body2-regular-weight: 400;
432
+ --ds-semantic-typography-small-bodies-body2-semibold-letter-spacing: 0px;
433
+ --ds-semantic-typography-small-bodies-body2-semibold-line-height: 20px;
434
+ --ds-semantic-typography-small-bodies-body2-semibold-size: 14px;
435
+ --ds-semantic-typography-small-bodies-body2-semibold-weight: 600;
436
+ --ds-semantic-typography-small-bodies-body3-regular-letter-spacing: 0px;
437
+ --ds-semantic-typography-small-bodies-body3-regular-line-height: 16px;
438
+ --ds-semantic-typography-small-bodies-body3-regular-size: 12px;
439
+ --ds-semantic-typography-small-bodies-body3-regular-weight: 400;
440
+ --ds-semantic-typography-small-bodies-body3-semibold-letter-spacing: 0px;
441
+ --ds-semantic-typography-small-bodies-body3-semibold-line-height: 16px;
442
+ --ds-semantic-typography-small-bodies-body3-semibold-size: 12px;
443
+ --ds-semantic-typography-small-bodies-body3-semibold-weight: 600;
444
+ --ds-semantic-typography-small-buttons-button1-letter-spacing: 0px;
445
+ --ds-semantic-typography-small-buttons-button1-line-height: 24px;
446
+ --ds-semantic-typography-small-buttons-button1-size: 16px;
447
+ --ds-semantic-typography-small-buttons-button1-weight: 600;
448
+ --ds-semantic-typography-small-buttons-button2-letter-spacing: 0px;
449
+ --ds-semantic-typography-small-buttons-button2-line-height: 20px;
450
+ --ds-semantic-typography-small-buttons-button2-size: 14px;
451
+ --ds-semantic-typography-small-buttons-button2-weight: 600;
452
+ --ds-semantic-typography-small-captions-caption1-semibold-letter-spacing: 0px;
453
+ --ds-semantic-typography-small-captions-caption1-semibold-line-height: 16px;
454
+ --ds-semantic-typography-small-captions-caption1-semibold-size: 12px;
455
+ --ds-semantic-typography-small-captions-caption1-semibold-weight: 600;
456
+ --ds-semantic-typography-small-captions-caption2-semibold-letter-spacing: 0px;
457
+ --ds-semantic-typography-small-captions-caption2-semibold-line-height: 14px;
458
+ --ds-semantic-typography-small-captions-caption2-semibold-size: 10px;
459
+ --ds-semantic-typography-small-captions-caption2-semibold-weight: 600;
460
+ --ds-semantic-typography-small-captions-caption3-semibold-letter-spacing: 0px;
461
+ --ds-semantic-typography-small-captions-caption3-semibold-line-height: 14px;
462
+ --ds-semantic-typography-small-captions-caption3-semibold-size: 8px;
463
+ --ds-semantic-typography-small-captions-caption3-semibold-weight: 600;
464
+ --ds-semantic-typography-small-captions-caption4-semibold-letter-spacing: 0px;
465
+ --ds-semantic-typography-small-captions-caption4-semibold-line-height: 14px;
466
+ --ds-semantic-typography-small-captions-caption4-semibold-size: 6px;
467
+ --ds-semantic-typography-small-captions-caption4-semibold-weight: 600;
468
+ --ds-semantic-typography-small-headings-h1-letter-spacing: 0px;
469
+ --ds-semantic-typography-small-headings-h1-line-height: 44px;
470
+ --ds-semantic-typography-small-headings-h1-size: 36px;
471
+ --ds-semantic-typography-small-headings-h1-weight: 600;
472
+ --ds-semantic-typography-small-headings-h2-letter-spacing: -0.5px;
473
+ --ds-semantic-typography-small-headings-h2-line-height: 36px;
474
+ --ds-semantic-typography-small-headings-h2-size: 28px;
475
+ --ds-semantic-typography-small-headings-h2-weight: 600;
476
+ --ds-semantic-typography-small-headings-h3-letter-spacing: 0px;
477
+ --ds-semantic-typography-small-headings-h3-line-height: 32px;
478
+ --ds-semantic-typography-small-headings-h3-size: 24px;
479
+ --ds-semantic-typography-small-headings-h3-weight: 600;
480
+ --ds-semantic-typography-small-headings-h4-letter-spacing: 0px;
481
+ --ds-semantic-typography-small-headings-h4-line-height: 28px;
482
+ --ds-semantic-typography-small-headings-h4-size: 20px;
483
+ --ds-semantic-typography-small-headings-h4-weight: 600;
484
+ --ds-semantic-typography-small-links-link-l-letter-spacing: 0px;
485
+ --ds-semantic-typography-small-links-link-l-line-height: 24px;
486
+ --ds-semantic-typography-small-links-link-l-size: 16px;
487
+ --ds-semantic-typography-small-links-link-l-weight: 600;
488
+ --ds-semantic-typography-small-links-link-m-letter-spacing: 0px;
489
+ --ds-semantic-typography-small-links-link-m-line-height: 20px;
490
+ --ds-semantic-typography-small-links-link-m-size: 14px;
491
+ --ds-semantic-typography-small-links-link-m-weight: 600;
492
+ --ds-semantic-typography-small-links-link-s-letter-spacing: 0px;
493
+ --ds-semantic-typography-small-links-link-s-line-height: 16px;
494
+ --ds-semantic-typography-small-links-link-s-size: 12px;
495
+ --ds-semantic-typography-small-links-link-s-weight: 600;
496
+ --ds-semantic-typography-small-links-link-xs-letter-spacing: 0px;
497
+ --ds-semantic-typography-small-links-link-xs-line-height: 14px;
498
+ --ds-semantic-typography-small-links-link-xs-size: 10px;
499
+ --ds-semantic-typography-small-links-link-xs-weight: 600;
500
+ --ds-semantic-typography-small-subtitles-subtitle1-letter-spacing: 0px;
501
+ --ds-semantic-typography-small-subtitles-subtitle1-line-height: 26px;
502
+ --ds-semantic-typography-small-subtitles-subtitle1-size: 18px;
503
+ --ds-semantic-typography-small-subtitles-subtitle1-weight: 600;
504
+ --ds-semantic-typography-small-subtitles-subtitle2-letter-spacing: 0px;
505
+ --ds-semantic-typography-small-subtitles-subtitle2-line-height: 24px;
506
+ --ds-semantic-typography-small-subtitles-subtitle2-size: 16px;
507
+ --ds-semantic-typography-small-subtitles-subtitle2-weight: 600;
508
+ --ds-semantic-typography-small-subtitles-subtitle3-letter-spacing: 0.5px;
509
+ --ds-semantic-typography-small-subtitles-subtitle3-line-height: 22px;
510
+ --ds-semantic-typography-small-subtitles-subtitle3-size: 14px;
511
+ --ds-semantic-typography-small-subtitles-subtitle3-weight: 600;
512
+ --ds-semantic-units-base-spacing-10-xl: 96px;
513
+ --ds-semantic-units-base-spacing-11-xl: 104px;
514
+ --ds-semantic-units-base-spacing-12-xl: 112px;
515
+ --ds-semantic-units-base-spacing-13-xl: 120px;
516
+ --ds-semantic-units-base-spacing-2-xl: 32px;
517
+ --ds-semantic-units-base-spacing-2-xs: 0px;
518
+ --ds-semantic-units-base-spacing-3-xl: 40px;
519
+ --ds-semantic-units-base-spacing-4-xl: 48px;
520
+ --ds-semantic-units-base-spacing-5-xl: 56px;
521
+ --ds-semantic-units-base-spacing-6-xl: 64px;
522
+ --ds-semantic-units-base-spacing-7-xl: 72px;
523
+ --ds-semantic-units-base-spacing-8-xl: 80px;
524
+ --ds-semantic-units-base-spacing-9-xl: 88px;
525
+ --ds-semantic-units-base-spacing-l: 16px;
526
+ --ds-semantic-units-base-spacing-m: 12px;
527
+ --ds-semantic-units-base-spacing-s: 8px;
528
+ --ds-semantic-units-base-spacing-xl: 24px;
529
+ --ds-semantic-units-base-spacing-xs: 4px;
530
+ --ds-semantic-units-border-radius-2-xl: 32px;
531
+ --ds-semantic-units-border-radius-3-xl: 40px;
532
+ --ds-semantic-units-border-radius-full: 999px;
533
+ --ds-semantic-units-border-radius-l: 16px;
534
+ --ds-semantic-units-border-radius-m: 12px;
535
+ --ds-semantic-units-border-radius-s: 8px;
536
+ --ds-semantic-units-border-radius-xl: 24px;
537
+ --ds-semantic-units-border-radius-xs: 4px;
538
+ --ds-semantic-units-icon-size-m: 24px;
539
+ --ds-semantic-units-icon-size-s: 16px;
540
+ --ds-semantic-units-shadow-system-blur-l: 32;
541
+ --ds-semantic-units-shadow-system-blur-m: 24;
542
+ --ds-semantic-units-shadow-system-blur-s: 8;
543
+ --ds-semantic-units-shadow-system-blur-xl: 64;
544
+ --ds-semantic-units-shadow-system-spread-s: 0;
545
+ --ds-semantic-units-shadow-system-x-position-s: 0;
546
+ --ds-semantic-units-shadow-system-y-position-l: 8;
547
+ --ds-semantic-units-shadow-system-y-position-m: 4;
548
+ --ds-semantic-units-shadow-system-y-position-s: 0;
549
+ --ds-semantic-units-shadow-system-y-position-xl: 40;
550
+ }
551
+
package/dist/tokens.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ export type TokenTier = 'primitive' | 'semantic';
2
+ export type TokenCategory = 'color' | 'units' | 'typography' | 'layout' | 'border' | 'shadow' | 'motion';
3
+ export interface DesignToken {
4
+ name: string;
5
+ path: string[];
6
+ set: string;
7
+ tier: TokenTier;
8
+ category: TokenCategory;
9
+ mode: 'small' | 'medium' | 'large' | null;
10
+ type: string;
11
+ value: unknown;
12
+ cssVariable: string;
13
+ cssValue: string;
14
+ }
15
+ export declare const tokens: DesignToken[];
16
+ export declare const tokenSets: Record<string, unknown>;