@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
@@ -64,7 +64,7 @@
64
64
  --dt-presence-color-offline: var(--dt-color-black-500);
65
65
  --dt-presence-color-busy: var(--dt-color-gold-700);
66
66
  --dt-presence-color-unavailable: var(--dt-color-red-700);
67
- --dt-presence-color-available: var(--dt-color-green-600);
67
+ --dt-presence-color-available: var(--dt-color-green-500);
68
68
  --dt-icon-size-border-100: var(--dt-size-border-100);
69
69
  --dt-icon-size-800: calc(var(--dt-size-base) * 6);
70
70
  --dt-icon-size-700: calc(var(--dt-size-base) * 4.75);
@@ -95,12 +95,13 @@
95
95
  --dt-badge-color-foreground-ai: var(--dt-color-neutral-white);
96
96
  --dt-badge-color-foreground-bulletin-subtle: var(--dt-color-purple-900);
97
97
  --dt-badge-color-foreground-bulletin: var(--dt-color-black-50);
98
+ --dt-badge-color-foreground-success: var(--dt-color-green-1000);
98
99
  --dt-badge-color-foreground-default: var(--dt-color-black-1000);
99
100
  --dt-badge-color-background-ai: var(--dt-color-gradient-gold-red-magenta-purple);
100
101
  --dt-badge-color-background-bulletin-subtle: var(--dt-color-purple-200);
101
102
  --dt-badge-color-background-critical: var(--dt-color-red-200);
102
103
  --dt-badge-color-background-warning: var(--dt-color-gold-200);
103
- --dt-badge-color-background-success: var(--dt-color-green-200);
104
+ --dt-badge-color-background-positive: var(--dt-color-green-200);
104
105
  --dt-badge-color-background-info: var(--dt-color-blue-200);
105
106
  --dt-avatar-color-foreground-dark: var(--dt-color-neutral-black); /* Text color for light avatar backgrounds (variants 6-9) */
106
107
  --dt-avatar-color-foreground-light: var(--dt-color-neutral-white); /* Text color for dark avatar backgrounds (variants 0-5) */
@@ -119,9 +120,9 @@
119
120
  --dt-theme-mention-color-foreground: var(--dt-color-black-50);
120
121
  --dt-theme-presence-color-background-busy: var(--dt-color-gold-700);
121
122
  --dt-theme-presence-color-background-busy-unavailable: var(--dt-color-red-700);
122
- --dt-theme-presence-color-background-available: var(--dt-color-green-600);
123
+ --dt-theme-presence-color-background-available: var(--dt-color-green-500);
123
124
  --dt-theme-color-base: var(--dt-color-black-900);
124
- --dt-action-color-background-positive-primary-hover: var(--dt-color-green-700);
125
+ --dt-action-color-background-positive-primary-hover: var(--dt-color-green-500);
125
126
  --dt-action-color-background-positive-primary-default: var(--dt-color-green-600);
126
127
  --dt-action-color-background-positive-default: var(--dt-color-neutral-transparent);
127
128
  --dt-action-color-background-muted-default: var(--dt-color-neutral-transparent);
@@ -423,32 +424,44 @@
423
424
  --dt-color-border-ai: var(--dt-color-gradient-gold-red-magenta-purple);
424
425
  --dt-color-border-focus: var(--dt-color-blue-500);
425
426
  --dt-color-border-brand-strong-inverted: var(--dt-color-purple-200);
427
+ --dt-color-border-info-strong-inverted: var(--dt-color-blue-200);
426
428
  --dt-color-border-warning-strong-inverted: var(--dt-color-gold-300);
427
429
  --dt-color-border-success-strong-inverted: var(--dt-color-green-200);
430
+ --dt-color-border-positive-strong-inverted: var(--dt-color-green-200);
428
431
  --dt-color-border-critical-strong-inverted: var(--dt-color-red-300);
429
- --dt-color-border-brand-subtle-inverted: var(--dt-color-purple-800);
432
+ --dt-color-border-brand-subtle-inverted: var(--dt-color-purple-900);
433
+ --dt-color-border-info-subtle-inverted: var(--dt-color-blue-900);
430
434
  --dt-color-border-warning-subtle-inverted: var(--dt-color-gold-800);
