@dialpad/dialtone-css 8.80.0-next.2 → 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 +9 -22
  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 -0
  37. package/lib/build/less/components/toast.less +1 -1
  38. package/lib/build/less/dialtone.less +1 -0
  39. package/lib/build/less/recipes/leftbar_row.less +2 -2
  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 +2826 -1811
  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 +2733 -1760
  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
@@ -66,7 +66,7 @@
66
66
  --dt-presence-color-offline: var(--dt-color-black-500);
67
67
  --dt-presence-color-busy: var(--dt-color-gold-700);
68
68
  --dt-presence-color-unavailable: var(--dt-color-red-700);
69
- --dt-presence-color-available: var(--dt-color-green-600);
69
+ --dt-presence-color-available: var(--dt-color-green-500);
70
70
  --dt-icon-size-border-100: var(--dt-size-border-100);
71
71
  --dt-icon-size-800: calc(var(--dt-size-base) * 6);
72
72
  --dt-icon-size-700: calc(var(--dt-size-base) * 4.75);
@@ -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) */
@@ -124,9 +125,9 @@
124
125
  --dt-theme-mention-color-foreground: var(--dt-color-black-50);
125
126
  --dt-theme-presence-color-background-busy: var(--dt-color-gold-700);
126
127
  --dt-theme-presence-color-background-busy-unavailable: var(--dt-color-red-700);
127
- --dt-theme-presence-color-background-available: var(--dt-color-green-600);
128
+ --dt-theme-presence-color-background-available: var(--dt-color-green-500);
128
129
  --dt-theme-color-base: var(--dt-color-black-900);
129
- --dt-action-color-background-positive-primary-hover: var(--dt-color-green-700);
130
+ --dt-action-color-background-positive-primary-hover: var(--dt-color-green-500);
130
131
  --dt-action-color-background-positive-primary-default: var(--dt-color-green-600);
131
132
  --dt-action-color-background-positive-default: var(--dt-color-neutral-transparent);
132
133
  --dt-action-color-background-muted-default: var(--dt-color-neutral-transparent);
@@ -428,32 +429,44 @@
428
429
  --dt-color-border-ai: var(--dt-color-gradient-gold-red-magenta-purple);
429
430
  --dt-color-border-focus: var(--dt-color-blue-500);
430
431
  --dt-color-border-brand-strong-inverted: var(--dt-color-purple-200);
432
+ --dt-color-border-info-strong-inverted: var(--dt-color-blue-200);
431
433
  --dt-color-border-warning-strong-inverted: var(--dt-color-gold-300);
432
434
  --dt-color-border-success-strong-inverted: var(--dt-color-green-200);
435
+ --dt-color-border-positive-strong-inverted: var(--dt-color-green-200);
433
436
  --dt-color-border-critical-strong-inverted: var(--dt-color-red-300);
434
- --dt-color-border-brand-subtle-inverted: var(--dt-color-purple-800);
437
+ --dt-color-border-brand-subtle-inverted: var(--dt-color-purple-900);
438
+ --dt-color-border-info-subtle-inverted: var(--dt-color-blue-900);
435
439
  --dt-color-border-warning-subtle-inverted: var(--dt-color-gold-800);
436
- --dt-color-border-success-subtle-inverted: var(--dt-color-green-800);
440
+ --dt-color-border-success-subtle-inverted: var(--dt-color-green-600);
441
+ --dt-color-border-positive-subtle-inverted: var(--dt-color-green-900);
437
442
  --dt-color-border-critical-subtle-inverted: var(--dt-color-red-800);
438
443
  --dt-color-border-brand-inverted: var(--dt-color-purple-400);
444
+ --dt-color-border-info-inverted: var(--dt-color-blue-300);
439
445
  --dt-color-border-warning-inverted: var(--dt-color-gold-500);
440
446
  --dt-color-border-success-inverted: var(--dt-color-green-300);
447
+ --dt-color-border-positive-inverted: var(--dt-color-green-200);
441
448
  --dt-color-border-critical-inverted: var(--dt-color-red-500);
