@dialpad/dialtone-css 8.80.0-next.1 → 8.80.0-next.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (187) hide show
  1. package/lib/build/js/dialtone_migrate_link_rendering/button-nav-test-examples.vue +92 -0
  2. package/lib/build/js/dialtone_migrate_link_rendering/button-nav.test.mjs +272 -0
  3. package/lib/build/js/dialtone_migrate_link_rendering/helpers.mjs +25 -0
  4. package/lib/build/js/dialtone_migrate_link_rendering/index.mjs +1041 -0
  5. package/lib/build/js/dialtone_migrate_link_rendering/link-nav-test-examples.vue +97 -0
  6. package/lib/build/js/dialtone_migrate_link_rendering/link-nav.test.mjs +194 -0
  7. package/lib/build/js/dialtone_migrate_link_rendering/underline-test-examples.vue +57 -0
  8. package/lib/build/js/dialtone_migrate_link_rendering/underline.test.mjs +161 -0
  9. package/lib/build/js/dialtone_migrate_props/index.mjs +794 -0
  10. package/lib/build/js/dialtone_migrate_props/test.mjs +959 -0
  11. package/lib/build/js/dialtone_migration_helper/configs/base-to-semantic.mjs +8 -8
  12. package/lib/build/js/dialtone_migration_helper/configs/size-to-layout.mjs +10 -0
  13. package/lib/build/js/dialtone_migration_helper/configs/success-to-positive.mjs +73 -0
  14. package/lib/build/js/dialtone_migration_helper/configs/utility-class-to-token-stops.mjs +92 -12
  15. package/lib/build/js/dialtone_migration_helper/tests/base-to-semantic-test-examples.vue +10 -10
  16. package/lib/build/js/dialtone_migration_helper/tests/base-to-semantic.test.mjs +8 -8
  17. package/lib/build/js/dialtone_migration_helper/tests/size-to-layout-test-examples.vue +16 -0
  18. package/lib/build/js/dialtone_migration_helper/tests/size-to-layout.test.mjs +87 -0
  19. package/lib/build/js/dialtone_migration_helper/tests/success-to-positive-test-examples.vue +166 -0
  20. package/lib/build/js/dialtone_migration_helper/tests/success-to-positive.test.mjs +287 -0
  21. package/lib/build/js/dialtone_migration_helper/tests/utility-class-to-token-stops-radius-examples.vue +66 -0
  22. package/lib/build/js/dialtone_migration_helper/tests/utility-class-to-token-stops.test.mjs +170 -0
  23. package/lib/build/less/components/badge.less +1 -1
  24. package/lib/build/less/components/banner.less +1 -1
  25. package/lib/build/less/components/box.less +228 -0
  26. package/lib/build/less/components/description-list.less +4 -0
  27. package/lib/build/less/components/forms.less +4 -2
  28. package/lib/build/less/components/input.less +2 -2
  29. package/lib/build/less/components/link.less +18 -4
  30. package/lib/build/less/components/modal.less +1 -1
  31. package/lib/build/less/components/notice.less +3 -3
  32. package/lib/build/less/components/progress_circle.less +10 -2
  33. package/lib/build/less/components/prose.less +512 -0
  34. package/lib/build/less/components/rich-text-editor.less +7 -0
  35. package/lib/build/less/components/selects.less +1 -1
  36. package/lib/build/less/components/text.less +2 -2
  37. package/lib/build/less/components/toast.less +1 -1
  38. package/lib/build/less/dialtone.less +2 -0
  39. package/lib/build/less/recipes/leftbar_row.less +1 -0
  40. package/lib/build/less/recipes/settings_menu_button.less +1 -1
  41. package/lib/build/less/recipes/top_banner_info.less +1 -1
  42. package/lib/build/less/utilities/backgrounds.less +12 -0
  43. package/lib/build/less/utilities/borders.less +56 -89
  44. package/lib/build/less/utilities/colors.less +8 -0
  45. package/lib/build/less/utilities/effects.less +1 -0
  46. package/lib/build/less/utilities/flex.less +145 -18
  47. package/lib/build/less/utilities/grid.less +40 -152
  48. package/lib/build/less/utilities/layout.less +19 -7
  49. package/lib/build/less/utilities/sizing.less +148 -143
  50. package/lib/build/less/variables/visual-styles.less +2 -1
  51. package/lib/dist/dialtone-default-theme.css +4364 -1756
  52. package/lib/dist/dialtone-default-theme.min.css +1 -1
  53. package/lib/dist/dialtone-docs.json +1 -1
  54. package/lib/dist/dialtone.css +4271 -1705
  55. package/lib/dist/dialtone.min.css +1 -1
  56. package/lib/dist/js/dialtone_migrate_link_rendering/button-nav-test-examples.vue +92 -0
  57. package/lib/dist/js/dialtone_migrate_link_rendering/button-nav.test.mjs +272 -0
  58. package/lib/dist/js/dialtone_migrate_link_rendering/helpers.mjs +25 -0
  59. package/lib/dist/js/dialtone_migrate_link_rendering/index.mjs +1041 -0
  60. package/lib/dist/js/dialtone_migrate_link_rendering/link-nav-test-examples.vue +97 -0
  61. package/lib/dist/js/dialtone_migrate_link_rendering/link-nav.test.mjs +194 -0
  62. package/lib/dist/js/dialtone_migrate_link_rendering/underline-test-examples.vue +57 -0
  63. package/lib/dist/js/dialtone_migrate_link_rendering/underline.test.mjs +161 -0
  64. package/lib/dist/js/dialtone_migrate_props/index.mjs +794 -0
  65. package/lib/dist/js/dialtone_migrate_props/test.mjs +959 -0
  66. package/lib/dist/js/dialtone_migration_helper/configs/base-to-semantic.mjs +8 -8
  67. package/lib/dist/js/dialtone_migration_helper/configs/size-to-layout.mjs +10 -0
  68. package/lib/dist/js/dialtone_migration_helper/configs/success-to-positive.mjs +73 -0
  69. package/lib/dist/js/dialtone_migration_helper/configs/utility-class-to-token-stops.mjs +92 -12
  70. package/lib/dist/js/dialtone_migration_helper/tests/base-to-semantic-test-examples.vue +10 -10
  71. package/lib/dist/js/dialtone_migration_helper/tests/base-to-semantic.test.mjs +8 -8
  72. package/lib/dist/js/dialtone_migration_helper/tests/size-to-layout-test-examples.vue +16 -0
  73. package/lib/dist/js/dialtone_migration_helper/tests/size-to-layout.test.mjs +87 -0
  74. package/lib/dist/js/dialtone_migration_helper/tests/success-to-positive-test-examples.vue +166 -0
  75. package/lib/dist/js/dialtone_migration_helper/tests/success-to-positive.test.mjs +287 -0
  76. package/lib/dist/js/dialtone_migration_helper/tests/utility-class-to-token-stops-radius-examples.vue +66 -0
  77. package/lib/dist/js/dialtone_migration_helper/tests/utility-class-to-token-stops.test.mjs +170 -0
  78. package/lib/dist/tokens/tokens-101-dark.css +81 -45
  79. package/lib/dist/tokens/tokens-101-light.css +75 -39
  80. package/lib/dist/tokens/tokens-102-dark.css +81 -45
  81. package/lib/dist/tokens/tokens-102-light.css +75 -39
  82. package/lib/dist/tokens/tokens-103-dark.css +81 -45
  83. package/lib/dist/tokens/tokens-103-light.css +75 -39
  84. package/lib/dist/tokens/tokens-104-dark.css +81 -45
  85. package/lib/dist/tokens/tokens-104-light.css +75 -39
  86. package/lib/dist/tokens/tokens-105-dark.css +81 -45
  87. package/lib/dist/tokens/tokens-105-light.css +75 -39
  88. package/lib/dist/tokens/tokens-106-dark.css +81 -45
  89. package/lib/dist/tokens/tokens-106-light.css +75 -39
  90. package/lib/dist/tokens/tokens-107-dark.css +81 -45
  91. package/lib/dist/tokens/tokens-107-light.css +75 -39
  92. package/lib/dist/tokens/tokens-108-dark.css +81 -45
  93. package/lib/dist/tokens/tokens-108-light.css +75 -39
  94. package/lib/dist/tokens/tokens-109-dark.css +81 -45
  95. package/lib/dist/tokens/tokens-109-light.css +75 -39
  96. package/lib/dist/tokens/tokens-110-dark.css +81 -45
  97. package/lib/dist/tokens/tokens-110-light.css +75 -39
  98. package/lib/dist/tokens/tokens-111-dark.css +81 -45
  99. package/lib/dist/tokens/tokens-111-light.css +75 -39
  100. package/lib/dist/tokens/tokens-112-dark.css +81 -45
  101. package/lib/dist/tokens/tokens-112-light.css +75 -39
  102. package/lib/dist/tokens/tokens-113-dark.css +81 -45
  103. package/lib/dist/tokens/tokens-113-light.css +75 -39
  104. package/lib/dist/tokens/tokens-114-dark.css +81 -45
  105. package/lib/dist/tokens/tokens-114-light.css +75 -39
  106. package/lib/dist/tokens/tokens-115-dark.css +81 -45
  107. package/lib/dist/tokens/tokens-115-light.css +75 -39
  108. package/lib/dist/tokens/tokens-116-dark.css +81 -45
  109. package/lib/dist/tokens/tokens-116-light.css +75 -39
  110. package/lib/dist/tokens/tokens-117-dark.css +81 -45
  111. package/lib/dist/tokens/tokens-117-light.css +75 -39
  112. package/lib/dist/tokens/tokens-118-dark.css +81 -45
  113. package/lib/dist/tokens/tokens-118-light.css +75 -39
  114. package/lib/dist/tokens/tokens-119-dark.css +81 -45
  115. package/lib/dist/tokens/tokens-119-light.css +75 -39
  116. package/lib/dist/tokens/tokens-120-dark.css +81 -45
  117. package/lib/dist/tokens/tokens-120-light.css +75 -39
  118. package/lib/dist/tokens/tokens-121-dark.css +81 -45
  119. package/lib/dist/tokens/tokens-121-light.css +75 -39
  120. package/lib/dist/tokens/tokens-122-dark.css +81 -45
  121. package/lib/dist/tokens/tokens-122-light.css +75 -39
  122. package/lib/dist/tokens/tokens-123-dark.css +81 -45
  123. package/lib/dist/tokens/tokens-123-light.css +75 -39
  124. package/lib/dist/tokens/tokens-124-dark.css +81 -45
  125. package/lib/dist/tokens/tokens-124-light.css +75 -39
  126. package/lib/dist/tokens/tokens-125-dark.css +81 -45
  127. package/lib/dist/tokens/tokens-125-light.css +75 -39
  128. package/lib/dist/tokens/tokens-126-dark.css +81 -45
  129. package/lib/dist/tokens/tokens-126-light.css +75 -39
  130. package/lib/dist/tokens/tokens-127-dark.css +81 -45
  131. package/lib/dist/tokens/tokens-127-light.css +75 -39
  132. package/lib/dist/tokens/tokens-128-dark.css +81 -45
  133. package/lib/dist/tokens/tokens-128-light.css +75 -39
  134. package/lib/dist/tokens/tokens-129-dark.css +81 -45
  135. package/lib/dist/tokens/tokens-129-light.css +75 -39
  136. package/lib/dist/tokens/tokens-130-dark.css +81 -45
  137. package/lib/dist/tokens/tokens-130-light.css +75 -39
  138. package/lib/dist/tokens/tokens-131-dark.css +81 -45
  139. package/lib/dist/tokens/tokens-131-light.css +75 -39
  140. package/lib/dist/tokens/tokens-132-dark.css +81 -45
  141. package/lib/dist/tokens/tokens-132-light.css +75 -39
  142. package/lib/dist/tokens/tokens-133-dark.css +81 -45
  143. package/lib/dist/tokens/tokens-133-light.css +75 -39
  144. package/lib/dist/tokens/tokens-134-dark.css +81 -45
  145. package/lib/dist/tokens/tokens-134-light.css +75 -39
  146. package/lib/dist/tokens/tokens-135-dark.css +81 -45
  147. package/lib/dist/tokens/tokens-135-light.css +75 -39
  148. package/lib/dist/tokens/tokens-136-dark.css +81 -45
  149. package/lib/dist/tokens/tokens-136-light.css +75 -39
  150. package/lib/dist/tokens/tokens-137-dark.css +81 -45
  151. package/lib/dist/tokens/tokens-137-light.css +75 -39
  152. package/lib/dist/tokens/tokens-aegean-dark.css +81 -45
  153. package/lib/dist/tokens/tokens-aegean-light.css +75 -39
  154. package/lib/dist/tokens/tokens-base-dark.css +18 -12
  155. package/lib/dist/tokens/tokens-base-light.css +18 -12
  156. package/lib/dist/tokens/tokens-botany-dark.css +81 -45
  157. package/lib/dist/tokens/tokens-botany-light.css +75 -39
  158. package/lib/dist/tokens/tokens-buttercream-dark.css +81 -45
  159. package/lib/dist/tokens/tokens-buttercream-light.css +75 -39
  160. package/lib/dist/tokens/tokens-ceruleo-dark.css +81 -45
  161. package/lib/dist/tokens/tokens-ceruleo-light.css +75 -39
  162. package/lib/dist/tokens/tokens-debug-base.css +6 -0
  163. package/lib/dist/tokens/tokens-debug-dp.css +39 -3
  164. package/lib/dist/tokens/tokens-dp-dark.css +81 -45
  165. package/lib/dist/tokens/tokens-dp-light.css +75 -39
  166. package/lib/dist/tokens/tokens-expressive-dark.css +81 -45
  167. package/lib/dist/tokens/tokens-expressive-light.css +75 -39
  168. package/lib/dist/tokens/tokens-expressive-sm-dark.css +81 -45
  169. package/lib/dist/tokens/tokens-expressive-sm-light.css +75 -39
  170. package/lib/dist/tokens/tokens-high-desert-dark.css +81 -45
  171. package/lib/dist/tokens/tokens-high-desert-light.css +75 -39
  172. package/lib/dist/tokens/tokens-melon-dark.css +81 -45
  173. package/lib/dist/tokens/tokens-melon-light.css +75 -39
  174. package/lib/dist/tokens/tokens-plum-dark.css +81 -45
  175. package/lib/dist/tokens/tokens-plum-light.css +75 -39
  176. package/lib/dist/tokens/tokens-prota-deuter-dark.css +79 -43
  177. package/lib/dist/tokens/tokens-prota-deuter-light.css +74 -38
  178. package/lib/dist/tokens/tokens-sunflower-dark.css +81 -45
  179. package/lib/dist/tokens/tokens-sunflower-light.css +75 -39
  180. package/lib/dist/tokens/tokens-tmo-dark.css +81 -45
  181. package/lib/dist/tokens/tokens-tmo-light.css +75 -39
  182. package/lib/dist/tokens/tokens-trita-dark.css +81 -45
  183. package/lib/dist/tokens/tokens-trita-light.css +75 -39
  184. package/lib/dist/tokens/tokens-verdant-haze-dark.css +81 -45
  185. package/lib/dist/tokens/tokens-verdant-haze-light.css +75 -39
  186. package/lib/dist/tokens-docs.json +1 -1
  187. package/package.json +4 -4