431
- --dt-color-border-success-subtle-inverted: var(--dt-color-green-800);
435
+ --dt-color-border-success-subtle-inverted: var(--dt-color-green-600);
436
+ --dt-color-border-positive-subtle-inverted: var(--dt-color-green-900);
432
437
  --dt-color-border-critical-subtle-inverted: var(--dt-color-red-800);
433
438
  --dt-color-border-brand-inverted: var(--dt-color-purple-400);
439
+ --dt-color-border-info-inverted: var(--dt-color-blue-300);
434
440
  --dt-color-border-warning-inverted: var(--dt-color-gold-500);
435
441
  --dt-color-border-success-inverted: var(--dt-color-green-300);
442
+ --dt-color-border-positive-inverted: var(--dt-color-green-200);
436
443
  --dt-color-border-critical-inverted: var(--dt-color-red-500);
437
444
  --dt-color-border-bold-inverted: oklch(0 0 0 / 0.5);
438
445
  --dt-color-border-moderate-inverted: oklch(0 0 0 / 0.34);
439
446
  --dt-color-border-default-inverted: oklch(0 0 0 / 0.18);
440
447
  --dt-color-border-subtle-inverted: oklch(0 0 0 / 0.1);
441
448
  --dt-color-border-brand-strong: var(--dt-color-purple-900);
449
+ --dt-color-border-info-strong: var(--dt-color-blue-900);
442
450
  --dt-color-border-warning-strong: var(--dt-color-gold-900);
443
451
  --dt-color-border-success-strong: var(--dt-color-green-800);
452
+ --dt-color-border-positive-strong: var(--dt-color-green-800);
444
453
  --dt-color-border-critical-strong: var(--dt-color-red-900);
445
454
  --dt-color-border-brand-subtle: var(--dt-color-purple-500);
455
+ --dt-color-border-info-subtle: var(--dt-color-blue-300);
446
456
  --dt-color-border-warning-subtle: var(--dt-color-gold-600);
447
- --dt-color-border-success-subtle: var(--dt-color-green-500);
457
+ --dt-color-border-success-subtle: var(--dt-color-green-300);
458
+ --dt-color-border-positive-subtle: var(--dt-color-green-300);
448
459
  --dt-color-border-critical-subtle: var(--dt-color-red-300);
449
460
  --dt-color-border-brand: var(--dt-color-purple-800);
461
+ --dt-color-border-info: var(--dt-color-blue-800);
450
462
  --dt-color-border-warning: var(--dt-color-gold-800);
451
- --dt-color-border-success: var(--dt-color-green-600);
463
+ --dt-color-border-success: var(--dt-color-green-500);
464
+ --dt-color-border-positive: var(--dt-color-green-700);
452
465
  --dt-color-border-critical: var(--dt-color-red-800);
453
466
  --dt-color-border-bold: oklch(1 0 0 / 0.5);
454
467
  --dt-color-border-moderate: oklch(1 0 0 / 0.36);
@@ -458,12 +471,14 @@
458
471
  --dt-color-surface-backdrop: oklch(0 0 0 / 0.65); /* Background color for a modal-like backdrop. */
459
472
  --dt-color-surface-brand-subtle-opaque-inverted: oklch(0.98 0.01 301 / 0.66); /* Info surface as opaque background color. */
460
473
  --dt-color-surface-info-subtle-opaque-inverted: oklch(0.98 0.01 248 / 0.66); /* Info surface as opaque background color. */
461
- --dt-color-surface-success-subtle-opaque-inverted: oklch(0.98 0.01 141 / 0.66); /* Success subtle surface as opaque background color. */
474
+ --dt-color-surface-success-subtle-opaque-inverted: oklch(0.99 0.01 124 / 0.66); /* Success subtle surface as opaque background color. */
475
+ --dt-color-surface-positive-subtle-opaque-inverted: oklch(0.99 0.01 124 / 0.66); /* Positive subtle surface as opaque background color. */
462
476
  --dt-color-surface-warning-subtle-opaque-inverted: oklch(0.98 0.03 95.9 / 0.3); /* Warning subtle surface as opaque background color */
