@crossangle-org/cs-ui 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/cs-ui.css +769 -953
  2. package/package.json +1 -1
package/dist/cs-ui.css CHANGED
@@ -125,6 +125,751 @@
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-body-bold: var(--font-weight-semibold);
231
+ --font-font-weight-body-light: var(--font-weight-light);
232
+ --font-font-weight-metric-normal: var(--font-weight-normal);
233
+ --font-font-weight-metric-light: var(--font-weight-light);
234
+ --font-font-weight-metric-bold: var(--font-weight-semibold);
235
+ --font-font-weight-productive-normal: var(--font-weight-normal);
236
+ --font-font-weight-productive-bold: var(--font-weight-semibold);
237
+ --spacing-component-padding-2xl: var(--spacing-8);
238
+ --spacing-component-gap-none: var(--spacing-0);
239
+ --color-progress-track: var(--color-neutral-200);
240
+ --color-progress-fill: var(--color-theme-primary-100);
241
+ --color-chart-data-vis-brand-1: var(--color-theme-primary-100);
242
+ --color-state-info-subtle: var(--color-blue-50);
243
+ --color-gradient-primary-start: var(--color-theme-primary-100);
244
+ --color-gradient-primary-end: var(--color-theme-secondary-100);
245
+ --color-gradient-secondary-start: var(--color-theme-accent-100);
246
+ --color-gradient-secondary-end: var(--color-theme-secondary-100);
247
+ --color-gradient-primary-hover-start: var(--color-theme-primary-200);
248
+ --color-gradient-primary-hover-end: var(--color-theme-secondary-200);
249
+ --border-color-surface: var(--color-neutral-400);
250
+ --spacing-component-padding-xxs: var(--spacing-1);
251
+ --color-chart-data-vis-brand-2: var(--color-theme-secondary-100);
252
+ --color-chart-data-vis-brand-3: var(--color-theme-accent-100);
253
+ --color-chart-bg-container: var(--color-neutral-100);
254
+ --color-chart-border-grid: var(--color-neutral-300);
255
+ --color-chart-text-axis-label: var(--color-neutral-500);
256
+ --color-chart-text-data-value: var(--color-neutral-950);
257
+ --color-chart-text-data-value-sub: var(--color-neutral-500);
258
+ --color-chart-border-axis: var(--color-neutral-300);
259
+ --color-chart-control-range-track: var(--color-white);
260
+ --color-chart-control-range-fill: var(--color-blue-50);
261
+ --color-chart-control-handle: var(--color-white);
262
+ --color-chart-control-border: var(--color-neutral-300);
263
+ --color-chart-control-thumb: var(--color-blue-400);
264
+ --color-chart-foreground: var(--color-white);
265
+ --color-chart-control-thumb-subtle: var(--color-blue-300);
266
+ --line-height-metric-sm: var(--font-size-sm--line-height);
267
+ --line-height-heading-xs: var(--font-size-base--line-height);
268
+ --line-height-body-xs: var(--font-size-xs--line-height);
269
+ --line-height-productive-caption: var(--font-size-xs--line-height);
270
+ --line-height-productive-code-sm: var(--font-size-sm--line-height);
271
+ --line-height-heading-sm: var(--font-size-lg--line-height);
272
+ --line-height-heading-md: var(--font-size-xl--line-height);
273
+ --line-height-heading-lg: var(--font-size-2xl--line-height);
274
+ --line-height-heading-xl: var(--font-size-5xl--line-height);
275
+ --line-height-heading-xxl: var(--font-size-6xl--line-height);
276
+ --line-height-body-sm: var(--font-size-sm--line-height);
277
+ --line-height-body-md: var(--font-size-base--line-height);
278
+ --line-height-body-lg: var(--font-size-lg--line-height);
279
+ --line-height-metric-md: var(--font-size-base--line-height);
280
+ --line-height-metric-lg: var(--font-size-lg--line-height);
281
+ --line-height-metric-xs: var(--font-size-xs--line-height);
282
+ --line-height-body-xl: var(--font-size-2xl--line-height);
283
+ --line-height-productive-code-md: var(--font-size-base--line-height);
284
+ --line-height-productive-label-sm: var(--font-size-xs--line-height);
285
+ --line-height-productive-label-md: var(--font-size-sm--line-height);
286
+ --button-size-small-height: var(--scale-control-sm);
287
+ --button-size-small-icon-size: var(--icon-size-small);
288
+ --button-size-small-padding-x: var(--spacing-component-padding-sm);
289
+ --button-size-small-gap: var(--spacing-component-gap-xs);
290
+ --button-solid-primary-default-bg: var(--color-bg-primary-default);
291
+ --button-solid-primary-hover-bg: var(--color-bg-primary-hover);
292
+ --button-solid-primary-default-font: var(--font-color-onbrand-default);
293
+ --button-solid-primary-hover-font: var(--font-color-onbrand-default);
294
+ --button-solid-primary-default-icon: var(--icon-color-onbrand-default);
295
+ --button-solid-primary-hover-icon: var(--icon-color-onbrand-hover);
296
+ --button-size-small-radius: var(--radius-small);
297
+ --button-size-medium-height: var(--scale-control-md);
298
+ --button-size-medium-icon-size: var(--icon-size-small);
299
+ --button-size-medium-padding-x: var(--spacing-component-padding-md);
300
+ --button-size-medium-gap: var(--spacing-component-gap-xs);
301
+ --button-size-medium-radius: var(--radius-small);
302
+ --button-size-large-height: var(--scale-control-lg);
303
+ --button-size-large-icon-size: var(--icon-size-medium);
304
+ --button-size-large-padding-x: var(--spacing-component-padding-md);
305
+ --button-size-large-gap: var(--spacing-component-gap-xs);
306
+ --button-size-large-radius: var(--radius-small);
307
+ --button-solid-primary-disabled-bg: var(--color-bg-disabled);
308
+ --button-solid-primary-disabled-font: var(--font-color-disabled);
309
+ --button-solid-primary-disabled-icon: var(--icon-color-disabled);
310
+ --button-outline-default-border: var(--border-color-primary-default);
311
+ --button-outline-default-font: var(--font-color-onbrand-default);
312
+ --button-outline-default-icon: var(--icon-color-onbrand-default);
313
+ --button-outline-hover-bg: var(--color-bg-primary-muted);
314
+ --button-outline-hover-font: var(--font-color-onbrand-default);
315
+ --button-outline-hover-icon: var(--icon-color-onbrand-hover);
316
+ --button-outline-disabled-bg: var(--color-bg-surface-default);
317
+ --button-outline-disabled-font: var(--font-color-disabled);
318
+ --button-outline-disabled-icon: var(--icon-color-disabled);
319
+ --button-outline-default-bg: var(--color-bg-surface-default);
320
+ --button-outline-hover-border: var(--border-color-primary-default);
321
+ --button-outline-disabled-border: var(--color-state-neutral);
322
+ --button-solid-secondary-default-bg: var(--color-bg-secondary-default);
323
+ --button-solid-secondary-default-font: var(--font-color-onbrand-default);
324
+ --button-solid-secondary-default-icon: var(--icon-color-onbrand-default);
325
+ --button-solid-secondary-hover-bg: var(--color-bg-secondary-hover);
326
+ --button-solid-secondary-hover-font: var(--font-color-onbrand-default);
327
+ --button-solid-secondary-hover-icon: var(--icon-color-onbrand-hover);
328
+ --button-solid-secondary-disabled-bg: var(--color-bg-disabled);
329
+ --button-solid-secondary-disabled-font: var(--font-color-disabled);
330
+ --button-solid-secondary-disabled-icon: var(--icon-color-disabled);
331
+ --button-ghost-default-font: var(--font-color-onbrand-default);
332
+ --button-ghost-default-icon: var(--icon-color-onbrand-default);
333
+ --button-ghost-hover-bg: var(--color-bg-surface-muted);
334
+ --button-ghost-hover-font: var(--font-color-onbrand-default);
335
+ --button-ghost-hover-icon: var(--icon-color-onbrand-hover);
336
+ --button-ghost-disabled-font: var(--font-color-disabled);
337
+ --button-ghost-disabled-icon: var(--icon-color-disabled);
338
+ --button-link-default-font: var(--font-color-link-default);
339
+ --button-link-default-icon: var(--icon-color-link-default);
340
+ --button-link-hover-bg: var(--color-bg-surface-muted);
341
+ --button-link-hover-font: var(--font-color-link-hover);
342
+ --button-link-hover-icon: var(--icon-color-link-hover);
343
+ --button-link-disabled-font: var(--font-color-link-default);
344
+ --button-link-disabled-icon: var(--icon-color-link-default);
345
+ --button-common-opacity: var(--opacity-state-disabled);
346
+ --button-outline-border-width: var(--border-width-thin);
347
+ --input-common-radius: var(--radius-medium);
348
+ --input-common-padding-x: var(--spacing-component-padding-sm);
349
+ --input-common-padding-y: var(--spacing-component-padding-sm);
350
+ --input-common-gap: var(--spacing-component-gap-sm);
351
+ --input-common-icon-size-sm: var(--icon-size-small);
352
+ --input-common-opacity: var(--opacity-state-disabled);
353
+ --input-solid-default-bg: var(--color-bg-surface-muted);
354
+ --input-solid-default-font: var(--font-color-primary-muted);
355
+ --input-solid-default-icon: var(--icon-color-primary-muted);
356
+ --input-common-height: var(--scale-lg);
357
+ --input-common-border-width: var(--border-width-thin);
358
+ --input-solid-hover-bg: var(--color-bg-surface-accent);
359
+ --input-solid-focus-bg: var(--color-bg-surface-muted);
360
+ --input-solid-focus-border: var(--border-color-focus);
361
+ --input-solid-fail-bg: var(--color-state-error-subtle);
362
+ --input-solid-fail-border: var(--color-state-error-default);
363
+ --input-solid-fail-font: var(--font-color-primary-default);
364
+ --input-solid-fail-icon: var(--color-state-error-default);
365
+ --input-solid-success-bg: var(--color-state-success-subtle);
366
+ --input-solid-success-border: var(--color-state-success-default);
367
+ --input-solid-success-font: var(--font-color-primary-default);
368
+ --input-solid-success-icon: var(--color-state-success-default);
369
+ --input-outline-default-bg: var(--color-bg-surface-default);
370
+ --input-outline-default-border: var(--border-color-default);
371
+ --input-outline-default-font: var(--font-color-primary-muted);
372
+ --input-outline-default-icon: var(--icon-color-onbrand-default);
373
+ --input-outline-hover-bg: var(--color-bg-surface-default);
374
+ --input-outline-hover-border: var(--border-color-default);
375
+ --input-outline-focus-bg: var(--color-bg-surface-default);
376
+ --input-outline-focus-border: var(--border-color-focus);
377
+ --input-outline-fail-bg: var(--color-bg-surface-default);
378
+ --input-outline-fail-border: var(--color-state-error-default);
379
+ --input-outline-fail-font: var(--font-color-primary-default);
380
+ --input-outline-fail-icon: var(--color-state-error-default);
381
+ --input-outline-success-bg: var(--color-bg-surface-default);
382
+ --input-outline-success-border: var(--color-state-success-default);
383
+ --input-outline-success-font: var(--font-color-primary-default);
384
+ --input-outline-success-icon: var(--color-state-success-default);
385
+ --checkbox-common-radius: var(--radius-small);
386
+ --checkbox-common-scale: var(--scale-control-xs);
387
+ --checkbox-common-icon-size: var(--icon-size-micro);
388
+ --checkbox-common-opacity: var(--opacity-state-disabled);
389
+ --checkbox-solid-default-bg: var(--color-bg-surface-muted);
390
+ --checkbox-solid-hover-bg: var(--color-bg-surface-accent);
391
+ --checkbox-outline-border-width: var(--border-width-thin);
392
+ --checkbox-solid-checked-bg: var(--color-bg-primary-default);
393
+ --checkbox-solid-checked-icon: var(--icon-color-onbrand-default);
394
+ --checkbox-outline-default-border: var(--border-color-primary-default);
395
+ --checkbox-outline-hover-border: var(--border-color-primary-hover);
396
+ --checkbox-outline-checked-bg: var(--color-bg-primary-default);
397
+ --checkbox-outline-checked-border: var(--border-color-primary-default);
398
+ --checkbox-outline-checked-icon: var(--icon-color-onbrand-default);
399
+ --checkbox-outline-hover-bg: var(--color-bg-surface-muted);
400
+ --checkbox-outline-default-bg: var(--color-bg-surface-default);
401
+ --card-common-radius: var(--radius-large);
402
+ --card-common-padding-x: var(--spacing-component-padding-xl);
403
+ --card-common-padding-y: var(--spacing-component-padding-xl);
404
+ --card-common-gap: var(--spacing-component-gap-2xl);
405
+ --card-container-header-gap: var(--spacing-component-gap-sm);
406
+ --card-container-header-title: var(--font-color-primary-default);
407
+ --card-container-header-description: var(--font-color-primary-muted);
408
+ --card-container-content-gap: var(--spacing-component-gap-lg);
409
+ --card-container-footer-gap: var(--spacing-component-gap-sm);
410
+ --card-common-bg: var(--color-bg-surface-default);
411
+ --card-common-border: var(--border-color-default);
412
+ --input-common-group-gap: var(--spacing-component-gap-sm);
413
+ --dropdown-item-common-radius: var(--radius-base);
414
+ --dropdown-item-common-padding-x: var(--spacing-component-padding-sm);
415
+ --dropdown-item-common-height: var(--scale-control-md);
416
+ --dropdown-item-icon-gap: var(--spacing-component-gap-sm);
417
+ --dropdown-item-common-border-width: var(--border-width-thin);
418
+ --dropdown-item-simple-default-font: var(--font-color-primary-default);
419
+ --dropdown-item-icon-default-icon: var(--icon-color-primary-muted);
420
+ --dropdown-item-icon-disabled-icon: var(--icon-color-disabled);
421
+ --dropdown-item-common-bg: var(--color-bg-surface-default);
422
+ --dropdown-item-simple-hover-font: var(--font-color-primary-default);
423
+ --dropdown-item-simple-disabled-font: var(--font-color-disabled);
424
+ --label-font-default: var(--font-color-primary-default);
425
+ --dropdown-item-simple-hover-bg: var(--color-bg-surface-muted);
426
+ --dropdown-item-common-border: var(--border-color-divider);
427
+ --dropdown-item-icon-icon-size: var(--icon-size-small);
428
+ --label-gap: var(--spacing-component-gap-xs);
429
+ --label-font-disabled: var(--font-color-disabled);
430
+ --dropdown-item-header-font: var(--font-color-primary-default);
431
+ --dropdown-item-common-padding-y: var(--spacing-component-padding-xs);
432
+ --select-base-common-radius: var(--radius-medium);
433
+ --select-base-common-padding-x: var(--spacing-component-padding-md);
434
+ --select-base-common-height: var(--scale-control-lg);
435
+ --select-base-common-border-width: var(--border-width-thin);
436
+ --select-base-default-bg: var(--color-bg-surface-default);
437
+ --select-base-default-border: var(--border-color-default);
438
+ --select-base-common-gap: var(--spacing-component-padding-xs);
439
+ --select-base-default-font: var(--font-color-primary-default);
440
+ --select-base-default-icon: var(--icon-color-onbrand-default);
441
+ --select-base-hover-bg: var(--color-bg-surface-default);
442
+ --select-base-hover-border: var(--border-color-surface);
443
+ --select-base-hover-font: var(--font-color-primary-default);
444
+ --select-base-hover-icon: var(--icon-color-onbrand-default);
445
+ --select-base-disabled-bg: var(--color-bg-surface-muted);
446
+ --select-base-disabled-border: var(--border-color-default);
447
+ --select-base-disabled-font: var(--icon-color-disabled);
448
+ --select-base-disabled-icon: var(--icon-color-disabled);
449
+ --select-dropdown-radius: var(--radius-medium);
450
+ --select-dropdown-gap: var(--spacing-component-gap-none);
451
+ --select-dropdown-padding-x: var(--spacing-component-padding-xs);
452
+ --select-dropdown-padding-y: var(--spacing-component-padding-xs);
453
+ --select-dropdown-bg: var(--color-bg-surface-default);
454
+ --select-base-common-icon-size: var(--icon-size-small);
455
+ --select-dropdown-border: var(--border-color-default);
456
+ --badge-common-radius: var(--radius-max);
457
+ --badge-common-padding-x: var(--spacing-component-padding-sm);
458
+ --badge-common-padding-y: var(--spacing-component-padding-xs);
459
+ --badge-common-gap: var(--spacing-component-gap-xs);
460
+ --badge-common-icon-size: var(--icon-size-micro);
461
+ --badge-solid-bg: var(--color-bg-primary-default);
462
+ --badge-solid-font: var(--font-color-primary-default);
463
+ --badge-solid-icon: var(--icon-color-onbrand-default);
464
+ --badge-outline-bg: var(--color-bg-surface-default);
465
+ --badge-outline-font: var(--font-color-primary-default);
466
+ --badge-outline-icon: var(--icon-color-primary-default);
467
+ --badge-outline-border: var(--border-color-primary-default);
468
+ --badge-outline-border-width: var(--borderwidth-default);
469
+ --toggle-common-radius: var(--radius-max);
470
+ --toggle-common-padding-x: var(--spacing-component-padding-sm);
471
+ --toggle-common-padding-y: var(--spacing-component-padding-xs);
472
+ --toggle-common-gap: var(--spacing-component-gap-xs);
473
+ --toggle-common-icon-size: var(--icon-size-small);
474
+ --toggle-solid-default-bg: var(--color-bg-surface-muted);
475
+ --toggle-solid-default-font: var(--font-color-primary-default);
476
+ --toggle-solid-default-icon: var(--icon-color-onbrand-default);
477
+ --toggle-solid-hover-bg: var(--color-bg-surface-accent);
478
+ --toggle-solid-hover-font: var(--font-color-primary-default);
479
+ --toggle-solid-hover-icon: var(--icon-color-onbrand-default);
480
+ --toggle-solid-active-bg: var(--color-bg-primary-default);
481
+ --toggle-solid-active-font: var(--font-color-primary-default);
482
+ --toggle-solid-active-icon: var(--icon-color-onbrand-default);
483
+ --toggle-common-opacity: var(--opacity-state-disabled);
484
+ --toggle-outline-default-bg: var(--color-bg-surface-default);
485
+ --toggle-outline-default-font: var(--font-color-primary-default);
486
+ --toggle-outline-default-icon: var(--icon-color-onbrand-default);
487
+ --toggle-outline-hover-bg: var(--color-bg-secondary-muted);
488
+ --toggle-outline-active-bg: var(--color-bg-secondary-default);
489
+ --toggle-outline-active-font: var(--font-color-primary-default);
490
+ --toggle-outline-active-icon: var(--icon-color-onbrand-default);
491
+ --toggle-outline-hover-font: var(--font-color-primary-default);
492
+ --toggle-outline-hover-icon: var(--icon-color-onbrand-default);
493
+ --toggle-outline-default-border: var(--border-color-secondary-default);
494
+ --toggle-outline-border-width: var(--borderwidth-default);
495
+ --toggle-outline-hover-border: var(--border-color-secondary-hover);
496
+ --toggle-outline-active-border: var(--border-color-secondary-default);
497
+ --toggle-common-gap-group: var(--spacing-component-gap-sm);
498
+ --accordion-default-icon-size: var(--icon-size-small);
499
+ --accordion-default-closed-title: var(--font-color-primary-default);
500
+ --accordion-default-closed-icon: var(--icon-color-onbrand-default);
501
+ --accordion-default-open-title: var(--font-color-primary-default);
502
+ --accordion-default-open-icon: var(--icon-color-onbrand-default);
503
+ --accordion-default-hover-title: var(--font-color-primary-default);
504
+ --accordion-default-hover-icon: var(--icon-color-onbrand-default);
505
+ --accordion-common-bg: var(--color-bg-surface-default);
506
+ --accordion-default-border-width: var(--border-width-thin);
507
+ --accordion-default-open-description: var(--font-color-primary-muted);
508
+ --accordion-default-gap: var(--spacing-component-gap-sm);
509
+ --accordion-default-open-gap: var(--spacing-component-gap-xs);
510
+ --accordion-default-border: var(--border-color-default);
511
+ --accordion-default-padding-y: var(--spacing-component-gap-lg);
512
+ --accordion-custom-closed-title: var(--font-color-primary-default);
513
+ --accordion-custom-closed-icon: var(--icon-color-onbrand-default);
514
+ --accordion-custom-gap: var(--spacing-component-gap-sm);
515
+ --accordion-custom-padding-y: var(--spacing-component-gap-lg);
516
+ --accordion-custom-border-width: var(--border-width-thin);
517
+ --accordion-custom-icon-size: var(--icon-size-small);
518
+ --accordion-custom-closed-border: var(--border-color-default);
519
+ --accordion-custom-hover-title: var(--font-color-primary-default);
520
+ --accordion-custom-hover-icon: var(--icon-color-onbrand-default);
521
+ --accordion-custom-open-title: var(--font-color-primary-default);
522
+ --accordion-custom-open-description: var(--font-color-primary-muted);
523
+ --accordion-custom-open-icon: var(--icon-color-onbrand-default);
524
+ --accordion-custom-open-gap: var(--spacing-component-gap-xs);
525
+ --accordion-custom-closed-bg: var(--color-bg-surface-muted);
526
+ --accordion-custom-padding-x: var(--spacing-component-gap-lg);
527
+ --accordion-custom-hover-bg: var(--color-bg-surface-accent);
528
+ --accordion-custom-hover-border: var(--border-color-default);
529
+ --accordion-custom-open-bg: var(--color-bg-surface-muted);
530
+ --accordion-custom-open-border: var(--border-color-default);
531
+ --accordion-custom-radius: var(--radius-large);
532
+ --dialog-common-radius: var(--radius-large);
533
+ --dialog-common-padding-x: var(--spacing-component-padding-xl);
534
+ --dialog-common-padding-y: var(--spacing-component-padding-xl);
535
+ --dialog-common-gap: var(--spacing-component-gap-2xl);
536
+ --dialog-common-bg: var(--color-bg-surface-default);
537
+ --dialog-common-border: var(--border-color-default);
538
+ --dialog-container-header-gap: var(--spacing-component-gap-sm);
539
+ --dialog-container-header-title: var(--font-color-primary-default);
540
+ --dialog-container-header-description: var(--font-color-secondary-default);
541
+ --dialog-container-footer-gap: var(--spacing-component-gap-sm);
542
+ --card-common-border-width: var(--border-width-thin);
543
+ --dialog-common-border-width: var(--border-width-thin);
544
+ --dropdown-container-radius: var(--radius-medium);
545
+ --dropdown-container-gap: var(--spacing-component-gap-none);
546
+ --dropdown-container-padding-x: var(--spacing-component-padding-xs);
547
+ --dropdown-container-padding-y: var(--spacing-component-padding-xs);
548
+ --dropdown-container-bg: var(--color-bg-surface-default);
549
+ --dropdown-container-border: var(--border-color-default);
550
+ --dropdown-container-border-width: var(--border-width-thin);
551
+ --popover-common-radius: var(--radius-large);
552
+ --popover-common-padding-x: var(--spacing-component-padding-lg);
553
+ --popover-common-padding-y: var(--spacing-component-padding-lg);
554
+ --popover-solid-bg: var(--color-bg-surface-default);
555
+ --dropdown-item-simple-active-font: var(--font-color-primary-default);
556
+ --dropdown-item-simple-active-icon: var(--icon-color-primary-default);
557
+ --popover-outline-bg: var(--color-bg-surface-default);
558
+ --popover-outline-border: var(--border-color-default);
559
+ --popover-outline-border-width: var(--border-width-regular);
560
+ --tabs-item-common-radius: var(--radius-small);
561
+ --tabs-item-common-padding-x: var(--spacing-component-padding-sm);
562
+ --tabs-item-common-padding-y: var(--spacing-component-padding-sm);
563
+ --tabs-item-common-gap: var(--spacing-component-gap-xs);
564
+ --tabs-item-common-icon-size: var(--icon-size-small);
565
+ --tabs-item-solid-on-bg: var(--color-bg-primary-default);
566
+ --tabs-item-solid-on-font: var(--font-color-onbrand-default);
567
+ --tabs-item-solid-on-icon: var(--icon-color-onbrand-default);
568
+ --tabs-item-solid-off-bg: var(--color-bg-surface-muted);
569
+ --tabs-item-solid-off-font: var(--font-color-primary-muted);
570
+ --tabs-item-solid-off-icon: var(--icon-color-primary-muted);
571
+ --tabs-item-solid-line-on-bg: var(--color-bg-primary-default);
572
+ --tabs-item-solid-line-on-font: var(--font-color-onbrand-default);
573
+ --tabs-item-solid-line-on-icon: var(--icon-color-onbrand-default);
574
+ --tabs-item-solid-line-off-bg: var(--color-bg-surface-default);
575
+ --tabs-item-solid-line-off-font: var(--font-color-onbrand-hover);
576
+ --tabs-item-solid-line-off-icon: var(--icon-color-onbrand-hover);
577
+ --tabs-item-solid-ghost-on-bg: var(--color-bg-primary-default);
578
+ --tabs-item-solid-ghost-on-font: var(--font-color-onbrand-default);
579
+ --tabs-item-solid-ghost-on-icon: var(--icon-color-onbrand-default);
580
+ --tabs-item-solid-ghost-off-font: var(--font-color-primary-muted);
581
+ --tabs-item-solid-ghost-off-icon: var(--icon-color-primary-muted);
582
+ --tabs-item-bottom-border-on-font: var(--font-color-primary-default);
583
+ --tabs-item-bottom-border-on-icon: var(--icon-color-primary-default);
584
+ --tabs-item-bottom-border-off-font: var(--font-color-primary-muted);
585
+ --tabs-item-bottom-border-off-icon: var(--icon-color-primary-muted);
586
+ --tabs-container-radius: var(--radius-small);
587
+ --tabs-container-gap: var(--spacing-component-gap-md);
588
+ --tabs-container-padding-x: var(--spacing-component-padding-xs);
589
+ --tabs-container-padding-y: var(--spacing-component-padding-xs);
590
+ --tabs-container-bg: var(--color-bg-surface-muted);
591
+ --tabs-item-solid-line-off-border: var(--border-color-primary-default);
592
+ --tabs-item-solid-line-off-border-width: var(--border-width-thin);
593
+ --tabs-item-bottom-border-on-border: var(--border-color-primary-default);
594
+ --tabs-item-bottom-border-on-border-width: var(--border-width-thick);
595
+ --tabs-item-solid-hover-bg: var(--color-bg-surface-accent);
596
+ --tabs-item-solid-hover-font: var(--font-color-primary-muted);
597
+ --tabs-item-solid-hover-icon: var(--icon-color-primary-muted);
598
+ --tabs-item-solid-line-hover-bg: var(--color-bg-surface-default);
599
+ --tabs-item-solid-line-hover-font: var(--font-color-onbrand-hover);
600
+ --tabs-item-solid-line-hover-icon: var(--icon-color-onbrand-hover);
601
+ --tabs-item-solid-line-hover-border: var(--border-color-primary-hover);
602
+ --tabs-item-solid-line-hover-border-width: var(--border-width-thin);
603
+ --tabs-item-solid-ghost-hover-font: var(--font-color-primary-muted);
604
+ --tabs-item-solid-ghost-hover-icon: var(--icon-color-primary-muted);
605
+ --tabs-item-solid-ghost-hover-bg: var(--color-bg-surface-muted);
606
+ --tabs-item-bottom-border-hover-font: var(--font-color-primary-default);
607
+ --tabs-item-bottom-border-hover-icon: var(--icon-color-primary-default);
608
+ --table-item-common-padding-x: var(--spacing-component-padding-md);
609
+ --table-item-common-padding-y: var(--spacing-component-padding-lg);
610
+ --table-item-cell-bg: var(--color-bg-surface-alt);
611
+ --table-item-cell-font: var(--font-color-primary-default);
612
+ --table-item-cell-icon: var(--icon-color-primary-muted);
613
+ --table-container-radius: var(--radius-large);
614
+ --table-container-bg: var(--color-bg-surface-muted);
615
+ --table-container-border: var(--border-color-default);
616
+ --table-container-border-width: var(--border-width-thin);
617
+ --table-item-cell-border: var(--border-color-default);
618
+ --table-item-cell-boder-width: var(--border-width-thin);
619
+ --table-item-cell-last-bg: var(--color-bg-surface-default);
620
+ --table-item-header-font: var(--font-color-primary-default);
621
+ --table-item-header-icon: var(--icon-color-primary-muted);
622
+ --table-item-header-border: var(--border-color-default);
623
+ --table-item-header-boder-width: var(--border-width-thin);
624
+ --table-item-footer-cell-bg: var(--color-bg-surface-accent);
625
+ --table-item-footer-cell-font: var(--font-color-primary-default);
626
+ --table-item-footer-cell-border: var(--border-color-default);
627
+ --table-item-footer-cell-boder-width: var(--border-width-thin);
628
+ --table-item-common-icon-size: var(--icon-size-small);
629
+ --dialog-common-bg-overlay: var(--color-bg-overlay-default);
630
+ --card-common-bg-hover: var(--color-bg-surface-muted);
631
+ --card-common-border-hover: var(--border-color-default);
632
+ --box-solid-radius: var(--radius-medium);
633
+ --box-solid-bg: var(--color-bg-surface-default);
634
+ --box-solid-gap: var(--spacing-component-gap-xl);
635
+ --box-solid-padding-x: var(--spacing-component-padding-xl);
636
+ --box-solid-padding-y: var(--spacing-component-padding-xl);
637
+ --box-outline-radius: var(--radius-medium);
638
+ --box-outline-gap: var(--spacing-component-gap-xl);
639
+ --box-outline-padding-x: var(--spacing-component-padding-xl);
640
+ --box-outline-padding-y: var(--spacing-component-padding-xl);
641
+ --box-outline-border-width: var(--border-width-thin);
642
+ --box-outline-bg: var(--color-bg-surface-default);
643
+ --box-outline-border: var(--border-color-default);
644
+ --code-block-solid-radius: var(--radius-medium);
645
+ --code-block-solid-padding-x: var(--spacing-component-padding-xl);
646
+ --code-block-solid-padding-y: var(--spacing-component-padding-xl);
647
+ --code-block-solid-bg: var(--color-bg-surface-muted);
648
+ --code-block-outline-radius: var(--radius-medium);
649
+ --code-block-outline-padding-x: var(--spacing-component-padding-xl);
650
+ --code-block-outline-padding-y: var(--spacing-component-padding-xl);
651
+ --code-block-outline-border-width: var(--border-width-thin);
652
+ --code-block-outline-bg: var(--color-bg-surface-muted);
653
+ --code-block-outline-border: var(--border-color-default);
654
+ --code-block-solid-font: var(--font-color-secondary-default);
655
+ --code-block-outline-font: var(--font-color-secondary-default);
656
+ --progress-radius: var(--radius-max);
657
+ --progress-solid-track: var(--color-progress-track);
658
+ --progress-solid-fill: var(--color-progress-fill);
659
+ --progress-height: var(--scale-control-xs);
660
+ --skeleton-fill: var(--color-bg-surface-muted);
661
+ --skeleton-radius: var(--radius-medium);
662
+ --skeleton-radius-full: var(--radius-max);
663
+ --scrollbar-fill: var(--color-bg-surface-accent);
664
+ --scrollbar-radius: var(--radius-max);
665
+ --scrollbar-horizontal-height: var(--scale-control-xs);
666
+ --scrollbar-vertical-width: var(--scale-control-xs);
667
+ --spinner-fill-base: var(--icon-color-primary-default);
668
+ --spinner-fill-sub: var(--icon-color-primary-muted);
669
+ --tooltip-radius: var(--radius-medium);
670
+ --tooltip-padding-x: var(--spacing-component-padding-md);
671
+ --tooltip-padding-y: var(--spacing-component-padding-md);
672
+ --tooltip-solid-bg: var(--color-bg-surface-default);
673
+ --tooltip-outline-border-width: var(--border-width-thin);
674
+ --tooltip-outline-bg: var(--color-bg-surface-default);
675
+ --tooltip-outline-border: var(--border-color-default);
676
+ --tooltip-font: var(--font-color-primary-default);
677
+ --separator-border: var(--border-color-default);
678
+ --pagination-common-radius: var(--radius-medium);
679
+ --pagination-common-padding-sm: var(--spacing-component-padding-sm);
680
+ --pagination-common-gap: var(--spacing-component-gap-xs);
681
+ --pagination-common-item-size: var(--scale-control-lg);
682
+ --pagination-link-default-font: var(--font-color-onbrand-default);
683
+ --pagination-link-default-icon: var(--icon-color-onbrand-default);
684
+ --pagination-link-hover-bg: var(--color-bg-surface-muted);
685
+ --pagination-link-hover-font: var(--font-color-onbrand-default);
686
+ --pagination-link-hover-icon: var(--icon-color-onbrand-default);
687
+ --pagination-item-active-font: var(--font-color-primary-default);
688
+ --pagination-common-padding-md: var(--spacing-component-padding-md);
689
+ --pagination-common-icon-size: var(--icon-size-small);
690
+ --pagination-item-active-bg: var(--color-bg-surface-default);
691
+ --pagination-item-active-border: var(--border-color-default);
692
+ --pagination-item-active-border-width: var(--border-width-thin);
693
+ --pagination-item-active-hover-bg: var(--color-bg-surface-muted);
694
+ --pagination-item-active-hover-font: var(--font-color-primary-default);
695
+ --pagination-item-active-hover-border: var(--border-color-default);
696
+ --pagination-item-active-hover-border-width: var(--border-width-thin);
697
+ --pagination-item-ellipsis-font: var(--font-color-primary-default);
698
+ --toast-common-radius: var(--radius-medium);
699
+ --toast-common-padding-x: var(--spacing-component-padding-lg);
700
+ --toast-common-padding-y: var(--spacing-component-padding-lg);
701
+ --toast-common-gap: var(--spacing-component-gap-xs);
702
+ --toast-common-icon-size: var(--icon-size-medium);
703
+ --toast-default-title: var(--font-color-onbrand-default);
704
+ --toast-common-border: var(--border-color-default);
705
+ --toast-common-bg: var(--color-bg-surface-default);
706
+ --toast-success-title: var(--color-state-success-default);
707
+ --toast-success-bg: var(--color-state-success-subtle);
708
+ --toast-success-border: var(--color-state-success-default);
709
+ --toast-info-bg: var(--color-state-info-subtle);
710
+ --toast-info-border: var(--color-state-info-default);
711
+ --toast-info-title: var(--color-state-info-default);
712
+ --toast-info-description: var(--font-color-secondary-default);
713
+ --toast-warning-bg: var(--color-state-warning-subtle);
714
+ --toast-warning-border: var(--color-state-warning-default);
715
+ --toast-warning-title: var(--color-state-warning-default);
716
+ --toast-error-bg: var(--color-state-error-subtle);
717
+ --toast-error-border: var(--color-state-error-default);
718
+ --toast-error-title: var(--color-state-error-default);
719
+ --calendar-date-picker-radius: var(--radius-medium);
720
+ --calendar-date-picker-padding-x: var(--spacing-component-padding-md);
721
+ --calendar-date-picker-padding-y: var(--spacing-component-padding-md);
722
+ --calendar-date-picker-icon-size: var(--icon-size-medium);
723
+ --calendar-date-picker-border-width: var(--border-width-thin);
724
+ --calendar-date-picker-border: var(--border-color-default);
725
+ --calendar-date-picker-bg: var(--color-bg-surface-default);
726
+ --calendar-date-picker-font: var(--font-color-primary-muted);
727
+ --calendar-date-picker-icon: var(--icon-color-onbrand-default);
728
+ --calendar-days-disabled-font: var(--font-color-disabled);
729
+ --calendar-days-default-font: var(--font-color-primary-default);
730
+ --calendar-days-radius: var(--radius-small);
731
+ --calendar-days-hover-font: var(--font-color-primary-default);
732
+ --calendar-days-hover-bg: var(--color-bg-surface-muted);
733
+ --calendar-days-selected-font: var(--font-color-primary-default);
734
+ --calendar-days-selected-bg: var(--color-bg-surface-muted);
735
+ --calendar-days-current-font: var(--font-color-inverse-default);
736
+ --calendar-days-current-bg: var(--color-bg-primary-default);
737
+ --calendar-container-radius: var(--radius-medium);
738
+ --calendar-container-padding-x: var(--spacing-component-padding-sm);
739
+ --calendar-container-padding-y: var(--spacing-component-padding-sm);
740
+ --calendar-container-icon-size: var(--icon-size-small);
741
+ --calendar-container-border-width: var(--border-width-thin);
742
+ --calendar-container-bg: var(--color-bg-surface-default);
743
+ --calendar-container-icon: var(--icon-color-onbrand-default);
744
+ --calendar-container-gap: var(--spacing-component-padding-md);
745
+ --calendar-container-border: var(--border-color-default);
746
+ --navigation-button-common-radius: var(--radius-medium);
747
+ --navigation-button-common-padding-x: var(--spacing-component-padding-md);
748
+ --navigation-button-common-padding-y: var(--spacing-component-padding-sm);
749
+ --navigation-button-common-gap: var(--spacing-component-gap-xs);
750
+ --navigation-button-common-icon-size: var(--icon-size-micro);
751
+ --navigation-button-solid-ghost-default-font: var(--font-color-primary-default);
752
+ --navigation-button-solid-ghost-default-icon: var(--icon-color-onbrand-default);
753
+ --navigation-button-solid-ghost-active-font: var(--font-color-primary-default);
754
+ --navigation-button-solid-ghost-active-icon: var(--icon-color-onbrand-default);
755
+ --navigation-button-solid-ghost-active-bg: var(--color-bg-primary-default);
756
+ --navigation-button-bottom-border-default-font: var(--font-color-primary-default);
757
+ --navigation-button-bottom-border-default-icon: var(--icon-color-onbrand-default);
758
+ --navigation-button-bottom-border-hover-font: var(--font-color-onbrand-hover);
759
+ --navigation-button-bottom-border-hover-icon: var(--icon-color-onbrand-hover);
760
+ --navigation-button-solid-ghost-disabled-font: var(--font-color-disabled);
761
+ --navigation-button-solid-ghost-disabled-icon: var(--icon-color-disabled);
762
+ --navigation-button-bottom-border-active-font: var(--font-color-primary-default);
763
+ --navigation-button-bottom-border-active-icon: var(--icon-color-onbrand-default);
764
+ --navigation-button-bottom-border-active-border: var(--icon-color-primary-default);
765
+ --navigation-button-bottom-border-disabled-font: var(--font-color-disabled);
766
+ --navigation-button-bottom-border-disabled-icon: var(--icon-color-disabled);
767
+ --navigation-button-bottom-border-active-border-width: var(--border-width-thick);
768
+ --navigation-item-common-radius: var(--radius-medium);
769
+ --navigation-item-common-padding-x: var(--spacing-component-padding-sm);
770
+ --navigation-item-common-padding-y: var(--spacing-component-padding-sm);
771
+ --navigation-item-common-gap: var(--spacing-component-padding-sm);
772
+ --navigation-item-common-icon-size: var(--icon-size-small);
773
+ --navigation-item-default-font: var(--font-color-primary-default);
774
+ --navigation-item-default-icon: var(--icon-color-onbrand-default);
775
+ --navigation-item-hover-bg: var(--color-bg-primary-muted);
776
+ --navigation-item-hover-font: var(--font-color-primary-default);
777
+ --navigation-item-hover-icon: var(--icon-color-onbrand-default);
778
+ --navigation-item-content-common-radius: var(--radius-medium);
779
+ --navigation-item-content-common-padding-x: var(--spacing-component-padding-md);
780
+ --navigation-item-content-common-padding-y: var(--spacing-component-padding-md);
781
+ --navigation-item-content-common-gap: var(--spacing-component-padding-xs);
782
+ --navigation-item-content-common-icon-size: var(--icon-size-small);
783
+ --navigation-item-content-default-title: var(--font-color-primary-default);
784
+ --navigation-item-content-default-icon: var(--icon-color-onbrand-default);
785
+ --navigation-item-content-hover-bg: var(--color-bg-primary-muted);
786
+ --navigation-item-content-hover-title: var(--font-color-primary-default);
787
+ --navigation-item-content-hover-icon: var(--icon-color-onbrand-default);
788
+ --navigation-button-container-gap: var(--spacing-component-gap-sm);
789
+ --navigation-item-container-radius: var(--radius-medium);
790
+ --navigation-item-container-padding-x: var(--spacing-component-padding-md);
791
+ --navigation-item-container-padding-y: var(--spacing-component-padding-md);
792
+ --navigation-item-container-gap: var(--spacing-component-gap-sm);
793
+ --navigation-item-container-border-width: var(--border-width-thin);
794
+ --navigation-item-container-border: var(--border-color-default);
795
+ --navigation-item-container-bg: var(--color-bg-surface-default);
796
+ --button-gradient-default-font: var(--font-color-onbrand-default);
797
+ --button-gradient-default-icon: var(--icon-color-onbrand-default);
798
+ --button-gradient-hover-font: var(--font-color-onbrand-default);
799
+ --button-gradient-hover-icon: var(--icon-color-onbrand-default);
800
+ --button-gradient-disabled-font: var(--font-color-onbrand-default);
801
+ --button-gradient-disabled-icon: var(--icon-color-onbrand-default);
802
+ --badge-gradient-font: var(--font-color-inverse-default);
803
+ --badge-gradient-icon: var(--icon-color-inverse-default);
804
+ --navigation-button-gradient-default-font: var(--font-color-primary-default);
805
+ --navigation-button-gradient-default-icon: var(--icon-color-onbrand-default);
806
+ --navigation-button-gradient-active-font: var(--font-color-primary-default);
807
+ --navigation-button-gradient-active-icon: var(--icon-color-onbrand-default);
808
+ --navigation-button-gradient-disabled-font: var(--font-color-disabled);
809
+ --navigation-button-gradient-disabled-icon: var(--icon-color-disabled);
810
+ --progress-gradient-track: var(--color-progress-track);
811
+ --empty-common-padding-x: var(--spacing-component-padding-2xl);
812
+ --empty-common-padding-y: var(--spacing-component-padding-2xl);
813
+ --empty-common-gap: var(--spacing-component-gap-2xl);
814
+ --empty-container-content-gap: var(--spacing-component-gap-lg);
815
+ --empty-container-footer-gap: var(--spacing-component-gap-md);
816
+ --empty-container-content-title: var(--font-color-primary-default);
817
+ --empty-container-content-description: var(--font-color-secondary-default);
818
+ --empty-container-content-icon: var(--icon-color-onbrand-default);
819
+ --empty-container-content-icon-bg: var(--color-bg-surface-muted);
820
+ --empty-common-radius: var(--radius-medium);
821
+ --dropzone-common-radius: var(--radius-medium);
822
+ --dropzone-common-padding-x: var(--spacing-component-padding-2xl);
823
+ --dropzone-common-padding-y: var(--spacing-component-padding-2xl);
824
+ --dropzone-common-gap: var(--spacing-component-gap-lg);
825
+ --dropzone-container-icon-color: var(--icon-color-onbrand-default);
826
+ --dropzone-container-icon-bg: var(--color-bg-surface-muted);
827
+ --dropzone-container-content-gap: var(--spacing-component-gap-sm);
828
+ --dropzone-container-content-title: var(--font-color-primary-default);
829
+ --dropzone-container-content-description: var(--font-color-secondary-default);
830
+ --dropzone-common-border: var(--border-color-surface);
831
+ --dropzone-common-bg: var(--color-bg-surface-default);
832
+ --dropzone-common-border-width: var(--border-width-thin);
833
+ --dropzone-container-icon-radius: var(--radius-small);
834
+ --switch-common-radius: var(--radius-max);
835
+ --switch-common-padding-x: var(--spacing-component-padding-xxs);
836
+ --switch-common-padding-y: var(--spacing-component-padding-xxs);
837
+ --switch-off-bg: var(--color-bg-disabled);
838
+ --switch-off-thumb: var(--color-bg-surface-default);
839
+ --switch-on-thumb: var(--color-bg-surface-default);
840
+ --switch-on-bg: var(--color-bg-primary-default);
841
+ --drawer-common-radius: var(--radius-large);
842
+ --drawer-common-bg: var(--color-bg-surface-default);
843
+ --drawer-common-border: var(--border-color-default);
844
+ --drawer-common-border-width: var(--border-width-thin);
845
+ --drawer-container-header-gap: var(--spacing-component-gap-sm);
846
+ --drawer-container-header-title: var(--font-color-primary-default);
847
+ --drawer-container-header-description: var(--font-color-primary-muted);
848
+ --drawer-container-footer-gap: var(--spacing-component-gap-sm);
849
+ --drawer-common-padding-x: var(--spacing-component-padding-lg);
850
+ --drawer-common-padding-y: var(--spacing-component-padding-lg);
851
+ --chart-wrapper-grid-color: var(--color-chart-border-grid);
852
+ --chart-wrapper-axis-color: var(--color-chart-border-axis);
853
+ --chart-wrapper-label: var(--color-chart-text-axis-label);
854
+ --chart-data-label-font: var(--color-chart-text-data-value);
855
+ --chart-range-slider-track-bg: var(--color-chart-control-range-track);
856
+ --chart-range-slider-track-border: var(--color-chart-control-border);
857
+ --chart-range-slider-thumb-handle: var(--color-chart-control-handle);
858
+ --chart-range-slider-thumb-handle-border: var(--color-chart-control-border);
859
+ --chart-range-slider-thumb-bar: var(--color-chart-control-thumb);
860
+ --card-common-padding-x-mobile: var(--spacing-5-mobile);
861
+ --card-common-padding-y-mobile: var(--spacing-5-mobile);
862
+ --card-common-gap-mobile: var(--spacing-5-mobile);
863
+ --box-solid-gap-mobile: var(--spacing-4-mobile);
864
+ --box-solid-padding-x-mobile: var(--spacing-4-mobile);
865
+ --box-solid-padding-y-mobile: var(--spacing-4-mobile);
866
+ --box-outline-gap-mobile: var(--spacing-4-mobile);
867
+ --box-outline-padding-x-mobile: var(--spacing-4-mobile);
868
+ --box-outline-padding-y-mobile: var(--spacing-4-mobile);
869
+ --table-item-cell-value-font-brand: var(--font-color-secondary-default);
870
+ --select-small-common-gap: var(--spacing-component-padding-xs);
871
+ --select-small-common-padding-x: var(--spacing-component-padding-sm);
872
+ --select-small-common-height: var(--scale-control-sm);
128
873
  --breakpoint-laptop: 1600px;