442
449
  --dt-color-border-bold-inverted: oklch(0 0 0 / 0.5);
443
450
  --dt-color-border-moderate-inverted: oklch(0 0 0 / 0.34);
444
451
  --dt-color-border-default-inverted: oklch(0 0 0 / 0.18);
445
452
  --dt-color-border-subtle-inverted: oklch(0 0 0 / 0.1);
446
453
  --dt-color-border-brand-strong: var(--dt-color-purple-900);
454
+ --dt-color-border-info-strong: var(--dt-color-blue-900);
447
455
  --dt-color-border-warning-strong: var(--dt-color-gold-900);
448
456
  --dt-color-border-success-strong: var(--dt-color-green-800);
457
+ --dt-color-border-positive-strong: var(--dt-color-green-800);
449
458
  --dt-color-border-critical-strong: var(--dt-color-red-900);
450
459
  --dt-color-border-brand-subtle: var(--dt-color-purple-500);
460
+ --dt-color-border-info-subtle: var(--dt-color-blue-300);
451
461
  --dt-color-border-warning-subtle: var(--dt-color-gold-600);
452
- --dt-color-border-success-subtle: var(--dt-color-green-500);
462
+ --dt-color-border-success-subtle: var(--dt-color-green-300);
463
+ --dt-color-border-positive-subtle: var(--dt-color-green-300);
453
464
  --dt-color-border-critical-subtle: var(--dt-color-red-300);
454
465
  --dt-color-border-brand: var(--dt-color-purple-800);
466
+ --dt-color-border-info: var(--dt-color-blue-800);
455
467
  --dt-color-border-warning: var(--dt-color-gold-800);
456
- --dt-color-border-success: var(--dt-color-green-600);
468
+ --dt-color-border-success: var(--dt-color-green-500);
469
+ --dt-color-border-positive: var(--dt-color-green-700);
457
470
  --dt-color-border-critical: var(--dt-color-red-800);
458
471
  --dt-color-border-bold: oklch(1 0 0 / 0.5);
459
472
  --dt-color-border-moderate: oklch(1 0 0 / 0.36);
@@ -463,12 +476,14 @@
463
476
  --dt-color-surface-backdrop: oklch(0 0 0 / 0.65); /* Background color for a modal-like backdrop. */
464
477
  --dt-color-surface-brand-subtle-opaque-inverted: oklch(0.98 0.01 301 / 0.66); /* Info surface as opaque background color. */
465
478
  --dt-color-surface-info-subtle-opaque-inverted: oklch(0.98 0.01 248 / 0.66); /* Info surface as opaque background color. */
466
- --dt-color-surface-success-subtle-opaque-inverted: oklch(0.98 0.01 141 / 0.66); /* Success subtle surface as opaque background color. */
479
+ --dt-color-surface-success-subtle-opaque-inverted: oklch(0.99 0.01 124 / 0.66); /* Success subtle surface as opaque background color. */
480
+ --dt-color-surface-positive-subtle-opaque-inverted: oklch(0.99 0.01 124 / 0.66); /* Positive subtle surface as opaque background color. */
467
481
  --dt-color-surface-warning-subtle-opaque-inverted: oklch(0.98 0.03 95.9 / 0.3); /* Warning subtle surface as opaque background color */
468
482
  --dt-color-surface-critical-subtle-opaque-inverted: oklch(0.93 0.03 15.2 / 0.8);
469
483
  --dt-color-surface-brand-opaque-inverted: oklch(0.93 0.03 302 / 0.8); /* Info surface as opaque background color. */
470
484
  --dt-color-surface-info-opaque-inverted: oklch(0.96 0.01 248 / 0.6); /* Info surface as opaque background color. */
471
- --dt-color-surface-success-opaque-inverted: oklch(0.92 0.09 126 / 0.3); /* Success surface as opaque background color. */
485
+ --dt-color-surface-success-opaque-inverted: oklch(0.95 0.07 128 / 0.3); /* Success surface as opaque background color. */
486
+ --dt-color-surface-positive-opaque-inverted: oklch(0.95 0.07 128 / 0.3); /* Positive surface as opaque background color. */
472
487
  --dt-color-surface-warning-opaque-inverted: oklch(0.93 0.1 93.2 / 0.5);