463
477
  --dt-color-surface-critical-subtle-opaque-inverted: oklch(0.93 0.03 15.2 / 0.8);
464
478
  --dt-color-surface-brand-opaque-inverted: oklch(0.93 0.03 302 / 0.8); /* Info surface as opaque background color. */
465
479
  --dt-color-surface-info-opaque-inverted: oklch(0.96 0.01 248 / 0.6); /* Info surface as opaque background color. */
466
- --dt-color-surface-success-opaque-inverted: oklch(0.92 0.09 126 / 0.3); /* Success surface as opaque background color. */
480
+ --dt-color-surface-success-opaque-inverted: oklch(0.95 0.07 128 / 0.3); /* Success surface as opaque background color. */
481
+ --dt-color-surface-positive-opaque-inverted: oklch(0.95 0.07 128 / 0.3); /* Positive surface as opaque background color. */
467
482
  --dt-color-surface-warning-opaque-inverted: oklch(0.93 0.1 93.2 / 0.5);
468
483
  --dt-color-surface-critical-opaque-inverted: oklch(0.82 0.07 24.1 / 0.5);
469
484
  --dt-color-surface-contrast-opaque-inverted: oklch(0 0 0 / 0.97); /* Contrast surface as opaque background color. */
@@ -473,17 +488,19 @@
473
488
  --dt-color-surface-secondary-opaque-inverted: oklch(0 0 0 / 0.04);
474
489
  --dt-color-surface-brand-strong-inverted: var(--dt-color-purple-400);
475
490
  --dt-color-surface-info-strong-inverted: var(--dt-color-blue-300);
476
- --dt-color-surface-success-strong-inverted: var(--dt-color-green-300); /* A contrasting positive state surface, most likely paired with inverted foreground colors. */
491
+ --dt-color-surface-positive-strong-inverted: var(--dt-color-green-950); /* A contrasting positive state surface, most likely paired with inverted foreground colors. */
477
492
  --dt-color-surface-warning-strong-inverted: var(--dt-color-gold-700);
478
493
  --dt-color-surface-critical-strong-inverted: var(--dt-color-red-500);
479
494
  --dt-color-surface-brand-subtle-inverted: var(--dt-color-purple-1000); /* A softer version of the default informational surface. */
480
495
  --dt-color-surface-info-subtle-inverted: var(--dt-color-blue-1000); /* A softer version of the default informational surface. */
481
496
  --dt-color-surface-success-subtle-inverted: var(--dt-color-green-1000); /* A softer version of the default success surface. */
497
+ --dt-color-surface-positive-subtle-inverted: var(--dt-color-green-1000); /* A softer version of the default positive surface. */
482
498
  --dt-color-surface-warning-subtle-inverted: var(--dt-color-gold-1000); /* A softer version of the default warning surface. */
483
499
  --dt-color-surface-critical-subtle-inverted: var(--dt-color-red-1000); /* A softer version of the Critical surface. */
484
500
  --dt-color-surface-brand-inverted: var(--dt-color-purple-950); /* Background surface color containing messaging or elements communicated as generally informational. */
485
501
  --dt-color-surface-info-inverted: var(--dt-color-blue-950); /* Background surface color containing messaging or elements communicated as generally informational. */
486
- --dt-color-surface-success-inverted: var(--dt-color-green-950); /* Background surface color containing messaging or elements expressing a positive or successful state. */
502
+ --dt-color-surface-success-inverted: var(--dt-color-green-900); /* Background surface color containing messaging or elements expressing a positive or successful state. */
503
+ --dt-color-surface-positive-inverted: var(--dt-color-green-900); /* Background surface color containing messaging or elements expressing a positive or successful state. */
487
504
  --dt-color-surface-warning-inverted: var(--dt-color-gold-950); /* Background surface color highlighting messaging or elements that may require user's attention. */
488
505
  --dt-color-surface-critical-inverted: var(--dt-color-red-950); /* Background surface color containing error, danger, or otherwise critical messaging or elements. */
489
506
  --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. */
@@ -494,12 +511,14 @@
494
511
  --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. */