@@ -97,12 +97,13 @@
97
97
  --dt-badge-color-foreground-ai: var(--dt-color-neutral-white);
98
98
  --dt-badge-color-foreground-bulletin-subtle: var(--dt-color-purple-900);
99
99
  --dt-badge-color-foreground-bulletin: var(--dt-color-black-50);
100
+ --dt-badge-color-foreground-success: var(--dt-color-green-1000);
100
101
  --dt-badge-color-foreground-default: var(--dt-color-black-1000);
101
102
  --dt-badge-color-background-ai: var(--dt-color-gradient-gold-red-magenta-purple);
102
103
  --dt-badge-color-background-bulletin-subtle: var(--dt-color-purple-200);
103
104
  --dt-badge-color-background-critical: var(--dt-color-red-200);
104
105
  --dt-badge-color-background-warning: var(--dt-color-gold-200);
105
- --dt-badge-color-background-success: var(--dt-color-green-200);
106
+ --dt-badge-color-background-positive: var(--dt-color-green-200);
106
107
  --dt-badge-color-background-info: var(--dt-color-blue-200);
107
108
  --dt-avatar-color-foreground-dark: var(--dt-color-neutral-black); /* Text color for light avatar backgrounds (variants 6-9) */
108
109
  --dt-avatar-color-foreground-light: var(--dt-color-neutral-white); /* Text color for dark avatar backgrounds (variants 0-5) */