473
488
  --dt-color-surface-critical-opaque-inverted: oklch(0.82 0.07 24.1 / 0.5);
474
489
  --dt-color-surface-contrast-opaque-inverted: oklch(0 0 0 / 0.97); /* Contrast surface as opaque background color. */
@@ -478,17 +493,19 @@
478
493
  --dt-color-surface-secondary-opaque-inverted: oklch(0 0 0 / 0.04);
479
494
  --dt-color-surface-brand-strong-inverted: var(--dt-color-purple-400);
480
495
  --dt-color-surface-info-strong-inverted: var(--dt-color-blue-300);
481
- --dt-color-surface-success-strong-inverted: var(--dt-color-green-300); /* A contrasting positive state surface, most likely paired with inverted foreground colors. */
496
+ --dt-color-surface-positive-strong-inverted: var(--dt-color-green-950); /* A contrasting positive state surface, most likely paired with inverted foreground colors. */
482
497
  --dt-color-surface-warning-strong-inverted: var(--dt-color-gold-700);
483
498
  --dt-color-surface-critical-strong-inverted: var(--dt-color-red-500);
484
499
  --dt-color-surface-brand-subtle-inverted: var(--dt-color-purple-1000); /* A softer version of the default informational surface. */
485
500
  --dt-color-surface-info-subtle-inverted: var(--dt-color-blue-1000); /* A softer version of the default informational surface. */
486
501
  --dt-color-surface-success-subtle-inverted: var(--dt-color-green-1000); /* A softer version of the default success surface. */
502
+ --dt-color-surface-positive-subtle-inverted: var(--dt-color-green-1000); /* A softer version of the default positive surface. */
487
503
  --dt-color-surface-warning-subtle-inverted: var(--dt-color-gold-1000); /* A softer version of the default warning surface. */
488
504
  --dt-color-surface-critical-subtle-inverted: var(--dt-color-red-1000); /* A softer version of the Critical surface. */
489
505
  --dt-color-surface-brand-inverted: var(--dt-color-purple-950); /* Background surface color containing messaging or elements communicated as generally informational. */
490
506
  --dt-color-surface-info-inverted: var(--dt-color-blue-950); /* Background surface color containing messaging or elements communicated as generally informational. */
491
- --dt-color-surface-success-inverted: var(--dt-color-green-950); /* Background surface color containing messaging or elements expressing a positive or successful state. */
507
+ --dt-color-surface-success-inverted: var(--dt-color-green-900); /* Background surface color containing messaging or elements expressing a positive or successful state. */
508
+ --dt-color-surface-positive-inverted: var(--dt-color-green-900); /* Background surface color containing messaging or elements expressing a positive or successful state. */
492
509
  --dt-color-surface-warning-inverted: var(--dt-color-gold-950); /* Background surface color highlighting messaging or elements that may require user's attention. */
493
510
  --dt-color-surface-critical-inverted: var(--dt-color-red-950); /* Background surface color containing error, danger, or otherwise critical messaging or elements. */
494
511
  --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. */
@@ -499,12 +516,14 @@
499
516
  --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. */
500
517
  --dt-color-surface-brand-subtle-opaque: oklch(0.16 0.08 292 / 0.65);
501
518
  --dt-color-surface-info-subtle-opaque: oklch(0.14 0.03 244 / 0.7);
502
- --dt-color-surface-success-subtle-opaque: oklch(0.17 0.04 167 / 0.6);
519
+ --dt-color-surface-success-subtle-opaque: oklch(0.22 0.06 130 / 0.6);
520
+ --dt-color-surface-positive-subtle-opaque: oklch(0.22 0.06 130 / 0.6);
503
521
  --dt-color-surface-warning-subtle-opaque: oklch(0.24 0.05 74.2 / 0.7);
504
522
  --dt-color-surface-critical-subtle-opaque: oklch(0.17 0.07 16.5 / 0.6);
