@dialpad/dialtone-css 8.80.0-next.3 → 8.80.0-next.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/build/js/dialtone_migrate_chip_interactive/index.mjs +367 -0
- package/lib/build/js/dialtone_migrate_chip_interactive/test.mjs +244 -0
- package/lib/build/js/dialtone_migrate_scrollbar_always/index.mjs +225 -0
- package/lib/build/less/components/box.less +2 -0
- package/lib/build/less/components/link.less +14 -19
- package/lib/build/less/components/notice.less +1 -1
- package/lib/build/less/components/rich-text-editor.less +24 -0
- package/lib/build/less/components/scrollbar.less +22 -0
- package/lib/build/less/dialtone.less +7 -0
- package/lib/dist/dialtone-default-theme.css +334 -293
- package/lib/dist/dialtone-default-theme.min.css +1 -1
- package/lib/dist/dialtone-docs.json +1 -1
- package/lib/dist/dialtone.css +50 -15
- package/lib/dist/dialtone.min.css +1 -1
- package/lib/dist/js/dialtone_migrate_chip_interactive/index.mjs +367 -0
- package/lib/dist/js/dialtone_migrate_chip_interactive/test.mjs +244 -0
- package/lib/dist/js/dialtone_migrate_scrollbar_always/index.mjs +225 -0
- package/lib/dist/tokens/tokens-101-dark.css +141 -135
- package/lib/dist/tokens/tokens-101-light.css +164 -158
- package/lib/dist/tokens/tokens-102-dark.css +141 -135
- package/lib/dist/tokens/tokens-102-light.css +164 -158
- package/lib/dist/tokens/tokens-103-dark.css +141 -135
- package/lib/dist/tokens/tokens-103-light.css +164 -158
- package/lib/dist/tokens/tokens-104-dark.css +141 -135
- package/lib/dist/tokens/tokens-104-light.css +164 -158
- package/lib/dist/tokens/tokens-105-dark.css +141 -135
- package/lib/dist/tokens/tokens-105-light.css +164 -158
- package/lib/dist/tokens/tokens-106-dark.css +141 -135
- package/lib/dist/tokens/tokens-106-light.css +164 -158
- package/lib/dist/tokens/tokens-107-dark.css +141 -135
- package/lib/dist/tokens/tokens-107-light.css +164 -158
- package/lib/dist/tokens/tokens-108-dark.css +141 -135
- package/lib/dist/tokens/tokens-108-light.css +164 -158
- package/lib/dist/tokens/tokens-109-dark.css +141 -135
- package/lib/dist/tokens/tokens-109-light.css +164 -158
- package/lib/dist/tokens/tokens-110-dark.css +141 -135
- package/lib/dist/tokens/tokens-110-light.css +164 -158
- package/lib/dist/tokens/tokens-111-dark.css +141 -135
- package/lib/dist/tokens/tokens-111-light.css +164 -158
- package/lib/dist/tokens/tokens-112-dark.css +141 -135
- package/lib/dist/tokens/tokens-112-light.css +164 -158
- package/lib/dist/tokens/tokens-113-dark.css +141 -135
- package/lib/dist/tokens/tokens-113-light.css +164 -158
- package/lib/dist/tokens/tokens-114-dark.css +141 -135
- package/lib/dist/tokens/tokens-114-light.css +164 -158
- package/lib/dist/tokens/tokens-115-dark.css +141 -135
- package/lib/dist/tokens/tokens-115-light.css +164 -158
- package/lib/dist/tokens/tokens-116-dark.css +141 -135
- package/lib/dist/tokens/tokens-116-light.css +164 -158
- package/lib/dist/tokens/tokens-117-dark.css +141 -135
- package/lib/dist/tokens/tokens-117-light.css +164 -158
- package/lib/dist/tokens/tokens-118-dark.css +141 -135
- package/lib/dist/tokens/tokens-118-light.css +164 -158
- package/lib/dist/tokens/tokens-119-dark.css +141 -135
- package/lib/dist/tokens/tokens-119-light.css +164 -158
- package/lib/dist/tokens/tokens-120-dark.css +141 -135
- package/lib/dist/tokens/tokens-120-light.css +164 -158
- package/lib/dist/tokens/tokens-121-dark.css +141 -135
- package/lib/dist/tokens/tokens-121-light.css +164 -158
- package/lib/dist/tokens/tokens-122-dark.css +141 -135
- package/lib/dist/tokens/tokens-122-light.css +164 -158
- package/lib/dist/tokens/tokens-123-dark.css +141 -135
- package/lib/dist/tokens/tokens-123-light.css +164 -158
- package/lib/dist/tokens/tokens-124-dark.css +141 -135
- package/lib/dist/tokens/tokens-124-light.css +164 -158
- package/lib/dist/tokens/tokens-125-dark.css +141 -135
- package/lib/dist/tokens/tokens-125-light.css +164 -158
- package/lib/dist/tokens/tokens-126-dark.css +141 -135
- package/lib/dist/tokens/tokens-126-light.css +164 -158
- package/lib/dist/tokens/tokens-127-dark.css +141 -135
- package/lib/dist/tokens/tokens-127-light.css +164 -158
- package/lib/dist/tokens/tokens-128-dark.css +141 -135
- package/lib/dist/tokens/tokens-128-light.css +164 -158
- package/lib/dist/tokens/tokens-129-dark.css +141 -135
- package/lib/dist/tokens/tokens-129-light.css +164 -158
- package/lib/dist/tokens/tokens-130-dark.css +141 -135
- package/lib/dist/tokens/tokens-130-light.css +164 -158
- package/lib/dist/tokens/tokens-131-dark.css +141 -135
- package/lib/dist/tokens/tokens-131-light.css +164 -158
- package/lib/dist/tokens/tokens-132-dark.css +141 -135
- package/lib/dist/tokens/tokens-132-light.css +164 -158
- package/lib/dist/tokens/tokens-133-dark.css +141 -135
- package/lib/dist/tokens/tokens-133-light.css +164 -158
- package/lib/dist/tokens/tokens-134-dark.css +141 -135
- package/lib/dist/tokens/tokens-134-light.css +164 -158
- package/lib/dist/tokens/tokens-135-dark.css +141 -135
- package/lib/dist/tokens/tokens-135-light.css +164 -158
- package/lib/dist/tokens/tokens-136-dark.css +141 -135
- package/lib/dist/tokens/tokens-136-light.css +164 -158
- package/lib/dist/tokens/tokens-137-dark.css +141 -135
- package/lib/dist/tokens/tokens-137-light.css +164 -158
- package/lib/dist/tokens/tokens-aegean-dark.css +164 -158
- package/lib/dist/tokens/tokens-aegean-light.css +184 -178
- package/lib/dist/tokens/tokens-base-dark.css +98 -98
- package/lib/dist/tokens/tokens-base-light.css +98 -98
- package/lib/dist/tokens/tokens-botany-dark.css +149 -143
- package/lib/dist/tokens/tokens-botany-light.css +171 -165
- package/lib/dist/tokens/tokens-buttercream-dark.css +148 -142
- package/lib/dist/tokens/tokens-buttercream-light.css +171 -165
- package/lib/dist/tokens/tokens-ceruleo-dark.css +164 -158
- package/lib/dist/tokens/tokens-ceruleo-light.css +184 -178
- package/lib/dist/tokens/tokens-contrast-high-dark.css +3 -3
- package/lib/dist/tokens/tokens-contrast-high-light.css +10 -10
- package/lib/dist/tokens/tokens-debug-dp.css +28 -22
- package/lib/dist/tokens/tokens-dp-dark.css +166 -160
- package/lib/dist/tokens/tokens-dp-light.css +186 -180
- package/lib/dist/tokens/tokens-expressive-dark.css +163 -157
- package/lib/dist/tokens/tokens-expressive-light.css +186 -180
- package/lib/dist/tokens/tokens-expressive-sm-dark.css +163 -157
- package/lib/dist/tokens/tokens-expressive-sm-light.css +186 -180
- package/lib/dist/tokens/tokens-high-desert-dark.css +144 -138
- package/lib/dist/tokens/tokens-high-desert-light.css +164 -158
- package/lib/dist/tokens/tokens-melon-dark.css +145 -139
- package/lib/dist/tokens/tokens-melon-light.css +165 -159
- package/lib/dist/tokens/tokens-plum-dark.css +153 -147
- package/lib/dist/tokens/tokens-plum-light.css +164 -158
- package/lib/dist/tokens/tokens-prota-deuter-dark.css +292 -262
- package/lib/dist/tokens/tokens-prota-deuter-light.css +315 -285
- package/lib/dist/tokens/tokens-sunflower-dark.css +154 -148
- package/lib/dist/tokens/tokens-sunflower-light.css +174 -168
- package/lib/dist/tokens/tokens-tmo-dark.css +165 -159
- package/lib/dist/tokens/tokens-tmo-light.css +185 -179
- package/lib/dist/tokens/tokens-trita-dark.css +239 -197
- package/lib/dist/tokens/tokens-trita-light.css +263 -221
- package/lib/dist/tokens/tokens-verdant-haze-dark.css +144 -138
- package/lib/dist/tokens/tokens-verdant-haze-light.css +164 -158
- package/lib/dist/tokens-docs.json +1 -1
- package/package.json +11 -4
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
*/:root {
|
|
4
4
|
color-scheme: dark;
|
|
5
5
|
--dt-radio-size-radius: 50%;
|
|
6
|
-
--dt-presence-color-available: oklch(0.7559 0.135 244.32);
|
|
7
6
|
--dt-avatar-color-background-000: oklch(0.9067 0 0); /* Neutral gray fallback (manual assignment only) */
|
|
8
7
|
--dt-avatar-color-background-1800: oklch(0.8984 0.0527 78.31);
|
|
9
8
|
--dt-avatar-color-background-1700: oklch(0.8872 0.16 92.49);
|
|
@@ -55,8 +54,6 @@
|
|
|
55
54
|
--dt-avatar-lightness-2: 0.54;
|
|
56
55
|
--dt-avatar-lightness-1: 0.49;
|
|
57
56
|
--dt-avatar-lightness-0: 0.45; /* OKLCH lightness for variant 0 (darkest) */
|
|
58
|
-
--dt-shell-base-color-accent: oklch(0.7559 0.135 244.32);
|
|
59
|
-
--dt-shell-base-color-surface: oklch(0.2536 0.0075 285.86);
|
|
60
57
|
--dt-action-color-border-positive-default: transparent;
|
|
61
58
|
--dt-action-color-border-muted-default: transparent;
|
|
62
59
|
--dt-action-color-border-inverted-default: transparent;
|
|
@@ -66,7 +63,6 @@
|
|
|
66
63
|
--dt-radio-size-width: var(--dt-size-500);
|
|
67
64
|
--dt-presence-color-offline: var(--dt-color-black-500);
|
|
68
65
|
--dt-presence-color-busy: var(--dt-color-gold-700);
|
|
69
|
-
--dt-presence-color-unavailable: var(--dt-color-magenta-600);
|
|
70
66
|
--dt-icon-size-border-100: var(--dt-size-border-100);
|
|
71
67
|
--dt-icon-size-800: calc(var(--dt-size-base) * 6);
|
|
72
68
|
--dt-icon-size-700: calc(var(--dt-size-base) * 4.75);
|
|
@@ -97,49 +93,34 @@
|
|
|
97
93
|
--dt-badge-color-foreground-ai: var(--dt-color-neutral-white);
|
|
98
94
|
--dt-badge-color-foreground-bulletin-subtle: var(--dt-color-purple-900);
|
|
99
95
|
--dt-badge-color-foreground-bulletin: var(--dt-color-black-50);
|
|
100
|
-
--dt-badge-color-foreground-success: var(--dt-color-green-1000);
|
|
101
96
|
--dt-badge-color-foreground-default: var(--dt-color-black-1000);
|
|
102
97
|
--dt-badge-color-background-ai: var(--dt-color-gradient-gold-red-magenta-purple);
|
|
103
98
|
--dt-badge-color-background-bulletin-subtle: var(--dt-color-purple-200);
|
|
104
|
-
--dt-badge-color-background-critical: var(--dt-color-red-200);
|
|
105
99
|
--dt-badge-color-background-warning: var(--dt-color-gold-200);
|
|
106
|
-
--dt-badge-color-background-positive: var(--dt-color-green-200);
|
|
107
100
|
--dt-badge-color-background-info: var(--dt-color-blue-200);
|
|
108
101
|
--dt-avatar-color-foreground-dark: var(--dt-color-neutral-black); /* Text color for light avatar backgrounds (variants 6-9) */
|
|
109
102
|
--dt-avatar-color-foreground-light: var(--dt-color-neutral-white); /* Text color for dark avatar backgrounds (variants 0-5) */
|
|
110
|
-
--dt-avatar-anchor-hue: var(--dt-shell-base-color-accent); /* Theme accent color used to derive avatar anchor hue. Transformed to OKLCH hue degrees at build time. */
|
|
111
|
-
--dt-shell-presence-color-available: var(--dt-presence-color-available);
|
|
112
103
|
--dt-shell-logo-color-wordmark: var(--dt-color-purple-1000);
|
|
113
|
-
--dt-shell-logo-color-star: var(--dt-color-purple-1000);
|
|
114
104
|
--dt-shell-mention-color-foreground-secondary: var(--dt-color-black-100);
|
|
115
|
-
--dt-shell-mention-color-foreground-primary: var(--dt-color-
|
|
116
|
-
--dt-shell-mention-color-surface-secondary: lch(90 16 255);
|
|
117
|
-
--dt-shell-mention-color-surface-primary: var(--dt-shell-base-color-accent);
|
|
105
|
+
--dt-shell-mention-color-foreground-primary: var(--dt-color-black-50);
|
|
118
106
|
--dt-shell-color-border-base: var(--dt-color-black-1000);
|
|
119
|
-
--dt-shell-color-surface-default: var(--dt-shell-base-color-surface);
|
|
120
107
|
--dt-shell-base-color-status-away: var(--dt-color-black-500);
|
|
121
|
-
--dt-shell-base-color-action: var(--dt-color-
|
|
122
|
-
--dt-shell-base-color-border: var(--dt-color-
|
|
123
|
-
--dt-shell-base-color-foreground: var(--dt-color-
|
|
108
|
+
--dt-shell-base-color-action: var(--dt-color-black-800);
|
|
109
|
+
--dt-shell-base-color-border: var(--dt-color-black-900);
|
|
110
|
+
--dt-shell-base-color-foreground: var(--dt-color-black-900);
|
|
124
111
|
--dt-theme-mention-color-background-strong: var(--dt-color-purple-950);
|
|
125
112
|
--dt-theme-mention-color-foreground: var(--dt-color-black-50);
|
|
126
113
|
--dt-theme-presence-color-background-busy: var(--dt-color-gold-700);
|
|
127
|
-
--dt-theme-presence-color-background-busy-unavailable: var(--dt-color-red-700);
|
|
128
|
-
--dt-theme-presence-color-background-available: var(--dt-color-green-500);
|
|
129
114
|
--dt-theme-color-base: var(--dt-color-black-900);
|
|
130
|
-
--dt-action-color-background-positive-primary-hover: var(--dt-color-green-500);
|
|
131
|
-
--dt-action-color-background-positive-primary-default: var(--dt-color-green-600);
|
|
132
115
|
--dt-action-color-background-positive-default: var(--dt-color-neutral-transparent);
|
|
133
116
|
--dt-action-color-background-muted-default: var(--dt-color-neutral-transparent);
|
|
134
117
|
--dt-action-color-background-inverted-primary-active: var(--dt-color-purple-200);
|
|
135
118
|
--dt-action-color-background-inverted-primary-default: var(--dt-color-black-100);
|
|
136
119
|
--dt-action-color-background-inverted-default: var(--dt-color-neutral-transparent);
|
|
137
|
-
--dt-action-color-background-critical-primary-hover: var(--dt-color-red-900);
|
|
138
|
-
--dt-action-color-background-critical-primary-default: var(--dt-color-red-800);
|
|
139
120
|
--dt-action-color-background-critical-default: var(--dt-color-neutral-transparent);
|
|
140
121
|
--dt-action-color-background-base-primary-hover: var(--dt-color-purple-900);
|
|
141
122
|
--dt-action-color-background-base-primary-default: var(--dt-color-purple-800);
|
|
142
|
-
--dt-action-color-background-base-hover: oklch(0.
|
|
123
|
+
--dt-action-color-background-base-hover: oklch(0.58 0.24 287 / 0.2);
|
|
143
124
|
--dt-action-color-background-base-default: var(--dt-color-neutral-transparent);
|
|
144
125
|
--dt-action-color-foreground-positive-primary-default: var(--dt-color-black-50);
|
|
145
126
|
--dt-action-color-foreground-critical-primary-default: var(--dt-color-black-50);
|
|
@@ -356,16 +337,12 @@
|
|
|
356
337
|
--dt-typography-body-md-font-family: var(--dt-font-family-body); /* Base default medium text style for main content. */
|
|
357
338
|
--dt-color-chart-sequential-range-10-end: var(--dt-color-teal-900);
|
|
358
339
|
--dt-color-chart-sequential-range-10-start: var(--dt-color-teal-200);
|
|
359
|
-
--dt-color-chart-sequential-range-09-end: var(--dt-color-red-950);
|
|
360
|
-
--dt-color-chart-sequential-range-09-start: var(--dt-color-red-200);
|
|
361
340
|
--dt-color-chart-sequential-range-08-end: var(--dt-color-olive-950);
|
|
362
341
|
--dt-color-chart-sequential-range-08-start: var(--dt-color-olive-200);
|
|
363
342
|
--dt-color-chart-sequential-range-07-end: var(--dt-color-coral-950);
|
|
364
343
|
--dt-color-chart-sequential-range-07-start: var(--dt-color-coral-200);
|
|
365
344
|
--dt-color-chart-sequential-range-06-end: var(--dt-color-berry-950);
|
|
366
345
|
--dt-color-chart-sequential-range-06-start: var(--dt-color-berry-200);
|
|
367
|
-
--dt-color-chart-sequential-range-05-end: var(--dt-color-green-950);
|
|
368
|
-
--dt-color-chart-sequential-range-05-start: var(--dt-color-green-200);
|
|
369
346
|
--dt-color-chart-sequential-range-04-end: var(--dt-color-gold-950);
|
|
370
347
|
--dt-color-chart-sequential-range-04-start: var(--dt-color-gold-200);
|
|
371
348
|
--dt-color-chart-sequential-range-03-end: var(--dt-color-blue-900);
|
|
@@ -382,12 +359,6 @@
|
|
|
382
359
|
--dt-color-chart-warning-selected: var(--dt-color-gold-700);
|
|
383
360
|
--dt-color-chart-warning: var(--dt-color-gold-400);
|
|
384
361
|
--dt-color-chart-warning-hover: var(--dt-color-gold-500);
|
|
385
|
-
--dt-color-chart-critical-selected: var(--dt-color-red-700);
|
|
386
|
-
--dt-color-chart-critical-hover: var(--dt-color-red-500);
|
|
387
|
-
--dt-color-chart-critical: var(--dt-color-red-400);
|
|
388
|
-
--dt-color-chart-positive-selected: var(--dt-color-green-700);
|
|
389
|
-
--dt-color-chart-positive-hover: var(--dt-color-green-500);
|
|
390
|
-
--dt-color-chart-positive: var(--dt-color-green-400);
|
|
391
362
|
--dt-color-chart-accent-selected: var(--dt-color-indigo-600);
|
|
392
363
|
--dt-color-chart-accent-hover: var(--dt-color-indigo-400);
|
|
393
364
|
--dt-color-chart-accent: var(--dt-color-indigo-300);
|
|
@@ -396,9 +367,6 @@
|
|
|
396
367
|
--dt-color-chart-neutral: var(--dt-color-tan-600);
|
|
397
368
|
--dt-color-chart-categorical-10-selected: var(--dt-color-teal-700);
|
|
398
369
|
--dt-color-chart-categorical-10-hover: var(--dt-color-teal-500);
|
|
399
|
-
--dt-color-chart-categorical-09-selected: var(--dt-color-red-700);
|
|
400
|
-
--dt-color-chart-categorical-09-hover: var(--dt-color-red-500);
|
|
401
|
-
--dt-color-chart-categorical-09: var(--dt-color-red-400);
|
|
402
370
|
--dt-color-chart-categorical-08-selected: var(--dt-color-olive-700);
|
|
403
371
|
--dt-color-chart-categorical-08-hover: var(--dt-color-olive-500);
|
|
404
372
|
--dt-color-chart-categorical-08: var(--dt-color-olive-400);
|
|
@@ -408,9 +376,6 @@
|
|
|
408
376
|
--dt-color-chart-categorical-06-selected: var(--dt-color-berry-800);
|
|
409
377
|
--dt-color-chart-categorical-06-hover: var(--dt-color-berry-600);
|
|
410
378
|
--dt-color-chart-categorical-06: var(--dt-color-berry-500);
|
|
411
|
-
--dt-color-chart-categorical-05-selected: var(--dt-color-green-500);
|
|
412
|
-
--dt-color-chart-categorical-05-hover: var(--dt-color-green-400);
|
|
413
|
-
--dt-color-chart-categorical-05: var(--dt-color-green-300);
|
|
414
379
|
--dt-color-chart-categorical-04-selected: var(--dt-color-gold-700);
|
|
415
380
|
--dt-color-chart-categorical-04-hover: var(--dt-color-gold-500);
|
|
416
381
|
--dt-color-chart-categorical-04: var(--dt-color-gold-400);
|
|
@@ -431,21 +396,12 @@
|
|
|
431
396
|
--dt-color-border-brand-strong-inverted: var(--dt-color-purple-200);
|
|
432
397
|
--dt-color-border-info-strong-inverted: var(--dt-color-blue-200);
|
|
433
398
|
--dt-color-border-warning-strong-inverted: var(--dt-color-gold-300);
|
|
434
|
-
--dt-color-border-success-strong-inverted: var(--dt-color-green-200);
|
|
435
|
-
--dt-color-border-positive-strong-inverted: var(--dt-color-green-200);
|
|
436
|
-
--dt-color-border-critical-strong-inverted: var(--dt-color-red-300);
|
|
437
399
|
--dt-color-border-brand-subtle-inverted: var(--dt-color-purple-900);
|
|
438
400
|
--dt-color-border-info-subtle-inverted: var(--dt-color-blue-900);
|
|
439
401
|
--dt-color-border-warning-subtle-inverted: var(--dt-color-gold-800);
|
|
440
|
-
--dt-color-border-success-subtle-inverted: var(--dt-color-green-600);
|
|
441
|
-
--dt-color-border-positive-subtle-inverted: var(--dt-color-green-900);
|
|
442
|
-
--dt-color-border-critical-subtle-inverted: var(--dt-color-red-800);
|
|
443
402
|
--dt-color-border-brand-inverted: var(--dt-color-purple-400);
|
|
444
403
|
--dt-color-border-info-inverted: var(--dt-color-blue-300);
|
|
445
404
|
--dt-color-border-warning-inverted: var(--dt-color-gold-500);
|
|
446
|
-
--dt-color-border-success-inverted: var(--dt-color-green-300);
|
|
447
|
-
--dt-color-border-positive-inverted: var(--dt-color-green-200);
|
|
448
|
-
--dt-color-border-critical-inverted: var(--dt-color-red-500);
|
|
449
405
|
--dt-color-border-bold-inverted: oklch(0 0 0 / 0.5);
|
|
450
406
|
--dt-color-border-moderate-inverted: oklch(0 0 0 / 0.34);
|
|
451
407
|
--dt-color-border-default-inverted: oklch(0 0 0 / 0.18);
|
|
@@ -453,102 +409,65 @@
|
|
|
453
409
|
--dt-color-border-brand-strong: var(--dt-color-purple-900);
|
|
454
410
|
--dt-color-border-info-strong: var(--dt-color-blue-900);
|
|
455
411
|
--dt-color-border-warning-strong: var(--dt-color-gold-900);
|
|
456
|
-
--dt-color-border-success-strong: var(--dt-color-green-800);
|
|
457
|
-
--dt-color-border-positive-strong: var(--dt-color-green-800);
|
|
458
|
-
--dt-color-border-critical-strong: var(--dt-color-red-900);
|
|
459
412
|
--dt-color-border-brand-subtle: var(--dt-color-purple-500);
|
|
460
413
|
--dt-color-border-info-subtle: var(--dt-color-blue-300);
|
|
461
414
|
--dt-color-border-warning-subtle: var(--dt-color-gold-600);
|
|
462
|
-
--dt-color-border-success-subtle: var(--dt-color-green-300);
|
|
463
|
-
--dt-color-border-positive-subtle: var(--dt-color-green-300);
|
|
464
|
-
--dt-color-border-critical-subtle: var(--dt-color-red-300);
|
|
465
415
|
--dt-color-border-brand: var(--dt-color-purple-800);
|
|
466
416
|
--dt-color-border-info: var(--dt-color-blue-800);
|
|
467
417
|
--dt-color-border-warning: var(--dt-color-gold-800);
|
|
468
|
-
--dt-color-border-success: var(--dt-color-green-500);
|
|
469
|
-
--dt-color-border-positive: var(--dt-color-green-700);
|
|
470
|
-
--dt-color-border-critical: var(--dt-color-red-800);
|
|
471
418
|
--dt-color-border-bold: oklch(1 0 0 / 0.5);
|
|
472
419
|
--dt-color-border-moderate: oklch(1 0 0 / 0.36);
|
|
473
420
|
--dt-color-border-default: oklch(1 0 0 / 0.22);
|
|
474
421
|
--dt-color-border-subtle: oklch(1 0 0 / 0.14);
|
|
475
422
|
--dt-color-surface-ai: var(--dt-color-gradient-gold-red-magenta-purple);
|
|
476
423
|
--dt-color-surface-backdrop: oklch(0 0 0 / 0.65); /* Background color for a modal-like backdrop. */
|
|
477
|
-
--dt-color-surface-brand-subtle-opaque-inverted: oklch(0.
|
|
478
|
-
--dt-color-surface-info-subtle-opaque-inverted: oklch(0.
|
|
479
|
-
--dt-color-surface-
|
|
480
|
-
--dt-color-surface-
|
|
481
|
-
--dt-color-surface-
|
|
482
|
-
--dt-color-surface-
|
|
483
|
-
--dt-color-surface-
|
|
484
|
-
--dt-color-surface-
|
|
485
|
-
--dt-color-surface-
|
|
486
|
-
--dt-color-surface-
|
|
487
|
-
--dt-color-surface-
|
|
488
|
-
--dt-color-surface-critical-opaque-inverted: oklch(0.82 0.07 24.1 / 0.5);
|
|
489
|
-
--dt-color-surface-contrast-opaque-inverted: oklch(0 0 0 / 0.97); /* Contrast surface as opaque background color. */
|
|
490
|
-
--dt-color-surface-strong-opaque-inverted: oklch(0 0 0 / 0.67); /* Strong surface as opaque background color. */
|
|
491
|
-
--dt-color-surface-bold-opaque-inverted: oklch(0 0 0 / 0.18);
|
|
492
|
-
--dt-color-surface-moderate-opaque-inverted: oklch(0 0 0 / 0.11);
|
|
493
|
-
--dt-color-surface-secondary-opaque-inverted: oklch(0 0 0 / 0.04);
|
|
424
|
+
--dt-color-surface-brand-subtle-opaque-inverted: oklch(0.95 0.03 302 / 0.66); /* Info surface as opaque background color. */
|
|
425
|
+
--dt-color-surface-info-subtle-opaque-inverted: oklch(0.95 0.02 258 / 0.66); /* Info surface as opaque background color. */
|
|
426
|
+
--dt-color-surface-warning-subtle-opaque-inverted: oklch(0.98 0.02 77.1 / 0.3); /* Warning subtle surface as opaque background color */
|
|
427
|
+
--dt-color-surface-brand-opaque-inverted: oklch(0.9 0.06 301 / 0.8); /* Info surface as opaque background color. */
|
|
428
|
+
--dt-color-surface-info-opaque-inverted: oklch(0.9 0.05 257 / 0.6); /* Info surface as opaque background color. */
|
|
429
|
+
--dt-color-surface-warning-opaque-inverted: oklch(0.9 0.09 77.6 / 0.5);
|
|
430
|
+
--dt-color-surface-contrast-opaque-inverted: oklch(0.16 0 84.6 / 0.97); /* Contrast surface as opaque background color. */
|
|
431
|
+
--dt-color-surface-strong-opaque-inverted: oklch(0.16 0 84.6 / 0.67); /* Strong surface as opaque background color. */
|
|
432
|
+
--dt-color-surface-bold-opaque-inverted: oklch(0.16 0 84.6 / 0.18);
|
|
433
|
+
--dt-color-surface-moderate-opaque-inverted: oklch(0.16 0 84.6 / 0.11);
|
|
434
|
+
--dt-color-surface-secondary-opaque-inverted: oklch(0.16 0 84.6 / 0.04);
|
|
494
435
|
--dt-color-surface-brand-strong-inverted: var(--dt-color-purple-400);
|
|
495
436
|
--dt-color-surface-info-strong-inverted: var(--dt-color-blue-300);
|
|
496
|
-
--dt-color-surface-positive-strong-inverted: var(--dt-color-green-950); /* A contrasting positive state surface, most likely paired with inverted foreground colors. */
|
|
497
437
|
--dt-color-surface-warning-strong-inverted: var(--dt-color-gold-700);
|
|
498
|
-
--dt-color-surface-critical-strong-inverted: var(--dt-color-red-500);
|
|
499
438
|
--dt-color-surface-brand-subtle-inverted: var(--dt-color-purple-1000); /* A softer version of the default informational surface. */
|
|
500
439
|
--dt-color-surface-info-subtle-inverted: var(--dt-color-blue-1000); /* A softer version of the default informational surface. */
|
|
501
|
-
--dt-color-surface-success-subtle-inverted: var(--dt-color-green-1000); /* A softer version of the default success surface. */
|
|
502
|
-
--dt-color-surface-positive-subtle-inverted: var(--dt-color-green-1000); /* A softer version of the default positive surface. */
|
|
503
440
|
--dt-color-surface-warning-subtle-inverted: var(--dt-color-gold-1000); /* A softer version of the default warning surface. */
|
|
504
|
-
--dt-color-surface-critical-subtle-inverted: var(--dt-color-red-1000); /* A softer version of the Critical surface. */
|
|
505
441
|
--dt-color-surface-brand-inverted: var(--dt-color-purple-950); /* Background surface color containing messaging or elements communicated as generally informational. */
|
|
506
442
|
--dt-color-surface-info-inverted: var(--dt-color-blue-950); /* Background surface color containing messaging or elements communicated as generally informational. */
|
|
507
|
-
--dt-color-surface-success-inverted: var(--dt-color-green-900); /* Background surface color containing messaging or elements expressing a positive or successful state. */
|
|
508
|
-
--dt-color-surface-positive-inverted: var(--dt-color-green-900); /* Background surface color containing messaging or elements expressing a positive or successful state. */
|
|
509
443
|
--dt-color-surface-warning-inverted: var(--dt-color-gold-950); /* Background surface color highlighting messaging or elements that may require user's attention. */
|
|
510
|
-
--dt-color-surface-critical-inverted: var(--dt-color-red-950); /* Background surface color containing error, danger, or otherwise critical messaging or elements. */
|
|
511
444
|
--dt-color-surface-contrast-inverted: var(--dt-color-black-100); /* An inverted surface for lightened content and elements, most likely paired with inverted foreground colors. */
|
|
512
445
|
--dt-color-surface-strong-inverted: var(--dt-color-black-400); /* Use sparingly to draw the eye to a relatively important region. */
|
|
513
446
|
--dt-color-surface-bold-inverted: var(--dt-color-black-800);
|
|
514
447
|
--dt-color-surface-moderate-inverted: var(--dt-color-black-900);
|
|
515
448
|
--dt-color-surface-secondary-inverted: var(--dt-color-black-950);
|
|
516
449
|
--dt-color-surface-primary-inverted: var(--dt-color-black-1000); /* An inverted surface for lightened content and elements, most likely paired with inverted foreground colors. */
|
|
517
|
-
--dt-color-surface-brand-subtle-opaque: oklch(0.
|
|
518
|
-
--dt-color-surface-info-subtle-opaque: oklch(0.
|
|
519
|
-
--dt-color-surface-
|
|
520
|
-
--dt-color-surface-
|
|
521
|
-
--dt-color-surface-
|
|
522
|
-
--dt-color-surface-
|
|
523
|
-
--dt-color-surface-
|
|
524
|
-
--dt-color-surface-info-opaque: oklch(0.22 0.05 248 / 0.4);
|
|
525
|
-
--dt-color-surface-success-opaque: oklch(0.44 0.12 133 / 0.28);
|
|
526
|
-
--dt-color-surface-positive-opaque: oklch(0.44 0.12 133 / 0.28);
|
|
527
|
-
--dt-color-surface-warning-opaque: oklch(0.48 0.1 68.3 / 0.55);
|
|
528
|
-
--dt-color-surface-critical-opaque: oklch(0.4 0.16 11.4 / 0.2);
|
|
450
|
+
--dt-color-surface-brand-subtle-opaque: oklch(0.15 0.09 291 / 0.65);
|
|
451
|
+
--dt-color-surface-info-subtle-opaque: oklch(0.16 0.05 252 / 0.7);
|
|
452
|
+
--dt-color-surface-warning-subtle-opaque: oklch(0.23 0.05 68.4 / 0.7);
|
|
453
|
+
--dt-color-surface-brand-opaque: oklch(0.22 0.13 285 / 0.91);
|
|
454
|
+
--dt-color-surface-info-opaque: oklch(0.41 0.17 260 / 0.6);
|
|
455
|
+
--dt-color-surface-warning-opaque: oklch(0.42 0.1 61.6 / 0.55);
|
|
456
|
+
--dt-color-surface-critical-opaque: oklch(0.39 0.16 353 / 0.65);
|
|
529
457
|
--dt-color-surface-contrast-opaque: oklch(1 0 0 / 0.97);
|
|
530
|
-
--dt-color-surface-strong-opaque: oklch(0.
|
|
531
|
-
--dt-color-surface-bold-opaque: oklch(0.
|
|
532
|
-
--dt-color-surface-moderate-opaque: oklch(0.
|
|
533
|
-
--dt-color-surface-secondary-opaque: oklch(0.
|
|
458
|
+
--dt-color-surface-strong-opaque: oklch(0.93 0 84.6 / 0.74);
|
|
459
|
+
--dt-color-surface-bold-opaque: oklch(0.93 0 84.6 / 0.3);
|
|
460
|
+
--dt-color-surface-moderate-opaque: oklch(0.93 0 84.6 / 0.18);
|
|
461
|
+
--dt-color-surface-secondary-opaque: oklch(0.93 0 84.6 / 0.03);
|
|
534
462
|
--dt-color-surface-brand-strong: var(--dt-color-purple-800);
|
|
535
|
-
--dt-color-surface-info-strong: var(--dt-color-blue-
|
|
536
|
-
--dt-color-surface-success-strong: var(--dt-color-green-500);
|
|
537
|
-
--dt-color-surface-positive-strong: var(--dt-color-green-500);
|
|
463
|
+
--dt-color-surface-info-strong: var(--dt-color-blue-700);
|
|
538
464
|
--dt-color-surface-warning-strong: var(--dt-color-gold-700);
|
|
539
|
-
--dt-color-surface-critical-strong: var(--dt-color-red-800);
|
|
540
465
|
--dt-color-surface-brand-subtle: var(--dt-color-purple-50); /* A softer version of the default informational surface. */
|
|
541
|
-
--dt-color-surface-info-subtle: oklch(0.
|
|
542
|
-
--dt-color-surface-success-subtle: oklch(0.18 0.1 133);
|
|
543
|
-
--dt-color-surface-positive-subtle: oklch(0.22 0.12 133);
|
|
466
|
+
--dt-color-surface-info-subtle: oklch(0.15 0.09 258);
|
|
544
467
|
--dt-color-surface-warning-subtle: var(--dt-color-gold-100);
|
|
545
|
-
--dt-color-surface-critical-subtle: oklch(0.12 0.09 17.8);
|
|
546
468
|
--dt-color-surface-brand: var(--dt-color-purple-100); /* Background surface color containing messaging or elements communicated as generally informational. */
|
|
547
|
-
--dt-color-surface-info: var(--dt-color-blue-
|
|
548
|
-
--dt-color-surface-success: var(--dt-color-green-100); /* Background surface color containing messaging or elements expressing a positive or successful state. */
|
|
549
|
-
--dt-color-surface-positive: var(--dt-color-green-100); /* Background surface color containing messaging or elements expressing a positive or successful state. */
|
|
469
|
+
--dt-color-surface-info: var(--dt-color-blue-200);
|
|
550
470
|
--dt-color-surface-warning: var(--dt-color-gold-200);
|
|
551
|
-
--dt-color-surface-critical: var(--dt-color-red-100); /* Background surface color containing error, danger, or otherwise critical messaging or elements. */
|
|
552
471
|
--dt-color-surface-contrast: var(--dt-color-black-1000);
|
|
553
472
|
--dt-color-surface-strong: var(--dt-color-black-600);
|
|
554
473
|
--dt-color-surface-bold: var(--dt-color-black-400);
|
|
@@ -559,39 +478,53 @@
|
|
|
559
478
|
--dt-color-link-warning-inverted-hover: var(--dt-color-gold-200);
|
|
560
479
|
--dt-color-link-primary-inverted-hover: var(--dt-color-purple-200);
|
|
561
480
|
--dt-color-link-primary-inverted: var(--dt-color-purple-400);
|
|
481
|
+
--dt-color-link-info-hover: var(--dt-color-blue-700);
|
|
482
|
+
--dt-color-link-info: var(--dt-color-blue-600);
|
|
562
483
|
--dt-color-link-warning-hover: var(--dt-color-gold-900);
|
|
563
484
|
--dt-color-link-primary-hover: var(--dt-color-purple-900);
|
|
564
485
|
--dt-color-link-primary: var(--dt-color-purple-800);
|
|
565
486
|
--dt-color-foreground-info-strong-inverted: var(--dt-color-blue-200); /* Info strong text that sits on high-contrast surfaces or backgrounds. */
|
|
566
487
|
--dt-color-foreground-info-inverted: var(--dt-color-blue-300); /* Info text that sits on high-contrast surfaces or backgrounds. */
|
|
567
488
|
--dt-color-foreground-warning-inverted: var(--dt-color-gold-300);
|
|
568
|
-
--dt-color-foreground-success-strong-inverted: var(--dt-color-green-50);
|
|
569
|
-
--dt-color-foreground-success-inverted: var(--dt-color-green-200);
|
|
570
|
-
--dt-color-foreground-positive-strong-inverted: var(--dt-color-green-50);
|
|
571
|
-
--dt-color-foreground-positive-inverted: var(--dt-color-green-200);
|
|
572
|
-
--dt-color-foreground-critical-strong-inverted: var(--dt-color-red-200); /* Critical strong text that sits on high-contrast surfaces or backgrounds */
|
|
573
|
-
--dt-color-foreground-critical-inverted: var(--dt-color-red-500);
|
|
574
489
|
--dt-color-foreground-disabled-inverted: var(--dt-color-black-400); /* Disabled text color that sits on high-contrast surfaces or backgrounds. */
|
|
575
490
|
--dt-color-foreground-placeholder-inverted: var(--dt-color-black-400); /* Placeholder text color that sits on high-contrast surfaces or backgrounds. */
|
|
576
|
-
--dt-color-foreground-muted-inverted: oklch(0.
|
|
491
|
+
--dt-color-foreground-muted-inverted: oklch(0.21 0.01 91.6 / 0.65); /* Muted text color that sits on high-contrast surfaces or backgrounds. */
|
|
577
492
|
--dt-color-foreground-tertiary-inverted: var(--dt-color-black-400);
|
|
578
493
|
--dt-color-foreground-secondary-inverted: var(--dt-color-black-300);
|
|
579
494
|
--dt-color-foreground-primary-inverted: var(--dt-color-neutral-black);
|
|
580
495
|
--dt-color-foreground-info-strong: var(--dt-color-blue-800);
|
|
581
496
|
--dt-color-foreground-info: var(--dt-color-blue-700);
|
|
582
497
|
--dt-color-foreground-warning: var(--dt-color-gold-700);
|
|
583
|
-
--dt-color-foreground-success-strong: var(--dt-color-green-700);
|
|
584
|
-
--dt-color-foreground-success: var(--dt-shell-base-color-accent);
|
|
585
|
-
--dt-color-foreground-positive-strong: var(--dt-color-green-700);
|
|
586
|
-
--dt-color-foreground-positive: var(--dt-shell-base-color-accent);
|
|
587
|
-
--dt-color-foreground-critical-strong: var(--dt-color-red-900);
|
|
588
|
-
--dt-color-foreground-critical: var(--dt-color-magenta-700);
|
|
589
498
|
--dt-color-foreground-disabled: var(--dt-color-black-600);
|
|
590
499
|
--dt-color-foreground-placeholder: var(--dt-color-black-600);
|
|
591
|
-
--dt-color-foreground-muted: oklch(0.
|
|
500
|
+
--dt-color-foreground-muted: oklch(0.86 0.01 84.6 / 0.65);
|
|
592
501
|
--dt-color-foreground-tertiary: var(--dt-color-black-600); /* Used to imply visual hierarchy relative to primary and secondary text colors, e.g. headlines and labels. */
|
|
593
502
|
--dt-color-foreground-secondary: var(--dt-color-black-700); /* Example uses include introduction paragraphs, labels, and descriptions paired with form elements. */
|
|
594
503
|
--dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
|
|
504
|
+
--dt-color-red-1000: var(--dt-color-magenta-1000);
|
|
505
|
+
--dt-color-red-950: var(--dt-color-magenta-950);
|
|
506
|
+
--dt-color-red-900: var(--dt-color-magenta-900);
|
|
507
|
+
--dt-color-red-800: var(--dt-color-magenta-800);
|
|
508
|
+
--dt-color-red-700: var(--dt-color-magenta-700);
|
|
509
|
+
--dt-color-red-600: var(--dt-color-magenta-600);
|
|
510
|
+
--dt-color-red-500: var(--dt-color-magenta-500);
|
|
511
|
+
--dt-color-red-400: var(--dt-color-magenta-400);
|
|
512
|
+
--dt-color-red-300: var(--dt-color-magenta-300);
|
|
513
|
+
--dt-color-red-200: var(--dt-color-magenta-200);
|
|
514
|
+
--dt-color-red-100: var(--dt-color-magenta-100);
|
|
515
|
+
--dt-color-red-50: var(--dt-color-magenta-50);
|
|
516
|
+
--dt-color-green-1000: var(--dt-color-teal-1000);
|
|
517
|
+
--dt-color-green-950: var(--dt-color-teal-950);
|
|
518
|
+
--dt-color-green-900: var(--dt-color-teal-900);
|
|
519
|
+
--dt-color-green-800: var(--dt-color-teal-800);
|
|
520
|
+
--dt-color-green-700: var(--dt-color-teal-700);
|
|
521
|
+
--dt-color-green-600: var(--dt-color-teal-600);
|
|
522
|
+
--dt-color-green-500: var(--dt-color-teal-500);
|
|
523
|
+
--dt-color-green-400: var(--dt-color-teal-400);
|
|
524
|
+
--dt-color-green-300: var(--dt-color-teal-300);
|
|
525
|
+
--dt-color-green-200: var(--dt-color-teal-200);
|
|
526
|
+
--dt-color-green-100: var(--dt-color-teal-100);
|
|
527
|
+
--dt-color-green-50: var(--dt-color-teal-50);
|
|
595
528
|
--dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
|
|
596
529
|
--dt-radio-color-foreground-checked: var(--dt-color-foreground-primary-inverted);
|
|
597
530
|
--dt-radio-color-background-checked: var(--dt-color-surface-brand-strong);
|
|
@@ -599,6 +532,8 @@
|
|
|
599
532
|
--dt-radio-color-border-unchecked-hover: var(--dt-color-border-bold);
|
|
600
533
|
--dt-radio-color-border-unchecked: var(--dt-color-border-moderate);
|
|
601
534
|
--dt-radio-size-height: var(--dt-radio-size-width);
|
|
535
|
+
--dt-presence-color-unavailable: var(--dt-color-red-700);
|
|
536
|
+
--dt-presence-color-available: var(--dt-color-green-500);
|
|
602
537
|
--dt-icon-size-border-800: calc(var(--dt-icon-size-border-100) * 3.5);
|
|
603
538
|
--dt-icon-size-border-700: calc(var(--dt-icon-size-border-100) * 2.75);
|
|
604
539
|
--dt-icon-size-border-600: calc(var(--dt-icon-size-border-100) * 2.5);
|
|
@@ -618,72 +553,74 @@
|
|
|
618
553
|
--dt-button-font-size-sm: var(--dt-font-size-125); /* Small Button text size */
|
|
619
554
|
--dt-button-font-size-xs: var(--dt-font-size-100); /* Extra small Button text size */
|
|
620
555
|
--dt-badge-color-border-default: var(--dt-color-border-subtle);
|
|
556
|
+
--dt-badge-color-foreground-success: var(--dt-color-green-1000);
|
|
621
557
|
--dt-badge-color-background-bulletin: var(--dt-color-surface-brand-strong);
|
|
622
|
-
--dt-badge-color-background-
|
|
558
|
+
--dt-badge-color-background-critical: var(--dt-color-red-200);
|
|
559
|
+
--dt-badge-color-background-positive: var(--dt-color-green-300);
|
|
623
560
|
--dt-badge-color-background-default: var(--dt-color-surface-moderate-opaque);
|
|
624
561
|
--dt-shell-presence-color-offline: var(--dt-presence-color-offline);
|
|
625
562
|
--dt-shell-presence-color-busy: var(--dt-presence-color-busy);
|
|
626
|
-
--dt-shell-
|
|
627
|
-
--dt-shell-color-border-default: oklch(0.
|
|
628
|
-
--dt-shell-color-border-subtle: oklch(0.
|
|
629
|
-
--dt-shell-color-foreground-disabled: oklch(0.
|
|
630
|
-
--dt-shell-color-foreground-muted: oklch(0.
|
|
631
|
-
--dt-shell-color-foreground-tertiary: oklch(0.
|
|
632
|
-
--dt-shell-color-foreground-secondary: oklch(0.
|
|
563
|
+
--dt-shell-logo-color-star: var(--dt-color-surface-brand-strong);
|
|
564
|
+
--dt-shell-color-border-default: oklch(0.93 0 84.6 / 0.18);
|
|
565
|
+
--dt-shell-color-border-subtle: oklch(0.93 0 84.6 / 0.15);
|
|
566
|
+
--dt-shell-color-foreground-disabled: oklch(0.93 0 84.6 / 0.57);
|
|
567
|
+
--dt-shell-color-foreground-muted: oklch(0.93 0 84.6 / 0.6);
|
|
568
|
+
--dt-shell-color-foreground-tertiary: oklch(0.93 0 84.6 / 0.72);
|
|
569
|
+
--dt-shell-color-foreground-secondary: oklch(0.93 0 84.6 / 0.86);
|
|
633
570
|
--dt-shell-color-foreground-primary: var(--dt-shell-base-color-foreground);
|
|
634
571
|
--dt-shell-base-action-color-background-muted: var(--dt-shell-base-color-action);
|
|
635
572
|
--dt-shell-base-action-color-background-secondary: var(--dt-shell-base-color-action);
|
|
636
573
|
--dt-shell-base-action-color-background-primary: var(--dt-shell-base-color-action);
|
|
637
574
|
--dt-shell-base-color-status-warning: var(--dt-color-foreground-warning);
|
|
638
|
-
--dt-shell-base-color-
|
|
639
|
-
--dt-shell-base-color-status-positive: var(--dt-color-foreground-positive);
|
|
575
|
+
--dt-shell-base-color-surface: var(--dt-color-surface-secondary);
|
|
640
576
|
--dt-theme-mention-color-background: var(--dt-color-surface-brand-strong);
|
|
641
577
|
--dt-theme-mention-color-foreground-strong: var(--dt-color-foreground-primary-inverted);
|
|
642
578
|
--dt-theme-presence-color-background-offline: var(--dt-presence-color-offline);
|
|
579
|
+
--dt-theme-presence-color-background-busy-unavailable: var(--dt-color-red-700);
|
|
580
|
+
--dt-theme-presence-color-background-available: var(--dt-color-green-500);
|
|
643
581
|
--dt-theme-sidebar-section-color-foreground: var(--dt-color-foreground-tertiary);
|
|
644
|
-
--dt-theme-sidebar-selected-row-color-background: oklch(0.
|
|
582
|
+
--dt-theme-sidebar-selected-row-color-background: oklch(0.93 0 84.6 / 0.12);
|
|
645
583
|
--dt-theme-sidebar-selected-row-color-foreground: var(--dt-color-foreground-primary);
|
|
646
|
-
--dt-theme-sidebar-row-color-background-active: oklch(0.
|
|
647
|
-
--dt-theme-sidebar-row-color-background-hover: oklch(0.
|
|
648
|
-
--dt-theme-sidebar-row-color-background: oklch(0.
|
|
584
|
+
--dt-theme-sidebar-row-color-background-active: oklch(0.93 0 84.6 / 0.15);
|
|
585
|
+
--dt-theme-sidebar-row-color-background-hover: oklch(0.93 0 84.6 / 0.1);
|
|
586
|
+
--dt-theme-sidebar-row-color-background: oklch(0.93 0 84.6 / 0);
|
|
649
587
|
--dt-theme-sidebar-status-color-foreground: var(--dt-color-foreground-tertiary);
|
|
650
588
|
--dt-theme-sidebar-color-foreground-unread: var(--dt-color-foreground-primary);
|
|
651
589
|
--dt-theme-sidebar-color-foreground: var(--dt-color-foreground-secondary);
|
|
652
|
-
--dt-theme-topbar-profile-color-background-active: oklch(0.
|
|
653
|
-
--dt-theme-topbar-profile-color-background-hover: oklch(0.
|
|
654
|
-
--dt-theme-topbar-profile-color-background-inverted: oklch(0.
|
|
655
|
-
--dt-theme-topbar-profile-color-background: oklch(0.
|
|
590
|
+
--dt-theme-topbar-profile-color-background-active: oklch(0.93 0 84.6 / 0.14);
|
|
591
|
+
--dt-theme-topbar-profile-color-background-hover: oklch(0.93 0 84.6 / 0.1);
|
|
592
|
+
--dt-theme-topbar-profile-color-background-inverted: oklch(0.93 0 84.6 / 0.75);
|
|
593
|
+
--dt-theme-topbar-profile-color-background: oklch(0.93 0 84.6 / 0.05);
|
|
656
594
|
--dt-theme-topbar-profile-color-foreground-inverted: oklch(0 0 0 / 0.75);
|
|
657
|
-
--dt-theme-topbar-button-color-background-active: oklch(0.
|
|
658
|
-
--dt-theme-topbar-button-color-background-hover: oklch(0.
|
|
659
|
-
--dt-theme-topbar-button-color-background: oklch(0.
|
|
595
|
+
--dt-theme-topbar-button-color-background-active: oklch(0.93 0 84.6 / 0.1);
|
|
596
|
+
--dt-theme-topbar-button-color-background-hover: oklch(0.93 0 84.6 / 0.15);
|
|
597
|
+
--dt-theme-topbar-button-color-background: oklch(0.93 0 84.6 / 0);
|
|
660
598
|
--dt-theme-topbar-button-color-foreground-hover: var(--dt-theme-color-base);
|
|
661
|
-
--dt-theme-topbar-button-color-foreground: oklch(0.
|
|
662
|
-
--dt-theme-topbar-field-color-border-active: oklch(0.
|
|
663
|
-
--dt-theme-topbar-field-color-border-hover: oklch(0.
|
|
664
|
-
--dt-theme-topbar-field-color-border: oklch(0.
|
|
665
|
-
--dt-theme-topbar-field-color-background: oklch(0.
|
|
666
|
-
--dt-theme-topbar-field-color-foreground-hover: oklch(0.
|
|
667
|
-
--dt-theme-topbar-field-color-foreground: oklch(0.
|
|
599
|
+
--dt-theme-topbar-button-color-foreground: oklch(0.93 0 84.6 / 0.65);
|
|
600
|
+
--dt-theme-topbar-field-color-border-active: oklch(0.93 0 84.6 / 0.2);
|
|
601
|
+
--dt-theme-topbar-field-color-border-hover: oklch(0.93 0 84.6 / 0.1);
|
|
602
|
+
--dt-theme-topbar-field-color-border: oklch(0.93 0 84.6 / 0);
|
|
603
|
+
--dt-theme-topbar-field-color-background: oklch(0.93 0 84.6 / 0.05);
|
|
604
|
+
--dt-theme-topbar-field-color-foreground-hover: oklch(0.93 0 84.6 / 0.75);
|
|
605
|
+
--dt-theme-topbar-field-color-foreground: oklch(0.93 0 84.6 / 0.5);
|
|
668
606
|
--dt-theme-topbar-color-background: var(--dt-color-surface-secondary);
|
|
669
|
-
--dt-theme-topbar-color-foreground: oklch(0.
|
|
670
|
-
--dt-action-color-border-positive-outlined-default: var(--dt-color-border-positive);
|
|
607
|
+
--dt-theme-topbar-color-foreground: oklch(0.93 0 84.6 / 0.8);
|
|
671
608
|
--dt-action-color-border-muted-outlined-default: var(--dt-color-border-default);
|
|
672
609
|
--dt-action-color-border-inverted-outlined-default: var(--dt-color-border-default-inverted);
|
|
673
|
-
--dt-action-color-border-critical-outlined-default: var(--dt-color-border-critical);
|
|
674
610
|
--dt-action-color-border-base-outlined-default: var(--dt-color-border-brand);
|
|
675
|
-
--dt-action-color-background-positive-primary-
|
|
676
|
-
--dt-action-color-background-positive-
|
|
611
|
+
--dt-action-color-background-positive-primary-hover: var(--dt-color-green-500);
|
|
612
|
+
--dt-action-color-background-positive-primary-default: var(--dt-color-green-600);
|
|
677
613
|
--dt-action-color-background-disabled-default: var(--dt-color-surface-bold-opaque);
|
|
678
614
|
--dt-action-color-background-muted-active: var(--dt-color-surface-bold-opaque);
|
|
679
615
|
--dt-action-color-background-muted-hover: var(--dt-color-surface-moderate-opaque);
|
|
680
616
|
--dt-action-color-background-inverted-primary-hover: var(--dt-color-surface-brand);
|
|
681
617
|
--dt-action-color-background-inverted-active: var(--dt-color-surface-bold-opaque-inverted);
|
|
682
618
|
--dt-action-color-background-inverted-hover: var(--dt-color-surface-moderate-opaque-inverted);
|
|
683
|
-
--dt-action-color-background-critical-primary-
|
|
619
|
+
--dt-action-color-background-critical-primary-hover: var(--dt-color-red-900);
|
|
620
|
+
--dt-action-color-background-critical-primary-default: var(--dt-color-red-800);
|
|
684
621
|
--dt-action-color-background-critical-hover: var(--dt-color-surface-critical-opaque);
|
|
685
622
|
--dt-action-color-background-base-primary-active: var(--dt-action-color-background-base-primary-default);
|
|
686
|
-
--dt-action-color-background-base-active: oklch(0.
|
|
623
|
+
--dt-action-color-background-base-active: oklch(0.58 0.24 287 / 0.3);
|
|
687
624
|
--dt-action-color-foreground-disabled-default: var(--dt-color-foreground-disabled);
|
|
688
625
|
--dt-action-color-foreground-inverted-primary-hover: var(--dt-color-link-primary-hover);
|
|
689
626
|
--dt-action-color-foreground-inverted-primary-default: var(--dt-color-link-primary);
|
|
@@ -693,8 +630,6 @@
|
|
|
693
630
|
--dt-inputs-color-background-disabled: var(--dt-color-surface-moderate-opaque);
|
|
694
631
|
--dt-inputs-color-background-default: var(--dt-color-surface-secondary-opaque);
|
|
695
632
|
--dt-inputs-color-border-warning: var(--dt-color-border-warning);
|
|
696
|
-
--dt-inputs-color-border-positive: var(--dt-color-border-positive);
|
|
697
|
-
--dt-inputs-color-border-critical: var(--dt-color-border-critical);
|
|
698
633
|
--dt-inputs-color-border-focus: var(--dt-color-border-focus);
|
|
699
634
|
--dt-inputs-color-border-hover: var(--dt-color-border-moderate);
|
|
700
635
|
--dt-inputs-color-border-default: var(--dt-color-border-default);
|
|
@@ -795,6 +730,10 @@
|
|
|
795
730
|
--dt-typography-body-sm-font-size: var(--dt-font-size-100); /* Reduced small text style for less prominent or adjacent content. */
|
|
796
731
|
--dt-typography-body-md-compact-font-size: var(--dt-font-size-200); /* A tighter-spaced version of medium body style. */
|
|
797
732
|
--dt-typography-body-md-font-size: var(--dt-font-size-200); /* Base default medium text style for main content. */
|
|
733
|
+
--dt-color-chart-sequential-range-09-end: var(--dt-color-red-950);
|
|
734
|
+
--dt-color-chart-sequential-range-09-start: var(--dt-color-red-200);
|
|
735
|
+
--dt-color-chart-sequential-range-05-end: var(--dt-color-green-950);
|
|
736
|
+
--dt-color-chart-sequential-range-05-start: var(--dt-color-green-200);
|
|
798
737
|
--dt-color-chart-sequential-range-00-end: var(--dt-color-chart-sequential-10); /* Start color value for default sequential range. Use to create a dynamically generated sequential series, must be paired with a start color. */
|
|
799
738
|
--dt-color-chart-sequential-range-00-start: var(--dt-color-chart-sequential-01); /* Start color value for default sequential range. Use to create a dynamically generated sequential series, must be paired with an end color. */
|
|
800
739
|
--dt-color-chart-sequential-10-selected: oklch(0.93 0.03 289); /* Selected state for tenth sequential chart color. */
|
|
@@ -809,85 +748,134 @@
|
|
|
809
748
|
--dt-color-chart-sequential-02: oklch(0.3 0.04 243); /* Second color in sequential chart series, very light shade. */
|
|
810
749
|
--dt-color-chart-sequential-01-selected: oklch(0.47 0.03 277); /* Selected state for first sequential chart color. */
|
|
811
750
|
--dt-color-chart-sequential-01-hover: oklch(0.35 0.04 259); /* Hover state for first sequential chart color. */
|
|
751
|
+
--dt-color-chart-critical-selected: var(--dt-color-red-700);
|
|
752
|
+
--dt-color-chart-critical-hover: var(--dt-color-red-500);
|
|
753
|
+
--dt-color-chart-critical: var(--dt-color-red-400);
|
|
754
|
+
--dt-color-chart-positive-selected: var(--dt-color-green-700);
|
|
755
|
+
--dt-color-chart-positive-hover: var(--dt-color-green-500);
|
|
756
|
+
--dt-color-chart-positive: var(--dt-color-green-400);
|
|
812
757
|
--dt-color-chart-categorical-11-selected: oklch(0.19 0 67.6);
|
|
813
758
|
--dt-color-chart-categorical-11-hover: oklch(0.23 0 67.6);
|
|
814
|
-
--dt-color-chart-categorical-
|
|
815
|
-
--dt-color-chart-categorical-
|
|
816
|
-
--dt-color-chart-categorical-
|
|
817
|
-
--dt-color-chart-categorical-
|
|
818
|
-
--dt-color-chart-categorical-
|
|
819
|
-
--dt-color-chart-categorical-
|
|
820
|
-
--dt-color-chart-categorical-
|
|
821
|
-
--dt-color-chart-categorical-
|
|
822
|
-
--dt-color-chart-categorical-
|
|
823
|
-
--dt-color-chart-categorical-
|
|
824
|
-
--dt-color-chart-categorical-
|
|
825
|
-
--dt-color-chart-categorical-
|
|
826
|
-
--dt-color-chart-categorical-
|
|
759
|
+
--dt-color-chart-categorical-09-selected: var(--dt-color-red-700);
|
|
760
|
+
--dt-color-chart-categorical-09-hover: var(--dt-color-red-500);
|
|
761
|
+
--dt-color-chart-categorical-09: var(--dt-color-red-400);
|
|
762
|
+
--dt-color-chart-categorical-05-selected: var(--dt-color-green-500);
|
|
763
|
+
--dt-color-chart-categorical-05-hover: var(--dt-color-green-400);
|
|
764
|
+
--dt-color-chart-categorical-05: var(--dt-color-green-300);
|
|
765
|
+
--dt-color-chart-categorical-28: oklch(0.45 0.19 271);
|
|
766
|
+
--dt-color-chart-categorical-26: oklch(0.52 0.15 379);
|
|
767
|
+
--dt-color-chart-categorical-22: oklch(0.35 0.08 367);
|
|
768
|
+
--dt-color-chart-categorical-21: oklch(0.5 0.16 256);
|
|
769
|
+
--dt-color-chart-categorical-20: oklch(0.45 0.19 271);
|
|
770
|
+
--dt-color-chart-categorical-19: oklch(0.43 0.17 245);
|
|
771
|
+
--dt-color-chart-categorical-18: oklch(0.47 0.15 85.1);
|
|
772
|
+
--dt-color-chart-categorical-17: oklch(0.57 0.26 327);
|
|
773
|
+
--dt-color-chart-categorical-15: oklch(0.54 0.15 393);
|
|
774
|
+
--dt-color-chart-categorical-14: oklch(0.47 0.2 277);
|
|
775
|
+
--dt-color-chart-categorical-13: oklch(0.54 0.2 309);
|
|
776
|
+
--dt-color-chart-categorical-12: oklch(0.43 0.17 325);
|
|
777
|
+
--dt-color-border-positive-strong-inverted: var(--dt-color-green-200);
|
|
778
|
+
--dt-color-border-critical-strong-inverted: var(--dt-color-red-300);
|
|
779
|
+
--dt-color-border-positive-subtle-inverted: var(--dt-color-green-800);
|
|
780
|
+
--dt-color-border-critical-subtle-inverted: var(--dt-color-red-800);
|
|
781
|
+
--dt-color-border-positive-inverted: var(--dt-color-green-200);
|
|
782
|
+
--dt-color-border-critical-inverted: var(--dt-color-red-500);
|
|
783
|
+
--dt-color-border-positive-strong: var(--dt-color-green-800);
|
|
784
|
+
--dt-color-border-critical-strong: var(--dt-color-red-900);
|
|
785
|
+
--dt-color-border-positive-subtle: var(--dt-color-green-300);
|
|
786
|
+
--dt-color-border-critical-subtle: var(--dt-color-red-300);
|
|
787
|
+
--dt-color-border-positive: var(--dt-color-green-500);
|
|
788
|
+
--dt-color-border-critical: var(--dt-color-red-800);
|
|
789
|
+
--dt-color-surface-positive-subtle-opaque-inverted: oklch(0.98 0.01 200 / 0.66); /* Positive subtle surface as opaque background color. */
|
|
790
|
+
--dt-color-surface-critical-subtle-opaque-inverted: oklch(0.88 0.08 342 / 0.8);
|
|
791
|
+
--dt-color-surface-positive-opaque-inverted: oklch(0.91 0.05 200 / 0.3); /* Positive surface as opaque background color. */
|
|
792
|
+
--dt-color-surface-critical-opaque-inverted: oklch(0.82 0.13 344 / 0.5);
|
|
827
793
|
--dt-color-surface-primary-opaque-inverted: oklch(1 0 0 / 0.85); /* Secondary surface as opaque background color. */
|
|
828
|
-
--dt-color-surface-
|
|
794
|
+
--dt-color-surface-positive-strong-inverted: var(--dt-color-green-950); /* A contrasting positive state surface, most likely paired with inverted foreground colors. */
|
|
795
|
+
--dt-color-surface-critical-strong-inverted: var(--dt-color-red-500);
|
|
796
|
+
--dt-color-surface-positive-subtle-inverted: var(--dt-color-green-1000); /* A softer version of the default positive surface. */
|
|
797
|
+
--dt-color-surface-critical-subtle-inverted: var(--dt-color-red-1000); /* A softer version of the Critical surface. */
|
|
798
|
+
--dt-color-surface-positive-inverted: var(--dt-color-green-900); /* Background surface color containing messaging or elements expressing a positive or successful state. */
|
|
799
|
+
--dt-color-surface-critical-inverted: var(--dt-color-red-950); /* Background surface color containing error, danger, or otherwise critical messaging or elements. */
|
|
800
|
+
--dt-color-surface-success-subtle-opaque: oklch(0.14 0.03 205 / 0.6);
|
|
801
|
+
--dt-color-surface-positive-subtle-opaque: oklch(0.34 0.08 203 / 0.3);
|
|
802
|
+
--dt-color-surface-critical-subtle-opaque: oklch(0.14 0.06 345 / 0.6);
|
|
803
|
+
--dt-color-surface-positive-opaque: oklch(0.45 0.11 202 / 0.6);
|
|
804
|
+
--dt-color-surface-primary-opaque: oklch(0.21 0.01 91.6 / 0.9);
|
|
805
|
+
--dt-color-surface-positive-strong: var(--dt-color-green-700);
|
|
806
|
+
--dt-color-surface-critical-strong: var(--dt-color-red-800);
|
|
807
|
+
--dt-color-surface-positive-subtle: var(--dt-color-green-100);
|
|
808
|
+
--dt-color-surface-critical-subtle: oklch(0.11 0.09 350);
|
|
809
|
+
--dt-color-surface-positive: var(--dt-color-green-200);
|
|
810
|
+
--dt-color-surface-critical: var(--dt-color-red-200);
|
|
811
|
+
--dt-color-link-mention-inverted-background-hover: oklch(0.22 0.13 285 / 0.2);
|
|
812
|
+
--dt-color-link-mention-inverted-background: oklch(0.22 0.13 285 / 0.3);
|
|
813
|
+
--dt-color-link-mention-background-hover: oklch(0.22 0.13 285 / 0.25);
|
|
814
|
+
--dt-color-link-mention-background: oklch(0.22 0.13 285 / 0.15);
|
|
815
|
+
--dt-color-link-mention-hover: var(--dt-color-link-primary-hover);
|
|
816
|
+
--dt-color-link-mention: var(--dt-color-link-primary);
|
|
829
817
|
--dt-color-link-disabled-inverted: var(--dt-color-foreground-disabled-inverted);
|
|
830
818
|
--dt-color-link-muted-inverted: var(--dt-color-foreground-secondary-inverted);
|
|
831
819
|
--dt-color-link-info-inverted-hover: var(--dt-color-foreground-info-strong-inverted);
|
|
832
820
|
--dt-color-link-info-inverted: var(--dt-color-foreground-info-inverted);
|
|
833
821
|
--dt-color-link-warning-inverted: var(--dt-color-foreground-warning-inverted);
|
|
834
|
-
--dt-color-link-success-inverted-hover: var(--dt-color-foreground-positive-strong-inverted);
|
|
835
|
-
--dt-color-link-success-inverted: var(--dt-color-foreground-positive-inverted);
|
|
836
|
-
--dt-color-link-positive-inverted-hover: var(--dt-color-foreground-positive-strong-inverted);
|
|
837
|
-
--dt-color-link-positive-inverted: var(--dt-color-foreground-positive-inverted);
|
|
838
|
-
--dt-color-link-critical-inverted-hover: var(--dt-color-foreground-critical-strong-inverted);
|
|
839
|
-
--dt-color-link-critical-inverted: var(--dt-color-foreground-critical-inverted);
|
|
840
822
|
--dt-color-link-disabled: var(--dt-color-foreground-disabled);
|
|
841
823
|
--dt-color-link-muted-hover: var(--dt-color-foreground-primary);
|
|
842
824
|
--dt-color-link-muted: var(--dt-color-foreground-secondary);
|
|
843
|
-
--dt-color-link-info-hover: var(--dt-color-foreground-info-strong);
|
|
844
|
-
--dt-color-link-info: var(--dt-color-foreground-info);
|
|
845
825
|
--dt-color-link-warning: var(--dt-color-foreground-warning);
|
|
846
|
-
--dt-color-
|
|
847
|
-
--dt-color-
|
|
848
|
-
--dt-color-
|
|
849
|
-
--dt-color-
|
|
850
|
-
--dt-color-
|
|
851
|
-
--dt-color-
|
|
826
|
+
--dt-color-foreground-positive-strong-inverted: var(--dt-color-green-50);
|
|
827
|
+
--dt-color-foreground-positive-inverted: var(--dt-color-green-200);
|
|
828
|
+
--dt-color-foreground-critical-strong-inverted: var(--dt-color-red-200); /* Critical strong text that sits on high-contrast surfaces or backgrounds */
|
|
829
|
+
--dt-color-foreground-critical-inverted: var(--dt-color-red-500);
|
|
830
|
+
--dt-color-foreground-positive-strong: var(--dt-color-green-700);
|
|
831
|
+
--dt-color-foreground-positive: var(--dt-color-green-500);
|
|
832
|
+
--dt-color-foreground-critical-strong: var(--dt-color-red-900);
|
|
833
|
+
--dt-color-foreground-critical: var(--dt-color-red-800);
|
|
852
834
|
--dt-icon-size-border-500: var(--dt-icon-size-border-400);
|
|
853
|
-
--dt-
|
|
854
|
-
--dt-shell-
|
|
855
|
-
--dt-shell-
|
|
856
|
-
--dt-shell-action-color-background-muted-
|
|
857
|
-
--dt-shell-action-color-background-
|
|
858
|
-
--dt-shell-action-color-background-
|
|
859
|
-
--dt-shell-action-color-background-
|
|
860
|
-
--dt-shell-action-color-background-secondary-
|
|
861
|
-
--dt-shell-action-color-background-
|
|
862
|
-
--dt-shell-action-color-background-
|
|
863
|
-
--dt-shell-action-color-background-
|
|
864
|
-
--dt-shell-action-color-background-primary-
|
|
835
|
+
--dt-badge-color-background-success: var(--dt-badge-color-background-positive);
|
|
836
|
+
--dt-shell-presence-color-unavailable: var(--dt-presence-color-unavailable);
|
|
837
|
+
--dt-shell-presence-color-available: var(--dt-presence-color-available);
|
|
838
|
+
--dt-shell-action-color-background-muted-selected: oklch(0.86 0.01 84.6 / 0.07);
|
|
839
|
+
--dt-shell-action-color-background-muted-active: oklch(0.86 0.01 84.6 / 0.07);
|
|
840
|
+
--dt-shell-action-color-background-muted-hover: oklch(0.86 0.01 84.6 / 0.1);
|
|
841
|
+
--dt-shell-action-color-background-muted-default: oklch(0.86 0.01 84.6 / 0.05);
|
|
842
|
+
--dt-shell-action-color-background-secondary-selected: oklch(0.86 0.01 84.6 / 0.13);
|
|
843
|
+
--dt-shell-action-color-background-secondary-active: oklch(0.86 0.01 84.6 / 0.16);
|
|
844
|
+
--dt-shell-action-color-background-secondary-hover: oklch(0.86 0.01 84.6 / 0.1);
|
|
845
|
+
--dt-shell-action-color-background-secondary-default: oklch(0.86 0.01 84.6 / 0);
|
|
846
|
+
--dt-shell-action-color-background-primary-selected: oklch(0.86 0.01 84.6 / 0.13);
|
|
847
|
+
--dt-shell-action-color-background-primary-active: oklch(0.86 0.01 84.6 / 0.16);
|
|
848
|
+
--dt-shell-action-color-background-primary-hover: oklch(0.86 0.01 84.6 / 0.1);
|
|
849
|
+
--dt-shell-action-color-background-primary-default: oklch(0.86 0.01 84.6 / 0);
|
|
865
850
|
--dt-shell-action-color-foreground-muted-default: var(--dt-shell-color-foreground-muted);
|
|
866
851
|
--dt-shell-action-color-foreground-secondary-disabled: var(--dt-shell-color-foreground-disabled);
|
|
867
852
|
--dt-shell-action-color-foreground-primary-disabled: var(--dt-shell-color-foreground-disabled);
|
|
868
853
|
--dt-shell-action-color-foreground-tertiary-default: var(--dt-shell-color-foreground-tertiary);
|
|
869
854
|
--dt-shell-action-color-foreground-secondary-default: var(--dt-shell-color-foreground-secondary);
|
|
870
855
|
--dt-shell-action-color-foreground-primary-default: var(--dt-shell-color-foreground-secondary);
|
|
871
|
-
--dt-shell-color-
|
|
872
|
-
--dt-shell-color-foreground-
|
|
873
|
-
--dt-shell-color-foreground-
|
|
874
|
-
--dt-shell-color-
|
|
856
|
+
--dt-shell-color-surface-default: var(--dt-shell-base-color-surface);
|
|
857
|
+
--dt-shell-color-foreground-warning: oklch(0.93 0.16 71.7);
|
|
858
|
+
--dt-shell-color-foreground-strong: oklch(1.68 0 84.6);
|
|
859
|
+
--dt-shell-base-color-status-critical: var(--dt-color-foreground-critical);
|
|
860
|
+
--dt-shell-base-color-status-positive: var(--dt-color-foreground-positive);
|
|
861
|
+
--dt-shell-base-color-accent: var(--dt-badge-color-background-bulletin);
|
|
875
862
|
--dt-theme-sidebar-icon-color-foreground: var(--dt-theme-sidebar-color-foreground);
|
|
876
863
|
--dt-theme-sidebar-color-background: var(--dt-theme-topbar-color-background);
|
|
877
864
|
--dt-theme-topbar-profile-color-foreground: var(--dt-theme-topbar-color-foreground);
|
|
878
|
-
--dt-theme-topbar-field-color-background-hover: oklch(0.
|
|
879
|
-
--dt-action-color-
|
|
880
|
-
--dt-action-color-
|
|
881
|
-
--dt-action-color-
|
|
882
|
-
--dt-action-color-
|
|
865
|
+
--dt-theme-topbar-field-color-background-hover: oklch(0.17 0.01 78.2);
|
|
866
|
+
--dt-action-color-border-positive-outlined-default: var(--dt-color-border-positive);
|
|
867
|
+
--dt-action-color-border-critical-outlined-default: var(--dt-color-border-critical);
|
|
868
|
+
--dt-action-color-background-positive-primary-active: var(--dt-action-color-background-positive-primary-default);
|
|
869
|
+
--dt-action-color-background-positive-hover: var(--dt-color-surface-positive-opaque);
|
|
870
|
+
--dt-action-color-background-critical-primary-active: var(--dt-action-color-background-critical-primary-default);
|
|
871
|
+
--dt-action-color-background-critical-active: oklch(0.49 0.16 353 / 0.65);
|
|
883
872
|
--dt-action-color-foreground-muted-hover: var(--dt-color-link-muted-hover);
|
|
884
873
|
--dt-action-color-foreground-muted-default: var(--dt-color-link-muted);
|
|
885
874
|
--dt-action-color-foreground-inverted-primary-active: var(--dt-action-color-foreground-inverted-primary-hover);
|
|
886
875
|
--dt-action-color-foreground-inverted-hover: var(--dt-action-color-foreground-inverted-default);
|
|
887
|
-
--dt-action-color-foreground-critical-hover: var(--dt-color-link-critical-hover);
|
|
888
|
-
--dt-action-color-foreground-critical-default: var(--dt-color-link-critical);
|
|
889
876
|
--dt-action-color-foreground-base-active: var(--dt-action-color-foreground-base-hover);
|
|
890
|
-
--dt-inputs-color-border-
|
|
877
|
+
--dt-inputs-color-border-positive: var(--dt-color-border-positive);
|
|
878
|
+
--dt-inputs-color-border-critical: var(--dt-color-border-critical);
|
|
891
879
|
--dt-typography-button-xl-font-size: var(--dt-button-font-size-xl); /* Text style for extra large button */
|
|
892
880
|
--dt-typography-button-lg-font-size: var(--dt-button-font-size-lg); /* Text style for large button */
|
|
893
881
|
--dt-typography-button-md-font-size: var(--dt-button-font-size-md); /* Text style for medium button */
|
|
@@ -955,60 +943,102 @@
|
|
|
955
943
|
--dt-color-chart-sequential-03-hover: oklch(0.47 0.03 262); /* Hover state for third sequential chart color. */
|
|
956
944
|
--dt-color-chart-sequential-02-selected: oklch(0.51 0.03 278); /* Selected state for second sequential chart color. */
|
|
957
945
|
--dt-color-chart-sequential-02-hover: oklch(0.41 0.03 261); /* Hover state for second sequential chart color. */
|
|
958
|
-
--dt-color-chart-categorical-28-selected: oklch(0.
|
|
959
|
-
--dt-color-chart-categorical-28-hover: oklch(0.
|
|
960
|
-
--dt-color-chart-categorical-26-selected: oklch(0.
|
|
961
|
-
--dt-color-chart-categorical-26-hover: oklch(0.
|
|
962
|
-
--dt-color-chart-categorical-22-selected: oklch(0.
|
|
963
|
-
--dt-color-chart-categorical-22-hover: oklch(0.
|
|
964
|
-
--dt-color-chart-categorical-21-selected: oklch(0.
|
|
965
|
-
--dt-color-chart-categorical-21-hover: oklch(0.
|
|
966
|
-
--dt-color-chart-categorical-20-selected: oklch(0.
|
|
967
|
-
--dt-color-chart-categorical-20-hover: oklch(0.
|
|
968
|
-
--dt-color-chart-categorical-19-selected: oklch(0.
|
|
969
|
-
--dt-color-chart-categorical-19-hover: oklch(0.
|
|
970
|
-
--dt-color-chart-categorical-18-selected: oklch(0.
|
|
971
|
-
--dt-color-chart-categorical-18-hover: oklch(0.
|
|
972
|
-
--dt-color-chart-categorical-17-selected: oklch(0.4 0.26
|
|
973
|
-
--dt-color-chart-categorical-17-hover: oklch(0.48 0.26
|
|
974
|
-
--dt-color-chart-categorical-
|
|
975
|
-
--dt-color-chart-categorical-
|
|
976
|
-
--dt-color-chart-categorical-
|
|
977
|
-
--dt-color-chart-categorical-
|
|
978
|
-
--dt-color-chart-categorical-
|
|
979
|
-
--dt-color-chart-categorical-
|
|
980
|
-
--dt-color-chart-categorical-
|
|
981
|
-
--dt-color-chart-categorical-
|
|
982
|
-
--dt-color-chart-categorical-
|
|
983
|
-
--dt-color-chart-categorical-
|
|
984
|
-
--dt-color-chart-categorical-
|
|
985
|
-
--dt-color-chart-categorical-
|
|
986
|
-
--dt-color-chart-categorical-
|
|
987
|
-
--dt-color-chart-categorical-
|
|
988
|
-
--dt-color-
|
|
989
|
-
--dt-color-
|
|
946
|
+
--dt-color-chart-categorical-28-selected: oklch(0.32 0.19 271);
|
|
947
|
+
--dt-color-chart-categorical-28-hover: oklch(0.38 0.19 271);
|
|
948
|
+
--dt-color-chart-categorical-26-selected: oklch(0.36 0.15 379);
|
|
949
|
+
--dt-color-chart-categorical-26-hover: oklch(0.44 0.15 379);
|
|
950
|
+
--dt-color-chart-categorical-22-selected: oklch(0.24 0.08 367);
|
|
951
|
+
--dt-color-chart-categorical-22-hover: oklch(0.3 0.08 367);
|
|
952
|
+
--dt-color-chart-categorical-21-selected: oklch(0.35 0.16 256);
|
|
953
|
+
--dt-color-chart-categorical-21-hover: oklch(0.42 0.16 256);
|
|
954
|
+
--dt-color-chart-categorical-20-selected: oklch(0.32 0.19 271);
|
|
955
|
+
--dt-color-chart-categorical-20-hover: oklch(0.38 0.19 271);
|
|
956
|
+
--dt-color-chart-categorical-19-selected: oklch(0.3 0.17 245);
|
|
957
|
+
--dt-color-chart-categorical-19-hover: oklch(0.37 0.17 245);
|
|
958
|
+
--dt-color-chart-categorical-18-selected: oklch(0.33 0.15 85.1);
|
|
959
|
+
--dt-color-chart-categorical-18-hover: oklch(0.4 0.15 85.1);
|
|
960
|
+
--dt-color-chart-categorical-17-selected: oklch(0.4 0.26 327);
|
|
961
|
+
--dt-color-chart-categorical-17-hover: oklch(0.48 0.26 327);
|
|
962
|
+
--dt-color-chart-categorical-15-selected: oklch(0.38 0.15 393);
|
|
963
|
+
--dt-color-chart-categorical-15-hover: oklch(0.46 0.15 393);
|
|
964
|
+
--dt-color-chart-categorical-14-selected: oklch(0.33 0.2 277);
|
|
965
|
+
--dt-color-chart-categorical-14-hover: oklch(0.4 0.2 277);
|
|
966
|
+
--dt-color-chart-categorical-13-selected: oklch(0.38 0.2 309);
|
|
967
|
+
--dt-color-chart-categorical-13-hover: oklch(0.46 0.2 309);
|
|
968
|
+
--dt-color-chart-categorical-12-selected: oklch(0.3 0.17 325);
|
|
969
|
+
--dt-color-chart-categorical-12-hover: oklch(0.37 0.17 325);
|
|
970
|
+
--dt-color-chart-categorical-30: oklch(0.44 0.15 232);
|
|
971
|
+
--dt-color-chart-categorical-29: oklch(0.47 0.15 415);
|
|
972
|
+
--dt-color-chart-categorical-25: oklch(0.47 0.18 327);
|
|
973
|
+
--dt-color-chart-categorical-24: oklch(0.55 0.18 342);
|
|
974
|
+
--dt-color-chart-categorical-23: oklch(0.46 0.16 345);
|
|
975
|
+
--dt-color-chart-categorical-16: oklch(0.5 0.12 173);
|
|
976
|
+
--dt-color-border-success-strong-inverted: var(--dt-color-border-positive-strong-inverted);
|
|
977
|
+
--dt-color-border-success-subtle-inverted: var(--dt-color-border-positive-subtle-inverted);
|
|
978
|
+
--dt-color-border-success-inverted: var(--dt-color-border-positive-inverted);
|
|
979
|
+
--dt-color-border-success-strong: var(--dt-color-border-positive-strong);
|
|
980
|
+
--dt-color-border-success-subtle: var(--dt-color-border-positive-subtle);
|
|
981
|
+
--dt-color-border-success: var(--dt-color-border-positive);
|
|
982
|
+
--dt-color-surface-success-subtle-opaque-inverted: var(--dt-color-surface-positive-subtle-opaque-inverted); /* Success subtle surface as opaque background color. */
|
|
983
|
+
--dt-color-surface-success-opaque-inverted: var(--dt-color-surface-positive-opaque-inverted); /* Success surface as opaque background color. */
|
|
984
|
+
--dt-color-surface-success-subtle-inverted: var(--dt-color-surface-positive-subtle-inverted); /* A softer version of the default success surface. */
|
|
985
|
+
--dt-color-surface-success-inverted: var(--dt-color-surface-positive-inverted); /* Background surface color containing messaging or elements expressing a positive or successful state. */
|
|
986
|
+
--dt-color-surface-success-opaque: var(--dt-color-surface-positive-opaque);
|
|
987
|
+
--dt-color-surface-success-strong: var(--dt-color-surface-positive-strong);
|
|
988
|
+
--dt-color-surface-success-subtle: var(--dt-color-surface-positive-subtle);
|
|
989
|
+
--dt-color-surface-success: var(--dt-color-surface-positive); /* Background surface color containing messaging or elements expressing a positive or successful state. */
|
|
990
990
|
--dt-color-link-disabled-inverted-hover: var(--dt-color-link-disabled-inverted);
|
|
991
|
+
--dt-color-link-success-inverted-hover: var(--dt-color-foreground-positive-strong-inverted);
|
|
992
|
+
--dt-color-link-success-inverted: var(--dt-color-foreground-positive-inverted);
|
|
993
|
+
--dt-color-link-positive-inverted-hover: var(--dt-color-foreground-positive-strong-inverted);
|
|
994
|
+
--dt-color-link-positive-inverted: var(--dt-color-foreground-positive-inverted);
|
|
995
|
+
--dt-color-link-critical-inverted-hover: var(--dt-color-foreground-critical-strong-inverted);
|
|
996
|
+
--dt-color-link-critical-inverted: var(--dt-color-foreground-critical-inverted);
|
|
991
997
|
--dt-color-link-disabled-hover: var(--dt-color-link-disabled);
|
|
992
|
-
--dt-
|
|
993
|
-
--dt-
|
|
998
|
+
--dt-color-link-success-hover: var(--dt-color-foreground-positive-strong);
|
|
999
|
+
--dt-color-link-success: var(--dt-color-foreground-positive); /* positive */
|
|
1000
|
+
--dt-color-link-positive-hover: var(--dt-color-foreground-positive-strong);
|
|
1001
|
+
--dt-color-link-positive: var(--dt-color-foreground-positive); /* positive */
|
|
1002
|
+
--dt-color-link-critical-hover: var(--dt-color-foreground-critical-strong);
|
|
1003
|
+
--dt-color-link-critical: var(--dt-color-foreground-critical);
|
|
1004
|
+
--dt-color-foreground-success-strong-inverted: var(--dt-color-foreground-positive-strong-inverted);
|
|
1005
|
+
--dt-color-foreground-success-inverted: var(--dt-color-foreground-positive-inverted);
|
|
1006
|
+
--dt-color-foreground-success-strong: var(--dt-color-foreground-positive-strong);
|
|
1007
|
+
--dt-color-foreground-success: var(--dt-color-foreground-positive);
|
|
1008
|
+
--dt-avatar-anchor-hue: var(--dt-shell-base-color-accent); /* Theme accent color used to derive avatar anchor hue. Transformed to OKLCH hue degrees at build time. */
|
|
1009
|
+
--dt-shell-mention-color-surface-secondary: lch(90.1 17.1 298);
|
|
1010
|
+
--dt-shell-mention-color-surface-primary: var(--dt-shell-base-color-accent);
|
|
1011
|
+
--dt-shell-action-color-foreground-muted-selected: oklch(0.37 0 84.6 / 0.6);
|
|
1012
|
+
--dt-shell-action-color-foreground-muted-hover: oklch(0.56 0 84.6 / 0.6);
|
|
994
1013
|
--dt-shell-action-color-foreground-primary-strong: var(--dt-shell-color-foreground-strong);
|
|
995
|
-
--dt-
|
|
1014
|
+
--dt-shell-color-foreground-critical: oklch(0.9 0.16 345);
|
|
1015
|
+
--dt-shell-color-foreground-positive: var(--dt-shell-base-color-status-positive);
|
|
1016
|
+
--dt-action-color-background-positive-active: oklch(0.56 0.11 202 / 0.6);
|
|
1017
|
+
--dt-action-color-foreground-positive-hover: var(--dt-color-link-positive-hover);
|
|
1018
|
+
--dt-action-color-foreground-positive-default: var(--dt-color-link-positive);
|
|
996
1019
|
--dt-action-color-foreground-muted-active: var(--dt-action-color-foreground-muted-hover);
|
|
997
1020
|
--dt-action-color-foreground-inverted-active: var(--dt-action-color-foreground-inverted-hover);
|
|
998
|
-
--dt-action-color-foreground-critical-
|
|
999
|
-
--dt-color-
|
|
1000
|
-
--dt-color-
|
|
1001
|
-
--dt-color-chart-categorical-
|
|
1002
|
-
--dt-color-chart-categorical-
|
|
1003
|
-
--dt-color-chart-categorical-
|
|
1004
|
-
--dt-color-chart-categorical-
|
|
1005
|
-
--dt-color-chart-categorical-25-selected: oklch(0.
|
|
1006
|
-
--dt-color-chart-categorical-25-hover: oklch(0.
|
|
1007
|
-
--dt-color-chart-categorical-24-selected: oklch(0.
|
|
1008
|
-
--dt-color-chart-categorical-24-hover: oklch(0.
|
|
1009
|
-
--dt-color-chart-categorical-23-selected: oklch(0.
|
|
1010
|
-
--dt-color-chart-categorical-23-hover: oklch(0.
|
|
1021
|
+
--dt-action-color-foreground-critical-hover: var(--dt-color-link-critical-hover);
|
|
1022
|
+
--dt-action-color-foreground-critical-default: var(--dt-color-link-critical);
|
|
1023
|
+
--dt-inputs-color-border-success: var(--dt-inputs-color-border-positive);
|
|
1024
|
+
--dt-color-chart-categorical-30-selected: oklch(0.31 0.15 232);
|
|
1025
|
+
--dt-color-chart-categorical-30-hover: oklch(0.37 0.15 232);
|
|
1026
|
+
--dt-color-chart-categorical-29-selected: oklch(0.33 0.15 415);
|
|
1027
|
+
--dt-color-chart-categorical-29-hover: oklch(0.4 0.15 415);
|
|
1028
|
+
--dt-color-chart-categorical-25-selected: oklch(0.33 0.18 327);
|
|
1029
|
+
--dt-color-chart-categorical-25-hover: oklch(0.4 0.18 327);
|
|
1030
|
+
--dt-color-chart-categorical-24-selected: oklch(0.39 0.18 342);
|
|
1031
|
+
--dt-color-chart-categorical-24-hover: oklch(0.47 0.18 342);
|
|
1032
|
+
--dt-color-chart-categorical-23-selected: oklch(0.32 0.16 345);
|
|
1033
|
+
--dt-color-chart-categorical-23-hover: oklch(0.39 0.16 345);
|
|
1034
|
+
--dt-color-chart-categorical-16-selected: oklch(0.35 0.12 173);
|
|
1035
|
+
--dt-color-chart-categorical-16-hover: oklch(0.42 0.12 173);
|
|
1036
|
+
--dt-color-chart-categorical-27: oklch(0.47 0.14 199);
|
|
1011
1037
|
--dt-shell-action-color-foreground-muted-active: var(--dt-shell-action-color-foreground-muted-hover);
|
|
1038
|
+
--dt-action-color-foreground-positive-active: var(--dt-action-color-foreground-positive-hover);
|
|
1039
|
+
--dt-action-color-foreground-critical-active: var(--dt-action-color-foreground-critical-hover);
|
|
1040
|
+
--dt-color-chart-categorical-27-selected: oklch(0.33 0.14 199);
|
|
1041
|
+
--dt-color-chart-categorical-27-hover: oklch(0.4 0.14 199);
|
|
1012
1042
|
--dt-font-size-100-mobile: 1.2rem;
|
|
1013
1043
|
--dt-font-size-200-mobile: 1.6rem;
|
|
1014
1044
|
--dt-font-size-300-mobile: 2rem;
|