@@ -425,32 +426,44 @@
425
426
  --dt-color-border-ai: var(--dt-color-gradient-gold-red-magenta-purple);
426
427
  --dt-color-border-focus: var(--dt-color-blue-500);
427
428
  --dt-color-border-brand-strong-inverted: var(--dt-color-purple-200);
429
+ --dt-color-border-info-strong-inverted: var(--dt-color-blue-200);
428
430
  --dt-color-border-warning-strong-inverted: var(--dt-color-gold-300);
429
431
  --dt-color-border-success-strong-inverted: var(--dt-color-green-500);
432
+ --dt-color-border-positive-strong-inverted: var(--dt-color-green-500);
430
433
  --dt-color-border-critical-strong-inverted: var(--dt-color-red-200);
431
434
  --dt-color-border-brand-subtle-inverted: var(--dt-color-purple-600);
435
+ --dt-color-border-info-subtle-inverted: var(--dt-color-blue-900);
432
436
  --dt-color-border-warning-subtle-inverted: var(--dt-color-gold-800);
433
437
  --dt-color-border-success-subtle-inverted: var(--dt-color-green-900);
438
+ --dt-color-border-positive-subtle-inverted: var(--dt-color-green-900);
434
439
  --dt-color-border-critical-subtle-inverted: var(--dt-color-red-900);
435
440
  --dt-color-border-brand-inverted: var(--dt-color-purple-400);
441
+ --dt-color-border-info-inverted: var(--dt-color-blue-300);
436
442
  --dt-color-border-warning-inverted: var(--dt-color-gold-500);
437
443
  --dt-color-border-success-inverted: var(--dt-color-green-500);
444
+ --dt-color-border-positive-inverted: var(--dt-color-green-500);
438
445
  --dt-color-border-critical-inverted: var(--dt-color-red-300);
439
446
  --dt-color-border-bold-inverted: oklch(1 0 0 / 0.5);
440
447
  --dt-color-border-moderate-inverted: oklch(1 0 0 / 0.35);
441
448
  --dt-color-border-default-inverted: oklch(1 0 0 / 0.2);