505
523
  --dt-color-surface-brand-opaque: oklch(0.23 0.13 285 / 0.7);
506
524
  --dt-color-surface-info-opaque: oklch(0.22 0.05 248 / 0.4);
507
- --dt-color-surface-success-opaque: oklch(0.37 0.08 151 / 0.28);
525
+ --dt-color-surface-success-opaque: oklch(0.44 0.12 133 / 0.28);
526
+ --dt-color-surface-positive-opaque: oklch(0.44 0.12 133 / 0.28);
508
527
  --dt-color-surface-warning-opaque: oklch(0.48 0.1 68.3 / 0.55);
509
528
  --dt-color-surface-critical-opaque: oklch(0.4 0.16 11.4 / 0.2);
510
529
  --dt-color-surface-contrast-opaque: oklch(1 0 0 / 0.97);
@@ -514,17 +533,20 @@
514
533
  --dt-color-surface-secondary-opaque: oklch(0.92 0 0 / 0.03);
515
534
  --dt-color-surface-brand-strong: var(--dt-color-purple-800);
516
535
  --dt-color-surface-info-strong: var(--dt-color-blue-600);
517
- --dt-color-surface-success-strong: var(--dt-color-green-600);
536
+ --dt-color-surface-success-strong: var(--dt-color-green-500);
537
+ --dt-color-surface-positive-strong: var(--dt-color-green-500);
518
538
  --dt-color-surface-warning-strong: var(--dt-color-gold-700);
519
539
  --dt-color-surface-critical-strong: var(--dt-color-red-800);
520
540
  --dt-color-surface-brand-subtle: var(--dt-color-purple-50); /* A softer version of the default informational surface. */
521
541
  --dt-color-surface-info-subtle: oklch(0.13 0.05 248);
522
- --dt-color-surface-success-subtle: oklch(0.12 0.05 156);
542
+ --dt-color-surface-success-subtle: oklch(0.18 0.1 133);
543
+ --dt-color-surface-positive-subtle: oklch(0.22 0.12 133);
523
544
  --dt-color-surface-warning-subtle: var(--dt-color-gold-100);
524
545
  --dt-color-surface-critical-subtle: oklch(0.12 0.09 17.8);
525
546
  --dt-color-surface-brand: var(--dt-color-purple-100); /* Background surface color containing messaging or elements communicated as generally informational. */
526
547
  --dt-color-surface-info: var(--dt-color-blue-100); /* Background surface color containing messaging or elements communicated as generally informational. */
527
548
  --dt-color-surface-success: var(--dt-color-green-100); /* Background surface color containing messaging or elements expressing a positive or successful state. */
549
+ --dt-color-surface-positive: var(--dt-color-green-100); /* Background surface color containing messaging or elements expressing a positive or successful state. */
528
550
  --dt-color-surface-warning: var(--dt-color-gold-200);
529
551
  --dt-color-surface-critical: var(--dt-color-red-100); /* Background surface color containing error, danger, or otherwise critical messaging or elements. */
530
552
  --dt-color-surface-contrast: var(--dt-color-black-1000);
@@ -540,11 +562,13 @@
540
562
  --dt-color-link-warning-hover: var(--dt-color-gold-900);
541
563
  --dt-color-link-primary-hover: var(--dt-color-purple-900);
542
564
  --dt-color-link-primary: var(--dt-color-purple-800);
565
+ --dt-color-foreground-info-strong-inverted: var(--dt-color-blue-200); /* Info strong text that sits on high-contrast surfaces or backgrounds. */
566
+ --dt-color-foreground-info-inverted: var(--dt-color-blue-300); /* Info text that sits on high-contrast surfaces or backgrounds. */
543
567
  --dt-color-foreground-warning-inverted: var(--dt-color-gold-300);
