@crossangle-org/cs-ui 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/cs-ui.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
2
2
  @layer properties {
3
3
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
4
4
  *, :before, :after, ::backdrop {
@@ -125,746 +125,8 @@
125
125
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
126
126
  --default-font-family: var(--font-sans);
127
127
  --default-mono-font-family: var(--font-mono);
128
- --radius-small: var(--radius-sm);
129
- --radius-medium: var(--radius-lg);
130
- --color-bg-surface-default: var(--color-white);
131
- --font-color-primary-default: var(--color-neutral-900);
132
- --font-color-secondary-default: var(--color-neutral-500);
133
- --font-color-onbrand-default: var(--color-zinc-900);
134
- --font-color-inverse-default: var(--color-white);
135
- --font-color-primary-muted: var(--color-neutral-400);
136
- --border-color-default: var(--color-neutral-200);
137
- --border-color-divider: var(--color-neutral-200);
138
- --border-color-focus: var(--color-neutral-500);
139
- --color-state-success-default: var(--color-emerald-500);
140
- --color-state-warning-default: var(--color-orange-400);
141
- --color-state-error-default: var(--color-red-500);
142
- --color-state-info-default: var(--color-blue-500);
143
- --color-state-neutral: var(--color-neutral-300);
144
- --font-size-metric-sm: var(--font-size-sm);
145
- --font-size-heading-xs: var(--font-size-base);
146
- --font-size-body-xs: var(--font-size-xs);
147
- --font-size-productive-caption: var(--font-size-xs);
148
- --font-size-productive-code-sm: var(--font-size-sm);
149
- --color-bg-surface-alt: var(--color-zinc-50);
150
- --color-bg-surface-muted: var(--color-neutral-100);
151
- --color-bg-overlay-default: var(--color-alpha-black-50a);
152
- --font-color-onbrand-hover: var(--color-neutral-600);
153
- --font-color-disabled: var(--color-neutral-300);
154
- --border-color-primary-default: var(--color-theme-primary-100);
155
- --border-color-primary-hover: var(--color-theme-primary-200);
156
- --radius-large: var(--radius-2xl);
157
- --radius-max: var(--radius-full);
158
- --color-state-success-subtle: var(--color-emerald-50);
159
- --icon-size-small: var(--icon-sm);
160
- --icon-color-primary-default: var(--color-theme-primary-100);
161
- --icon-size-medium: var(--icon-md);
162
- --icon-color-primary-muted: var(--color-neutral-400);
163
- --icon-color-onbrand-default: var(--color-neutral-900);
164
- --icon-color-onbrand-hover: var(--color-neutral-900);
165
- --icon-color-disabled: var(--color-neutral-300);
166
- --color-bg-primary-default: var(--color-theme-primary-100);
167
- --color-bg-primary-hover: var(--color-theme-primary-200);
168
- --color-bg-disabled: var(--color-neutral-200);
169
- --scale-control-xs: var(--scale-xs);
170
- --scale-control-sm: var(--scale-sm);
171
- --scale-control-md: var(--scale-md);
172
- --scale-control-lg: var(--scale-lg);
173
- --radius-base: var(--radius-none);
174
- --border-width-thin: var(--borderwidth-default);
175
- --spacing-component-gap-sm: var(--spacing-3);
176
- --spacing-component-gap-md: var(--spacing-4);
177
- --spacing-component-gap-lg: var(--spacing-5);
178
- --spacing-component-padding-sm: var(--spacing-3);
179
- --spacing-component-padding-md: var(--spacing-4);
180
- --spacing-component-padding-lg: var(--spacing-5);
181
- --opacity-state-disabled: var(--opacity-50);
182
- --opacity-state-muted: var(--opacity-20);
183
- --border-width-regular: var(--borderwidth-2);
184
- --border-width-thick: var(--borderwidth-3);
185
- --font-size-heading-sm: var(--font-size-lg);
186
- --font-size-heading-md: var(--font-size-xl);
187
- --font-size-heading-lg: var(--font-size-2xl);
188
- --font-size-heading-xl: var(--font-size-5xl);
189
- --font-size-heading-xxl: var(--font-size-6xl);
190
- --font-size-body-sm: var(--font-size-sm);
191
- --font-size-body-md: var(--font-size-base);
192
- --font-size-body-lg: var(--font-size-lg);
193
- --font-size-metric-md: var(--font-size-base);
194
- --font-size-metric-lg: var(--font-size-lg);
195
- --font-size-metric-xs: var(--font-size-xs);
196
- --font-size-body-xl: var(--font-size-2xl);
197
- --font-size-productive-code-md: var(--font-size-base);
198
- --font-size-productive-label-sm: var(--font-size-xs);
199
- --icon-size-micro: var(--icon-xs);
200
- --spacing-section-xs: var(--spacing-4);
201
- --spacing-component-padding-xs: var(--spacing-2);
202
- --color-bg-surface-accent: var(--color-zinc-200);
203
- --color-bg-primary-muted: var(--color-theme-primary-100-a10);
204
- --color-bg-secondary-default: var(--color-theme-secondary-100);
205
- --color-bg-secondary-hover: var(--color-theme-secondary-200);
206
- --color-bg-secondary-muted: var(--color-theme-secondary-100-a10);
207
- --border-color-secondary-default: var(--color-theme-secondary-100);
208
- --border-color-secondary-hover: var(--color-theme-secondary-200);
209
- --font-color-link-default: var(--color-blue-700);
210
- --font-color-link-hover: var(--color-blue-800);
211
- --icon-color-inverse-default: var(--color-white);
212
- --icon-color-link-default: var(--color-blue-700);
213
- --icon-color-link-hover: var(--color-blue-800);
214
- --effect-shadow-level-2: var(--color-alpha-black-10a);
215
- --effect-blur-surface-md: var(--blur-default);
216
- --effect-blur-surface-lg: var(--blur-md);
217
- --color-state-error-subtle: var(--color-red-50);
218
- --color-state-warning-subtle: var(--color-orange-50);
219
- --spacing-component-gap-xl: var(--spacing-7);
220
- --spacing-component-gap-2xl: var(--spacing-9);
221
- --spacing-component-gap-xs: var(--spacing-2);
222
- --spacing-component-padding-xl: var(--spacing-6);
223
- --font-size-productive-label-md: var(--font-size-sm);
224
- --font-letter-spacing-heading: var(--font-letter-spacing-tracking-normal);
225
- --font-letter-spacing-body: var(--font-letter-spacing-tracking-normal);
226
- --font-letter-spacing-metric: var(--font-letter-spacing-tracking-normal);
227
- --font-letter-spacing-productive: var(--font-letter-spacing-tracking-normal);
228
- --font-font-weight-heading-bold: var(--font-weight-semibold);
229
- --font-font-weight-body-normal: var(--font-weight-normal);
230
- --font-font-weight-metric-normal: var(--font-weight-normal);
231
- --font-font-weight-productive-normal: var(--font-weight-normal);
232
- --spacing-component-padding-2xl: var(--spacing-8);
233
- --spacing-component-gap-none: var(--spacing-0);
234
- --color-progress-track: var(--color-neutral-200);
235
- --color-progress-fill: var(--color-theme-primary-100);
236
- --color-chart-data-vis-brand-1: var(--color-theme-primary-100);
237
- --color-state-info-subtle: var(--color-blue-50);
238
- --color-gradient-primary-start: var(--color-theme-primary-100);
239
- --color-gradient-primary-end: var(--color-theme-secondary-100);
240
- --color-gradient-secondary-start: var(--color-theme-accent-100);
241
- --color-gradient-secondary-end: var(--color-theme-secondary-100);
242
- --color-gradient-primary-hover-start: var(--color-theme-primary-200);
243
- --color-gradient-primary-hover-end: var(--color-theme-secondary-200);
244
- --border-color-surface: var(--color-neutral-400);
245
- --spacing-component-padding-xxs: var(--spacing-1);
246
- --color-chart-data-vis-brand-2: var(--color-theme-secondary-100);
247
- --color-chart-data-vis-brand-3: var(--color-theme-accent-100);
248
- --color-chart-bg-container: var(--color-neutral-100);
249
- --color-chart-border-grid: var(--color-neutral-300);
250
- --color-chart-text-axis-label: var(--color-neutral-500);
251
- --color-chart-text-data-value: var(--color-neutral-950);
252
- --color-chart-text-data-value-sub: var(--color-neutral-500);
253
- --color-chart-border-axis: var(--color-neutral-300);
254
- --color-chart-control-range-track: var(--color-white);
255
- --color-chart-control-range-fill: var(--color-blue-50);
256
- --color-chart-control-handle: var(--color-white);
257
- --color-chart-control-border: var(--color-neutral-300);
258
- --color-chart-control-thumb: var(--color-blue-400);
259
- --color-chart-foreground: var(--color-white);
260
- --color-chart-control-thumb-subtle: var(--color-blue-300);
261
- --line-height-metric-sm: var(--font-size-sm--line-height);
262
- --line-height-heading-xs: var(--font-size-base--line-height);
263
- --line-height-body-xs: var(--font-size-xs--line-height);
264
- --line-height-productive-caption: var(--font-size-xs--line-height);
265
- --line-height-productive-code-sm: var(--font-size-sm--line-height);
266
- --line-height-heading-sm: var(--font-size-lg--line-height);
267
- --line-height-heading-md: var(--font-size-xl--line-height);
268
- --line-height-heading-lg: var(--font-size-2xl--line-height);
269
- --line-height-heading-xl: var(--font-size-5xl--line-height);
270
- --line-height-heading-xxl: var(--font-size-6xl--line-height);
271
- --line-height-body-sm: var(--font-size-sm--line-height);
272
- --line-height-body-md: var(--font-size-base--line-height);
273
- --line-height-body-lg: var(--font-size-lg--line-height);
274
- --line-height-metric-md: var(--font-size-base--line-height);
275
- --line-height-metric-lg: var(--font-size-lg--line-height);
276
- --line-height-metric-xs: var(--font-size-xs--line-height);
277
- --line-height-body-xl: var(--font-size-2xl--line-height);
278
- --line-height-productive-code-md: var(--font-size-base--line-height);
279
- --line-height-productive-label-sm: var(--font-size-xs--line-height);
280
- --line-height-productive-label-md: var(--font-size-sm--line-height);
281
- --button-size-small-height: var(--scale-control-sm);
282
- --button-size-small-icon-size: var(--icon-size-small);
283
- --button-size-small-padding-x: var(--spacing-component-padding-sm);
284
- --button-size-small-gap: var(--spacing-component-gap-xs);
285
- --button-solid-primary-default-bg: var(--color-bg-primary-default);
286
- --button-solid-primary-hover-bg: var(--color-bg-primary-hover);
287
- --button-solid-primary-default-font: var(--font-color-onbrand-default);
288
- --button-solid-primary-hover-font: var(--font-color-onbrand-default);
289
- --button-solid-primary-default-icon: var(--icon-color-onbrand-default);
290
- --button-solid-primary-hover-icon: var(--icon-color-onbrand-hover);
291
- --button-size-small-radius: var(--radius-small);
292
- --button-size-medium-height: var(--scale-control-md);
293
- --button-size-medium-icon-size: var(--icon-size-small);
294
- --button-size-medium-padding-x: var(--spacing-component-padding-md);
295
- --button-size-medium-gap: var(--spacing-component-gap-xs);
296
- --button-size-medium-radius: var(--radius-small);
297
- --button-size-large-height: var(--scale-control-lg);
298
- --button-size-large-icon-size: var(--icon-size-medium);
299
- --button-size-large-padding-x: var(--spacing-component-padding-md);
300
- --button-size-large-gap: var(--spacing-component-gap-xs);
301
- --button-size-large-radius: var(--radius-small);
302
- --button-solid-primary-disabled-bg: var(--color-bg-disabled);
303
- --button-solid-primary-disabled-font: var(--font-color-disabled);
304
- --button-solid-primary-disabled-icon: var(--icon-color-disabled);
305
- --button-outline-default-border: var(--border-color-primary-default);
306
- --button-outline-default-font: var(--font-color-onbrand-default);
307
- --button-outline-default-icon: var(--icon-color-onbrand-default);
308
- --button-outline-hover-bg: var(--color-bg-primary-muted);
309
- --button-outline-hover-font: var(--font-color-onbrand-default);
310
- --button-outline-hover-icon: var(--icon-color-onbrand-hover);
311
- --button-outline-disabled-bg: var(--color-bg-surface-default);
312
- --button-outline-disabled-font: var(--font-color-disabled);
313
- --button-outline-disabled-icon: var(--icon-color-disabled);
314
- --button-outline-default-bg: var(--color-bg-surface-default);
315
- --button-outline-hover-border: var(--border-color-primary-default);
316
- --button-outline-disabled-border: var(--color-state-neutral);
317
- --button-solid-secondary-default-bg: var(--color-bg-secondary-default);
318
- --button-solid-secondary-default-font: var(--font-color-onbrand-default);
319
- --button-solid-secondary-default-icon: var(--icon-color-onbrand-default);
320
- --button-solid-secondary-hover-bg: var(--color-bg-secondary-hover);
321
- --button-solid-secondary-hover-font: var(--font-color-onbrand-default);
322
- --button-solid-secondary-hover-icon: var(--icon-color-onbrand-hover);
323
- --button-solid-secondary-disabled-bg: var(--color-bg-disabled);
324
- --button-solid-secondary-disabled-font: var(--font-color-disabled);
325
- --button-solid-secondary-disabled-icon: var(--icon-color-disabled);
326
- --button-ghost-default-font: var(--font-color-onbrand-default);
327
- --button-ghost-default-icon: var(--icon-color-onbrand-default);
328
- --button-ghost-hover-bg: var(--color-bg-surface-muted);
329
- --button-ghost-hover-font: var(--font-color-onbrand-default);
330
- --button-ghost-hover-icon: var(--icon-color-onbrand-hover);
331
- --button-ghost-disabled-font: var(--font-color-disabled);
332
- --button-ghost-disabled-icon: var(--icon-color-disabled);
333
- --button-link-default-font: var(--font-color-link-default);
334
- --button-link-default-icon: var(--icon-color-link-default);
335
- --button-link-hover-bg: var(--color-bg-surface-muted);
336
- --button-link-hover-font: var(--font-color-link-hover);
337
- --button-link-hover-icon: var(--icon-color-link-hover);
338
- --button-link-disabled-font: var(--font-color-link-default);
339
- --button-link-disabled-icon: var(--icon-color-link-default);
340
- --button-common-opacity: var(--opacity-state-disabled);
341
- --button-outline-border-width: var(--border-width-thin);
342
- --input-common-radius: var(--radius-medium);
343
- --input-common-padding-x: var(--spacing-component-padding-sm);
344
- --input-common-padding-y: var(--spacing-component-padding-sm);
345
- --input-common-gap: var(--spacing-component-gap-sm);
346
- --input-common-icon-size-sm: var(--icon-size-small);
347
- --input-common-opacity: var(--opacity-state-disabled);
348
- --input-solid-default-bg: var(--color-bg-surface-muted);
349
- --input-solid-default-font: var(--font-color-primary-muted);
350
- --input-solid-default-icon: var(--icon-color-primary-muted);
351
- --input-common-height: var(--scale-lg);
352
- --input-common-border-width: var(--border-width-thin);
353
- --input-solid-hover-bg: var(--color-bg-surface-accent);
354
- --input-solid-focus-bg: var(--color-bg-surface-muted);
355
- --input-solid-focus-border: var(--border-color-focus);
356
- --input-solid-fail-bg: var(--color-state-error-subtle);
357
- --input-solid-fail-border: var(--color-state-error-default);
358
- --input-solid-fail-font: var(--font-color-primary-default);
359
- --input-solid-fail-icon: var(--color-state-error-default);
360
- --input-solid-success-bg: var(--color-state-success-subtle);
361
- --input-solid-success-border: var(--color-state-success-default);
362
- --input-solid-success-font: var(--font-color-primary-default);
363
- --input-solid-success-icon: var(--color-state-success-default);
364
- --input-outline-default-bg: var(--color-bg-surface-default);
365
- --input-outline-default-border: var(--border-color-default);
366
- --input-outline-default-font: var(--font-color-primary-muted);
367
- --input-outline-default-icon: var(--icon-color-onbrand-default);
368
- --input-outline-hover-bg: var(--color-bg-surface-default);
369
- --input-outline-hover-border: var(--border-color-default);
370
- --input-outline-focus-bg: var(--color-bg-surface-default);
371
- --input-outline-focus-border: var(--border-color-focus);
372
- --input-outline-fail-bg: var(--color-bg-surface-default);
373
- --input-outline-fail-border: var(--color-state-error-default);
374
- --input-outline-fail-font: var(--font-color-primary-default);
375
- --input-outline-fail-icon: var(--color-state-error-default);
376
- --input-outline-success-bg: var(--color-bg-surface-default);
377
- --input-outline-success-border: var(--color-state-success-default);
378
- --input-outline-success-font: var(--font-color-primary-default);
379
- --input-outline-success-icon: var(--color-state-success-default);
380
- --checkbox-common-radius: var(--radius-small);
381
- --checkbox-common-scale: var(--scale-control-xs);
382
- --checkbox-common-icon-size: var(--icon-size-micro);
383
- --checkbox-common-opacity: var(--opacity-state-disabled);
384
- --checkbox-solid-default-bg: var(--color-bg-surface-muted);
385
- --checkbox-solid-hover-bg: var(--color-bg-surface-accent);
386
- --checkbox-outline-border-width: var(--border-width-thin);
387
- --checkbox-solid-checked-bg: var(--color-bg-primary-default);
388
- --checkbox-solid-checked-icon: var(--icon-color-onbrand-default);
389
- --checkbox-outline-default-border: var(--border-color-primary-default);
390
- --checkbox-outline-hover-border: var(--border-color-primary-hover);
391
- --checkbox-outline-checked-bg: var(--color-bg-primary-default);
392
- --checkbox-outline-checked-border: var(--border-color-primary-default);
393
- --checkbox-outline-checked-icon: var(--icon-color-onbrand-default);
394
- --checkbox-outline-hover-bg: var(--color-bg-surface-muted);
395
- --checkbox-outline-default-bg: var(--color-bg-surface-default);
396
- --card-common-radius: var(--radius-large);
397
- --card-common-padding-x: var(--spacing-component-padding-xl);
398
- --card-common-padding-y: var(--spacing-component-padding-xl);
399
- --card-common-gap: var(--spacing-component-gap-2xl);
400
- --card-container-header-gap: var(--spacing-component-gap-sm);
401
- --card-container-header-title: var(--font-color-primary-default);
402
- --card-container-header-description: var(--font-color-primary-muted);
403
- --card-container-content-gap: var(--spacing-component-gap-lg);
404
- --card-container-footer-gap: var(--spacing-component-gap-sm);
405
- --card-common-bg: var(--color-bg-surface-default);
406
- --card-common-border: var(--border-color-default);
407
- --input-common-group-gap: var(--spacing-component-gap-sm);
408
- --dropdown-item-common-radius: var(--radius-base);
409
- --dropdown-item-common-padding-x: var(--spacing-component-padding-sm);
410
- --dropdown-item-common-height: var(--scale-control-md);
411
- --dropdown-item-icon-gap: var(--spacing-component-gap-sm);
412
- --dropdown-item-common-border-width: var(--border-width-thin);
413
- --dropdown-item-simple-default-font: var(--font-color-primary-default);
414
- --dropdown-item-icon-default-icon: var(--icon-color-primary-muted);
415
- --dropdown-item-icon-disabled-icon: var(--icon-color-disabled);
416
- --dropdown-item-common-bg: var(--color-bg-surface-default);
417
- --dropdown-item-simple-hover-font: var(--font-color-primary-default);
418
- --dropdown-item-simple-disabled-font: var(--font-color-disabled);
419
- --label-font-default: var(--font-color-primary-default);
420
- --dropdown-item-simple-hover-bg: var(--color-bg-surface-muted);
421
- --dropdown-item-common-border: var(--border-color-divider);
422
- --dropdown-item-icon-icon-size: var(--icon-size-small);
423
- --label-gap: var(--spacing-component-gap-xs);
424
- --label-font-disabled: var(--font-color-disabled);
425
- --dropdown-item-header-font: var(--font-color-primary-default);
426
- --dropdown-item-common-padding-y: var(--spacing-component-padding-xs);
427
- --select-default-common-radius: var(--radius-medium);
428
- --select-default-common-padding-x: var(--spacing-component-padding-md);
429
- --select-default-common-height: var(--scale-control-lg);
430
- --select-default-common-border-width: var(--border-width-thin);
431
- --select-default-default-bg: var(--color-bg-surface-default);
432
- --select-default-default-border: var(--border-color-default);
433
- --select-default-common-gap: var(--spacing-component-padding-xs);
434
- --select-default-default-font: var(--font-color-primary-default);
435
- --select-default-default-icon: var(--icon-color-onbrand-default);
436
- --select-default-hover-bg: var(--color-bg-surface-default);
437
- --select-default-hover-border: var(--border-color-surface);
438
- --select-default-hover-font: var(--font-color-primary-default);
439
- --select-default-hover-icon: var(--icon-color-onbrand-default);
440
- --select-default-disabled-bg: var(--color-bg-surface-muted);
441
- --select-default-disabled-border: var(--border-color-default);
442
- --select-default-disabled-font: var(--icon-color-disabled);
443
- --select-default-disabled-icon: var(--icon-color-disabled);
444
- --select-dropdown-radius: var(--radius-medium);
445
- --select-dropdown-gap: var(--spacing-component-gap-none);
446
- --select-dropdown-padding-x: var(--spacing-component-padding-xs);
447
- --select-dropdown-padding-y: var(--spacing-component-padding-xs);
448
- --select-dropdown-bg: var(--color-bg-surface-default);
449
- --select-default-common-icon-size: var(--icon-size-small);
450
- --select-dropdown-border: var(--border-color-default);
451
- --badge-common-radius: var(--radius-max);
452
- --badge-common-padding-x: var(--spacing-component-padding-sm);
453
- --badge-common-padding-y: var(--spacing-component-padding-xs);
454
- --badge-common-gap: var(--spacing-component-gap-xs);
455
- --badge-common-icon-size: var(--icon-size-micro);
456
- --badge-solid-bg: var(--color-bg-primary-default);
457
- --badge-solid-font: var(--font-color-primary-default);
458
- --badge-solid-icon: var(--icon-color-onbrand-default);
459
- --badge-outline-bg: var(--color-bg-surface-default);
460
- --badge-outline-font: var(--font-color-primary-default);
461
- --badge-outline-icon: var(--icon-color-primary-default);
462
- --badge-outline-border: var(--border-color-primary-default);
463
- --badge-outline-border-width: var(--borderwidth-default);
464
- --toggle-common-radius: var(--radius-max);
465
- --toggle-common-padding-x: var(--spacing-component-padding-sm);
466
- --toggle-common-padding-y: var(--spacing-component-padding-xs);
467
- --toggle-common-gap: var(--spacing-component-gap-xs);
468
- --toggle-common-icon-size: var(--icon-size-small);
469
- --toggle-solid-default-bg: var(--color-bg-surface-muted);
470
- --toggle-solid-default-font: var(--font-color-primary-default);
471
- --toggle-solid-default-icon: var(--icon-color-onbrand-default);
472
- --toggle-solid-hover-bg: var(--color-bg-surface-accent);
473
- --toggle-solid-hover-font: var(--font-color-primary-default);
474
- --toggle-solid-hover-icon: var(--icon-color-onbrand-default);
475
- --toggle-solid-active-bg: var(--color-bg-primary-default);
476
- --toggle-solid-active-font: var(--font-color-primary-default);
477
- --toggle-solid-active-icon: var(--icon-color-onbrand-default);
478
- --toggle-common-opacity: var(--opacity-state-disabled);
479
- --toggle-outline-default-bg: var(--color-bg-surface-default);
480
- --toggle-outline-default-font: var(--font-color-primary-default);
481
- --toggle-outline-default-icon: var(--icon-color-onbrand-default);
482
- --toggle-outline-hover-bg: var(--color-bg-secondary-muted);
483
- --toggle-outline-active-bg: var(--color-bg-secondary-default);
484
- --toggle-outline-active-font: var(--font-color-primary-default);
485
- --toggle-outline-active-icon: var(--icon-color-onbrand-default);
486
- --toggle-outline-hover-font: var(--font-color-primary-default);
487
- --toggle-outline-hover-icon: var(--icon-color-onbrand-default);
488
- --toggle-outline-default-border: var(--border-color-secondary-default);
489
- --toggle-outline-border-width: var(--borderwidth-default);
490
- --toggle-outline-hover-border: var(--border-color-secondary-hover);
491
- --toggle-outline-active-border: var(--border-color-secondary-default);
492
- --toggle-common-gap-group: var(--spacing-component-gap-sm);
493
- --accordion-default-icon-size: var(--icon-size-small);
494
- --accordion-default-closed-title: var(--font-color-primary-default);
495
- --accordion-default-closed-icon: var(--icon-color-onbrand-default);
496
- --accordion-default-open-title: var(--font-color-primary-default);
497
- --accordion-default-open-icon: var(--icon-color-onbrand-default);
498
- --accordion-default-hover-title: var(--font-color-primary-default);
499
- --accordion-default-hover-icon: var(--icon-color-onbrand-default);
500
- --accordion-common-bg: var(--color-bg-surface-default);
501
- --accordion-default-border-width: var(--border-width-thin);
502
- --accordion-default-open-description: var(--font-color-primary-muted);
503
- --accordion-default-gap: var(--spacing-component-gap-sm);
504
- --accordion-default-open-gap: var(--spacing-component-gap-xs);
505
- --accordion-default-border: var(--border-color-default);
506
- --accordion-default-padding-y: var(--spacing-component-gap-lg);
507
- --accordion-custom-closed-title: var(--font-color-primary-default);
508
- --accordion-custom-closed-icon: var(--icon-color-onbrand-default);
509
- --accordion-custom-gap: var(--spacing-component-gap-sm);
510
- --accordion-custom-padding-y: var(--spacing-component-gap-lg);
511
- --accordion-custom-border-width: var(--border-width-thin);
512
- --accordion-custom-icon-size: var(--icon-size-small);
513
- --accordion-custom-closed-border: var(--border-color-default);
514
- --accordion-custom-hover-title: var(--font-color-primary-default);
515
- --accordion-custom-hover-icon: var(--icon-color-onbrand-default);
516
- --accordion-custom-open-title: var(--font-color-primary-default);
517
- --accordion-custom-open-description: var(--font-color-primary-muted);
518
- --accordion-custom-open-icon: var(--icon-color-onbrand-default);
519
- --accordion-custom-open-gap: var(--spacing-component-gap-xs);
520
- --accordion-custom-closed-bg: var(--color-bg-surface-muted);
521
- --accordion-custom-padding-x: var(--spacing-component-gap-lg);
522
- --accordion-custom-hover-bg: var(--color-bg-surface-accent);
523
- --accordion-custom-hover-border: var(--border-color-default);
524
- --accordion-custom-open-bg: var(--color-bg-surface-muted);
525
- --accordion-custom-open-border: var(--border-color-default);
526
- --accordion-custom-radius: var(--radius-large);
527
- --dialog-common-radius: var(--radius-large);
528
- --dialog-common-padding-x: var(--spacing-component-padding-xl);
529
- --dialog-common-padding-y: var(--spacing-component-padding-xl);
530
- --dialog-common-gap: var(--spacing-component-gap-2xl);
531
- --dialog-common-bg: var(--color-bg-surface-default);
532
- --dialog-common-border: var(--border-color-default);
533
- --dialog-container-header-gap: var(--spacing-component-gap-sm);
534
- --dialog-container-header-title: var(--font-color-primary-default);
535
- --dialog-container-header-description: var(--font-color-secondary-default);
536
- --dialog-container-footer-gap: var(--spacing-component-gap-sm);
537
- --card-common-border-width: var(--border-width-thin);
538
- --dialog-common-border-width: var(--border-width-thin);
539
- --dropdown-container-radius: var(--radius-medium);
540
- --dropdown-container-gap: var(--spacing-component-gap-none);
541
- --dropdown-container-padding-x: var(--spacing-component-padding-xs);
542
- --dropdown-container-padding-y: var(--spacing-component-padding-xs);
543
- --dropdown-container-bg: var(--color-bg-surface-default);
544
- --dropdown-container-border: var(--border-color-default);
545
- --dropdown-container-border-width: var(--border-width-thin);
546
- --popover-common-radius: var(--radius-large);
547
- --popover-common-padding-x: var(--spacing-component-padding-lg);
548
- --popover-common-padding-y: var(--spacing-component-padding-lg);
549
- --popover-solid-bg: var(--color-bg-surface-default);
550
- --dropdown-item-simple-active-font: var(--font-color-primary-default);
551
- --dropdown-item-simple-active-icon: var(--icon-color-primary-default);
552
- --popover-outline-bg: var(--color-bg-surface-default);
553
- --popover-outline-border: var(--border-color-default);
554
- --popover-outline-border-width: var(--border-width-regular);
555
- --tabs-item-common-radius: var(--radius-small);
556
- --tabs-item-common-padding-x: var(--spacing-component-padding-sm);
557
- --tabs-item-common-padding-y: var(--spacing-component-padding-sm);
558
- --tabs-item-common-gap: var(--spacing-component-gap-xs);
559
- --tabs-item-common-icon-size: var(--icon-size-small);
560
- --tabs-item-solid-on-bg: var(--color-bg-primary-default);
561
- --tabs-item-solid-on-font: var(--font-color-onbrand-default);
562
- --tabs-item-solid-on-icon: var(--icon-color-onbrand-default);
563
- --tabs-item-solid-off-bg: var(--color-bg-surface-muted);
564
- --tabs-item-solid-off-font: var(--font-color-primary-muted);
565
- --tabs-item-solid-off-icon: var(--icon-color-primary-muted);
566
- --tabs-item-solid-line-on-bg: var(--color-bg-primary-default);
567
- --tabs-item-solid-line-on-font: var(--font-color-onbrand-default);
568
- --tabs-item-solid-line-on-icon: var(--icon-color-onbrand-default);
569
- --tabs-item-solid-line-off-bg: var(--color-bg-surface-default);
570
- --tabs-item-solid-line-off-font: var(--font-color-onbrand-hover);
571
- --tabs-item-solid-line-off-icon: var(--icon-color-onbrand-hover);
572
- --tabs-item-solid-ghost-on-bg: var(--color-bg-primary-default);
573
- --tabs-item-solid-ghost-on-font: var(--font-color-onbrand-default);
574
- --tabs-item-solid-ghost-on-icon: var(--icon-color-onbrand-default);
575
- --tabs-item-solid-ghost-off-font: var(--font-color-primary-muted);
576
- --tabs-item-solid-ghost-off-icon: var(--icon-color-primary-muted);
577
- --tabs-item-bottom-border-on-font: var(--font-color-primary-default);
578
- --tabs-item-bottom-border-on-icon: var(--icon-color-primary-default);
579
- --tabs-item-bottom-border-off-font: var(--font-color-primary-muted);
580
- --tabs-item-bottom-border-off-icon: var(--icon-color-primary-muted);
581
- --tabs-container-radius: var(--radius-small);
582
- --tabs-container-gap: var(--spacing-component-gap-md);
583
- --tabs-container-padding-x: var(--spacing-component-padding-xs);
584
- --tabs-container-padding-y: var(--spacing-component-padding-xs);
585
- --tabs-container-bg: var(--color-bg-surface-muted);
586
- --tabs-item-solid-line-off-border: var(--border-color-primary-default);
587
- --tabs-item-solid-line-off-border-width: var(--border-width-thin);
588
- --tabs-item-bottom-border-on-border: var(--border-color-primary-default);
589
- --tabs-item-bottom-border-on-border-width: var(--border-width-thick);
590
- --tabs-item-solid-hover-bg: var(--color-bg-surface-accent);
591
- --tabs-item-solid-hover-font: var(--font-color-primary-muted);
592
- --tabs-item-solid-hover-icon: var(--icon-color-primary-muted);
593
- --tabs-item-solid-line-hover-bg: var(--color-bg-surface-default);
594
- --tabs-item-solid-line-hover-font: var(--font-color-onbrand-hover);
595
- --tabs-item-solid-line-hover-icon: var(--icon-color-onbrand-hover);
596
- --tabs-item-solid-line-hover-border: var(--border-color-primary-hover);
597
- --tabs-item-solid-line-hover-border-width: var(--border-width-thin);
598
- --tabs-item-solid-ghost-hover-font: var(--font-color-primary-muted);
599
- --tabs-item-solid-ghost-hover-icon: var(--icon-color-primary-muted);
600
- --tabs-item-solid-ghost-hover-bg: var(--color-bg-surface-muted);
601
- --tabs-item-bottom-border-hover-font: var(--font-color-primary-default);
602
- --tabs-item-bottom-border-hover-icon: var(--icon-color-primary-default);
603
- --table-item-common-padding-x: var(--spacing-component-padding-md);
604
- --table-item-common-padding-y: var(--spacing-component-padding-lg);
605
- --table-item-cell-bg: var(--color-bg-surface-alt);
606
- --table-item-cell-font: var(--font-color-primary-default);
607
- --table-item-cell-icon: var(--icon-color-primary-muted);
608
- --table-container-radius: var(--radius-large);
609
- --table-container-bg: var(--color-bg-surface-muted);
610
- --table-container-border: var(--border-color-default);
611
- --table-container-border-width: var(--border-width-thin);
612
- --table-item-cell-border: var(--border-color-default);
613
- --table-item-cell-boder-width: var(--border-width-thin);
614
- --table-item-cell-last-bg: var(--color-bg-surface-default);
615
- --table-item-header-font: var(--font-color-primary-default);
616
- --table-item-header-icon: var(--icon-color-primary-muted);
617
- --table-item-header-border: var(--border-color-default);
618
- --table-item-header-boder-width: var(--border-width-thin);
619
- --table-item-footer-cell-bg: var(--color-bg-surface-accent);
620
- --table-item-footer-cell-font: var(--font-color-primary-default);
621
- --table-item-footer-cell-border: var(--border-color-default);
622
- --table-item-footer-cell-boder-width: var(--border-width-thin);
623
- --table-item-common-icon-size: var(--icon-size-small);
624
- --dialog-common-bg-overlay: var(--color-bg-overlay-default);
625
- --card-common-bg-hover: var(--color-bg-surface-muted);
626
- --card-common-border-hover: var(--border-color-default);
627
- --box-solid-radius: var(--radius-medium);
628
- --box-solid-bg: var(--color-bg-surface-default);
629
- --box-solid-gap: var(--spacing-component-gap-xl);
630
- --box-solid-padding-x: var(--spacing-component-padding-xl);
631
- --box-solid-padding-y: var(--spacing-component-padding-xl);
632
- --box-outline-radius: var(--radius-medium);
633
- --box-outline-gap: var(--spacing-component-gap-xl);
634
- --box-outline-padding-x: var(--spacing-component-padding-xl);
635
- --box-outline-padding-y: var(--spacing-component-padding-xl);
636
- --box-outline-border-width: var(--border-width-thin);
637
- --box-outline-bg: var(--color-bg-surface-default);
638
- --box-outline-border: var(--border-color-default);
639
- --code-block-solid-radius: var(--radius-medium);
640
- --code-block-solid-padding-x: var(--spacing-component-padding-xl);
641
- --code-block-solid-padding-y: var(--spacing-component-padding-xl);
642
- --code-block-solid-bg: var(--color-bg-surface-muted);
643
- --code-block-outline-radius: var(--radius-medium);
644
- --code-block-outline-padding-x: var(--spacing-component-padding-xl);
645
- --code-block-outline-padding-y: var(--spacing-component-padding-xl);
646
- --code-block-outline-border-width: var(--border-width-thin);
647
- --code-block-outline-bg: var(--color-bg-surface-muted);
648
- --code-block-outline-border: var(--border-color-default);
649
- --code-block-solid-font: var(--font-color-secondary-default);
650
- --code-block-outline-font: var(--font-color-secondary-default);
651
- --progress-radius: var(--radius-max);
652
- --progress-solid-track: var(--color-progress-track);
653
- --progress-solid-fill: var(--color-progress-fill);
654
- --progress-height: var(--scale-control-xs);
655
- --skeleton-fill: var(--color-bg-surface-muted);
656
- --skeleton-radius: var(--radius-medium);
657
- --skeleton-radius-full: var(--radius-max);
658
- --scrollbar-fill: var(--color-bg-surface-accent);
659
- --scrollbar-radius: var(--radius-max);
660
- --scrollbar-horizontal-height: var(--scale-control-xs);
661
- --scrollbar-vertical-width: var(--scale-control-xs);
662
- --spinner-fill-base: var(--icon-color-primary-default);
663
- --spinner-fill-sub: var(--icon-color-primary-muted);
664
- --tooltip-radius: var(--radius-medium);
665
- --tooltip-padding-x: var(--spacing-component-padding-md);
666
- --tooltip-padding-y: var(--spacing-component-padding-md);
667
- --tooltip-solid-bg: var(--color-bg-surface-default);
668
- --tooltip-outline-border-width: var(--border-width-thin);
669
- --tooltip-outline-bg: var(--color-bg-surface-default);
670
- --tooltip-outline-border: var(--border-color-default);
671
- --tooltip-font: var(--font-color-primary-default);
672
- --separator-border: var(--border-color-default);
673
- --pagination-common-radius: var(--radius-medium);
674
- --pagination-common-padding-sm: var(--spacing-component-padding-sm);
675
- --pagination-common-gap: var(--spacing-component-gap-xs);
676
- --pagination-common-item-size: var(--scale-control-lg);
677
- --pagination-link-default-font: var(--font-color-onbrand-default);
678
- --pagination-link-default-icon: var(--icon-color-onbrand-default);
679
- --pagination-link-hover-bg: var(--color-bg-surface-muted);
680
- --pagination-link-hover-font: var(--font-color-onbrand-default);
681
- --pagination-link-hover-icon: var(--icon-color-onbrand-default);
682
- --pagination-item-active-font: var(--font-color-primary-default);
683
- --pagination-common-padding-md: var(--spacing-component-padding-md);
684
- --pagination-common-icon-size: var(--icon-size-small);
685
- --pagination-item-active-bg: var(--color-bg-surface-default);
686
- --pagination-item-active-border: var(--border-color-default);
687
- --pagination-item-active-border-width: var(--border-width-thin);
688
- --pagination-item-active-hover-bg: var(--color-bg-surface-muted);
689
- --pagination-item-active-hover-font: var(--font-color-primary-default);
690
- --pagination-item-active-hover-border: var(--border-color-default);
691
- --pagination-item-active-hover-border-width: var(--border-width-thin);
692
- --pagination-item-ellipsis-font: var(--font-color-primary-default);
693
- --toast-common-radius: var(--radius-medium);
694
- --toast-common-padding-x: var(--spacing-component-padding-lg);
695
- --toast-common-padding-y: var(--spacing-component-padding-lg);
696
- --toast-common-gap: var(--spacing-component-gap-xs);
697
- --toast-common-icon-size: var(--icon-size-medium);
698
- --toast-default-title: var(--font-color-onbrand-default);
699
- --toast-common-border: var(--border-color-default);
700
- --toast-common-bg: var(--color-bg-surface-default);
701
- --toast-success-title: var(--color-state-success-default);
702
- --toast-success-bg: var(--color-state-success-subtle);
703
- --toast-success-border: var(--color-state-success-default);
704
- --toast-info-bg: var(--color-state-info-subtle);
705
- --toast-info-border: var(--color-state-info-default);
706
- --toast-info-title: var(--color-state-info-default);
707
- --toast-info-description: var(--font-color-secondary-default);
708
- --toast-warning-bg: var(--color-state-warning-subtle);
709
- --toast-warning-border: var(--color-state-warning-default);
710
- --toast-warning-title: var(--color-state-warning-default);
711
- --toast-error-bg: var(--color-state-error-subtle);
712
- --toast-error-border: var(--color-state-error-default);
713
- --toast-error-title: var(--color-state-error-default);
714
- --calendar-date-picker-radius: var(--radius-medium);
715
- --calendar-date-picker-padding-x: var(--spacing-component-padding-md);
716
- --calendar-date-picker-padding-y: var(--spacing-component-padding-md);
717
- --calendar-date-picker-icon-size: var(--icon-size-medium);
718
- --calendar-date-picker-border-width: var(--border-width-thin);
719
- --calendar-date-picker-border: var(--border-color-default);
720
- --calendar-date-picker-bg: var(--color-bg-surface-default);
721
- --calendar-date-picker-font: var(--font-color-primary-muted);
722
- --calendar-date-picker-icon: var(--icon-color-onbrand-default);
723
- --calendar-days-disabled-font: var(--font-color-disabled);
724
- --calendar-days-default-font: var(--font-color-primary-default);
725
- --calendar-days-radius: var(--radius-small);
726
- --calendar-days-hover-font: var(--font-color-primary-default);
727
- --calendar-days-hover-bg: var(--color-bg-surface-muted);
728
- --calendar-days-selected-font: var(--font-color-primary-default);
729
- --calendar-days-selected-bg: var(--color-bg-surface-muted);
730
- --calendar-days-current-font: var(--font-color-inverse-default);
731
- --calendar-days-current-bg: var(--color-bg-primary-default);
732
- --calendar-container-radius: var(--radius-medium);
733
- --calendar-container-padding-x: var(--spacing-component-padding-sm);
734
- --calendar-container-padding-y: var(--spacing-component-padding-sm);
735
- --calendar-container-icon-size: var(--icon-size-small);
736
- --calendar-container-border-width: var(--border-width-thin);
737
- --calendar-container-bg: var(--color-bg-surface-default);
738
- --calendar-container-icon: var(--icon-color-onbrand-default);
739
- --calendar-container-gap: var(--spacing-component-padding-md);
740
- --calendar-container-border: var(--border-color-default);
741
- --navigation-button-common-radius: var(--radius-medium);
742
- --navigation-button-common-padding-x: var(--spacing-component-padding-md);
743
- --navigation-button-common-padding-y: var(--spacing-component-padding-sm);
744
- --navigation-button-common-gap: var(--spacing-component-gap-xs);
745
- --navigation-button-common-icon-size: var(--icon-size-micro);
746
- --navigation-button-solid-ghost-default-font: var(--font-color-primary-default);
747
- --navigation-button-solid-ghost-default-icon: var(--icon-color-onbrand-default);
748
- --navigation-button-solid-ghost-active-font: var(--font-color-primary-default);
749
- --navigation-button-solid-ghost-active-icon: var(--icon-color-onbrand-default);
750
- --navigation-button-solid-ghost-active-bg: var(--color-bg-primary-default);
751
- --navigation-button-bottom-border-default-font: var(--font-color-primary-default);
752
- --navigation-button-bottom-border-default-icon: var(--icon-color-onbrand-default);
753
- --navigation-button-bottom-border-hover-font: var(--font-color-onbrand-hover);
754
- --navigation-button-bottom-border-hover-icon: var(--icon-color-onbrand-hover);
755
- --navigation-button-solid-ghost-disabled-font: var(--font-color-disabled);
756
- --navigation-button-solid-ghost-disabled-icon: var(--icon-color-disabled);
757
- --navigation-button-bottom-border-active-font: var(--font-color-primary-default);
758
- --navigation-button-bottom-border-active-icon: var(--icon-color-onbrand-default);
759
- --navigation-button-bottom-border-active-border: var(--icon-color-primary-default);
760
- --navigation-button-bottom-border-disabled-font: var(--font-color-disabled);
761
- --navigation-button-bottom-border-disabled-icon: var(--icon-color-disabled);
762
- --navigation-button-bottom-border-active-border-width: var(--border-width-thick);
763
- --navigation-item-common-radius: var(--radius-medium);
764
- --navigation-item-common-padding-x: var(--spacing-component-padding-sm);
765
- --navigation-item-common-padding-y: var(--spacing-component-padding-sm);
766
- --navigation-item-common-gap: var(--spacing-component-padding-sm);
767
- --navigation-item-common-icon-size: var(--icon-size-small);
768
- --navigation-item-default-font: var(--font-color-primary-default);
769
- --navigation-item-default-icon: var(--icon-color-onbrand-default);
770
- --navigation-item-hover-bg: var(--color-bg-primary-muted);
771
- --navigation-item-hover-font: var(--font-color-primary-default);
772
- --navigation-item-content-common-radius: var(--radius-medium);
773
- --navigation-item-content-common-padding-x: var(--spacing-component-padding-md);
774
- --navigation-item-content-common-padding-y: var(--spacing-component-padding-md);
775
- --navigation-item-content-common-gap: var(--spacing-component-padding-xs);
776
- --navigation-item-content-common-icon-size: var(--icon-size-small);
777
- --navigation-item-content-default-title: var(--font-color-primary-default);
778
- --navigation-item-content-default-icon: var(--icon-color-onbrand-default);
779
- --navigation-item-content-hover-bg: var(--color-bg-primary-muted);
780
- --navigation-item-content-hover-title: var(--font-color-primary-default);
781
- --navigation-item-content-hover-icon: var(--icon-color-onbrand-default);
782
- --navigation-button-container-gap: var(--spacing-component-gap-sm);
783
- --navigation-item-container-radius: var(--radius-medium);
784
- --navigation-item-container-padding-x: var(--spacing-component-padding-md);
785
- --navigation-item-container-padding-y: var(--spacing-component-padding-md);
786
- --navigation-item-container-gap: var(--spacing-component-gap-sm);
787
- --navigation-item-container-border-width: var(--border-width-thin);
788
- --navigation-item-container-border: var(--border-color-default);
789
- --navigation-item-container-bg: var(--color-bg-surface-default);
790
- --button-gradient-default-font: var(--font-color-onbrand-default);
791
- --button-gradient-default-icon: var(--icon-color-onbrand-default);
792
- --button-gradient-hover-font: var(--font-color-onbrand-default);
793
- --button-gradient-hover-icon: var(--icon-color-onbrand-default);
794
- --button-gradient-disabled-font: var(--font-color-onbrand-default);
795
- --button-gradient-disabled-icon: var(--icon-color-onbrand-default);
796
- --badge-gradient-font: var(--font-color-inverse-default);
797
- --badge-gradient-icon: var(--icon-color-inverse-default);
798
- --navigation-button-gradient-default-font: var(--font-color-primary-default);
799
- --navigation-button-gradient-default-icon: var(--icon-color-onbrand-default);
800
- --navigation-button-gradient-active-font: var(--font-color-primary-default);
801
- --navigation-button-gradient-active-icon: var(--icon-color-onbrand-default);
802
- --navigation-button-gradient-disabled-font: var(--font-color-disabled);
803
- --navigation-button-gradient-disabled-icon: var(--icon-color-disabled);
804
- --progress-gradient-track: var(--color-progress-track);
805
- --empty-common-padding-x: var(--spacing-component-padding-2xl);
806
- --empty-common-padding-y: var(--spacing-component-padding-2xl);
807
- --empty-common-gap: var(--spacing-component-gap-2xl);
808
- --empty-container-content-gap: var(--spacing-component-gap-lg);
809
- --empty-container-footer-gap: var(--spacing-component-gap-md);
810
- --empty-container-content-title: var(--font-color-primary-default);
811
- --empty-container-content-description: var(--font-color-secondary-default);
812
- --empty-container-content-icon: var(--icon-color-onbrand-default);
813
- --empty-container-content-icon-bg: var(--color-bg-surface-muted);
814
- --empty-common-radius: var(--radius-medium);
815
- --dropzone-common-radius: var(--radius-medium);
816
- --dropzone-common-padding-x: var(--spacing-component-padding-2xl);
817
- --dropzone-common-padding-y: var(--spacing-component-padding-2xl);
818
- --dropzone-common-gap: var(--spacing-component-gap-lg);
819
- --dropzone-container-icon-color: var(--icon-color-onbrand-default);
820
- --dropzone-container-icon-bg: var(--color-bg-surface-muted);
821
- --dropzone-container-content-gap: var(--spacing-component-gap-sm);
822
- --dropzone-container-content-title: var(--font-color-primary-default);
823
- --dropzone-container-content-description: var(--font-color-secondary-default);
824
- --dropzone-common-border: var(--border-color-surface);
825
- --dropzone-common-bg: var(--color-bg-surface-default);
826
- --dropzone-common-border-width: var(--border-width-thin);
827
- --dropzone-container-icon-radius: var(--radius-small);
828
- --switch-common-radius: var(--radius-max);
829
- --switch-common-padding-x: var(--spacing-component-padding-xxs);
830
- --switch-common-padding-y: var(--spacing-component-padding-xxs);
831
- --switch-off-bg: var(--color-bg-disabled);
832
- --switch-off-thumb: var(--color-bg-surface-default);
833
- --switch-on-thumb: var(--color-bg-surface-default);
834
- --switch-on-bg: var(--color-bg-primary-default);
835
- --drawer-common-radius: var(--radius-large);
836
- --drawer-common-bg: var(--color-bg-surface-default);
837
- --drawer-common-border: var(--border-color-default);
838
- --drawer-common-border-width: var(--border-width-thin);
839
- --drawer-container-header-gap: var(--spacing-component-gap-sm);
840
- --drawer-container-header-title: var(--font-color-primary-default);
841
- --drawer-container-header-description: var(--font-color-primary-muted);
842
- --drawer-container-footer-gap: var(--spacing-component-gap-sm);
843
- --drawer-common-padding-x: var(--spacing-component-padding-lg);
844
- --drawer-common-padding-y: var(--spacing-component-padding-lg);
845
- --chart-wrapper-grid-color: var(--color-chart-border-grid);
846
- --chart-wrapper-axis-color: var(--color-chart-border-axis);
847
- --chart-wrapper-label: var(--color-chart-text-axis-label);
848
- --chart-data-label-font: var(--color-chart-text-data-value);
849
- --chart-range-slider-track-bg: var(--color-chart-control-range-track);
850
- --chart-range-slider-track-border: var(--color-chart-control-border);
851
- --chart-range-slider-thumb-handle: var(--color-chart-control-handle);
852
- --chart-range-slider-thumb-handle-border: var(--color-chart-control-border);
853
- --chart-range-slider-thumb-bar: var(--color-chart-control-thumb);
854
- --card-common-padding-x-mobile: var(--spacing-5-mobile);
855
- --card-common-padding-y-mobile: var(--spacing-5-mobile);
856
- --card-common-gap-mobile: var(--spacing-5-mobile);
857
- --box-solid-gap-mobile: var(--spacing-4-mobile);
858
- --box-solid-padding-x-mobile: var(--spacing-4-mobile);
859
- --box-solid-padding-y-mobile: var(--spacing-4-mobile);
860
- --box-outline-gap-mobile: var(--spacing-4-mobile);
861
- --box-outline-padding-x-mobile: var(--spacing-4-mobile);
862
- --box-outline-padding-y-mobile: var(--spacing-4-mobile);
863
- --table-item-cell-value-font-brand: var(--font-color-secondary-default);
864
- --select-small-common-gap: var(--spacing-component-padding-xs);
865
- --select-small-common-padding-x: var(--spacing-component-padding-sm);
866
- --select-small-common-height: var(--scale-control-sm);
867
- --breakpoint-max-mobile: 840px;
128
+ --breakpoint-laptop: 1600px;
129
+ --breakpoint-mobile: 840px;
868
130
  }
869
131
  }