442
449
  --dt-color-border-subtle-inverted: oklch(1 0 0 / 0.12);
443
450
  --dt-color-border-brand-strong: var(--dt-color-purple-800);
451
+ --dt-color-border-info-strong: var(--dt-color-blue-800);
444
452
  --dt-color-border-warning-strong: var(--dt-color-gold-700);
445
453
  --dt-color-border-success-strong: var(--dt-color-green-900);
454
+ --dt-color-border-positive-strong: var(--dt-color-green-900);
446
455
  --dt-color-border-critical-strong: var(--dt-color-red-800);
447
456
  --dt-color-border-brand-subtle: var(--dt-color-purple-300);
457
+ --dt-color-border-info-subtle: var(--dt-color-blue-300);
448
458
  --dt-color-border-warning-subtle: var(--dt-color-gold-300);
449
459
  --dt-color-border-success-subtle: var(--dt-color-green-300);
460
+ --dt-color-border-positive-subtle: var(--dt-color-green-300);
450
461
  --dt-color-border-critical-subtle: var(--dt-color-red-300);
451
462
  --dt-color-border-brand: var(--dt-color-brand-purple);
463
+ --dt-color-border-info: var(--dt-color-blue-600);
452
464
  --dt-color-border-warning: var(--dt-color-gold-500);
453
465
  --dt-color-border-success: var(--dt-color-green-700);
466
+ --dt-color-border-positive: var(--dt-color-green-700);
454
467
  --dt-color-border-critical: var(--dt-color-red-600);
455
468
  --dt-color-border-bold: oklch(0.23 0 0 / 0.5);
456
469
  --dt-color-border-moderate: oklch(0.23 0 0 / 0.3);
@@ -460,12 +473,14 @@
460
473
  --dt-color-surface-backdrop: oklch(0 0 0 / 0.65); /* Background color for a modal-like backdrop. */
461
474
  --dt-color-surface-brand-subtle-opaque-inverted: oklch(0.16 0.08 292 / 0.66); /* Info surface as opaque background color. */
462
475
  --dt-color-surface-info-subtle-opaque-inverted: oklch(0.14 0.03 244 / 0.66); /* Info surface as opaque background color. */
463
- --dt-color-surface-success-subtle-opaque-inverted: oklch(0.17 0.04 167 / 0.66); /* Success subtle surface as opaque background color. */
476
+ --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-positive-subtle-opaque-inverted: oklch(0.21 0.05 162 / 0.66); /* Positive subtle surface as opaque background color. */
464
478
  --dt-color-surface-warning-subtle-opaque-inverted: oklch(0.2 0.04 76.1 / 0.3); /* Warning subtle surface as opaque background color */
465
479
  --dt-color-surface-critical-subtle-opaque-inverted: oklch(0.17 0.07 16.5 / 0.6); /* Critical subtle surface as opaque background color. */
466
480
  --dt-color-surface-brand-opaque-inverted: oklch(0.23 0.13 285 / 0.8); /* Info surface as opaque background color. */
467
481
  --dt-color-surface-info-opaque-inverted: oklch(0.22 0.05 248 / 0.6); /* Info surface as opaque background color. */
468
- --dt-color-surface-success-opaque-inverted: oklch(0.37 0.08 151 / 0.3); /* Success surface as opaque background color. */
482
+ --dt-color-surface-success-opaque-inverted: oklch(0.34 0.08 157 / 0.3); /* Success surface as opaque background color. */
483
+ --dt-color-surface-positive-opaque-inverted: oklch(0.34 0.08 157 / 0.3); /* Positive surface as opaque background color. */
469
484
  --dt-color-surface-warning-opaque-inverted: oklch(0.35 0.07 68.3 / 0.35); /* Warning surface as opaque background color */
470
485
  --dt-color-surface-critical-opaque-inverted: oklch(0.32 0.13 12.4 / 0.5); /* Critical surface as opaque background color. */
471
486
  --dt-color-surface-contrast-opaque-inverted: oklch(1 0 0 / 0.97); /* Contrast surface as opaque background color. */
@@ -475,17 +490,19 @@
475
490
  --dt-color-surface-secondary-opaque-inverted: oklch(1 0 0 / 0.15); /* Secondary surface as opaque background color. */
476
491
  --dt-color-surface-brand-strong-inverted: var(--dt-color-purple-200); /* A contrasting informational surface, most likely paired with inverted foreground colors. */
477
492
  --dt-color-surface-info-strong-inverted: var(--dt-color-blue-400); /* A contrasting informational surface, most likely paired with inverted foreground colors. */
478
- --dt-color-surface-success-strong-inverted: var(--dt-color-green-300); /* A contrasting positive state surface, most likely paired with inverted foreground colors. */
493
+ --dt-color-surface-positive-strong-inverted: var(--dt-color-green-950); /* A contrasting positive state surface, most likely paired with inverted foreground colors. */
479
494
  --dt-color-surface-warning-strong-inverted: var(--dt-color-gold-300); /* A contrasting warning surface, most likely paired with inverted foreground colors. */
480
495
  --dt-color-surface-critical-strong-inverted: var(--dt-color-red-300); /* A contrasting critical surface, most likely paired with inverted foreground colors. */
481
496
  --dt-color-surface-brand-subtle-inverted: var(--dt-color-purple-1000); /* A softer version of the default informational surface. */
482
497
  --dt-color-surface-info-subtle-inverted: var(--dt-color-blue-1000); /* A softer version of the default informational surface. */
483
498
  --dt-color-surface-success-subtle-inverted: var(--dt-color-green-1000); /* A softer version of the default success surface. */
499
+ --dt-color-surface-positive-subtle-inverted: var(--dt-color-green-1000); /* A softer version of the default positive surface. */
484
500
  --dt-color-surface-warning-subtle-inverted: var(--dt-color-gold-1000); /* A softer version of the default warning surface. */
485
501
  --dt-color-surface-critical-subtle-inverted: var(--dt-color-red-1000); /* A softer version of the Critical surface. */
486
502
  --dt-color-surface-brand-inverted: var(--dt-color-purple-950); /* Background surface color containing messaging or elements communicated as generally informational. */
487
503
  --dt-color-surface-info-inverted: var(--dt-color-blue-950); /* Background surface color containing messaging or elements communicated as generally informational. */