544
- --dt-color-foreground-success-strong-inverted: var(--dt-color-green-200);
545
- --dt-color-foreground-success-inverted: var(--dt-color-green-300);
546
- --dt-color-foreground-positive-strong-inverted: var(--dt-color-green-200);
547
- --dt-color-foreground-positive-inverted: var(--dt-color-green-300);
568
+ --dt-color-foreground-success-strong-inverted: var(--dt-color-green-50);
569
+ --dt-color-foreground-success-inverted: var(--dt-color-green-200);
570
+ --dt-color-foreground-positive-strong-inverted: var(--dt-color-green-50);
571
+ --dt-color-foreground-positive-inverted: var(--dt-color-green-200);
548
572
  --dt-color-foreground-critical-strong-inverted: var(--dt-color-red-200); /* Critical strong text that sits on high-contrast surfaces or backgrounds */
549
573
  --dt-color-foreground-critical-inverted: var(--dt-color-red-500);
550
574
  --dt-color-foreground-disabled-inverted: var(--dt-color-black-400); /* Disabled text color that sits on high-contrast surfaces or backgrounds. */
@@ -553,11 +577,13 @@
553
577
  --dt-color-foreground-tertiary-inverted: var(--dt-color-black-400);
554
578
  --dt-color-foreground-secondary-inverted: var(--dt-color-black-300);
555
579
  --dt-color-foreground-primary-inverted: var(--dt-color-neutral-black);
580
+ --dt-color-foreground-info-strong: var(--dt-color-blue-800);
581
+ --dt-color-foreground-info: var(--dt-color-blue-700);
556
582
  --dt-color-foreground-warning: var(--dt-color-gold-700);
557
- --dt-color-foreground-success-strong: var(--dt-color-green-800);
558
- --dt-color-foreground-success: var(--dt-color-green-600);
559
- --dt-color-foreground-positive-strong: var(--dt-color-green-800);
560
- --dt-color-foreground-positive: var(--dt-color-green-600);
583
+ --dt-color-foreground-success-strong: var(--dt-color-green-700);
584
+ --dt-color-foreground-success: var(--dt-color-green-500);
585
+ --dt-color-foreground-positive-strong: var(--dt-color-green-700);
586
+ --dt-color-foreground-positive: var(--dt-color-green-500);
561
587
  --dt-color-foreground-critical-strong: var(--dt-color-red-900);
562
588
  --dt-color-foreground-critical: var(--dt-color-red-800);
563
589
  --dt-color-foreground-disabled: var(--dt-color-black-600);
@@ -593,6 +619,7 @@
593
619
  --dt-button-font-size-xs: var(--dt-font-size-100); /* Extra small Button text size */
594
620
  --dt-badge-color-border-default: var(--dt-color-border-subtle);
595
621
  --dt-badge-color-background-bulletin: var(--dt-color-surface-brand-strong);
622
+ --dt-badge-color-background-success: var(--dt-badge-color-background-positive);
596
623
  --dt-badge-color-background-default: var(--dt-color-surface-moderate-opaque);
597
624
  --dt-avatar-anchor-hue: var(--dt-shell-base-color-accent); /* Theme accent color used to derive avatar anchor hue. Transformed to OKLCH hue degrees at build time. */
598
625
  --dt-shell-presence-color-offline: var(--dt-presence-color-offline);
@@ -652,13 +679,13 @@
652
679
  --dt-theme-topbar-field-color-foreground: oklch(0.92 0 0 / 0.5);
653
680
  --dt-theme-topbar-color-background: var(--dt-color-surface-secondary);
654
681
  --dt-theme-topbar-color-foreground: oklch(0.92 0 0 / 0.8);
655
- --dt-action-color-border-positive-outlined-default: var(--dt-color-border-success);
682
+ --dt-action-color-border-positive-outlined-default: var(--dt-color-border-positive);
656
683
  --dt-action-color-border-muted-outlined-default: var(--dt-color-border-default);
657
684
  --dt-action-color-border-inverted-outlined-default: var(--dt-color-border-default-inverted);
658
685
  --dt-action-color-border-critical-outlined-default: var(--dt-color-border-critical);
659
686
  --dt-action-color-border-base-outlined-default: var(--dt-color-border-brand);
660
687
  --dt-action-color-background-positive-primary-active: var(--dt-action-color-background-positive-primary-default);
