@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
|
@@ -131,8 +131,9 @@
|
|
|
131
131
|
--dt-theme-mention-color-background-strong: var(--dt-color-purple-900);
|
|
132
132
|
--dt-theme-mention-color-foreground: var(--dt-color-black-50);
|
|
133
133
|
--dt-theme-color-base: var(--dt-color-black-900);
|
|
134
|
-
--dt-action-color-background-positive-primary-
|
|
135
|
-
--dt-action-color-background-positive-primary-
|
|
134
|
+
--dt-action-color-background-positive-primary-active: var(--dt-color-green-800);
|
|
135
|
+
--dt-action-color-background-positive-primary-hover: var(--dt-color-green-700);
|
|
136
|
+
--dt-action-color-background-positive-primary-default: var(--dt-color-green-600); /* Postive, accepting, or success actions. */
|
|
136
137
|
--dt-action-color-background-positive-default: var(--dt-color-neutral-transparent);
|
|
137
138
|
--dt-action-color-background-muted-default: var(--dt-color-neutral-transparent);
|
|
138
139
|
--dt-action-color-background-inverted-primary-active: var(--dt-color-purple-200);
|
|
@@ -142,9 +143,9 @@
|
|
|
142
143
|
--dt-action-color-background-critical-primary-hover: var(--dt-color-red-600);
|
|
143
144
|
--dt-action-color-background-critical-primary-default: var(--dt-color-red-500);
|
|
144
145
|
--dt-action-color-background-critical-default: var(--dt-color-neutral-transparent);
|
|
145
|
-
--dt-action-color-background-base-primary-active: var(--dt-color-purple-
|
|
146
|
-
--dt-action-color-background-base-primary-hover: var(--dt-color-purple-
|
|
147
|
-
--dt-action-color-background-base-primary-default: var(--dt-color-purple-
|
|
146
|
+
--dt-action-color-background-base-primary-active: var(--dt-color-purple-700);
|
|
147
|
+
--dt-action-color-background-base-primary-hover: var(--dt-color-purple-600);
|
|
148
|
+
--dt-action-color-background-base-primary-default: var(--dt-color-purple-500);
|
|
148
149
|
--dt-action-color-background-base-default: var(--dt-color-neutral-transparent);
|
|
149
150
|
--dt-action-color-foreground-positive-primary-default: var(--dt-color-black-50);
|
|
150
151
|
--dt-action-color-foreground-critical-primary-default: var(--dt-color-black-50);
|
|
@@ -436,19 +437,16 @@
|
|
|
436
437
|
--dt-color-border-brand-strong-inverted: var(--dt-color-purple-200);
|
|
437
438
|
--dt-color-border-info-strong-inverted: var(--dt-color-blue-200);
|
|
438
439
|
--dt-color-border-warning-strong-inverted: var(--dt-color-gold-300);
|
|
439
|
-
--dt-color-border-success-strong-inverted: var(--dt-color-green-500);
|
|
440
440
|
--dt-color-border-positive-strong-inverted: var(--dt-color-green-500);
|
|
441
441
|
--dt-color-border-critical-strong-inverted: var(--dt-color-red-200);
|
|
442
442
|
--dt-color-border-brand-subtle-inverted: var(--dt-color-purple-600);
|
|
443
443
|
--dt-color-border-info-subtle-inverted: var(--dt-color-blue-900);
|
|
444
444
|
--dt-color-border-warning-subtle-inverted: var(--dt-color-gold-800);
|
|
445
|
-
--dt-color-border-success-subtle-inverted: var(--dt-color-green-900);
|
|
446
445
|
--dt-color-border-positive-subtle-inverted: var(--dt-color-green-900);
|
|
447
446
|
--dt-color-border-critical-subtle-inverted: var(--dt-color-red-900);
|
|
448
447
|
--dt-color-border-brand-inverted: var(--dt-color-purple-400);
|
|
449
448
|
--dt-color-border-info-inverted: var(--dt-color-blue-300);
|
|
450
449
|
--dt-color-border-warning-inverted: var(--dt-color-gold-500);
|
|
451
|
-
--dt-color-border-success-inverted: var(--dt-color-green-500);
|
|
452
450
|
--dt-color-border-positive-inverted: var(--dt-color-green-500);
|
|
453
451
|
--dt-color-border-critical-inverted: var(--dt-color-red-300);
|
|
454
452
|
--dt-color-border-bold-inverted: oklch(1 0 0 / 0.5);
|
|
@@ -458,39 +456,34 @@
|
|
|
458
456
|
--dt-color-border-brand-strong: var(--dt-color-purple-800);
|
|
459
457
|
--dt-color-border-info-strong: var(--dt-color-blue-800);
|
|
460
458
|
--dt-color-border-warning-strong: var(--dt-color-gold-700);
|
|
461
|
-
--dt-color-border-success-strong: var(--dt-color-green-900);
|
|
462
459
|
--dt-color-border-positive-strong: var(--dt-color-green-900);
|
|
463
460
|
--dt-color-border-critical-strong: var(--dt-color-red-800);
|
|
464
461
|
--dt-color-border-brand-subtle: var(--dt-color-purple-300);
|
|
465
462
|
--dt-color-border-info-subtle: var(--dt-color-blue-300);
|
|
466
463
|
--dt-color-border-warning-subtle: var(--dt-color-gold-300);
|
|
467
|
-
--dt-color-border-success-subtle: var(--dt-color-green-300);
|
|
468
464
|
--dt-color-border-positive-subtle: var(--dt-color-green-300);
|
|
469
465
|
--dt-color-border-critical-subtle: var(--dt-color-red-300);
|
|
470
466
|
--dt-color-border-brand: var(--dt-color-brand-purple);
|
|
471
467
|
--dt-color-border-info: var(--dt-color-blue-600);
|
|
472
468
|
--dt-color-border-warning: var(--dt-color-gold-500);
|
|
473
|
-
--dt-color-border-success: var(--dt-color-green-700);
|
|
474
469
|
--dt-color-border-positive: var(--dt-color-green-700);
|
|
475
470
|
--dt-color-border-critical: var(--dt-color-red-600);
|
|
476
|
-
--dt-color-border-bold: oklch(0.
|
|
477
|
-
--dt-color-border-moderate: oklch(0.
|
|
478
|
-
--dt-color-border-default: oklch(0.
|
|
479
|
-
--dt-color-border-subtle: oklch(0.
|
|
471
|
+
--dt-color-border-bold: oklch(0.26 0.01 78.2 / 0.5);
|
|
472
|
+
--dt-color-border-moderate: oklch(0.26 0.01 78.2 / 0.3);
|
|
473
|
+
--dt-color-border-default: oklch(0.26 0.01 78.2 / 0.17);
|
|
474
|
+
--dt-color-border-subtle: oklch(0.26 0.01 78.2 / 0.11);
|
|
480
475
|
--dt-color-surface-ai: var(--dt-color-gradient-gold-red-magenta-purple);
|
|
481
476
|
--dt-color-surface-backdrop: oklch(0 0 0 / 0.65); /* Background color for a modal-like backdrop. */
|
|
482
|
-
--dt-color-surface-brand-subtle-opaque-inverted: oklch(0.
|
|
483
|
-
--dt-color-surface-info-subtle-opaque-inverted: oklch(0.
|
|
484
|
-
--dt-color-surface-success-subtle-opaque-inverted: oklch(0.21 0.05 162 / 0.66); /* Success subtle surface as opaque background color. */
|
|
477
|
+
--dt-color-surface-brand-subtle-opaque-inverted: oklch(0.15 0.09 291 / 0.66); /* Info surface as opaque background color. */
|
|
478
|
+
--dt-color-surface-info-subtle-opaque-inverted: oklch(0.16 0.05 252 / 0.66); /* Info surface as opaque background color. */
|
|
485
479
|
--dt-color-surface-positive-subtle-opaque-inverted: oklch(0.21 0.05 162 / 0.66); /* Positive subtle surface as opaque background color. */
|
|
486
|
-
--dt-color-surface-warning-subtle-opaque-inverted: oklch(0.
|
|
487
|
-
--dt-color-surface-critical-subtle-opaque-inverted: oklch(0.17 0.07
|
|
488
|
-
--dt-color-surface-brand-opaque-inverted: oklch(0.
|
|
489
|
-
--dt-color-surface-info-opaque-inverted: oklch(0.
|
|
490
|
-
--dt-color-surface-success-opaque-inverted: oklch(0.34 0.08 157 / 0.3); /* Success surface as opaque background color. */
|
|
480
|
+
--dt-color-surface-warning-subtle-opaque-inverted: oklch(0.18 0.04 77.5 / 0.3); /* Warning subtle surface as opaque background color */
|
|
481
|
+
--dt-color-surface-critical-subtle-opaque-inverted: oklch(0.17 0.07 8 / 0.6); /* Critical subtle surface as opaque background color. */
|
|
482
|
+
--dt-color-surface-brand-opaque-inverted: oklch(0.22 0.13 285 / 0.8); /* Info surface as opaque background color. */
|
|
483
|
+
--dt-color-surface-info-opaque-inverted: oklch(0.26 0.09 258 / 0.6); /* Info surface as opaque background color. */
|
|
491
484
|
--dt-color-surface-positive-opaque-inverted: oklch(0.34 0.08 157 / 0.3); /* Positive surface as opaque background color. */
|
|
492
|
-
--dt-color-surface-warning-opaque-inverted: oklch(0.
|
|
493
|
-
--dt-color-surface-critical-opaque-inverted: oklch(0.
|
|
485
|
+
--dt-color-surface-warning-opaque-inverted: oklch(0.32 0.07 64.8 / 0.35); /* Warning surface as opaque background color */
|
|
486
|
+
--dt-color-surface-critical-opaque-inverted: oklch(0.31 0.13 14.7 / 0.5); /* Critical surface as opaque background color. */
|
|
494
487
|
--dt-color-surface-contrast-opaque-inverted: oklch(1 0 0 / 0.97); /* Contrast surface as opaque background color. */
|
|
495
488
|
--dt-color-surface-strong-opaque-inverted: oklch(1 0 0 / 0.67); /* Strong surface as opaque background color. */
|
|
496
489
|
--dt-color-surface-bold-opaque-inverted: oklch(1 0 0 / 0.32); /* Bold surface as opaque background color. */
|
|
@@ -503,13 +496,11 @@
|
|
|
503
496
|
--dt-color-surface-critical-strong-inverted: var(--dt-color-red-300); /* A contrasting critical surface, most likely paired with inverted foreground colors. */
|
|
504
497
|
--dt-color-surface-brand-subtle-inverted: var(--dt-color-purple-1000); /* A softer version of the default informational surface. */
|
|
505
498
|
--dt-color-surface-info-subtle-inverted: var(--dt-color-blue-1000); /* A softer version of the default informational surface. */
|
|
506
|
-
--dt-color-surface-success-subtle-inverted: var(--dt-color-green-1000); /* A softer version of the default success surface. */
|
|
507
499
|
--dt-color-surface-positive-subtle-inverted: var(--dt-color-green-1000); /* A softer version of the default positive surface. */
|
|
508
500
|
--dt-color-surface-warning-subtle-inverted: var(--dt-color-gold-1000); /* A softer version of the default warning surface. */
|
|
509
501
|
--dt-color-surface-critical-subtle-inverted: var(--dt-color-red-1000); /* A softer version of the Critical surface. */
|
|
510
502
|
--dt-color-surface-brand-inverted: var(--dt-color-purple-950); /* Background surface color containing messaging or elements communicated as generally informational. */
|
|
511
503
|
--dt-color-surface-info-inverted: var(--dt-color-blue-950); /* Background surface color containing messaging or elements communicated as generally informational. */
|
|
512
|
-
--dt-color-surface-success-inverted: var(--dt-color-green-900); /* Background surface color containing messaging or elements expressing a positive or successful state. */
|
|
513
504
|
--dt-color-surface-positive-inverted: var(--dt-color-green-900); /* Background surface color containing messaging or elements expressing a positive or successful state. */
|
|
514
505
|
--dt-color-surface-warning-inverted: var(--dt-color-gold-950); /* Background surface color highlighting messaging or elements that may require user's attention. */
|
|
515
506
|
--dt-color-surface-critical-inverted: var(--dt-color-red-950); /* Background surface color containing error, danger, or otherwise critical messaging or elements. */
|
|
@@ -519,38 +510,33 @@
|
|
|
519
510
|
--dt-color-surface-moderate-inverted: var(--dt-color-black-700); /* A tertiary surface level, prominent without being too overpowering. */
|
|
520
511
|
--dt-color-surface-secondary-inverted: var(--dt-color-black-800); /* For adjacent or complementary regions. */
|
|
521
512
|
--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. */
|
|
522
|
-
--dt-color-surface-brand-subtle-opaque: oklch(0.
|
|
523
|
-
--dt-color-surface-info-subtle-opaque: oklch(0.
|
|
524
|
-
--dt-color-surface-success-subtle-opaque: oklch(0.96 0.06 167 / 0.5); /* Success subtle surface as opaque background color. */
|
|
513
|
+
--dt-color-surface-brand-subtle-opaque: oklch(0.85 0.09 301 / 0.2); /* Info surface as opaque background color. */
|
|
514
|
+
--dt-color-surface-info-subtle-opaque: oklch(0.9 0.05 257 / 0.5); /* Info surface as opaque background color. */
|
|
525
515
|
--dt-color-surface-positive-subtle-opaque: oklch(0.96 0.06 167 / 0.5); /* Positive subtle surface as opaque background color. */
|
|
526
|
-
--dt-color-surface-warning-subtle-opaque: oklch(0.
|
|
527
|
-
--dt-color-surface-critical-subtle-opaque: oklch(0.
|
|
528
|
-
--dt-color-surface-brand-opaque: oklch(0.
|
|
529
|
-
--dt-color-surface-info-opaque: oklch(0.
|
|
530
|
-
--dt-color-surface-success-opaque: oklch(0.79 0.17 159 / 0.25); /* Success surface as opaque background color. */
|
|
516
|
+
--dt-color-surface-warning-subtle-opaque: oklch(0.94 0.05 77.3 / 0.5); /* Warning subtle surface as opaque background color */
|
|
517
|
+
--dt-color-surface-critical-subtle-opaque: oklch(0.88 0.07 17.3 / 0.5); /* Critical subtle surface as opaque background color. */
|
|
518
|
+
--dt-color-surface-brand-opaque: oklch(0.85 0.09 301 / 0.39); /* Info surface as opaque background color. */
|
|
519
|
+
--dt-color-surface-info-opaque: oklch(0.84 0.08 257 / 0.35); /* Info surface as opaque background color. */
|
|
531
520
|
--dt-color-surface-positive-opaque: oklch(0.79 0.17 159 / 0.25); /* Positive surface as opaque background color. */
|
|
532
|
-
--dt-color-surface-warning-opaque: oklch(0.
|
|
533
|
-
--dt-color-surface-critical-opaque: oklch(0.82 0.
|
|
534
|
-
--dt-color-surface-contrast-opaque: oklch(0.
|
|
535
|
-
--dt-color-surface-strong-opaque: oklch(0.
|
|
536
|
-
--dt-color-surface-bold-opaque: oklch(0.
|
|
537
|
-
--dt-color-surface-moderate-opaque: oklch(0.
|
|
538
|
-
--dt-color-surface-secondary-opaque: oklch(0.
|
|
521
|
+
--dt-color-surface-warning-opaque: oklch(0.9 0.09 77.6 / 0.5); /* Warning surface as opaque background color */
|
|
522
|
+
--dt-color-surface-critical-opaque: oklch(0.82 0.1 12.7 / 0.31); /* Critical surface as opaque background color. */
|
|
523
|
+
--dt-color-surface-contrast-opaque: oklch(0.26 0.01 78.2 / 0.94); /* Contrast surface as opaque background color. */
|
|
524
|
+
--dt-color-surface-strong-opaque: oklch(0.26 0.01 78.2 / 0.76); /* Strong surface as opaque background color. */
|
|
525
|
+
--dt-color-surface-bold-opaque: oklch(0.26 0.01 78.2 / 0.19); /* Bold surface as opaque background color. */
|
|
526
|
+
--dt-color-surface-moderate-opaque: oklch(0.26 0.01 78.2 / 0.1); /* Moderate surface as opaque background color. */
|
|
527
|
+
--dt-color-surface-secondary-opaque: oklch(0.26 0.01 78.2 / 0.02); /* Secondary surface as opaque background color. */
|
|
539
528
|
--dt-color-surface-brand-strong: var(--dt-color-purple-600); /* A contrasting informational surface, most likely paired with inverted foreground colors. */
|
|
540
|
-
--dt-color-surface-info-strong: var(--dt-color-blue-
|
|
541
|
-
--dt-color-surface-
|
|
542
|
-
--dt-color-surface-
|
|
543
|
-
--dt-color-surface-warning-strong: var(--dt-color-gold-400); /* A contrasting warning surface, most likely paired with inverted foreground colors. */
|
|
529
|
+
--dt-color-surface-info-strong: var(--dt-color-blue-600); /* A contrasting informational surface, most likely paired with inverted foreground colors. */
|
|
530
|
+
--dt-color-surface-positive-strong: var(--dt-color-green-600); /* A contrasting positive state surface, most likely paired with inverted foreground colors. */
|
|
531
|
+
--dt-color-surface-warning-strong: var(--dt-color-gold-500); /* A contrasting warning surface, most likely paired with inverted foreground colors. */
|
|
544
532
|
--dt-color-surface-critical-strong: var(--dt-color-red-600); /* A contrasting critical surface, most likely paired with inverted foreground colors. */
|
|
545
533
|
--dt-color-surface-brand-subtle: var(--dt-color-purple-50); /* A softer version of the default informational surface. */
|
|
546
534
|
--dt-color-surface-info-subtle: var(--dt-color-blue-50); /* A softer version of the default informational surface. */
|
|
547
|
-
--dt-color-surface-success-subtle: var(--dt-color-green-50); /* A softer version of the default success surface. */
|
|
548
535
|
--dt-color-surface-positive-subtle: var(--dt-color-green-50); /* A softer version of the default positive surface. */
|
|
549
536
|
--dt-color-surface-warning-subtle: var(--dt-color-gold-50); /* A softer version of the default warning surface. */
|
|
550
537
|
--dt-color-surface-critical-subtle: var(--dt-color-red-50); /* A softer version of the Critical surface. */
|
|
551
538
|
--dt-color-surface-brand: var(--dt-color-purple-100); /* Background surface color containing messaging or elements communicated as generally informational. */
|
|
552
539
|
--dt-color-surface-info: var(--dt-color-blue-100); /* Background surface color containing messaging or elements communicated as generally informational. */
|
|
553
|
-
--dt-color-surface-success: var(--dt-color-green-100); /* Background surface color containing messaging or elements expressing a positive or successful state. */
|
|
554
540
|
--dt-color-surface-positive: var(--dt-color-green-100); /* Background surface color containing messaging or elements expressing a positive or successful state. */
|
|
555
541
|
--dt-color-surface-warning: var(--dt-color-gold-100); /* Background surface color highlighting messaging or elements that may require user's attention. */
|
|
556
542
|
--dt-color-surface-critical: var(--dt-color-red-100); /* Background surface color containing error, danger, or otherwise critical messaging or elements. */
|
|
@@ -564,36 +550,34 @@
|
|
|
564
550
|
--dt-color-link-warning-inverted-hover: var(--dt-color-gold-300);
|
|
565
551
|
--dt-color-link-primary-inverted-hover: var(--dt-color-purple-200);
|
|
566
552
|
--dt-color-link-primary-inverted: var(--dt-color-purple-200);
|
|
553
|
+
--dt-color-link-info-hover: var(--dt-color-blue-700);
|
|
554
|
+
--dt-color-link-info: var(--dt-color-blue-600);
|
|
567
555
|
--dt-color-link-warning-hover: var(--dt-color-gold-900);
|
|
568
556
|
--dt-color-link-primary-hover: var(--dt-color-purple-800);
|
|
569
557
|
--dt-color-link-primary: var(--dt-color-purple-600);
|
|
570
558
|
--dt-color-foreground-info-strong-inverted: var(--dt-color-blue-200); /* Info strong text that sits on high-contrast surfaces or backgrounds. */
|
|
571
559
|
--dt-color-foreground-info-inverted: var(--dt-color-blue-300); /* Info text that sits on high-contrast surfaces or backgrounds. */
|
|
572
560
|
--dt-color-foreground-warning-inverted: var(--dt-color-gold-500); /* Warning text that sits on high-contrast surfaces or backgrounds */
|
|
573
|
-
--dt-color-foreground-success-strong-inverted: var(--dt-color-green-50); /* Success strong text that sits on high-contrast surfaces or backgrounds. */
|
|
574
|
-
--dt-color-foreground-success-inverted: var(--dt-color-green-200); /* Success text that sits on high-contrast surfaces or backgrounds. */
|
|
575
561
|
--dt-color-foreground-positive-strong-inverted: var(--dt-color-green-50); /* Positive strong text that sits on high-contrast surfaces or backgrounds. */
|
|
576
562
|
--dt-color-foreground-positive-inverted: var(--dt-color-green-200); /* Positive text that sits on high-contrast surfaces or backgrounds. */
|
|
577
563
|
--dt-color-foreground-critical-strong-inverted: var(--dt-color-red-200); /* Critical strong text that sits on high-contrast surfaces or backgrounds */
|
|
578
564
|
--dt-color-foreground-critical-inverted: var(--dt-color-red-300); /* Critical text that sits on high-contrast surfaces or backgrounds */
|
|
579
565
|
--dt-color-foreground-disabled-inverted: var(--dt-color-black-400); /* Disabled text color that sits on high-contrast surfaces or backgrounds. */
|
|
580
566
|
--dt-color-foreground-placeholder-inverted: var(--dt-color-black-400); /* Placeholder text color that sits on high-contrast surfaces or backgrounds. */
|
|
581
|
-
--dt-color-foreground-muted-inverted: oklch(0.98 0
|
|
567
|
+
--dt-color-foreground-muted-inverted: oklch(0.98 0 48.7 / 0.65); /* Muted text color that sits on high-contrast surfaces or backgrounds. */
|
|
582
568
|
--dt-color-foreground-tertiary-inverted: var(--dt-color-black-300); /* Tertiary text color that sits on high-contrast surfaces or backgrounds. */
|
|
583
569
|
--dt-color-foreground-secondary-inverted: var(--dt-color-black-200); /* Secondary text color that sits on high-contrast surfaces or backgrounds. */
|
|
584
570
|
--dt-color-foreground-primary-inverted: var(--dt-color-black-100); /* Primary text that sits on high-contrast surfaces or backgrounds. */
|
|
585
571
|
--dt-color-foreground-info-strong: var(--dt-color-blue-900); /* Indicates a generally informational state on surfaces that require a stronger contrast. */
|
|
586
572
|
--dt-color-foreground-info: var(--dt-color-blue-800); /* Indicates a generally informational state. */
|
|
587
573
|
--dt-color-foreground-warning: var(--dt-color-gold-800); /* Indicates information that requires user’s attention and further action may be necessary. */
|
|
588
|
-
--dt-color-foreground-success-strong: var(--dt-color-green-950); /* Indicates a strong positive state on surfaces that require a stronger contrast. */
|
|
589
|
-
--dt-color-foreground-success: var(--dt-color-green-700); /* Indicates a positive state. */
|
|
590
574
|
--dt-color-foreground-positive-strong: var(--dt-color-green-950); /* Indicates a strong positive state on surfaces that require a stronger contrast. */
|
|
591
575
|
--dt-color-foreground-positive: var(--dt-color-green-700); /* Indicates a positive state. */
|
|
592
576
|
--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. */
|
|
593
577
|
--dt-color-foreground-critical: var(--dt-color-red-600); /* Expresses an error, danger, or otherwise critical state. */
|
|
594
578
|
--dt-color-foreground-disabled: var(--dt-color-black-500); /* Used for text paired with disabled content or components, like the form elements. */
|
|
595
579
|
--dt-color-foreground-placeholder: var(--dt-color-black-500); /* Text color for placeholder text within form elements. */
|
|
596
|
-
--dt-color-foreground-muted: oklch(0 0
|
|
580
|
+
--dt-color-foreground-muted: oklch(0.16 0 84.6 / 0.5);
|
|
597
581
|
--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. */
|
|
598
582
|
--dt-color-foreground-secondary: var(--dt-color-black-700); /* Example uses include introduction paragraphs, labels, and descriptions paired with form elements. */
|
|
599
583
|
--dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
|
|
@@ -661,39 +645,38 @@
|
|
|
661
645
|
--dt-theme-presence-color-background-busy-unavailable: var(--dt-presence-color-unavailable);
|
|
662
646
|
--dt-theme-presence-color-background-available: var(--dt-presence-color-available);
|
|
663
647
|
--dt-theme-sidebar-section-color-foreground: var(--dt-color-foreground-tertiary);
|
|
664
|
-
--dt-theme-sidebar-selected-row-color-background: oklch(0.
|
|
648
|
+
--dt-theme-sidebar-selected-row-color-background: oklch(0.26 0.01 78.2 / 0.09);
|
|
665
649
|
--dt-theme-sidebar-selected-row-color-foreground: var(--dt-color-foreground-primary);
|
|
666
|
-
--dt-theme-sidebar-row-color-background-active: oklch(0.
|
|
667
|
-
--dt-theme-sidebar-row-color-background-hover: oklch(0.
|
|
668
|
-
--dt-theme-sidebar-row-color-background: oklch(0.
|
|
650
|
+
--dt-theme-sidebar-row-color-background-active: oklch(0.26 0.01 78.2 / 0.15);
|
|
651
|
+
--dt-theme-sidebar-row-color-background-hover: oklch(0.26 0.01 78.2 / 0.11);
|
|
652
|
+
--dt-theme-sidebar-row-color-background: oklch(0.26 0.01 78.2 / 0);
|
|
669
653
|
--dt-theme-sidebar-status-color-foreground: var(--dt-color-foreground-tertiary);
|
|
670
654
|
--dt-theme-sidebar-color-foreground-unread: var(--dt-color-foreground-primary);
|
|
671
655
|
--dt-theme-sidebar-color-foreground: var(--dt-color-foreground-secondary);
|
|
672
|
-
--dt-theme-topbar-profile-color-background-active: oklch(0.
|
|
673
|
-
--dt-theme-topbar-profile-color-background-hover: oklch(0.
|
|
674
|
-
--dt-theme-topbar-profile-color-background-inverted: oklch(0.
|
|
675
|
-
--dt-theme-topbar-profile-color-background: oklch(0.
|
|
676
|
-
--dt-theme-topbar-profile-color-foreground-inverted: oklch(0.98 0
|
|
677
|
-
--dt-theme-topbar-button-color-background-active: oklch(0.
|
|
678
|
-
--dt-theme-topbar-button-color-background-hover: oklch(0.
|
|
679
|
-
--dt-theme-topbar-button-color-background: oklch(0.
|
|
656
|
+
--dt-theme-topbar-profile-color-background-active: oklch(0.26 0.01 78.2 / 0.14);
|
|
657
|
+
--dt-theme-topbar-profile-color-background-hover: oklch(0.26 0.01 78.2 / 0.1);
|
|
658
|
+
--dt-theme-topbar-profile-color-background-inverted: oklch(0.26 0.01 78.2 / 0.75);
|
|
659
|
+
--dt-theme-topbar-profile-color-background: oklch(0.26 0.01 78.2 / 0.05);
|
|
660
|
+
--dt-theme-topbar-profile-color-foreground-inverted: oklch(0.98 0 48.7 / 0.75);
|
|
661
|
+
--dt-theme-topbar-button-color-background-active: oklch(0.26 0.01 78.2 / 0.1);
|
|
662
|
+
--dt-theme-topbar-button-color-background-hover: oklch(0.26 0.01 78.2 / 0.05);
|
|
663
|
+
--dt-theme-topbar-button-color-background: oklch(0.26 0.01 78.2 / 0);
|
|
680
664
|
--dt-theme-topbar-button-color-foreground-hover: var(--dt-theme-color-base);
|
|
681
|
-
--dt-theme-topbar-button-color-foreground: oklch(0.
|
|
682
|
-
--dt-theme-topbar-field-color-border-active: oklch(0.
|
|
683
|
-
--dt-theme-topbar-field-color-border-hover: oklch(0.
|
|
684
|
-
--dt-theme-topbar-field-color-border: oklch(0.
|
|
685
|
-
--dt-theme-topbar-field-color-background-hover: oklch(0.
|
|
686
|
-
--dt-theme-topbar-field-color-background: oklch(0.
|
|
687
|
-
--dt-theme-topbar-field-color-foreground-hover: oklch(0.
|
|
688
|
-
--dt-theme-topbar-field-color-foreground: oklch(0.
|
|
665
|
+
--dt-theme-topbar-button-color-foreground: oklch(0.26 0.01 78.2 / 0.65);
|
|
666
|
+
--dt-theme-topbar-field-color-border-active: oklch(0.26 0.01 78.2 / 0.2);
|
|
667
|
+
--dt-theme-topbar-field-color-border-hover: oklch(0.26 0.01 78.2 / 0.1);
|
|
668
|
+
--dt-theme-topbar-field-color-border: oklch(0.26 0.01 78.2 / 0);
|
|
669
|
+
--dt-theme-topbar-field-color-background-hover: oklch(0.51 0.01 78.2);
|
|
670
|
+
--dt-theme-topbar-field-color-background: oklch(0.26 0.01 78.2 / 0.05);
|
|
671
|
+
--dt-theme-topbar-field-color-foreground-hover: oklch(0.26 0.01 78.2 / 0.75);
|
|
672
|
+
--dt-theme-topbar-field-color-foreground: oklch(0.26 0.01 78.2 / 0.5);
|
|
689
673
|
--dt-theme-topbar-color-background: var(--dt-color-surface-secondary);
|
|
690
|
-
--dt-theme-topbar-color-foreground: oklch(0.
|
|
674
|
+
--dt-theme-topbar-color-foreground: oklch(0.26 0.01 78.2 / 0.8);
|
|
691
675
|
--dt-action-color-border-positive-outlined-default: var(--dt-color-border-positive);
|
|
692
676
|
--dt-action-color-border-muted-outlined-default: var(--dt-color-border-default);
|
|
693
677
|
--dt-action-color-border-inverted-outlined-default: var(--dt-color-border-default-inverted);
|
|
694
678
|
--dt-action-color-border-critical-outlined-default: var(--dt-color-border-critical);
|
|
695
679
|
--dt-action-color-border-base-outlined-default: var(--dt-color-border-brand);
|
|
696
|
-
--dt-action-color-background-positive-primary-active: oklch(0.38 0.1 156);
|
|
697
680
|
--dt-action-color-background-positive-hover: var(--dt-color-surface-positive-opaque);
|
|
698
681
|
--dt-action-color-background-disabled-default: var(--dt-color-surface-bold-opaque);
|
|
699
682
|
--dt-action-color-background-muted-hover: var(--dt-color-surface-moderate-opaque);
|
|
@@ -815,8 +798,8 @@
|
|
|
815
798
|
--dt-typography-body-md-font-size: var(--dt-font-size-200); /* Base default medium text style for main content. */
|
|
816
799
|
--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. */
|
|
817
800
|
--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. */
|
|
818
|
-
--dt-color-chart-sequential-10-selected: oklch(0.
|
|
819
|
-
--dt-color-chart-sequential-10-hover: oklch(0.
|
|
801
|
+
--dt-color-chart-sequential-10-selected: oklch(0.28 0.05 193); /* Selected state for tenth sequential chart color. */
|
|
802
|
+
--dt-color-chart-sequential-10-hover: oklch(0.31 0.06 217); /* Hover state for tenth sequential chart color. */
|
|
820
803
|
--dt-color-chart-sequential-09: oklch(0.39 0.06 243); /* Ninth color in sequential chart series, extremely dark shade. */
|
|
821
804
|
--dt-color-chart-sequential-08: oklch(0.46 0.06 246); /* Eighth color in sequential chart series, very dark shade. */
|
|
822
805
|
--dt-color-chart-sequential-07: oklch(0.54 0.05 249); /* Seventh color in sequential chart series, dark shade. */
|
|
@@ -825,25 +808,46 @@
|
|
|
825
808
|
--dt-color-chart-sequential-04: oklch(0.75 0.03 258); /* Fourth color in sequential chart series, light-medium shade. */
|
|
826
809
|
--dt-color-chart-sequential-03: oklch(0.82 0.02 261); /* Third color in sequential chart series, light shade. */
|
|
827
810
|
--dt-color-chart-sequential-02: oklch(0.89 0.02 264); /* Second color in sequential chart series, very light shade. */
|
|
828
|
-
--dt-color-chart-sequential-01-selected: oklch(0.
|
|
829
|
-
--dt-color-chart-sequential-01-hover: oklch(0.
|
|
811
|
+
--dt-color-chart-sequential-01-selected: oklch(0.72 0.01 320); /* Selected state for first sequential chart color. */
|
|
812
|
+
--dt-color-chart-sequential-01-hover: oklch(0.84 0.01 293); /* Hover state for first sequential chart color. */
|
|
830
813
|
--dt-color-chart-categorical-11-selected: oklch(0.59 0.01 56.3);
|
|
831
814
|
--dt-color-chart-categorical-11-hover: oklch(0.71 0.01 56.3);
|
|
832
|
-
--dt-color-chart-categorical-28: oklch(0.
|
|
833
|
-
--dt-color-chart-categorical-26: oklch(0.
|
|
834
|
-
--dt-color-chart-categorical-22: oklch(0.
|
|
835
|
-
--dt-color-chart-categorical-21: oklch(0.
|
|
836
|
-
--dt-color-chart-categorical-20: oklch(0.
|
|
837
|
-
--dt-color-chart-categorical-19: oklch(0.
|
|
838
|
-
--dt-color-chart-categorical-18: oklch(0.
|
|
839
|
-
--dt-color-chart-categorical-17: oklch(0.74 0.21
|
|
815
|
+
--dt-color-chart-categorical-28: oklch(0.64 0.21 273);
|
|
816
|
+
--dt-color-chart-categorical-26: oklch(0.72 0.19 385);
|
|
817
|
+
--dt-color-chart-categorical-22: oklch(0.77 0.09 362);
|
|
818
|
+
--dt-color-chart-categorical-21: oklch(0.67 0.17 119);
|
|
819
|
+
--dt-color-chart-categorical-20: oklch(0.64 0.21 273);
|
|
820
|
+
--dt-color-chart-categorical-19: oklch(0.62 0.21 244);
|
|
821
|
+
--dt-color-chart-categorical-18: oklch(0.78 0.14 86.6);
|
|
822
|
+
--dt-color-chart-categorical-17: oklch(0.74 0.21 343);
|
|
840
823
|
--dt-color-chart-categorical-16: oklch(0.66 0.15 140);
|
|
841
|
-
--dt-color-chart-categorical-15: oklch(0.
|
|
842
|
-
--dt-color-chart-categorical-14: oklch(0.
|
|
843
|
-
--dt-color-chart-categorical-13: oklch(0.68 0.
|
|
844
|
-
--dt-color-chart-categorical-12: oklch(0.
|
|
845
|
-
--dt-color-
|
|
824
|
+
--dt-color-chart-categorical-15: oklch(0.74 0.19 399);
|
|
825
|
+
--dt-color-chart-categorical-14: oklch(0.66 0.21 280);
|
|
826
|
+
--dt-color-chart-categorical-13: oklch(0.68 0.21 398);
|
|
827
|
+
--dt-color-chart-categorical-12: oklch(0.64 0.22 329);
|
|
828
|
+
--dt-color-border-success-strong-inverted: var(--dt-color-border-positive-strong-inverted);
|
|
829
|
+
--dt-color-border-success-subtle-inverted: var(--dt-color-border-positive-subtle-inverted);
|
|
830
|
+
--dt-color-border-success-inverted: var(--dt-color-border-positive-inverted);
|
|
831
|
+
--dt-color-border-success-strong: var(--dt-color-border-positive-strong);
|
|
832
|
+
--dt-color-border-success-subtle: var(--dt-color-border-positive-subtle);
|
|
833
|
+
--dt-color-border-success: var(--dt-color-border-positive);
|
|
834
|
+
--dt-color-surface-success-subtle-opaque-inverted: var(--dt-color-surface-positive-subtle-opaque-inverted); /* Success subtle surface as opaque background color. */
|
|
835
|
+
--dt-color-surface-success-opaque-inverted: var(--dt-color-surface-positive-opaque-inverted); /* Success surface as opaque background color. */
|
|
836
|
+
--dt-color-surface-primary-opaque-inverted: oklch(0.16 0 84.6 / 0.85); /* Secondary surface as opaque background color. */
|
|
837
|
+
--dt-color-surface-success-subtle-inverted: var(--dt-color-surface-positive-subtle-inverted); /* A softer version of the default success surface. */
|
|
838
|
+
--dt-color-surface-success-inverted: var(--dt-color-surface-positive-inverted); /* Background surface color containing messaging or elements expressing a positive or successful state. */
|
|
839
|
+
--dt-color-surface-success-subtle-opaque: var(--dt-color-surface-positive-subtle-opaque); /* Success subtle surface as opaque background color. */
|
|
840
|
+
--dt-color-surface-success-opaque: var(--dt-color-surface-positive-opaque); /* Success surface as opaque background color. */
|
|
846
841
|
--dt-color-surface-primary-opaque: oklch(1 0 0 / 0.96); /* Primary surface as opaque background color. */
|
|
842
|
+
--dt-color-surface-success-strong: var(--dt-color-surface-positive-strong); /* A contrasting positive state surface, most likely paired with inverted foreground colors. */
|
|
843
|
+
--dt-color-surface-success-subtle: var(--dt-color-surface-positive-subtle); /* A softer version of the default success surface. */
|
|
844
|
+
--dt-color-surface-success: var(--dt-color-surface-positive); /* Background surface color containing messaging or elements expressing a positive or successful state. */
|
|
845
|
+
--dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
|
|
846
|
+
--dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
|
|
847
|
+
--dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
|
|
848
|
+
--dt-color-link-mention-background: oklch(0.85 0.09 301 / 0.1);
|
|
849
|
+
--dt-color-link-mention-hover: var(--dt-color-link-primary-hover);
|
|
850
|
+
--dt-color-link-mention: var(--dt-color-link-primary);
|
|
847
851
|
--dt-color-link-disabled-inverted-hover: var(--dt-color-foreground-disabled-inverted);
|
|
848
852
|
--dt-color-link-disabled-inverted: var(--dt-color-foreground-disabled-inverted);
|
|
849
853
|
--dt-color-link-muted-inverted: var(--dt-color-foreground-secondary-inverted);
|
|
@@ -859,8 +863,6 @@
|
|
|
859
863
|
--dt-color-link-disabled: var(--dt-color-foreground-disabled);
|
|
860
864
|
--dt-color-link-muted-hover: var(--dt-color-foreground-primary);
|
|
861
865
|
--dt-color-link-muted: var(--dt-color-foreground-secondary);
|
|
862
|
-
--dt-color-link-info-hover: var(--dt-color-foreground-info-strong);
|
|
863
|
-
--dt-color-link-info: var(--dt-color-foreground-info);
|
|
864
866
|
--dt-color-link-warning: var(--dt-color-foreground-warning);
|
|
865
867
|
--dt-color-link-success-hover: var(--dt-color-foreground-positive-strong);
|
|
866
868
|
--dt-color-link-success: var(--dt-color-foreground-positive); /* positive */
|
|
@@ -868,19 +870,23 @@
|
|
|
868
870
|
--dt-color-link-positive: var(--dt-color-foreground-positive); /* positive */
|
|
869
871
|
--dt-color-link-critical-hover: var(--dt-color-foreground-critical-strong);
|
|
870
872
|
--dt-color-link-critical: var(--dt-color-foreground-critical);
|
|
873
|
+
--dt-color-foreground-success-strong-inverted: var(--dt-color-foreground-positive-strong-inverted); /* Success strong text that sits on high-contrast surfaces or backgrounds. */
|
|
874
|
+
--dt-color-foreground-success-inverted: var(--dt-color-foreground-positive-inverted); /* Success text that sits on high-contrast surfaces or backgrounds. */
|
|
875
|
+
--dt-color-foreground-success-strong: var(--dt-color-foreground-positive-strong); /* Indicates a strong positive state on surfaces that require a stronger contrast. */
|
|
876
|
+
--dt-color-foreground-success: var(--dt-color-foreground-positive); /* Indicates a positive state. */
|
|
871
877
|
--dt-icon-size-border-500: var(--dt-icon-size-border-400);
|
|
872
878
|
--dt-shell-action-color-foreground-muted-selected: oklch(0.06 0.08 286 / 0.6);
|
|
873
879
|
--dt-shell-action-color-foreground-muted-hover: oklch(0.08 0.08 286 / 0.6);
|
|
874
|
-
--dt-shell-color-foreground-warning: oklch(0.
|
|
875
|
-
--dt-shell-color-foreground-critical: oklch(0.
|
|
880
|
+
--dt-shell-color-foreground-warning: oklch(0.31 0.1 61.6);
|
|
881
|
+
--dt-shell-color-foreground-critical: oklch(0.46 0.23 18.6);
|
|
876
882
|
--dt-shell-color-foreground-positive: oklch(0.44 0.13 155);
|
|
877
883
|
--dt-theme-sidebar-icon-color-foreground: var(--dt-theme-sidebar-color-foreground);
|
|
878
884
|
--dt-theme-sidebar-color-background: var(--dt-theme-topbar-color-background);
|
|
879
885
|
--dt-theme-topbar-profile-color-foreground: var(--dt-theme-topbar-color-foreground);
|
|
880
886
|
--dt-action-color-background-positive-active: oklch(0.55 0.17 159 / 0.25);
|
|
881
|
-
--dt-action-color-background-muted-active: oklch(0.
|
|
882
|
-
--dt-action-color-background-critical-active: oklch(0.73 0.
|
|
883
|
-
--dt-action-color-background-base-active: oklch(0.
|
|
887
|
+
--dt-action-color-background-muted-active: oklch(0.26 0.01 78.2 / 0.14);
|
|
888
|
+
--dt-action-color-background-critical-active: oklch(0.73 0.1 12.7 / 0.31);
|
|
889
|
+
--dt-action-color-background-base-active: oklch(0.76 0.09 301 / 0.39);
|
|
884
890
|
--dt-action-color-foreground-positive-hover: var(--dt-color-link-positive-hover);
|
|
885
891
|
--dt-action-color-foreground-positive-default: var(--dt-color-link-positive);
|
|
886
892
|
--dt-action-color-foreground-muted-hover: var(--dt-color-link-muted-hover);
|
|
@@ -942,72 +948,72 @@
|
|
|
942
948
|
--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);
|
|
943
949
|
--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);
|
|
944
950
|
--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) */
|
|
945
|
-
--dt-color-chart-sequential-09-selected: oklch(0.
|
|
946
|
-
--dt-color-chart-sequential-09-hover: oklch(0.
|
|
947
|
-
--dt-color-chart-sequential-08-selected: oklch(0.
|
|
948
|
-
--dt-color-chart-sequential-08-hover: oklch(0.
|
|
949
|
-
--dt-color-chart-sequential-07-selected: oklch(0.
|
|
950
|
-
--dt-color-chart-sequential-07-hover: oklch(0.
|
|
951
|
-
--dt-color-chart-sequential-06-selected: oklch(0.
|
|
952
|
-
--dt-color-chart-sequential-06-hover: oklch(0.
|
|
953
|
-
--dt-color-chart-sequential-05-selected: oklch(0.
|
|
954
|
-
--dt-color-chart-sequential-05-hover: oklch(0.
|
|
955
|
-
--dt-color-chart-sequential-04-selected: oklch(0.
|
|
956
|
-
--dt-color-chart-sequential-04-hover: oklch(0.
|
|
957
|
-
--dt-color-chart-sequential-03-selected: oklch(0.
|
|
958
|
-
--dt-color-chart-sequential-03-hover: oklch(0.
|
|
959
|
-
--dt-color-chart-sequential-02-selected: oklch(0.
|
|
960
|
-
--dt-color-chart-sequential-02-hover: oklch(0.
|
|
961
|
-
--dt-color-chart-categorical-28-selected: oklch(0.
|
|
962
|
-
--dt-color-chart-categorical-28-hover: oklch(0.
|
|
963
|
-
--dt-color-chart-categorical-26-selected: oklch(0.
|
|
964
|
-
--dt-color-chart-categorical-26-hover: oklch(0.
|
|
965
|
-
--dt-color-chart-categorical-22-selected: oklch(0.
|
|
966
|
-
--dt-color-chart-categorical-22-hover: oklch(0.
|
|
967
|
-
--dt-color-chart-categorical-21-selected: oklch(0.
|
|
968
|
-
--dt-color-chart-categorical-21-hover: oklch(0.
|
|
969
|
-
--dt-color-chart-categorical-20-selected: oklch(0.
|
|
970
|
-
--dt-color-chart-categorical-20-hover: oklch(0.
|
|
971
|
-
--dt-color-chart-categorical-19-selected: oklch(0.
|
|
972
|
-
--dt-color-chart-categorical-19-hover: oklch(0.
|
|
973
|
-
--dt-color-chart-categorical-18-selected: oklch(0.
|
|
974
|
-
--dt-color-chart-categorical-18-hover: oklch(0.
|
|
975
|
-
--dt-color-chart-categorical-17-selected: oklch(0.52 0.21
|
|
976
|
-
--dt-color-chart-categorical-17-hover: oklch(0.63 0.21
|
|
951
|
+
--dt-color-chart-sequential-09-selected: oklch(0.32 0.04 195); /* Selected state for ninth sequential chart color. */
|
|
952
|
+
--dt-color-chart-sequential-09-hover: oklch(0.36 0.05 219); /* Hover state for ninth sequential chart color. */
|
|
953
|
+
--dt-color-chart-sequential-08-selected: oklch(0.37 0.04 198); /* Selected state for eighth sequential chart color. */
|
|
954
|
+
--dt-color-chart-sequential-08-hover: oklch(0.41 0.05 222); /* Hover state for eighth sequential chart color. */
|
|
955
|
+
--dt-color-chart-sequential-07-selected: oklch(0.43 0.04 200); /* Selected state for seventh sequential chart color. */
|
|
956
|
+
--dt-color-chart-sequential-07-hover: oklch(0.48 0.04 224); /* Hover state for seventh sequential chart color. */
|
|
957
|
+
--dt-color-chart-sequential-06-selected: oklch(0.47 0.03 202); /* Selected state for sixth sequential chart color. */
|
|
958
|
+
--dt-color-chart-sequential-06-hover: oklch(0.54 0.03 227); /* Hover state for sixth sequential chart color. */
|
|
959
|
+
--dt-color-chart-sequential-05-selected: oklch(0.52 0.03 204); /* Selected state for fifth sequential chart color. */
|
|
960
|
+
--dt-color-chart-sequential-05-hover: oklch(0.6 0.03 229); /* Hover state for fifth sequential chart color. */
|
|
961
|
+
--dt-color-chart-sequential-04-selected: oklch(0.57 0.02 206); /* Selected state for fourth sequential chart color. */
|
|
962
|
+
--dt-color-chart-sequential-04-hover: oklch(0.66 0.03 232); /* Hover state for fourth sequential chart color. */
|
|
963
|
+
--dt-color-chart-sequential-03-selected: oklch(0.62 0.02 208); /* Selected state for third sequential chart color. */
|
|
964
|
+
--dt-color-chart-sequential-03-hover: oklch(0.72 0.02 235); /* Hover state for third sequential chart color. */
|
|
965
|
+
--dt-color-chart-sequential-02-selected: oklch(0.67 0.02 210); /* Selected state for second sequential chart color. */
|
|
966
|
+
--dt-color-chart-sequential-02-hover: oklch(0.78 0.02 237); /* Hover state for second sequential chart color. */
|
|
967
|
+
--dt-color-chart-categorical-28-selected: oklch(0.45 0.21 273);
|
|
968
|
+
--dt-color-chart-categorical-28-hover: oklch(0.54 0.21 273);
|
|
969
|
+
--dt-color-chart-categorical-26-selected: oklch(0.5 0.19 385);
|
|
970
|
+
--dt-color-chart-categorical-26-hover: oklch(0.61 0.19 385);
|
|
971
|
+
--dt-color-chart-categorical-22-selected: oklch(0.54 0.09 362);
|
|
972
|
+
--dt-color-chart-categorical-22-hover: oklch(0.65 0.09 362);
|
|
973
|
+
--dt-color-chart-categorical-21-selected: oklch(0.47 0.17 119);
|
|
974
|
+
--dt-color-chart-categorical-21-hover: oklch(0.57 0.17 119);
|
|
975
|
+
--dt-color-chart-categorical-20-selected: oklch(0.45 0.21 273);
|
|
976
|
+
--dt-color-chart-categorical-20-hover: oklch(0.54 0.21 273);
|
|
977
|
+
--dt-color-chart-categorical-19-selected: oklch(0.43 0.21 244);
|
|
978
|
+
--dt-color-chart-categorical-19-hover: oklch(0.53 0.21 244);
|
|
979
|
+
--dt-color-chart-categorical-18-selected: oklch(0.55 0.14 86.6);
|
|
980
|
+
--dt-color-chart-categorical-18-hover: oklch(0.66 0.14 86.6);
|
|
981
|
+
--dt-color-chart-categorical-17-selected: oklch(0.52 0.21 343);
|
|
982
|
+
--dt-color-chart-categorical-17-hover: oklch(0.63 0.21 343);
|
|
977
983
|
--dt-color-chart-categorical-16-selected: oklch(0.46 0.15 140);
|
|
978
984
|
--dt-color-chart-categorical-16-hover: oklch(0.56 0.15 140);
|
|
979
|
-
--dt-color-chart-categorical-15-selected: oklch(0.52 0.
|
|
980
|
-
--dt-color-chart-categorical-15-hover: oklch(0.
|
|
981
|
-
--dt-color-chart-categorical-14-selected: oklch(0.
|
|
982
|
-
--dt-color-chart-categorical-14-hover: oklch(0.
|
|
983
|
-
--dt-color-chart-categorical-13-selected: oklch(0.48 0.
|
|
984
|
-
--dt-color-chart-categorical-13-hover: oklch(0.58 0.
|
|
985
|
-
--dt-color-chart-categorical-12-selected: oklch(0.
|
|
986
|
-
--dt-color-chart-categorical-12-hover: oklch(0.
|
|
987
|
-
--dt-color-chart-categorical-30: oklch(0.
|
|
988
|
-
--dt-color-chart-categorical-29: oklch(0.
|
|
989
|
-
--dt-color-chart-categorical-27: oklch(0.
|
|
990
|
-
--dt-color-chart-categorical-25: oklch(0.
|
|
991
|
-
--dt-color-chart-categorical-24: oklch(0.71 0.
|
|
992
|
-
--dt-color-chart-categorical-23: oklch(0.
|
|
985
|
+
--dt-color-chart-categorical-15-selected: oklch(0.52 0.19 399);
|
|
986
|
+
--dt-color-chart-categorical-15-hover: oklch(0.63 0.19 399);
|
|
987
|
+
--dt-color-chart-categorical-14-selected: oklch(0.46 0.21 280);
|
|
988
|
+
--dt-color-chart-categorical-14-hover: oklch(0.56 0.21 280);
|
|
989
|
+
--dt-color-chart-categorical-13-selected: oklch(0.48 0.21 398);
|
|
990
|
+
--dt-color-chart-categorical-13-hover: oklch(0.58 0.21 398);
|
|
991
|
+
--dt-color-chart-categorical-12-selected: oklch(0.45 0.22 329);
|
|
992
|
+
--dt-color-chart-categorical-12-hover: oklch(0.54 0.22 329);
|
|
993
|
+
--dt-color-chart-categorical-30: oklch(0.63 0.18 231);
|
|
994
|
+
--dt-color-chart-categorical-29: oklch(0.75 0.16 418);
|
|
995
|
+
--dt-color-chart-categorical-27: oklch(0.64 0.17 176);
|
|
996
|
+
--dt-color-chart-categorical-25: oklch(0.7 0.19 330);
|
|
997
|
+
--dt-color-chart-categorical-24: oklch(0.71 0.2 46.6);
|
|
998
|
+
--dt-color-chart-categorical-23: oklch(0.67 0.21 350);
|
|
993
999
|
--dt-color-link-disabled-hover: var(--dt-color-link-disabled);
|
|
994
1000
|
--dt-shell-action-color-foreground-muted-active: var(--dt-shell-action-color-foreground-muted-hover);
|
|
995
1001
|
--dt-action-color-foreground-positive-active: var(--dt-action-color-foreground-positive-hover);
|
|
996
1002
|
--dt-action-color-foreground-muted-active: var(--dt-action-color-foreground-muted-hover);
|
|
997
1003
|
--dt-action-color-foreground-inverted-active: var(--dt-action-color-foreground-inverted-hover);
|
|
998
1004
|
--dt-action-color-foreground-critical-active: var(--dt-action-color-foreground-critical-hover);
|
|
999
|
-
--dt-color-chart-categorical-30-selected: oklch(0.
|
|
1000
|
-
--dt-color-chart-categorical-30-hover: oklch(0.
|
|
1001
|
-
--dt-color-chart-categorical-29-selected: oklch(0.
|
|
1002
|
-
--dt-color-chart-categorical-29-hover: oklch(0.
|
|
1003
|
-
--dt-color-chart-categorical-27-selected: oklch(0.
|
|
1004
|
-
--dt-color-chart-categorical-27-hover: oklch(0.
|
|
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.5 0.
|
|
1008
|
-
--dt-color-chart-categorical-24-hover: oklch(0.6 0.
|
|
1009
|
-
--dt-color-chart-categorical-23-selected: oklch(0.
|
|
1010
|
-
--dt-color-chart-categorical-23-hover: oklch(0.
|
|
1005
|
+
--dt-color-chart-categorical-30-selected: oklch(0.44 0.18 231);
|
|
1006
|
+
--dt-color-chart-categorical-30-hover: oklch(0.54 0.18 231);
|
|
1007
|
+
--dt-color-chart-categorical-29-selected: oklch(0.52 0.16 418);
|
|
1008
|
+
--dt-color-chart-categorical-29-hover: oklch(0.64 0.16 418);
|
|
1009
|
+
--dt-color-chart-categorical-27-selected: oklch(0.45 0.17 176);
|
|
1010
|
+
--dt-color-chart-categorical-27-hover: oklch(0.54 0.17 176);
|
|
1011
|
+
--dt-color-chart-categorical-25-selected: oklch(0.49 0.19 330);
|
|
1012
|
+
--dt-color-chart-categorical-25-hover: oklch(0.59 0.19 330);
|
|
1013
|
+
--dt-color-chart-categorical-24-selected: oklch(0.5 0.2 46.6);
|
|
1014
|
+
--dt-color-chart-categorical-24-hover: oklch(0.6 0.2 46.6);
|
|
1015
|
+
--dt-color-chart-categorical-23-selected: oklch(0.47 0.21 350);
|
|
1016
|
+
--dt-color-chart-categorical-23-hover: oklch(0.57 0.21 350);
|
|
1011
1017
|
--dt-font-size-100-mobile: 1.2rem;
|
|
1012
1018
|
--dt-font-size-200-mobile: 1.6rem;
|
|
1013
1019
|
--dt-font-size-300-mobile: 2rem;
|