495
512
  --dt-color-surface-brand-subtle-opaque: oklch(0.16 0.08 292 / 0.65);
496
513
  --dt-color-surface-info-subtle-opaque: oklch(0.14 0.03 244 / 0.7);
497
- --dt-color-surface-success-subtle-opaque: oklch(0.17 0.04 167 / 0.6);
514
+ --dt-color-surface-success-subtle-opaque: oklch(0.22 0.06 130 / 0.6);
515
+ --dt-color-surface-positive-subtle-opaque: oklch(0.22 0.06 130 / 0.6);
498
516
  --dt-color-surface-warning-subtle-opaque: oklch(0.24 0.05 74.2 / 0.7);
499
517
  --dt-color-surface-critical-subtle-opaque: oklch(0.17 0.07 16.5 / 0.6);
500
518
  --dt-color-surface-brand-opaque: oklch(0.23 0.13 285 / 0.7);
501
519
  --dt-color-surface-info-opaque: oklch(0.22 0.05 248 / 0.4);
502
- --dt-color-surface-success-opaque: oklch(0.37 0.08 151 / 0.28);
520
+ --dt-color-surface-success-opaque: oklch(0.44 0.12 133 / 0.28);
521
+ --dt-color-surface-positive-opaque: oklch(0.44 0.12 133 / 0.28);
503
522
  --dt-color-surface-warning-opaque: oklch(0.48 0.1 68.3 / 0.55);
504
523
  --dt-color-surface-critical-opaque: oklch(0.4 0.16 11.4 / 0.2);
505
524
  --dt-color-surface-contrast-opaque: oklch(1 0 0 / 0.97);
@@ -509,17 +528,20 @@
509
528
  --dt-color-surface-secondary-opaque: oklch(0.92 0 0 / 0.03);
510
529
  --dt-color-surface-brand-strong: var(--dt-color-purple-800);
511
530
  --dt-color-surface-info-strong: var(--dt-color-blue-600);
512
- --dt-color-surface-success-strong: var(--dt-color-green-600);
531
+ --dt-color-surface-success-strong: var(--dt-color-green-500);
532
+ --dt-color-surface-positive-strong: var(--dt-color-green-500);
513
533
  --dt-color-surface-warning-strong: var(--dt-color-gold-700);
514
534
  --dt-color-surface-critical-strong: var(--dt-color-red-800);
515
535
  --dt-color-surface-brand-subtle: var(--dt-color-purple-50); /* A softer version of the default informational surface. */
516
536
  --dt-color-surface-info-subtle: oklch(0.13 0.05 248);
517
- --dt-color-surface-success-subtle: oklch(0.12 0.05 156);
537
+ --dt-color-surface-success-subtle: oklch(0.18 0.1 133);
538
+ --dt-color-surface-positive-subtle: oklch(0.22 0.12 133);
518
539
  --dt-color-surface-warning-subtle: var(--dt-color-gold-100);
519
540
  --dt-color-surface-critical-subtle: oklch(0.12 0.09 17.8);
520
541
  --dt-color-surface-brand: var(--dt-color-purple-100); /* Background surface color containing messaging or elements communicated as generally informational. */
521
542
  --dt-color-surface-info: var(--dt-color-blue-100); /* Background surface color containing messaging or elements communicated as generally informational. */
522
543
  --dt-color-surface-success: var(--dt-color-green-100); /* Background surface color containing messaging or elements expressing a positive or successful state. */
544
+ --dt-color-surface-positive: var(--dt-color-green-100); /* Background surface color containing messaging or elements expressing a positive or successful state. */
523
545
  --dt-color-surface-warning: var(--dt-color-gold-200);
524
546
  --dt-color-surface-critical: var(--dt-color-red-100); /* Background surface color containing error, danger, or otherwise critical messaging or elements. */
525
547
  --dt-color-surface-contrast: var(--dt-color-black-1000);
@@ -535,11 +557,13 @@
535
557
  --dt-color-link-warning-hover: var(--dt-color-gold-900);
536
558
  --dt-color-link-primary-hover: var(--dt-color-purple-900);
537
559
  --dt-color-link-primary: var(--dt-color-purple-800);