661
- --dt-action-color-background-positive-hover: var(--dt-color-surface-success-opaque);
688
+ --dt-action-color-background-positive-hover: var(--dt-color-surface-positive-opaque);
662
689
  --dt-action-color-background-disabled-default: var(--dt-color-surface-bold-opaque);
663
690
  --dt-action-color-background-muted-active: var(--dt-color-surface-bold-opaque);
664
691
  --dt-action-color-background-muted-hover: var(--dt-color-surface-moderate-opaque);
@@ -678,7 +705,7 @@
678
705
  --dt-inputs-color-background-disabled: var(--dt-color-surface-moderate-opaque);
679
706
  --dt-inputs-color-background-default: var(--dt-color-surface-secondary-opaque);
680
707
  --dt-inputs-color-border-warning: var(--dt-color-border-warning);
681
- --dt-inputs-color-border-success: var(--dt-color-border-success);
708
+ --dt-inputs-color-border-positive: var(--dt-color-border-positive);
682
709
  --dt-inputs-color-border-critical: var(--dt-color-border-critical);
683
710
  --dt-inputs-color-border-focus: var(--dt-color-border-focus);
684
711
  --dt-inputs-color-border-hover: var(--dt-color-border-moderate);
@@ -799,31 +826,39 @@
799
826
  --dt-color-chart-categorical-28: oklch(0.48 0.17 268);
800
827
  --dt-color-chart-categorical-26: oklch(0.57 0.17 382);
801
828
  --dt-color-chart-categorical-22: oklch(0.36 0.07 366);
802
- --dt-color-chart-categorical-21: oklch(0.54 0.15 114);
829
+ --dt-color-chart-categorical-21: oklch(0.55 0.15 112);
803
830
  --dt-color-chart-categorical-20: oklch(0.48 0.17 268);
804
831
  --dt-color-chart-categorical-19: oklch(0.47 0.13 241);
805
832
  --dt-color-chart-categorical-18: oklch(0.44 0.12 81.8);
806
833
  --dt-color-chart-categorical-17: oklch(0.57 0.26 334);
807
- --dt-color-chart-categorical-16: oklch(0.55 0.14 134);
834
+ --dt-color-chart-categorical-16: oklch(0.61 0.16 125);
808
835
  --dt-color-chart-categorical-15: oklch(0.59 0.16 396);
809
836
  --dt-color-chart-categorical-14: oklch(0.5 0.18 274);
810
- --dt-color-chart-categorical-13: oklch(0.57 0.21 398);
837
+ --dt-color-chart-categorical-13: oklch(0.59 0.22 394);
811
838
  --dt-color-chart-categorical-12: oklch(0.51 0.22 324);
812
839
  --dt-color-surface-primary-opaque-inverted: oklch(1 0 0 / 0.85); /* Secondary surface as opaque background color. */
813
840
  --dt-color-surface-primary-opaque: oklch(0.2 0 0 / 0.9);
814
841
  --dt-color-link-disabled-inverted: var(--dt-color-foreground-disabled-inverted);
815
842
  --dt-color-link-muted-inverted: var(--dt-color-foreground-secondary-inverted);
843
+ --dt-color-link-info-inverted-hover: var(--dt-color-foreground-info-strong-inverted);
844
+ --dt-color-link-info-inverted: var(--dt-color-foreground-info-inverted);
816
845
  --dt-color-link-warning-inverted: var(--dt-color-foreground-warning-inverted);
817
846
  --dt-color-link-success-inverted-hover: var(--dt-color-foreground-positive-strong-inverted);
818
847
  --dt-color-link-success-inverted: var(--dt-color-foreground-positive-inverted);
848
+ --dt-color-link-positive-inverted-hover: var(--dt-color-foreground-positive-strong-inverted);
849
+ --dt-color-link-positive-inverted: var(--dt-color-foreground-positive-inverted);
819
850
  --dt-color-link-critical-inverted-hover: var(--dt-color-foreground-critical-strong-inverted);
820
851
  --dt-color-link-critical-inverted: var(--dt-color-foreground-critical-inverted);
