@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
|
@@ -100,8 +100,9 @@
|
|
|
100
100
|
--dt-theme-mention-color-background-strong: var(--dt-color-purple-900);
|
|
101
101
|
--dt-theme-mention-color-foreground: var(--dt-color-black-50);
|
|
102
102
|
--dt-theme-color-base: var(--dt-color-black-900);
|
|
103
|
-
--dt-action-color-background-positive-primary-
|
|
104
|
-
--dt-action-color-background-positive-primary-
|
|
103
|
+
--dt-action-color-background-positive-primary-active: var(--dt-color-green-800);
|
|
104
|
+
--dt-action-color-background-positive-primary-hover: var(--dt-color-green-700);
|
|
105
|
+
--dt-action-color-background-positive-primary-default: var(--dt-color-green-600); /* Postive, accepting, or success actions. */
|
|
105
106
|
--dt-action-color-background-positive-default: var(--dt-color-neutral-transparent);
|
|
106
107
|
--dt-action-color-background-muted-default: var(--dt-color-neutral-transparent);
|
|
107
108
|
--dt-action-color-background-inverted-primary-active: var(--dt-color-purple-200);
|
|
@@ -111,9 +112,9 @@
|
|
|
111
112
|
--dt-action-color-background-critical-primary-hover: var(--dt-color-red-600);
|
|
112
113
|
--dt-action-color-background-critical-primary-default: var(--dt-color-red-500);
|
|
113
114
|
--dt-action-color-background-critical-default: var(--dt-color-neutral-transparent);
|
|
114
|
-
--dt-action-color-background-base-primary-active: var(--dt-color-purple-
|
|
115
|
-
--dt-action-color-background-base-primary-hover: var(--dt-color-purple-
|
|
116
|
-
--dt-action-color-background-base-primary-default: var(--dt-color-purple-
|
|
115
|
+
--dt-action-color-background-base-primary-active: var(--dt-color-purple-700);
|
|
116
|
+
--dt-action-color-background-base-primary-hover: var(--dt-color-purple-600);
|
|
117
|
+
--dt-action-color-background-base-primary-default: var(--dt-color-purple-500);
|
|
117
118
|
--dt-action-color-background-base-default: var(--dt-color-neutral-transparent);
|
|
118
119
|
--dt-action-color-foreground-positive-primary-default: var(--dt-color-black-50);
|
|
119
120
|
--dt-action-color-foreground-critical-primary-default: var(--dt-color-black-50);
|
|
@@ -371,19 +372,16 @@
|
|
|
371
372
|
--dt-color-border-brand-strong-inverted: var(--dt-color-purple-200);
|
|
372
373
|
--dt-color-border-info-strong-inverted: var(--dt-color-blue-200);
|
|
373
374
|
--dt-color-border-warning-strong-inverted: var(--dt-color-gold-300);
|
|
374
|
-
--dt-color-border-success-strong-inverted: var(--dt-color-green-500);
|
|
375
375
|
--dt-color-border-positive-strong-inverted: var(--dt-color-green-500);
|
|
376
376
|
--dt-color-border-critical-strong-inverted: var(--dt-color-red-200);
|
|
377
377
|
--dt-color-border-brand-subtle-inverted: var(--dt-color-purple-600);
|
|
378
378
|
--dt-color-border-info-subtle-inverted: var(--dt-color-blue-900);
|
|
379
379
|
--dt-color-border-warning-subtle-inverted: var(--dt-color-gold-800);
|
|
380
|
-
--dt-color-border-success-subtle-inverted: var(--dt-color-green-900);
|
|
381
380
|
--dt-color-border-positive-subtle-inverted: var(--dt-color-green-900);
|
|
382
381
|
--dt-color-border-critical-subtle-inverted: var(--dt-color-red-900);
|
|
383
382
|
--dt-color-border-brand-inverted: var(--dt-color-purple-400);
|
|
384
383
|
--dt-color-border-info-inverted: var(--dt-color-blue-300);
|
|
385
384
|
--dt-color-border-warning-inverted: var(--dt-color-gold-500);
|
|
386
|
-
--dt-color-border-success-inverted: var(--dt-color-green-500);
|
|
387
385
|
--dt-color-border-positive-inverted: var(--dt-color-green-500);
|
|
388
386
|
--dt-color-border-critical-inverted: var(--dt-color-red-300);
|
|
389
387
|
--dt-color-border-bold-inverted: oklch(1 0 0 / 0.5);
|
|
@@ -393,39 +391,34 @@
|
|
|
393
391
|
--dt-color-border-brand-strong: var(--dt-color-purple-800);
|
|
394
392
|
--dt-color-border-info-strong: var(--dt-color-blue-800);
|
|
395
393
|
--dt-color-border-warning-strong: var(--dt-color-gold-700);
|
|
396
|
-
--dt-color-border-success-strong: var(--dt-color-green-900);
|
|
397
394
|
--dt-color-border-positive-strong: var(--dt-color-green-900);
|
|
398
395
|
--dt-color-border-critical-strong: var(--dt-color-red-800);
|
|
399
396
|
--dt-color-border-brand-subtle: var(--dt-color-purple-300);
|
|
400
397
|
--dt-color-border-info-subtle: var(--dt-color-blue-300);
|
|
401
398
|
--dt-color-border-warning-subtle: var(--dt-color-gold-300);
|
|
402
|
-
--dt-color-border-success-subtle: var(--dt-color-green-300);
|
|
403
399
|
--dt-color-border-positive-subtle: var(--dt-color-green-300);
|
|
404
400
|
--dt-color-border-critical-subtle: var(--dt-color-red-300);
|
|
405
401
|
--dt-color-border-brand: var(--dt-color-brand-purple);
|
|
406
402
|
--dt-color-border-info: var(--dt-color-blue-600);
|
|
407
403
|
--dt-color-border-warning: var(--dt-color-gold-500);
|
|
408
|
-
--dt-color-border-success: var(--dt-color-green-700);
|
|
409
404
|
--dt-color-border-positive: var(--dt-color-green-700);
|
|
410
405
|
--dt-color-border-critical: var(--dt-color-red-600);
|
|
411
|
-
--dt-color-border-bold: oklch(0.
|
|
412
|
-
--dt-color-border-moderate: oklch(0.
|
|
413
|
-
--dt-color-border-default: oklch(0.
|
|
414
|
-
--dt-color-border-subtle: oklch(0.
|
|
406
|
+
--dt-color-border-bold: oklch(0.26 0.01 78.2 / 0.5);
|
|
407
|
+
--dt-color-border-moderate: oklch(0.26 0.01 78.2 / 0.3);
|
|
408
|
+
--dt-color-border-default: oklch(0.26 0.01 78.2 / 0.17);
|
|
409
|
+
--dt-color-border-subtle: oklch(0.26 0.01 78.2 / 0.11);
|
|
415
410
|
--dt-color-surface-ai: var(--dt-color-gradient-gold-red-magenta-purple);
|
|
416
411
|
--dt-color-surface-backdrop: oklch(0 0 0 / 0.65); /* Background color for a modal-like backdrop. */
|
|
417
|
-
--dt-color-surface-brand-subtle-opaque-inverted: oklch(0.
|
|
418
|
-
--dt-color-surface-info-subtle-opaque-inverted: oklch(0.
|
|
419
|
-
--dt-color-surface-success-subtle-opaque-inverted: oklch(0.21 0.05 162 / 0.66); /* Success subtle surface as opaque background color. */
|
|
412
|
+
--dt-color-surface-brand-subtle-opaque-inverted: oklch(0.15 0.09 291 / 0.66); /* Info surface as opaque background color. */
|
|
413
|
+
--dt-color-surface-info-subtle-opaque-inverted: oklch(0.16 0.05 252 / 0.66); /* Info surface as opaque background color. */
|
|
420
414
|
--dt-color-surface-positive-subtle-opaque-inverted: oklch(0.21 0.05 162 / 0.66); /* Positive subtle surface as opaque background color. */
|
|
421
|
-
--dt-color-surface-warning-subtle-opaque-inverted: oklch(0.
|
|
422
|
-
--dt-color-surface-critical-subtle-opaque-inverted: oklch(0.17 0.07
|
|
423
|
-
--dt-color-surface-brand-opaque-inverted: oklch(0.
|
|
424
|
-
--dt-color-surface-info-opaque-inverted: oklch(0.
|
|
425
|
-
--dt-color-surface-success-opaque-inverted: oklch(0.34 0.08 157 / 0.3); /* Success surface as opaque background color. */
|
|
415
|
+
--dt-color-surface-warning-subtle-opaque-inverted: oklch(0.18 0.04 77.5 / 0.3); /* Warning subtle surface as opaque background color */
|
|
416
|
+
--dt-color-surface-critical-subtle-opaque-inverted: oklch(0.17 0.07 8 / 0.6); /* Critical subtle surface as opaque background color. */
|
|
417
|
+
--dt-color-surface-brand-opaque-inverted: oklch(0.22 0.13 285 / 0.8); /* Info surface as opaque background color. */
|
|
418
|
+
--dt-color-surface-info-opaque-inverted: oklch(0.26 0.09 258 / 0.6); /* Info surface as opaque background color. */
|
|
426
419
|
--dt-color-surface-positive-opaque-inverted: oklch(0.34 0.08 157 / 0.3); /* Positive surface as opaque background color. */
|
|
427
|
-
--dt-color-surface-warning-opaque-inverted: oklch(0.
|
|
428
|
-
--dt-color-surface-critical-opaque-inverted: oklch(0.
|
|
420
|
+
--dt-color-surface-warning-opaque-inverted: oklch(0.32 0.07 64.8 / 0.35); /* Warning surface as opaque background color */
|
|
421
|
+
--dt-color-surface-critical-opaque-inverted: oklch(0.31 0.13 14.7 / 0.5); /* Critical surface as opaque background color. */
|
|
429
422
|
--dt-color-surface-contrast-opaque-inverted: oklch(1 0 0 / 0.97); /* Contrast surface as opaque background color. */
|
|
430
423
|
--dt-color-surface-strong-opaque-inverted: oklch(1 0 0 / 0.67); /* Strong surface as opaque background color. */
|
|
431
424
|
--dt-color-surface-bold-opaque-inverted: oklch(1 0 0 / 0.32); /* Bold surface as opaque background color. */
|
|
@@ -438,13 +431,11 @@
|
|
|
438
431
|
--dt-color-surface-critical-strong-inverted: var(--dt-color-red-300); /* A contrasting critical surface, most likely paired with inverted foreground colors. */
|
|
439
432
|
--dt-color-surface-brand-subtle-inverted: var(--dt-color-purple-1000); /* A softer version of the default informational surface. */
|
|
440
433
|
--dt-color-surface-info-subtle-inverted: var(--dt-color-blue-1000); /* A softer version of the default informational surface. */
|
|
441
|
-
--dt-color-surface-success-subtle-inverted: var(--dt-color-green-1000); /* A softer version of the default success surface. */
|
|
442
434
|
--dt-color-surface-positive-subtle-inverted: var(--dt-color-green-1000); /* A softer version of the default positive surface. */
|
|
443
435
|
--dt-color-surface-warning-subtle-inverted: var(--dt-color-gold-1000); /* A softer version of the default warning surface. */
|
|
444
436
|
--dt-color-surface-critical-subtle-inverted: var(--dt-color-red-1000); /* A softer version of the Critical surface. */
|
|
445
437
|
--dt-color-surface-brand-inverted: var(--dt-color-purple-950); /* Background surface color containing messaging or elements communicated as generally informational. */
|
|
446
438
|
--dt-color-surface-info-inverted: var(--dt-color-blue-950); /* Background surface color containing messaging or elements communicated as generally informational. */
|
|
447
|
-
--dt-color-surface-success-inverted: var(--dt-color-green-900); /* Background surface color containing messaging or elements expressing a positive or successful state. */
|
|
448
439
|
--dt-color-surface-positive-inverted: var(--dt-color-green-900); /* Background surface color containing messaging or elements expressing a positive or successful state. */
|
|
449
440
|
--dt-color-surface-warning-inverted: var(--dt-color-gold-950); /* Background surface color highlighting messaging or elements that may require user's attention. */
|
|
450
441
|
--dt-color-surface-critical-inverted: var(--dt-color-red-950); /* Background surface color containing error, danger, or otherwise critical messaging or elements. */
|
|
@@ -454,38 +445,33 @@
|
|
|
454
445
|
--dt-color-surface-moderate-inverted: var(--dt-color-black-700); /* A tertiary surface level, prominent without being too overpowering. */
|
|
455
446
|
--dt-color-surface-secondary-inverted: var(--dt-color-black-800); /* For adjacent or complementary regions. */
|
|
456
447
|
--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. */
|
|
457
|
-
--dt-color-surface-brand-subtle-opaque: oklch(0.
|
|
458
|
-
--dt-color-surface-info-subtle-opaque: oklch(0.
|
|
459
|
-
--dt-color-surface-success-subtle-opaque: oklch(0.96 0.06 167 / 0.5); /* Success subtle surface as opaque background color. */
|
|
448
|
+
--dt-color-surface-brand-subtle-opaque: oklch(0.85 0.09 301 / 0.2); /* Info surface as opaque background color. */
|
|
449
|
+
--dt-color-surface-info-subtle-opaque: oklch(0.9 0.05 257 / 0.5); /* Info surface as opaque background color. */
|
|
460
450
|
--dt-color-surface-positive-subtle-opaque: oklch(0.96 0.06 167 / 0.5); /* Positive subtle surface as opaque background color. */
|
|
461
|
-
--dt-color-surface-warning-subtle-opaque: oklch(0.
|
|
462
|
-
--dt-color-surface-critical-subtle-opaque: oklch(0.
|
|
463
|
-
--dt-color-surface-brand-opaque: oklch(0.
|
|
464
|
-
--dt-color-surface-info-opaque: oklch(0.
|
|
465
|
-
--dt-color-surface-success-opaque: oklch(0.79 0.17 159 / 0.25); /* Success surface as opaque background color. */
|
|
451
|
+
--dt-color-surface-warning-subtle-opaque: oklch(0.94 0.05 77.3 / 0.5); /* Warning subtle surface as opaque background color */
|
|
452
|
+
--dt-color-surface-critical-subtle-opaque: oklch(0.88 0.07 17.3 / 0.5); /* Critical subtle surface as opaque background color. */
|
|
453
|
+
--dt-color-surface-brand-opaque: oklch(0.85 0.09 301 / 0.39); /* Info surface as opaque background color. */
|
|
454
|
+
--dt-color-surface-info-opaque: oklch(0.84 0.08 257 / 0.35); /* Info surface as opaque background color. */
|
|
466
455
|
--dt-color-surface-positive-opaque: oklch(0.79 0.17 159 / 0.25); /* Positive surface as opaque background color. */
|
|
467
|
-
--dt-color-surface-warning-opaque: oklch(0.
|
|
468
|
-
--dt-color-surface-critical-opaque: oklch(0.82 0.
|
|
469
|
-
--dt-color-surface-contrast-opaque: oklch(0.
|
|
470
|
-
--dt-color-surface-strong-opaque: oklch(0.
|
|
471
|
-
--dt-color-surface-bold-opaque: oklch(0.
|
|
472
|
-
--dt-color-surface-moderate-opaque: oklch(0.
|
|
473
|
-
--dt-color-surface-secondary-opaque: oklch(0.
|
|
456
|
+
--dt-color-surface-warning-opaque: oklch(0.9 0.09 77.6 / 0.5); /* Warning surface as opaque background color */
|
|
457
|
+
--dt-color-surface-critical-opaque: oklch(0.82 0.1 12.7 / 0.31); /* Critical surface as opaque background color. */
|
|
458
|
+
--dt-color-surface-contrast-opaque: oklch(0.26 0.01 78.2 / 0.94); /* Contrast surface as opaque background color. */
|
|
459
|
+
--dt-color-surface-strong-opaque: oklch(0.26 0.01 78.2 / 0.76); /* Strong surface as opaque background color. */
|
|
460
|
+
--dt-color-surface-bold-opaque: oklch(0.26 0.01 78.2 / 0.19); /* Bold surface as opaque background color. */
|
|
461
|
+
--dt-color-surface-moderate-opaque: oklch(0.26 0.01 78.2 / 0.1); /* Moderate surface as opaque background color. */
|
|
462
|
+
--dt-color-surface-secondary-opaque: oklch(0.26 0.01 78.2 / 0.02); /* Secondary surface as opaque background color. */
|
|
474
463
|
--dt-color-surface-brand-strong: var(--dt-color-purple-600); /* A contrasting informational surface, most likely paired with inverted foreground colors. */
|
|
475
|
-
--dt-color-surface-info-strong: var(--dt-color-blue-
|
|
476
|
-
--dt-color-surface-
|
|
477
|
-
--dt-color-surface-
|
|
478
|
-
--dt-color-surface-warning-strong: var(--dt-color-gold-400); /* A contrasting warning surface, most likely paired with inverted foreground colors. */
|
|
464
|
+
--dt-color-surface-info-strong: var(--dt-color-blue-600); /* A contrasting informational surface, most likely paired with inverted foreground colors. */
|
|
465
|
+
--dt-color-surface-positive-strong: var(--dt-color-green-600); /* A contrasting positive state surface, most likely paired with inverted foreground colors. */
|
|
466
|
+
--dt-color-surface-warning-strong: var(--dt-color-gold-500); /* A contrasting warning surface, most likely paired with inverted foreground colors. */
|
|
479
467
|
--dt-color-surface-critical-strong: var(--dt-color-red-600); /* A contrasting critical surface, most likely paired with inverted foreground colors. */
|
|
480
468
|
--dt-color-surface-brand-subtle: var(--dt-color-purple-50); /* A softer version of the default informational surface. */
|
|
481
469
|
--dt-color-surface-info-subtle: var(--dt-color-blue-50); /* A softer version of the default informational surface. */
|
|
482
|
-
--dt-color-surface-success-subtle: var(--dt-color-green-50); /* A softer version of the default success surface. */
|
|
483
470
|
--dt-color-surface-positive-subtle: var(--dt-color-green-50); /* A softer version of the default positive surface. */
|
|
484
471
|
--dt-color-surface-warning-subtle: var(--dt-color-gold-50); /* A softer version of the default warning surface. */
|
|
485
472
|
--dt-color-surface-critical-subtle: var(--dt-color-red-50); /* A softer version of the Critical surface. */
|
|
486
473
|
--dt-color-surface-brand: var(--dt-color-purple-100); /* Background surface color containing messaging or elements communicated as generally informational. */
|
|
487
474
|
--dt-color-surface-info: var(--dt-color-blue-100); /* Background surface color containing messaging or elements communicated as generally informational. */
|
|
488
|
-
--dt-color-surface-success: var(--dt-color-green-100); /* Background surface color containing messaging or elements expressing a positive or successful state. */
|
|
489
475
|
--dt-color-surface-positive: var(--dt-color-green-100); /* Background surface color containing messaging or elements expressing a positive or successful state. */
|
|
490
476
|
--dt-color-surface-warning: var(--dt-color-gold-100); /* Background surface color highlighting messaging or elements that may require user's attention. */
|
|
491
477
|
--dt-color-surface-critical: var(--dt-color-red-100); /* Background surface color containing error, danger, or otherwise critical messaging or elements. */
|
|
@@ -499,36 +485,34 @@
|
|
|
499
485
|
--dt-color-link-warning-inverted-hover: var(--dt-color-gold-300);
|
|
500
486
|
--dt-color-link-primary-inverted-hover: var(--dt-color-purple-200);
|
|
501
487
|
--dt-color-link-primary-inverted: var(--dt-color-purple-200);
|
|
488
|
+
--dt-color-link-info-hover: var(--dt-color-blue-700);
|
|
489
|
+
--dt-color-link-info: var(--dt-color-blue-600);
|
|
502
490
|
--dt-color-link-warning-hover: var(--dt-color-gold-900);
|
|
503
491
|
--dt-color-link-primary-hover: var(--dt-color-purple-800);
|
|
504
492
|
--dt-color-link-primary: var(--dt-color-purple-600);
|
|
505
493
|
--dt-color-foreground-info-strong-inverted: var(--dt-color-blue-200); /* Info strong text that sits on high-contrast surfaces or backgrounds. */
|
|
506
494
|
--dt-color-foreground-info-inverted: var(--dt-color-blue-300); /* Info text that sits on high-contrast surfaces or backgrounds. */
|
|
507
495
|
--dt-color-foreground-warning-inverted: var(--dt-color-gold-500); /* Warning text that sits on high-contrast surfaces or backgrounds */
|
|
508
|
-
--dt-color-foreground-success-strong-inverted: var(--dt-color-green-50); /* Success strong text that sits on high-contrast surfaces or backgrounds. */
|
|
509
|
-
--dt-color-foreground-success-inverted: var(--dt-color-green-200); /* Success text that sits on high-contrast surfaces or backgrounds. */
|
|
510
496
|
--dt-color-foreground-positive-strong-inverted: var(--dt-color-green-50); /* Positive strong text that sits on high-contrast surfaces or backgrounds. */
|
|
511
497
|
--dt-color-foreground-positive-inverted: var(--dt-color-green-200); /* Positive text that sits on high-contrast surfaces or backgrounds. */
|
|
512
498
|
--dt-color-foreground-critical-strong-inverted: var(--dt-color-red-200); /* Critical strong text that sits on high-contrast surfaces or backgrounds */
|
|
513
499
|
--dt-color-foreground-critical-inverted: var(--dt-color-red-300); /* Critical text that sits on high-contrast surfaces or backgrounds */
|
|
514
500
|
--dt-color-foreground-disabled-inverted: var(--dt-color-black-400); /* Disabled text color that sits on high-contrast surfaces or backgrounds. */
|
|
515
501
|
--dt-color-foreground-placeholder-inverted: var(--dt-color-black-400); /* Placeholder text color that sits on high-contrast surfaces or backgrounds. */
|
|
516
|
-
--dt-color-foreground-muted-inverted: oklch(0.98 0
|
|
502
|
+
--dt-color-foreground-muted-inverted: oklch(0.98 0 48.7 / 0.65); /* Muted text color that sits on high-contrast surfaces or backgrounds. */
|
|
517
503
|
--dt-color-foreground-tertiary-inverted: var(--dt-color-black-300); /* Tertiary text color that sits on high-contrast surfaces or backgrounds. */
|
|
518
504
|
--dt-color-foreground-secondary-inverted: var(--dt-color-black-200); /* Secondary text color that sits on high-contrast surfaces or backgrounds. */
|
|
519
505
|
--dt-color-foreground-primary-inverted: var(--dt-color-black-100); /* Primary text that sits on high-contrast surfaces or backgrounds. */
|
|
520
506
|
--dt-color-foreground-info-strong: var(--dt-color-blue-900); /* Indicates a generally informational state on surfaces that require a stronger contrast. */
|
|
521
507
|
--dt-color-foreground-info: var(--dt-color-blue-800); /* Indicates a generally informational state. */
|
|
522
508
|
--dt-color-foreground-warning: var(--dt-color-gold-800); /* Indicates information that requires user’s attention and further action may be necessary. */
|
|
523
|
-
--dt-color-foreground-success-strong: var(--dt-color-green-950); /* Indicates a strong positive state on surfaces that require a stronger contrast. */
|
|
524
|
-
--dt-color-foreground-success: var(--dt-color-green-700); /* Indicates a positive state. */
|
|
525
509
|
--dt-color-foreground-positive-strong: var(--dt-color-green-950); /* Indicates a strong positive state on surfaces that require a stronger contrast. */
|
|
526
510
|
--dt-color-foreground-positive: var(--dt-color-green-700); /* Indicates a positive state. */
|
|
527
511
|
--dt-color-foreground-critical-strong: var(--dt-color-red-700); /* Expresses an error, danger, or otherwise critical state on surfaces that require a stronger contrast. */
|
|
528
512
|
--dt-color-foreground-critical: var(--dt-color-red-600); /* Expresses an error, danger, or otherwise critical state. */
|
|
529
513
|
--dt-color-foreground-disabled: var(--dt-color-black-500); /* Used for text paired with disabled content or components, like the form elements. */
|
|
530
514
|
--dt-color-foreground-placeholder: var(--dt-color-black-500); /* Text color for placeholder text within form elements. */
|
|
531
|
-
--dt-color-foreground-muted: oklch(0 0
|
|
515
|
+
--dt-color-foreground-muted: oklch(0.16 0 84.6 / 0.5);
|
|
532
516
|
--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. */
|
|
533
517
|
--dt-color-foreground-secondary: var(--dt-color-black-700); /* Example uses include introduction paragraphs, labels, and descriptions paired with form elements. */
|
|
534
518
|
--dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
|
|
@@ -567,13 +551,13 @@
|
|
|
567
551
|
--dt-shell-presence-color-unavailable: var(--dt-presence-color-unavailable);
|
|
568
552
|
--dt-shell-presence-color-available: var(--dt-presence-color-available);
|
|
569
553
|
--dt-shell-logo-color-star: var(--dt-color-surface-brand-strong);
|
|
570
|
-
--dt-shell-color-border-default: oklch(0.
|
|
571
|
-
--dt-shell-color-border-subtle: oklch(0.
|
|
572
|
-
--dt-shell-color-foreground-disabled: oklch(0.
|
|
573
|
-
--dt-shell-color-foreground-muted: oklch(0.
|
|
574
|
-
--dt-shell-color-foreground-strong: oklch(0.
|
|
575
|
-
--dt-shell-color-foreground-tertiary: oklch(0.
|
|
576
|
-
--dt-shell-color-foreground-secondary: oklch(0.
|
|
554
|
+
--dt-shell-color-border-default: oklch(0.26 0.01 78.2 / 0.17);
|
|
555
|
+
--dt-shell-color-border-subtle: oklch(0.26 0.01 78.2 / 0.1);
|
|
556
|
+
--dt-shell-color-foreground-disabled: oklch(0.26 0.01 78.2 / 0.57);
|
|
557
|
+
--dt-shell-color-foreground-muted: oklch(0.26 0.01 78.2 / 0.6);
|
|
558
|
+
--dt-shell-color-foreground-strong: oklch(0.26 0.01 78.2);
|
|
559
|
+
--dt-shell-color-foreground-tertiary: oklch(0.26 0.01 78.2 / 0.72);
|
|
560
|
+
--dt-shell-color-foreground-secondary: oklch(0.26 0.01 78.2 / 0.86);
|
|
577
561
|
--dt-shell-color-foreground-primary: var(--dt-shell-base-color-foreground);
|
|
578
562
|
--dt-shell-base-action-color-background-muted: var(--dt-shell-base-color-action);
|
|
579
563
|
--dt-shell-base-action-color-background-secondary: var(--dt-shell-base-color-action);
|
|
@@ -589,39 +573,38 @@
|
|
|
589
573
|
--dt-theme-presence-color-background-busy-unavailable: var(--dt-presence-color-unavailable);
|
|
590
574
|
--dt-theme-presence-color-background-available: var(--dt-presence-color-available);
|
|
591
575
|
--dt-theme-sidebar-section-color-foreground: var(--dt-color-foreground-tertiary);
|
|
592
|
-
--dt-theme-sidebar-selected-row-color-background: oklch(0.
|
|
576
|
+
--dt-theme-sidebar-selected-row-color-background: oklch(0.26 0.01 78.2 / 0.09);
|
|
593
577
|
--dt-theme-sidebar-selected-row-color-foreground: var(--dt-color-foreground-primary);
|
|
594
|
-
--dt-theme-sidebar-row-color-background-active: oklch(0.
|
|
595
|
-
--dt-theme-sidebar-row-color-background-hover: oklch(0.
|
|
596
|
-
--dt-theme-sidebar-row-color-background: oklch(0.
|
|
578
|
+
--dt-theme-sidebar-row-color-background-active: oklch(0.26 0.01 78.2 / 0.15);
|
|
579
|
+
--dt-theme-sidebar-row-color-background-hover: oklch(0.26 0.01 78.2 / 0.11);
|
|
580
|
+
--dt-theme-sidebar-row-color-background: oklch(0.26 0.01 78.2 / 0);
|
|
597
581
|
--dt-theme-sidebar-status-color-foreground: var(--dt-color-foreground-tertiary);
|
|
598
582
|
--dt-theme-sidebar-color-foreground-unread: var(--dt-color-foreground-primary);
|
|
599
583
|
--dt-theme-sidebar-color-foreground: var(--dt-color-foreground-secondary);
|
|
600
|
-
--dt-theme-topbar-profile-color-background-active: oklch(0.
|
|
601
|
-
--dt-theme-topbar-profile-color-background-hover: oklch(0.
|
|
602
|
-
--dt-theme-topbar-profile-color-background-inverted: oklch(0.
|
|
603
|
-
--dt-theme-topbar-profile-color-background: oklch(0.
|
|
604
|
-
--dt-theme-topbar-profile-color-foreground-inverted: oklch(0.98 0
|
|
605
|
-
--dt-theme-topbar-button-color-background-active: oklch(0.
|
|
606
|
-
--dt-theme-topbar-button-color-background-hover: oklch(0.
|
|
607
|
-
--dt-theme-topbar-button-color-background: oklch(0.
|
|
584
|
+
--dt-theme-topbar-profile-color-background-active: oklch(0.26 0.01 78.2 / 0.14);
|
|
585
|
+
--dt-theme-topbar-profile-color-background-hover: oklch(0.26 0.01 78.2 / 0.1);
|
|
586
|
+
--dt-theme-topbar-profile-color-background-inverted: oklch(0.26 0.01 78.2 / 0.75);
|
|
587
|
+
--dt-theme-topbar-profile-color-background: oklch(0.26 0.01 78.2 / 0.05);
|
|
588
|
+
--dt-theme-topbar-profile-color-foreground-inverted: oklch(0.98 0 48.7 / 0.75);
|
|
589
|
+
--dt-theme-topbar-button-color-background-active: oklch(0.26 0.01 78.2 / 0.1);
|
|
590
|
+
--dt-theme-topbar-button-color-background-hover: oklch(0.26 0.01 78.2 / 0.05);
|
|
591
|
+
--dt-theme-topbar-button-color-background: oklch(0.26 0.01 78.2 / 0);
|
|
608
592
|
--dt-theme-topbar-button-color-foreground-hover: var(--dt-theme-color-base);
|
|
609
|
-
--dt-theme-topbar-button-color-foreground: oklch(0.
|
|
610
|
-
--dt-theme-topbar-field-color-border-active: oklch(0.
|
|
611
|
-
--dt-theme-topbar-field-color-border-hover: oklch(0.
|
|
612
|
-
--dt-theme-topbar-field-color-border: oklch(0.
|
|
613
|
-
--dt-theme-topbar-field-color-background-hover: oklch(0.
|
|
614
|
-
--dt-theme-topbar-field-color-background: oklch(0.
|
|
615
|
-
--dt-theme-topbar-field-color-foreground-hover: oklch(0.
|
|
616
|
-
--dt-theme-topbar-field-color-foreground: oklch(0.
|
|
593
|
+
--dt-theme-topbar-button-color-foreground: oklch(0.26 0.01 78.2 / 0.65);
|
|
594
|
+
--dt-theme-topbar-field-color-border-active: oklch(0.26 0.01 78.2 / 0.2);
|
|
595
|
+
--dt-theme-topbar-field-color-border-hover: oklch(0.26 0.01 78.2 / 0.1);
|
|
596
|
+
--dt-theme-topbar-field-color-border: oklch(0.26 0.01 78.2 / 0);
|
|
597
|
+
--dt-theme-topbar-field-color-background-hover: oklch(0.51 0.01 78.2);
|
|
598
|
+
--dt-theme-topbar-field-color-background: oklch(0.26 0.01 78.2 / 0.05);
|
|
599
|
+
--dt-theme-topbar-field-color-foreground-hover: oklch(0.26 0.01 78.2 / 0.75);
|
|
600
|
+
--dt-theme-topbar-field-color-foreground: oklch(0.26 0.01 78.2 / 0.5);
|
|
617
601
|
--dt-theme-topbar-color-background: var(--dt-color-surface-secondary);
|
|
618
|
-
--dt-theme-topbar-color-foreground: oklch(0.
|
|
602
|
+
--dt-theme-topbar-color-foreground: oklch(0.26 0.01 78.2 / 0.8);
|
|
619
603
|
--dt-action-color-border-positive-outlined-default: var(--dt-color-border-positive);
|
|
620
604
|
--dt-action-color-border-muted-outlined-default: var(--dt-color-border-default);
|
|
621
605
|
--dt-action-color-border-inverted-outlined-default: var(--dt-color-border-default-inverted);
|
|
622
606
|
--dt-action-color-border-critical-outlined-default: var(--dt-color-border-critical);
|
|
623
607
|
--dt-action-color-border-base-outlined-default: var(--dt-color-border-brand);
|
|
624
|
-
--dt-action-color-background-positive-primary-active: oklch(0.38 0.1 156);
|
|
625
608
|
--dt-action-color-background-positive-hover: var(--dt-color-surface-positive-opaque);
|
|
626
609
|
--dt-action-color-background-disabled-default: var(--dt-color-surface-bold-opaque);
|
|
627
610
|
--dt-action-color-background-muted-hover: var(--dt-color-surface-moderate-opaque);
|
|
@@ -762,8 +745,8 @@
|
|
|
762
745
|
--dt-typography-body-md-font-family: var(--dt-font-family-expressive); /* Base default medium text style for main content. */
|
|
763
746
|
--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. */
|
|
764
747
|
--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. */
|
|
765
|
-
--dt-color-chart-sequential-10-selected: oklch(0.
|
|
766
|
-
--dt-color-chart-sequential-10-hover: oklch(0.
|
|
748
|
+
--dt-color-chart-sequential-10-selected: oklch(0.28 0.05 193); /* Selected state for tenth sequential chart color. */
|
|
749
|
+
--dt-color-chart-sequential-10-hover: oklch(0.31 0.06 217); /* Hover state for tenth sequential chart color. */
|
|
767
750
|
--dt-color-chart-sequential-09: oklch(0.39 0.06 243); /* Ninth color in sequential chart series, extremely dark shade. */
|
|
768
751
|
--dt-color-chart-sequential-08: oklch(0.46 0.06 246); /* Eighth color in sequential chart series, very dark shade. */
|
|
769
752
|
--dt-color-chart-sequential-07: oklch(0.54 0.05 249); /* Seventh color in sequential chart series, dark shade. */
|
|
@@ -772,25 +755,46 @@
|
|
|
772
755
|
--dt-color-chart-sequential-04: oklch(0.75 0.03 258); /* Fourth color in sequential chart series, light-medium shade. */
|
|
773
756
|
--dt-color-chart-sequential-03: oklch(0.82 0.02 261); /* Third color in sequential chart series, light shade. */
|
|
774
757
|
--dt-color-chart-sequential-02: oklch(0.89 0.02 264); /* Second color in sequential chart series, very light shade. */
|
|
775
|
-
--dt-color-chart-sequential-01-selected: oklch(0.
|
|
776
|
-
--dt-color-chart-sequential-01-hover: oklch(0.
|
|
758
|
+
--dt-color-chart-sequential-01-selected: oklch(0.72 0.01 320); /* Selected state for first sequential chart color. */
|
|
759
|
+
--dt-color-chart-sequential-01-hover: oklch(0.84 0.01 293); /* Hover state for first sequential chart color. */
|
|
777
760
|
--dt-color-chart-categorical-11-selected: oklch(0.59 0.01 56.3);
|
|
778
761
|
--dt-color-chart-categorical-11-hover: oklch(0.71 0.01 56.3);
|
|
779
|
-
--dt-color-chart-categorical-28: oklch(0.
|
|
780
|
-
--dt-color-chart-categorical-26: oklch(0.
|
|
781
|
-
--dt-color-chart-categorical-22: oklch(0.
|
|
782
|
-
--dt-color-chart-categorical-21: oklch(0.
|
|
783
|
-
--dt-color-chart-categorical-20: oklch(0.
|
|
784
|
-
--dt-color-chart-categorical-19: oklch(0.
|
|
785
|
-
--dt-color-chart-categorical-18: oklch(0.
|
|
786
|
-
--dt-color-chart-categorical-17: oklch(0.74 0.21
|
|
762
|
+
--dt-color-chart-categorical-28: oklch(0.64 0.21 273);
|
|
763
|
+
--dt-color-chart-categorical-26: oklch(0.72 0.19 385);
|
|
764
|
+
--dt-color-chart-categorical-22: oklch(0.77 0.09 362);
|
|
765
|
+
--dt-color-chart-categorical-21: oklch(0.67 0.17 119);
|
|
766
|
+
--dt-color-chart-categorical-20: oklch(0.64 0.21 273);
|
|
767
|
+
--dt-color-chart-categorical-19: oklch(0.62 0.21 244);
|
|
768
|
+
--dt-color-chart-categorical-18: oklch(0.78 0.14 86.6);
|
|
769
|
+
--dt-color-chart-categorical-17: oklch(0.74 0.21 343);
|
|
787
770
|
--dt-color-chart-categorical-16: oklch(0.66 0.15 140);
|
|
788
|
-
--dt-color-chart-categorical-15: oklch(0.
|
|
789
|
-
--dt-color-chart-categorical-14: oklch(0.
|
|
790
|
-
--dt-color-chart-categorical-13: oklch(0.68 0.
|
|
791
|
-
--dt-color-chart-categorical-12: oklch(0.
|
|
792
|
-
--dt-color-
|
|
771
|
+
--dt-color-chart-categorical-15: oklch(0.74 0.19 399);
|
|
772
|
+
--dt-color-chart-categorical-14: oklch(0.66 0.21 280);
|
|
773
|
+
--dt-color-chart-categorical-13: oklch(0.68 0.21 398);
|
|
774
|
+
--dt-color-chart-categorical-12: oklch(0.64 0.22 329);
|
|
775
|
+
--dt-color-border-success-strong-inverted: var(--dt-color-border-positive-strong-inverted);
|
|
776
|
+
--dt-color-border-success-subtle-inverted: var(--dt-color-border-positive-subtle-inverted);
|
|
777
|
+
--dt-color-border-success-inverted: var(--dt-color-border-positive-inverted);
|
|
778
|
+
--dt-color-border-success-strong: var(--dt-color-border-positive-strong);
|
|
779
|
+
--dt-color-border-success-subtle: var(--dt-color-border-positive-subtle);
|
|
780
|
+
--dt-color-border-success: var(--dt-color-border-positive);
|
|
781
|
+
--dt-color-surface-success-subtle-opaque-inverted: var(--dt-color-surface-positive-subtle-opaque-inverted); /* Success subtle surface as opaque background color. */
|
|
782
|
+
--dt-color-surface-success-opaque-inverted: var(--dt-color-surface-positive-opaque-inverted); /* Success surface as opaque background color. */
|
|
783
|
+
--dt-color-surface-primary-opaque-inverted: oklch(0.16 0 84.6 / 0.85); /* Secondary surface as opaque background color. */
|
|
784
|
+
--dt-color-surface-success-subtle-inverted: var(--dt-color-surface-positive-subtle-inverted); /* A softer version of the default success surface. */
|
|
785
|
+
--dt-color-surface-success-inverted: var(--dt-color-surface-positive-inverted); /* Background surface color containing messaging or elements expressing a positive or successful state. */
|
|
786
|
+
--dt-color-surface-success-subtle-opaque: var(--dt-color-surface-positive-subtle-opaque); /* Success subtle surface as opaque background color. */
|
|
787
|
+
--dt-color-surface-success-opaque: var(--dt-color-surface-positive-opaque); /* Success surface as opaque background color. */
|
|
793
788
|
--dt-color-surface-primary-opaque: oklch(1 0 0 / 0.96); /* Primary surface as opaque background color. */
|
|
789
|
+
--dt-color-surface-success-strong: var(--dt-color-surface-positive-strong); /* A contrasting positive state surface, most likely paired with inverted foreground colors. */
|
|
790
|
+
--dt-color-surface-success-subtle: var(--dt-color-surface-positive-subtle); /* A softer version of the default success surface. */
|
|
791
|
+
--dt-color-surface-success: var(--dt-color-surface-positive); /* Background surface color containing messaging or elements expressing a positive or successful state. */
|
|
792
|
+
--dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
|
|
793
|
+
--dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
|
|
794
|
+
--dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
|
|
795
|
+
--dt-color-link-mention-background: oklch(0.85 0.09 301 / 0.1);
|
|
796
|
+
--dt-color-link-mention-hover: var(--dt-color-link-primary-hover);
|
|
797
|
+
--dt-color-link-mention: var(--dt-color-link-primary);
|
|
794
798
|
--dt-color-link-disabled-inverted-hover: var(--dt-color-foreground-disabled-inverted);
|
|
795
799
|
--dt-color-link-disabled-inverted: var(--dt-color-foreground-disabled-inverted);
|
|
796
800
|
--dt-color-link-muted-inverted: var(--dt-color-foreground-secondary-inverted);
|
|
@@ -806,8 +810,6 @@
|
|
|
806
810
|
--dt-color-link-disabled: var(--dt-color-foreground-disabled);
|
|
807
811
|
--dt-color-link-muted-hover: var(--dt-color-foreground-primary);
|
|
808
812
|
--dt-color-link-muted: var(--dt-color-foreground-secondary);
|
|
809
|
-
--dt-color-link-info-hover: var(--dt-color-foreground-info-strong);
|
|
810
|
-
--dt-color-link-info: var(--dt-color-foreground-info);
|
|
811
813
|
--dt-color-link-warning: var(--dt-color-foreground-warning);
|
|
812
814
|
--dt-color-link-success-hover: var(--dt-color-foreground-positive-strong);
|
|
813
815
|
--dt-color-link-success: var(--dt-color-foreground-positive); /* positive */
|
|
@@ -815,19 +817,23 @@
|
|
|
815
817
|
--dt-color-link-positive: var(--dt-color-foreground-positive); /* positive */
|
|
816
818
|
--dt-color-link-critical-hover: var(--dt-color-foreground-critical-strong);
|
|
817
819
|
--dt-color-link-critical: var(--dt-color-foreground-critical);
|
|
820
|
+
--dt-color-foreground-success-strong-inverted: var(--dt-color-foreground-positive-strong-inverted); /* Success strong text that sits on high-contrast surfaces or backgrounds. */
|
|
821
|
+
--dt-color-foreground-success-inverted: var(--dt-color-foreground-positive-inverted); /* Success text that sits on high-contrast surfaces or backgrounds. */
|
|
822
|
+
--dt-color-foreground-success-strong: var(--dt-color-foreground-positive-strong); /* Indicates a strong positive state on surfaces that require a stronger contrast. */
|
|
823
|
+
--dt-color-foreground-success: var(--dt-color-foreground-positive); /* Indicates a positive state. */
|
|
818
824
|
--dt-icon-size-border-500: var(--dt-icon-size-border-400);
|
|
819
|
-
--dt-shell-action-color-background-muted-selected: oklch(0.
|
|
820
|
-
--dt-shell-action-color-background-muted-active: oklch(0.
|
|
821
|
-
--dt-shell-action-color-background-muted-hover: oklch(0.
|
|
822
|
-
--dt-shell-action-color-background-muted-default: oklch(0.
|
|
823
|
-
--dt-shell-action-color-background-secondary-selected: oklch(0.
|
|
824
|
-
--dt-shell-action-color-background-secondary-active: oklch(0.
|
|
825
|
-
--dt-shell-action-color-background-secondary-hover: oklch(0.
|
|
826
|
-
--dt-shell-action-color-background-secondary-default: oklch(0.
|
|
827
|
-
--dt-shell-action-color-background-primary-selected: oklch(0.
|
|
828
|
-
--dt-shell-action-color-background-primary-active: oklch(0.
|
|
829
|
-
--dt-shell-action-color-background-primary-hover: oklch(0.
|
|
830
|
-
--dt-shell-action-color-background-primary-default: oklch(0.
|
|
825
|
+
--dt-shell-action-color-background-muted-selected: oklch(0.34 0.01 56.2 / 0.07);
|
|
826
|
+
--dt-shell-action-color-background-muted-active: oklch(0.34 0.01 56.2 / 0.07);
|
|
827
|
+
--dt-shell-action-color-background-muted-hover: oklch(0.34 0.01 56.2 / 0.1);
|
|
828
|
+
--dt-shell-action-color-background-muted-default: oklch(0.34 0.01 56.2 / 0.05);
|
|
829
|
+
--dt-shell-action-color-background-secondary-selected: oklch(0.34 0.01 56.2 / 0.13);
|
|
830
|
+
--dt-shell-action-color-background-secondary-active: oklch(0.34 0.01 56.2 / 0.16);
|
|
831
|
+
--dt-shell-action-color-background-secondary-hover: oklch(0.34 0.01 56.2 / 0.1);
|
|
832
|
+
--dt-shell-action-color-background-secondary-default: oklch(0.34 0.01 56.2 / 0);
|
|
833
|
+
--dt-shell-action-color-background-primary-selected: oklch(0.34 0.01 56.2 / 0.13);
|
|
834
|
+
--dt-shell-action-color-background-primary-active: oklch(0.34 0.01 56.2 / 0.16);
|
|
835
|
+
--dt-shell-action-color-background-primary-hover: oklch(0.34 0.01 56.2 / 0.1);
|
|
836
|
+
--dt-shell-action-color-background-primary-default: oklch(0.34 0.01 56.2 / 0);
|
|
831
837
|
--dt-shell-action-color-foreground-muted-default: var(--dt-shell-color-foreground-muted);
|
|
832
838
|
--dt-shell-action-color-foreground-secondary-disabled: var(--dt-shell-color-foreground-disabled);
|
|
833
839
|
--dt-shell-action-color-foreground-primary-disabled: var(--dt-shell-color-foreground-disabled);
|
|
@@ -836,17 +842,17 @@
|
|
|
836
842
|
--dt-shell-action-color-foreground-secondary-default: var(--dt-shell-color-foreground-secondary);
|
|
837
843
|
--dt-shell-action-color-foreground-primary-default: var(--dt-shell-color-foreground-secondary);
|
|
838
844
|
--dt-shell-color-surface-default: var(--dt-shell-base-color-surface);
|
|
839
|
-
--dt-shell-color-foreground-warning: oklch(0.
|
|
840
|
-
--dt-shell-color-foreground-critical: oklch(0.
|
|
845
|
+
--dt-shell-color-foreground-warning: oklch(0.31 0.1 61.6);
|
|
846
|
+
--dt-shell-color-foreground-critical: oklch(0.46 0.23 18.6);
|
|
841
847
|
--dt-shell-color-foreground-positive: oklch(0.44 0.13 155);
|
|
842
848
|
--dt-shell-base-color-accent: var(--dt-badge-color-background-bulletin);
|
|
843
849
|
--dt-theme-sidebar-icon-color-foreground: var(--dt-theme-sidebar-color-foreground);
|
|
844
850
|
--dt-theme-sidebar-color-background: var(--dt-theme-topbar-color-background);
|
|
845
851
|
--dt-theme-topbar-profile-color-foreground: var(--dt-theme-topbar-color-foreground);
|
|
846
852
|
--dt-action-color-background-positive-active: oklch(0.55 0.17 159 / 0.25);
|
|
847
|
-
--dt-action-color-background-muted-active: oklch(0.
|
|
848
|
-
--dt-action-color-background-critical-active: oklch(0.73 0.
|
|
849
|
-
--dt-action-color-background-base-active: oklch(0.
|
|
853
|
+
--dt-action-color-background-muted-active: oklch(0.26 0.01 78.2 / 0.14);
|
|
854
|
+
--dt-action-color-background-critical-active: oklch(0.73 0.1 12.7 / 0.31);
|
|
855
|
+
--dt-action-color-background-base-active: oklch(0.76 0.09 301 / 0.39);
|
|
850
856
|
--dt-action-color-foreground-positive-hover: var(--dt-color-link-positive-hover);
|
|
851
857
|
--dt-action-color-foreground-positive-default: var(--dt-color-link-positive);
|
|
852
858
|
--dt-action-color-foreground-muted-hover: var(--dt-color-link-muted-hover);
|
|
@@ -898,76 +904,76 @@
|
|
|
898
904
|
--dt-typography-helper-sm: var(--dt-typography-helper-sm-font-weight) var(--dt-typography-helper-sm-font-size)/var(--dt-typography-helper-sm-line-height) var(--dt-typography-helper-sm-font-family);
|
|
899
905
|
--dt-typography-code-md: var(--dt-typography-code-md-font-weight) var(--dt-typography-code-md-font-size)/var(--dt-typography-code-md-line-height) var(--dt-typography-code-md-font-family);
|
|
900
906
|
--dt-typography-code-sm: var(--dt-typography-code-sm-font-weight) var(--dt-typography-code-sm-font-size)/var(--dt-typography-code-sm-line-height) var(--dt-typography-code-sm-font-family); /* Text style for extra small inputs (e.g. input and textarea) */
|
|
901
|
-
--dt-color-chart-sequential-09-selected: oklch(0.
|
|
902
|
-
--dt-color-chart-sequential-09-hover: oklch(0.
|
|
903
|
-
--dt-color-chart-sequential-08-selected: oklch(0.
|
|
904
|
-
--dt-color-chart-sequential-08-hover: oklch(0.
|
|
905
|
-
--dt-color-chart-sequential-07-selected: oklch(0.
|
|
906
|
-
--dt-color-chart-sequential-07-hover: oklch(0.
|
|
907
|
-
--dt-color-chart-sequential-06-selected: oklch(0.
|
|
908
|
-
--dt-color-chart-sequential-06-hover: oklch(0.
|
|
909
|
-
--dt-color-chart-sequential-05-selected: oklch(0.
|
|
910
|
-
--dt-color-chart-sequential-05-hover: oklch(0.
|
|
911
|
-
--dt-color-chart-sequential-04-selected: oklch(0.
|
|
912
|
-
--dt-color-chart-sequential-04-hover: oklch(0.
|
|
913
|
-
--dt-color-chart-sequential-03-selected: oklch(0.
|
|
914
|
-
--dt-color-chart-sequential-03-hover: oklch(0.
|
|
915
|
-
--dt-color-chart-sequential-02-selected: oklch(0.
|
|
916
|
-
--dt-color-chart-sequential-02-hover: oklch(0.
|
|
917
|
-
--dt-color-chart-categorical-28-selected: oklch(0.
|
|
918
|
-
--dt-color-chart-categorical-28-hover: oklch(0.
|
|
919
|
-
--dt-color-chart-categorical-26-selected: oklch(0.
|
|
920
|
-
--dt-color-chart-categorical-26-hover: oklch(0.
|
|
921
|
-
--dt-color-chart-categorical-22-selected: oklch(0.
|
|
922
|
-
--dt-color-chart-categorical-22-hover: oklch(0.
|
|
923
|
-
--dt-color-chart-categorical-21-selected: oklch(0.
|
|
924
|
-
--dt-color-chart-categorical-21-hover: oklch(0.
|
|
925
|
-
--dt-color-chart-categorical-20-selected: oklch(0.
|
|
926
|
-
--dt-color-chart-categorical-20-hover: oklch(0.
|
|
927
|
-
--dt-color-chart-categorical-19-selected: oklch(0.
|
|
928
|
-
--dt-color-chart-categorical-19-hover: oklch(0.
|
|
929
|
-
--dt-color-chart-categorical-18-selected: oklch(0.
|
|
930
|
-
--dt-color-chart-categorical-18-hover: oklch(0.
|
|
931
|
-
--dt-color-chart-categorical-17-selected: oklch(0.52 0.21
|
|
932
|
-
--dt-color-chart-categorical-17-hover: oklch(0.63 0.21
|
|
907
|
+
--dt-color-chart-sequential-09-selected: oklch(0.32 0.04 195); /* Selected state for ninth sequential chart color. */
|
|
908
|
+
--dt-color-chart-sequential-09-hover: oklch(0.36 0.05 219); /* Hover state for ninth sequential chart color. */
|
|
909
|
+
--dt-color-chart-sequential-08-selected: oklch(0.37 0.04 198); /* Selected state for eighth sequential chart color. */
|
|
910
|
+
--dt-color-chart-sequential-08-hover: oklch(0.41 0.05 222); /* Hover state for eighth sequential chart color. */
|
|
911
|
+
--dt-color-chart-sequential-07-selected: oklch(0.43 0.04 200); /* Selected state for seventh sequential chart color. */
|
|
912
|
+
--dt-color-chart-sequential-07-hover: oklch(0.48 0.04 224); /* Hover state for seventh sequential chart color. */
|
|
913
|
+
--dt-color-chart-sequential-06-selected: oklch(0.47 0.03 202); /* Selected state for sixth sequential chart color. */
|
|
914
|
+
--dt-color-chart-sequential-06-hover: oklch(0.54 0.03 227); /* Hover state for sixth sequential chart color. */
|
|
915
|
+
--dt-color-chart-sequential-05-selected: oklch(0.52 0.03 204); /* Selected state for fifth sequential chart color. */
|
|
916
|
+
--dt-color-chart-sequential-05-hover: oklch(0.6 0.03 229); /* Hover state for fifth sequential chart color. */
|
|
917
|
+
--dt-color-chart-sequential-04-selected: oklch(0.57 0.02 206); /* Selected state for fourth sequential chart color. */
|
|
918
|
+
--dt-color-chart-sequential-04-hover: oklch(0.66 0.03 232); /* Hover state for fourth sequential chart color. */
|
|
919
|
+
--dt-color-chart-sequential-03-selected: oklch(0.62 0.02 208); /* Selected state for third sequential chart color. */
|
|
920
|
+
--dt-color-chart-sequential-03-hover: oklch(0.72 0.02 235); /* Hover state for third sequential chart color. */
|
|
921
|
+
--dt-color-chart-sequential-02-selected: oklch(0.67 0.02 210); /* Selected state for second sequential chart color. */
|
|
922
|
+
--dt-color-chart-sequential-02-hover: oklch(0.78 0.02 237); /* Hover state for second sequential chart color. */
|
|
923
|
+
--dt-color-chart-categorical-28-selected: oklch(0.45 0.21 273);
|
|
924
|
+
--dt-color-chart-categorical-28-hover: oklch(0.54 0.21 273);
|
|
925
|
+
--dt-color-chart-categorical-26-selected: oklch(0.5 0.19 385);
|
|
926
|
+
--dt-color-chart-categorical-26-hover: oklch(0.61 0.19 385);
|
|
927
|
+
--dt-color-chart-categorical-22-selected: oklch(0.54 0.09 362);
|
|
928
|
+
--dt-color-chart-categorical-22-hover: oklch(0.65 0.09 362);
|
|
929
|
+
--dt-color-chart-categorical-21-selected: oklch(0.47 0.17 119);
|
|
930
|
+
--dt-color-chart-categorical-21-hover: oklch(0.57 0.17 119);
|
|
931
|
+
--dt-color-chart-categorical-20-selected: oklch(0.45 0.21 273);
|
|
932
|
+
--dt-color-chart-categorical-20-hover: oklch(0.54 0.21 273);
|
|
933
|
+
--dt-color-chart-categorical-19-selected: oklch(0.43 0.21 244);
|
|
934
|
+
--dt-color-chart-categorical-19-hover: oklch(0.53 0.21 244);
|
|
935
|
+
--dt-color-chart-categorical-18-selected: oklch(0.55 0.14 86.6);
|
|
936
|
+
--dt-color-chart-categorical-18-hover: oklch(0.66 0.14 86.6);
|
|
937
|
+
--dt-color-chart-categorical-17-selected: oklch(0.52 0.21 343);
|
|
938
|
+
--dt-color-chart-categorical-17-hover: oklch(0.63 0.21 343);
|
|
933
939
|
--dt-color-chart-categorical-16-selected: oklch(0.46 0.15 140);
|
|
934
940
|
--dt-color-chart-categorical-16-hover: oklch(0.56 0.15 140);
|
|
935
|
-
--dt-color-chart-categorical-15-selected: oklch(0.52 0.
|
|
936
|
-
--dt-color-chart-categorical-15-hover: oklch(0.
|
|
937
|
-
--dt-color-chart-categorical-14-selected: oklch(0.
|
|
938
|
-
--dt-color-chart-categorical-14-hover: oklch(0.
|
|
939
|
-
--dt-color-chart-categorical-13-selected: oklch(0.48 0.
|
|
940
|
-
--dt-color-chart-categorical-13-hover: oklch(0.58 0.
|
|
941
|
-
--dt-color-chart-categorical-12-selected: oklch(0.
|
|
942
|
-
--dt-color-chart-categorical-12-hover: oklch(0.
|
|
943
|
-
--dt-color-chart-categorical-30: oklch(0.
|
|
944
|
-
--dt-color-chart-categorical-29: oklch(0.
|
|
945
|
-
--dt-color-chart-categorical-27: oklch(0.
|
|
946
|
-
--dt-color-chart-categorical-25: oklch(0.
|
|
947
|
-
--dt-color-chart-categorical-24: oklch(0.71 0.
|
|
948
|
-
--dt-color-chart-categorical-23: oklch(0.
|
|
941
|
+
--dt-color-chart-categorical-15-selected: oklch(0.52 0.19 399);
|
|
942
|
+
--dt-color-chart-categorical-15-hover: oklch(0.63 0.19 399);
|
|
943
|
+
--dt-color-chart-categorical-14-selected: oklch(0.46 0.21 280);
|
|
944
|
+
--dt-color-chart-categorical-14-hover: oklch(0.56 0.21 280);
|
|
945
|
+
--dt-color-chart-categorical-13-selected: oklch(0.48 0.21 398);
|
|
946
|
+
--dt-color-chart-categorical-13-hover: oklch(0.58 0.21 398);
|
|
947
|
+
--dt-color-chart-categorical-12-selected: oklch(0.45 0.22 329);
|
|
948
|
+
--dt-color-chart-categorical-12-hover: oklch(0.54 0.22 329);
|
|
949
|
+
--dt-color-chart-categorical-30: oklch(0.63 0.18 231);
|
|
950
|
+
--dt-color-chart-categorical-29: oklch(0.75 0.16 418);
|
|
951
|
+
--dt-color-chart-categorical-27: oklch(0.64 0.17 176);
|
|
952
|
+
--dt-color-chart-categorical-25: oklch(0.7 0.19 330);
|
|
953
|
+
--dt-color-chart-categorical-24: oklch(0.71 0.2 46.6);
|
|
954
|
+
--dt-color-chart-categorical-23: oklch(0.67 0.21 350);
|
|
949
955
|
--dt-color-link-disabled-hover: var(--dt-color-link-disabled);
|
|
950
956
|
--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. */
|
|
951
|
-
--dt-shell-mention-color-surface-secondary: oklch(0.
|
|
957
|
+
--dt-shell-mention-color-surface-secondary: oklch(0.22 0.23 285);
|
|
952
958
|
--dt-shell-mention-color-surface-primary: var(--dt-shell-base-color-accent);
|
|
953
|
-
--dt-shell-action-color-foreground-muted-selected: oklch(0.
|
|
954
|
-
--dt-shell-action-color-foreground-muted-hover: oklch(0.
|
|
959
|
+
--dt-shell-action-color-foreground-muted-selected: oklch(0.1 0.01 78.2 / 0.6);
|
|
960
|
+
--dt-shell-action-color-foreground-muted-hover: oklch(0.16 0.01 78.2 / 0.6);
|
|
955
961
|
--dt-action-color-foreground-positive-active: var(--dt-action-color-foreground-positive-hover);
|
|
956
962
|
--dt-action-color-foreground-muted-active: var(--dt-action-color-foreground-muted-hover);
|
|
957
963
|
--dt-action-color-foreground-inverted-active: var(--dt-action-color-foreground-inverted-hover);
|
|
958
964
|
--dt-action-color-foreground-critical-active: var(--dt-action-color-foreground-critical-hover);
|
|
959
|
-
--dt-color-chart-categorical-30-selected: oklch(0.
|
|
960
|
-
--dt-color-chart-categorical-30-hover: oklch(0.
|
|
961
|
-
--dt-color-chart-categorical-29-selected: oklch(0.
|
|
962
|
-
--dt-color-chart-categorical-29-hover: oklch(0.
|
|
963
|
-
--dt-color-chart-categorical-27-selected: oklch(0.
|
|
964
|
-
--dt-color-chart-categorical-27-hover: oklch(0.
|
|
965
|
-
--dt-color-chart-categorical-25-selected: oklch(0.
|
|
966
|
-
--dt-color-chart-categorical-25-hover: oklch(0.
|
|
967
|
-
--dt-color-chart-categorical-24-selected: oklch(0.5 0.
|
|
968
|
-
--dt-color-chart-categorical-24-hover: oklch(0.6 0.
|
|
969
|
-
--dt-color-chart-categorical-23-selected: oklch(0.
|
|
970
|
-
--dt-color-chart-categorical-23-hover: oklch(0.
|
|
965
|
+
--dt-color-chart-categorical-30-selected: oklch(0.44 0.18 231);
|
|
966
|
+
--dt-color-chart-categorical-30-hover: oklch(0.54 0.18 231);
|
|
967
|
+
--dt-color-chart-categorical-29-selected: oklch(0.52 0.16 418);
|
|
968
|
+
--dt-color-chart-categorical-29-hover: oklch(0.64 0.16 418);
|
|
969
|
+
--dt-color-chart-categorical-27-selected: oklch(0.45 0.17 176);
|
|
970
|
+
--dt-color-chart-categorical-27-hover: oklch(0.54 0.17 176);
|
|
971
|
+
--dt-color-chart-categorical-25-selected: oklch(0.49 0.19 330);
|
|
972
|
+
--dt-color-chart-categorical-25-hover: oklch(0.59 0.19 330);
|
|
973
|
+
--dt-color-chart-categorical-24-selected: oklch(0.5 0.2 46.6);
|
|
974
|
+
--dt-color-chart-categorical-24-hover: oklch(0.6 0.2 46.6);
|
|
975
|
+
--dt-color-chart-categorical-23-selected: oklch(0.47 0.21 350);
|
|
976
|
+
--dt-color-chart-categorical-23-hover: oklch(0.57 0.21 350);
|
|
971
977
|
--dt-shell-action-color-foreground-muted-active: var(--dt-shell-action-color-foreground-muted-hover);
|
|
972
978
|
--dt-font-size-100-mobile: 1.2rem;
|
|
973
979
|
--dt-font-size-200-mobile: 1.6rem;
|