@deriv-ds/design-intelligence-layer 0.2.0 → 0.3.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 +350 -144
- package/dist/index.cjs +2815 -1449
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +169 -73
- package/dist/index.d.ts +169 -73
- package/dist/index.js +2608 -1238
- 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 +1 -1
- package/src/styles.css +840 -14
- package/guides/brand-voice/trading-game-brand-voice.md +0 -325
package/src/styles.css
CHANGED
|
@@ -95,6 +95,243 @@
|
|
|
95
95
|
--color-accent-foreground: var(--accent-foreground);
|
|
96
96
|
--color-destructive: var(--destructive);
|
|
97
97
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
98
|
+
|
|
99
|
+
/* ── Search Field ── */
|
|
100
|
+
--color-search-field-text-prominent: var(--search-field-text-prominent);
|
|
101
|
+
--color-search-field-text-subtle: var(--search-field-text-subtle);
|
|
102
|
+
--color-search-field-text-disabled: var(--search-field-text-disabled);
|
|
103
|
+
--color-search-field-icon-prominent: var(--search-field-icon-prominent);
|
|
104
|
+
--color-search-field-icon-subtle: var(--search-field-icon-subtle);
|
|
105
|
+
--color-search-field-outline-bg-default: var(--search-field-outline-bg-default);
|
|
106
|
+
--color-search-field-outline-bg-hover: var(--search-field-outline-bg-hover);
|
|
107
|
+
--color-search-field-outline-bg-focus: var(--search-field-outline-bg-focus);
|
|
108
|
+
--color-search-field-outline-bg-disabled: var(--search-field-outline-bg-disabled);
|
|
109
|
+
--color-search-field-outline-border-default: var(--search-field-outline-border-default);
|
|
110
|
+
--color-search-field-outline-border-focus: var(--search-field-outline-border-focus);
|
|
111
|
+
--color-search-field-outline-border-disabled: var(--search-field-outline-border-disabled);
|
|
112
|
+
--color-search-field-fill-bg-default: var(--search-field-fill-bg-default);
|
|
113
|
+
--color-search-field-fill-bg-hover: var(--search-field-fill-bg-hover);
|
|
114
|
+
--color-search-field-fill-bg-focus: var(--search-field-fill-bg-focus);
|
|
115
|
+
--color-search-field-fill-bg-disabled: var(--search-field-fill-bg-disabled);
|
|
116
|
+
--color-search-field-fill-border-focus: var(--search-field-fill-border-focus);
|
|
117
|
+
/* ── Bottom Sheet colour bridges ── */
|
|
118
|
+
--color-bottom-sheet-bg-handle-bar: var(--bottom-sheet-bg-handle-bar);
|
|
119
|
+
--color-bottom-sheet-bg-handle-default: var(--bottom-sheet-bg-handle-default);
|
|
120
|
+
--color-bottom-sheet-bg-handle-pressed: var(--bottom-sheet-bg-handle-pressed);
|
|
121
|
+
/* ── Button component colour bridges ── */
|
|
122
|
+
--color-button-primary-bg: var(--button-primary-normal-bg-default);
|
|
123
|
+
--color-button-primary-bg-hover: var(--button-primary-normal-bg-hover);
|
|
124
|
+
--color-button-primary-bg-pressed: var(--button-primary-normal-bg-pressed);
|
|
125
|
+
--color-button-primary-text: var(--button-primary-text);
|
|
126
|
+
--color-button-secondary-border: var(--button-secondary-normal-border);
|
|
127
|
+
--color-button-secondary-text: var(--button-secondary-normal-text);
|
|
128
|
+
--color-button-secondary-bg-hover: var(--button-secondary-normal-bg-hover);
|
|
129
|
+
--color-button-secondary-bg-pressed: var(--button-secondary-normal-bg-pressed);
|
|
130
|
+
--color-button-tertiary-bg: var(--button-tertiary-normal-bg-default);
|
|
131
|
+
--color-button-tertiary-text: var(--button-tertiary-normal-text);
|
|
132
|
+
--color-button-tertiary-bg-hover: var(--button-tertiary-normal-bg-hover);
|
|
133
|
+
--color-button-tertiary-bg-pressed: var(--button-tertiary-normal-bg-pressed);
|
|
134
|
+
--color-button-ghost-text: var(--button-ghost-normal-text);
|
|
135
|
+
--color-button-ghost-bg-hover: var(--button-ghost-normal-bg-hover);
|
|
136
|
+
--color-button-ghost-bg-pressed: var(--button-ghost-normal-bg-pressed);
|
|
137
|
+
/* ── Badge component colour bridges ── */
|
|
138
|
+
--color-badge-bg-number: var(--badge-bg-number);
|
|
139
|
+
--color-badge-text: var(--badge-text-default);
|
|
140
|
+
--color-badge-status-green: var(--badge-bg-status-green);
|
|
141
|
+
--color-badge-status-red: var(--badge-bg-status-red);
|
|
142
|
+
--color-badge-status-yellow: var(--badge-bg-status-yellow);
|
|
143
|
+
--color-badge-status-blue: var(--badge-bg-status-blue);
|
|
144
|
+
/* ── Tab component colour bridges ── */
|
|
145
|
+
--color-tab-text: var(--tab-text-default);
|
|
146
|
+
--color-tab-text-selected: var(--tab-text-selected);
|
|
147
|
+
--color-tab-text-disabled: var(--tab-text-disabled);
|
|
148
|
+
--color-tab-bg-hover: var(--tab-bg-hover);
|
|
149
|
+
--color-tab-bg-pressed: var(--tab-bg-pressed);
|
|
150
|
+
--color-tab-border-default: var(--tab-border-default);
|
|
151
|
+
--color-tab-border-focus: var(--tab-border-focus);
|
|
152
|
+
--color-tab-border-selected: var(--tab-border-selected);
|
|
153
|
+
/* ── Segmented Control colour bridges ── */
|
|
154
|
+
--color-segmented-control-text-prominent: var(--segmented-control-text-prominent);
|
|
155
|
+
--color-segmented-control-text-disabled: var(--segmented-control-text-disabled);
|
|
156
|
+
--color-segmented-control-icon-prominent: var(--segmented-control-icon-prominent);
|
|
157
|
+
--color-segmented-control-icon-disabled: var(--segmented-control-icon-disabled);
|
|
158
|
+
--color-segmented-control-container-bg: var(--segmented-control-container-bg);
|
|
159
|
+
--color-segmented-control-segment-bg-selected: var(--segmented-control-segment-bg-selected);
|
|
160
|
+
--color-segmented-control-segment-bg-hover: var(--segmented-control-segment-bg-hover);
|
|
161
|
+
--color-segmented-control-segment-bg-pressed: var(--segmented-control-segment-bg-pressed);
|
|
162
|
+
/* ── Section Message colour bridges ── */
|
|
163
|
+
--color-section-message-fill-bg-default: var(--section-message-fill-bg-default);
|
|
164
|
+
--color-section-message-fill-bg-danger: var(--section-message-fill-bg-danger);
|
|
165
|
+
--color-section-message-fill-bg-information: var(--section-message-fill-bg-information);
|
|
166
|
+
--color-section-message-fill-bg-success: var(--section-message-fill-bg-success);
|
|
167
|
+
--color-section-message-fill-bg-warning: var(--section-message-fill-bg-warning);
|
|
168
|
+
--color-section-message-icon-danger: var(--section-message-icon-danger);
|
|
169
|
+
--color-section-message-icon-warning: var(--section-message-icon-warning);
|
|
170
|
+
--color-section-message-icon-success: var(--section-message-icon-success);
|
|
171
|
+
--color-section-message-icon-information: var(--section-message-icon-information);
|
|
172
|
+
--color-section-message-title: var(--section-message-title);
|
|
173
|
+
--color-section-message-description: var(--section-message-description);
|
|
174
|
+
/* ── Tag colour bridges ── */
|
|
175
|
+
--color-tag-text-neutral: var(--tag-text-neutral);
|
|
176
|
+
--color-tag-text-red: var(--tag-text-red);
|
|
177
|
+
--color-tag-text-yellow: var(--tag-text-yellow);
|
|
178
|
+
--color-tag-text-green: var(--tag-text-green);
|
|
179
|
+
--color-tag-text-blue: var(--tag-text-blue);
|
|
180
|
+
--color-tag-icon-default: var(--tag-icon-default);
|
|
181
|
+
--color-tag-icon-red: var(--tag-icon-red);
|
|
182
|
+
--color-tag-icon-yellow: var(--tag-icon-yellow);
|
|
183
|
+
--color-tag-icon-green: var(--tag-icon-green);
|
|
184
|
+
--color-tag-icon-blue: var(--tag-icon-blue);
|
|
185
|
+
--color-tag-outline-border-neutral: var(--tag-outline-border-neutral);
|
|
186
|
+
--color-tag-outline-border-red: var(--tag-outline-border-red);
|
|
187
|
+
--color-tag-outline-border-yellow: var(--tag-outline-border-yellow);
|
|
188
|
+
--color-tag-outline-border-green: var(--tag-outline-border-green);
|
|
189
|
+
--color-tag-outline-border-blue: var(--tag-outline-border-blue);
|
|
190
|
+
--color-tag-fill-bg-neutral: var(--tag-fill-bg-neutral);
|
|
191
|
+
--color-tag-fill-bg-red: var(--tag-fill-bg-red);
|
|
192
|
+
--color-tag-fill-bg-yellow: var(--tag-fill-bg-yellow);
|
|
193
|
+
--color-tag-fill-bg-green: var(--tag-fill-bg-green);
|
|
194
|
+
--color-tag-fill-bg-blue: var(--tag-fill-bg-blue);
|
|
195
|
+
/* ── Chip colour bridges ── */
|
|
196
|
+
--color-chip-text-prominent: var(--chip-text-prominent);
|
|
197
|
+
--color-chip-text-disabled: var(--chip-text-disabled);
|
|
198
|
+
--color-chip-border-default: var(--chip-border-default);
|
|
199
|
+
--color-chip-border-selected: var(--chip-border-selected);
|
|
200
|
+
--color-chip-border-disabled: var(--chip-border-disabled);
|
|
201
|
+
--color-chip-bg-hover: var(--chip-bg-hover);
|
|
202
|
+
--color-chip-bg-pressed: var(--chip-bg-pressed);
|
|
203
|
+
--color-chip-bg-selected: var(--chip-bg-selected);
|
|
204
|
+
--color-chip-icon-prominent: var(--chip-icon-prominent);
|
|
205
|
+
--color-chip-icon-disabled: var(--chip-icon-disabled);
|
|
206
|
+
/* ── Code Input colour bridges ── */
|
|
207
|
+
--color-code-input-fill-bg-default: var(--code-input-fill-bg-default);
|
|
208
|
+
--color-code-input-fill-bg-hover: var(--code-input-fill-bg-hover);
|
|
209
|
+
--color-code-input-fill-bg-focus: var(--code-input-fill-bg-focus);
|
|
210
|
+
--color-code-input-fill-bg-disabled: var(--code-input-fill-bg-disabled);
|
|
211
|
+
--color-code-input-fill-bg-success: var(--code-input-fill-bg-success);
|
|
212
|
+
--color-code-input-fill-bg-error: var(--code-input-fill-bg-error);
|
|
213
|
+
--color-code-input-fill-border-focus: var(--code-input-fill-border-focus);
|
|
214
|
+
--color-code-input-fill-border-error: var(--code-input-fill-border-error);
|
|
215
|
+
--color-code-input-fill-border-success: var(--code-input-fill-border-success);
|
|
216
|
+
--color-code-input-text-prominent: var(--code-input-text-prominent);
|
|
217
|
+
--color-code-input-text-disabled: var(--code-input-text-disabled);
|
|
218
|
+
--color-code-input-text-success: var(--code-input-text-success);
|
|
219
|
+
--color-code-input-text-error: var(--code-input-text-error);
|
|
220
|
+
/* ── Menu colour bridges ── */
|
|
221
|
+
--color-menu-background: var(--menu-background);
|
|
222
|
+
--color-menu-border: var(--menu-border);
|
|
223
|
+
/* ── Dropdown Field colour bridges ── */
|
|
224
|
+
--color-dropdown-field-text-prominent: var(--dropdown-field-text-prominent);
|
|
225
|
+
--color-dropdown-field-text-subtle: var(--dropdown-field-text-subtle);
|
|
226
|
+
--color-dropdown-field-text-disabled: var(--dropdown-field-text-disabled);
|
|
227
|
+
--color-dropdown-field-text-error: var(--dropdown-field-text-error);
|
|
228
|
+
--color-dropdown-field-outline-bg-default: var(--dropdown-field-outline-bg-default);
|
|
229
|
+
--color-dropdown-field-outline-bg-hover: var(--dropdown-field-outline-bg-hover);
|
|
230
|
+
--color-dropdown-field-outline-bg-focus: var(--dropdown-field-outline-bg-focus);
|
|
231
|
+
--color-dropdown-field-outline-bg-disabled: var(--dropdown-field-outline-bg-disabled);
|
|
232
|
+
--color-dropdown-field-outline-border-default: var(--dropdown-field-outline-border-default);
|
|
233
|
+
--color-dropdown-field-outline-border-focus: var(--dropdown-field-outline-border-focus);
|
|
234
|
+
--color-dropdown-field-outline-border-disabled: var(--dropdown-field-outline-border-disabled);
|
|
235
|
+
--color-dropdown-field-outline-border-error: var(--dropdown-field-outline-border-error);
|
|
236
|
+
--color-dropdown-field-fill-bg-neutral-default: var(--dropdown-field-fill-bg-neutral-default);
|
|
237
|
+
--color-dropdown-field-fill-bg-neutral-hover: var(--dropdown-field-fill-bg-neutral-hover);
|
|
238
|
+
--color-dropdown-field-fill-bg-neutral-focus: var(--dropdown-field-fill-bg-neutral-focus);
|
|
239
|
+
--color-dropdown-field-fill-bg-neutral-disabled: var(--dropdown-field-fill-bg-neutral-disabled);
|
|
240
|
+
--color-dropdown-field-fill-bg-error-default: var(--dropdown-field-fill-bg-error-default);
|
|
241
|
+
--color-dropdown-field-fill-bg-error-hover: var(--dropdown-field-fill-bg-error-hover);
|
|
242
|
+
--color-dropdown-field-fill-bg-error-focus: var(--dropdown-field-fill-bg-error-focus);
|
|
243
|
+
/* ── List Item colour bridges ── */
|
|
244
|
+
--color-list-item-text-prominent: var(--list-item-text-prominent);
|
|
245
|
+
--color-list-item-text-disabled: var(--list-item-text-disabled);
|
|
246
|
+
--color-list-item-border-selected: var(--list-item-border-selected);
|
|
247
|
+
--color-list-item-primary-bg-default: var(--list-item-primary-bg-default);
|
|
248
|
+
--color-list-item-primary-bg-hover: var(--list-item-primary-bg-hover);
|
|
249
|
+
--color-list-item-primary-bg-pressed: var(--list-item-primary-bg-pressed);
|
|
250
|
+
--color-list-item-primary-bg-selected: var(--list-item-primary-bg-selected);
|
|
251
|
+
--color-list-item-primary-bg-disabled: var(--list-item-primary-bg-disabled);
|
|
252
|
+
--color-list-item-secondary-bg-default: var(--list-item-secondary-bg-default);
|
|
253
|
+
--color-list-item-secondary-bg-hover: var(--list-item-secondary-bg-hover);
|
|
254
|
+
--color-list-item-secondary-bg-pressed: var(--list-item-secondary-bg-pressed);
|
|
255
|
+
--color-list-item-secondary-bg-selected: var(--list-item-secondary-bg-selected);
|
|
256
|
+
--color-list-item-secondary-bg-disabled: var(--list-item-secondary-bg-disabled);
|
|
257
|
+
/* ── Field colour bridges ── */
|
|
258
|
+
--color-field-text-prominent: var(--field-text-prominent);
|
|
259
|
+
--color-field-text-subtle: var(--field-text-subtle);
|
|
260
|
+
--color-field-text-disabled: var(--field-text-disabled);
|
|
261
|
+
--color-field-icon-disabled: var(--field-icon-disabled);
|
|
262
|
+
--color-field-text-success: var(--field-text-success);
|
|
263
|
+
--color-field-text-error: var(--field-text-error);
|
|
264
|
+
--color-field-outline-bg-default: var(--field-outline-bg-default);
|
|
265
|
+
--color-field-outline-bg-hover: var(--field-outline-bg-hover);
|
|
266
|
+
--color-field-outline-bg-focus: var(--field-outline-bg-focus);
|
|
267
|
+
--color-field-outline-bg-disabled: var(--field-outline-bg-disabled);
|
|
268
|
+
--color-field-outline-border-default: var(--field-outline-border-default);
|
|
269
|
+
--color-field-outline-border-focus: var(--field-outline-border-focus);
|
|
270
|
+
--color-field-outline-border-disabled: var(--field-outline-border-disabled);
|
|
271
|
+
--color-field-fill-bg-default: var(--field-fill-bg-default);
|
|
272
|
+
--color-field-fill-bg-hover: var(--field-fill-bg-hover);
|
|
273
|
+
--color-field-fill-bg-focus: var(--field-fill-bg-focus);
|
|
274
|
+
--color-field-fill-bg-disabled: var(--field-fill-bg-disabled);
|
|
275
|
+
--color-field-fill-bg-success-default: var(--field-fill-bg-success-default);
|
|
276
|
+
--color-field-fill-bg-success-hover: var(--field-fill-bg-success-hover);
|
|
277
|
+
--color-field-fill-bg-success-focus: var(--field-fill-bg-success-focus);
|
|
278
|
+
--color-field-fill-bg-error-default: var(--field-fill-bg-error-default);
|
|
279
|
+
--color-field-fill-bg-error-hover: var(--field-fill-bg-error-hover);
|
|
280
|
+
--color-field-fill-bg-error-focus: var(--field-fill-bg-error-focus);
|
|
281
|
+
--color-field-outline-border-success: var(--field-outline-border-success);
|
|
282
|
+
--color-field-outline-border-error: var(--field-outline-border-error);
|
|
283
|
+
--color-field-fill-border-focus: var(--field-fill-border-focus);
|
|
284
|
+
--color-field-fill-border-success: var(--field-fill-border-success-focus);
|
|
285
|
+
--color-field-fill-border-error: var(--field-fill-border-error-focus);
|
|
286
|
+
/* ── Snackbar colour bridges ── */
|
|
287
|
+
--color-snackbar-bg-default: var(--snackbar-bg-default);
|
|
288
|
+
--color-snackbar-bg-fail: var(--snackbar-bg-fail);
|
|
289
|
+
--color-snackbar-text: var(--snackbar-text);
|
|
290
|
+
--color-snackbar-text-fail: var(--snackbar-text-fail);
|
|
291
|
+
--color-snackbar-icon: var(--snackbar-icon);
|
|
292
|
+
--color-snackbar-icon-fail: var(--snackbar-icon-fail);
|
|
293
|
+
/* ── Link colour bridges ── */
|
|
294
|
+
--color-link-primary-default: var(--link-primary-default);
|
|
295
|
+
--color-link-primary-disabled: var(--link-primary-disabled);
|
|
296
|
+
--color-link-secondary-normal-default: var(--link-secondary-normal-default);
|
|
297
|
+
--color-link-secondary-normal-disabled: var(--link-secondary-normal-disabled);
|
|
298
|
+
--color-link-secondary-inverse-default: var(--link-secondary-inverse-default);
|
|
299
|
+
--color-link-secondary-inverse-disabled: var(--link-secondary-inverse-disabled);
|
|
300
|
+
--color-link-secondary-static-light-default: var(--link-secondary-static-light-default);
|
|
301
|
+
--color-link-secondary-static-light-disabled: var(--link-secondary-static-light-disabled);
|
|
302
|
+
--color-link-secondary-static-dark-default: var(--link-secondary-static-dark-default);
|
|
303
|
+
--color-link-secondary-static-dark-disabled: var(--link-secondary-static-dark-disabled);
|
|
304
|
+
/* ── Loading Spinner colour bridge ── */
|
|
305
|
+
--color-loading-spinner-bg-default: var(--loading-spinner-bg-default);
|
|
306
|
+
/* ── Notification colour bridges ── */
|
|
307
|
+
--color-notification-bg-banner: var(--notification-bg-banner);
|
|
308
|
+
--color-notification-bg-item-default: var(--notification-bg-item-default);
|
|
309
|
+
--color-notification-bg-item-hover: var(--notification-bg-item-hover);
|
|
310
|
+
--color-notification-bg-button-default: var(--notification-bg-button-default);
|
|
311
|
+
--color-notification-bg-button-press: var(--notification-bg-button-press);
|
|
312
|
+
--color-notification-bg-divider: var(--notification-bg-divider);
|
|
313
|
+
--color-notification-bg-icon-information: var(--notification-bg-icon-information);
|
|
314
|
+
--color-notification-bg-icon-success: var(--notification-bg-icon-success);
|
|
315
|
+
--color-notification-bg-icon-warning: var(--notification-bg-icon-warning);
|
|
316
|
+
--color-notification-bg-icon-danger: var(--notification-bg-icon-danger);
|
|
317
|
+
--color-notification-title-banner: var(--notification-title-banner);
|
|
318
|
+
--color-notification-description-banner: var(--notification-description-banner);
|
|
319
|
+
--color-notification-title-item: var(--notification-title-item);
|
|
320
|
+
--color-notification-description-item-unread: var(--notification-description-item-unread);
|
|
321
|
+
--color-notification-description-item-read: var(--notification-description-item-read);
|
|
322
|
+
--color-notification-date-time-item: var(--notification-date-time-item);
|
|
323
|
+
--color-notification-icon-inverse-information: var(--notification-icon-inverse-information);
|
|
324
|
+
--color-notification-icon-inverse-success: var(--notification-icon-inverse-success);
|
|
325
|
+
--color-notification-icon-inverse-warning: var(--notification-icon-inverse-warning);
|
|
326
|
+
--color-notification-icon-inverse-danger: var(--notification-icon-inverse-danger);
|
|
327
|
+
--color-notification-icon-normal-information: var(--notification-icon-normal-information);
|
|
328
|
+
--color-notification-icon-normal-success: var(--notification-icon-normal-success);
|
|
329
|
+
--color-notification-icon-normal-warning: var(--notification-icon-normal-warning);
|
|
330
|
+
--color-notification-icon-normal-danger: var(--notification-icon-normal-danger);
|
|
331
|
+
--color-notification-icon-read-unread: var(--notification-icon-read-unread);
|
|
332
|
+
--color-notification-text-read-unread: var(--notification-text-read-unread);
|
|
333
|
+
--color-notification-icon-delete: var(--notification-icon-delete);
|
|
334
|
+
--color-notification-text-delete: var(--notification-text-delete);
|
|
98
335
|
}
|
|
99
336
|
|
|
100
337
|
/* ══════════════════════════════════════════════════════════════
|
|
@@ -921,6 +1158,111 @@
|
|
|
921
1158
|
}
|
|
922
1159
|
}
|
|
923
1160
|
|
|
1161
|
+
/* ── Snackbar: dark mode override via :root.dark (specificity 0,1,1 beats :root 0,0,1) ── */
|
|
1162
|
+
:root.dark {
|
|
1163
|
+
--snackbar-bg-default: var(--primitive-slate-50);
|
|
1164
|
+
--snackbar-bg-fail: var(--primitive-red-900);
|
|
1165
|
+
--snackbar-text: var(--primitive-slate-1200);
|
|
1166
|
+
--snackbar-text-fail: var(--primitive-slate-50);
|
|
1167
|
+
--snackbar-icon: var(--primitive-slate-1200);
|
|
1168
|
+
--snackbar-icon-fail: var(--primitive-slate-50);
|
|
1169
|
+
/* component-button/sm ghost-static-light — for dark mode (white snackbar bg, dark btn text) */
|
|
1170
|
+
--snackbar-btn-text: var(--button-ghost-static-light-text);
|
|
1171
|
+
--snackbar-btn-icon: var(--button-ghost-static-light-icon);
|
|
1172
|
+
--snackbar-btn-bg-hover: var(--button-ghost-static-light-bg-hover);
|
|
1173
|
+
--snackbar-btn-bg-pressed: var(--button-ghost-static-light-bg-pressed);
|
|
1174
|
+
}
|
|
1175
|
+
|
|
1176
|
+
/* ── Snackbar: sonner overrides ─────────────────────────────────────────────
|
|
1177
|
+
Sonner hardcodes font-size/weight, padding, and box-shadow directly in its
|
|
1178
|
+
stylesheet — they are not exposed as CSS variable hooks. We override them
|
|
1179
|
+
here with our component-snackbar token values. !important is intentional:
|
|
1180
|
+
sonner injects its styles after our stylesheet. */
|
|
1181
|
+
[data-sonner-toast][data-styled='true'] {
|
|
1182
|
+
font-size: var(--snackbar-font-size) !important;
|
|
1183
|
+
font-weight: var(--snackbar-font-weight) !important;
|
|
1184
|
+
/* top | right | bottom | left — Figma: pl=spacing-1(16px), pr=spacing-2(8px) */
|
|
1185
|
+
padding: var(--snackbar-padding-v) var(--snackbar-spacing-2) var(--snackbar-padding-v) var(--snackbar-spacing-1) !important;
|
|
1186
|
+
min-height: var(--snackbar-height) !important;
|
|
1187
|
+
box-shadow: var(--snackbar-shadow) !important;
|
|
1188
|
+
align-items: center !important;
|
|
1189
|
+
gap: var(--snackbar-spacing-2) !important;
|
|
1190
|
+
}
|
|
1191
|
+
|
|
1192
|
+
/* Snackbar content — fills available width, pushing buttons to the right */
|
|
1193
|
+
[data-sonner-toast][data-styled='true'] [data-content] {
|
|
1194
|
+
flex: 1 0 0 !important;
|
|
1195
|
+
min-width: 0 !important;
|
|
1196
|
+
}
|
|
1197
|
+
|
|
1198
|
+
/* Action + cancel buttons — button.tsx ghost/sm (component-button/sm) */
|
|
1199
|
+
[data-sonner-toast][data-styled='true'] [data-button] {
|
|
1200
|
+
height: var(--snackbar-btn-height) !important;
|
|
1201
|
+
padding-left: var(--snackbar-btn-padding-h) !important;
|
|
1202
|
+
padding-right: var(--snackbar-btn-padding-h) !important;
|
|
1203
|
+
border-radius: var(--snackbar-btn-radius) !important;
|
|
1204
|
+
font-size: var(--snackbar-font-size) !important;
|
|
1205
|
+
font-weight: var(--button-sm-font-weight) !important;
|
|
1206
|
+
color: var(--snackbar-btn-text) !important;
|
|
1207
|
+
background-color: transparent !important;
|
|
1208
|
+
}
|
|
1209
|
+
[data-sonner-toast][data-styled='true'] [data-button]:hover {
|
|
1210
|
+
background-color: var(--snackbar-btn-bg-hover) !important;
|
|
1211
|
+
}
|
|
1212
|
+
[data-sonner-toast][data-styled='true'] [data-button]:active {
|
|
1213
|
+
background-color: var(--snackbar-btn-bg-pressed) !important;
|
|
1214
|
+
}
|
|
1215
|
+
|
|
1216
|
+
/* Cancel variant — same as action but override sonner's default dark rgba bg */
|
|
1217
|
+
[data-sonner-toast][data-styled='true'] [data-cancel] {
|
|
1218
|
+
color: var(--snackbar-btn-text) !important;
|
|
1219
|
+
background-color: transparent !important;
|
|
1220
|
+
}
|
|
1221
|
+
|
|
1222
|
+
/* Close button (X) — pulled into inline flex flow at the far right.
|
|
1223
|
+
Sonner renders it as position:absolute; we override to static + order:999.
|
|
1224
|
+
Sized as button.tsx icon-sm: 32×32, pill radius, 16×16 icon. */
|
|
1225
|
+
[data-sonner-toast][data-styled='true'] [data-close-button] {
|
|
1226
|
+
position: static !important;
|
|
1227
|
+
top: unset !important;
|
|
1228
|
+
left: unset !important;
|
|
1229
|
+
right: unset !important;
|
|
1230
|
+
transform: none !important;
|
|
1231
|
+
order: 999 !important;
|
|
1232
|
+
width: var(--snackbar-btn-icon-btn-width) !important;
|
|
1233
|
+
height: var(--snackbar-btn-height) !important;
|
|
1234
|
+
border-radius: var(--snackbar-btn-radius) !important;
|
|
1235
|
+
background-color: transparent !important;
|
|
1236
|
+
border: none !important;
|
|
1237
|
+
color: var(--snackbar-btn-text) !important;
|
|
1238
|
+
flex-shrink: 0 !important;
|
|
1239
|
+
display: flex !important;
|
|
1240
|
+
align-items: center !important;
|
|
1241
|
+
justify-content: center !important;
|
|
1242
|
+
}
|
|
1243
|
+
[data-sonner-toast][data-styled='true'] [data-close-button]:hover {
|
|
1244
|
+
background-color: var(--snackbar-btn-bg-hover) !important;
|
|
1245
|
+
}
|
|
1246
|
+
[data-sonner-toast][data-styled='true'] [data-close-button]:active {
|
|
1247
|
+
background-color: var(--snackbar-btn-bg-pressed) !important;
|
|
1248
|
+
}
|
|
1249
|
+
|
|
1250
|
+
/* Fail (error) toast — bg-fail is red in both modes (tokens.json: semantic-colour/light+dark).
|
|
1251
|
+
Buttons must always use ghost-static-dark (white text, white-alpha states) regardless of
|
|
1252
|
+
the current theme, because dark mode overrides --snackbar-btn-* to ghost-static-light. */
|
|
1253
|
+
[data-sonner-toast][data-styled='true'][data-type='error'] [data-button],
|
|
1254
|
+
[data-sonner-toast][data-styled='true'][data-type='error'] [data-close-button] {
|
|
1255
|
+
color: var(--button-ghost-static-dark-text) !important;
|
|
1256
|
+
}
|
|
1257
|
+
[data-sonner-toast][data-styled='true'][data-type='error'] [data-button]:hover,
|
|
1258
|
+
[data-sonner-toast][data-styled='true'][data-type='error'] [data-close-button]:hover {
|
|
1259
|
+
background-color: var(--button-ghost-static-dark-bg-hover) !important;
|
|
1260
|
+
}
|
|
1261
|
+
[data-sonner-toast][data-styled='true'][data-type='error'] [data-button]:active,
|
|
1262
|
+
[data-sonner-toast][data-styled='true'][data-type='error'] [data-close-button]:active {
|
|
1263
|
+
background-color: var(--button-ghost-static-dark-bg-pressed) !important;
|
|
1264
|
+
}
|
|
1265
|
+
|
|
924
1266
|
/* Spinner — pill-style activity indicator */
|
|
925
1267
|
@keyframes spinner-fade {
|
|
926
1268
|
0% {
|
|
@@ -1140,7 +1482,7 @@
|
|
|
1140
1482
|
--field-icon-subtle: var(--primitive-slate-alpha-600);
|
|
1141
1483
|
--field-icon-disabled: var(--primitive-slate-alpha-300);
|
|
1142
1484
|
--field-outline-bg-default: var(--primitive-slate-50);
|
|
1143
|
-
--field-outline-bg-hover: var(--primitive-slate-alpha-
|
|
1485
|
+
--field-outline-bg-hover: var(--primitive-slate-alpha-75);
|
|
1144
1486
|
--field-outline-bg-focus: var(--primitive-slate-50);
|
|
1145
1487
|
--field-outline-bg-disabled: var(--primitive-slate-50);
|
|
1146
1488
|
--field-outline-border-default: var(--primitive-slate-alpha-200);
|
|
@@ -1188,9 +1530,13 @@
|
|
|
1188
1530
|
--list-item-primary-bg-default: var(--primitive-slate-75);
|
|
1189
1531
|
--list-item-primary-bg-hover: var(--primitive-slate-alpha-100);
|
|
1190
1532
|
--list-item-primary-bg-pressed: var(--primitive-slate-alpha-200);
|
|
1533
|
+
--list-item-primary-bg-selected: var(--primitive-slate-alpha-100);
|
|
1534
|
+
--list-item-primary-bg-disabled: var(--primitive-slate-75);
|
|
1191
1535
|
--list-item-secondary-bg-default: var(--primitive-slate-50);
|
|
1192
1536
|
--list-item-secondary-bg-hover: var(--primitive-slate-alpha-100);
|
|
1193
1537
|
--list-item-secondary-bg-pressed: var(--primitive-slate-alpha-200);
|
|
1538
|
+
--list-item-secondary-bg-selected: var(--primitive-slate-alpha-100);
|
|
1539
|
+
--list-item-secondary-bg-disabled: var(--primitive-slate-50);
|
|
1194
1540
|
|
|
1195
1541
|
/* Search Field */
|
|
1196
1542
|
--search-field-text-prominent: var(--primitive-slate-1200);
|
|
@@ -1199,7 +1545,7 @@
|
|
|
1199
1545
|
--search-field-icon-prominent: var(--primitive-slate-1200);
|
|
1200
1546
|
--search-field-icon-subtle: var(--primitive-slate-alpha-600);
|
|
1201
1547
|
--search-field-outline-bg-default: var(--primitive-slate-50);
|
|
1202
|
-
--search-field-outline-bg-hover: var(--primitive-slate-alpha-
|
|
1548
|
+
--search-field-outline-bg-hover: var(--primitive-slate-alpha-75);
|
|
1203
1549
|
--search-field-outline-bg-focus: var(--primitive-slate-50);
|
|
1204
1550
|
--search-field-outline-bg-disabled: var(--primitive-slate-50);
|
|
1205
1551
|
--search-field-outline-border-default: var(--primitive-slate-alpha-200);
|
|
@@ -1220,7 +1566,7 @@
|
|
|
1220
1566
|
--dropdown-field-icon-subtle: var(--primitive-slate-alpha-600);
|
|
1221
1567
|
--dropdown-field-icon-disabled: var(--primitive-slate-alpha-300);
|
|
1222
1568
|
--dropdown-field-outline-bg-default: var(--primitive-slate-50);
|
|
1223
|
-
--dropdown-field-outline-bg-hover: var(--primitive-slate-alpha-
|
|
1569
|
+
--dropdown-field-outline-bg-hover: var(--primitive-slate-alpha-75);
|
|
1224
1570
|
--dropdown-field-outline-bg-focus: var(--primitive-slate-alpha-200);
|
|
1225
1571
|
--dropdown-field-outline-bg-disabled: var(--primitive-slate-50);
|
|
1226
1572
|
--dropdown-field-outline-border-default: var(--primitive-slate-alpha-200);
|
|
@@ -1263,6 +1609,7 @@
|
|
|
1263
1609
|
--tab-bg-pressed: var(--primitive-slate-alpha-200);
|
|
1264
1610
|
--tab-border-default: var(--primitive-slate-alpha-100);
|
|
1265
1611
|
--tab-border-focus: var(--primitive-slate-1200);
|
|
1612
|
+
--tab-border-selected: var(--primitive-slate-1200);
|
|
1266
1613
|
|
|
1267
1614
|
/* Segmented Control */
|
|
1268
1615
|
--segmented-control-text-prominent: var(--primitive-slate-1200);
|
|
@@ -1314,6 +1661,18 @@
|
|
|
1314
1661
|
--tag-fill-bg-green: var(--primitive-green-alpha-100);
|
|
1315
1662
|
--tag-fill-bg-blue: var(--primitive-blue-alpha-100);
|
|
1316
1663
|
|
|
1664
|
+
/* Chip */
|
|
1665
|
+
--chip-text-prominent: var(--primitive-slate-1200);
|
|
1666
|
+
--chip-text-disabled: var(--primitive-slate-alpha-200);
|
|
1667
|
+
--chip-border-default: var(--primitive-slate-alpha-200);
|
|
1668
|
+
--chip-border-selected: var(--primitive-slate-1200);
|
|
1669
|
+
--chip-border-disabled: var(--primitive-slate-alpha-100);
|
|
1670
|
+
--chip-bg-hover: var(--primitive-slate-alpha-100);
|
|
1671
|
+
--chip-bg-pressed: var(--primitive-slate-alpha-200);
|
|
1672
|
+
--chip-bg-selected: var(--primitive-slate-alpha-100);
|
|
1673
|
+
--chip-icon-prominent: var(--primitive-slate-1200);
|
|
1674
|
+
--chip-icon-disabled: var(--primitive-slate-alpha-200);
|
|
1675
|
+
|
|
1317
1676
|
/* Snackbar */
|
|
1318
1677
|
--snackbar-bg-default: var(--primitive-slate-1200);
|
|
1319
1678
|
--snackbar-bg-fail: var(--primitive-red-900);
|
|
@@ -1389,6 +1748,33 @@
|
|
|
1389
1748
|
--notification-bg-button-default: var(--primitive-slate-alpha-75);
|
|
1390
1749
|
--notification-bg-button-press: var(--primitive-slate-alpha-100);
|
|
1391
1750
|
|
|
1751
|
+
/* Notification size tokens (from component-notification.mode-1) */
|
|
1752
|
+
--notification-padding-vertical: 16px;
|
|
1753
|
+
--notification-padding-horizontal: 16px;
|
|
1754
|
+
--notification-min-width-banner: 256px;
|
|
1755
|
+
--notification-max-width-banner: 440px;
|
|
1756
|
+
--notification-gap-icon-content: 16px; /* size-gap-3 */
|
|
1757
|
+
--notification-radius: 16px;
|
|
1758
|
+
--notification-width-button: 80px;
|
|
1759
|
+
--notification-gap-sm: 4px; /* size-gap */
|
|
1760
|
+
--notification-height-item: 99px;
|
|
1761
|
+
--notification-gap-md: 8px; /* size-gap-2 */
|
|
1762
|
+
--notification-width-divider: 1px;
|
|
1763
|
+
--notification-size-icon-container: 32px; /* size-width-height-icon-container-2 (item) */
|
|
1764
|
+
--notification-radius-icon: 999px; /* size-radius-2 */
|
|
1765
|
+
/* size-width-height-icon-contianer(sic) = 24px — banner icon container */
|
|
1766
|
+
--notification-size-icon-banner: 24px;
|
|
1767
|
+
/* Icon SVG size — both banner and item use 20px per Figma */
|
|
1768
|
+
--notification-size-icon: 20px;
|
|
1769
|
+
/* Font sizes from tokens (size-12/14/16) */
|
|
1770
|
+
--notification-font-size-xs: 12px; /* size-font-size-12 */
|
|
1771
|
+
--notification-font-size-sm: 14px; /* size-font-size-14 */
|
|
1772
|
+
--notification-font-size-md: 16px; /* size-font-size-16 */
|
|
1773
|
+
/* Font weights */
|
|
1774
|
+
--notification-font-weight-regular: 400; /* font-regular */
|
|
1775
|
+
--notification-font-weight-medium: 500; /* font-medium */
|
|
1776
|
+
--notification-font-weight-semibold: 600; /* font-semibold */
|
|
1777
|
+
|
|
1392
1778
|
/* Bottom Sheet */
|
|
1393
1779
|
--bottom-sheet-bg-sheet: var(--primitive-slate-50);
|
|
1394
1780
|
--bottom-sheet-bg-handle-bar: var(--primitive-black-alpha-300);
|
|
@@ -1420,6 +1806,423 @@
|
|
|
1420
1806
|
--progress-bar-bg-static-dark-progress-red: var(--primitive-red-500);
|
|
1421
1807
|
--progress-bar-bg-static-dark-progress-yellow: var(--primitive-yellow-500);
|
|
1422
1808
|
--progress-bar-bg-static-dark-progress-blue: var(--primitive-blue-500);
|
|
1809
|
+
|
|
1810
|
+
/* Search Field sizes */
|
|
1811
|
+
--search-field-radius: 999px;
|
|
1812
|
+
--search-field-font-weight: 400;
|
|
1813
|
+
--search-field-sm-height: 40px;
|
|
1814
|
+
--search-field-sm-padding-horizontal: 16px;
|
|
1815
|
+
--search-field-sm-gap: 8px;
|
|
1816
|
+
--search-field-sm-font-size: 14px;
|
|
1817
|
+
--search-field-sm-icon-size: 20px;
|
|
1818
|
+
--search-field-sm-border-width-focus: 1.5px;
|
|
1819
|
+
--search-field-md-height: 48px;
|
|
1820
|
+
--search-field-md-padding-horizontal: 20px;
|
|
1821
|
+
--search-field-md-gap: 8px;
|
|
1822
|
+
--search-field-md-font-size: 16px;
|
|
1823
|
+
--search-field-md-icon-size: 24px;
|
|
1824
|
+
--search-field-md-border-width-focus: 1.5px;
|
|
1825
|
+
}
|
|
1826
|
+
|
|
1827
|
+
/* ══════════════════════════════════════════════════════════════
|
|
1828
|
+
LAYER 1 — PRIMITIVE SIZE SCALE
|
|
1829
|
+
Raw px values. Sourced from component token audit.
|
|
1830
|
+
These are public API — but use semantic tokens in components,
|
|
1831
|
+
not primitives directly. Renaming any token here is a breaking change.
|
|
1832
|
+
══════════════════════════════════════════════════════════════ */
|
|
1833
|
+
:root {
|
|
1834
|
+
--primitive-size-1: 1px;
|
|
1835
|
+
--primitive-size-1-5: 1.5px;
|
|
1836
|
+
--primitive-size-4: 4px;
|
|
1837
|
+
--primitive-size-6: 6px;
|
|
1838
|
+
--primitive-size-8: 8px;
|
|
1839
|
+
--primitive-size-12: 12px;
|
|
1840
|
+
--primitive-size-14: 14px;
|
|
1841
|
+
--primitive-size-16: 16px;
|
|
1842
|
+
--primitive-size-18: 18px;
|
|
1843
|
+
--primitive-size-20: 20px;
|
|
1844
|
+
--primitive-size-24: 24px;
|
|
1845
|
+
--primitive-size-32: 32px;
|
|
1846
|
+
--primitive-size-40: 40px;
|
|
1847
|
+
--primitive-size-48: 48px;
|
|
1848
|
+
--primitive-size-56: 56px;
|
|
1849
|
+
--primitive-size-64: 64px;
|
|
1850
|
+
--primitive-size-72: 72px;
|
|
1851
|
+
--primitive-size-80: 80px;
|
|
1852
|
+
--primitive-size-96: 96px;
|
|
1853
|
+
--primitive-size-100: 100px;
|
|
1854
|
+
--primitive-size-108: 108px;
|
|
1855
|
+
--primitive-size-124: 124px;
|
|
1856
|
+
--primitive-size-240: 240px;
|
|
1857
|
+
--primitive-size-999: 999px;
|
|
1858
|
+
}
|
|
1859
|
+
|
|
1860
|
+
/* ══════════════════════════════════════════════════════════════
|
|
1861
|
+
LAYER 2 — SEMANTIC SIZE TOKENS
|
|
1862
|
+
Purpose-based aliases. Reference primitives only.
|
|
1863
|
+
These are public API — rename = breaking change for consumers.
|
|
1864
|
+
══════════════════════════════════════════════════════════════ */
|
|
1865
|
+
:root {
|
|
1866
|
+
/* Border widths */
|
|
1867
|
+
--semantic-size-border-1: var(--primitive-size-1);
|
|
1868
|
+
--semantic-size-border-1-5: var(--primitive-size-1-5);
|
|
1869
|
+
|
|
1870
|
+
/* Corner radii */
|
|
1871
|
+
--semantic-size-radius-4: var(--primitive-size-4);
|
|
1872
|
+
--semantic-size-radius-8: var(--primitive-size-8);
|
|
1873
|
+
--semantic-size-radius-999: var(--primitive-size-999);
|
|
1874
|
+
|
|
1875
|
+
/* Spacing — padding, gap, margin */
|
|
1876
|
+
--semantic-size-spacing-4: var(--primitive-size-4);
|
|
1877
|
+
--semantic-size-spacing-6: var(--primitive-size-6);
|
|
1878
|
+
--semantic-size-spacing-8: var(--primitive-size-8);
|
|
1879
|
+
--semantic-size-spacing-12: var(--primitive-size-12);
|
|
1880
|
+
--semantic-size-spacing-16: var(--primitive-size-16);
|
|
1881
|
+
--semantic-size-spacing-20: var(--primitive-size-20);
|
|
1882
|
+
|
|
1883
|
+
/* Fixed dimensions — height, width, min-width, icon-size, dot-size, font-size */
|
|
1884
|
+
--semantic-size-width-height-4: var(--primitive-size-4);
|
|
1885
|
+
--semantic-size-width-height-8: var(--primitive-size-8);
|
|
1886
|
+
--semantic-size-width-height-12: var(--primitive-size-12);
|
|
1887
|
+
--semantic-size-width-height-14: var(--primitive-size-14);
|
|
1888
|
+
--semantic-size-width-height-16: var(--primitive-size-16);
|
|
1889
|
+
--semantic-size-width-height-18: var(--primitive-size-18);
|
|
1890
|
+
--semantic-size-width-height-20: var(--primitive-size-20);
|
|
1891
|
+
--semantic-size-width-height-24: var(--primitive-size-24);
|
|
1892
|
+
--semantic-size-width-height-32: var(--primitive-size-32);
|
|
1893
|
+
--semantic-size-width-height-40: var(--primitive-size-40);
|
|
1894
|
+
--semantic-size-width-height-48: var(--primitive-size-48);
|
|
1895
|
+
--semantic-size-width-height-56: var(--primitive-size-56);
|
|
1896
|
+
--semantic-size-width-height-64: var(--primitive-size-64);
|
|
1897
|
+
--semantic-size-width-height-72: var(--primitive-size-72);
|
|
1898
|
+
--semantic-size-width-height-80: var(--primitive-size-80);
|
|
1899
|
+
--semantic-size-width-height-96: var(--primitive-size-96);
|
|
1900
|
+
--semantic-size-width-height-100: var(--primitive-size-100);
|
|
1901
|
+
--semantic-size-width-height-108: var(--primitive-size-108);
|
|
1902
|
+
--semantic-size-width-height-124: var(--primitive-size-124);
|
|
1903
|
+
--semantic-size-width-height-240: var(--primitive-size-240);
|
|
1904
|
+
}
|
|
1905
|
+
|
|
1906
|
+
/* ══════════════════════════════════════════════════════════════
|
|
1907
|
+
LAYER 3 — COMPONENT SIZE TOKENS
|
|
1908
|
+
Component-specific sizes. Reference semantic layer only.
|
|
1909
|
+
══════════════════════════════════════════════════════════════ */
|
|
1910
|
+
:root {
|
|
1911
|
+
/* ── Button ── */
|
|
1912
|
+
--button-sm-height: var(--semantic-size-width-height-32);
|
|
1913
|
+
--button-sm-padding-horizontal: var(--semantic-size-spacing-12);
|
|
1914
|
+
--button-sm-min-width: var(--semantic-size-width-height-64);
|
|
1915
|
+
--button-sm-gap: var(--semantic-size-spacing-8);
|
|
1916
|
+
--button-sm-font-size: var(--semantic-size-width-height-14);
|
|
1917
|
+
--button-sm-font-weight: 600;
|
|
1918
|
+
--button-sm-radius: var(--semantic-size-radius-999);
|
|
1919
|
+
--button-sm-border-width: var(--semantic-size-border-1-5);
|
|
1920
|
+
--button-sm-icon-size: var(--semantic-size-width-height-32);
|
|
1921
|
+
|
|
1922
|
+
--button-md-height: var(--semantic-size-width-height-40);
|
|
1923
|
+
--button-md-padding-horizontal: var(--semantic-size-spacing-16);
|
|
1924
|
+
--button-md-min-width: var(--semantic-size-width-height-80);
|
|
1925
|
+
--button-md-gap: var(--semantic-size-spacing-8);
|
|
1926
|
+
--button-md-font-size: var(--semantic-size-width-height-16);
|
|
1927
|
+
--button-md-font-weight: 600;
|
|
1928
|
+
--button-md-radius: var(--semantic-size-radius-999);
|
|
1929
|
+
--button-md-border-width: var(--semantic-size-border-1-5);
|
|
1930
|
+
--button-md-icon-size: var(--semantic-size-width-height-40);
|
|
1931
|
+
|
|
1932
|
+
--button-lg-height: var(--semantic-size-width-height-48);
|
|
1933
|
+
--button-lg-padding-horizontal: var(--semantic-size-spacing-20);
|
|
1934
|
+
--button-lg-min-width: var(--semantic-size-width-height-96);
|
|
1935
|
+
--button-lg-gap: var(--semantic-size-spacing-8);
|
|
1936
|
+
--button-lg-font-size: var(--semantic-size-width-height-18);
|
|
1937
|
+
--button-lg-font-weight: 600;
|
|
1938
|
+
--button-lg-radius: var(--semantic-size-radius-999);
|
|
1939
|
+
--button-lg-border-width: var(--semantic-size-border-1-5);
|
|
1940
|
+
--button-lg-icon-size: var(--semantic-size-width-height-48);
|
|
1941
|
+
|
|
1942
|
+
/* ── Badge ── */
|
|
1943
|
+
--badge-sm-height: var(--semantic-size-width-height-20);
|
|
1944
|
+
--badge-sm-padding-horizontal: var(--semantic-size-spacing-6);
|
|
1945
|
+
--badge-sm-radius: var(--semantic-size-radius-999);
|
|
1946
|
+
--badge-sm-min-width: var(--semantic-size-width-height-20);
|
|
1947
|
+
--badge-sm-dot-size: var(--semantic-size-width-height-8);
|
|
1948
|
+
--badge-sm-font-size: var(--semantic-size-width-height-12);
|
|
1949
|
+
|
|
1950
|
+
--badge-md-height: var(--semantic-size-width-height-24);
|
|
1951
|
+
--badge-md-padding-horizontal: var(--semantic-size-spacing-6);
|
|
1952
|
+
--badge-md-radius: var(--semantic-size-radius-999);
|
|
1953
|
+
--badge-md-min-width: var(--semantic-size-width-height-24);
|
|
1954
|
+
--badge-md-dot-size: var(--semantic-size-width-height-16);
|
|
1955
|
+
--badge-md-font-size: var(--semantic-size-width-height-14);
|
|
1956
|
+
--badge-sm-max-width: 36px;
|
|
1957
|
+
--badge-md-max-width: 44px;
|
|
1958
|
+
--badge-font-weight: 500;
|
|
1959
|
+
|
|
1960
|
+
/* ── Tab ── */
|
|
1961
|
+
--tab-sm-height: var(--semantic-size-width-height-32);
|
|
1962
|
+
--tab-sm-padding-horizontal: var(--semantic-size-spacing-12);
|
|
1963
|
+
--tab-sm-min-width: var(--semantic-size-width-height-72);
|
|
1964
|
+
--tab-sm-font-size: var(--semantic-size-width-height-14);
|
|
1965
|
+
--tab-sm-font-weight-default: 400;
|
|
1966
|
+
--tab-sm-font-weight-selected: 600;
|
|
1967
|
+
--tab-sm-radius: var(--semantic-size-radius-4);
|
|
1968
|
+
--tab-sm-border-width: var(--semantic-size-border-1);
|
|
1969
|
+
|
|
1970
|
+
--tab-md-height: var(--semantic-size-width-height-40);
|
|
1971
|
+
--tab-md-padding-horizontal: var(--semantic-size-spacing-16);
|
|
1972
|
+
--tab-md-min-width: var(--semantic-size-width-height-80);
|
|
1973
|
+
--tab-md-font-size: var(--semantic-size-width-height-16);
|
|
1974
|
+
--tab-md-font-weight-default: 400;
|
|
1975
|
+
--tab-md-font-weight-selected: 600;
|
|
1976
|
+
--tab-md-radius: var(--semantic-size-radius-4);
|
|
1977
|
+
--tab-md-border-width: var(--semantic-size-border-1);
|
|
1978
|
+
|
|
1979
|
+
--tab-lg-height: var(--semantic-size-width-height-48);
|
|
1980
|
+
--tab-lg-padding-horizontal: var(--semantic-size-spacing-20);
|
|
1981
|
+
--tab-lg-min-width: var(--semantic-size-width-height-96);
|
|
1982
|
+
--tab-lg-font-size: var(--semantic-size-width-height-18);
|
|
1983
|
+
--tab-lg-font-weight-default: 400;
|
|
1984
|
+
--tab-lg-font-weight-selected: 600;
|
|
1985
|
+
--tab-lg-radius: var(--semantic-size-radius-4);
|
|
1986
|
+
--tab-lg-border-width: var(--semantic-size-border-1);
|
|
1987
|
+
|
|
1988
|
+
/* ── Progress Bar ── */
|
|
1989
|
+
--progress-sm-height: var(--semantic-size-width-height-4);
|
|
1990
|
+
--progress-sm-radius: var(--semantic-size-radius-999);
|
|
1991
|
+
--progress-md-height: var(--semantic-size-width-height-8);
|
|
1992
|
+
--progress-md-radius: var(--semantic-size-radius-999);
|
|
1993
|
+
|
|
1994
|
+
/* ── Link ── */
|
|
1995
|
+
--link-sm-font-size: var(--semantic-size-width-height-12);
|
|
1996
|
+
--link-sm-font-weight: 500;
|
|
1997
|
+
--link-md-font-size: var(--semantic-size-width-height-14);
|
|
1998
|
+
--link-md-font-weight: 500;
|
|
1999
|
+
--link-lg-font-size: var(--semantic-size-width-height-16);
|
|
2000
|
+
--link-lg-font-weight: 500;
|
|
2001
|
+
|
|
2002
|
+
/* ── Pagination ── */
|
|
2003
|
+
--pagination-number-height: var(--semantic-size-width-height-32);
|
|
2004
|
+
--pagination-number-width: var(--semantic-size-width-height-32);
|
|
2005
|
+
--pagination-radius: var(--semantic-size-radius-999);
|
|
2006
|
+
--pagination-gap: var(--semantic-size-spacing-8);
|
|
2007
|
+
--pagination-font-size: var(--semantic-size-width-height-14);
|
|
2008
|
+
--pagination-font-default-weight: 400;
|
|
2009
|
+
--pagination-font-selected-weight: 500;
|
|
2010
|
+
--pagination-dot-size: var(--semantic-size-width-height-8);
|
|
2011
|
+
--pagination-border-width-selected: var(--semantic-size-border-1-5);
|
|
2012
|
+
|
|
2013
|
+
/* ── Tooltip ── */
|
|
2014
|
+
--tooltip-radius: var(--semantic-size-radius-8);
|
|
2015
|
+
--tooltip-padding-horizontal: var(--semantic-size-spacing-12);
|
|
2016
|
+
--tooltip-padding-vertical: var(--semantic-size-spacing-8);
|
|
2017
|
+
--tooltip-font-size: var(--semantic-size-width-height-12);
|
|
2018
|
+
--tooltip-font-weight: 500;
|
|
2019
|
+
--tooltip-min-width: var(--semantic-size-width-height-48);
|
|
2020
|
+
--tooltip-max-width: var(--semantic-size-width-height-240);
|
|
2021
|
+
|
|
2022
|
+
/* ── Chip ── */
|
|
2023
|
+
--chip-sm-height: var(--semantic-size-width-height-24);
|
|
2024
|
+
--chip-sm-padding-horizontal: var(--semantic-size-spacing-8);
|
|
2025
|
+
--chip-sm-font-size: var(--semantic-size-width-height-12);
|
|
2026
|
+
--chip-sm-font-weight: 500;
|
|
2027
|
+
--chip-sm-gap: var(--semantic-size-spacing-4);
|
|
2028
|
+
--chip-sm-radius: var(--semantic-size-radius-999);
|
|
2029
|
+
--chip-sm-border-width: var(--semantic-size-border-1);
|
|
2030
|
+
--chip-sm-border-width-selected: var(--semantic-size-border-1-5);
|
|
2031
|
+
|
|
2032
|
+
--chip-md-height: var(--semantic-size-width-height-32);
|
|
2033
|
+
--chip-md-padding-horizontal: var(--semantic-size-spacing-12);
|
|
2034
|
+
--chip-md-font-size: var(--semantic-size-width-height-14);
|
|
2035
|
+
--chip-md-font-weight: 500;
|
|
2036
|
+
--chip-md-gap: var(--semantic-size-spacing-8);
|
|
2037
|
+
--chip-md-radius: var(--semantic-size-radius-999);
|
|
2038
|
+
--chip-md-border-width: var(--semantic-size-border-1);
|
|
2039
|
+
--chip-md-border-width-selected: var(--semantic-size-border-1-5);
|
|
2040
|
+
|
|
2041
|
+
--chip-lg-height: var(--semantic-size-width-height-40);
|
|
2042
|
+
--chip-lg-padding-horizontal: var(--semantic-size-spacing-16);
|
|
2043
|
+
--chip-lg-font-size: var(--semantic-size-width-height-16);
|
|
2044
|
+
--chip-lg-font-weight: 500;
|
|
2045
|
+
--chip-lg-gap: var(--semantic-size-spacing-8);
|
|
2046
|
+
--chip-lg-radius: var(--semantic-size-radius-999);
|
|
2047
|
+
--chip-lg-border-width: var(--semantic-size-border-1);
|
|
2048
|
+
--chip-lg-border-width-selected: var(--semantic-size-border-1-5);
|
|
2049
|
+
|
|
2050
|
+
/* ── Tag ── */
|
|
2051
|
+
--tag-sm-height: var(--semantic-size-width-height-24);
|
|
2052
|
+
--tag-sm-padding-horizontal: var(--semantic-size-spacing-8);
|
|
2053
|
+
--tag-sm-gap: var(--semantic-size-spacing-4);
|
|
2054
|
+
--tag-sm-font-size: var(--semantic-size-width-height-12);
|
|
2055
|
+
--tag-sm-font-weight: 500;
|
|
2056
|
+
--tag-sm-radius: var(--semantic-size-radius-4);
|
|
2057
|
+
--tag-sm-min-width: var(--semantic-size-width-height-32);
|
|
2058
|
+
--tag-sm-icon-size: 16px;
|
|
2059
|
+
|
|
2060
|
+
--tag-md-height: var(--semantic-size-width-height-32);
|
|
2061
|
+
--tag-md-padding-horizontal: var(--semantic-size-spacing-12);
|
|
2062
|
+
--tag-md-gap: var(--semantic-size-spacing-8);
|
|
2063
|
+
--tag-md-font-size: var(--semantic-size-width-height-14);
|
|
2064
|
+
--tag-md-font-weight: 500;
|
|
2065
|
+
--tag-md-radius: var(--semantic-size-radius-4);
|
|
2066
|
+
--tag-md-min-width: var(--semantic-size-width-height-40);
|
|
2067
|
+
--tag-md-icon-size: 18px;
|
|
2068
|
+
|
|
2069
|
+
/* ── Chip size tokens ── */
|
|
2070
|
+
--chip-radius: var(--semantic-size-radius-999);
|
|
2071
|
+
--chip-border-width: 1px;
|
|
2072
|
+
--chip-border-width-selected: 1.5px;
|
|
2073
|
+
|
|
2074
|
+
--chip-sm-height: var(--semantic-size-width-height-24);
|
|
2075
|
+
--chip-sm-padding-horizontal: var(--semantic-size-spacing-8);
|
|
2076
|
+
--chip-sm-font-size: var(--semantic-size-width-height-12);
|
|
2077
|
+
--chip-sm-gap: var(--semantic-size-spacing-4);
|
|
2078
|
+
--chip-sm-icon-size: var(--semantic-size-width-height-16);
|
|
2079
|
+
|
|
2080
|
+
--chip-md-height: var(--semantic-size-width-height-32);
|
|
2081
|
+
--chip-md-padding-horizontal: var(--semantic-size-spacing-12);
|
|
2082
|
+
--chip-md-font-size: var(--semantic-size-width-height-14);
|
|
2083
|
+
--chip-md-gap: var(--semantic-size-spacing-8);
|
|
2084
|
+
--chip-md-icon-size: var(--semantic-size-width-height-20);
|
|
2085
|
+
|
|
2086
|
+
--chip-lg-height: var(--semantic-size-width-height-40);
|
|
2087
|
+
--chip-lg-padding-horizontal: var(--semantic-size-spacing-16);
|
|
2088
|
+
--chip-lg-font-size: var(--semantic-size-width-height-16);
|
|
2089
|
+
--chip-lg-gap: var(--semantic-size-spacing-8);
|
|
2090
|
+
--chip-lg-icon-size: var(--semantic-size-width-height-24);
|
|
2091
|
+
|
|
2092
|
+
/* ── Loading Spinner ── */
|
|
2093
|
+
--spinner-radius: var(--semantic-size-radius-999);
|
|
2094
|
+
|
|
2095
|
+
/* ── Field sizes ── */
|
|
2096
|
+
--field-height: var(--semantic-size-width-height-56);
|
|
2097
|
+
--field-sm-height: var(--semantic-size-width-height-32);
|
|
2098
|
+
--field-md-height: var(--semantic-size-width-height-40);
|
|
2099
|
+
--field-lg-height: var(--semantic-size-width-height-56);
|
|
2100
|
+
--field-radius: var(--semantic-size-radius-8);
|
|
2101
|
+
--field-font-size-md: var(--semantic-size-width-height-16);
|
|
2102
|
+
--field-font-size-sm: var(--semantic-size-width-height-12);
|
|
2103
|
+
--field-font-weight: 400;
|
|
2104
|
+
--field-border-width: var(--semantic-size-border-1);
|
|
2105
|
+
--field-border-width-focus: var(--semantic-size-border-1-5);
|
|
2106
|
+
--field-spacing-xs: var(--semantic-size-spacing-4);
|
|
2107
|
+
--field-spacing-sm: var(--semantic-size-spacing-8);
|
|
2108
|
+
--field-spacing-md: var(--semantic-size-spacing-16);
|
|
2109
|
+
--field-min-width: var(--semantic-size-width-height-100);
|
|
2110
|
+
|
|
2111
|
+
/* ── Search Field ── */
|
|
2112
|
+
--search-field-sm-height: var(--semantic-size-width-height-40);
|
|
2113
|
+
--search-field-sm-padding-horizontal: var(--semantic-size-spacing-16);
|
|
2114
|
+
--search-field-sm-gap: var(--semantic-size-spacing-8);
|
|
2115
|
+
--search-field-sm-font-size: var(--semantic-size-width-height-14);
|
|
2116
|
+
--search-field-sm-radius: var(--semantic-size-radius-999);
|
|
2117
|
+
--search-field-sm-border-width: var(--semantic-size-border-1);
|
|
2118
|
+
--search-field-sm-border-width-focus: var(--semantic-size-border-1-5);
|
|
2119
|
+
|
|
2120
|
+
--search-field-md-height: var(--semantic-size-width-height-48);
|
|
2121
|
+
--search-field-md-padding-horizontal: var(--semantic-size-spacing-20);
|
|
2122
|
+
--search-field-md-gap: var(--semantic-size-spacing-8);
|
|
2123
|
+
--search-field-md-font-size: var(--semantic-size-width-height-16);
|
|
2124
|
+
--search-field-md-radius: var(--semantic-size-radius-999);
|
|
2125
|
+
--search-field-md-border-width: var(--semantic-size-border-1);
|
|
2126
|
+
--search-field-md-border-width-focus: var(--semantic-size-border-1-5);
|
|
2127
|
+
|
|
2128
|
+
/* ── Segmented Control ── */
|
|
2129
|
+
--segmented-md-container-height: var(--semantic-size-width-height-40);
|
|
2130
|
+
--segmented-md-container-radius: var(--semantic-size-radius-999);
|
|
2131
|
+
--segmented-md-container-padding: var(--semantic-size-spacing-4);
|
|
2132
|
+
--segmented-md-container-gap: var(--semantic-size-spacing-4);
|
|
2133
|
+
--segmented-md-container-min-width: var(--semantic-size-width-height-108);
|
|
2134
|
+
--segmented-md-segment-height: var(--semantic-size-width-height-32);
|
|
2135
|
+
--segmented-md-segment-radius: var(--semantic-size-radius-999);
|
|
2136
|
+
--segmented-md-segment-padding: var(--semantic-size-spacing-12);
|
|
2137
|
+
--segmented-md-segment-min-width: var(--semantic-size-width-height-48);
|
|
2138
|
+
--segmented-md-font-size: var(--semantic-size-width-height-14);
|
|
2139
|
+
--segmented-md-font-weight-default: 400;
|
|
2140
|
+
--segmented-md-font-weight-selected: 600;
|
|
2141
|
+
|
|
2142
|
+
--segmented-lg-container-height: var(--semantic-size-width-height-48);
|
|
2143
|
+
--segmented-lg-container-radius: var(--semantic-size-radius-999);
|
|
2144
|
+
--segmented-lg-container-padding: var(--semantic-size-spacing-4);
|
|
2145
|
+
--segmented-lg-container-gap: var(--semantic-size-spacing-4);
|
|
2146
|
+
--segmented-lg-container-min-width: var(--semantic-size-width-height-124);
|
|
2147
|
+
--segmented-lg-segment-height: var(--semantic-size-width-height-40);
|
|
2148
|
+
--segmented-lg-segment-radius: var(--semantic-size-radius-999);
|
|
2149
|
+
--segmented-lg-segment-padding: var(--semantic-size-spacing-16);
|
|
2150
|
+
--segmented-lg-segment-min-width: var(--semantic-size-width-height-56);
|
|
2151
|
+
--segmented-lg-font-size: var(--semantic-size-width-height-16);
|
|
2152
|
+
--segmented-lg-font-weight-default: 400;
|
|
2153
|
+
--segmented-lg-font-weight-selected: 600;
|
|
2154
|
+
/* Elevation shadow for selected segment — layer-1: y=1 blur=2 (4% black), layer-2: y=2 blur=6 (8% black) */
|
|
2155
|
+
--segmented-elevation-selected: 0px 1px 2px 0px var(--primitive-black-alpha-75), 0px 2px 6px 0px var(--primitive-black-alpha-100);
|
|
2156
|
+
|
|
2157
|
+
/* Section Message size tokens */
|
|
2158
|
+
--section-message-radius: 16px;
|
|
2159
|
+
--section-message-padding-horizontal: var(--semantic-size-spacing-16);
|
|
2160
|
+
--section-message-padding-vertical: var(--semantic-size-spacing-16);
|
|
2161
|
+
--section-message-gap-horizontal: var(--semantic-size-spacing-8);
|
|
2162
|
+
--section-message-gap-vertical-1: var(--semantic-size-spacing-8);
|
|
2163
|
+
--section-message-sm-gap-vertical-2: 14px;
|
|
2164
|
+
--section-message-md-gap-vertical-2: 12px;
|
|
2165
|
+
--section-message-padding-vertical-2: 1.5px;
|
|
2166
|
+
--section-message-sm-font-size-message: var(--semantic-size-width-height-14);
|
|
2167
|
+
--section-message-sm-font-size-title: var(--semantic-size-width-height-16);
|
|
2168
|
+
--section-message-sm-icon-size: var(--semantic-size-width-height-20);
|
|
2169
|
+
--section-message-md-font-size-message: var(--semantic-size-width-height-16);
|
|
2170
|
+
--section-message-md-font-size-title: var(--semantic-size-width-height-18);
|
|
2171
|
+
--section-message-md-icon-size: 22px;
|
|
2172
|
+
|
|
2173
|
+
/* Snackbar size tokens (component-snackbar/mode-1) */
|
|
2174
|
+
--snackbar-max-width: 560px; /* ⚠ no semantic-size-560 */
|
|
2175
|
+
--snackbar-min-width: 320px; /* ⚠ no semantic-size-320 */
|
|
2176
|
+
--snackbar-height: var(--semantic-size-width-height-48);
|
|
2177
|
+
--snackbar-radius: var(--semantic-size-radius-8);
|
|
2178
|
+
--snackbar-font-size: var(--semantic-size-width-height-14);
|
|
2179
|
+
--snackbar-font-weight: 400; /* ⚠ no semantic var for weight-400 */
|
|
2180
|
+
--snackbar-spacing-1: var(--semantic-size-spacing-16);
|
|
2181
|
+
--snackbar-spacing-2: var(--semantic-size-spacing-8);
|
|
2182
|
+
--snackbar-padding-v: var(--semantic-size-spacing-8);
|
|
2183
|
+
--snackbar-text-max-width: 528px; /* ⚠ no semantic-size-528 */
|
|
2184
|
+
--snackbar-shadow: 0 2px 4px 0 #0000000a, 0 8px 24px -4px #00000014, 0 16px 48px -6px #0000000a;
|
|
2185
|
+
/* Button sm/ghost-static-dark tokens for snackbar action + close buttons */
|
|
2186
|
+
--snackbar-btn-height: var(--button-sm-height);
|
|
2187
|
+
--snackbar-btn-radius: var(--button-sm-radius);
|
|
2188
|
+
--snackbar-btn-padding-h: var(--button-sm-padding-horizontal);
|
|
2189
|
+
--snackbar-btn-gap: var(--button-sm-gap);
|
|
2190
|
+
--snackbar-btn-icon-size: var(--semantic-size-width-height-16);
|
|
2191
|
+
--snackbar-btn-icon-btn-width: var(--button-sm-icon-size);
|
|
2192
|
+
--snackbar-btn-text: var(--button-ghost-static-dark-text);
|
|
2193
|
+
--snackbar-btn-icon: var(--button-ghost-static-dark-icon);
|
|
2194
|
+
--snackbar-btn-bg-hover: var(--button-ghost-static-dark-bg-hover);
|
|
2195
|
+
--snackbar-btn-bg-pressed: var(--button-ghost-static-dark-bg-pressed);
|
|
2196
|
+
|
|
2197
|
+
/* Code Input size tokens */
|
|
2198
|
+
--code-input-sm-height: var(--semantic-size-width-height-56);
|
|
2199
|
+
--code-input-sm-width: var(--semantic-size-width-height-40);
|
|
2200
|
+
--code-input-md-height: var(--semantic-size-width-height-56);
|
|
2201
|
+
--code-input-md-width: var(--semantic-size-width-height-48);
|
|
2202
|
+
--code-input-font-size: var(--semantic-size-width-height-20);
|
|
2203
|
+
--code-input-font-weight: 500;
|
|
2204
|
+
--code-input-radius: var(--semantic-size-radius-8);
|
|
2205
|
+
--code-input-border-width-focus: 1.5px;
|
|
2206
|
+
--code-input-gap: var(--semantic-size-spacing-8);
|
|
2207
|
+
|
|
2208
|
+
/* Menu size tokens */
|
|
2209
|
+
--menu-max-height: 440px;
|
|
2210
|
+
--menu-spacing-1: var(--semantic-size-spacing-4);
|
|
2211
|
+
--menu-spacing-2: var(--semantic-size-spacing-8);
|
|
2212
|
+
--menu-border-width: var(--semantic-size-border-1);
|
|
2213
|
+
--menu-radius: var(--semantic-size-radius-8);
|
|
2214
|
+
--menu-shadow: 0 2px 4px 0 #0000000a, 0 8px 24px -4px #00000014, 0 16px 48px -6px #0000000a;
|
|
2215
|
+
|
|
2216
|
+
/* List Item size tokens */
|
|
2217
|
+
--list-item-sm-height: var(--semantic-size-width-height-32);
|
|
2218
|
+
--list-item-sm-padding-horizontal: var(--semantic-size-spacing-12);
|
|
2219
|
+
--list-item-sm-gap: var(--semantic-size-spacing-8);
|
|
2220
|
+
--list-item-sm-font-size: var(--semantic-size-width-height-14);
|
|
2221
|
+
--list-item-md-height: var(--semantic-size-width-height-48);
|
|
2222
|
+
--list-item-md-padding-horizontal: var(--semantic-size-spacing-16);
|
|
2223
|
+
--list-item-md-gap: var(--semantic-size-spacing-8);
|
|
2224
|
+
--list-item-md-font-size: var(--semantic-size-width-height-16);
|
|
2225
|
+
--list-item-radius: var(--semantic-size-radius-8);
|
|
1423
2226
|
}
|
|
1424
2227
|
|
|
1425
2228
|
.dark {
|
|
@@ -1472,7 +2275,7 @@
|
|
|
1472
2275
|
--field-icon-subtle: var(--primitive-white-alpha-600);
|
|
1473
2276
|
--field-icon-disabled: var(--primitive-white-alpha-300);
|
|
1474
2277
|
--field-outline-bg-default: var(--primitive-slate-1100);
|
|
1475
|
-
--field-outline-bg-hover: var(--primitive-white-alpha-
|
|
2278
|
+
--field-outline-bg-hover: var(--primitive-white-alpha-75);
|
|
1476
2279
|
--field-outline-bg-focus: var(--primitive-slate-1100);
|
|
1477
2280
|
--field-outline-bg-disabled: var(--primitive-slate-1100);
|
|
1478
2281
|
--field-outline-border-default: var(--primitive-white-alpha-200);
|
|
@@ -1520,9 +2323,13 @@
|
|
|
1520
2323
|
--list-item-primary-bg-default: var(--primitive-slate-1100);
|
|
1521
2324
|
--list-item-primary-bg-hover: var(--primitive-white-alpha-100);
|
|
1522
2325
|
--list-item-primary-bg-pressed: var(--primitive-white-alpha-200);
|
|
2326
|
+
--list-item-primary-bg-selected: var(--primitive-white-alpha-100);
|
|
2327
|
+
--list-item-primary-bg-disabled: var(--primitive-slate-1100);
|
|
1523
2328
|
--list-item-secondary-bg-default: var(--primitive-slate-1100);
|
|
1524
2329
|
--list-item-secondary-bg-hover: var(--primitive-white-alpha-100);
|
|
1525
2330
|
--list-item-secondary-bg-pressed: var(--primitive-white-alpha-200);
|
|
2331
|
+
--list-item-secondary-bg-selected: var(--primitive-white-alpha-100);
|
|
2332
|
+
--list-item-secondary-bg-disabled: var(--primitive-slate-1100);
|
|
1526
2333
|
|
|
1527
2334
|
/* Search Field */
|
|
1528
2335
|
--search-field-text-prominent: var(--primitive-slate-50);
|
|
@@ -1531,7 +2338,7 @@
|
|
|
1531
2338
|
--search-field-icon-prominent: var(--primitive-slate-50);
|
|
1532
2339
|
--search-field-icon-subtle: var(--primitive-white-alpha-600);
|
|
1533
2340
|
--search-field-outline-bg-default: var(--primitive-slate-1100);
|
|
1534
|
-
--search-field-outline-bg-hover: var(--primitive-white-alpha-
|
|
2341
|
+
--search-field-outline-bg-hover: var(--primitive-white-alpha-75);
|
|
1535
2342
|
--search-field-outline-bg-focus: var(--primitive-slate-1100);
|
|
1536
2343
|
--search-field-outline-bg-disabled: var(--primitive-slate-1100);
|
|
1537
2344
|
--search-field-outline-border-default: var(--primitive-white-alpha-200);
|
|
@@ -1552,7 +2359,7 @@
|
|
|
1552
2359
|
--dropdown-field-icon-subtle: var(--primitive-white-alpha-600);
|
|
1553
2360
|
--dropdown-field-icon-disabled: var(--primitive-white-alpha-300);
|
|
1554
2361
|
--dropdown-field-outline-bg-default: var(--primitive-slate-1100);
|
|
1555
|
-
--dropdown-field-outline-bg-hover: var(--primitive-white-alpha-
|
|
2362
|
+
--dropdown-field-outline-bg-hover: var(--primitive-white-alpha-75);
|
|
1556
2363
|
--dropdown-field-outline-bg-focus: var(--primitive-white-alpha-200);
|
|
1557
2364
|
--dropdown-field-outline-bg-disabled: var(--primitive-slate-1100);
|
|
1558
2365
|
--dropdown-field-outline-border-default: var(--primitive-white-alpha-200);
|
|
@@ -1595,6 +2402,7 @@
|
|
|
1595
2402
|
--tab-bg-pressed: var(--primitive-white-alpha-200);
|
|
1596
2403
|
--tab-border-default: var(--primitive-white-alpha-100);
|
|
1597
2404
|
--tab-border-focus: var(--primitive-slate-50);
|
|
2405
|
+
--tab-border-selected: var(--primitive-slate-50);
|
|
1598
2406
|
|
|
1599
2407
|
/* Segmented Control */
|
|
1600
2408
|
--segmented-control-text-prominent: var(--primitive-slate-50);
|
|
@@ -1612,10 +2420,8 @@
|
|
|
1612
2420
|
|
|
1613
2421
|
/* Link */
|
|
1614
2422
|
--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);
|
|
2423
|
+
--link-secondary-inverse-default: var(--primitive-slate-50);
|
|
2424
|
+
--link-secondary-inverse-disabled: var(--primitive-white-alpha-200);
|
|
1619
2425
|
|
|
1620
2426
|
/* Tag */
|
|
1621
2427
|
--tag-text-neutral: var(--primitive-slate-50);
|
|
@@ -1639,10 +2445,25 @@
|
|
|
1639
2445
|
--tag-fill-bg-green: var(--primitive-green-alpha-200);
|
|
1640
2446
|
--tag-fill-bg-blue: var(--primitive-blue-alpha-200);
|
|
1641
2447
|
|
|
1642
|
-
/*
|
|
1643
|
-
--
|
|
1644
|
-
--
|
|
1645
|
-
--
|
|
2448
|
+
/* Chip */
|
|
2449
|
+
--chip-text-prominent: var(--primitive-slate-50);
|
|
2450
|
+
--chip-text-disabled: var(--primitive-white-alpha-200);
|
|
2451
|
+
--chip-border-default: var(--primitive-white-alpha-200);
|
|
2452
|
+
--chip-border-selected: var(--primitive-slate-50);
|
|
2453
|
+
--chip-border-disabled: var(--primitive-white-alpha-100);
|
|
2454
|
+
--chip-bg-hover: var(--primitive-white-alpha-100);
|
|
2455
|
+
--chip-bg-pressed: var(--primitive-white-alpha-200);
|
|
2456
|
+
--chip-bg-selected: var(--primitive-white-alpha-100);
|
|
2457
|
+
--chip-icon-prominent: var(--primitive-slate-50);
|
|
2458
|
+
--chip-icon-disabled: var(--primitive-white-alpha-200);
|
|
2459
|
+
|
|
2460
|
+
/* Snackbar — semantic-colour/dark: inverted (white bg, dark text) */
|
|
2461
|
+
--snackbar-bg-default: var(--primitive-slate-50);
|
|
2462
|
+
--snackbar-bg-fail: var(--primitive-red-900);
|
|
2463
|
+
--snackbar-text: var(--primitive-slate-1200);
|
|
2464
|
+
--snackbar-text-fail: var(--primitive-slate-50);
|
|
2465
|
+
--snackbar-icon: var(--primitive-slate-1200);
|
|
2466
|
+
--snackbar-icon-fail: var(--primitive-slate-50);
|
|
1646
2467
|
|
|
1647
2468
|
/* Badge */
|
|
1648
2469
|
--badge-bg-number: var(--primitive-red-500);
|
|
@@ -1727,3 +2548,8 @@
|
|
|
1727
2548
|
--progress-bar-bg-inverse-progress-yellow: var(--primitive-yellow-700);
|
|
1728
2549
|
--progress-bar-bg-inverse-progress-blue: var(--primitive-blue-700);
|
|
1729
2550
|
}
|
|
2551
|
+
|
|
2552
|
+
::selection {
|
|
2553
|
+
background-color: var(--primitive-blue-alpha-300);
|
|
2554
|
+
color: var(--text-prominent-default);
|
|
2555
|
+
}
|