821
852
  --dt-color-link-disabled: var(--dt-color-foreground-disabled);
822
853
  --dt-color-link-muted-hover: var(--dt-color-foreground-primary);
823
854
  --dt-color-link-muted: var(--dt-color-foreground-secondary);
855
+ --dt-color-link-info-hover: var(--dt-color-foreground-info-strong);
856
+ --dt-color-link-info: var(--dt-color-foreground-info);
824
857
  --dt-color-link-warning: var(--dt-color-foreground-warning);
825
858
  --dt-color-link-success-hover: var(--dt-color-foreground-positive-strong);
826
859
  --dt-color-link-success: var(--dt-color-foreground-positive); /* positive */
860
+ --dt-color-link-positive-hover: var(--dt-color-foreground-positive-strong);
861
+ --dt-color-link-positive: var(--dt-color-foreground-positive); /* positive */
827
862
  --dt-color-link-critical-hover: var(--dt-color-foreground-critical-strong);
828
863
  --dt-color-link-critical: var(--dt-color-foreground-critical);
829
864
  --dt-icon-size-border-500: var(--dt-icon-size-border-400);
@@ -841,10 +876,10 @@
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
878
  --dt-theme-topbar-field-color-background-hover: oklch(0.16 0 0);
844
- --dt-action-color-background-positive-active: oklch(0.46 0.08 151 / 0.28);
879
+ --dt-action-color-background-positive-active: oklch(0.55 0.12 133 / 0.28);
845
880
  --dt-action-color-background-critical-active: oklch(0.5 0.16 11.4 / 0.2);
846
- --dt-action-color-foreground-positive-hover: var(--dt-color-link-success-hover);
847
- --dt-action-color-foreground-positive-default: var(--dt-color-link-success);
881
+ --dt-action-color-foreground-positive-hover: var(--dt-color-link-positive-hover);
882
+ --dt-action-color-foreground-positive-default: var(--dt-color-link-positive);
848
883
  --dt-action-color-foreground-muted-hover: var(--dt-color-link-muted-hover);
849
884
  --dt-action-color-foreground-muted-default: var(--dt-color-link-muted);
850
885
  --dt-action-color-foreground-inverted-primary-active: var(--dt-action-color-foreground-inverted-primary-hover);
@@ -852,6 +887,7 @@
852
887
  --dt-action-color-foreground-critical-hover: var(--dt-color-link-critical-hover);
853
888
  --dt-action-color-foreground-critical-default: var(--dt-color-link-critical);
854
889
  --dt-action-color-foreground-base-active: var(--dt-action-color-foreground-base-hover);
890
+ --dt-inputs-color-border-success: var(--dt-inputs-color-border-positive);
855
891
  --dt-typography-button-xl-font-size: var(--dt-button-font-size-xl); /* Text style for extra large button */
856
892
  --dt-typography-button-lg-font-size: var(--dt-button-font-size-lg); /* Text style for large button */
857
893
  --dt-typography-button-md-font-size: var(--dt-button-font-size-md); /* Text style for medium button */
@@ -925,8 +961,8 @@
925
961
  --dt-color-chart-categorical-26-hover: oklch(0.48 0.17 382);
926
962
  --dt-color-chart-categorical-22-selected: oklch(0.25 0.07 366);
927
963
  --dt-color-chart-categorical-22-hover: oklch(0.31 0.07 366);
928
- --dt-color-chart-categorical-21-selected: oklch(0.38 0.15 114);
929
- --dt-color-chart-categorical-21-hover: oklch(0.46 0.15 114);
964
+ --dt-color-chart-categorical-21-selected: oklch(0.39 0.15 112);
965
+ --dt-color-chart-categorical-21-hover: oklch(0.47 0.15 112);
930
966
  --dt-color-chart-categorical-20-selected: oklch(0.34 0.17 268);
931
967
  --dt-color-chart-categorical-20-hover: oklch(0.41 0.17 268);
932
968
  --dt-color-chart-categorical-19-selected: oklch(0.33 0.13 241);
@@ -935,21 +971,21 @@
935
971
  --dt-color-chart-categorical-18-hover: oklch(0.37 0.12 81.8);