488
- --dt-color-surface-success-inverted: var(--dt-color-green-950); /* Background surface color containing messaging or elements expressing a positive or successful state. */
504
+ --dt-color-surface-success-inverted: var(--dt-color-green-900); /* Background surface color containing messaging or elements expressing a positive or successful state. */
505
+ --dt-color-surface-positive-inverted: var(--dt-color-green-900); /* Background surface color containing messaging or elements expressing a positive or successful state. */
489
506
  --dt-color-surface-warning-inverted: var(--dt-color-gold-950); /* Background surface color highlighting messaging or elements that may require user's attention. */
490
507
  --dt-color-surface-critical-inverted: var(--dt-color-red-950); /* Background surface color containing error, danger, or otherwise critical messaging or elements. */
491
508
  --dt-color-surface-contrast-inverted: var(--dt-color-black-100); /* An inverted surface for lightened content and elements, most likely paired with inverted foreground colors. */
@@ -496,12 +513,14 @@
496
513
  --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. */
497
514
  --dt-color-surface-brand-subtle-opaque: oklch(0.84 0.08 300 / 0.2); /* Info surface as opaque background color. */
498
515
  --dt-color-surface-info-subtle-opaque: oklch(0.96 0.01 248 / 0.5); /* Info surface as opaque background color. */
499
- --dt-color-surface-success-subtle-opaque: oklch(0.96 0.04 133 / 0.5); /* Success subtle surface as opaque background color. */
516
+ --dt-color-surface-success-subtle-opaque: oklch(0.96 0.06 167 / 0.5); /* Success subtle surface as opaque background color. */
517
+ --dt-color-surface-positive-subtle-opaque: oklch(0.96 0.06 167 / 0.5); /* Positive subtle surface as opaque background color. */
500
518
  --dt-color-surface-warning-subtle-opaque: oklch(0.97 0.05 94.4 / 0.5); /* Warning subtle surface as opaque background color */
501
519
  --dt-color-surface-critical-subtle-opaque: oklch(0.93 0.03 15.2 / 0.5); /* Critical subtle surface as opaque background color. */
502
520
  --dt-color-surface-brand-opaque: oklch(0.84 0.08 300 / 0.27); /* Info surface as opaque background color. */
503
521
  --dt-color-surface-info-opaque: oklch(0.91 0.04 232 / 0.35); /* Info surface as opaque background color. */
504
- --dt-color-surface-success-opaque: oklch(0.95 0.09 126 / 0.25); /* Success surface as opaque background color. */
522
+ --dt-color-surface-success-opaque: oklch(0.79 0.17 159 / 0.25); /* Success surface as opaque background color. */
523
+ --dt-color-surface-positive-opaque: oklch(0.79 0.17 159 / 0.25); /* Positive surface as opaque background color. */
505
524
  --dt-color-surface-warning-opaque: oklch(0.93 0.1 93.2 / 0.5); /* Warning surface as opaque background color */
506
525
  --dt-color-surface-critical-opaque: oklch(0.82 0.07 24.1 / 0.31); /* Critical surface as opaque background color. */
507
526
  --dt-color-surface-contrast-opaque: oklch(0.23 0 0 / 0.94); /* Contrast surface as opaque background color. */
@@ -511,17 +530,20 @@
511
530
  --dt-color-surface-secondary-opaque: oklch(0.23 0 0 / 0.02); /* Secondary surface as opaque background color. */
512
531
  --dt-color-surface-brand-strong: var(--dt-color-purple-600); /* A contrasting informational surface, most likely paired with inverted foreground colors. */
513
532
  --dt-color-surface-info-strong: var(--dt-color-blue-800); /* A contrasting informational surface, most likely paired with inverted foreground colors. */
514
- --dt-color-surface-success-strong: var(--dt-color-green-800); /* A contrasting positive state surface, most likely paired with inverted foreground colors. */
533
+ --dt-color-surface-success-strong: var(--dt-color-green-600); /* A contrasting positive state surface, most likely paired with inverted foreground colors. */
534
+ --dt-color-surface-positive-strong: var(--dt-color-green-800); /* A contrasting positive state surface, most likely paired with inverted foreground colors. */
515
535
  --dt-color-surface-warning-strong: var(--dt-color-gold-400); /* A contrasting warning surface, most likely paired with inverted foreground colors. */
516
536
  --dt-color-surface-critical-strong: var(--dt-color-red-600); /* A contrasting critical surface, most likely paired with inverted foreground colors. */
517
537
  --dt-color-surface-brand-subtle: var(--dt-color-purple-50); /* A softer version of the default informational surface. */
518
538
  --dt-color-surface-info-subtle: var(--dt-color-blue-50); /* A softer version of the default informational surface. */
519
539
  --dt-color-surface-success-subtle: var(--dt-color-green-50); /* A softer version of the default success surface. */
540
+ --dt-color-surface-positive-subtle: var(--dt-color-green-50); /* A softer version of the default positive surface. */
520
541
  --dt-color-surface-warning-subtle: var(--dt-color-gold-50); /* A softer version of the default warning surface. */
521
542
  --dt-color-surface-critical-subtle: var(--dt-color-red-50); /* A softer version of the Critical surface. */
522
543
  --dt-color-surface-brand: var(--dt-color-purple-100); /* Background surface color containing messaging or elements communicated as generally informational. */
523
544
  --dt-color-surface-info: var(--dt-color-blue-100); /* Background surface color containing messaging or elements communicated as generally informational. */
524
545
  --dt-color-surface-success: var(--dt-color-green-100); /* Background surface color containing messaging or elements expressing a positive or successful state. */
546
+ --dt-color-surface-positive: var(--dt-color-green-100); /* Background surface color containing messaging or elements expressing a positive or successful state. */
525
547
  --dt-color-surface-warning: var(--dt-color-gold-100); /* Background surface color highlighting messaging or elements that may require user's attention. */
526
548
  --dt-color-surface-critical: var(--dt-color-red-100); /* Background surface color containing error, danger, or otherwise critical messaging or elements. */
527
549
  --dt-color-surface-contrast: var(--dt-color-black-800); /* An inverted surface for lightened content and elements, most likely paired with inverted foreground colors. */
@@ -538,11 +560,13 @@
538
560
  --dt-color-link-warning: var(--dt-color-foreground-warning);
539
561
  --dt-color-link-primary-hover: var(--dt-color-purple-800);