129
874
  --breakpoint-mobile: 840px;
130
875
  }
@@ -1386,6 +2131,10 @@
1386
2131
  gap: calc(var(--spacing) * 8);
1387
2132
  }
1388
2133
 
2134
+ .gap-component-gap-lg {
2135
+ gap: var(--spacing-5);
2136
+ }
2137
+
1389
2138
  :where(.space-y-1 > :not(:last-child)) {
1390
2139
  --tw-space-y-reverse: 0;
1391
2140
  margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
@@ -2347,6 +3096,14 @@
2347
3096
  padding-inline: calc(var(--spacing) * 4);
2348
3097
  }
2349
3098
 
3099
+ .px-component-padding-lg {
3100
+ padding-inline: var(--spacing-5);
3101
+ }
3102
+
3103
+ .px-component-padding-md {
3104
+ padding-inline: var(--spacing-4);
3105
+ }
3106
+
2350
3107
  .py-\(--badge-common-padding-y\) {
2351
3108
  padding-block: var(--badge-common-padding-y);
2352
3109
  }
@@ -2467,6 +3224,18 @@
2467
3224
  padding-block: calc(var(--spacing) * 2);
2468
3225
  }
2469
3226
 
3227
+ .py-component-padding-lg {
3228
+ padding-block: var(--spacing-5);
3229
+ }
3230
+
3231
+ .py-component-padding-md {
3232
+ padding-block: var(--spacing-4);
3233
+ }
3234
+
3235
+ .py-component-padding-sm {
3236
+ padding-block: var(--spacing-3);
3237
+ }
3238
+
2470
3239
  .pt-4 {
2471
3240
  padding-top: calc(var(--spacing) * 4);
2472
3241
  }
@@ -5748,959 +6517,6 @@
5748
6517
  --spacing-9-mobile: 32px;
5749
6518
  --spacing-10-mobile: 36px;
5750
6519
  --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);
6704
6520
  }
6705
6521
 
6706
6522
  @property --tw-translate-x {