936
972
  --dt-color-chart-categorical-17-selected: oklch(0.4 0.26 334);
937
973
  --dt-color-chart-categorical-17-hover: oklch(0.48 0.26 334);
938
- --dt-color-chart-categorical-16-selected: oklch(0.39 0.14 134);
939
- --dt-color-chart-categorical-16-hover: oklch(0.47 0.14 134);
974
+ --dt-color-chart-categorical-16-selected: oklch(0.43 0.16 125);
975
+ --dt-color-chart-categorical-16-hover: oklch(0.52 0.16 125);
940
976
  --dt-color-chart-categorical-15-selected: oklch(0.41 0.16 396);
941
977
  --dt-color-chart-categorical-15-hover: oklch(0.5 0.16 396);
942
978
  --dt-color-chart-categorical-14-selected: oklch(0.35 0.18 274);
943
979
  --dt-color-chart-categorical-14-hover: oklch(0.42 0.18 274);
944
- --dt-color-chart-categorical-13-selected: oklch(0.4 0.21 398);
945
- --dt-color-chart-categorical-13-hover: oklch(0.48 0.21 398);
980
+ --dt-color-chart-categorical-13-selected: oklch(0.41 0.22 394);
981
+ --dt-color-chart-categorical-13-hover: oklch(0.5 0.22 394);
946
982
  --dt-color-chart-categorical-12-selected: oklch(0.36 0.22 324);
947
983
  --dt-color-chart-categorical-12-hover: oklch(0.43 0.22 324);
948
984
  --dt-color-chart-categorical-30: oklch(0.48 0.12 225);
949
985
  --dt-color-chart-categorical-29: oklch(0.47 0.14 413);
950
- --dt-color-chart-categorical-27: oklch(0.52 0.14 171);
986
+ --dt-color-chart-categorical-27: oklch(0.56 0.15 164);
951
987
  --dt-color-chart-categorical-25: oklch(0.48 0.16 324);
952
- --dt-color-chart-categorical-24: oklch(0.59 0.19 46);
988
+ --dt-color-chart-categorical-24: oklch(0.6 0.19 43.1);
953
989
  --dt-color-chart-categorical-23: oklch(0.53 0.2 346);
954
990
  --dt-color-link-disabled-inverted-hover: var(--dt-color-link-disabled-inverted);
955
991
  --dt-color-link-disabled-hover: var(--dt-color-link-disabled);
@@ -964,12 +1000,12 @@
964
1000
  --dt-color-chart-categorical-30-hover: oklch(0.41 0.12 225);
965
1001
  --dt-color-chart-categorical-29-selected: oklch(0.33 0.14 413);
966
1002
  --dt-color-chart-categorical-29-hover: oklch(0.4 0.14 413);
967
- --dt-color-chart-categorical-27-selected: oklch(0.36 0.14 171);
968
- --dt-color-chart-categorical-27-hover: oklch(0.44 0.14 171);
1003
+ --dt-color-chart-categorical-27-selected: oklch(0.39 0.15 164);
1004
+ --dt-color-chart-categorical-27-hover: oklch(0.48 0.15 164);
969
1005
  --dt-color-chart-categorical-25-selected: oklch(0.34 0.16 324);
970
1006
  --dt-color-chart-categorical-25-hover: oklch(0.41 0.16 324);
971
- --dt-color-chart-categorical-24-selected: oklch(0.41 0.19 46);
972
- --dt-color-chart-categorical-24-hover: oklch(0.5 0.19 46);
1007
+ --dt-color-chart-categorical-24-selected: oklch(0.42 0.19 43.1);
1008
+ --dt-color-chart-categorical-24-hover: oklch(0.51 0.19 43.1);
973
1009
  --dt-color-chart-categorical-23-selected: oklch(0.37 0.2 346);
974
1010
  --dt-color-chart-categorical-23-hover: oklch(0.45 0.2 346);
975
1011
  --dt-shell-action-color-foreground-muted-active: var(--dt-shell-action-color-foreground-muted-hover);