560
+ --dt-color-foreground-info-strong-inverted: var(--dt-color-blue-200); /* Info strong text that sits on high-contrast surfaces or backgrounds. */
561
+ --dt-color-foreground-info-inverted: var(--dt-color-blue-300); /* Info text that sits on high-contrast surfaces or backgrounds. */
538
562
  --dt-color-foreground-warning-inverted: var(--dt-color-gold-300);
539
- --dt-color-foreground-success-strong-inverted: var(--dt-color-green-200);
540
- --dt-color-foreground-success-inverted: var(--dt-color-green-300);
541
- --dt-color-foreground-positive-strong-inverted: var(--dt-color-green-200);
542
- --dt-color-foreground-positive-inverted: var(--dt-color-green-300);
563
+ --dt-color-foreground-success-strong-inverted: var(--dt-color-green-50);
564
+ --dt-color-foreground-success-inverted: var(--dt-color-green-200);
565
+ --dt-color-foreground-positive-strong-inverted: var(--dt-color-green-50);
566
+ --dt-color-foreground-positive-inverted: var(--dt-color-green-200);
543
567
  --dt-color-foreground-critical-strong-inverted: var(--dt-color-red-200); /* Critical strong text that sits on high-contrast surfaces or backgrounds */
544
568
  --dt-color-foreground-critical-inverted: var(--dt-color-red-500);
545
569
  --dt-color-foreground-disabled-inverted: var(--dt-color-black-400); /* Disabled text color that sits on high-contrast surfaces or backgrounds. */
@@ -548,11 +572,13 @@
548
572
  --dt-color-foreground-tertiary-inverted: var(--dt-color-black-400);
549
573
  --dt-color-foreground-secondary-inverted: var(--dt-color-black-300);
550
574
  --dt-color-foreground-primary-inverted: var(--dt-color-neutral-black);
575
+ --dt-color-foreground-info-strong: var(--dt-color-blue-800);
576
+ --dt-color-foreground-info: var(--dt-color-blue-700);
551
577
  --dt-color-foreground-warning: var(--dt-color-gold-700);
552
- --dt-color-foreground-success-strong: var(--dt-color-green-800);
553
- --dt-color-foreground-success: var(--dt-color-green-600);
554
- --dt-color-foreground-positive-strong: var(--dt-color-green-800);
555
- --dt-color-foreground-positive: var(--dt-color-green-600);
578
+ --dt-color-foreground-success-strong: var(--dt-color-green-700);
579
+ --dt-color-foreground-success: var(--dt-color-green-500);
580
+ --dt-color-foreground-positive-strong: var(--dt-color-green-700);
581
+ --dt-color-foreground-positive: var(--dt-color-green-500);
556
582
  --dt-color-foreground-critical-strong: var(--dt-color-red-900);
557
583
  --dt-color-foreground-critical: var(--dt-color-red-800);
558
584
  --dt-color-foreground-disabled: var(--dt-color-black-600);
@@ -588,6 +614,7 @@
588
614
  --dt-button-font-size-xs: var(--dt-font-size-100); /* Extra small Button text size */
589
615
  --dt-badge-color-border-default: var(--dt-color-border-subtle);
590
616
  --dt-badge-color-background-bulletin: var(--dt-color-surface-brand-strong);
617
+ --dt-badge-color-background-success: var(--dt-badge-color-background-positive);
591
618
  --dt-badge-color-background-default: var(--dt-color-surface-moderate-opaque);
592
619
  --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. */
593
620
  --dt-shell-presence-color-offline: var(--dt-presence-color-offline);
@@ -640,13 +667,13 @@
640
667
  --dt-theme-topbar-field-color-foreground: oklch(0.92 0 0 / 0.5);
641
668
  --dt-theme-topbar-color-background: var(--dt-color-surface-secondary);
642
669
  --dt-theme-topbar-color-foreground: oklch(0.92 0 0 / 0.8);
643
- --dt-action-color-border-positive-outlined-default: var(--dt-color-border-success);
670
+ --dt-action-color-border-positive-outlined-default: var(--dt-color-border-positive);
644
671
  --dt-action-color-border-muted-outlined-default: var(--dt-color-border-default);
