@deriv-ds/design-intelligence-layer 0.2.0 → 0.4.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.
- package/AGENTS.md +3 -3
- package/README.md +360 -147
- package/dist/index.cjs +4501 -2372
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +435 -152
- package/dist/index.d.ts +435 -152
- package/dist/index.js +5123 -2986
- package/dist/index.js.map +1 -1
- package/guides/brand-voice/deriv-brand-voice.md +250 -0
- package/guides/design-system-guide/{trading-game-ds-guide.md → deriv-design-intelligence-guide.md} +5 -5
- package/guides/design-system-guide/quill-ds-guide.md +817 -0
- package/package.json +7 -2
- package/src/styles.css +965 -29
- package/guides/brand-voice/trading-game-brand-voice.md +0 -325
package/src/styles.css
CHANGED
|
@@ -20,9 +20,14 @@
|
|
|
20
20
|
--color-primary-canvas: var(--background-primary-canvas);
|
|
21
21
|
--color-secondary-surface: var(--background-secondary-surface);
|
|
22
22
|
--color-secondary-canvas: var(--background-secondary-canvas);
|
|
23
|
+
--color-card: var(--background-primary-surface);
|
|
24
|
+
--color-popover: var(--background-primary-surface);
|
|
23
25
|
/* ── Foundation border tokens ── */
|
|
24
26
|
--color-default: var(--border-default-default);
|
|
25
27
|
--color-selected: var(--border-selected-default);
|
|
28
|
+
--color-selected-inverse: var(--border-selected-inverse);
|
|
29
|
+
--color-border-subtle: var(--border-subtle-default);
|
|
30
|
+
--color-border-prominent: var(--border-prominent-default);
|
|
26
31
|
/* ── Text tokens (repurposed from bg aliases) ── */
|
|
27
32
|
--color-prominent: var(--text-prominent-default);
|
|
28
33
|
--color-subtle: var(--text-subtle-default);
|
|
@@ -54,6 +59,7 @@
|
|
|
54
59
|
--color-alert-error-border: var(--alert-error-border);
|
|
55
60
|
|
|
56
61
|
--color-overlay: var(--overlay);
|
|
62
|
+
--color-slider-track: var(--slider-track);
|
|
57
63
|
--color-slider-range: var(--slider-range);
|
|
58
64
|
--color-tabs: var(--tabs);
|
|
59
65
|
--color-tabs-active: var(--tabs-active);
|
|
@@ -95,6 +101,277 @@
|
|
|
95
101
|
--color-accent-foreground: var(--accent-foreground);
|
|
96
102
|
--color-destructive: var(--destructive);
|
|
97
103
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
104
|
+
|
|
105
|
+
/* ── Search Field ── */
|
|
106
|
+
--color-search-field-text-prominent: var(--search-field-text-prominent);
|
|
107
|
+
--color-search-field-text-subtle: var(--search-field-text-subtle);
|
|
108
|
+
--color-search-field-text-disabled: var(--search-field-text-disabled);
|
|
109
|
+
--color-search-field-icon-prominent: var(--search-field-icon-prominent);
|
|
110
|
+
--color-search-field-icon-subtle: var(--search-field-icon-subtle);
|
|
111
|
+
--color-search-field-outline-bg-default: var(--search-field-outline-bg-default);
|
|
112
|
+
--color-search-field-outline-bg-hover: var(--search-field-outline-bg-hover);
|
|
113
|
+
--color-search-field-outline-bg-focus: var(--search-field-outline-bg-focus);
|
|
114
|
+
--color-search-field-outline-bg-disabled: var(--search-field-outline-bg-disabled);
|
|
115
|
+
--color-search-field-outline-border-default: var(--search-field-outline-border-default);
|
|
116
|
+
--color-search-field-outline-border-focus: var(--search-field-outline-border-focus);
|
|
117
|
+
--color-search-field-outline-border-disabled: var(--search-field-outline-border-disabled);
|
|
118
|
+
--color-search-field-fill-bg-default: var(--search-field-fill-bg-default);
|
|
119
|
+
--color-search-field-fill-bg-hover: var(--search-field-fill-bg-hover);
|
|
120
|
+
--color-search-field-fill-bg-focus: var(--search-field-fill-bg-focus);
|
|
121
|
+
--color-search-field-fill-bg-disabled: var(--search-field-fill-bg-disabled);
|
|
122
|
+
--color-search-field-fill-border-focus: var(--search-field-fill-border-focus);
|
|
123
|
+
/* ── Bottom Sheet colour bridges ── */
|
|
124
|
+
--color-bottom-sheet-bg-handle-bar: var(--bottom-sheet-bg-handle-bar);
|
|
125
|
+
--color-bottom-sheet-bg-handle-default: var(--bottom-sheet-bg-handle-default);
|
|
126
|
+
--color-bottom-sheet-bg-handle-pressed: var(--bottom-sheet-bg-handle-pressed);
|
|
127
|
+
/* ── Button component colour bridges ── */
|
|
128
|
+
--color-button-primary-bg: var(--button-primary-normal-bg-default);
|
|
129
|
+
--color-button-primary-bg-hover: var(--button-primary-normal-bg-hover);
|
|
130
|
+
--color-button-primary-bg-pressed: var(--button-primary-normal-bg-pressed);
|
|
131
|
+
--color-button-primary-text: var(--button-primary-text);
|
|
132
|
+
--color-button-secondary-border: var(--button-secondary-normal-border);
|
|
133
|
+
--color-button-secondary-text: var(--button-secondary-normal-text);
|
|
134
|
+
--color-button-secondary-bg-hover: var(--button-secondary-normal-bg-hover);
|
|
135
|
+
--color-button-secondary-bg-pressed: var(--button-secondary-normal-bg-pressed);
|
|
136
|
+
--color-button-tertiary-bg: var(--button-tertiary-normal-bg-default);
|
|
137
|
+
--color-button-tertiary-text: var(--button-tertiary-normal-text);
|
|
138
|
+
--color-button-tertiary-bg-hover: var(--button-tertiary-normal-bg-hover);
|
|
139
|
+
--color-button-tertiary-bg-pressed: var(--button-tertiary-normal-bg-pressed);
|
|
140
|
+
--color-button-ghost-text: var(--button-ghost-normal-text);
|
|
141
|
+
--color-button-ghost-bg-hover: var(--button-ghost-normal-bg-hover);
|
|
142
|
+
--color-button-ghost-bg-pressed: var(--button-ghost-normal-bg-pressed);
|
|
143
|
+
/* ── Badge component colour bridges ── */
|
|
144
|
+
--color-badge-bg-number: var(--badge-bg-number);
|
|
145
|
+
--color-badge-text: var(--badge-text-default);
|
|
146
|
+
--color-badge-status-green: var(--badge-bg-status-green);
|
|
147
|
+
--color-badge-status-red: var(--badge-bg-status-red);
|
|
148
|
+
--color-badge-status-yellow: var(--badge-bg-status-yellow);
|
|
149
|
+
--color-badge-status-blue: var(--badge-bg-status-blue);
|
|
150
|
+
/* ── Tab component colour bridges ── */
|
|
151
|
+
--color-tab-text: var(--tab-text-default);
|
|
152
|
+
--color-tab-text-selected: var(--tab-text-selected);
|
|
153
|
+
--color-tab-text-disabled: var(--tab-text-disabled);
|
|
154
|
+
--color-tab-bg-hover: var(--tab-bg-hover);
|
|
155
|
+
--color-tab-bg-pressed: var(--tab-bg-pressed);
|
|
156
|
+
--color-tab-border-default: var(--tab-border-default);
|
|
157
|
+
--color-tab-border-focus: var(--tab-border-focus);
|
|
158
|
+
--color-tab-border-selected: var(--tab-border-selected);
|
|
159
|
+
/* ── Segmented Control colour bridges ── */
|
|
160
|
+
--color-segmented-control-text-prominent: var(--segmented-control-text-prominent);
|
|
161
|
+
--color-segmented-control-text-default: var(--segmented-control-text-default);
|
|
162
|
+
--color-segmented-control-text-disabled: var(--segmented-control-text-disabled);
|
|
163
|
+
--color-segmented-control-icon-prominent: var(--segmented-control-icon-prominent);
|
|
164
|
+
--color-segmented-control-icon-disabled: var(--segmented-control-icon-disabled);
|
|
165
|
+
--color-segmented-control-container-bg: var(--segmented-control-container-bg);
|
|
166
|
+
--color-segmented-control-segment-bg-selected: var(--segmented-control-segment-bg-selected);
|
|
167
|
+
--color-segmented-control-segment-bg-hover: var(--segmented-control-segment-bg-hover);
|
|
168
|
+
--color-segmented-control-segment-bg-pressed: var(--segmented-control-segment-bg-pressed);
|
|
169
|
+
/* ── Section Message colour bridges ── */
|
|
170
|
+
--color-section-message-fill-bg-default: var(--section-message-fill-bg-default);
|
|
171
|
+
--color-section-message-fill-bg-danger: var(--section-message-fill-bg-danger);
|
|
172
|
+
--color-section-message-fill-bg-information: var(--section-message-fill-bg-information);
|
|
173
|
+
--color-section-message-fill-bg-success: var(--section-message-fill-bg-success);
|
|
174
|
+
--color-section-message-fill-bg-warning: var(--section-message-fill-bg-warning);
|
|
175
|
+
--color-section-message-icon-danger: var(--section-message-icon-danger);
|
|
176
|
+
--color-section-message-icon-warning: var(--section-message-icon-warning);
|
|
177
|
+
--color-section-message-icon-success: var(--section-message-icon-success);
|
|
178
|
+
--color-section-message-icon-information: var(--section-message-icon-information);
|
|
179
|
+
--color-section-message-title: var(--section-message-title);
|
|
180
|
+
--color-section-message-description: var(--section-message-description);
|
|
181
|
+
/* ── Tag colour bridges ── */
|
|
182
|
+
--color-tag-text-neutral: var(--tag-text-neutral);
|
|
183
|
+
--color-tag-text-red: var(--tag-text-red);
|
|
184
|
+
--color-tag-text-yellow: var(--tag-text-yellow);
|
|
185
|
+
--color-tag-text-green: var(--tag-text-green);
|
|
186
|
+
--color-tag-text-blue: var(--tag-text-blue);
|
|
187
|
+
--color-tag-icon-default: var(--tag-icon-default);
|
|
188
|
+
--color-tag-icon-red: var(--tag-icon-red);
|
|
189
|
+
--color-tag-icon-yellow: var(--tag-icon-yellow);
|
|
190
|
+
--color-tag-icon-green: var(--tag-icon-green);
|
|
191
|
+
--color-tag-icon-blue: var(--tag-icon-blue);
|
|
192
|
+
--color-tag-outline-border-neutral: var(--tag-outline-border-neutral);
|
|
193
|
+
--color-tag-outline-border-red: var(--tag-outline-border-red);
|
|
194
|
+
--color-tag-outline-border-yellow: var(--tag-outline-border-yellow);
|
|
195
|
+
--color-tag-outline-border-green: var(--tag-outline-border-green);
|
|
196
|
+
--color-tag-outline-border-blue: var(--tag-outline-border-blue);
|
|
197
|
+
--color-tag-fill-bg-neutral: var(--tag-fill-bg-neutral);
|
|
198
|
+
--color-tag-fill-bg-red: var(--tag-fill-bg-red);
|
|
199
|
+
--color-tag-fill-bg-yellow: var(--tag-fill-bg-yellow);
|
|
200
|
+
--color-tag-fill-bg-green: var(--tag-fill-bg-green);
|
|
201
|
+
--color-tag-fill-bg-blue: var(--tag-fill-bg-blue);
|
|
202
|
+
/* ── Chip colour bridges ── */
|
|
203
|
+
--color-chip-text-prominent: var(--chip-text-prominent);
|
|
204
|
+
--color-chip-text-disabled: var(--chip-text-disabled);
|
|
205
|
+
--color-chip-border-default: var(--chip-border-default);
|
|
206
|
+
--color-chip-border-selected: var(--chip-border-selected);
|
|
207
|
+
--color-chip-border-disabled: var(--chip-border-disabled);
|
|
208
|
+
--color-chip-bg-hover: var(--chip-bg-hover);
|
|
209
|
+
--color-chip-bg-pressed: var(--chip-bg-pressed);
|
|
210
|
+
--color-chip-bg-selected: var(--chip-bg-selected);
|
|
211
|
+
--color-chip-icon-prominent: var(--chip-icon-prominent);
|
|
212
|
+
--color-chip-icon-disabled: var(--chip-icon-disabled);
|
|
213
|
+
/* ── Code Input colour bridges ── */
|
|
214
|
+
--color-code-input-fill-bg-default: var(--code-input-fill-bg-default);
|
|
215
|
+
--color-code-input-fill-bg-hover: var(--code-input-fill-bg-hover);
|
|
216
|
+
--color-code-input-fill-bg-focus: var(--code-input-fill-bg-focus);
|
|
217
|
+
--color-code-input-fill-bg-disabled: var(--code-input-fill-bg-disabled);
|
|
218
|
+
--color-code-input-fill-bg-success: var(--code-input-fill-bg-success);
|
|
219
|
+
--color-code-input-fill-bg-error: var(--code-input-fill-bg-error);
|
|
220
|
+
--color-code-input-fill-border-focus: var(--code-input-fill-border-focus);
|
|
221
|
+
--color-code-input-fill-border-error: var(--code-input-fill-border-error);
|
|
222
|
+
--color-code-input-fill-border-success: var(--code-input-fill-border-success);
|
|
223
|
+
--color-code-input-text-prominent: var(--code-input-text-prominent);
|
|
224
|
+
--color-code-input-text-disabled: var(--code-input-text-disabled);
|
|
225
|
+
--color-code-input-text-success: var(--code-input-text-success);
|
|
226
|
+
--color-code-input-text-error: var(--code-input-text-error);
|
|
227
|
+
/* ── Menu colour bridges ── */
|
|
228
|
+
--color-menu-background: var(--menu-background);
|
|
229
|
+
--color-menu-border: var(--menu-border);
|
|
230
|
+
/* ── Dropdown Field colour bridges ── */
|
|
231
|
+
--color-dropdown-field-text-prominent: var(--dropdown-field-text-prominent);
|
|
232
|
+
--color-dropdown-field-text-subtle: var(--dropdown-field-text-subtle);
|
|
233
|
+
--color-dropdown-field-text-disabled: var(--dropdown-field-text-disabled);
|
|
234
|
+
--color-dropdown-field-text-error: var(--dropdown-field-text-error);
|
|
235
|
+
--color-dropdown-field-outline-bg-default: var(--dropdown-field-outline-bg-default);
|
|
236
|
+
--color-dropdown-field-outline-bg-hover: var(--dropdown-field-outline-bg-hover);
|
|
237
|
+
--color-dropdown-field-outline-bg-focus: var(--dropdown-field-outline-bg-focus);
|
|
238
|
+
--color-dropdown-field-outline-bg-disabled: var(--dropdown-field-outline-bg-disabled);
|
|
239
|
+
--color-dropdown-field-outline-border-default: var(--dropdown-field-outline-border-default);
|
|
240
|
+
--color-dropdown-field-outline-border-focus: var(--dropdown-field-outline-border-focus);
|
|
241
|
+
--color-dropdown-field-outline-border-disabled: var(--dropdown-field-outline-border-disabled);
|
|
242
|
+
--color-dropdown-field-outline-border-error: var(--dropdown-field-outline-border-error);
|
|
243
|
+
--color-dropdown-field-fill-bg-neutral-default: var(--dropdown-field-fill-bg-neutral-default);
|
|
244
|
+
--color-dropdown-field-fill-bg-neutral-hover: var(--dropdown-field-fill-bg-neutral-hover);
|
|
245
|
+
--color-dropdown-field-fill-bg-neutral-focus: var(--dropdown-field-fill-bg-neutral-focus);
|
|
246
|
+
--color-dropdown-field-fill-bg-neutral-disabled: var(--dropdown-field-fill-bg-neutral-disabled);
|
|
247
|
+
--color-dropdown-field-fill-bg-error-default: var(--dropdown-field-fill-bg-error-default);
|
|
248
|
+
--color-dropdown-field-fill-bg-error-hover: var(--dropdown-field-fill-bg-error-hover);
|
|
249
|
+
--color-dropdown-field-fill-bg-error-focus: var(--dropdown-field-fill-bg-error-focus);
|
|
250
|
+
/* ── List Item colour bridges ── */
|
|
251
|
+
--color-list-item-text-prominent: var(--list-item-text-prominent);
|
|
252
|
+
--color-list-item-text-disabled: var(--list-item-text-disabled);
|
|
253
|
+
--color-list-item-border-selected: var(--list-item-border-selected);
|
|
254
|
+
--color-list-item-primary-bg-default: var(--list-item-primary-bg-default);
|
|
255
|
+
--color-list-item-primary-bg-hover: var(--list-item-primary-bg-hover);
|
|
256
|
+
--color-list-item-primary-bg-pressed: var(--list-item-primary-bg-pressed);
|
|
257
|
+
--color-list-item-primary-bg-selected: var(--list-item-primary-bg-selected);
|
|
258
|
+
--color-list-item-primary-bg-disabled: var(--list-item-primary-bg-disabled);
|
|
259
|
+
--color-list-item-secondary-bg-default: var(--list-item-secondary-bg-default);
|
|
260
|
+
--color-list-item-secondary-bg-hover: var(--list-item-secondary-bg-hover);
|
|
261
|
+
--color-list-item-secondary-bg-pressed: var(--list-item-secondary-bg-pressed);
|
|
262
|
+
--color-list-item-secondary-bg-selected: var(--list-item-secondary-bg-selected);
|
|
263
|
+
--color-list-item-secondary-bg-disabled: var(--list-item-secondary-bg-disabled);
|
|
264
|
+
--color-list-item-icon-prominent: var(--list-item-icon-prominent);
|
|
265
|
+
--color-list-item-icon-disabled: var(--list-item-icon-disabled);
|
|
266
|
+
--color-list-item-flag-placeholder: var(--list-item-flag-placeholder);
|
|
267
|
+
/* ── Toggle colour bridges ── */
|
|
268
|
+
--color-toggle-track-off: var(--toggle-track-off);
|
|
269
|
+
--color-toggle-track-off-hover: var(--toggle-track-off-hover);
|
|
270
|
+
--color-toggle-track-off-active: var(--toggle-track-off-active);
|
|
271
|
+
--color-toggle-track-on: var(--toggle-track-on);
|
|
272
|
+
--color-toggle-track-on-hover: var(--toggle-track-on-hover);
|
|
273
|
+
--color-toggle-track-on-active: var(--toggle-track-on-active);
|
|
274
|
+
--color-toggle-knob: var(--toggle-knob);
|
|
275
|
+
/* ── Field colour bridges ── */
|
|
276
|
+
--color-field-text-prominent: var(--field-text-prominent);
|
|
277
|
+
--color-field-text-subtle: var(--field-text-subtle);
|
|
278
|
+
--color-field-text-disabled: var(--field-text-disabled);
|
|
279
|
+
--color-field-icon-disabled: var(--field-icon-disabled);
|
|
280
|
+
--color-field-text-success: var(--field-text-success);
|
|
281
|
+
--color-field-text-error: var(--field-text-error);
|
|
282
|
+
--color-field-outline-bg-default: var(--field-outline-bg-default);
|
|
283
|
+
--color-field-outline-bg-hover: var(--field-outline-bg-hover);
|
|
284
|
+
--color-field-outline-bg-focus: var(--field-outline-bg-focus);
|
|
285
|
+
--color-field-outline-bg-disabled: var(--field-outline-bg-disabled);
|
|
286
|
+
--color-field-outline-border-default: var(--field-outline-border-default);
|
|
287
|
+
--color-field-outline-border-focus: var(--field-outline-border-focus);
|
|
288
|
+
--color-field-outline-border-disabled: var(--field-outline-border-disabled);
|
|
289
|
+
--color-field-fill-bg-default: var(--field-fill-bg-default);
|
|
290
|
+
--color-field-fill-bg-hover: var(--field-fill-bg-hover);
|
|
291
|
+
--color-field-fill-bg-focus: var(--field-fill-bg-focus);
|
|
292
|
+
--color-field-fill-bg-disabled: var(--field-fill-bg-disabled);
|
|
293
|
+
--color-field-fill-bg-success-default: var(--field-fill-bg-success-default);
|
|
294
|
+
--color-field-fill-bg-success-hover: var(--field-fill-bg-success-hover);
|
|
295
|
+
--color-field-fill-bg-success-focus: var(--field-fill-bg-success-focus);
|
|
296
|
+
--color-field-fill-bg-error-default: var(--field-fill-bg-error-default);
|
|
297
|
+
--color-field-fill-bg-error-hover: var(--field-fill-bg-error-hover);
|
|
298
|
+
--color-field-fill-bg-error-focus: var(--field-fill-bg-error-focus);
|
|
299
|
+
--color-field-outline-border-success: var(--field-outline-border-success);
|
|
300
|
+
--color-field-outline-border-error: var(--field-outline-border-error);
|
|
301
|
+
--color-field-fill-border-focus: var(--field-fill-border-focus);
|
|
302
|
+
--color-field-fill-border-success: var(--field-fill-border-success-focus);
|
|
303
|
+
--color-field-fill-border-error: var(--field-fill-border-error-focus);
|
|
304
|
+
/* ── Snackbar colour bridges ── */
|
|
305
|
+
--color-snackbar-bg-default: var(--snackbar-bg-default);
|
|
306
|
+
--color-snackbar-bg-fail: var(--snackbar-bg-fail);
|
|
307
|
+
--color-snackbar-text: var(--snackbar-text);
|
|
308
|
+
--color-snackbar-text-fail: var(--snackbar-text-fail);
|
|
309
|
+
--color-snackbar-icon: var(--snackbar-icon);
|
|
310
|
+
--color-snackbar-icon-fail: var(--snackbar-icon-fail);
|
|
311
|
+
/* ── Link colour bridges ── */
|
|
312
|
+
--color-link-primary-default: var(--link-primary-default);
|
|
313
|
+
--color-link-primary-disabled: var(--link-primary-disabled);
|
|
314
|
+
--color-link-secondary-normal-default: var(--link-secondary-normal-default);
|
|
315
|
+
--color-link-secondary-normal-disabled: var(--link-secondary-normal-disabled);
|
|
316
|
+
--color-link-secondary-inverse-default: var(--link-secondary-inverse-default);
|
|
317
|
+
--color-link-secondary-inverse-disabled: var(--link-secondary-inverse-disabled);
|
|
318
|
+
--color-link-secondary-static-light-default: var(--link-secondary-static-light-default);
|
|
319
|
+
--color-link-secondary-static-light-disabled: var(--link-secondary-static-light-disabled);
|
|
320
|
+
--color-link-secondary-static-dark-default: var(--link-secondary-static-dark-default);
|
|
321
|
+
--color-link-secondary-static-dark-disabled: var(--link-secondary-static-dark-disabled);
|
|
322
|
+
/* ── Loading Spinner colour bridge ── */
|
|
323
|
+
--color-loading-spinner-bg-default: var(--loading-spinner-bg-default);
|
|
324
|
+
/* ── Notification colour bridges ── */
|
|
325
|
+
--color-notification-bg-banner: var(--notification-bg-banner);
|
|
326
|
+
--color-notification-bg-item-default: var(--notification-bg-item-default);
|
|
327
|
+
--color-notification-bg-item-hover: var(--notification-bg-item-hover);
|
|
328
|
+
--color-notification-bg-button-default: var(--notification-bg-button-default);
|
|
329
|
+
--color-notification-bg-button-press: var(--notification-bg-button-press);
|
|
330
|
+
--color-notification-bg-divider: var(--notification-bg-divider);
|
|
331
|
+
--color-notification-bg-icon-information: var(--notification-bg-icon-information);
|
|
332
|
+
--color-notification-bg-icon-success: var(--notification-bg-icon-success);
|
|
333
|
+
--color-notification-bg-icon-warning: var(--notification-bg-icon-warning);
|
|
334
|
+
--color-notification-bg-icon-danger: var(--notification-bg-icon-danger);
|
|
335
|
+
--color-notification-title-banner: var(--notification-title-banner);
|
|
336
|
+
--color-notification-description-banner: var(--notification-description-banner);
|
|
337
|
+
--color-notification-title-item: var(--notification-title-item);
|
|
338
|
+
--color-notification-description-item-unread: var(--notification-description-item-unread);
|
|
339
|
+
--color-notification-description-item-read: var(--notification-description-item-read);
|
|
340
|
+
--color-notification-date-time-item: var(--notification-date-time-item);
|
|
341
|
+
--color-notification-icon-inverse-information: var(--notification-icon-inverse-information);
|
|
342
|
+
--color-notification-icon-inverse-success: var(--notification-icon-inverse-success);
|
|
343
|
+
--color-notification-icon-inverse-warning: var(--notification-icon-inverse-warning);
|
|
344
|
+
--color-notification-icon-inverse-danger: var(--notification-icon-inverse-danger);
|
|
345
|
+
--color-notification-icon-normal-information: var(--notification-icon-normal-information);
|
|
346
|
+
--color-notification-icon-normal-success: var(--notification-icon-normal-success);
|
|
347
|
+
--color-notification-icon-normal-warning: var(--notification-icon-normal-warning);
|
|
348
|
+
--color-notification-icon-normal-danger: var(--notification-icon-normal-danger);
|
|
349
|
+
--color-notification-icon-read-unread: var(--notification-icon-read-unread);
|
|
350
|
+
--color-notification-text-read-unread: var(--notification-text-read-unread);
|
|
351
|
+
--color-notification-icon-delete: var(--notification-icon-delete);
|
|
352
|
+
--color-notification-text-delete: var(--notification-text-delete);
|
|
353
|
+
/* ── Accordion component colour bridges ── */
|
|
354
|
+
--color-accordion-bg-default: var(--accordion-bg-default);
|
|
355
|
+
--color-accordion-bg-hover: var(--accordion-bg-hover);
|
|
356
|
+
--color-accordion-bg-active: var(--accordion-bg-active);
|
|
357
|
+
--color-accordion-bg-expand: var(--accordion-bg-expand);
|
|
358
|
+
--color-accordion-icon: var(--accordion-icon);
|
|
359
|
+
--color-accordion-icon-disabled: var(--accordion-icon-disabled);
|
|
360
|
+
--color-accordion-title: var(--accordion-title);
|
|
361
|
+
--color-accordion-title-disabled: var(--accordion-title-disabled);
|
|
362
|
+
--color-accordion-subtitle: var(--accordion-subtitle);
|
|
363
|
+
--color-accordion-subtitle-disabled: var(--accordion-subtitle-disabled);
|
|
364
|
+
--color-accordion-border: var(--accordion-border);
|
|
365
|
+
/* ── Accordion shadow — registered as a named Tailwind shadow utility ── */
|
|
366
|
+
--shadow-accordion-fill: var(--accordion-shadow-fill);
|
|
367
|
+
/* ── Accordion animations ── */
|
|
368
|
+
--animate-accordion-down: accordion-down var(--duration-base) var(--ease-standard);
|
|
369
|
+
--animate-accordion-up: accordion-up var(--duration-base) var(--ease-standard);
|
|
370
|
+
|
|
371
|
+
/* ── Breadcrumb ── */
|
|
372
|
+
--color-breadcrumb-default: var(--breadcrumb-default);
|
|
373
|
+
--color-breadcrumb-selected: var(--breadcrumb-selected);
|
|
374
|
+
--color-breadcrumb-sep: var(--breadcrumb-sep);
|
|
98
375
|
}
|
|
99
376
|
|
|
100
377
|
/* ══════════════════════════════════════════════════════════════
|
|
@@ -898,8 +1175,8 @@
|
|
|
898
1175
|
--alert-info-border: var(--border-information-default);
|
|
899
1176
|
--alert-error-text: var(--text-error-default);
|
|
900
1177
|
--alert-error-border: var(--border-error-default);
|
|
901
|
-
--slider-
|
|
902
|
-
|
|
1178
|
+
--slider-track: var(--primitive-mono-alpha-8); /* rgba(0,0,0,0.08) — matches Quill progress bar track */
|
|
1179
|
+
--slider-range: var(--primitive-mono-1000); /* #000000 solid — matches Quill progress bar indicator */
|
|
903
1180
|
--sidebar: var(--background-primary-surface);
|
|
904
1181
|
--sidebar-foreground: var(--text-prominent-default);
|
|
905
1182
|
--sidebar-primary: var(--primary);
|
|
@@ -921,6 +1198,111 @@
|
|
|
921
1198
|
}
|
|
922
1199
|
}
|
|
923
1200
|
|
|
1201
|
+
/* ── Snackbar: dark mode override via :root.dark (specificity 0,1,1 beats :root 0,0,1) ── */
|
|
1202
|
+
:root.dark {
|
|
1203
|
+
--snackbar-bg-default: var(--primitive-slate-50);
|
|
1204
|
+
--snackbar-bg-fail: var(--primitive-red-900);
|
|
1205
|
+
--snackbar-text: var(--primitive-slate-1200);
|
|
1206
|
+
--snackbar-text-fail: var(--primitive-slate-50);
|
|
1207
|
+
--snackbar-icon: var(--primitive-slate-1200);
|
|
1208
|
+
--snackbar-icon-fail: var(--primitive-slate-50);
|
|
1209
|
+
/* component-button/sm ghost-static-light — for dark mode (white snackbar bg, dark btn text) */
|
|
1210
|
+
--snackbar-btn-text: var(--button-ghost-static-light-text);
|
|
1211
|
+
--snackbar-btn-icon: var(--button-ghost-static-light-icon);
|
|
1212
|
+
--snackbar-btn-bg-hover: var(--button-ghost-static-light-bg-hover);
|
|
1213
|
+
--snackbar-btn-bg-pressed: var(--button-ghost-static-light-bg-pressed);
|
|
1214
|
+
}
|
|
1215
|
+
|
|
1216
|
+
/* ── Snackbar: sonner overrides ─────────────────────────────────────────────
|
|
1217
|
+
Sonner hardcodes font-size/weight, padding, and box-shadow directly in its
|
|
1218
|
+
stylesheet — they are not exposed as CSS variable hooks. We override them
|
|
1219
|
+
here with our component-snackbar token values. !important is intentional:
|
|
1220
|
+
sonner injects its styles after our stylesheet. */
|
|
1221
|
+
[data-sonner-toast][data-styled='true'] {
|
|
1222
|
+
font-size: var(--snackbar-font-size) !important;
|
|
1223
|
+
font-weight: var(--snackbar-font-weight) !important;
|
|
1224
|
+
/* top | right | bottom | left — Figma: pl=spacing-1(16px), pr=spacing-2(8px) */
|
|
1225
|
+
padding: var(--snackbar-padding-v) var(--snackbar-spacing-2) var(--snackbar-padding-v) var(--snackbar-spacing-1) !important;
|
|
1226
|
+
min-height: var(--snackbar-height) !important;
|
|
1227
|
+
box-shadow: var(--snackbar-shadow) !important;
|
|
1228
|
+
align-items: center !important;
|
|
1229
|
+
gap: var(--snackbar-spacing-2) !important;
|
|
1230
|
+
}
|
|
1231
|
+
|
|
1232
|
+
/* Snackbar content — fills available width, pushing buttons to the right */
|
|
1233
|
+
[data-sonner-toast][data-styled='true'] [data-content] {
|
|
1234
|
+
flex: 1 0 0 !important;
|
|
1235
|
+
min-width: 0 !important;
|
|
1236
|
+
}
|
|
1237
|
+
|
|
1238
|
+
/* Action + cancel buttons — button.tsx ghost/sm (component-button/sm) */
|
|
1239
|
+
[data-sonner-toast][data-styled='true'] [data-button] {
|
|
1240
|
+
height: var(--snackbar-btn-height) !important;
|
|
1241
|
+
padding-left: var(--snackbar-btn-padding-h) !important;
|
|
1242
|
+
padding-right: var(--snackbar-btn-padding-h) !important;
|
|
1243
|
+
border-radius: var(--snackbar-btn-radius) !important;
|
|
1244
|
+
font-size: var(--snackbar-font-size) !important;
|
|
1245
|
+
font-weight: var(--button-sm-font-weight) !important;
|
|
1246
|
+
color: var(--snackbar-btn-text) !important;
|
|
1247
|
+
background-color: transparent !important;
|
|
1248
|
+
}
|
|
1249
|
+
[data-sonner-toast][data-styled='true'] [data-button]:hover {
|
|
1250
|
+
background-color: var(--snackbar-btn-bg-hover) !important;
|
|
1251
|
+
}
|
|
1252
|
+
[data-sonner-toast][data-styled='true'] [data-button]:active {
|
|
1253
|
+
background-color: var(--snackbar-btn-bg-pressed) !important;
|
|
1254
|
+
}
|
|
1255
|
+
|
|
1256
|
+
/* Cancel variant — same as action but override sonner's default dark rgba bg */
|
|
1257
|
+
[data-sonner-toast][data-styled='true'] [data-cancel] {
|
|
1258
|
+
color: var(--snackbar-btn-text) !important;
|
|
1259
|
+
background-color: transparent !important;
|
|
1260
|
+
}
|
|
1261
|
+
|
|
1262
|
+
/* Close button (X) — pulled into inline flex flow at the far right.
|
|
1263
|
+
Sonner renders it as position:absolute; we override to static + order:999.
|
|
1264
|
+
Sized as button.tsx icon-sm: 32×32, pill radius, 16×16 icon. */
|
|
1265
|
+
[data-sonner-toast][data-styled='true'] [data-close-button] {
|
|
1266
|
+
position: static !important;
|
|
1267
|
+
top: unset !important;
|
|
1268
|
+
left: unset !important;
|
|
1269
|
+
right: unset !important;
|
|
1270
|
+
transform: none !important;
|
|
1271
|
+
order: 999 !important;
|
|
1272
|
+
width: var(--snackbar-btn-icon-btn-width) !important;
|
|
1273
|
+
height: var(--snackbar-btn-height) !important;
|
|
1274
|
+
border-radius: var(--snackbar-btn-radius) !important;
|
|
1275
|
+
background-color: transparent !important;
|
|
1276
|
+
border: none !important;
|
|
1277
|
+
color: var(--snackbar-btn-text) !important;
|
|
1278
|
+
flex-shrink: 0 !important;
|
|
1279
|
+
display: flex !important;
|
|
1280
|
+
align-items: center !important;
|
|
1281
|
+
justify-content: center !important;
|
|
1282
|
+
}
|
|
1283
|
+
[data-sonner-toast][data-styled='true'] [data-close-button]:hover {
|
|
1284
|
+
background-color: var(--snackbar-btn-bg-hover) !important;
|
|
1285
|
+
}
|
|
1286
|
+
[data-sonner-toast][data-styled='true'] [data-close-button]:active {
|
|
1287
|
+
background-color: var(--snackbar-btn-bg-pressed) !important;
|
|
1288
|
+
}
|
|
1289
|
+
|
|
1290
|
+
/* Fail (error) toast — bg-fail is red in both modes (tokens.json: semantic-colour/light+dark).
|
|
1291
|
+
Buttons must always use ghost-static-dark (white text, white-alpha states) regardless of
|
|
1292
|
+
the current theme, because dark mode overrides --snackbar-btn-* to ghost-static-light. */
|
|
1293
|
+
[data-sonner-toast][data-styled='true'][data-type='error'] [data-button],
|
|
1294
|
+
[data-sonner-toast][data-styled='true'][data-type='error'] [data-close-button] {
|
|
1295
|
+
color: var(--button-ghost-static-dark-text) !important;
|
|
1296
|
+
}
|
|
1297
|
+
[data-sonner-toast][data-styled='true'][data-type='error'] [data-button]:hover,
|
|
1298
|
+
[data-sonner-toast][data-styled='true'][data-type='error'] [data-close-button]:hover {
|
|
1299
|
+
background-color: var(--button-ghost-static-dark-bg-hover) !important;
|
|
1300
|
+
}
|
|
1301
|
+
[data-sonner-toast][data-styled='true'][data-type='error'] [data-button]:active,
|
|
1302
|
+
[data-sonner-toast][data-styled='true'][data-type='error'] [data-close-button]:active {
|
|
1303
|
+
background-color: var(--button-ghost-static-dark-bg-pressed) !important;
|
|
1304
|
+
}
|
|
1305
|
+
|
|
924
1306
|
/* Spinner — pill-style activity indicator */
|
|
925
1307
|
@keyframes spinner-fade {
|
|
926
1308
|
0% {
|
|
@@ -1042,6 +1424,26 @@
|
|
|
1042
1424
|
══════════════════════════════════════════════════════════════ */
|
|
1043
1425
|
:root {
|
|
1044
1426
|
|
|
1427
|
+
/* Accordion */
|
|
1428
|
+
--accordion-bg-default: var(--background-primary-surface);
|
|
1429
|
+
--accordion-bg-hover: var(--background-default-opacity-default); /* #181C25 @ 4% */
|
|
1430
|
+
--accordion-bg-active: var(--background-hover-default); /* #181C25 @ 8% */
|
|
1431
|
+
--accordion-bg-expand: var(--background-default-opacity-default); /* #181C25 @ 4% */
|
|
1432
|
+
--accordion-icon: var(--primitive-black-alpha-900); /* rgba(0,0,0,0.72) — Figma exact */
|
|
1433
|
+
--accordion-icon-disabled: var(--primitive-black-alpha-300); /* rgba(0,0,0,0.24) — Figma exact */
|
|
1434
|
+
--accordion-title: var(--text-prominent-default); /* #181C25 solid */
|
|
1435
|
+
--accordion-title-disabled: var(--primitive-black-alpha-300); /* rgba(0,0,0,0.24) — Figma exact */
|
|
1436
|
+
--accordion-subtitle: var(--primitive-black-alpha-600); /* rgba(0,0,0,0.48) — Figma exact */
|
|
1437
|
+
--accordion-subtitle-disabled: var(--primitive-black-alpha-300); /* rgba(0,0,0,0.24) — Figma exact */
|
|
1438
|
+
--accordion-border: var(--primitive-black-alpha-100); /* rgba(0,0,0,0.08) — Figma exact */
|
|
1439
|
+
--accordion-radius: 24px; /* ⚠ no standard token at 24px; nearest are rounded-3xl=22px, rounded-4xl=26px */
|
|
1440
|
+
--accordion-shadow-fill: 0px 1px 2px 0px rgba(0,0,0,0.04), 0px 2px 6px 0px rgba(0,0,0,0.08);
|
|
1441
|
+
|
|
1442
|
+
/* Breadcrumb */
|
|
1443
|
+
--breadcrumb-default: var(--primitive-black-alpha-900); /* rgba(0,0,0,0.72) — Figma exact */
|
|
1444
|
+
--breadcrumb-selected: var(--primitive-black-alpha-600); /* rgba(0,0,0,0.48) — Figma exact */
|
|
1445
|
+
--breadcrumb-sep: var(--primitive-black-alpha-600); /* rgba(0,0,0,0.48) — Figma exact */
|
|
1446
|
+
|
|
1045
1447
|
/* Button */
|
|
1046
1448
|
--button-primary-normal-bg-default: var(--primitive-coral-700);
|
|
1047
1449
|
--button-primary-normal-bg-hover: var(--primitive-coral-800);
|
|
@@ -1140,7 +1542,7 @@
|
|
|
1140
1542
|
--field-icon-subtle: var(--primitive-slate-alpha-600);
|
|
1141
1543
|
--field-icon-disabled: var(--primitive-slate-alpha-300);
|
|
1142
1544
|
--field-outline-bg-default: var(--primitive-slate-50);
|
|
1143
|
-
--field-outline-bg-hover: var(--primitive-slate-alpha-
|
|
1545
|
+
--field-outline-bg-hover: var(--primitive-slate-alpha-75);
|
|
1144
1546
|
--field-outline-bg-focus: var(--primitive-slate-50);
|
|
1145
1547
|
--field-outline-bg-disabled: var(--primitive-slate-50);
|
|
1146
1548
|
--field-outline-border-default: var(--primitive-slate-alpha-200);
|
|
@@ -1188,9 +1590,22 @@
|
|
|
1188
1590
|
--list-item-primary-bg-default: var(--primitive-slate-75);
|
|
1189
1591
|
--list-item-primary-bg-hover: var(--primitive-slate-alpha-100);
|
|
1190
1592
|
--list-item-primary-bg-pressed: var(--primitive-slate-alpha-200);
|
|
1593
|
+
--list-item-primary-bg-selected: var(--primitive-slate-alpha-100);
|
|
1594
|
+
--list-item-primary-bg-disabled: var(--primitive-slate-75);
|
|
1191
1595
|
--list-item-secondary-bg-default: var(--primitive-slate-50);
|
|
1192
1596
|
--list-item-secondary-bg-hover: var(--primitive-slate-alpha-100);
|
|
1193
1597
|
--list-item-secondary-bg-pressed: var(--primitive-slate-alpha-200);
|
|
1598
|
+
--list-item-secondary-bg-selected: var(--primitive-slate-alpha-100);
|
|
1599
|
+
--list-item-secondary-bg-disabled: var(--primitive-slate-50);
|
|
1600
|
+
|
|
1601
|
+
/* Toggle */
|
|
1602
|
+
--toggle-track-off: var(--primitive-slate-alpha-200); /* #181C25 @ 16% */
|
|
1603
|
+
--toggle-track-off-hover: var(--primitive-slate-alpha-300); /* #181C25 @ 24% */
|
|
1604
|
+
--toggle-track-off-active: var(--primitive-slate-alpha-600); /* #181C25 @ 48% */
|
|
1605
|
+
--toggle-track-on: var(--primitive-green-alpha-1000); /* green @ 80% */
|
|
1606
|
+
--toggle-track-on-hover: var(--primitive-green-alpha-1100); /* green @ 88% */
|
|
1607
|
+
--toggle-track-on-active: var(--primitive-green-900); /* #007a22 solid */
|
|
1608
|
+
--toggle-knob: var(--primitive-slate-50); /* #ffffff always */
|
|
1194
1609
|
|
|
1195
1610
|
/* Search Field */
|
|
1196
1611
|
--search-field-text-prominent: var(--primitive-slate-1200);
|
|
@@ -1199,7 +1614,7 @@
|
|
|
1199
1614
|
--search-field-icon-prominent: var(--primitive-slate-1200);
|
|
1200
1615
|
--search-field-icon-subtle: var(--primitive-slate-alpha-600);
|
|
1201
1616
|
--search-field-outline-bg-default: var(--primitive-slate-50);
|
|
1202
|
-
--search-field-outline-bg-hover: var(--primitive-slate-alpha-
|
|
1617
|
+
--search-field-outline-bg-hover: var(--primitive-slate-alpha-75);
|
|
1203
1618
|
--search-field-outline-bg-focus: var(--primitive-slate-50);
|
|
1204
1619
|
--search-field-outline-bg-disabled: var(--primitive-slate-50);
|
|
1205
1620
|
--search-field-outline-border-default: var(--primitive-slate-alpha-200);
|
|
@@ -1220,7 +1635,7 @@
|
|
|
1220
1635
|
--dropdown-field-icon-subtle: var(--primitive-slate-alpha-600);
|
|
1221
1636
|
--dropdown-field-icon-disabled: var(--primitive-slate-alpha-300);
|
|
1222
1637
|
--dropdown-field-outline-bg-default: var(--primitive-slate-50);
|
|
1223
|
-
--dropdown-field-outline-bg-hover: var(--primitive-slate-alpha-
|
|
1638
|
+
--dropdown-field-outline-bg-hover: var(--primitive-slate-alpha-75);
|
|
1224
1639
|
--dropdown-field-outline-bg-focus: var(--primitive-slate-alpha-200);
|
|
1225
1640
|
--dropdown-field-outline-bg-disabled: var(--primitive-slate-50);
|
|
1226
1641
|
--dropdown-field-outline-border-default: var(--primitive-slate-alpha-200);
|
|
@@ -1263,16 +1678,18 @@
|
|
|
1263
1678
|
--tab-bg-pressed: var(--primitive-slate-alpha-200);
|
|
1264
1679
|
--tab-border-default: var(--primitive-slate-alpha-100);
|
|
1265
1680
|
--tab-border-focus: var(--primitive-slate-1200);
|
|
1681
|
+
--tab-border-selected: var(--primitive-coral-700);
|
|
1266
1682
|
|
|
1267
1683
|
/* Segmented Control */
|
|
1268
|
-
--segmented-control-text-prominent: var(--primitive-slate-1200);
|
|
1269
|
-
--segmented-control-text-
|
|
1684
|
+
--segmented-control-text-prominent: var(--primitive-slate-1200); /* #181C25 solid — selected label */
|
|
1685
|
+
--segmented-control-text-default: var(--primitive-slate-alpha-900); /* #181C25 @ 72% — unselected label */
|
|
1686
|
+
--segmented-control-text-disabled: var(--primitive-slate-alpha-200);
|
|
1270
1687
|
--segmented-control-icon-prominent: var(--primitive-slate-1200);
|
|
1271
|
-
--segmented-control-icon-disabled:
|
|
1272
|
-
--segmented-control-container-bg:
|
|
1688
|
+
--segmented-control-icon-disabled: var(--primitive-slate-alpha-200);
|
|
1689
|
+
--segmented-control-container-bg: var(--primitive-mono-alpha-4); /* rgba(0,0,0,0.04) — matches Figma */
|
|
1273
1690
|
--segmented-control-segment-bg-selected: var(--primitive-slate-50);
|
|
1274
|
-
--segmented-control-segment-bg-hover:
|
|
1275
|
-
--segmented-control-segment-bg-pressed:
|
|
1691
|
+
--segmented-control-segment-bg-hover: var(--primitive-slate-alpha-100);
|
|
1692
|
+
--segmented-control-segment-bg-pressed: var(--primitive-slate-alpha-200);
|
|
1276
1693
|
|
|
1277
1694
|
/* Tooltip */
|
|
1278
1695
|
--tooltip-text-default: var(--primitive-slate-50);
|
|
@@ -1314,6 +1731,18 @@
|
|
|
1314
1731
|
--tag-fill-bg-green: var(--primitive-green-alpha-100);
|
|
1315
1732
|
--tag-fill-bg-blue: var(--primitive-blue-alpha-100);
|
|
1316
1733
|
|
|
1734
|
+
/* Chip */
|
|
1735
|
+
--chip-text-prominent: var(--primitive-slate-1200);
|
|
1736
|
+
--chip-text-disabled: var(--primitive-slate-alpha-200);
|
|
1737
|
+
--chip-border-default: var(--primitive-slate-alpha-200);
|
|
1738
|
+
--chip-border-selected: var(--primitive-slate-1200);
|
|
1739
|
+
--chip-border-disabled: var(--primitive-slate-alpha-100);
|
|
1740
|
+
--chip-bg-hover: var(--primitive-slate-alpha-100);
|
|
1741
|
+
--chip-bg-pressed: var(--primitive-slate-alpha-200);
|
|
1742
|
+
--chip-bg-selected: var(--primitive-slate-alpha-100);
|
|
1743
|
+
--chip-icon-prominent: var(--primitive-slate-1200);
|
|
1744
|
+
--chip-icon-disabled: var(--primitive-slate-alpha-200);
|
|
1745
|
+
|
|
1317
1746
|
/* Snackbar */
|
|
1318
1747
|
--snackbar-bg-default: var(--primitive-slate-1200);
|
|
1319
1748
|
--snackbar-bg-fail: var(--primitive-red-900);
|
|
@@ -1389,6 +1818,33 @@
|
|
|
1389
1818
|
--notification-bg-button-default: var(--primitive-slate-alpha-75);
|
|
1390
1819
|
--notification-bg-button-press: var(--primitive-slate-alpha-100);
|
|
1391
1820
|
|
|
1821
|
+
/* Notification size tokens (from component-notification.mode-1) */
|
|
1822
|
+
--notification-padding-vertical: 16px;
|
|
1823
|
+
--notification-padding-horizontal: 16px;
|
|
1824
|
+
--notification-min-width-banner: 256px;
|
|
1825
|
+
--notification-max-width-banner: 440px;
|
|
1826
|
+
--notification-gap-icon-content: 16px; /* size-gap-3 */
|
|
1827
|
+
--notification-radius: 16px;
|
|
1828
|
+
--notification-width-button: 80px;
|
|
1829
|
+
--notification-gap-sm: 4px; /* size-gap */
|
|
1830
|
+
--notification-height-item: 99px;
|
|
1831
|
+
--notification-gap-md: 8px; /* size-gap-2 */
|
|
1832
|
+
--notification-width-divider: 1px;
|
|
1833
|
+
--notification-size-icon-container: 32px; /* size-width-height-icon-container-2 (item) */
|
|
1834
|
+
--notification-radius-icon: 999px; /* size-radius-2 */
|
|
1835
|
+
/* size-width-height-icon-contianer(sic) = 24px — banner icon container */
|
|
1836
|
+
--notification-size-icon-banner: 24px;
|
|
1837
|
+
/* Icon SVG size — both banner and item use 20px per Figma */
|
|
1838
|
+
--notification-size-icon: 20px;
|
|
1839
|
+
/* Font sizes from tokens (size-12/14/16) */
|
|
1840
|
+
--notification-font-size-xs: 12px; /* size-font-size-12 */
|
|
1841
|
+
--notification-font-size-sm: 14px; /* size-font-size-14 */
|
|
1842
|
+
--notification-font-size-md: 16px; /* size-font-size-16 */
|
|
1843
|
+
/* Font weights */
|
|
1844
|
+
--notification-font-weight-regular: 400; /* font-regular */
|
|
1845
|
+
--notification-font-weight-medium: 500; /* font-medium */
|
|
1846
|
+
--notification-font-weight-semibold: 600; /* font-semibold */
|
|
1847
|
+
|
|
1392
1848
|
/* Bottom Sheet */
|
|
1393
1849
|
--bottom-sheet-bg-sheet: var(--primitive-slate-50);
|
|
1394
1850
|
--bottom-sheet-bg-handle-bar: var(--primitive-black-alpha-300);
|
|
@@ -1420,10 +1876,442 @@
|
|
|
1420
1876
|
--progress-bar-bg-static-dark-progress-red: var(--primitive-red-500);
|
|
1421
1877
|
--progress-bar-bg-static-dark-progress-yellow: var(--primitive-yellow-500);
|
|
1422
1878
|
--progress-bar-bg-static-dark-progress-blue: var(--primitive-blue-500);
|
|
1879
|
+
|
|
1880
|
+
/* Search Field sizes */
|
|
1881
|
+
--search-field-radius: 999px;
|
|
1882
|
+
--search-field-font-weight: 400;
|
|
1883
|
+
--search-field-sm-height: 40px;
|
|
1884
|
+
--search-field-sm-padding-horizontal: 16px;
|
|
1885
|
+
--search-field-sm-gap: 8px;
|
|
1886
|
+
--search-field-sm-font-size: 14px;
|
|
1887
|
+
--search-field-sm-icon-size: 20px;
|
|
1888
|
+
--search-field-sm-border-width-focus: 1.5px;
|
|
1889
|
+
--search-field-md-height: 48px;
|
|
1890
|
+
--search-field-md-padding-horizontal: 20px;
|
|
1891
|
+
--search-field-md-gap: 8px;
|
|
1892
|
+
--search-field-md-font-size: 16px;
|
|
1893
|
+
--search-field-md-icon-size: 24px;
|
|
1894
|
+
--search-field-md-border-width-focus: 1.5px;
|
|
1895
|
+
}
|
|
1896
|
+
|
|
1897
|
+
/* ══════════════════════════════════════════════════════════════
|
|
1898
|
+
LAYER 1 — PRIMITIVE SIZE SCALE
|
|
1899
|
+
Raw px values. Sourced from component token audit.
|
|
1900
|
+
These are public API — but use semantic tokens in components,
|
|
1901
|
+
not primitives directly. Renaming any token here is a breaking change.
|
|
1902
|
+
══════════════════════════════════════════════════════════════ */
|
|
1903
|
+
:root {
|
|
1904
|
+
--primitive-size-1: 1px;
|
|
1905
|
+
--primitive-size-1-5: 1.5px;
|
|
1906
|
+
--primitive-size-2: 2px;
|
|
1907
|
+
--primitive-size-4: 4px;
|
|
1908
|
+
--primitive-size-6: 6px;
|
|
1909
|
+
--primitive-size-8: 8px;
|
|
1910
|
+
--primitive-size-12: 12px;
|
|
1911
|
+
--primitive-size-14: 14px;
|
|
1912
|
+
--primitive-size-16: 16px;
|
|
1913
|
+
--primitive-size-18: 18px;
|
|
1914
|
+
--primitive-size-20: 20px;
|
|
1915
|
+
--primitive-size-24: 24px;
|
|
1916
|
+
--primitive-size-32: 32px;
|
|
1917
|
+
--primitive-size-40: 40px;
|
|
1918
|
+
--primitive-size-48: 48px;
|
|
1919
|
+
--primitive-size-56: 56px;
|
|
1920
|
+
--primitive-size-64: 64px;
|
|
1921
|
+
--primitive-size-72: 72px;
|
|
1922
|
+
--primitive-size-80: 80px;
|
|
1923
|
+
--primitive-size-96: 96px;
|
|
1924
|
+
--primitive-size-100: 100px;
|
|
1925
|
+
--primitive-size-108: 108px;
|
|
1926
|
+
--primitive-size-124: 124px;
|
|
1927
|
+
--primitive-size-240: 240px;
|
|
1928
|
+
--primitive-size-999: 999px;
|
|
1929
|
+
}
|
|
1930
|
+
|
|
1931
|
+
/* ══════════════════════════════════════════════════════════════
|
|
1932
|
+
LAYER 2 — SEMANTIC SIZE TOKENS
|
|
1933
|
+
Purpose-based aliases. Reference primitives only.
|
|
1934
|
+
These are public API — rename = breaking change for consumers.
|
|
1935
|
+
══════════════════════════════════════════════════════════════ */
|
|
1936
|
+
:root {
|
|
1937
|
+
/* Border widths */
|
|
1938
|
+
--semantic-size-border-1: var(--primitive-size-1);
|
|
1939
|
+
--semantic-size-border-1-5: var(--primitive-size-1-5);
|
|
1940
|
+
--semantic-size-border-2: var(--primitive-size-2);
|
|
1941
|
+
|
|
1942
|
+
/* Corner radii */
|
|
1943
|
+
--semantic-size-radius-4: var(--primitive-size-4);
|
|
1944
|
+
--semantic-size-radius-8: var(--primitive-size-8);
|
|
1945
|
+
--semantic-size-radius-999: var(--primitive-size-999);
|
|
1946
|
+
|
|
1947
|
+
/* Spacing — padding, gap, margin */
|
|
1948
|
+
--semantic-size-spacing-4: var(--primitive-size-4);
|
|
1949
|
+
--semantic-size-spacing-6: var(--primitive-size-6);
|
|
1950
|
+
--semantic-size-spacing-8: var(--primitive-size-8);
|
|
1951
|
+
--semantic-size-spacing-12: var(--primitive-size-12);
|
|
1952
|
+
--semantic-size-spacing-16: var(--primitive-size-16);
|
|
1953
|
+
--semantic-size-spacing-20: var(--primitive-size-20);
|
|
1954
|
+
|
|
1955
|
+
/* Fixed dimensions — height, width, min-width, icon-size, dot-size, font-size */
|
|
1956
|
+
--semantic-size-width-height-4: var(--primitive-size-4);
|
|
1957
|
+
--semantic-size-width-height-8: var(--primitive-size-8);
|
|
1958
|
+
--semantic-size-width-height-12: var(--primitive-size-12);
|
|
1959
|
+
--semantic-size-width-height-14: var(--primitive-size-14);
|
|
1960
|
+
--semantic-size-width-height-16: var(--primitive-size-16);
|
|
1961
|
+
--semantic-size-width-height-18: var(--primitive-size-18);
|
|
1962
|
+
--semantic-size-width-height-20: var(--primitive-size-20);
|
|
1963
|
+
--semantic-size-width-height-24: var(--primitive-size-24);
|
|
1964
|
+
--semantic-size-width-height-32: var(--primitive-size-32);
|
|
1965
|
+
--semantic-size-width-height-40: var(--primitive-size-40);
|
|
1966
|
+
--semantic-size-width-height-48: var(--primitive-size-48);
|
|
1967
|
+
--semantic-size-width-height-56: var(--primitive-size-56);
|
|
1968
|
+
--semantic-size-width-height-64: var(--primitive-size-64);
|
|
1969
|
+
--semantic-size-width-height-72: var(--primitive-size-72);
|
|
1970
|
+
--semantic-size-width-height-80: var(--primitive-size-80);
|
|
1971
|
+
--semantic-size-width-height-96: var(--primitive-size-96);
|
|
1972
|
+
--semantic-size-width-height-100: var(--primitive-size-100);
|
|
1973
|
+
--semantic-size-width-height-108: var(--primitive-size-108);
|
|
1974
|
+
--semantic-size-width-height-124: var(--primitive-size-124);
|
|
1975
|
+
--semantic-size-width-height-240: var(--primitive-size-240);
|
|
1976
|
+
}
|
|
1977
|
+
|
|
1978
|
+
/* ══════════════════════════════════════════════════════════════
|
|
1979
|
+
LAYER 3 — COMPONENT SIZE TOKENS
|
|
1980
|
+
Component-specific sizes. Reference semantic layer only.
|
|
1981
|
+
══════════════════════════════════════════════════════════════ */
|
|
1982
|
+
:root {
|
|
1983
|
+
/* ── Button ── */
|
|
1984
|
+
--button-sm-height: var(--semantic-size-width-height-32);
|
|
1985
|
+
--button-sm-padding-horizontal: var(--semantic-size-spacing-12);
|
|
1986
|
+
--button-sm-min-width: var(--semantic-size-width-height-64);
|
|
1987
|
+
--button-sm-gap: var(--semantic-size-spacing-8);
|
|
1988
|
+
--button-sm-font-size: var(--semantic-size-width-height-14);
|
|
1989
|
+
--button-sm-font-weight: 600;
|
|
1990
|
+
--button-sm-radius: var(--semantic-size-radius-999);
|
|
1991
|
+
--button-sm-border-width: var(--semantic-size-border-1-5);
|
|
1992
|
+
--button-sm-icon-size: var(--semantic-size-width-height-32);
|
|
1993
|
+
|
|
1994
|
+
--button-md-height: var(--semantic-size-width-height-40);
|
|
1995
|
+
--button-md-padding-horizontal: var(--semantic-size-spacing-16);
|
|
1996
|
+
--button-md-min-width: var(--semantic-size-width-height-80);
|
|
1997
|
+
--button-md-gap: var(--semantic-size-spacing-8);
|
|
1998
|
+
--button-md-font-size: var(--semantic-size-width-height-16);
|
|
1999
|
+
--button-md-font-weight: 600;
|
|
2000
|
+
--button-md-radius: var(--semantic-size-radius-999);
|
|
2001
|
+
--button-md-border-width: var(--semantic-size-border-1-5);
|
|
2002
|
+
--button-md-icon-size: var(--semantic-size-width-height-40);
|
|
2003
|
+
|
|
2004
|
+
--button-lg-height: var(--semantic-size-width-height-48);
|
|
2005
|
+
--button-lg-padding-horizontal: var(--semantic-size-spacing-20);
|
|
2006
|
+
--button-lg-min-width: var(--semantic-size-width-height-96);
|
|
2007
|
+
--button-lg-gap: var(--semantic-size-spacing-8);
|
|
2008
|
+
--button-lg-font-size: var(--semantic-size-width-height-18);
|
|
2009
|
+
--button-lg-font-weight: 600;
|
|
2010
|
+
--button-lg-radius: var(--semantic-size-radius-999);
|
|
2011
|
+
--button-lg-border-width: var(--semantic-size-border-1-5);
|
|
2012
|
+
--button-lg-icon-size: var(--semantic-size-width-height-48);
|
|
2013
|
+
|
|
2014
|
+
/* ── Badge ── */
|
|
2015
|
+
--badge-sm-height: var(--semantic-size-width-height-20);
|
|
2016
|
+
--badge-sm-padding-horizontal: var(--semantic-size-spacing-6);
|
|
2017
|
+
--badge-sm-radius: var(--semantic-size-radius-999);
|
|
2018
|
+
--badge-sm-min-width: var(--semantic-size-width-height-20);
|
|
2019
|
+
--badge-sm-dot-size: var(--semantic-size-width-height-8);
|
|
2020
|
+
--badge-sm-font-size: var(--semantic-size-width-height-12);
|
|
2021
|
+
|
|
2022
|
+
--badge-md-height: var(--semantic-size-width-height-24);
|
|
2023
|
+
--badge-md-padding-horizontal: var(--semantic-size-spacing-6);
|
|
2024
|
+
--badge-md-radius: var(--semantic-size-radius-999);
|
|
2025
|
+
--badge-md-min-width: var(--semantic-size-width-height-24);
|
|
2026
|
+
--badge-md-dot-size: var(--semantic-size-width-height-16);
|
|
2027
|
+
--badge-md-font-size: var(--semantic-size-width-height-14);
|
|
2028
|
+
--badge-sm-max-width: 36px;
|
|
2029
|
+
--badge-md-max-width: 44px;
|
|
2030
|
+
--badge-font-weight: 500;
|
|
2031
|
+
|
|
2032
|
+
/* ── Tab ── */
|
|
2033
|
+
--tab-sm-height: var(--semantic-size-width-height-32);
|
|
2034
|
+
--tab-sm-padding-horizontal: var(--semantic-size-spacing-12);
|
|
2035
|
+
--tab-sm-min-width: var(--semantic-size-width-height-72);
|
|
2036
|
+
--tab-sm-font-size: var(--semantic-size-width-height-14);
|
|
2037
|
+
--tab-sm-font-weight-default: 400;
|
|
2038
|
+
--tab-sm-font-weight-selected: 600;
|
|
2039
|
+
--tab-sm-radius: var(--semantic-size-radius-4);
|
|
2040
|
+
--tab-sm-border-width: var(--semantic-size-border-1-5);
|
|
2041
|
+
|
|
2042
|
+
--tab-md-height: var(--semantic-size-width-height-40);
|
|
2043
|
+
--tab-md-padding-horizontal: var(--semantic-size-spacing-16);
|
|
2044
|
+
--tab-md-min-width: var(--semantic-size-width-height-80);
|
|
2045
|
+
--tab-md-font-size: var(--semantic-size-width-height-16);
|
|
2046
|
+
--tab-md-font-weight-default: 400;
|
|
2047
|
+
--tab-md-font-weight-selected: 600;
|
|
2048
|
+
--tab-md-radius: var(--semantic-size-radius-4);
|
|
2049
|
+
--tab-md-border-width: var(--semantic-size-border-1-5);
|
|
2050
|
+
|
|
2051
|
+
--tab-lg-height: var(--semantic-size-width-height-48);
|
|
2052
|
+
--tab-lg-padding-horizontal: var(--semantic-size-spacing-20);
|
|
2053
|
+
--tab-lg-min-width: var(--semantic-size-width-height-96);
|
|
2054
|
+
--tab-lg-font-size: var(--semantic-size-width-height-18);
|
|
2055
|
+
--tab-lg-font-weight-default: 400;
|
|
2056
|
+
--tab-lg-font-weight-selected: 600;
|
|
2057
|
+
--tab-lg-radius: var(--semantic-size-radius-4);
|
|
2058
|
+
--tab-lg-border-width: var(--semantic-size-border-1-5);
|
|
2059
|
+
|
|
2060
|
+
/* ── Progress Bar ── */
|
|
2061
|
+
--progress-sm-height: var(--semantic-size-width-height-4);
|
|
2062
|
+
--progress-sm-radius: var(--semantic-size-radius-999);
|
|
2063
|
+
--progress-md-height: var(--semantic-size-width-height-8);
|
|
2064
|
+
--progress-md-radius: var(--semantic-size-radius-999);
|
|
2065
|
+
|
|
2066
|
+
/* ── Link ── */
|
|
2067
|
+
--link-sm-font-size: var(--semantic-size-width-height-12);
|
|
2068
|
+
--link-sm-font-weight: 500;
|
|
2069
|
+
--link-md-font-size: var(--semantic-size-width-height-14);
|
|
2070
|
+
--link-md-font-weight: 500;
|
|
2071
|
+
--link-lg-font-size: var(--semantic-size-width-height-16);
|
|
2072
|
+
--link-lg-font-weight: 500;
|
|
2073
|
+
|
|
2074
|
+
/* ── Pagination ── */
|
|
2075
|
+
--pagination-number-height: var(--semantic-size-width-height-32);
|
|
2076
|
+
--pagination-number-width: var(--semantic-size-width-height-32);
|
|
2077
|
+
--pagination-radius: var(--semantic-size-radius-999);
|
|
2078
|
+
--pagination-gap: var(--semantic-size-spacing-8);
|
|
2079
|
+
--pagination-font-size: var(--semantic-size-width-height-14);
|
|
2080
|
+
--pagination-font-default-weight: 400;
|
|
2081
|
+
--pagination-font-selected-weight: 500;
|
|
2082
|
+
--pagination-dot-size: var(--semantic-size-width-height-8);
|
|
2083
|
+
--pagination-border-width-selected: var(--semantic-size-border-1-5);
|
|
2084
|
+
|
|
2085
|
+
/* ── Tooltip ── */
|
|
2086
|
+
--tooltip-radius: var(--semantic-size-radius-8);
|
|
2087
|
+
--tooltip-padding-horizontal: var(--semantic-size-spacing-12);
|
|
2088
|
+
--tooltip-padding-vertical: var(--semantic-size-spacing-8);
|
|
2089
|
+
--tooltip-font-size: var(--semantic-size-width-height-12);
|
|
2090
|
+
--tooltip-font-weight: 500;
|
|
2091
|
+
--tooltip-min-width: var(--semantic-size-width-height-48);
|
|
2092
|
+
--tooltip-max-width: var(--semantic-size-width-height-240);
|
|
2093
|
+
|
|
2094
|
+
/* ── Chip ── */
|
|
2095
|
+
--chip-sm-height: var(--semantic-size-width-height-24);
|
|
2096
|
+
--chip-sm-padding-horizontal: var(--semantic-size-spacing-8);
|
|
2097
|
+
--chip-sm-font-size: var(--semantic-size-width-height-12);
|
|
2098
|
+
--chip-sm-font-weight: 500;
|
|
2099
|
+
--chip-sm-gap: var(--semantic-size-spacing-4);
|
|
2100
|
+
--chip-sm-radius: var(--semantic-size-radius-999);
|
|
2101
|
+
--chip-sm-border-width: var(--semantic-size-border-1);
|
|
2102
|
+
--chip-sm-border-width-selected: var(--semantic-size-border-1-5);
|
|
2103
|
+
|
|
2104
|
+
--chip-md-height: var(--semantic-size-width-height-32);
|
|
2105
|
+
--chip-md-padding-horizontal: var(--semantic-size-spacing-12);
|
|
2106
|
+
--chip-md-font-size: var(--semantic-size-width-height-14);
|
|
2107
|
+
--chip-md-font-weight: 500;
|
|
2108
|
+
--chip-md-gap: var(--semantic-size-spacing-8);
|
|
2109
|
+
--chip-md-radius: var(--semantic-size-radius-999);
|
|
2110
|
+
--chip-md-border-width: var(--semantic-size-border-1);
|
|
2111
|
+
--chip-md-border-width-selected: var(--semantic-size-border-1-5);
|
|
2112
|
+
|
|
2113
|
+
--chip-lg-height: var(--semantic-size-width-height-40);
|
|
2114
|
+
--chip-lg-padding-horizontal: var(--semantic-size-spacing-16);
|
|
2115
|
+
--chip-lg-font-size: var(--semantic-size-width-height-16);
|
|
2116
|
+
--chip-lg-font-weight: 500;
|
|
2117
|
+
--chip-lg-gap: var(--semantic-size-spacing-8);
|
|
2118
|
+
--chip-lg-radius: var(--semantic-size-radius-999);
|
|
2119
|
+
--chip-lg-border-width: var(--semantic-size-border-1);
|
|
2120
|
+
--chip-lg-border-width-selected: var(--semantic-size-border-1-5);
|
|
2121
|
+
|
|
2122
|
+
/* ── Tag ── */
|
|
2123
|
+
--tag-sm-height: var(--semantic-size-width-height-24);
|
|
2124
|
+
--tag-sm-padding-horizontal: var(--semantic-size-spacing-8);
|
|
2125
|
+
--tag-sm-gap: var(--semantic-size-spacing-4);
|
|
2126
|
+
--tag-sm-font-size: var(--semantic-size-width-height-12);
|
|
2127
|
+
--tag-sm-font-weight: 500;
|
|
2128
|
+
--tag-sm-radius: var(--semantic-size-radius-4);
|
|
2129
|
+
--tag-sm-min-width: var(--semantic-size-width-height-32);
|
|
2130
|
+
--tag-sm-icon-size: 16px;
|
|
2131
|
+
|
|
2132
|
+
--tag-md-height: var(--semantic-size-width-height-32);
|
|
2133
|
+
--tag-md-padding-horizontal: var(--semantic-size-spacing-12);
|
|
2134
|
+
--tag-md-gap: var(--semantic-size-spacing-8);
|
|
2135
|
+
--tag-md-font-size: var(--semantic-size-width-height-14);
|
|
2136
|
+
--tag-md-font-weight: 500;
|
|
2137
|
+
--tag-md-radius: var(--semantic-size-radius-4);
|
|
2138
|
+
--tag-md-min-width: var(--semantic-size-width-height-40);
|
|
2139
|
+
--tag-md-icon-size: 18px;
|
|
2140
|
+
|
|
2141
|
+
/* ── Chip size tokens ── */
|
|
2142
|
+
--chip-radius: var(--semantic-size-radius-999);
|
|
2143
|
+
--chip-border-width: 1px;
|
|
2144
|
+
--chip-border-width-selected: 1.5px;
|
|
2145
|
+
|
|
2146
|
+
--chip-sm-height: var(--semantic-size-width-height-24);
|
|
2147
|
+
--chip-sm-padding-horizontal: var(--semantic-size-spacing-8);
|
|
2148
|
+
--chip-sm-font-size: var(--semantic-size-width-height-12);
|
|
2149
|
+
--chip-sm-gap: var(--semantic-size-spacing-4);
|
|
2150
|
+
--chip-sm-icon-size: var(--semantic-size-width-height-16);
|
|
2151
|
+
|
|
2152
|
+
--chip-md-height: var(--semantic-size-width-height-32);
|
|
2153
|
+
--chip-md-padding-horizontal: var(--semantic-size-spacing-12);
|
|
2154
|
+
--chip-md-font-size: var(--semantic-size-width-height-14);
|
|
2155
|
+
--chip-md-gap: var(--semantic-size-spacing-8);
|
|
2156
|
+
--chip-md-icon-size: var(--semantic-size-width-height-20);
|
|
2157
|
+
|
|
2158
|
+
--chip-lg-height: var(--semantic-size-width-height-40);
|
|
2159
|
+
--chip-lg-padding-horizontal: var(--semantic-size-spacing-16);
|
|
2160
|
+
--chip-lg-font-size: var(--semantic-size-width-height-16);
|
|
2161
|
+
--chip-lg-gap: var(--semantic-size-spacing-8);
|
|
2162
|
+
--chip-lg-icon-size: var(--semantic-size-width-height-24);
|
|
2163
|
+
|
|
2164
|
+
/* ── Loading Spinner ── */
|
|
2165
|
+
--spinner-radius: var(--semantic-size-radius-999);
|
|
2166
|
+
|
|
2167
|
+
/* ── Field sizes ── */
|
|
2168
|
+
--field-height: var(--semantic-size-width-height-56);
|
|
2169
|
+
--field-sm-height: var(--semantic-size-width-height-32);
|
|
2170
|
+
--field-md-height: var(--semantic-size-width-height-40);
|
|
2171
|
+
--field-lg-height: var(--semantic-size-width-height-56);
|
|
2172
|
+
--field-radius: var(--semantic-size-radius-8);
|
|
2173
|
+
--field-font-size-md: var(--semantic-size-width-height-16);
|
|
2174
|
+
--field-font-size-sm: var(--semantic-size-width-height-12);
|
|
2175
|
+
--field-font-weight: 400;
|
|
2176
|
+
--field-border-width: var(--semantic-size-border-1);
|
|
2177
|
+
--field-border-width-focus: var(--semantic-size-border-1-5);
|
|
2178
|
+
--field-spacing-xs: var(--semantic-size-spacing-4);
|
|
2179
|
+
--field-spacing-sm: var(--semantic-size-spacing-8);
|
|
2180
|
+
--field-spacing-md: var(--semantic-size-spacing-16);
|
|
2181
|
+
--field-min-width: var(--semantic-size-width-height-100);
|
|
2182
|
+
|
|
2183
|
+
/* ── Search Field ── */
|
|
2184
|
+
--search-field-sm-height: var(--semantic-size-width-height-40);
|
|
2185
|
+
--search-field-sm-padding-horizontal: var(--semantic-size-spacing-16);
|
|
2186
|
+
--search-field-sm-gap: var(--semantic-size-spacing-8);
|
|
2187
|
+
--search-field-sm-font-size: var(--semantic-size-width-height-14);
|
|
2188
|
+
--search-field-sm-radius: var(--semantic-size-radius-999);
|
|
2189
|
+
--search-field-sm-border-width: var(--semantic-size-border-1);
|
|
2190
|
+
--search-field-sm-border-width-focus: var(--semantic-size-border-1-5);
|
|
2191
|
+
|
|
2192
|
+
--search-field-md-height: var(--semantic-size-width-height-48);
|
|
2193
|
+
--search-field-md-padding-horizontal: var(--semantic-size-spacing-20);
|
|
2194
|
+
--search-field-md-gap: var(--semantic-size-spacing-8);
|
|
2195
|
+
--search-field-md-font-size: var(--semantic-size-width-height-16);
|
|
2196
|
+
--search-field-md-radius: var(--semantic-size-radius-999);
|
|
2197
|
+
--search-field-md-border-width: var(--semantic-size-border-1);
|
|
2198
|
+
--search-field-md-border-width-focus: var(--semantic-size-border-1-5);
|
|
2199
|
+
|
|
2200
|
+
/* ── Segmented Control ── */
|
|
2201
|
+
--segmented-md-container-height: var(--semantic-size-width-height-40);
|
|
2202
|
+
--segmented-md-container-radius: var(--semantic-size-radius-999);
|
|
2203
|
+
--segmented-md-container-padding: var(--semantic-size-spacing-4);
|
|
2204
|
+
--segmented-md-container-gap: var(--semantic-size-spacing-4);
|
|
2205
|
+
--segmented-md-container-min-width: var(--semantic-size-width-height-108);
|
|
2206
|
+
--segmented-md-segment-height: var(--semantic-size-width-height-32);
|
|
2207
|
+
--segmented-md-segment-radius: var(--semantic-size-radius-999);
|
|
2208
|
+
--segmented-md-segment-padding: var(--semantic-size-spacing-12);
|
|
2209
|
+
--segmented-md-segment-min-width: var(--semantic-size-width-height-48);
|
|
2210
|
+
--segmented-md-font-size: var(--semantic-size-width-height-14);
|
|
2211
|
+
--segmented-md-font-weight-default: 400;
|
|
2212
|
+
--segmented-md-font-weight-selected: 600;
|
|
2213
|
+
|
|
2214
|
+
--segmented-lg-container-height: var(--semantic-size-width-height-48);
|
|
2215
|
+
--segmented-lg-container-radius: var(--semantic-size-radius-999);
|
|
2216
|
+
--segmented-lg-container-padding: var(--semantic-size-spacing-4);
|
|
2217
|
+
--segmented-lg-container-gap: var(--semantic-size-spacing-4);
|
|
2218
|
+
--segmented-lg-container-min-width: var(--semantic-size-width-height-124);
|
|
2219
|
+
--segmented-lg-segment-height: var(--semantic-size-width-height-40);
|
|
2220
|
+
--segmented-lg-segment-radius: var(--semantic-size-radius-999);
|
|
2221
|
+
--segmented-lg-segment-padding: var(--semantic-size-spacing-16);
|
|
2222
|
+
--segmented-lg-segment-min-width: var(--semantic-size-width-height-56);
|
|
2223
|
+
--segmented-lg-font-size: var(--semantic-size-width-height-16);
|
|
2224
|
+
--segmented-lg-font-weight-default: 400;
|
|
2225
|
+
--segmented-lg-font-weight-selected: 600;
|
|
2226
|
+
/* Elevation shadow for selected segment — layer-1: y=1 blur=2 (4% black), layer-2: y=2 blur=6 (8% black) */
|
|
2227
|
+
--segmented-elevation-selected: 0px 1px 2px 0px var(--primitive-black-alpha-75), 0px 2px 6px 0px var(--primitive-black-alpha-100);
|
|
2228
|
+
|
|
2229
|
+
/* Section Message size tokens */
|
|
2230
|
+
--section-message-radius: 16px;
|
|
2231
|
+
--section-message-padding-horizontal: var(--semantic-size-spacing-16);
|
|
2232
|
+
--section-message-padding-vertical: var(--semantic-size-spacing-16);
|
|
2233
|
+
--section-message-gap-horizontal: var(--semantic-size-spacing-8);
|
|
2234
|
+
--section-message-gap-vertical-1: var(--semantic-size-spacing-8);
|
|
2235
|
+
--section-message-sm-gap-vertical-2: 14px;
|
|
2236
|
+
--section-message-md-gap-vertical-2: 12px;
|
|
2237
|
+
--section-message-padding-vertical-2: 1.5px;
|
|
2238
|
+
--section-message-sm-font-size-message: var(--semantic-size-width-height-14);
|
|
2239
|
+
--section-message-sm-font-size-title: var(--semantic-size-width-height-16);
|
|
2240
|
+
--section-message-sm-icon-size: var(--semantic-size-width-height-20);
|
|
2241
|
+
--section-message-md-font-size-message: var(--semantic-size-width-height-16);
|
|
2242
|
+
--section-message-md-font-size-title: var(--semantic-size-width-height-18);
|
|
2243
|
+
--section-message-md-icon-size: 22px;
|
|
2244
|
+
|
|
2245
|
+
/* Snackbar size tokens (component-snackbar/mode-1) */
|
|
2246
|
+
--snackbar-max-width: 560px; /* ⚠ no semantic-size-560 */
|
|
2247
|
+
--snackbar-min-width: 320px; /* ⚠ no semantic-size-320 */
|
|
2248
|
+
--snackbar-height: var(--semantic-size-width-height-48);
|
|
2249
|
+
--snackbar-radius: var(--semantic-size-radius-8);
|
|
2250
|
+
--snackbar-font-size: var(--semantic-size-width-height-14);
|
|
2251
|
+
--snackbar-font-weight: 400; /* ⚠ no semantic var for weight-400 */
|
|
2252
|
+
--snackbar-spacing-1: var(--semantic-size-spacing-16);
|
|
2253
|
+
--snackbar-spacing-2: var(--semantic-size-spacing-8);
|
|
2254
|
+
--snackbar-padding-v: var(--semantic-size-spacing-8);
|
|
2255
|
+
--snackbar-text-max-width: 528px; /* ⚠ no semantic-size-528 */
|
|
2256
|
+
--snackbar-shadow: 0 2px 4px 0 #0000000a, 0 8px 24px -4px #00000014, 0 16px 48px -6px #0000000a;
|
|
2257
|
+
/* Button sm/ghost-static-dark tokens for snackbar action + close buttons */
|
|
2258
|
+
--snackbar-btn-height: var(--button-sm-height);
|
|
2259
|
+
--snackbar-btn-radius: var(--button-sm-radius);
|
|
2260
|
+
--snackbar-btn-padding-h: var(--button-sm-padding-horizontal);
|
|
2261
|
+
--snackbar-btn-gap: var(--button-sm-gap);
|
|
2262
|
+
--snackbar-btn-icon-size: var(--semantic-size-width-height-16);
|
|
2263
|
+
--snackbar-btn-icon-btn-width: var(--button-sm-icon-size);
|
|
2264
|
+
--snackbar-btn-text: var(--button-ghost-static-dark-text);
|
|
2265
|
+
--snackbar-btn-icon: var(--button-ghost-static-dark-icon);
|
|
2266
|
+
--snackbar-btn-bg-hover: var(--button-ghost-static-dark-bg-hover);
|
|
2267
|
+
--snackbar-btn-bg-pressed: var(--button-ghost-static-dark-bg-pressed);
|
|
2268
|
+
|
|
2269
|
+
/* Code Input size tokens */
|
|
2270
|
+
--code-input-sm-height: var(--semantic-size-width-height-56);
|
|
2271
|
+
--code-input-sm-width: var(--semantic-size-width-height-40);
|
|
2272
|
+
--code-input-md-height: var(--semantic-size-width-height-56);
|
|
2273
|
+
--code-input-md-width: var(--semantic-size-width-height-48);
|
|
2274
|
+
--code-input-font-size: var(--semantic-size-width-height-20);
|
|
2275
|
+
--code-input-font-weight: 500;
|
|
2276
|
+
--code-input-radius: var(--semantic-size-radius-8);
|
|
2277
|
+
--code-input-border-width-focus: 1.5px;
|
|
2278
|
+
--code-input-gap: var(--semantic-size-spacing-8);
|
|
2279
|
+
|
|
2280
|
+
/* Menu size tokens */
|
|
2281
|
+
--menu-max-height: 440px;
|
|
2282
|
+
--menu-spacing-1: var(--semantic-size-spacing-4);
|
|
2283
|
+
--menu-spacing-2: var(--semantic-size-spacing-8);
|
|
2284
|
+
--menu-border-width: var(--semantic-size-border-1);
|
|
2285
|
+
--menu-radius: var(--semantic-size-radius-8);
|
|
2286
|
+
--menu-shadow: 0 2px 4px 0 #0000000a, 0 8px 24px -4px #00000014, 0 16px 48px -6px #0000000a;
|
|
2287
|
+
|
|
2288
|
+
/* List Item size tokens */
|
|
2289
|
+
--list-item-sm-height: var(--semantic-size-width-height-32);
|
|
2290
|
+
--list-item-sm-padding-horizontal: var(--semantic-size-spacing-12);
|
|
2291
|
+
--list-item-sm-gap: var(--semantic-size-spacing-8);
|
|
2292
|
+
--list-item-sm-font-size: var(--semantic-size-width-height-14);
|
|
2293
|
+
--list-item-md-height: var(--semantic-size-width-height-48);
|
|
2294
|
+
--list-item-md-padding-horizontal: var(--semantic-size-spacing-16);
|
|
2295
|
+
--list-item-md-gap: var(--semantic-size-spacing-8);
|
|
2296
|
+
--list-item-md-font-size: var(--semantic-size-width-height-16);
|
|
2297
|
+
--list-item-radius: var(--semantic-size-radius-8);
|
|
1423
2298
|
}
|
|
1424
2299
|
|
|
1425
2300
|
.dark {
|
|
1426
2301
|
|
|
2302
|
+
/* Breadcrumb — colour tokens that flip in dark mode */
|
|
2303
|
+
--breadcrumb-default: var(--primitive-white-alpha-900); /* #FFFFFF @ 72% */
|
|
2304
|
+
--breadcrumb-selected: var(--primitive-white-alpha-600); /* #FFFFFF @ 48% */
|
|
2305
|
+
--breadcrumb-sep: var(--primitive-white-alpha-600); /* #FFFFFF @ 48% */
|
|
2306
|
+
|
|
2307
|
+
/* Accordion — all colour tokens flip to white-based in dark mode */
|
|
2308
|
+
--accordion-icon: var(--primitive-white-alpha-900); /* #FFFFFF @ 72% */
|
|
2309
|
+
--accordion-icon-disabled: var(--primitive-white-alpha-300); /* #FFFFFF @ 24% */
|
|
2310
|
+
--accordion-title-disabled: var(--primitive-white-alpha-300); /* #FFFFFF @ 24% */
|
|
2311
|
+
--accordion-subtitle: var(--primitive-white-alpha-600); /* #FFFFFF @ 48% */
|
|
2312
|
+
--accordion-subtitle-disabled: var(--primitive-white-alpha-300); /* #FFFFFF @ 24% */
|
|
2313
|
+
--accordion-border: var(--primitive-white-alpha-100); /* rgba(255,255,255,0.08) */
|
|
2314
|
+
|
|
1427
2315
|
/* Button */
|
|
1428
2316
|
--button-secondary-normal-bg-hover: var(--primitive-white-alpha-100);
|
|
1429
2317
|
--button-secondary-normal-bg-pressed: var(--primitive-white-alpha-200);
|
|
@@ -1472,7 +2360,7 @@
|
|
|
1472
2360
|
--field-icon-subtle: var(--primitive-white-alpha-600);
|
|
1473
2361
|
--field-icon-disabled: var(--primitive-white-alpha-300);
|
|
1474
2362
|
--field-outline-bg-default: var(--primitive-slate-1100);
|
|
1475
|
-
--field-outline-bg-hover: var(--primitive-white-alpha-
|
|
2363
|
+
--field-outline-bg-hover: var(--primitive-white-alpha-75);
|
|
1476
2364
|
--field-outline-bg-focus: var(--primitive-slate-1100);
|
|
1477
2365
|
--field-outline-bg-disabled: var(--primitive-slate-1100);
|
|
1478
2366
|
--field-outline-border-default: var(--primitive-white-alpha-200);
|
|
@@ -1520,9 +2408,26 @@
|
|
|
1520
2408
|
--list-item-primary-bg-default: var(--primitive-slate-1100);
|
|
1521
2409
|
--list-item-primary-bg-hover: var(--primitive-white-alpha-100);
|
|
1522
2410
|
--list-item-primary-bg-pressed: var(--primitive-white-alpha-200);
|
|
2411
|
+
--list-item-primary-bg-selected: var(--primitive-white-alpha-100);
|
|
2412
|
+
--list-item-primary-bg-disabled: var(--primitive-slate-1100);
|
|
1523
2413
|
--list-item-secondary-bg-default: var(--primitive-slate-1100);
|
|
1524
2414
|
--list-item-secondary-bg-hover: var(--primitive-white-alpha-100);
|
|
1525
2415
|
--list-item-secondary-bg-pressed: var(--primitive-white-alpha-200);
|
|
2416
|
+
--list-item-secondary-bg-selected: var(--primitive-white-alpha-100);
|
|
2417
|
+
--list-item-secondary-bg-disabled: var(--primitive-slate-1100);
|
|
2418
|
+
|
|
2419
|
+
/* Toggle */
|
|
2420
|
+
--toggle-track-off: var(--primitive-white-alpha-200); /* #fff @ 16% */
|
|
2421
|
+
--toggle-track-off-hover: var(--primitive-white-alpha-300); /* #fff @ 24% */
|
|
2422
|
+
--toggle-track-off-active: var(--primitive-white-alpha-600); /* #fff @ 48% */
|
|
2423
|
+
--toggle-track-on: var(--primitive-green-alpha-1000); /* green @ 80% */
|
|
2424
|
+
--toggle-track-on-hover: var(--primitive-green-alpha-1100); /* green @ 88% */
|
|
2425
|
+
--toggle-track-on-active: var(--primitive-green-500); /* #4DBC6B light green */
|
|
2426
|
+
--toggle-knob: var(--primitive-slate-50); /* #ffffff always */
|
|
2427
|
+
|
|
2428
|
+
/* Slider */
|
|
2429
|
+
--slider-track: var(--primitive-white-alpha-100); /* rgba(255,255,255,0.08) — dark mode mirror */
|
|
2430
|
+
--slider-range: var(--primitive-mono-50); /* #ffffff solid — dark mode mirror */
|
|
1526
2431
|
|
|
1527
2432
|
/* Search Field */
|
|
1528
2433
|
--search-field-text-prominent: var(--primitive-slate-50);
|
|
@@ -1531,7 +2436,7 @@
|
|
|
1531
2436
|
--search-field-icon-prominent: var(--primitive-slate-50);
|
|
1532
2437
|
--search-field-icon-subtle: var(--primitive-white-alpha-600);
|
|
1533
2438
|
--search-field-outline-bg-default: var(--primitive-slate-1100);
|
|
1534
|
-
--search-field-outline-bg-hover: var(--primitive-white-alpha-
|
|
2439
|
+
--search-field-outline-bg-hover: var(--primitive-white-alpha-75);
|
|
1535
2440
|
--search-field-outline-bg-focus: var(--primitive-slate-1100);
|
|
1536
2441
|
--search-field-outline-bg-disabled: var(--primitive-slate-1100);
|
|
1537
2442
|
--search-field-outline-border-default: var(--primitive-white-alpha-200);
|
|
@@ -1552,7 +2457,7 @@
|
|
|
1552
2457
|
--dropdown-field-icon-subtle: var(--primitive-white-alpha-600);
|
|
1553
2458
|
--dropdown-field-icon-disabled: var(--primitive-white-alpha-300);
|
|
1554
2459
|
--dropdown-field-outline-bg-default: var(--primitive-slate-1100);
|
|
1555
|
-
--dropdown-field-outline-bg-hover: var(--primitive-white-alpha-
|
|
2460
|
+
--dropdown-field-outline-bg-hover: var(--primitive-white-alpha-75);
|
|
1556
2461
|
--dropdown-field-outline-bg-focus: var(--primitive-white-alpha-200);
|
|
1557
2462
|
--dropdown-field-outline-bg-disabled: var(--primitive-slate-1100);
|
|
1558
2463
|
--dropdown-field-outline-border-default: var(--primitive-white-alpha-200);
|
|
@@ -1595,16 +2500,18 @@
|
|
|
1595
2500
|
--tab-bg-pressed: var(--primitive-white-alpha-200);
|
|
1596
2501
|
--tab-border-default: var(--primitive-white-alpha-100);
|
|
1597
2502
|
--tab-border-focus: var(--primitive-slate-50);
|
|
2503
|
+
--tab-border-selected: var(--primitive-coral-700);
|
|
1598
2504
|
|
|
1599
2505
|
/* Segmented Control */
|
|
1600
|
-
--segmented-control-text-prominent: var(--primitive-slate-50);
|
|
1601
|
-
--segmented-control-text-
|
|
2506
|
+
--segmented-control-text-prominent: var(--primitive-slate-50); /* #FFFFFF solid — selected label */
|
|
2507
|
+
--segmented-control-text-default: var(--primitive-white-alpha-900); /* #FFFFFF @ 72% — unselected label */
|
|
2508
|
+
--segmented-control-text-disabled: var(--primitive-white-alpha-200);
|
|
1602
2509
|
--segmented-control-icon-prominent: var(--primitive-slate-50);
|
|
1603
|
-
--segmented-control-icon-disabled:
|
|
1604
|
-
--segmented-control-container-bg:
|
|
1605
|
-
--segmented-control-segment-bg-selected: var(--primitive-
|
|
1606
|
-
--segmented-control-segment-bg-hover:
|
|
1607
|
-
--segmented-control-segment-bg-pressed:
|
|
2510
|
+
--segmented-control-icon-disabled: var(--primitive-white-alpha-200);
|
|
2511
|
+
--segmented-control-container-bg: var(--primitive-white-alpha-75); /* rgba(255,255,255,0.04) — 4% white */
|
|
2512
|
+
--segmented-control-segment-bg-selected: var(--primitive-white-alpha-200); /* rgba(255,255,255,0.16) — Figma spec */
|
|
2513
|
+
--segmented-control-segment-bg-hover: var(--primitive-white-alpha-100);
|
|
2514
|
+
--segmented-control-segment-bg-pressed: var(--primitive-white-alpha-200);
|
|
1608
2515
|
|
|
1609
2516
|
/* Tooltip */
|
|
1610
2517
|
--tooltip-text-default: var(--primitive-slate-1200);
|
|
@@ -1612,10 +2519,8 @@
|
|
|
1612
2519
|
|
|
1613
2520
|
/* Link */
|
|
1614
2521
|
--link-primary-disabled: var(--primitive-white-alpha-200);
|
|
1615
|
-
--link-secondary-
|
|
1616
|
-
--link-secondary-
|
|
1617
|
-
--link-secondary-inverse-default: var(--primitive-slate-1200);
|
|
1618
|
-
--link-secondary-inverse-disabled: var(--primitive-slate-alpha-200);
|
|
2522
|
+
--link-secondary-inverse-default: var(--primitive-slate-50);
|
|
2523
|
+
--link-secondary-inverse-disabled: var(--primitive-white-alpha-200);
|
|
1619
2524
|
|
|
1620
2525
|
/* Tag */
|
|
1621
2526
|
--tag-text-neutral: var(--primitive-slate-50);
|
|
@@ -1639,10 +2544,25 @@
|
|
|
1639
2544
|
--tag-fill-bg-green: var(--primitive-green-alpha-200);
|
|
1640
2545
|
--tag-fill-bg-blue: var(--primitive-blue-alpha-200);
|
|
1641
2546
|
|
|
1642
|
-
/*
|
|
1643
|
-
--
|
|
1644
|
-
--
|
|
1645
|
-
--
|
|
2547
|
+
/* Chip */
|
|
2548
|
+
--chip-text-prominent: var(--primitive-slate-50);
|
|
2549
|
+
--chip-text-disabled: var(--primitive-white-alpha-200);
|
|
2550
|
+
--chip-border-default: var(--primitive-white-alpha-200);
|
|
2551
|
+
--chip-border-selected: var(--primitive-slate-50);
|
|
2552
|
+
--chip-border-disabled: var(--primitive-white-alpha-100);
|
|
2553
|
+
--chip-bg-hover: var(--primitive-white-alpha-100);
|
|
2554
|
+
--chip-bg-pressed: var(--primitive-white-alpha-200);
|
|
2555
|
+
--chip-bg-selected: var(--primitive-white-alpha-100);
|
|
2556
|
+
--chip-icon-prominent: var(--primitive-slate-50);
|
|
2557
|
+
--chip-icon-disabled: var(--primitive-white-alpha-200);
|
|
2558
|
+
|
|
2559
|
+
/* Snackbar — semantic-colour/dark: inverted (white bg, dark text) */
|
|
2560
|
+
--snackbar-bg-default: var(--primitive-slate-50);
|
|
2561
|
+
--snackbar-bg-fail: var(--primitive-red-900);
|
|
2562
|
+
--snackbar-text: var(--primitive-slate-1200);
|
|
2563
|
+
--snackbar-text-fail: var(--primitive-slate-50);
|
|
2564
|
+
--snackbar-icon: var(--primitive-slate-1200);
|
|
2565
|
+
--snackbar-icon-fail: var(--primitive-slate-50);
|
|
1646
2566
|
|
|
1647
2567
|
/* Badge */
|
|
1648
2568
|
--badge-bg-number: var(--primitive-red-500);
|
|
@@ -1727,3 +2647,19 @@
|
|
|
1727
2647
|
--progress-bar-bg-inverse-progress-yellow: var(--primitive-yellow-700);
|
|
1728
2648
|
--progress-bar-bg-inverse-progress-blue: var(--primitive-blue-700);
|
|
1729
2649
|
}
|
|
2650
|
+
|
|
2651
|
+
::selection {
|
|
2652
|
+
background-color: var(--primitive-blue-alpha-300);
|
|
2653
|
+
color: var(--text-prominent-default);
|
|
2654
|
+
}
|
|
2655
|
+
|
|
2656
|
+
/* ── Accordion — height animations (uses Radix's --radix-accordion-content-height) ── */
|
|
2657
|
+
@keyframes accordion-down {
|
|
2658
|
+
from { height: 0; }
|
|
2659
|
+
to { height: var(--radix-accordion-content-height); }
|
|
2660
|
+
}
|
|
2661
|
+
|
|
2662
|
+
@keyframes accordion-up {
|
|
2663
|
+
from { height: var(--radix-accordion-content-height); }
|
|
2664
|
+
to { height: 0; }
|
|
2665
|
+
}
|