@deriv-web-design/ui 0.0.26 → 0.0.28
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.
- package/dist/index.css +606 -31
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +97 -3
- package/dist/index.d.ts +97 -3
- package/dist/index.js +900 -554
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +898 -554
- package/dist/index.mjs.map +1 -1
- package/package.json +7 -7
- package/tokens.css +106 -175
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@deriv-web-design/ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.28",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.mjs",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -17,11 +17,6 @@
|
|
|
17
17
|
"dist",
|
|
18
18
|
"tokens.css"
|
|
19
19
|
],
|
|
20
|
-
"scripts": {
|
|
21
|
-
"prebuild": "cp ../tokens/tokens.css ./tokens.css",
|
|
22
|
-
"build": "tsup",
|
|
23
|
-
"dev": "tsup --watch"
|
|
24
|
-
},
|
|
25
20
|
"publishConfig": {
|
|
26
21
|
"registry": "https://registry.npmjs.org",
|
|
27
22
|
"access": "public"
|
|
@@ -43,5 +38,10 @@
|
|
|
43
38
|
"react-dom": "^19.0.0",
|
|
44
39
|
"tsup": "^8.5.1",
|
|
45
40
|
"typescript": "^5.7.0"
|
|
41
|
+
},
|
|
42
|
+
"scripts": {
|
|
43
|
+
"prebuild": "pnpm --filter @deriv-web-design/tokens build && cp ../tokens/tokens.css ./tokens.css",
|
|
44
|
+
"build": "tsup",
|
|
45
|
+
"dev": "tsup --watch"
|
|
46
46
|
}
|
|
47
|
-
}
|
|
47
|
+
}
|
package/tokens.css
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
/* ============================================================
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
Use semantic tokens instead.
|
|
2
|
+
AUTO-GENERATED by Style Dictionary — DO NOT EDIT DIRECTLY.
|
|
3
|
+
Edit the JSON token sources in src/ and run `pnpm build`.
|
|
5
4
|
============================================================ */
|
|
6
5
|
|
|
7
6
|
:root {
|
|
@@ -24,6 +23,7 @@
|
|
|
24
23
|
--color-slate-1400: #000000;
|
|
25
24
|
|
|
26
25
|
/* Color — Coral */
|
|
26
|
+
--color-coral-100: #ffe6e6;
|
|
27
27
|
--color-coral-700: #ff444f;
|
|
28
28
|
--color-coral-800: #e12e3a;
|
|
29
29
|
--color-coral-900: #c41c28;
|
|
@@ -31,7 +31,9 @@
|
|
|
31
31
|
/* Color — Emerald */
|
|
32
32
|
--color-emerald-500: #4cd6c0;
|
|
33
33
|
--color-emerald-600: #00b39a;
|
|
34
|
-
--color-emerald-700: #
|
|
34
|
+
--color-emerald-700: #00c390;
|
|
35
|
+
--color-emerald-800: #00bb86;
|
|
36
|
+
--color-emerald-900: #00ae7a;
|
|
35
37
|
|
|
36
38
|
/* Color — Yellow */
|
|
37
39
|
--color-yellow-500: #ffb84d;
|
|
@@ -46,30 +48,19 @@
|
|
|
46
48
|
--color-cherry-800: #f50032;
|
|
47
49
|
--color-cherry-900: #dc002c;
|
|
48
50
|
|
|
49
|
-
/* Color — Green
|
|
51
|
+
/* Color — Green */
|
|
50
52
|
--color-green-600: #007a22;
|
|
51
53
|
|
|
52
|
-
/* Color — Red
|
|
54
|
+
/* Color — Red */
|
|
53
55
|
--color-red-600: #c40000;
|
|
54
56
|
|
|
55
|
-
/* Color — Opacity / Green */
|
|
56
|
-
--color-opacity-green-8: rgba(0, 136, 50, 0.08);
|
|
57
|
-
--color-opacity-green-16: rgba(0, 136, 50, 0.16);
|
|
58
|
-
--color-opacity-green-72: rgba(0, 136, 50, 0.72);
|
|
59
|
-
--color-opacity-green-88: rgba(0, 136, 50, 0.88);
|
|
60
|
-
|
|
61
|
-
/* Color — Opacity / Red */
|
|
62
|
-
--color-opacity-red-8: rgba(230, 25, 14, 0.08);
|
|
63
|
-
--color-opacity-red-16: rgba(230, 25, 14, 0.16);
|
|
64
|
-
--color-opacity-red-72: rgba(230, 25, 14, 0.72);
|
|
65
|
-
--color-opacity-red-88: rgba(230, 25, 14, 0.88);
|
|
66
|
-
|
|
67
57
|
/* Color — Opacity / Slate */
|
|
68
58
|
--color-opacity-slate-4: rgba(24, 28, 37, 0.04);
|
|
69
59
|
--color-opacity-slate-8: rgba(24, 28, 37, 0.08);
|
|
70
60
|
--color-opacity-slate-16: rgba(24, 28, 37, 0.16);
|
|
71
61
|
--color-opacity-slate-24: rgba(24, 28, 37, 0.24);
|
|
72
62
|
--color-opacity-slate-48: rgba(24, 28, 37, 0.48);
|
|
63
|
+
--color-opacity-slate-56: rgba(24, 28, 37, 0.56);
|
|
73
64
|
--color-opacity-slate-72: rgba(24, 28, 37, 0.72);
|
|
74
65
|
--color-opacity-slate-88: rgba(24, 28, 37, 0.88);
|
|
75
66
|
|
|
@@ -82,6 +73,18 @@
|
|
|
82
73
|
--color-opacity-white-72: rgba(255, 255, 255, 0.72);
|
|
83
74
|
--color-opacity-white-88: rgba(255, 255, 255, 0.88);
|
|
84
75
|
|
|
76
|
+
/* Color — Opacity / Green */
|
|
77
|
+
--color-opacity-green-8: rgba(0, 136, 50, 0.08);
|
|
78
|
+
--color-opacity-green-16: rgba(0, 136, 50, 0.16);
|
|
79
|
+
--color-opacity-green-72: rgba(0, 136, 50, 0.72);
|
|
80
|
+
--color-opacity-green-88: rgba(0, 136, 50, 0.88);
|
|
81
|
+
|
|
82
|
+
/* Color — Opacity / Red */
|
|
83
|
+
--color-opacity-red-8: rgba(230, 25, 14, 0.08);
|
|
84
|
+
--color-opacity-red-16: rgba(230, 25, 14, 0.16);
|
|
85
|
+
--color-opacity-red-72: rgba(230, 25, 14, 0.72);
|
|
86
|
+
--color-opacity-red-88: rgba(230, 25, 14, 0.88);
|
|
87
|
+
|
|
85
88
|
/* Content Width */
|
|
86
89
|
--content-width-846: 52.875rem;
|
|
87
90
|
--content-width-1064: 66.5rem;
|
|
@@ -109,60 +112,46 @@
|
|
|
109
112
|
/* Font Family */
|
|
110
113
|
--font-family-base: Inter, sans-serif;
|
|
111
114
|
|
|
112
|
-
/* Font Size
|
|
113
|
-
xs–lg are identical across viewports; xl–5xl scale up at tablet/desktop */
|
|
115
|
+
/* Font Size */
|
|
114
116
|
--font-size-xs: 0.75rem;
|
|
115
117
|
--font-size-sm: 0.875rem;
|
|
116
118
|
--font-size-md: 1rem;
|
|
117
119
|
--font-size-lg: 1.125rem;
|
|
118
120
|
--font-size-xl: 1.25rem;
|
|
119
|
-
/* mobile.xl */
|
|
120
121
|
--font-size-2xl: 1.5rem;
|
|
121
|
-
/* mobile.2xl */
|
|
122
122
|
--font-size-3xl: 2rem;
|
|
123
|
-
/* mobile.3xl */
|
|
124
123
|
--font-size-4xl: 2.5rem;
|
|
125
|
-
/* mobile.4xl */
|
|
126
124
|
--font-size-5xl: 3rem;
|
|
127
|
-
|
|
125
|
+
--font-size-h6: 1rem;
|
|
128
126
|
|
|
129
127
|
/* Font Weight */
|
|
130
128
|
--font-weight-regular: 400;
|
|
131
|
-
--font-weight-medium: 500;
|
|
132
129
|
--font-weight-semi-bold: 600;
|
|
133
130
|
--font-weight-extra-bold: 800;
|
|
134
131
|
|
|
135
|
-
/* Line Height
|
|
132
|
+
/* Line Height */
|
|
136
133
|
--line-height-tight: 1.2;
|
|
137
134
|
--line-height-snug: 1.3;
|
|
138
135
|
--line-height-normal: 1.5;
|
|
139
136
|
--line-height-relaxed: 1.75;
|
|
140
|
-
|
|
141
|
-
/* Line Height — absolute, mobile (default)
|
|
142
|
-
xs–lg are identical across viewports; xl–5xl scale up at tablet/desktop */
|
|
143
137
|
--line-height-xs: 1.25rem;
|
|
144
138
|
--line-height-sm: 1.5rem;
|
|
145
139
|
--line-height-md: 1.5rem;
|
|
146
140
|
--line-height-lg: 1.75rem;
|
|
147
141
|
--line-height-xl: 1.75rem;
|
|
148
|
-
/* mobile.xl */
|
|
149
142
|
--line-height-2xl: 2rem;
|
|
150
|
-
/* mobile.2xl */
|
|
151
143
|
--line-height-3xl: 2.5rem;
|
|
152
|
-
/* mobile.3xl */
|
|
153
144
|
--line-height-4xl: 3rem;
|
|
154
|
-
/* mobile.4xl */
|
|
155
145
|
--line-height-5xl: 3.5rem;
|
|
156
|
-
|
|
146
|
+
--line-height-h6: 1.5rem;
|
|
157
147
|
|
|
158
148
|
/* Border Radius */
|
|
159
149
|
--radius-none: 0;
|
|
160
150
|
--radius-xs: 0.125rem;
|
|
161
|
-
--radius-sm: 0.25rem;
|
|
162
151
|
--radius-md: 0.5rem;
|
|
163
|
-
--radius-lg: 0.75rem;
|
|
164
152
|
--radius-xl: 1rem;
|
|
165
153
|
--radius-2xl: 1.5rem;
|
|
154
|
+
--radius-3xl: 2rem;
|
|
166
155
|
--radius-full: 9999px;
|
|
167
156
|
|
|
168
157
|
/* Shadow */
|
|
@@ -173,113 +162,98 @@
|
|
|
173
162
|
--shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.2);
|
|
174
163
|
}
|
|
175
164
|
|
|
176
|
-
|
|
177
|
-
/* ============================================================
|
|
178
|
-
CORE TOKENS — responsive overrides
|
|
179
|
-
font-size and line-height xl–5xl scale up at tablet/desktop
|
|
180
|
-
============================================================ */
|
|
181
|
-
|
|
182
165
|
@media (min-width: 768px) {
|
|
183
166
|
:root {
|
|
184
167
|
--font-size-xl: 1.5rem;
|
|
185
|
-
/* tablet.xl */
|
|
186
168
|
--font-size-2xl: 2rem;
|
|
187
|
-
/* tablet.2xl */
|
|
188
169
|
--font-size-3xl: 2.5rem;
|
|
189
|
-
/* tablet.3xl */
|
|
190
170
|
--font-size-4xl: 3rem;
|
|
191
|
-
/* tablet.4xl */
|
|
192
171
|
--font-size-5xl: 4rem;
|
|
193
|
-
|
|
172
|
+
--font-size-h6: 1.25rem;
|
|
194
173
|
|
|
195
174
|
--line-height-xl: 2rem;
|
|
196
|
-
/* tablet.xl */
|
|
197
175
|
--line-height-2xl: 2.5rem;
|
|
198
|
-
/* tablet.2xl */
|
|
199
176
|
--line-height-3xl: 3rem;
|
|
200
|
-
/* tablet.3xl */
|
|
201
177
|
--line-height-4xl: 3.5rem;
|
|
202
|
-
|
|
203
|
-
--line-height-
|
|
204
|
-
/* tablet.5xl */
|
|
178
|
+
--line-height-5xl: 4.5rem;
|
|
179
|
+
--line-height-h6: 1.75rem;
|
|
205
180
|
}
|
|
206
181
|
}
|
|
207
182
|
|
|
208
183
|
@media (min-width: 992px) {
|
|
209
184
|
:root {
|
|
210
185
|
--font-size-xl: 1.75rem;
|
|
211
|
-
/* desktop.xl */
|
|
212
186
|
--font-size-2xl: 2.5rem;
|
|
213
|
-
/* desktop.2xl */
|
|
214
187
|
--font-size-3xl: 3rem;
|
|
215
|
-
/* desktop.3xl */
|
|
216
188
|
--font-size-4xl: 3.5rem;
|
|
217
|
-
/* desktop.4xl */
|
|
218
189
|
--font-size-5xl: 5rem;
|
|
219
|
-
|
|
190
|
+
--font-size-h6: 1.5rem;
|
|
220
191
|
|
|
221
192
|
--line-height-xl: 2.25rem;
|
|
222
|
-
/* desktop.xl */
|
|
223
193
|
--line-height-2xl: 3rem;
|
|
224
|
-
/* desktop.2xl */
|
|
225
194
|
--line-height-3xl: 3.5rem;
|
|
226
|
-
/* desktop.3xl */
|
|
227
195
|
--line-height-4xl: 4rem;
|
|
228
|
-
/* desktop.4xl */
|
|
229
196
|
--line-height-5xl: 5.5rem;
|
|
230
|
-
|
|
197
|
+
--line-height-h6: 2rem;
|
|
231
198
|
}
|
|
232
199
|
}
|
|
233
200
|
|
|
234
|
-
/* ============================================================
|
|
235
|
-
SEMANTIC TOKENS
|
|
236
|
-
Use these in components. They map intent → core values.
|
|
237
|
-
============================================================ */
|
|
238
|
-
|
|
239
201
|
:root {
|
|
240
202
|
/* Button — Primary */
|
|
241
203
|
--button-primary-background: var(--color-coral-700);
|
|
242
204
|
--button-primary-background-hover: var(--color-coral-800);
|
|
243
205
|
--button-primary-background-active: var(--color-coral-900);
|
|
244
206
|
--button-primary-text: var(--color-slate-50);
|
|
207
|
+
--button-primary-icon: var(--color-slate-50);
|
|
245
208
|
--button-primary-border: var(--color-coral-700);
|
|
209
|
+
--button-primary-radius: var(--radius-full);
|
|
246
210
|
|
|
247
211
|
/* Button — Secondary */
|
|
248
212
|
--button-secondary-background: var(--color-slate-50);
|
|
249
213
|
--button-secondary-background-hover: var(--color-slate-75);
|
|
250
214
|
--button-secondary-background-active: var(--color-slate-100);
|
|
251
215
|
--button-secondary-text: var(--color-slate-1200);
|
|
216
|
+
--button-secondary-icon: var(--color-slate-1200);
|
|
252
217
|
--button-secondary-border: var(--color-slate-300);
|
|
253
218
|
|
|
219
|
+
/* Button — Tertiary */
|
|
220
|
+
--button-tertiary-background: var(--color-opacity-white-4);
|
|
221
|
+
--button-tertiary-background-hover: var(--color-opacity-white-8);
|
|
222
|
+
--button-tertiary-background-active: var(--color-opacity-white-16);
|
|
223
|
+
--button-tertiary-text: var(--color-coral-700);
|
|
224
|
+
--button-tertiary-icon: var(--color-coral-700);
|
|
225
|
+
--button-tertiary-border: var(--color-opacity-white-4);
|
|
226
|
+
--button-tertiary-radius: var(--radius-full);
|
|
227
|
+
|
|
254
228
|
/* Button — Ghost */
|
|
255
229
|
--button-ghost-background: var(--color-opacity-white-4);
|
|
256
230
|
--button-ghost-background-hover: var(--color-opacity-white-8);
|
|
257
231
|
--button-ghost-background-active: var(--color-opacity-white-16);
|
|
258
232
|
--button-ghost-text: var(--color-slate-1200);
|
|
233
|
+
--button-ghost-icon: var(--color-slate-1200);
|
|
259
234
|
--button-ghost-border: var(--color-opacity-white-4);
|
|
235
|
+
--button-ghost-radius: var(--radius-full);
|
|
260
236
|
|
|
261
237
|
/* Button — Danger */
|
|
262
238
|
--button-danger-background: var(--color-cherry-700);
|
|
263
239
|
--button-danger-background-hover: var(--color-cherry-800);
|
|
264
240
|
--button-danger-background-active: var(--color-cherry-900);
|
|
265
241
|
--button-danger-text: var(--color-slate-50);
|
|
242
|
+
--button-danger-icon: var(--color-slate-50);
|
|
266
243
|
--button-danger-border: var(--color-cherry-700);
|
|
244
|
+
--button-danger-radius: var(--radius-full);
|
|
267
245
|
|
|
268
246
|
/* Button — Disabled */
|
|
269
247
|
--button-disabled-background: var(--color-slate-200);
|
|
270
248
|
--button-disabled-text: var(--color-slate-500);
|
|
249
|
+
--button-disabled-icon: var(--color-slate-500);
|
|
271
250
|
--button-disabled-border: var(--color-slate-200);
|
|
251
|
+
--button-disabled-radius: var(--radius-full);
|
|
272
252
|
|
|
273
|
-
/* Link
|
|
253
|
+
/* Link */
|
|
274
254
|
--link-coral-color: var(--color-coral-700);
|
|
275
|
-
|
|
276
|
-
/* Link — Black scheme */
|
|
277
255
|
--link-black-color: var(--color-slate-1300);
|
|
278
|
-
|
|
279
|
-
/* Link — White scheme */
|
|
280
256
|
--link-white-color: var(--color-slate-50);
|
|
281
|
-
|
|
282
|
-
/* Link — Shared */
|
|
283
257
|
--link-disabled-opacity: 0.24;
|
|
284
258
|
|
|
285
259
|
/* Tag */
|
|
@@ -348,167 +322,98 @@
|
|
|
348
322
|
--breadcrumb-separator-color: var(--color-opacity-slate-48);
|
|
349
323
|
--breadcrumb-focus-ring-color: var(--color-blue-600);
|
|
350
324
|
|
|
351
|
-
/* Chip Dropdown
|
|
325
|
+
/* Chip Dropdown */
|
|
352
326
|
--chip-dropdown-list-bg: var(--color-slate-50);
|
|
353
327
|
--chip-dropdown-list-border: var(--color-opacity-slate-4);
|
|
354
328
|
--chip-dropdown-list-shadow: 0 16px 24px rgba(0, 0, 0, 0.04), 0 16px 24px rgba(0, 0, 0, 0.02);
|
|
355
|
-
|
|
356
|
-
/* Chip Dropdown — List item */
|
|
357
329
|
--chip-dropdown-item-text: var(--color-opacity-slate-72);
|
|
358
330
|
--chip-dropdown-item-hover-bg: var(--color-opacity-slate-8);
|
|
359
331
|
--chip-dropdown-item-active-bg: var(--color-opacity-slate-16);
|
|
360
332
|
--chip-dropdown-item-selected-check: var(--color-opacity-slate-72);
|
|
361
333
|
|
|
362
|
-
/*
|
|
363
|
-
font-size and line-height are responsive because the core
|
|
364
|
-
--font-size-* / --line-height-* vars override at each
|
|
365
|
-
breakpoint in the core section above.
|
|
366
|
-
────────────────────────────────────────────────────────── */
|
|
367
|
-
|
|
368
|
-
/* Typography — H1 */
|
|
334
|
+
/* Typography */
|
|
369
335
|
--typography-h1-font-family: var(--font-family-base);
|
|
370
336
|
--typography-h1-font-size: var(--font-size-5xl);
|
|
371
|
-
/* mobile: 3rem → tablet: 4rem → desktop: 5rem */
|
|
372
337
|
--typography-h1-font-weight: var(--font-weight-extra-bold);
|
|
373
|
-
/* 800 — all viewports */
|
|
374
338
|
--typography-h1-line-height: var(--line-height-5xl);
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
/* Typography — H2 */
|
|
339
|
+
--typography-h1-letter-spacing: -0.035rem;
|
|
378
340
|
--typography-h2-font-family: var(--font-family-base);
|
|
379
341
|
--typography-h2-font-size: var(--font-size-4xl);
|
|
380
|
-
/* mobile: 2.5rem → tablet: 3rem → desktop: 3.5rem */
|
|
381
342
|
--typography-h2-font-weight: var(--font-weight-extra-bold);
|
|
382
|
-
/* 800 — all viewports */
|
|
383
343
|
--typography-h2-line-height: var(--line-height-4xl);
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
/* Typography — H3 */
|
|
344
|
+
--typography-h2-letter-spacing: -0.03rem;
|
|
387
345
|
--typography-h3-font-family: var(--font-family-base);
|
|
388
346
|
--typography-h3-font-size: var(--font-size-3xl);
|
|
389
|
-
/* mobile: 2rem → tablet: 2.5rem → desktop: 3rem */
|
|
390
347
|
--typography-h3-font-weight: var(--font-weight-extra-bold);
|
|
391
|
-
/* 800 — all viewports */
|
|
392
348
|
--typography-h3-line-height: var(--line-height-3xl);
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
/* Typography — H4 */
|
|
349
|
+
--typography-h3-letter-spacing: -0.025rem;
|
|
396
350
|
--typography-h4-font-family: var(--font-family-base);
|
|
397
351
|
--typography-h4-font-size: var(--font-size-2xl);
|
|
398
|
-
/* mobile: 1.5rem → tablet: 2rem → desktop: 2.5rem */
|
|
399
352
|
--typography-h4-font-weight: var(--font-weight-extra-bold);
|
|
400
|
-
/* 800 — all viewports */
|
|
401
353
|
--typography-h4-line-height: var(--line-height-2xl);
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
/* Typography — H5 */
|
|
354
|
+
--typography-h4-letter-spacing: normal;
|
|
405
355
|
--typography-h5-font-family: var(--font-family-base);
|
|
406
356
|
--typography-h5-font-size: var(--font-size-xl);
|
|
407
|
-
/* mobile: 1.25rem → tablet: 1.5rem → desktop: 1.75rem */
|
|
408
357
|
--typography-h5-font-weight: var(--font-weight-extra-bold);
|
|
409
|
-
/* 800 — all viewports */
|
|
410
358
|
--typography-h5-line-height: var(--line-height-xl);
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
/* Typography — body-lg */
|
|
359
|
+
--typography-h5-letter-spacing: normal;
|
|
360
|
+
--typography-h6-font-family: var(--font-family-base);
|
|
361
|
+
--typography-h6-font-size: var(--font-size-h6);
|
|
362
|
+
--typography-h6-font-weight: var(--font-weight-extra-bold);
|
|
363
|
+
--typography-h6-line-height: var(--line-height-h6);
|
|
364
|
+
--typography-h6-letter-spacing: normal;
|
|
419
365
|
--typography-body-lg-font-family: var(--font-family-base);
|
|
420
366
|
--typography-body-lg-font-size: var(--font-size-lg);
|
|
421
|
-
/* 1.125rem (18px) — all viewports */
|
|
422
367
|
--typography-body-lg-font-weight: var(--font-weight-regular);
|
|
423
|
-
/* 400 */
|
|
424
368
|
--typography-body-lg-line-height: var(--line-height-lg);
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
/* Typography — body-md */
|
|
369
|
+
--typography-body-lg-letter-spacing: normal;
|
|
428
370
|
--typography-body-md-font-family: var(--font-family-base);
|
|
429
371
|
--typography-body-md-font-size: var(--font-size-md);
|
|
430
|
-
/* 1rem (16px) — all viewports */
|
|
431
372
|
--typography-body-md-font-weight: var(--font-weight-regular);
|
|
432
|
-
/* 400 */
|
|
433
373
|
--typography-body-md-line-height: var(--line-height-md);
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
/* Typography — body-sm */
|
|
374
|
+
--typography-body-md-letter-spacing: normal;
|
|
437
375
|
--typography-body-sm-font-family: var(--font-family-base);
|
|
438
376
|
--typography-body-sm-font-size: var(--font-size-sm);
|
|
439
|
-
/* 0.875rem (14px) — all viewports */
|
|
440
377
|
--typography-body-sm-font-weight: var(--font-weight-regular);
|
|
441
|
-
/* 400 */
|
|
442
378
|
--typography-body-sm-line-height: var(--line-height-sm);
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
/* Typography — body-xs */
|
|
379
|
+
--typography-body-sm-letter-spacing: normal;
|
|
446
380
|
--typography-body-xs-font-family: var(--font-family-base);
|
|
447
381
|
--typography-body-xs-font-size: var(--font-size-xs);
|
|
448
|
-
/* 0.75rem (12px) — all viewports */
|
|
449
382
|
--typography-body-xs-font-weight: var(--font-weight-regular);
|
|
450
|
-
/* 400 */
|
|
451
383
|
--typography-body-xs-line-height: var(--line-height-xs);
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
/* ── Typography — Labels ────────────────────────────────────
|
|
455
|
-
────────────────────────────────────────────────────────── */
|
|
456
|
-
|
|
457
|
-
/* Typography — label-lg */
|
|
384
|
+
--typography-body-xs-letter-spacing: normal;
|
|
458
385
|
--typography-label-lg-font-family: var(--font-family-base);
|
|
459
386
|
--typography-label-lg-font-size: var(--font-size-lg);
|
|
460
|
-
/* 1.125rem (18px) */
|
|
461
387
|
--typography-label-lg-font-weight: var(--font-weight-regular);
|
|
462
|
-
/* 400 */
|
|
463
388
|
--typography-label-lg-line-height: var(--line-height-lg);
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
/* Typography — label-md */
|
|
389
|
+
--typography-label-lg-letter-spacing: normal;
|
|
467
390
|
--typography-label-md-font-family: var(--font-family-base);
|
|
468
391
|
--typography-label-md-font-size: var(--font-size-md);
|
|
469
|
-
/* 1rem (16px) */
|
|
470
392
|
--typography-label-md-font-weight: var(--font-weight-regular);
|
|
471
|
-
/* 400 */
|
|
472
393
|
--typography-label-md-line-height: var(--line-height-md);
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
/* Typography — label-sm */
|
|
394
|
+
--typography-label-md-letter-spacing: normal;
|
|
476
395
|
--typography-label-sm-font-family: var(--font-family-base);
|
|
477
396
|
--typography-label-sm-font-size: var(--font-size-xs);
|
|
478
|
-
/* 0.75rem (12px) */
|
|
479
397
|
--typography-label-sm-font-weight: var(--font-weight-regular);
|
|
480
|
-
/* 400 */
|
|
481
398
|
--typography-label-sm-line-height: var(--line-height-xs);
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
/* ── Typography — Caption ───────────────────────────────────
|
|
485
|
-
────────────────────────────────────────────────────────── */
|
|
399
|
+
--typography-label-sm-letter-spacing: normal;
|
|
486
400
|
--typography-caption-font-family: var(--font-family-base);
|
|
487
401
|
--typography-caption-font-size: var(--font-size-xs);
|
|
488
|
-
/* 0.75rem (12px) */
|
|
489
402
|
--typography-caption-font-weight: var(--font-weight-regular);
|
|
490
|
-
/* 400 */
|
|
491
403
|
--typography-caption-line-height: var(--line-height-xs);
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
/* ── Typography — Link ──────────────────────────────────────
|
|
495
|
-
────────────────────────────────────────────────────────── */
|
|
404
|
+
--typography-caption-letter-spacing: normal;
|
|
496
405
|
--typography-link-md-font-family: var(--font-family-base);
|
|
497
406
|
--typography-link-md-font-size: var(--font-size-md);
|
|
498
|
-
/* 1rem (16px) */
|
|
499
407
|
--typography-link-md-font-weight: var(--font-weight-semi-bold);
|
|
500
|
-
/* 600 */
|
|
501
408
|
--typography-link-md-line-height: var(--line-height-md);
|
|
502
|
-
|
|
409
|
+
--typography-link-md-letter-spacing: normal;
|
|
503
410
|
|
|
504
|
-
/* Pagination
|
|
411
|
+
/* Pagination */
|
|
505
412
|
--pagination-page-radius: var(--radius-full);
|
|
506
413
|
--pagination-page-text: var(--color-opacity-slate-72);
|
|
507
414
|
--pagination-page-selected-bg: var(--color-slate-1400);
|
|
508
415
|
--pagination-page-selected-text: var(--color-slate-50);
|
|
509
416
|
--pagination-page-ellipsis-text: var(--color-opacity-slate-24);
|
|
510
|
-
|
|
511
|
-
/* Pagination — Nav */
|
|
512
417
|
--pagination-nav-icon: var(--color-slate-1400);
|
|
513
418
|
--pagination-nav-icon-disabled: var(--color-opacity-slate-24);
|
|
514
419
|
|
|
@@ -532,16 +437,42 @@
|
|
|
532
437
|
--bottom-sheet-action-secondary-active-bg: var(--color-opacity-slate-16);
|
|
533
438
|
--bottom-sheet-list-item-border: var(--color-opacity-slate-8);
|
|
534
439
|
|
|
440
|
+
/* Elevation */
|
|
441
|
+
--elevation-card: var(--shadow-sm);
|
|
442
|
+
--elevation-dropdown: var(--shadow-md);
|
|
443
|
+
--elevation-modal: var(--shadow-lg);
|
|
444
|
+
--elevation-popover: var(--shadow-md);
|
|
445
|
+
--elevation-floating: var(--shadow-xl);
|
|
446
|
+
|
|
447
|
+
/* Overlay */
|
|
448
|
+
--overlay-light: var(--color-opacity-slate-16);
|
|
449
|
+
--overlay-medium: var(--color-opacity-slate-48);
|
|
450
|
+
--overlay-strong: var(--color-opacity-slate-72);
|
|
451
|
+
|
|
452
|
+
/* Status */
|
|
453
|
+
--status-success-background: var(--color-emerald-500);
|
|
454
|
+
--status-success-text: var(--color-slate-1200);
|
|
455
|
+
--status-success-icon: var(--color-emerald-700);
|
|
456
|
+
--status-success-border: var(--color-emerald-700);
|
|
457
|
+
--status-warning-background: var(--color-yellow-500);
|
|
458
|
+
--status-warning-text: var(--color-slate-1200);
|
|
459
|
+
--status-warning-icon: var(--color-yellow-600);
|
|
460
|
+
--status-warning-border: var(--color-yellow-600);
|
|
461
|
+
--status-danger-background: var(--color-cherry-800);
|
|
462
|
+
--status-danger-text: var(--color-slate-50);
|
|
463
|
+
--status-danger-icon: var(--color-slate-50);
|
|
464
|
+
--status-danger-border: var(--color-cherry-700);
|
|
465
|
+
--status-info-background: var(--color-blue-500);
|
|
466
|
+
--status-info-text: var(--color-slate-1200);
|
|
467
|
+
--status-info-icon: var(--color-blue-600);
|
|
468
|
+
--status-info-border: var(--color-blue-600);
|
|
469
|
+
|
|
535
470
|
/* Text Color */
|
|
536
471
|
--text-primary: var(--color-slate-1200);
|
|
537
|
-
--text-secondary: var(--color-slate-
|
|
538
|
-
--text-
|
|
539
|
-
--text-disabled: var(--color-slate-400);
|
|
472
|
+
--text-secondary: var(--color-opacity-slate-72);
|
|
473
|
+
--text-disabled: var(--color-opacity-slate-56);
|
|
540
474
|
--text-inverse: var(--color-slate-50);
|
|
541
475
|
--text-brand: var(--color-coral-700);
|
|
542
|
-
--text-success: var(--color-emerald-700);
|
|
543
|
-
--text-warning: var(--color-yellow-600);
|
|
544
|
-
--text-danger: var(--color-cherry-700);
|
|
545
476
|
|
|
546
477
|
/* Icon Color */
|
|
547
478
|
--icon-primary: var(--color-slate-1200);
|
|
@@ -559,7 +490,7 @@
|
|
|
559
490
|
--background-page: var(--color-slate-50);
|
|
560
491
|
--background-surface: var(--color-slate-50);
|
|
561
492
|
--background-surface-secondary: var(--color-slate-75);
|
|
562
|
-
--background-surface-tertiary: var(--color-
|
|
493
|
+
--background-surface-tertiary: var(--color-coral-100);
|
|
563
494
|
--background-surface-inverse: var(--color-slate-1200);
|
|
564
495
|
--background-brand: var(--color-coral-700);
|
|
565
496
|
|
|
@@ -587,4 +518,4 @@
|
|
|
587
518
|
--footer-accordion-text-color: var(--color-slate-50);
|
|
588
519
|
--footer-accordion-chevron-color: var(--color-slate-50);
|
|
589
520
|
--footer-app-badge-border: var(--color-opacity-white-8);
|
|
590
|
-
}
|
|
521
|
+
}
|