870
132
 
@@ -1226,6 +488,10 @@
1226
488
  z-index: 1;
1227
489
  }
1228
490
 
491
+ .z-\[100\] {
492
+ z-index: 100;
493
+ }
494
+
1229
495
  .order-first {
1230
496
  order: -9999;
1231
497
  }
@@ -1333,6 +599,10 @@
1333
599
  display: none;
1334
600
  }
1335
601
 
602
+ .inline {
603
+ display: inline;
604
+ }
605
+
1336
606
  .inline-flex {
1337
607
  display: inline-flex;
1338
608
  }
@@ -1387,9 +657,9 @@
1387
657
  height: var(--pagination-common-item-size);
1388
658
  }
1389
659
 
1390
- .size-\(--select-default-common-icon-size\) {
1391
- width: var(--select-default-common-icon-size);
1392
- height: var(--select-default-common-icon-size);
660
+ .size-\(--select-base-common-icon-size\) {
661
+ width: var(--select-base-common-icon-size);
662
+ height: var(--select-base-common-icon-size);
1393
663
  }
1394
664
 
1395
665
  .size-\(--toast-common-icon-size\)\! {
@@ -1501,8 +771,8 @@
1501
771
  height: var(--scrollbar-horizontal-height);
1502
772
  }
1503
773
 
1504
- .h-\(--select-default-common-height\) {
1505
- height: var(--select-default-common-height);
774
+ .h-\(--select-base-common-height\) {
775
+ height: var(--select-base-common-height);
1506
776
  }
1507
777
 
1508
778
  .h-\(--select-small-common-height\) {
@@ -1537,10 +807,18 @@
1537
807
  height: calc(var(--spacing) * 9);
1538
808
  }
1539
809
 
810
+ .h-10 {
811
+ height: calc(var(--spacing) * 10);
812
+ }
813
+
1540
814
  .h-12 {
1541
815
  height: calc(var(--spacing) * 12);
1542
816
  }
1543
817
 
818
+ .h-16 {
819
+ height: calc(var(--spacing) * 16);
820
+ }
821
+
1544
822
  .h-\[100px\] {
1545
823
  height: 100px;
1546
824
  }
@@ -1625,6 +903,14 @@
1625
903
  width: calc(var(--spacing) * 6);
1626
904
  }
1627
905
 
906
+ .w-10 {
907
+ width: calc(var(--spacing) * 10);
908
+ }
909
+
910
+ .w-16 {
911
+ width: calc(var(--spacing) * 16);
912
+ }
913
+
1628
914
  .w-72 {
1629
915
  width: calc(var(--spacing) * 72);
1630
916
  }
@@ -1669,6 +955,10 @@
1669
955
  width: calc(2rem + var(--switch-common-padding-x) * 2);
1670
956
  }