540
562
  --dt-color-link-primary: var(--dt-color-purple-600);
563
+ --dt-color-foreground-info-strong-inverted: var(--dt-color-blue-200); /* Info strong text that sits on high-contrast surfaces or backgrounds. */
564
+ --dt-color-foreground-info-inverted: var(--dt-color-blue-300); /* Info text that sits on high-contrast surfaces or backgrounds. */
541
565
  --dt-color-foreground-warning-inverted: var(--dt-color-gold-500); /* Warning text that sits on high-contrast surfaces or backgrounds */
542
- --dt-color-foreground-success-strong-inverted: var(--dt-color-green-200); /* Success strong text that sits on high-contrast surfaces or backgrounds. */
543
- --dt-color-foreground-success-inverted: var(--dt-color-green-300); /* Success text that sits on high-contrast surfaces or backgrounds. */
544
- --dt-color-foreground-positive-strong-inverted: var(--dt-color-green-200); /* Positive strong text that sits on high-contrast surfaces or backgrounds. */
545
- --dt-color-foreground-positive-inverted: var(--dt-color-green-300); /* Positive text that sits on high-contrast surfaces or backgrounds. */
566
+ --dt-color-foreground-success-strong-inverted: var(--dt-color-green-50); /* Success strong text that sits on high-contrast surfaces or backgrounds. */
567
+ --dt-color-foreground-success-inverted: var(--dt-color-green-200); /* Success text that sits on high-contrast surfaces or backgrounds. */
568
+ --dt-color-foreground-positive-strong-inverted: var(--dt-color-green-50); /* Positive strong text that sits on high-contrast surfaces or backgrounds. */
569
+ --dt-color-foreground-positive-inverted: var(--dt-color-green-200); /* Positive text that sits on high-contrast surfaces or backgrounds. */
546
570
  --dt-color-foreground-critical-strong-inverted: var(--dt-color-red-200); /* Critical strong text that sits on high-contrast surfaces or backgrounds */
547
571
  --dt-color-foreground-critical-inverted: var(--dt-color-red-300); /* Critical text that sits on high-contrast surfaces or backgrounds */
548
572
  --dt-color-foreground-disabled-inverted: var(--dt-color-black-400); /* Disabled text color that sits on high-contrast surfaces or backgrounds. */
@@ -551,10 +575,12 @@
551
575
  --dt-color-foreground-tertiary-inverted: var(--dt-color-black-300); /* Tertiary text color that sits on high-contrast surfaces or backgrounds. */
552
576
  --dt-color-foreground-secondary-inverted: var(--dt-color-black-200); /* Secondary text color that sits on high-contrast surfaces or backgrounds. */
553
577
  --dt-color-foreground-primary-inverted: var(--dt-color-black-100); /* Primary text that sits on high-contrast surfaces or backgrounds. */
554
- --dt-color-foreground-success-strong: var(--dt-color-green-900); /* Indicates a strong positive state on surfaces that require a stronger contrast. */
578
+ --dt-color-foreground-info-strong: var(--dt-color-blue-900); /* Indicates a generally informational state on surfaces that require a stronger contrast. */
579
+ --dt-color-foreground-info: var(--dt-color-blue-800); /* Indicates a generally informational state. */
580
+ --dt-color-foreground-success-strong: var(--dt-color-green-950); /* Indicates a strong positive state on surfaces that require a stronger contrast. */
555
581
  --dt-color-foreground-success: var(--dt-shell-base-color-accent);
556
- --dt-color-foreground-positive-strong: var(--dt-color-green-900); /* Indicates a strong positive state on surfaces that require a stronger contrast. */
557
- --dt-color-foreground-positive: var(--dt-color-green-800); /* Indicates a positive state. */
582
+ --dt-color-foreground-positive-strong: var(--dt-color-green-950); /* Indicates a strong positive state on surfaces that require a stronger contrast. */
583
+ --dt-color-foreground-positive: var(--dt-shell-base-color-accent);
558
584
  --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. */
559
585
  --dt-color-foreground-critical: var(--dt-color-magenta-700);
560
586
  --dt-color-foreground-disabled: var(--dt-color-black-500); /* Used for text paired with disabled content or components, like the form elements. */
@@ -590,6 +616,7 @@
590
616
  --dt-button-font-size-xs: var(--dt-font-size-100); /* Extra small Button text size */
591
617
  --dt-badge-color-border-default: var(--dt-color-border-subtle);
592
618
  --dt-badge-color-background-bulletin: var(--dt-color-surface-brand-strong);
619
+ --dt-badge-color-background-success: var(--dt-badge-color-background-positive);
593
620
  --dt-badge-color-background-default: var(--dt-color-surface-moderate-opaque);
594
621
  --dt-shell-presence-color-offline: var(--dt-presence-color-offline);
595
622
  --dt-shell-presence-color-busy: var(--dt-presence-color-busy);
@@ -643,13 +670,13 @@
643
670
  --dt-theme-topbar-field-color-foreground: oklch(0.23 0 0 / 0.5);
644
671
  --dt-theme-topbar-color-background: var(--dt-color-surface-secondary);
645
672
  --dt-theme-topbar-color-foreground: oklch(0.23 0 0 / 0.8);
646
- --dt-action-color-border-positive-outlined-default: var(--dt-color-border-success);
673
+ --dt-action-color-border-positive-outlined-default: var(--dt-color-border-positive);
647
674
  --dt-action-color-border-muted-outlined-default: var(--dt-color-border-default);
648
675
  --dt-action-color-border-inverted-outlined-default: var(--dt-color-border-default-inverted);
649
676
  --dt-action-color-border-critical-outlined-default: var(--dt-color-border-critical);
650
677
  --dt-action-color-border-base-outlined-default: var(--dt-color-border-brand);
651
- --dt-action-color-background-positive-primary-active: oklch(0.47 0.15 147);
652
- --dt-action-color-background-positive-hover: var(--dt-color-surface-success-opaque);
678
+ --dt-action-color-background-positive-primary-active: oklch(0.38 0.1 156);
679
+ --dt-action-color-background-positive-hover: var(--dt-color-surface-positive-opaque);
653
680
  --dt-action-color-background-disabled-default: var(--dt-color-surface-bold-opaque);
654
681
  --dt-action-color-background-muted-hover: var(--dt-color-surface-moderate-opaque);