645
672
  --dt-action-color-border-inverted-outlined-default: var(--dt-color-border-default-inverted);
646
673
  --dt-action-color-border-critical-outlined-default: var(--dt-color-border-critical);
647
674
  --dt-action-color-border-base-outlined-default: var(--dt-color-border-brand);
648
675
  --dt-action-color-background-positive-primary-active: var(--dt-action-color-background-positive-primary-default);
649
- --dt-action-color-background-positive-hover: var(--dt-color-surface-success-opaque);
676
+ --dt-action-color-background-positive-hover: var(--dt-color-surface-positive-opaque);
650
677
  --dt-action-color-background-disabled-default: var(--dt-color-surface-bold-opaque);
651
678
  --dt-action-color-background-muted-active: var(--dt-color-surface-bold-opaque);
652
679
  --dt-action-color-background-muted-hover: var(--dt-color-surface-moderate-opaque);
@@ -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.48 0.17 268);
788
815
  --dt-color-chart-categorical-26: oklch(0.57 0.17 382);
789
816
  --dt-color-chart-categorical-22: oklch(0.36 0.07 366);
790
- --dt-color-chart-categorical-21: oklch(0.54 0.15 114);
817
+ --dt-color-chart-categorical-21: oklch(0.55 0.15 112);
791
818
  --dt-color-chart-categorical-20: oklch(0.48 0.17 268);
792
819
  --dt-color-chart-categorical-19: oklch(0.47 0.13 241);
793
820
  --dt-color-chart-categorical-18: oklch(0.44 0.12 81.8);
794
821
  --dt-color-chart-categorical-17: oklch(0.57 0.26 334);
795
- --dt-color-chart-categorical-16: oklch(0.55 0.14 134);
822
+ --dt-color-chart-categorical-16: oklch(0.61 0.16 125);
796
823
  --dt-color-chart-categorical-15: oklch(0.59 0.16 396);
797
824
  --dt-color-chart-categorical-14: oklch(0.5 0.18 274);
798
- --dt-color-chart-categorical-13: oklch(0.57 0.21 398);
825
+ --dt-color-chart-categorical-13: oklch(0.59 0.22 394);
799
826
  --dt-color-chart-categorical-12: oklch(0.51 0.22 324);
800
827
  --dt-color-surface-primary-opaque-inverted: oklch(1 0 0 / 0.85); /* Secondary surface as opaque background color. */
801
828
  --dt-color-surface-primary-opaque: oklch(0.2 0 0 / 0.9);
802
829
  --dt-color-link-disabled-inverted: var(--dt-color-foreground-disabled-inverted);
803
830
  --dt-color-link-muted-inverted: var(--dt-color-foreground-secondary-inverted);
831
+ --dt-color-link-info-inverted-hover: var(--dt-color-foreground-info-strong-inverted);
832
+ --dt-color-link-info-inverted: var(--dt-color-foreground-info-inverted);
804
833
  --dt-color-link-warning-inverted: var(--dt-color-foreground-warning-inverted);
805
834
  --dt-color-link-success-inverted-hover: var(--dt-color-foreground-positive-strong-inverted);
806
835
  --dt-color-link-success-inverted: var(--dt-color-foreground-positive-inverted);
836
+ --dt-color-link-positive-inverted-hover: var(--dt-color-foreground-positive-strong-inverted);
837
+ --dt-color-link-positive-inverted: var(--dt-color-foreground-positive-inverted);
807
838
  --dt-color-link-critical-inverted-hover: var(--dt-color-foreground-critical-strong-inverted);
808
839
  --dt-color-link-critical-inverted: var(--dt-color-foreground-critical-inverted);
809
840
  --dt-color-link-disabled: var(--dt-color-foreground-disabled);
810
841
  --dt-color-link-muted-hover: var(--dt-color-foreground-primary);
811
842
  --dt-color-link-muted: var(--dt-color-foreground-secondary);
843
+ --dt-color-link-info-hover: var(--dt-color-foreground-info-strong);
844
+ --dt-color-link-info: var(--dt-color-foreground-info);
812
845
  --dt-color-link-warning: var(--dt-color-foreground-warning);
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);
@@ -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);