1671
957
 
958
+ .w-\[var\(--radix-navigation-menu-viewport-width\)\] {
959
+ width: var(--radix-navigation-menu-viewport-width);
960
+ }
961
+
1672
962
  .w-auto {
1673
963
  width: auto;
1674
964
  }
@@ -1828,6 +1118,10 @@
1828
1118
  grid-auto-rows: min-content;
1829
1119
  }
1830
1120
 
1121
+ .grid-cols-4 {
1122
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1123
+ }
1124
+
1831
1125
  .grid-cols-10 {
1832
1126
  grid-template-columns: repeat(10, minmax(0, 1fr));
1833
1127
  }
@@ -2028,8 +1322,8 @@
2028
1322
  gap: var(--pagination-common-gap);
2029
1323
  }
2030
1324
 
2031
- .gap-\(--select-default-common-gap\) {
2032
- gap: var(--select-default-common-gap);
1325
+ .gap-\(--select-base-common-gap\) {
1326
+ gap: var(--select-base-common-gap);
2033
1327
  }
2034
1328
 
2035
1329
  .gap-\(--select-dropdown-gap\) {
@@ -2092,10 +1386,6 @@
2092
1386
  gap: calc(var(--spacing) * 8);
2093
1387
  }
2094
1388
 
2095
- .gap-component-gap-lg {
2096
- gap: var(--spacing-5);
2097
- }
2098
-
2099
1389
  :where(.space-y-1 > :not(:last-child)) {
2100
1390
  --tw-space-y-reverse: 0;
2101
1391
  margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
@@ -2268,8 +1558,8 @@
2268
1558
  border-radius: var(--scrollbar-radius);
2269
1559
  }
2270
1560
 
2271
- .rounded-\(--select-default-common-radius\) {
2272
- border-radius: var(--select-default-common-radius);
1561
+ .rounded-\(--select-base-common-radius\) {
1562
+ border-radius: var(--select-base-common-radius);
2273
1563
  }
2274
1564
 
2275
1565
  .rounded-\(--select-dropdown-radius\) {
@@ -2432,9 +1722,9 @@
2432
1722
  border-width: var(--popover-outline-border-width);
2433
1723
  }
2434
1724
 
2435
- .border-\(length\:--select-default-common-border-width\) {
1725
+ .border-\(length\:--select-base-common-border-width\) {
2436
1726
  border-style: var(--tw-border-style);
2437
- border-width: var(--select-default-common-border-width);
1727
+ border-width: var(--select-base-common-border-width);
2438
1728
  }
2439
1729
 
2440
1730
  .border-\(length\:--table-container-border-width\) {
@@ -2580,8 +1870,8 @@
2580
1870
  border-color: var(--popover-outline-border);
2581
1871
  }
2582
1872
 
2583
- .border-\(--select-default-default-border\) {
2584
- border-color: var(--select-default-default-border);
1873
+ .border-\(--select-base-default-border\) {
1874
+ border-color: var(--select-base-default-border);
2585
1875
  }
2586
1876
 
2587
1877
  .border-\(--select-dropdown-border\) {
@@ -2800,8 +2090,8 @@
2800
2090
  background-color: var(--scrollbar-fill);
2801
2091
  }
2802
2092
 
2803
- .bg-\(--select-default-default-bg\) {
2804
- background-color: var(--select-default-default-bg);
2093
+ .bg-\(--select-base-default-bg\) {
2094
+ background-color: var(--select-base-default-bg);
2805
2095
  }
2806
2096
 
2807
2097
  .bg-\(--select-dropdown-bg\) {
@@ -2877,6 +2167,10 @@
2877
2167
  padding: calc(var(--spacing) * 0);
2878
2168
  }
2879
2169
 
2170
+ .p-0\! {
2171
+ padding: calc(var(--spacing) * 0) !important;
2172
+ }
2173
+
2880
2174
  .p-2 {
2881
2175
  padding: calc(var(--spacing) * 2);
2882
2176
  }
@@ -3001,8 +2295,8 @@
3001
2295
  padding-inline: var(--popover-common-padding-x);
3002
2296
  }
3003
2297
 
3004
- .px-\(--select-default-common-padding-x\) {
3005
- padding-inline: var(--select-default-common-padding-x);
2298
+ .px-\(--select-base-common-padding-x\) {
2299
+ padding-inline: var(--select-base-common-padding-x);
3006
2300
  }
3007
2301
 
3008
2302
  .px-\(--select-dropdown-padding-x\) {
@@ -3053,14 +2347,6 @@
3053
2347
  padding-inline: calc(var(--spacing) * 4);
3054
2348
  }
3055
2349
 
3056
- .px-component-padding-lg {
3057
- padding-inline: var(--spacing-5);
3058
- }
3059
-
3060
- .px-component-padding-md {
3061
- padding-inline: var(--spacing-4);
3062
- }
3063
-
3064
2350
  .py-\(--badge-common-padding-y\) {
3065
2351
  padding-block: var(--badge-common-padding-y);
3066
2352
  }
@@ -3181,18 +2467,6 @@
3181
2467
  padding-block: calc(var(--spacing) * 2);
3182
2468
  }
3183
2469
 
3184
- .py-component-padding-lg {
3185
- padding-block: var(--spacing-5);
3186
- }
3187
-
3188
- .py-component-padding-md {
3189
- padding-block: var(--spacing-4);
3190
- }
3191
-
3192
- .py-component-padding-sm {
3193
- padding-block: var(--spacing-3);
3194
- }
3195
-
3196
2470
  .pt-4 {
3197
2471
  padding-top: calc(var(--spacing) * 4);
3198
2472
  }
@@ -3258,6 +2532,13 @@
3258
2532
  letter-spacing: var(--font-letter-spacing-body) !important;
3259
2533
  }
3260
2534
 
2535
+ .typo-body-sm-bold {
2536
+ font-size: var(--font-size-body-sm);
2537
+ line-height: var(--line-height-body-sm);
2538
+ font-weight: var(--font-font-weight-body-bold);
2539
+ letter-spacing: var(--font-letter-spacing-body);
2540
+ }
2541
+
3261
2542
  .typo-body-xl {
3262
2543
  font-size: var(--font-size-body-xl);
3263
2544
  line-height: var(--line-height-body-xl);
@@ -3272,6 +2553,13 @@
3272
2553
  letter-spacing: var(--font-letter-spacing-body);
3273
2554
  }
3274
2555
 
2556
+ .typo-body-xs-bold {
2557
+ font-size: var(--font-size-body-xs);
2558
+ line-height: var(--line-height-body-xs);
2559
+ font-weight: var(--font-font-weight-body-bold);
2560
+ letter-spacing: var(--font-letter-spacing-body);
2561
+ }
2562
+
3275
2563
  .typo-heading-md {
3276
2564
  font-size: var(--font-size-heading-md);
3277
2565
  line-height: var(--line-height-heading-md);
@@ -3311,6 +2599,20 @@
3311
2599
  letter-spacing: var(--font-letter-spacing-metric);
3312
2600
  }
3313
2601
 
2602
+ .typo-metric-md-light {
2603
+ font-size: var(--font-size-metric-md);
2604
+ line-height: var(--line-height-metric-md);
2605
+ font-weight: var(--font-font-weight-metric-light);
2606
+ letter-spacing: var(--font-letter-spacing-metric);
2607
+ }
2608
+
2609
+ .typo-metric-sm {
2610
+ font-size: var(--font-size-metric-sm);
2611
+ line-height: var(--line-height-metric-sm);
2612
+ font-weight: var(--font-font-weight-metric-normal);
2613
+ letter-spacing: var(--font-letter-spacing-metric);
2614
+ }
2615
+
3314
2616
  .typo-metric-xs {
3315
2617
  font-size: var(--font-size-metric-xs);
3316
2618
  line-height: var(--line-height-metric-xs);
@@ -3328,21 +2630,21 @@
3328
2630
  .typo-productive-code-sm {
3329
2631
  font-size: var(--font-size-productive-code-sm);
3330
2632
  line-height: var(--line-height-productive-code-sm);
3331
- font-weight: var(--font-weight-productive-normal);
2633
+ font-weight: var(--font-font-weight-productive-normal);
3332
2634
  letter-spacing: var(--font-letter-spacing-productive);
3333
2635
  }
3334
2636
 
3335
2637
  .typo-productive-label-md {
3336
2638
  font-size: var(--font-size-productive-label-md);
3337
2639
  line-height: var(--line-height-productive-label-md);
3338
- font-weight: var(--font-weight-productive-normal);
2640
+ font-weight: var(--font-font-weight-productive-normal);
3339
2641
  letter-spacing: var(--font-letter-spacing-productive);
3340
2642
  }
3341
2643
 
3342
2644
  .typo-productive-label-sm {
3343
2645
  font-size: var(--font-size-productive-label-sm);
3344
2646
  line-height: var(--line-height-productive-label-sm);
3345
- font-weight: var(--font-weight-productive-normal);
2647
+ font-weight: var(--font-font-weight-productive-bold);
3346
2648
  letter-spacing: var(--font-letter-spacing-productive);
3347
2649
  }
3348
2650
 
@@ -3376,6 +2678,11 @@
3376
2678
  line-height: var(--leading-tight);
3377
2679
  }
3378
2680
 
2681
+ .font-\(weight\:--font-weight-body-bold\) {
2682
+ --tw-font-weight: var(--font-weight-body-bold);
2683
+ font-weight: var(--font-weight-body-bold);
2684
+ }
2685
+
3379
2686
  .font-bold {
3380
2687
  --tw-font-weight: var(--font-weight-bold);
3381
2688
  font-weight: var(--font-weight-bold);
@@ -3592,8 +2899,12 @@
3592
2899
  color: var(--pagination-link-default-font);
3593
2900
  }
3594
2901
 
3595
- .text-\(--select-default-default-font\) {
3596
- color: var(--select-default-default-font);
2902
+ .text-\(--select-base-default-font\) {
2903
+ color: var(--select-base-default-font);
2904
+ }
2905
+
2906
+ .text-\(--select-base-default-icon\) {
2907
+ color: var(--select-base-default-icon);
3597
2908
  }
3598
2909
 
3599
2910
  .text-\(--spinner-fill-base\) {
@@ -3965,6 +3276,10 @@
3965
3276
  top: 100%;
3966
3277
  }
3967
3278
 
3279
+ .group-data-\[viewport\=false\]\/navigation-menu\:z-\[100\]:is(:where(.group\/navigation-menu)[data-viewport="false"] *) {
3280
+ z-index: 100;
3281
+ }
3282
+
3968
3283
  .group-data-\[viewport\=false\]\/navigation-menu\:mt-1:is(:where(.group\/navigation-menu)[data-viewport="false"] *) {
3969
3284
  margin-top: calc(var(--spacing) * 1);
3970
3285
  }
@@ -4041,8 +3356,8 @@
4041
3356
  border-color: var(--pagination-item-active-hover-border);
4042
3357
  }
4043
3358
 
4044
- .hover\:border-\(--select-default-hover-border\):hover {
4045
- border-color: var(--select-default-hover-border);
3359
+ .hover\:border-\(--select-base-hover-border\):hover {
3360
+ border-color: var(--select-base-hover-border);
4046
3361
  }
4047
3362
 
4048
3363
  .hover\:bg-\(--accordion-custom-hover-bg\):hover {
@@ -4121,8 +3436,8 @@
4121
3436
  background-color: var(--pagination-link-hover-bg);
4122
3437
  }
4123
3438
 
4124
- .hover\:bg-\(--select-default-hover-bg\):hover {
4125
- background-color: var(--select-default-hover-bg);
3439
+ .hover\:bg-\(--select-base-hover-bg\):hover {
3440
+ background-color: var(--select-base-hover-bg);
4126
3441
  }
4127
3442
 
4128
3443
  .hover\:bg-\(--toggle-outline-hover-bg\):hover {
@@ -4201,8 +3516,8 @@
4201
3516
  color: var(--pagination-link-hover-font);
4202
3517
  }
4203
3518
 
4204
- .hover\:text-\(--select-default-hover-font\):hover {
4205
- color: var(--select-default-hover-font);
3519
+ .hover\:text-\(--select-base-hover-font\):hover {
3520
+ color: var(--select-base-hover-font);
4206
3521
  }
4207
3522
 
4208
3523
  .hover\:text-\(--toggle-outline-hover-font\):hover {
@@ -4374,8 +3689,8 @@
4374
3689
  border-color: var(--button-outline-disabled-border);
4375
3690
  }
4376
3691
 
4377
- .disabled\:border-\(--select-default-disabled-border\):disabled {
4378
- border-color: var(--select-default-disabled-border);
3692
+ .disabled\:border-\(--select-base-disabled-border\):disabled {
3693
+ border-color: var(--select-base-disabled-border);
4379
3694
  }
4380
3695
 
4381
3696
  .disabled\:bg-\(--button-outline-disabled-bg\):disabled {
@@ -4390,8 +3705,8 @@
4390
3705
  background-color: var(--button-solid-secondary-disabled-bg);
4391
3706
  }
4392
3707
 
4393
- .disabled\:bg-\(--select-default-disabled-bg\):disabled {
4394
- background-color: var(--select-default-disabled-bg);
3708
+ .disabled\:bg-\(--select-base-disabled-bg\):disabled {
3709
+ background-color: var(--select-base-disabled-bg);
4395
3710
  }
4396
3711
 
4397
3712
  .disabled\:text-\(--button-ghost-disabled-font\):disabled {
@@ -4430,8 +3745,8 @@
4430
3745
  color: var(--navigation-button-solid-ghost-disabled-font);
4431
3746
  }
4432
3747
 
4433
- .disabled\:text-\(--select-default-disabled-font\):disabled {
4434
- color: var(--select-default-disabled-font);
3748
+ .disabled\:text-\(--select-base-disabled-font\):disabled {
3749
+ color: var(--select-base-disabled-font);
4435
3750
  }
4436
3751
 
4437
3752
  .disabled\:opacity-\(--button-common-opacity\):disabled {
@@ -4797,8 +4112,8 @@
4797
4112
  align-items: center;
4798
4113
  }
4799
4114
 
4800
- :is(.\*\:data-\[slot\=select-value\]\:gap-\(--select-default-common-gap\) > *)[data-slot="select-value"] {
4801
- gap: var(--select-default-common-gap);
4115
+ :is(.\*\:data-\[slot\=select-value\]\:gap-\(--select-base-common-gap\) > *)[data-slot="select-value"] {
4116
+ gap: var(--select-base-common-gap);
4802
4117
  }
4803
4118
 
4804
4119
  :is(.\*\:data-\[slot\=select-value\]\:gap-\(--select-small-common-gap\) > *)[data-slot="select-value"] {
@@ -5183,6 +4498,82 @@
5183
4498
  border-bottom-width: --drawer-common-border-width;
5184
4499
  }
5185
4500
 
4501
+ @media not all and (min-width: 1600px) {
4502
+ .max-laptop\:gap-4 {
4503
+ gap: calc(var(--spacing) * 4);
4504
+ }
4505
+ }
4506
+
4507
+ @media not all and (min-width: 840px) {
4508
+ .max-mobile\:static {
4509
+ position: static;
4510
+ }
4511
+
4512
+ .max-mobile\:hidden {
4513
+ display: none;
4514
+ }
4515
+
4516
+ .max-mobile\:\!w-full, .max-mobile\:w-full\! {
4517
+ width: 100% !important;
4518
+ }
4519
+
4520
+ .max-mobile\:grid-cols-2 {
4521
+ grid-template-columns: repeat(2, minmax(0, 1fr));
4522
+ }
4523
+
4524
+ .max-mobile\:flex-row {
4525
+ flex-direction: row;
4526
+ }
4527
+
4528
+ .max-mobile\:justify-end {
4529
+ justify-content: flex-end;
4530
+ }
4531
+
4532
+ .max-mobile\:gap-\(--box-outline-gap-mobile\) {
4533
+ gap: var(--box-outline-gap-mobile);
4534
+ }
4535
+
4536
+ .max-mobile\:gap-\(--box-solid-gap-mobile\) {
4537
+ gap: var(--box-solid-gap-mobile);
4538
+ }
4539
+
4540
+ .max-mobile\:gap-\(--card-common-gap-mobile\) {
4541
+ gap: var(--card-common-gap-mobile);
4542
+ }
4543
+
4544
+ .max-mobile\:px-\(--box-outline-padding-x-mobile\) {
4545
+ padding-inline: var(--box-outline-padding-x-mobile);
4546
+ }
4547
+
4548
+ .max-mobile\:px-\(--box-solid-padding-x-mobile\) {
4549
+ padding-inline: var(--box-solid-padding-x-mobile);
4550
+ }
4551
+
4552
+ .max-mobile\:px-\(--card-common-padding-x-mobile\) {
4553
+ padding-inline: var(--card-common-padding-x-mobile);
4554
+ }
4555
+
4556
+ .max-mobile\:px-\(--pagination-common-padding-sm\) {
4557
+ padding-inline: var(--pagination-common-padding-sm);
4558
+ }
4559
+
4560
+ .max-mobile\:py-\(--box-outline-padding-y-mobile\) {
4561
+ padding-block: var(--box-outline-padding-y-mobile);
4562
+ }
4563
+
4564
+ .max-mobile\:py-\(--box-solid-padding-y-mobile\) {
4565
+ padding-block: var(--box-solid-padding-y-mobile);
4566
+ }
4567
+
4568
+ .max-mobile\:py-\(--card-common-padding-y-mobile\) {
4569
+ padding-block: var(--card-common-padding-y-mobile);
4570
+ }
4571
+
4572
+ .max-mobile\:text-center {
4573
+ text-align: center;
4574
+ }
4575
+ }
4576
+
5186
4577
  @media (min-width: 40rem) {
5187
4578
  .data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction="left"], .data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction="right"] {
5188
4579
  max-width: var(--container-sm);
@@ -5346,8 +4737,8 @@
5346
4737
  color: var(--pagination-link-default-icon);
5347
4738
  }
5348
4739
 
5349
- .\[\&_svg\]\:text-\(--select-default-default-icon\) svg {
5350
- color: var(--select-default-default-icon);
4740
+ .\[\&_svg\]\:text-\(--select-base-default-icon\) svg {
4741
+ color: var(--select-base-default-icon);
5351
4742
  }
5352
4743
 
5353
4744
  .\[\&_svg\]\:text-\(--table-item-cell-icon\) svg {
@@ -5366,6 +4757,12 @@
5366
4757
  color: var(--toggle-solid-default-icon);
5367
4758
  }
5368
4759
 
4760
+ .\[\&_svg\]\:transition-colors svg {
4761
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
4762
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
4763
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
4764
+ }
4765
+
5369
4766
  .\[\&_svg\]\:transition-transform svg {
5370
4767
  transition-property: transform, translate, scale, rotate;
5371
4768
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -5398,22 +4795,6 @@
5398
4795
  }
5399
4796
 
5400
4797
  @media (hover: hover) {
5401
- .\[\&_svg\]\:hover\:text-\(--navigation-button-bottom-border-hover-icon\) svg:hover {
5402
- color: var(--navigation-button-bottom-border-hover-icon);
5403
- }
5404
-
5405
- .\[\&_svg\]\:hover\:text-\(--navigation-button-solid-ghost-active-icon\) svg:hover {
5406
- color: var(--navigation-button-solid-ghost-active-icon);
5407
- }
5408
-
5409
- .\[\&_svg\]\:hover\:text-\(--navigation-item-content-hover-icon\) svg:hover {
5410
- color: var(--navigation-item-content-hover-icon);
5411
- }
5412
-
5413
- .\[\&_svg\]\:hover\:text-\(--pagination-link-hover-icon\) svg:hover {
5414
- color: var(--pagination-link-hover-icon);
5415
- }
5416
-
5417
4798
  .hover\:\[\&_svg\]\:text-\(--button-ghost-hover-icon\):hover svg {
5418
4799
  color: var(--button-ghost-hover-icon);
5419
4800
  }
@@ -5438,8 +4819,28 @@
5438
4819
  color: var(--button-solid-secondary-hover-icon);
5439
4820
  }
5440
4821
 
5441
- .hover\:\[\&_svg\]\:text-\(--select-default-hover-icon\):hover svg {
5442
- color: var(--select-default-hover-icon);
4822
+ .hover\:\[\&_svg\]\:text-\(--navigation-button-bottom-border-hover-icon\):hover svg {
4823
+ color: var(--navigation-button-bottom-border-hover-icon);
4824
+ }
4825
+
4826
+ .hover\:\[\&_svg\]\:text-\(--navigation-button-gradient-active-icon\):hover svg {
4827
+ color: var(--navigation-button-gradient-active-icon);
4828
+ }
4829
+
4830
+ .hover\:\[\&_svg\]\:text-\(--navigation-button-solid-ghost-active-icon\):hover svg {
4831
+ color: var(--navigation-button-solid-ghost-active-icon);
4832
+ }
4833
+
4834
+ .hover\:\[\&_svg\]\:text-\(--navigation-item-content-hover-icon\):hover svg {
4835
+ color: var(--navigation-item-content-hover-icon);
4836
+ }
4837
+
4838
+ .hover\:\[\&_svg\]\:text-\(--pagination-link-hover-icon\):hover svg {
4839
+ color: var(--pagination-link-hover-icon);
4840
+ }
4841
+
4842
+ .hover\:\[\&_svg\]\:text-\(--select-base-hover-icon\):hover svg {
4843
+ color: var(--select-base-hover-icon);
5443
4844
  }
5444
4845
 
5445
4846
  .hover\:\[\&_svg\]\:text-\(--toggle-outline-hover-icon\):hover svg {
@@ -5479,18 +4880,6 @@
5479
4880
  }
5480
4881
  }
5481
4882
 
5482
- .\[\&_svg\]\:disabled\:text-\(--navigation-button-bottom-border-disabled-icon\) svg:disabled {
5483
- color: var(--navigation-button-bottom-border-disabled-icon);
5484
- }
5485
-
5486
- .\[\&_svg\]\:disabled\:text-\(--navigation-button-gradient-disabled-icon\) svg:disabled {
5487
- color: var(--navigation-button-gradient-disabled-icon);
5488
- }
5489
-
5490
- .\[\&_svg\]\:disabled\:text-\(--navigation-button-solid-ghost-disabled-icon\) svg:disabled {
5491
- color: var(--navigation-button-solid-ghost-disabled-icon);
5492
- }
5493
-
5494
4883
  .disabled\:\[\&_svg\]\:text-\(--button-ghost-disabled-icon\):disabled svg {
5495
4884
  color: var(--button-ghost-disabled-icon);
5496
4885
  }
@@ -5515,11 +4904,23 @@
5515
4904
  color: var(--button-solid-secondary-disabled-icon);
5516
4905
  }
5517
4906
 
5518
- .disabled\:\[\&_svg\]\:text-\(--select-default-disabled-icon\):disabled svg {
5519
- color: var(--select-default-disabled-icon);
4907
+ .disabled\:\[\&_svg\]\:text-\(--navigation-button-bottom-border-disabled-icon\):disabled svg {
4908
+ color: var(--navigation-button-bottom-border-disabled-icon);
4909
+ }
4910
+
4911
+ .disabled\:\[\&_svg\]\:text-\(--navigation-button-gradient-disabled-icon\):disabled svg {
4912
+ color: var(--navigation-button-gradient-disabled-icon);
5520
4913
  }
5521
4914
 
5522
- .\[\&_svg\]\:data-\[active\=true\]\:text-\(--navigation-item-content-hover-icon\) svg[data-active="true"] {
4915
+ .disabled\:\[\&_svg\]\:text-\(--navigation-button-solid-ghost-disabled-icon\):disabled svg {
4916
+ color: var(--navigation-button-solid-ghost-disabled-icon);
4917
+ }
4918
+
4919
+ .disabled\:\[\&_svg\]\:text-\(--select-base-disabled-icon\):disabled svg {
4920
+ color: var(--select-base-disabled-icon);
4921
+ }
4922
+
4923
+ .data-\[active\=true\]\:\[\&_svg\]\:text-\(--navigation-item-content-hover-icon\)[data-active="true"] svg {
5523
4924
  color: var(--navigation-item-content-hover-icon);
5524
4925
  }
5525
4926
 
@@ -5575,14 +4976,18 @@
5575
4976
  color: var(--toggle-solid-active-icon);
5576
4977
  }
5577
4978
 
5578
- .\[\&_svg\]\:data-\[state\=open\]\:text-\(--navigation-button-bottom-border-active-icon\) svg[data-state="open"] {
4979
+ .data-\[state\=open\]\:\[\&_svg\]\:text-\(--navigation-button-bottom-border-active-icon\)[data-state="open"] svg {
5579
4980
  color: var(--navigation-button-bottom-border-active-icon);
5580
4981
  }
5581
4982
 
5582
- .\[\&_svg\]\:data-\[state\=open\]\:text-\(--navigation-button-gradient-active-icon\) svg[data-state="open"] {
4983
+ .data-\[state\=open\]\:\[\&_svg\]\:text-\(--navigation-button-gradient-active-icon\)[data-state="open"] svg {
5583
4984
  color: var(--navigation-button-gradient-active-icon);
5584
4985
  }
5585
4986
 
4987
+ .data-\[state\=open\]\:\[\&_svg\]\:text-\(--navigation-button-solid-ghost-active-icon\)[data-state="open"] svg {
4988
+ color: var(--navigation-button-solid-ghost-active-icon);
4989
+ }
4990
+
5586
4991
  .group-data-\[variant\=custom\]\/accordion\:data-\[state\=open\]\:\[\&_svg\]\:text-\(--accordion-custom-open-icon\):is(:where(.group\/accordion)[data-variant="custom"] *)[data-state="open"] svg {
5587
4992
  color: var(--accordion-custom-open-icon);
5588
4993
  }
@@ -5616,9 +5021,9 @@
5616
5021
  height: var(--navigation-item-content-common-icon-size);
5617
5022
  }
5618
5023
 
5619
- .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--select-default-common-icon-size\) svg:not([class*="size-"]) {
5620
- width: var(--select-default-common-icon-size);
5621
- height: var(--select-default-common-icon-size);
5024
+ .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--select-base-common-icon-size\) svg:not([class*="size-"]) {
5025
+ width: var(--select-base-common-icon-size);
5026
+ height: var(--select-base-common-icon-size);
5622
5027
  }
5623
5028
 
5624
5029
  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--toggle-common-icon-size\) svg:not([class*="size-"]) {
@@ -5654,6 +5059,16 @@
5654
5059
  color: var(--navigation-item-default-icon);
5655
5060
  }
5656
5061
 
5062
+ @media (hover: hover) {
5063
+ .hover\:\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-\(--navigation-item-hover-icon\):hover svg:not([class*="text-"]) {
5064
+ color: var(--navigation-item-hover-icon);
5065
+ }
5066
+ }
5067
+
5068
+ .data-\[active\=true\]\:\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-\(--navigation-item-hover-icon\)[data-active="true"] svg:not([class*="text-"]) {
5069
+ color: var(--navigation-item-hover-icon);
5070
+ }
5071
+
5657
5072
  .\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected="true"] button {
5658
5073
  border-top-left-radius: var(--radius-md);
5659
5074
  border-bottom-left-radius: var(--radius-md);
@@ -6333,6 +5748,959 @@
6333
5748
  --spacing-9-mobile: 32px;
6334
5749
  --spacing-10-mobile: 36px;
6335
5750
  --spacing-11-mobile: 40px;
5751
+ --radius-small: var(--radius-sm);
5752
+ --radius-medium: var(--radius-lg);
5753
+ --color-bg-surface-default: var(--color-white);
5754
+ --font-color-primary-default: var(--color-neutral-900);
5755
+ --font-color-secondary-default: var(--color-neutral-500);
5756
+ --font-color-onbrand-default: var(--color-zinc-900);
5757
+ --font-color-inverse-default: var(--color-white);
5758
+ --font-color-primary-muted: var(--color-neutral-400);
5759
+ --border-color-default: var(--color-neutral-200);
5760
+ --border-color-divider: var(--color-neutral-200);
5761
+ --border-color-focus: var(--color-neutral-500);
5762
+ --color-state-success-default: var(--color-emerald-500);
5763
+ --color-state-warning-default: var(--color-orange-400);
5764
+ --color-state-error-default: var(--color-red-500);
5765
+ --color-state-info-default: var(--color-blue-500);
5766
+ --color-state-neutral: var(--color-neutral-300);
5767
+ --font-size-metric-sm: var(--font-size-sm);
5768
+ --font-size-heading-xs: var(--font-size-base);
5769
+ --font-size-body-xs: var(--font-size-xs);
5770
+ --font-size-productive-caption: var(--font-size-xs);
5771
+ --font-size-productive-code-sm: var(--font-size-sm);
5772
+ --color-bg-surface-alt: var(--color-zinc-50);
5773
+ --color-bg-surface-muted: var(--color-neutral-100);
5774
+ --color-bg-overlay-default: var(--color-alpha-black-50a);
5775
+ --font-color-onbrand-hover: var(--color-neutral-600);
5776
+ --font-color-disabled: var(--color-neutral-300);
5777
+ --border-color-primary-default: var(--color-theme-primary-100);
5778
+ --border-color-primary-hover: var(--color-theme-primary-200);
5779
+ --radius-large: var(--radius-2xl);
5780
+ --radius-max: var(--radius-full);
5781
+ --color-state-success-subtle: var(--color-emerald-50);
5782
+ --spacing-layout-xs: var(--spacing-2);
5783
+ --spacing-section-sm: var(--spacing-8);
5784
+ --font-color-onbrand-active: var(--color-neutral-900);
5785
+ --icon-size-small: var(--icon-sm);
5786
+ --icon-color-primary-default: var(--color-theme-primary-100);
5787
+ --icon-size-medium: var(--icon-md);
5788
+ --icon-size-xlarge: var(--icon-xl);
5789
+ --icon-color-primary-muted: var(--color-neutral-400);
5790
+ --icon-color-secondary-default: var(--color-theme-secondary-100);
5791
+ --icon-color-onbrand-default: var(--color-neutral-900);
5792
+ --icon-color-onbrand-hover: var(--color-neutral-900);
5793
+ --icon-color-onbrand-active: var(--color-neutral-600);
5794
+ --icon-color-disabled: var(--color-neutral-300);
5795
+ --color-bg-primary-default: var(--color-theme-primary-100);
5796
+ --color-bg-primary-hover: var(--color-theme-primary-200);
5797
+ --color-bg-disabled: var(--color-neutral-200);
5798
+ --scale-control-xs: var(--scale-xs);
5799
+ --scale-control-sm: var(--scale-sm);
5800
+ --scale-control-md: var(--scale-md);
5801
+ --scale-control-lg: var(--scale-lg);
5802
+ --scale-control-xl: var(--scale-xl);
5803
+ --radius-base: var(--radius-none);
5804
+ --border-width-thin: var(--borderwidth-default);
5805
+ --spacing-component-gap-sm: var(--spacing-3);
5806
+ --spacing-component-gap-md: var(--spacing-4);
5807
+ --spacing-component-gap-lg: var(--spacing-5);
5808
+ --spacing-component-padding-sm: var(--spacing-3);
5809
+ --spacing-component-padding-md: var(--spacing-4);
5810
+ --spacing-component-padding-lg: var(--spacing-5);
5811
+ --spacing-layout-sm: var(--spacing-3);
5812
+ --spacing-layout-md: var(--spacing-4);
5813
+ --spacing-layout-lg: var(--spacing-6);
5814
+ --spacing-layout-xl: var(--spacing-8);
5815
+ --spacing-section-md: var(--spacing-10);
5816
+ --spacing-section-lg: var(--spacing-12);
5817
+ --spacing-inset-tight: var(--spacing-2);
5818
+ --spacing-inset-normal: var(--spacing-3);
5819
+ --spacing-inset-loose: var(--spacing-5);
5820
+ --opacity-overlay-light: var(--opacity-20);
5821
+ --opacity-overlay-medium: var(--opacity-20);
5822
+ --opacity-overlay-dark: var(--opacity-20);
5823
+ --opacity-interaction-hover: var(--opacity-50);
5824
+ --opacity-interaction-pressed: var(--opacity-50);
5825
+ --opacity-state-disabled: var(--opacity-50);
5826
+ --opacity-state-muted: var(--opacity-20);
5827
+ --opacity-state-subtle: var(--opacity-20);
5828
+ --border-width-regular: var(--borderwidth-2);
5829
+ --border-width-thick: var(--borderwidth-3);
5830
+ --font-size-heading-sm: var(--font-size-lg);
5831
+ --font-size-heading-md: var(--font-size-xl);
5832
+ --font-size-heading-lg: var(--font-size-2xl);
5833
+ --font-size-heading-xl: var(--font-size-5xl);
5834
+ --font-size-heading-xxl: var(--font-size-6xl);
5835
+ --font-size-body-sm: var(--font-size-sm);
5836
+ --font-size-body-md: var(--font-size-base);
5837
+ --font-size-body-lg: var(--font-size-lg);
5838
+ --font-size-metric-md: var(--font-size-base);
5839
+ --font-size-metric-lg: var(--font-size-lg);
5840
+ --font-size-metric-xs: var(--font-size-xs);
5841
+ --font-size-body-xl: var(--font-size-2xl);
5842
+ --font-size-productive-code-md: var(--font-size-base);
5843
+ --font-size-productive-label-sm: var(--font-size-xs);
5844
+ --icon-size-xxlarge: var(--icon-2xl);
5845
+ --icon-size-micro: var(--icon-xs);
5846
+ --spacing-section-xs: var(--spacing-4);
5847
+ --spacing-component-padding-xs: var(--spacing-2);
5848
+ --color-bg-surface-accent: var(--color-zinc-200);
5849
+ --color-bg-surface-floating: var(--color-zinc-50);
5850
+ --color-bg-primary-muted: var(--color-theme-primary-100-a10);
5851
+ --color-bg-secondary-default: var(--color-theme-secondary-100);
5852
+ --color-bg-secondary-hover: var(--color-theme-secondary-200);
5853
+ --color-bg-secondary-muted: var(--color-theme-secondary-100-a10);
5854
+ --color-bg-accent-default: var(--color-theme-accent-100);
5855
+ --color-bg-accent-hover: var(--color-theme-accent-200);
5856
+ --color-bg-accent-muted: var(--color-theme-accent-100-a10);
5857
+ --border-color-secondary-default: var(--color-theme-secondary-100);
5858
+ --border-color-secondary-hover: var(--color-theme-secondary-200);
5859
+ --font-color-link-default: var(--color-blue-700);
5860
+ --font-color-link-hover: var(--color-blue-800);
5861
+ --icon-color-inverse-default: var(--color-white);
5862
+ --icon-color-link-default: var(--color-blue-700);
5863
+ --icon-color-link-hover: var(--color-blue-800);
5864
+ --effect-shadow-level-1: var(--color-alpha-black-5a);
5865
+ --effect-shadow-level-2: var(--color-alpha-black-10a);
5866
+ --effect-shadow-level-3: var(--color-alpha-black-30a);
5867
+ --effect-shadow-overlay: var(--color-alpha-black-50a);
5868
+ --effect-shadow-inset: var(--color-alpha-black-5a);
5869
+ --effect-blur-surface-sm: var(--blur-sm);
5870
+ --effect-blur-surface-md: var(--blur-default);
5871
+ --effect-blur-surface-lg: var(--blur-md);
5872
+ --effect-blur-overlay: var(--blur-lg);
5873
+ --color-state-error-subtle: var(--color-red-50);
5874
+ --color-state-warning-subtle: var(--color-orange-50);
5875
+ --spacing-component-gap-xl: var(--spacing-7);
5876
+ --spacing-component-gap-2xl: var(--spacing-9);
5877
+ --spacing-component-gap-xs: var(--spacing-2);
5878
+ --spacing-component-padding-xl: var(--spacing-6);
5879
+ --font-size-productive-label-md: var(--font-size-sm);
5880
+ --font-letter-spacing-heading: var(--font-letter-spacing-tracking-normal);
5881
+ --font-letter-spacing-body: var(--font-letter-spacing-tracking-normal);
5882
+ --font-letter-spacing-metric: var(--font-letter-spacing-tracking-normal);
5883
+ --font-letter-spacing-productive: var(--font-letter-spacing-tracking-normal);
5884
+ --font-font-weight-heading-normal: var(--font-weight-normal);
5885
+ --font-font-weight-heading-bold: var(--font-weight-semibold);
5886
+ --font-font-weight-heading-light: var(--font-weight-light);
5887
+ --font-font-weight-body-normal: var(--font-weight-normal);
5888
+ --font-font-weight-body-bold: var(--font-weight-semibold);
5889
+ --font-font-weight-body-light: var(--font-weight-light);
5890
+ --font-font-weight-metric-normal: var(--font-weight-normal);
5891
+ --font-font-weight-metric-light: var(--font-weight-light);
5892
+ --font-font-weight-metric-bold: var(--font-weight-semibold);
5893
+ --font-font-weight-productive-normal: var(--font-weight-normal);
5894
+ --font-font-weight-productive-bold: var(--font-weight-semibold);
5895
+ --spacing-component-padding-2xl: var(--spacing-8);
5896
+ --spacing-component-gap-none: var(--spacing-0);
5897
+ --spacing-component-padding-none: var(--spacing-0);
5898
+ --color-progress-track: var(--color-neutral-200);
5899
+ --color-progress-fill: var(--color-theme-primary-100);
5900
+ --color-chart-data-vis-brand-1: var(--color-theme-primary-100);
5901
+ --color-state-info-subtle: var(--color-blue-50);
5902
+ --icon-size-large: var(--icon-lg);
5903
+ --color-gradient-primary-start: var(--color-theme-primary-100);
5904
+ --color-gradient-primary-end: var(--color-theme-secondary-100);
5905
+ --color-gradient-secondary-start: var(--color-theme-accent-100);
5906
+ --color-gradient-secondary-end: var(--color-theme-secondary-100);
5907
+ --color-gradient-primary-hover-start: var(--color-theme-primary-200);
5908
+ --color-gradient-primary-hover-end: var(--color-theme-secondary-200);
5909
+ --border-color-surface: var(--color-neutral-400);
5910
+ --spacing-component-gap-xxs: var(--spacing-1);
5911
+ --spacing-component-padding-xxs: var(--spacing-1);
5912
+ --color-chart-data-vis-brand-2: var(--color-theme-secondary-100);
5913
+ --color-chart-data-vis-brand-3: var(--color-theme-accent-100);
5914
+ --color-chart-bg-container: var(--color-neutral-100);
5915
+ --color-chart-border-grid: var(--color-neutral-300);
5916
+ --color-chart-text-axis-label: var(--color-neutral-500);
5917
+ --color-chart-text-data-value: var(--color-neutral-950);
5918
+ --color-chart-text-data-value-sub: var(--color-neutral-500);
5919
+ --color-chart-border-axis: var(--color-neutral-300);
5920
+ --color-chart-control-range-track: var(--color-white);
5921
+ --color-chart-control-range-fill: var(--color-blue-50);
5922
+ --color-chart-control-handle: var(--color-white);
5923
+ --color-chart-control-border: var(--color-neutral-300);
5924
+ --color-chart-control-thumb: var(--color-blue-400);
5925
+ --color-chart-foreground: var(--color-white);
5926
+ --color-chart-control-thumb-subtle: var(--color-blue-300);
5927
+ --font-color-negative: var(--color-red-500);
5928
+ --font-color-warning: var(--color-orange-400);
5929
+ --font-color-positive: var(--color-emerald-500);
5930
+ --icon-color-positive: var(--color-emerald-500);
5931
+ --icon-color-negative: var(--color-red-500);
5932
+ --icon-color-warning: var(--color-orange-400);
5933
+ --font-size-metric-xl: var(--font-size-2xl);
5934
+ --line-height-metric-sm: var(--font-size-sm--line-height);
5935
+ --line-height-heading-xs: var(--font-size-base--line-height);
5936
+ --line-height-body-xs: var(--font-size-xs--line-height);
5937
+ --line-height-productive-caption: var(--font-size-xs--line-height);
5938
+ --line-height-productive-code-sm: var(--font-size-sm--line-height);
5939
+ --line-height-heading-sm: var(--font-size-lg--line-height);
5940
+ --line-height-heading-md: var(--font-size-xl--line-height);
5941
+ --line-height-heading-lg: var(--font-size-2xl--line-height);
5942
+ --line-height-heading-xl: var(--font-size-5xl--line-height);
5943
+ --line-height-heading-xxl: var(--font-size-6xl--line-height);
5944
+ --line-height-body-sm: var(--font-size-sm--line-height);
5945
+ --line-height-body-md: var(--font-size-base--line-height);
5946
+ --line-height-body-lg: var(--font-size-lg--line-height);
5947
+ --line-height-metric-md: var(--font-size-base--line-height);
5948
+ --line-height-metric-lg: var(--font-size-lg--line-height);
5949
+ --line-height-metric-xs: var(--font-size-xs--line-height);
5950
+ --line-height-body-xl: var(--font-size-2xl--line-height);
5951
+ --line-height-productive-code-md: var(--font-size-base--line-height);
5952
+ --line-height-productive-label-sm: var(--font-size-xs--line-height);
5953
+ --line-height-productive-label-md: var(--font-size-sm--line-height);
5954
+ --line-height-metric-xl: var(--font-size-2xl--line-height);
5955
+ --button-common-radius: var(--radius-small);
5956
+ --button-common-padding-x: var(--spacing-component-padding-sm);
5957
+ --button-common-icon-size: var(--icon-size-small);
5958
+ --button-common-gap: var(--spacing-component-gap-sm);
5959
+ --button-size-small-height: var(--scale-control-sm);
5960
+ --button-size-small-icon-size: var(--icon-size-small);
5961
+ --button-size-small-padding-x: var(--spacing-component-padding-sm);
5962
+ --button-size-small-gap: var(--spacing-component-gap-xs);
5963
+ --button-solid-primary-default-bg: var(--color-bg-primary-default);
5964
+ --button-solid-primary-hover-bg: var(--color-bg-primary-hover);
5965
+ --button-solid-primary-default-font: var(--font-color-onbrand-default);
5966
+ --button-solid-primary-hover-font: var(--font-color-onbrand-default);
5967
+ --button-solid-primary-default-icon: var(--icon-color-onbrand-default);
5968
+ --button-solid-primary-hover-icon: var(--icon-color-onbrand-hover);
5969
+ --button-common-padding-y: var(--spacing-component-padding-sm);
5970
+ --button-size-small-radius: var(--radius-small);
5971
+ --button-size-medium-height: var(--scale-control-md);
5972
+ --button-size-medium-icon-size: var(--icon-size-small);
5973
+ --button-size-medium-padding-x: var(--spacing-component-padding-md);
5974
+ --button-size-medium-gap: var(--spacing-component-gap-xs);
5975
+ --button-size-medium-radius: var(--radius-small);
5976
+ --button-size-large-height: var(--scale-control-lg);
5977
+ --button-size-large-icon-size: var(--icon-size-medium);
5978
+ --button-size-large-padding-x: var(--spacing-component-padding-md);
5979
+ --button-size-large-gap: var(--spacing-component-gap-xs);
5980
+ --button-size-large-radius: var(--radius-small);
5981
+ --button-solid-primary-disabled-bg: var(--color-bg-disabled);
5982
+ --button-solid-primary-disabled-font: var(--font-color-disabled);
5983
+ --button-solid-primary-disabled-icon: var(--icon-color-disabled);
5984
+ --button-outline-default-border: var(--border-color-primary-default);
5985
+ --button-outline-default-font: var(--font-color-onbrand-default);
5986
+ --button-outline-default-icon: var(--icon-color-onbrand-default);
5987
+ --button-outline-hover-bg: var(--color-bg-primary-muted);
5988
+ --button-outline-hover-font: var(--font-color-onbrand-default);
5989
+ --button-outline-hover-icon: var(--icon-color-onbrand-hover);
5990
+ --button-outline-disabled-bg: var(--color-bg-surface-default);
5991
+ --button-outline-disabled-font: var(--font-color-disabled);
5992
+ --button-outline-disabled-icon: var(--icon-color-disabled);
5993
+ --button-outline-default-bg: var(--color-bg-surface-default);
5994
+ --button-outline-hover-border: var(--border-color-primary-default);
5995
+ --button-outline-disabled-border: var(--color-state-neutral);
5996
+ --button-solid-secondary-default-bg: var(--color-bg-secondary-default);
5997
+ --button-solid-secondary-default-font: var(--font-color-onbrand-default);
5998
+ --button-solid-secondary-default-icon: var(--icon-color-onbrand-default);
5999
+ --button-solid-secondary-hover-bg: var(--color-bg-secondary-hover);
6000
+ --button-solid-secondary-hover-font: var(--font-color-onbrand-default);
6001
+ --button-solid-secondary-hover-icon: var(--icon-color-onbrand-hover);
6002
+ --button-solid-secondary-disabled-bg: var(--color-bg-disabled);
6003
+ --button-solid-secondary-disabled-font: var(--font-color-disabled);
6004
+ --button-solid-secondary-disabled-icon: var(--icon-color-disabled);
6005
+ --button-ghost-default-font: var(--font-color-onbrand-default);
6006
+ --button-ghost-default-icon: var(--icon-color-onbrand-default);
6007
+ --button-ghost-hover-bg: var(--color-bg-surface-muted);
6008
+ --button-ghost-hover-font: var(--font-color-onbrand-default);
6009
+ --button-ghost-hover-icon: var(--icon-color-onbrand-hover);
6010
+ --button-ghost-disabled-font: var(--font-color-disabled);
6011
+ --button-ghost-disabled-icon: var(--icon-color-disabled);
6012
+ --button-link-default-font: var(--font-color-link-default);
6013
+ --button-link-default-icon: var(--icon-color-link-default);
6014
+ --button-link-hover-bg: var(--color-bg-surface-muted);
6015
+ --button-link-hover-font: var(--font-color-link-hover);
6016
+ --button-link-hover-icon: var(--icon-color-link-hover);
6017
+ --button-link-disabled-font: var(--font-color-link-default);
6018
+ --button-link-disabled-icon: var(--icon-color-link-default);
6019
+ --button-size-small-opacity: var(--opacity-state-disabled);
6020
+ --button-common-opacity: var(--opacity-state-disabled);
6021
+ --button-size-medium-opacity: var(--opacity-state-disabled);
6022
+ --button-size-large-opacity: var(--opacity-state-disabled);
6023
+ --button-outline-border-width: var(--border-width-thin);
6024
+ --input-common-radius: var(--radius-medium);
6025
+ --input-common-padding-x: var(--spacing-component-padding-sm);
6026
+ --input-common-padding-y: var(--spacing-component-padding-sm);
6027
+ --input-common-gap: var(--spacing-component-gap-sm);
6028
+ --input-common-icon-size-sm: var(--icon-size-small);
6029
+ --input-common-opacity: var(--opacity-state-disabled);
6030
+ --input-solid-default-bg: var(--color-bg-surface-muted);
6031
+ --input-solid-default-font: var(--font-color-primary-muted);
6032
+ --input-solid-default-icon: var(--icon-color-primary-muted);
6033
+ --input-common-height: var(--scale-lg);
6034
+ --input-solid-default-border: var(--border-color-default);
6035
+ --input-common-border-width: var(--border-width-thin);
6036
+ --input-solid-hover-bg: var(--color-bg-surface-accent);
6037
+ --input-solid-hover-border: var(--border-color-default);
6038
+ --input-solid-hover-font: var(--font-color-primary-muted);
6039
+ --input-solid-hover-icon: var(--icon-color-primary-muted);
6040
+ --input-solid-focus-bg: var(--color-bg-surface-muted);
6041
+ --input-solid-focus-border: var(--border-color-focus);
6042
+ --input-solid-focus-font: var(--font-color-primary-muted);
6043
+ --input-solid-focus-icon: var(--icon-color-primary-muted);
6044
+ --input-solid-filled-bg: var(--color-bg-surface-muted);
6045
+ --input-solid-filled-border: var(--border-color-default);
6046
+ --input-solid-filled-font: var(--font-color-primary-default);
6047
+ --input-solid-filled-icon: var(--icon-color-primary-muted);
6048
+ --input-solid-fail-bg: var(--color-state-error-subtle);
6049
+ --input-solid-fail-border: var(--color-state-error-default);
6050
+ --input-solid-fail-font: var(--font-color-primary-default);
6051
+ --input-solid-fail-icon: var(--color-state-error-default);
6052
+ --input-solid-success-bg: var(--color-state-success-subtle);
6053
+ --input-solid-success-border: var(--color-state-success-default);
6054
+ --input-solid-success-font: var(--font-color-primary-default);
6055
+ --input-solid-success-icon: var(--color-state-success-default);
6056
+ --input-outline-default-bg: var(--color-bg-surface-default);
6057
+ --input-outline-default-border: var(--border-color-default);
6058
+ --input-outline-default-font: var(--font-color-primary-muted);
6059
+ --input-outline-default-icon: var(--icon-color-onbrand-default);
6060
+ --input-outline-hover-bg: var(--color-bg-surface-default);
6061
+ --input-outline-hover-border: var(--border-color-default);
6062
+ --input-outline-hover-font: var(--font-color-primary-muted);
6063
+ --input-outline-hover-icon: var(--icon-color-onbrand-default);
6064
+ --input-outline-focus-bg: var(--color-bg-surface-default);
6065
+ --input-outline-focus-border: var(--border-color-focus);
6066
+ --input-outline-focus-font: var(--font-color-primary-muted);
6067
+ --input-outline-focus-icon: var(--icon-color-onbrand-default);
6068
+ --input-outline-filled-bg: var(--color-bg-surface-default);
6069
+ --input-outline-filled-border: var(--border-color-default);
6070
+ --input-outline-filled-font: var(--font-color-primary-default);
6071
+ --input-outline-filled-icon: var(--icon-color-onbrand-default);
6072
+ --input-outline-fail-bg: var(--color-bg-surface-default);
6073
+ --input-outline-fail-border: var(--color-state-error-default);
6074
+ --input-outline-fail-font: var(--font-color-primary-default);
6075
+ --input-outline-fail-icon: var(--color-state-error-default);
6076
+ --input-outline-success-bg: var(--color-bg-surface-default);
6077
+ --input-outline-success-border: var(--color-state-success-default);
6078
+ --input-outline-success-font: var(--font-color-primary-default);
6079
+ --input-outline-success-icon: var(--color-state-success-default);
6080
+ --checkbox-common-radius: var(--radius-small);
6081
+ --checkbox-common-scale: var(--scale-control-xs);
6082
+ --checkbox-common-icon-size: var(--icon-size-micro);
6083
+ --checkbox-common-opacity: var(--opacity-state-disabled);
6084
+ --checkbox-solid-default-bg: var(--color-bg-surface-muted);
6085
+ --checkbox-solid-hover-bg: var(--color-bg-surface-accent);
6086
+ --checkbox-outline-border-width: var(--border-width-thin);
6087
+ --checkbox-solid-checked-bg: var(--color-bg-primary-default);
6088
+ --checkbox-solid-checked-icon: var(--icon-color-onbrand-default);
6089
+ --checkbox-outline-default-border: var(--border-color-primary-default);
6090
+ --checkbox-outline-hover-border: var(--border-color-primary-hover);
6091
+ --checkbox-outline-checked-bg: var(--color-bg-primary-default);
6092
+ --checkbox-outline-checked-border: var(--border-color-primary-default);
6093
+ --checkbox-outline-checked-icon: var(--icon-color-onbrand-default);
6094
+ --checkbox-outline-hover-bg: var(--color-bg-surface-muted);
6095
+ --checkbox-outline-default-bg: var(--color-bg-surface-default);
6096
+ --card-common-radius: var(--radius-large);
6097
+ --card-common-padding-x: var(--spacing-component-padding-xl);
6098
+ --card-common-padding-y: var(--spacing-component-padding-xl);
6099
+ --card-common-gap: var(--spacing-component-gap-2xl);
6100
+ --card-container-header-gap: var(--spacing-component-gap-sm);
6101
+ --card-container-header-title: var(--font-color-primary-default);
6102
+ --card-container-header-description: var(--font-color-primary-muted);
6103
+ --card-container-content-gap: var(--spacing-component-gap-lg);
6104
+ --card-container-content-title: var(--font-color-primary-default);
6105
+ --card-container-content-description: var(--font-color-primary-muted);
6106
+ --card-container-footer-gap: var(--spacing-component-gap-sm);
6107
+ --card-common-bg: var(--color-bg-surface-default);
6108
+ --card-common-border: var(--border-color-default);
6109
+ --input-common-helpertext: var(--font-color-secondary-default);
6110
+ --input-common-group-gap: var(--spacing-component-gap-sm);
6111
+ --dropdown-item-common-radius: var(--radius-base);
6112
+ --dropdown-item-common-padding-x: var(--spacing-component-padding-sm);
6113
+ --dropdown-item-common-height: var(--scale-control-md);
6114
+ --dropdown-item-icon-gap: var(--spacing-component-gap-sm);
6115
+ --dropdown-item-common-border-width: var(--border-width-thin);
6116
+ --dropdown-item-simple-default-font: var(--font-color-primary-default);
6117
+ --dropdown-item-icon-default-font: var(--font-color-primary-default);
6118
+ --dropdown-item-icon-default-icon: var(--icon-color-primary-muted);
6119
+ --dropdown-item-icon-disabled-font: var(--font-color-disabled);
6120
+ --dropdown-item-icon-disabled-icon: var(--icon-color-disabled);
6121
+ --dropdown-item-common-bg: var(--color-bg-surface-default);
6122
+ --dropdown-item-simple-hover-font: var(--font-color-primary-default);
6123
+ --dropdown-item-simple-disabled-font: var(--font-color-disabled);
6124
+ --label-font-default: var(--font-color-primary-default);
6125
+ --dropdown-item-icon-padding-x: var(--spacing-component-padding-sm);
6126
+ --dropdown-item-simple-hover-bg: var(--color-bg-surface-muted);
6127
+ --dropdown-item-common-border: var(--border-color-divider);
6128
+ --dropdown-item-icon-icon-size: var(--icon-size-small);
6129
+ --dropdown-item-scroll-icon: var(--icon-color-onbrand-default);
6130
+ --dropdown-item-scroll-icon-size: var(--icon-size-small);
6131
+ --input-common-resizer: var(--icon-color-primary-muted);
6132
+ --label-gap: var(--spacing-component-gap-xs);
6133
+ --label-font-disabled: var(--font-color-disabled);
6134
+ --dropdown-item-header-font: var(--font-color-primary-default);
6135
+ --dropdown-item-common-padding-y: var(--spacing-component-padding-xs);
6136
+ --select-base-common-radius: var(--radius-medium);
6137
+ --select-base-common-padding-x: var(--spacing-component-padding-md);
6138
+ --select-base-common-height: var(--scale-control-lg);
6139
+ --select-base-common-border-width: var(--border-width-thin);
6140
+ --select-base-default-bg: var(--color-bg-surface-default);
6141
+ --select-base-default-border: var(--border-color-default);
6142
+ --select-base-common-gap: var(--spacing-component-padding-xs);
6143
+ --select-base-default-font: var(--font-color-primary-default);
6144
+ --select-base-default-icon: var(--icon-color-onbrand-default);
6145
+ --select-base-hover-bg: var(--color-bg-surface-default);
6146
+ --select-base-hover-border: var(--border-color-surface);
6147
+ --select-base-hover-font: var(--font-color-primary-default);
6148
+ --select-base-hover-icon: var(--icon-color-onbrand-default);
6149
+ --select-base-disabled-bg: var(--color-bg-surface-muted);
6150
+ --select-base-disabled-border: var(--border-color-default);
6151
+ --select-base-disabled-font: var(--icon-color-disabled);
6152
+ --select-base-disabled-icon: var(--icon-color-disabled);
6153
+ --select-dropdown-radius: var(--radius-medium);
6154
+ --select-dropdown-gap: var(--spacing-component-gap-none);
6155
+ --select-dropdown-padding-x: var(--spacing-component-padding-xs);
6156
+ --select-dropdown-padding-y: var(--spacing-component-padding-xs);
6157
+ --select-dropdown-bg: var(--color-bg-surface-default);
6158
+ --select-base-common-icon-size: var(--icon-size-small);
6159
+ --select-dropdown-border: var(--border-color-default);
6160
+ --badge-common-radius: var(--radius-max);
6161
+ --badge-common-padding-x: var(--spacing-component-padding-sm);
6162
+ --badge-common-padding-y: var(--spacing-component-padding-xs);
6163
+ --badge-common-gap: var(--spacing-component-gap-xs);
6164
+ --badge-common-icon-size: var(--icon-size-micro);
6165
+ --badge-solid-bg: var(--color-bg-primary-default);
6166
+ --badge-solid-font: var(--font-color-primary-default);
6167
+ --badge-solid-icon: var(--icon-color-onbrand-default);
6168
+ --badge-outline-bg: var(--color-bg-surface-default);
6169
+ --badge-outline-font: var(--font-color-primary-default);
6170
+ --badge-outline-icon: var(--icon-color-primary-default);
6171
+ --badge-outline-border: var(--border-color-primary-default);
6172
+ --badge-outline-border-width: var(--borderwidth-default);
6173
+ --toggle-common-radius: var(--radius-max);
6174
+ --toggle-common-padding-x: var(--spacing-component-padding-sm);
6175
+ --toggle-common-padding-y: var(--spacing-component-padding-xs);
6176
+ --toggle-common-gap: var(--spacing-component-gap-xs);
6177
+ --toggle-common-icon-size: var(--icon-size-small);
6178
+ --toggle-solid-default-bg: var(--color-bg-surface-muted);
6179
+ --toggle-solid-default-font: var(--font-color-primary-default);
6180
+ --toggle-solid-default-icon: var(--icon-color-onbrand-default);
6181
+ --toggle-solid-hover-bg: var(--color-bg-surface-accent);
6182
+ --toggle-solid-hover-font: var(--font-color-primary-default);
6183
+ --toggle-solid-hover-icon: var(--icon-color-onbrand-default);
6184
+ --toggle-solid-active-bg: var(--color-bg-primary-default);
6185
+ --toggle-solid-active-font: var(--font-color-primary-default);
6186
+ --toggle-solid-active-icon: var(--icon-color-onbrand-default);
6187
+ --toggle-common-opacity: var(--opacity-state-disabled);
6188
+ --toggle-outline-default-bg: var(--color-bg-surface-default);
6189
+ --toggle-outline-default-font: var(--font-color-primary-default);
6190
+ --toggle-outline-default-icon: var(--icon-color-onbrand-default);
6191
+ --toggle-outline-hover-bg: var(--color-bg-secondary-muted);
6192
+ --toggle-outline-active-bg: var(--color-bg-secondary-default);
6193
+ --toggle-outline-active-font: var(--font-color-primary-default);
6194
+ --toggle-outline-active-icon: var(--icon-color-onbrand-default);
6195
+ --toggle-outline-hover-font: var(--font-color-primary-default);
6196
+ --toggle-outline-hover-icon: var(--icon-color-onbrand-default);
6197
+ --toggle-outline-default-border: var(--border-color-secondary-default);
6198
+ --toggle-outline-border-width: var(--borderwidth-default);
6199
+ --toggle-outline-hover-border: var(--border-color-secondary-hover);
6200
+ --toggle-outline-active-border: var(--border-color-secondary-default);
6201
+ --toggle-common-gap-group: var(--spacing-component-gap-sm);
6202
+ --accordion-common-radius: var(--radius-small);
6203
+ --accordion-common-padding-x: var(--spacing-component-padding-lg);
6204
+ --accordion-common-padding-y: var(--spacing-component-padding-lg);
6205
+ --accordion-common-gap: var(--spacing-component-gap-lg);
6206
+ --accordion-default-icon-size: var(--icon-size-small);
6207
+ --accordion-default-closed-title: var(--font-color-primary-default);
6208
+ --accordion-default-closed-icon: var(--icon-color-onbrand-default);
6209
+ --accordion-default-open-title: var(--font-color-primary-default);
6210
+ --accordion-default-open-icon: var(--icon-color-onbrand-default);
6211
+ --accordion-default-hover-title: var(--font-color-primary-default);
6212
+ --accordion-default-hover-icon: var(--icon-color-onbrand-default);
6213
+ --accordion-common-bg: var(--color-bg-surface-default);
6214
+ --accordion-default-border-width: var(--border-width-thin);
6215
+ --accordion-default-open-description: var(--font-color-primary-muted);
6216
+ --accordion-default-gap: var(--spacing-component-gap-sm);
6217
+ --accordion-default-open-gap: var(--spacing-component-gap-xs);
6218
+ --accordion-default-border: var(--border-color-default);
6219
+ --accordion-default-padding-y: var(--spacing-component-gap-lg);
6220
+ --accordion-custom-closed-title: var(--font-color-primary-default);
6221
+ --accordion-custom-closed-icon: var(--icon-color-onbrand-default);
6222
+ --accordion-custom-gap: var(--spacing-component-gap-sm);
6223
+ --accordion-custom-padding-y: var(--spacing-component-gap-lg);
6224
+ --accordion-custom-border-width: var(--border-width-thin);
6225
+ --accordion-custom-icon-size: var(--icon-size-small);
6226
+ --accordion-custom-closed-border: var(--border-color-default);
6227
+ --accordion-custom-hover-title: var(--font-color-primary-default);
6228
+ --accordion-custom-hover-icon: var(--icon-color-onbrand-default);
6229
+ --accordion-custom-open-title: var(--font-color-primary-default);
6230
+ --accordion-custom-open-description: var(--font-color-primary-muted);
6231
+ --accordion-custom-open-icon: var(--icon-color-onbrand-default);
6232
+ --accordion-custom-open-gap: var(--spacing-component-gap-xs);
6233
+ --accordion-custom-closed-bg: var(--color-bg-surface-muted);
6234
+ --accordion-custom-padding-x: var(--spacing-component-gap-lg);
6235
+ --accordion-custom-hover-bg: var(--color-bg-surface-accent);
6236
+ --accordion-custom-hover-border: var(--border-color-default);
6237
+ --accordion-custom-open-bg: var(--color-bg-surface-muted);
6238
+ --accordion-custom-open-border: var(--border-color-default);
6239
+ --accordion-custom-radius: var(--radius-large);
6240
+ --accordion-custom-hover-gap: var(--spacing-component-gap-xs);
6241
+ --accordion-custom-closed-gap: var(--spacing-component-gap-sm);
6242
+ --dialog-common-radius: var(--radius-large);
6243
+ --dialog-common-padding-x: var(--spacing-component-padding-xl);
6244
+ --dialog-common-padding-y: var(--spacing-component-padding-xl);
6245
+ --dialog-common-gap: var(--spacing-component-gap-2xl);
6246
+ --dialog-common-bg: var(--color-bg-surface-default);
6247
+ --dialog-common-border: var(--border-color-default);
6248
+ --dialog-container-header-gap: var(--spacing-component-gap-sm);
6249
+ --dialog-container-header-title: var(--font-color-primary-default);
6250
+ --dialog-container-header-description: var(--font-color-secondary-default);
6251
+ --dialog-container-footer-gap: var(--spacing-component-gap-sm);
6252
+ --card-common-border-width: var(--border-width-thin);
6253
+ --dialog-common-border-width: var(--border-width-thin);
6254
+ --dropdown-container-radius: var(--radius-medium);
6255
+ --dropdown-container-gap: var(--spacing-component-gap-none);
6256
+ --dropdown-container-padding-x: var(--spacing-component-padding-xs);
6257
+ --dropdown-container-padding-y: var(--spacing-component-padding-xs);
6258
+ --dropdown-container-bg: var(--color-bg-surface-default);
6259
+ --dropdown-container-border: var(--border-color-default);
6260
+ --dropdown-container-border-width: var(--border-width-thin);
6261
+ --popover-common-radius: var(--radius-large);
6262
+ --popover-common-padding-x: var(--spacing-component-padding-lg);
6263
+ --popover-common-padding-y: var(--spacing-component-padding-lg);
6264
+ --popover-common-gap: var(--spacing-component-gap-xl);
6265
+ --popover-solid-bg: var(--color-bg-surface-default);
6266
+ --popover-solid-header-gap: var(--spacing-component-gap-sm);
6267
+ --popover-solid-header-title: var(--font-color-primary-default);
6268
+ --popover-solid-header-description: var(--font-color-primary-muted);
6269
+ --popover-solid-content-gap: var(--spacing-component-gap-lg);
6270
+ --popover-solid-footer-gap: var(--spacing-component-gap-sm);
6271
+ --popover-outline-header-gap: var(--spacing-component-gap-sm);
6272
+ --popover-outline-header-title: var(--font-color-primary-default);
6273
+ --popover-outline-header-description: var(--font-color-primary-muted);
6274
+ --popover-outline-content-gap: var(--spacing-component-gap-lg);
6275
+ --popover-outline-footer-gap: var(--spacing-component-gap-sm);
6276
+ --dropdown-item-simple-active-font: var(--font-color-primary-default);
6277
+ --dropdown-item-simple-active-icon: var(--icon-color-primary-default);
6278
+ --popover-outline-bg: var(--color-bg-surface-default);
6279
+ --popover-outline-border: var(--border-color-default);
6280
+ --popover-outline-border-width: var(--border-width-regular);
6281
+ --input-common-icon-size-md: var(--icon-size-medium);
6282
+ --tabs-item-common-radius: var(--radius-small);
6283
+ --tabs-item-common-padding-x: var(--spacing-component-padding-sm);
6284
+ --tabs-item-common-padding-y: var(--spacing-component-padding-sm);
6285
+ --tabs-item-common-gap: var(--spacing-component-gap-xs);
6286
+ --tabs-item-common-icon-size: var(--icon-size-small);
6287
+ --tabs-item-solid-on-bg: var(--color-bg-primary-default);
6288
+ --tabs-item-solid-on-font: var(--font-color-onbrand-default);
6289
+ --tabs-item-solid-on-icon: var(--icon-color-onbrand-default);
6290
+ --tabs-item-solid-off-bg: var(--color-bg-surface-muted);
6291
+ --tabs-item-solid-off-font: var(--font-color-primary-muted);
6292
+ --tabs-item-solid-off-icon: var(--icon-color-primary-muted);
6293
+ --tabs-item-solid-line-on-bg: var(--color-bg-primary-default);
6294
+ --tabs-item-solid-line-on-font: var(--font-color-onbrand-default);
6295
+ --tabs-item-solid-line-on-icon: var(--icon-color-onbrand-default);
6296
+ --tabs-item-solid-line-off-bg: var(--color-bg-surface-default);
6297
+ --tabs-item-solid-line-off-font: var(--font-color-onbrand-hover);
6298
+ --tabs-item-solid-line-off-icon: var(--icon-color-onbrand-hover);
6299
+ --tabs-item-solid-ghost-on-bg: var(--color-bg-primary-default);
6300
+ --tabs-item-solid-ghost-on-font: var(--font-color-onbrand-default);
6301
+ --tabs-item-solid-ghost-on-icon: var(--icon-color-onbrand-default);
6302
+ --tabs-item-solid-ghost-off-font: var(--font-color-primary-muted);
6303
+ --tabs-item-solid-ghost-off-icon: var(--icon-color-primary-muted);
6304
+ --tabs-item-bottom-border-on-font: var(--font-color-primary-default);
6305
+ --tabs-item-bottom-border-on-icon: var(--icon-color-primary-default);
6306
+ --tabs-item-bottom-border-off-font: var(--font-color-primary-muted);
6307
+ --tabs-item-bottom-border-off-icon: var(--icon-color-primary-muted);
6308
+ --tabs-container-radius: var(--radius-small);
6309
+ --tabs-container-gap: var(--spacing-component-gap-md);
6310
+ --tabs-container-padding-x: var(--spacing-component-padding-xs);
6311
+ --tabs-container-padding-y: var(--spacing-component-padding-xs);
6312
+ --tabs-container-bg: var(--color-bg-surface-muted);
6313
+ --tabs-item-solid-line-off-border: var(--border-color-primary-default);
6314
+ --tabs-item-solid-line-off-border-width: var(--border-width-thin);
6315
+ --tabs-item-bottom-border-on-border: var(--border-color-primary-default);
6316
+ --tabs-item-bottom-border-on-border-width: var(--border-width-thick);
6317
+ --tabs-item-solid-hover-bg: var(--color-bg-surface-accent);
6318
+ --tabs-item-solid-hover-font: var(--font-color-primary-muted);
6319
+ --tabs-item-solid-hover-icon: var(--icon-color-primary-muted);
6320
+ --tabs-item-solid-line-hover-bg: var(--color-bg-surface-default);
6321
+ --tabs-item-solid-line-hover-font: var(--font-color-onbrand-hover);
6322
+ --tabs-item-solid-line-hover-icon: var(--icon-color-onbrand-hover);
6323
+ --tabs-item-solid-line-hover-border: var(--border-color-primary-hover);
6324
+ --tabs-item-solid-line-hover-border-width: var(--border-width-thin);
6325
+ --tabs-item-solid-ghost-hover-font: var(--font-color-primary-muted);
6326
+ --tabs-item-solid-ghost-hover-icon: var(--icon-color-primary-muted);
6327
+ --tabs-item-solid-ghost-hover-bg: var(--color-bg-surface-muted);
6328
+ --tabs-item-bottom-border-hover-font: var(--font-color-primary-default);
6329
+ --tabs-item-bottom-border-hover-icon: var(--icon-color-primary-default);
6330
+ --table-item-common-gap: var(--spacing-component-gap-xs);
6331
+ --table-item-common-padding-x: var(--spacing-component-padding-md);
6332
+ --table-item-common-padding-y: var(--spacing-component-padding-lg);
6333
+ --table-item-cell-bg: var(--color-bg-surface-alt);
6334
+ --table-item-cell-font: var(--font-color-primary-default);
6335
+ --table-item-cell-icon: var(--icon-color-primary-muted);
6336
+ --table-container-radius: var(--radius-large);
6337
+ --table-container-bg: var(--color-bg-surface-muted);
6338
+ --table-container-border: var(--border-color-default);
6339
+ --table-container-border-width: var(--border-width-thin);
6340
+ --table-item-cell-border: var(--border-color-default);
6341
+ --table-item-cell-boder-width: var(--border-width-thin);
6342
+ --table-item-cell-last-bg: var(--color-bg-surface-default);
6343
+ --table-item-cell-last-font: var(--font-color-primary-default);
6344
+ --table-item-cell-last-icon: var(--icon-color-primary-muted);
6345
+ --table-item-header-font: var(--font-color-primary-default);
6346
+ --table-item-header-icon: var(--icon-color-primary-muted);
6347
+ --table-item-header-border: var(--border-color-default);
6348
+ --table-item-header-boder-width: var(--border-width-thin);
6349
+ --table-item-footer-cell-bg: var(--color-bg-surface-accent);
6350
+ --table-item-footer-cell-font: var(--font-color-primary-default);
6351
+ --table-item-footer-cell-icon: var(--icon-color-primary-muted);
6352
+ --table-item-footer-cell-border: var(--border-color-default);
6353
+ --table-item-footer-cell-boder-width: var(--border-width-thin);
6354
+ --table-item-header-bg: var(--color-bg-surface-muted);
6355
+ --table-item-common-icon-size: var(--icon-size-small);
6356
+ --table-item-common-radius: var(--radius-large);
6357
+ --badge-common-icon: true;
6358
+ --table-item-common-left-icon: false;
6359
+ --table-item-common-right-icon: false;
6360
+ --dialog-common-bg-overlay: var(--color-bg-overlay-default);
6361
+ --button-common-left-icon: false;
6362
+ --button-common-right-icon: false;
6363
+ --tabs-item-common-left-icon: true;
6364
+ --toggle-common-left-icon: true;
6365
+ --card-common-bg-hover: var(--color-bg-surface-muted);
6366
+ --card-common-border-hover: var(--border-color-default);
6367
+ --box-solid-radius: var(--radius-medium);
6368
+ --box-solid-bg: var(--color-bg-surface-default);
6369
+ --box-solid-gap: var(--spacing-component-gap-xl);
6370
+ --box-solid-padding-x: var(--spacing-component-padding-xl);
6371
+ --box-solid-padding-y: var(--spacing-component-padding-xl);
6372
+ --box-outline-radius: var(--radius-medium);
6373
+ --box-outline-gap: var(--spacing-component-gap-xl);
6374
+ --box-outline-padding-x: var(--spacing-component-padding-xl);
6375
+ --box-outline-padding-y: var(--spacing-component-padding-xl);
6376
+ --box-outline-border-width: var(--border-width-thin);
6377
+ --box-outline-bg: var(--color-bg-surface-default);
6378
+ --box-outline-border: var(--border-color-default);
6379
+ --code-block-solid-radius: var(--radius-medium);
6380
+ --code-block-solid-padding-x: var(--spacing-component-padding-xl);
6381
+ --code-block-solid-padding-y: var(--spacing-component-padding-xl);
6382
+ --code-block-solid-bg: var(--color-bg-surface-muted);
6383
+ --code-block-outline-radius: var(--radius-medium);
6384
+ --code-block-outline-padding-x: var(--spacing-component-padding-xl);
6385
+ --code-block-outline-padding-y: var(--spacing-component-padding-xl);
6386
+ --code-block-outline-border-width: var(--border-width-thin);
6387
+ --code-block-outline-bg: var(--color-bg-surface-muted);
6388
+ --code-block-outline-border: var(--border-color-default);
6389
+ --code-block-solid-font: var(--font-color-secondary-default);
6390
+ --code-block-outline-font: var(--font-color-secondary-default);
6391
+ --progress-radius: var(--radius-max);
6392
+ --progress-solid-track: var(--color-progress-track);
6393
+ --progress-solid-fill: var(--color-progress-fill);
6394
+ --progress-height: var(--scale-control-xs);
6395
+ --skeleton-fill: var(--color-bg-surface-muted);
6396
+ --skeleton-radius: var(--radius-medium);
6397
+ --skeleton-radius-full: var(--radius-max);
6398
+ --scrollbar-fill: var(--color-bg-surface-accent);
6399
+ --scrollbar-radius: var(--radius-max);
6400
+ --scrollbar-horizontal-height: var(--scale-control-xs);
6401
+ --scrollbar-vertical-width: var(--scale-control-xs);
6402
+ --spinner-fill-base: var(--icon-color-primary-default);
6403
+ --spinner-fill-sub: var(--icon-color-primary-muted);
6404
+ --tooltip-radius: var(--radius-medium);
6405
+ --tooltip-gap: var(--spacing-component-gap-sm);
6406
+ --tooltip-padding-x: var(--spacing-component-padding-md);
6407
+ --tooltip-padding-y: var(--spacing-component-padding-md);
6408
+ --tooltip-solid-bg: var(--color-bg-surface-default);
6409
+ --tooltip-outline-border-width: var(--border-width-thin);
6410
+ --tooltip-outline-bg: var(--color-bg-surface-default);
6411
+ --tooltip-outline-border: var(--border-color-default);
6412
+ --tooltip-font: var(--font-color-primary-default);
6413
+ --tooltip-font-sub: var(--font-color-secondary-default);
6414
+ --table-item-cell-state-bg: var(--color-bg-surface-alt);
6415
+ --table-item-cell-state-border: var(--border-color-default);
6416
+ --table-item-cell-state-boder-width: var(--border-width-thin);
6417
+ --table-item-cell-state-last-bg: var(--color-bg-surface-alt);
6418
+ --separator-border: var(--border-color-default);
6419
+ --pagination-common-radius: var(--radius-medium);
6420
+ --pagination-common-padding-sm: var(--spacing-component-padding-sm);
6421
+ --pagination-common-gap: var(--spacing-component-gap-xs);
6422
+ --pagination-common-item-size: var(--scale-control-lg);
6423
+ --pagination-link-default-font: var(--font-color-onbrand-default);
6424
+ --pagination-link-default-icon: var(--icon-color-onbrand-default);
6425
+ --pagination-link-hover-bg: var(--color-bg-surface-muted);
6426
+ --pagination-link-hover-font: var(--font-color-onbrand-default);
6427
+ --pagination-link-hover-icon: var(--icon-color-onbrand-default);
6428
+ --pagination-item-default-font: var(--font-color-onbrand-default);
6429
+ --pagination-item-hover-bg: var(--color-bg-surface-muted);
6430
+ --pagination-item-hover-font: var(--font-color-onbrand-default);
6431
+ --pagination-item-active-font: var(--font-color-primary-default);
6432
+ --pagination-common-padding-md: var(--spacing-component-padding-md);
6433
+ --pagination-common-icon-size: var(--icon-size-small);
6434
+ --pagination-item-active-bg: var(--color-bg-surface-default);
6435
+ --pagination-item-active-border: var(--border-color-default);
6436
+ --pagination-item-active-border-width: var(--border-width-thin);
6437
+ --pagination-item-active-hover-bg: var(--color-bg-surface-muted);
6438
+ --pagination-item-active-hover-font: var(--font-color-primary-default);
6439
+ --pagination-item-active-hover-border: var(--border-color-default);
6440
+ --pagination-item-active-hover-border-width: var(--border-width-thin);
6441
+ --pagination-item-ellipsis-font: var(--font-color-primary-default);
6442
+ --table-container-gap: var(--spacing-section-xs);
6443
+ --toast-common-radius: var(--radius-medium);
6444
+ --toast-common-padding-x: var(--spacing-component-padding-lg);
6445
+ --toast-common-padding-y: var(--spacing-component-padding-lg);
6446
+ --toast-common-gap: var(--spacing-component-gap-xs);
6447
+ --toast-common-icon-size: var(--icon-size-medium);
6448
+ --toast-default-title: var(--font-color-onbrand-default);
6449
+ --toast-default-icon: var(--icon-color-onbrand-default);
6450
+ --toast-common-border-width: var(--border-width-thin);
6451
+ --toast-common-border: var(--border-color-default);
6452
+ --toast-common-bg: var(--color-bg-surface-default);
6453
+ --toast-default-description: var(--font-color-secondary-default);
6454
+ --toast-success-title: var(--color-state-success-default);
6455
+ --toast-success-description: var(--font-color-secondary-default);
6456
+ --toast-success-icon: var(--color-state-success-default);
6457
+ --toast-success-bg: var(--color-state-success-subtle);
6458
+ --toast-success-border: var(--color-state-success-default);
6459
+ --toast-info-bg: var(--color-state-info-subtle);
6460
+ --toast-info-border: var(--color-state-info-default);
6461
+ --toast-info-title: var(--color-state-info-default);
6462
+ --toast-info-description: var(--font-color-secondary-default);
6463
+ --toast-info-icon: var(--color-state-info-default);
6464
+ --toast-warning-bg: var(--color-state-warning-subtle);
6465
+ --toast-warning-border: var(--color-state-warning-default);
6466
+ --toast-warning-title: var(--color-state-warning-default);
6467
+ --toast-warning-description: var(--font-color-secondary-default);
6468
+ --toast-warning-icon: var(--color-state-warning-default);
6469
+ --toast-error-bg: var(--color-state-error-subtle);
6470
+ --toast-error-border: var(--color-state-error-default);
6471
+ --toast-error-title: var(--color-state-error-default);
6472
+ --toast-error-description: var(--font-color-secondary-default);
6473
+ --toast-error-icon: var(--color-state-error-default);
6474
+ --toast-common-action: true;
6475
+ --calendar-date-picker-radius: var(--radius-medium);
6476
+ --calendar-days-week-font: var(--font-color-onbrand-default);
6477
+ --calendar-date-picker-padding-x: var(--spacing-component-padding-md);
6478
+ --calendar-date-picker-padding-y: var(--spacing-component-padding-md);
6479
+ --calendar-date-picker-icon-size: var(--icon-size-medium);
6480
+ --calendar-date-picker-border-width: var(--border-width-thin);
6481
+ --calendar-date-picker-border: var(--border-color-default);
6482
+ --calendar-date-picker-bg: var(--color-bg-surface-default);
6483
+ --calendar-date-picker-font: var(--font-color-primary-muted);
6484
+ --calendar-date-picker-icon: var(--icon-color-onbrand-default);
6485
+ --calendar-days-disabled-font: var(--font-color-disabled);
6486
+ --calendar-days-default-font: var(--font-color-primary-default);
6487
+ --calendar-days-radius: var(--radius-small);
6488
+ --calendar-days-hover-font: var(--font-color-primary-default);
6489
+ --calendar-days-hover-bg: var(--color-bg-surface-muted);
6490
+ --calendar-days-selected-font: var(--font-color-primary-default);
6491
+ --calendar-days-selected-bg: var(--color-bg-surface-muted);
6492
+ --calendar-days-current-font: var(--font-color-inverse-default);
6493
+ --calendar-days-current-bg: var(--color-bg-primary-default);
6494
+ --calendar-container-radius: var(--radius-medium);
6495
+ --calendar-container-padding-x: var(--spacing-component-padding-sm);
6496
+ --calendar-container-padding-y: var(--spacing-component-padding-sm);
6497
+ --calendar-container-icon-size: var(--icon-size-small);
6498
+ --calendar-container-border-width: var(--border-width-thin);
6499
+ --calendar-container-bg: var(--color-bg-surface-default);
6500
+ --calendar-container-font: var(--font-color-primary-default);
6501
+ --calendar-container-icon: var(--icon-color-onbrand-default);
6502
+ --calendar-container-gap: var(--spacing-component-padding-md);
6503
+ --calendar-container-border: var(--border-color-default);
6504
+ --navigation-button-common-radius: var(--radius-medium);
6505
+ --navigation-button-common-padding-x: var(--spacing-component-padding-md);
6506
+ --navigation-button-common-padding-y: var(--spacing-component-padding-sm);
6507
+ --navigation-button-common-gap: var(--spacing-component-gap-xs);
6508
+ --navigation-button-common-icon-size: var(--icon-size-micro);
6509
+ --navigation-button-solid-ghost-default-font: var(--font-color-primary-default);
6510
+ --navigation-button-solid-ghost-default-icon: var(--icon-color-onbrand-default);
6511
+ --navigation-button-solid-ghost-active-font: var(--font-color-primary-default);
6512
+ --navigation-button-solid-ghost-active-icon: var(--icon-color-onbrand-default);
6513
+ --navigation-button-solid-ghost-active-bg: var(--color-bg-primary-default);
6514
+ --navigation-button-bottom-border-default-font: var(--font-color-primary-default);
6515
+ --navigation-button-bottom-border-default-icon: var(--icon-color-onbrand-default);
6516
+ --navigation-button-bottom-border-hover-font: var(--font-color-onbrand-hover);
6517
+ --navigation-button-bottom-border-hover-icon: var(--icon-color-onbrand-hover);
6518
+ --navigation-button-solid-ghost-disabled-font: var(--font-color-disabled);
6519
+ --navigation-button-solid-ghost-disabled-icon: var(--icon-color-disabled);
6520
+ --navigation-button-bottom-border-active-font: var(--font-color-primary-default);
6521
+ --navigation-button-bottom-border-active-icon: var(--icon-color-onbrand-default);
6522
+ --navigation-button-bottom-border-active-border: var(--icon-color-primary-default);
6523
+ --navigation-button-bottom-border-disabled-font: var(--font-color-disabled);
6524
+ --navigation-button-bottom-border-disabled-icon: var(--icon-color-disabled);
6525
+ --navigation-button-bottom-border-active-border-width: var(--border-width-thick);
6526
+ --navigation-item-common-radius: var(--radius-medium);
6527
+ --navigation-item-common-padding-x: var(--spacing-component-padding-sm);
6528
+ --navigation-item-common-padding-y: var(--spacing-component-padding-sm);
6529
+ --navigation-item-common-gap: var(--spacing-component-padding-sm);
6530
+ --navigation-item-common-icon-size: var(--icon-size-small);
6531
+ --navigation-item-default-font: var(--font-color-primary-default);
6532
+ --navigation-item-default-icon: var(--icon-color-onbrand-default);
6533
+ --navigation-item-hover-bg: var(--color-bg-primary-muted);
6534
+ --navigation-item-hover-font: var(--font-color-primary-default);
6535
+ --navigation-item-hover-icon: var(--icon-color-onbrand-default);
6536
+ --navigation-item-content-common-radius: var(--radius-medium);
6537
+ --navigation-item-content-common-padding-x: var(--spacing-component-padding-md);
6538
+ --navigation-item-content-common-padding-y: var(--spacing-component-padding-md);
6539
+ --navigation-item-content-common-gap: var(--spacing-component-padding-xs);
6540
+ --navigation-item-content-common-icon-size: var(--icon-size-small);
6541
+ --navigation-item-content-default-title: var(--font-color-primary-default);
6542
+ --navigation-item-content-default-icon: var(--icon-color-onbrand-default);
6543
+ --navigation-item-content-hover-bg: var(--color-bg-primary-muted);
6544
+ --navigation-item-content-hover-title: var(--font-color-primary-default);
6545
+ --navigation-item-content-hover-icon: var(--icon-color-onbrand-default);
6546
+ --navigation-item-content-hover-description: var(--font-color-secondary-default);
6547
+ --navigation-item-content-default-description: var(--font-color-secondary-default);
6548
+ --navigation-button-container-radius: var(--radius-small);
6549
+ --navigation-button-container-padding-x: var(--spacing-component-padding-xs);
6550
+ --navigation-button-container-padding-y: var(--spacing-component-padding-md);
6551
+ --navigation-button-container-gap: var(--spacing-component-gap-sm);
6552
+ --navigation-button-container-border-width: var(--border-width-thin);
6553
+ --navigation-button-container-border: var(--border-color-default);
6554
+ --navigation-button-container-bg: var(--color-bg-surface-default);
6555
+ --navigation-item-container-radius: var(--radius-medium);
6556
+ --navigation-item-container-padding-x: var(--spacing-component-padding-md);
6557
+ --navigation-item-container-padding-y: var(--spacing-component-padding-md);
6558
+ --navigation-item-container-gap: var(--spacing-component-gap-sm);
6559
+ --navigation-item-container-border-width: var(--border-width-thin);
6560
+ --navigation-item-container-border: var(--border-color-default);
6561
+ --navigation-item-container-bg: var(--color-bg-surface-default);
6562
+ --button-gradient-default-font: var(--font-color-onbrand-default);
6563
+ --button-gradient-default-icon: var(--icon-color-onbrand-default);
6564
+ --button-gradient-hover-font: var(--font-color-onbrand-default);
6565
+ --button-gradient-hover-icon: var(--icon-color-onbrand-default);
6566
+ --button-gradient-disabled-font: var(--font-color-onbrand-default);
6567
+ --button-gradient-disabled-icon: var(--icon-color-onbrand-default);
6568
+ --tabs-item-gradient-on-font: var(--font-color-onbrand-default);
6569
+ --tabs-item-gradient-on-icon: var(--icon-color-onbrand-default);
6570
+ --tabs-item-gradient-off-bg: var(--color-bg-surface-muted);
6571
+ --tabs-item-gradient-off-font: var(--font-color-primary-muted);
6572
+ --tabs-item-gradient-off-icon: var(--icon-color-primary-muted);
6573
+ --tabs-item-gradient-hover-bg: var(--color-bg-surface-accent);
6574
+ --tabs-item-gradient-hover-font: var(--font-color-primary-muted);
6575
+ --tabs-item-gradient-hover-icon: var(--icon-color-primary-muted);
6576
+ --badge-gradient-font: var(--font-color-inverse-default);
6577
+ --badge-gradient-icon: var(--icon-color-inverse-default);
6578
+ --navigation-button-gradient-default-font: var(--font-color-primary-default);
6579
+ --navigation-button-gradient-default-icon: var(--icon-color-onbrand-default);
6580
+ --navigation-button-gradient-active-font: var(--font-color-primary-default);
6581
+ --navigation-button-gradient-active-icon: var(--icon-color-onbrand-default);
6582
+ --navigation-button-gradient-disabled-font: var(--font-color-disabled);
6583
+ --navigation-button-gradient-disabled-icon: var(--icon-color-disabled);
6584
+ --progress-gradient-track: var(--color-progress-track);
6585
+ --empty-common-padding-x: var(--spacing-component-padding-2xl);
6586
+ --empty-common-padding-y: var(--spacing-component-padding-2xl);
6587
+ --empty-common-gap: var(--spacing-component-gap-2xl);
6588
+ --empty-container-content-gap: var(--spacing-component-gap-lg);
6589
+ --empty-container-footer-gap: var(--spacing-component-gap-md);
6590
+ --empty-container-content-title: var(--font-color-primary-default);
6591
+ --empty-container-content-description: var(--font-color-secondary-default);
6592
+ --empty-container-content-icon: var(--icon-color-onbrand-default);
6593
+ --empty-container-content-icon-bg: var(--color-bg-surface-muted);
6594
+ --empty-common-radius: var(--radius-medium);
6595
+ --dropzone-common-radius: var(--radius-medium);
6596
+ --dropzone-common-padding-x: var(--spacing-component-padding-2xl);
6597
+ --dropzone-common-padding-y: var(--spacing-component-padding-2xl);
6598
+ --dropzone-common-gap: var(--spacing-component-gap-lg);
6599
+ --dropzone-container-icon-color: var(--icon-color-onbrand-default);
6600
+ --dropzone-container-icon-bg: var(--color-bg-surface-muted);
6601
+ --dropzone-container-content-gap: var(--spacing-component-gap-sm);
6602
+ --dropzone-container-content-title: var(--font-color-primary-default);
6603
+ --dropzone-container-content-description: var(--font-color-secondary-default);
6604
+ --dropzone-common-border: var(--border-color-surface);
6605
+ --dropzone-common-bg: var(--color-bg-surface-default);
6606
+ --dropzone-common-border-width: var(--border-width-thin);
6607
+ --dropzone-container-icon-radius: var(--radius-small);
6608
+ --switch-common-radius: var(--radius-max);
6609
+ --switch-common-padding-x: var(--spacing-component-padding-xxs);
6610
+ --switch-common-padding-y: var(--spacing-component-padding-xxs);
6611
+ --switch-off-bg: var(--color-bg-disabled);
6612
+ --switch-off-thumb: var(--color-bg-surface-default);
6613
+ --switch-on-thumb: var(--color-bg-surface-default);
6614
+ --switch-on-bg: var(--color-bg-primary-default);
6615
+ --switch-common-gap: var(--spacing-component-gap-md);
6616
+ --switch-common-font: var(--font-color-primary-default);
6617
+ --drawer-common-radius: var(--radius-large);
6618
+ --drawer-common-bg: var(--color-bg-surface-default);
6619
+ --drawer-common-border: var(--border-color-default);
6620
+ --drawer-common-border-width: var(--border-width-thin);
6621
+ --drawer-container-header-gap: var(--spacing-component-gap-sm);
6622
+ --drawer-container-header-title: var(--font-color-primary-default);
6623
+ --drawer-container-header-description: var(--font-color-primary-muted);
6624
+ --drawer-container-content-gap: var(--spacing-component-gap-lg);
6625
+ --drawer-container-footer-gap: var(--spacing-component-gap-sm);
6626
+ --drawer-container-content-title: var(--font-color-primary-default);
6627
+ --drawer-container-content-description: var(--font-color-primary-muted);
6628
+ --drawer-common-padding-x: var(--spacing-component-padding-lg);
6629
+ --drawer-common-padding-y: var(--spacing-component-padding-lg);
6630
+ --drawer-common-gap: var(--spacing-component-gap-lg);
6631
+ --chart-wrapper-radius: var(--radius-medium);
6632
+ --chart-wrapper-gap: var(--spacing-component-padding-sm);
6633
+ --chart-wrapper-padding-x: var(--spacing-component-padding-md);
6634
+ --chart-wrapper-padding-y: var(--spacing-component-padding-sm);
6635
+ --chart-shape-line-color-1: var(--color-chart-data-vis-brand-1);
6636
+ --chart-shape-line-color-2: var(--color-chart-data-vis-brand-2);
6637
+ --chart-shape-line-color-3: var(--color-chart-data-vis-brand-3);
6638
+ --chart-shape-area-color-1: var(--color-chart-data-vis-brand-1);
6639
+ --chart-shape-area-opacity: var(--opacity-state-muted);
6640
+ --chart-shape-bar-color-1: var(--color-chart-data-vis-brand-1);
6641
+ --chart-shape-pie-color-1: var(--color-chart-data-vis-brand-1);
6642
+ --chart-wrapper-bg: var(--color-chart-bg-container);
6643
+ --chart-wrapper-grid-color: var(--color-chart-border-grid);
6644
+ --chart-wrapper-axis-color: var(--color-chart-border-axis);
6645
+ --chart-wrapper-label: var(--color-chart-text-axis-label);
6646
+ --chart-data-label-gap: var(--spacing-component-gap-md);
6647
+ --chart-data-label-font: var(--color-chart-text-data-value);
6648
+ --chart-range-slider-track-bg: var(--color-chart-control-range-track);
6649
+ --chart-range-slider-track-border: var(--color-chart-control-border);
6650
+ --chart-range-slider-track-chart-border: var(--color-chart-control-border);
6651
+ --chart-range-slider-track-chart-bg: var(--color-chart-control-range-fill);
6652
+ --chart-data-label-font-sub: var(--color-chart-text-data-value-sub);
6653
+ --chart-shape-bar-color-2: var(--color-chart-data-vis-brand-2);
6654
+ --chart-shape-area-color-2: var(--color-chart-data-vis-brand-2);
6655
+ --chart-shape-area-color-3: var(--color-chart-data-vis-brand-3);
6656
+ --chart-shape-bar-color-3: var(--color-chart-data-vis-brand-3);
6657
+ --chart-shape-pie-color-2: var(--color-chart-data-vis-brand-2);
6658
+ --chart-shape-pie-color-3: var(--color-chart-data-vis-brand-3);
6659
+ --chart-range-slider-thumb-bg: var(--color-chart-control-thumb);
6660
+ --chart-range-slider-thumb-bar-default: var(--color-chart-control-thumb-subtle);
6661
+ --chart-range-slider-thumb-handle: var(--color-chart-control-handle);
6662
+ --chart-range-slider-thumb-handle-border: var(--color-chart-control-border);
6663
+ --chart-range-slider-thumb-opacity-default: var(--opacity-state-muted);
6664
+ --chart-shape-line-dot: var(--color-chart-foreground);
6665
+ --chart-range-slider-thumb-bar: var(--color-chart-control-thumb);
6666
+ --select-base-common-icon: true;
6667
+ --table-item-cell-value-bg: var(--color-bg-surface-alt);
6668
+ --table-item-cell-value-font-default: var(--font-color-primary-default);
6669
+ --table-item-cell-value-border: var(--border-color-default);
6670
+ --table-item-cell-value-boder-width: var(--border-width-thin);
6671
+ --table-item-cell-value-font-muted: var(--font-color-primary-muted);
6672
+ --table-item-cell-value-last-bg: var(--color-bg-surface-alt);
6673
+ --table-item-cell-value-last-font-default: var(--font-color-primary-default);
6674
+ --table-item-cell-value-last-font-muted: var(--font-color-primary-muted);
6675
+ --card-common-padding-x-mobile: var(--spacing-5-mobile);
6676
+ --card-common-padding-y-mobile: var(--spacing-5-mobile);
6677
+ --card-common-gap-mobile: var(--spacing-5-mobile);
6678
+ --box-solid-gap-mobile: var(--spacing-4-mobile);
6679
+ --box-solid-padding-x-mobile: var(--spacing-4-mobile);
6680
+ --box-solid-padding-y-mobile: var(--spacing-4-mobile);
6681
+ --box-outline-gap-mobile: var(--spacing-4-mobile);
6682
+ --box-outline-padding-x-mobile: var(--spacing-4-mobile);
6683
+ --box-outline-padding-y-mobile: var(--spacing-4-mobile);
6684
+ --table-item-cell-value-font-brand: var(--font-color-secondary-default);
6685
+ --table-item-cell-value-last-font-brand: var(--font-color-secondary-default);
6686
+ --select-small-common-radius: var(--radius-medium);
6687
+ --select-small-common-gap: var(--spacing-component-padding-xs);
6688
+ --select-small-common-padding-x: var(--spacing-component-padding-sm);
6689
+ --select-small-common-height: var(--scale-control-sm);
6690
+ --select-small-common-border-width: var(--border-width-thin);
6691
+ --select-small-default-bg: var(--color-bg-surface-default);
6692
+ --select-small-default-border: var(--border-color-default);
6693
+ --select-small-default-font: var(--font-color-primary-default);
6694
+ --select-small-default-icon: var(--icon-color-onbrand-default);
6695
+ --select-small-hover-bg: var(--color-bg-surface-default);
6696
+ --select-small-hover-border: var(--border-color-surface);
6697
+ --select-small-hover-font: var(--font-color-primary-default);
6698
+ --select-small-hover-icon: var(--icon-color-onbrand-default);
6699
+ --select-small-disabled-bg: var(--color-bg-surface-muted);
6700
+ --select-small-disabled-border: var(--border-color-default);
6701
+ --select-small-disabled-font: var(--icon-color-disabled);
6702
+ --select-small-disabled-icon: var(--icon-color-disabled);
6703
+ --tabs-container-group-gap: var(--spacing-component-gap-xs);
6336
6704
  }
6337
6705
 
6338
6706
  @property --tw-translate-x {