655
682
  --dt-action-color-background-inverted-primary-hover: var(--dt-color-surface-brand);
@@ -666,7 +693,7 @@
666
693
  --dt-inputs-color-background-disabled: var(--dt-color-surface-moderate-opaque);
667
694
  --dt-inputs-color-background-default: var(--dt-color-surface-secondary-opaque);
668
695
  --dt-inputs-color-border-warning: var(--dt-color-border-warning);
669
- --dt-inputs-color-border-success: var(--dt-color-border-success);
696
+ --dt-inputs-color-border-positive: var(--dt-color-border-positive);
670
697
  --dt-inputs-color-border-critical: var(--dt-color-border-critical);
671
698
  --dt-inputs-color-border-focus: var(--dt-color-border-focus);
672
699
  --dt-inputs-color-border-hover: var(--dt-color-border-moderate);
@@ -787,31 +814,39 @@
787
814
  --dt-color-chart-categorical-28: oklch(0.72 0.15 259);
788
815
  --dt-color-chart-categorical-26: oklch(0.74 0.18 388);
789
816
  --dt-color-chart-categorical-22: oklch(0.79 0.07 357);
790
- --dt-color-chart-categorical-21: oklch(0.71 0.16 115);
817
+ --dt-color-chart-categorical-21: oklch(0.69 0.15 118);
791
818
  --dt-color-chart-categorical-20: oklch(0.72 0.15 259);
792
819
  --dt-color-chart-categorical-19: oklch(0.71 0.13 228);
793
820
  --dt-color-chart-categorical-18: oklch(0.69 0.17 83.2);
794
821
  --dt-color-chart-categorical-17: oklch(0.74 0.21 346);
795
- --dt-color-chart-categorical-16: oklch(0.75 0.21 129);
822
+ --dt-color-chart-categorical-16: oklch(0.66 0.15 140);
796
823
  --dt-color-chart-categorical-15: oklch(0.75 0.17 402);
797
824
  --dt-color-chart-categorical-14: oklch(0.72 0.15 268);
798
- --dt-color-chart-categorical-13: oklch(0.72 0.21 400);
825
+ --dt-color-chart-categorical-13: oklch(0.68 0.19 405);
799
826
  --dt-color-chart-categorical-12: oklch(0.69 0.19 332);
800
827
  --dt-color-surface-primary-opaque-inverted: oklch(0 0 0 / 0.85); /* Secondary surface as opaque background color. */
801
828
  --dt-color-surface-primary-opaque: oklch(1 0 0 / 0.96); /* Primary surface as opaque background color. */
802
829
  --dt-color-link-disabled-inverted-hover: var(--dt-color-foreground-disabled-inverted);
803
830
  --dt-color-link-disabled-inverted: var(--dt-color-foreground-disabled-inverted);
804
831
  --dt-color-link-muted-inverted: var(--dt-color-foreground-secondary-inverted);
832
+ --dt-color-link-info-inverted-hover: var(--dt-color-foreground-info-strong-inverted);
833
+ --dt-color-link-info-inverted: var(--dt-color-foreground-info-inverted);
805
834
  --dt-color-link-warning-inverted: var(--dt-color-foreground-warning-inverted);
806
835
  --dt-color-link-success-inverted-hover: var(--dt-color-foreground-positive-strong-inverted);
807
836
  --dt-color-link-success-inverted: var(--dt-color-foreground-positive-inverted);
837
+ --dt-color-link-positive-inverted-hover: var(--dt-color-foreground-positive-strong-inverted);
838
+ --dt-color-link-positive-inverted: var(--dt-color-foreground-positive-inverted);
808
839
  --dt-color-link-critical-inverted-hover: var(--dt-color-foreground-critical-strong-inverted);
809
840
  --dt-color-link-critical-inverted: var(--dt-color-foreground-critical-inverted);
810
841
  --dt-color-link-disabled: var(--dt-color-foreground-disabled);
811
842
  --dt-color-link-muted-hover: var(--dt-color-foreground-primary);
812
843
  --dt-color-link-muted: var(--dt-color-foreground-secondary);
844
+ --dt-color-link-info-hover: var(--dt-color-foreground-info-strong);
845
+ --dt-color-link-info: var(--dt-color-foreground-info);
813
846
  --dt-color-link-success-hover: var(--dt-color-foreground-positive-strong);
814
847
  --dt-color-link-success: var(--dt-color-foreground-positive); /* positive */
848
+ --dt-color-link-positive-hover: var(--dt-color-foreground-positive-strong);
849
+ --dt-color-link-positive: var(--dt-color-foreground-positive); /* positive */
815
850
  --dt-color-link-critical-hover: var(--dt-color-foreground-critical-strong);
816
851
  --dt-color-link-critical: var(--dt-color-foreground-critical);
817
852
  --dt-icon-size-border-500: var(--dt-icon-size-border-400);
@@ -836,16 +871,16 @@
836
871
  --dt-shell-action-color-foreground-primary-default: var(--dt-shell-color-foreground-secondary);
837
872
  --dt-shell-color-surface-default: var(--dt-shell-base-color-surface);
838
873
  --dt-shell-color-foreground-critical: oklch(0.43 0.22 349);
839
- --dt-shell-color-foreground-positive: oklch(0.45 0.15 147);
874
+ --dt-shell-color-foreground-positive: oklch(0.49 0.21 261);
840
875
  --dt-theme-sidebar-icon-color-foreground: var(--dt-theme-sidebar-color-foreground);
841
876
  --dt-theme-sidebar-color-background: var(--dt-theme-topbar-color-background);
842
877
  --dt-theme-topbar-profile-color-foreground: var(--dt-theme-topbar-color-foreground);
843
- --dt-action-color-background-positive-active: oklch(0.66 0.09 126 / 0.25);
878
+ --dt-action-color-background-positive-active: oklch(0.55 0.17 159 / 0.25);
844
879
  --dt-action-color-background-muted-active: oklch(0.23 0 0 / 0.14);
845
880
  --dt-action-color-background-critical-active: oklch(0.73 0.07 24.1 / 0.31);
846
881
  --dt-action-color-background-base-active: oklch(0.75 0.08 300 / 0.27);
847
- --dt-action-color-foreground-positive-hover: var(--dt-color-link-success-hover);
848
- --dt-action-color-foreground-positive-default: var(--dt-color-link-success);
882
+ --dt-action-color-foreground-positive-hover: var(--dt-color-link-positive-hover);
883
+ --dt-action-color-foreground-positive-default: var(--dt-color-link-positive);
849
884
  --dt-action-color-foreground-muted-hover: var(--dt-color-link-muted-hover);
850
885
  --dt-action-color-foreground-muted-default: var(--dt-color-link-muted);
851
886
  --dt-action-color-foreground-inverted-primary-active: var(--dt-action-color-foreground-inverted-primary-hover);
@@ -853,6 +888,7 @@
853
888
  --dt-action-color-foreground-critical-hover: var(--dt-color-link-critical-hover);
854
889
  --dt-action-color-foreground-critical-default: var(--dt-color-link-critical);
855
890
  --dt-action-color-foreground-base-active: var(--dt-action-color-foreground-base-hover);
891
+ --dt-inputs-color-border-success: var(--dt-inputs-color-border-positive);
856
892
  --dt-typography-button-xl-font-size: var(--dt-button-font-size-xl); /* Text style for extra large button */
857
893
  --dt-typography-button-lg-font-size: var(--dt-button-font-size-lg); /* Text style for large button */
858
894
  --dt-typography-button-md-font-size: var(--dt-button-font-size-md); /* Text style for medium button */
@@ -926,8 +962,8 @@
926
962
  --dt-color-chart-categorical-26-hover: oklch(0.63 0.18 388);
927
963
  --dt-color-chart-categorical-22-selected: oklch(0.55 0.07 357);
928
964
  --dt-color-chart-categorical-22-hover: oklch(0.67 0.07 357);
929
- --dt-color-chart-categorical-21-selected: oklch(0.5 0.16 115);
930
- --dt-color-chart-categorical-21-hover: oklch(0.6 0.16 115);
965
+ --dt-color-chart-categorical-21-selected: oklch(0.48 0.15 118);
966
+ --dt-color-chart-categorical-21-hover: oklch(0.59 0.15 118);
931
967
  --dt-color-chart-categorical-20-selected: oklch(0.5 0.15 259);
932
968
  --dt-color-chart-categorical-20-hover: oklch(0.61 0.15 259);
933
969
  --dt-color-chart-categorical-19-selected: oklch(0.5 0.13 228);
@@ -936,21 +972,21 @@
936
972
  --dt-color-chart-categorical-18-hover: oklch(0.59 0.17 83.2);
937
973
  --dt-color-chart-categorical-17-selected: oklch(0.52 0.21 346);
938
974
  --dt-color-chart-categorical-17-hover: oklch(0.63 0.21 346);
939
- --dt-color-chart-categorical-16-selected: oklch(0.52 0.21 129);
940
- --dt-color-chart-categorical-16-hover: oklch(0.64 0.21 129);
975
+ --dt-color-chart-categorical-16-selected: oklch(0.46 0.15 140);
976
+ --dt-color-chart-categorical-16-hover: oklch(0.56 0.15 140);
941
977
  --dt-color-chart-categorical-15-selected: oklch(0.52 0.17 402);
942
978
  --dt-color-chart-categorical-15-hover: oklch(0.64 0.17 402);
943
979
  --dt-color-chart-categorical-14-selected: oklch(0.5 0.15 268);
944
980
  --dt-color-chart-categorical-14-hover: oklch(0.61 0.15 268);
945
- --dt-color-chart-categorical-13-selected: oklch(0.5 0.21 400);
946
- --dt-color-chart-categorical-13-hover: oklch(0.61 0.21 400);
981
+ --dt-color-chart-categorical-13-selected: oklch(0.48 0.19 405);
982
+ --dt-color-chart-categorical-13-hover: oklch(0.58 0.19 405);
947
983
  --dt-color-chart-categorical-12-selected: oklch(0.48 0.19 332);
948
984
  --dt-color-chart-categorical-12-hover: oklch(0.59 0.19 332);
949
985
  --dt-color-chart-categorical-30: oklch(0.71 0.12 217);
950
986
  --dt-color-chart-categorical-29: oklch(0.7 0.17 416);
951
- --dt-color-chart-categorical-27: oklch(0.74 0.19 163);
987
+ --dt-color-chart-categorical-27: oklch(0.67 0.14 171);
952
988
  --dt-color-chart-categorical-25: oklch(0.71 0.16 321);
953
- --dt-color-chart-categorical-24: oklch(0.74 0.2 49.1);
989
+ --dt-color-chart-categorical-24: oklch(0.71 0.18 52.6);
954
990
  --dt-color-chart-categorical-23: oklch(0.71 0.18 353);
955
991
  --dt-color-link-disabled-hover: var(--dt-color-link-disabled);
956
992
  --dt-shell-action-color-foreground-muted-selected: oklch(0.08 0.04 236 / 0.6);
@@ -963,12 +999,12 @@
963
999
  --dt-color-chart-categorical-30-hover: oklch(0.6 0.12 217);
964
1000
  --dt-color-chart-categorical-29-selected: oklch(0.49 0.17 416);
965
1001
  --dt-color-chart-categorical-29-hover: oklch(0.59 0.17 416);
966
- --dt-color-chart-categorical-27-selected: oklch(0.52 0.19 163);
967
- --dt-color-chart-categorical-27-hover: oklch(0.63 0.19 163);
1002
+ --dt-color-chart-categorical-27-selected: oklch(0.47 0.14 171);
1003
+ --dt-color-chart-categorical-27-hover: oklch(0.57 0.14 171);
968
1004
  --dt-color-chart-categorical-25-selected: oklch(0.5 0.16 321);
969
1005
  --dt-color-chart-categorical-25-hover: oklch(0.6 0.16 321);
970
- --dt-color-chart-categorical-24-selected: oklch(0.52 0.2 49.1);
971
- --dt-color-chart-categorical-24-hover: oklch(0.63 0.2 49.1);
1006
+ --dt-color-chart-categorical-24-selected: oklch(0.5 0.18 52.6);
1007
+ --dt-color-chart-categorical-24-hover: oklch(0.6 0.18 52.6);
972
1008
  --dt-color-chart-categorical-23-selected: oklch(0.5 0.18 353);
973
1009
  --dt-color-chart-categorical-23-hover: oklch(0.6 0.18 353);
974
1010
  --dt-shell-action-color-foreground-muted-active: var(--dt-shell-action-color-foreground-muted-hover);