@dialpad/dialtone-css 8.80.0-next.6 → 8.80.0-next.8

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 (144) hide show
  1. package/lib/build/js/dialtone_migrate_border_radius/index.mjs +273 -0
  2. package/lib/build/js/dialtone_migrate_border_radius/test.mjs +422 -0
  3. package/lib/build/js/dialtone_migrate_typography/index.mjs +1628 -0
  4. package/lib/build/js/dialtone_migrate_typography/test.mjs +1020 -0
  5. package/lib/build/js/dialtone_migration_helper/configs/theme-to-mode.mjs +108 -0
  6. package/lib/build/js/dialtone_migration_helper/tests/theme-to-mode-test-examples.vue +24 -0
  7. package/lib/build/js/dialtone_migration_helper/tests/theme-to-mode.test.mjs +177 -0
  8. package/lib/build/less/components/box.less +11 -3
  9. package/lib/build/less/components/button.less +32 -25
  10. package/lib/build/less/components/card.less +1 -1
  11. package/lib/build/less/components/chip.less +32 -0
  12. package/lib/build/less/components/emoji-picker.less +10 -11
  13. package/lib/build/less/components/forms.less +22 -16
  14. package/lib/build/less/components/image-viewer.less +1 -0
  15. package/lib/build/less/components/modal.less +9 -3
  16. package/lib/build/less/components/notice.less +4 -0
  17. package/lib/build/less/components/popover.less +2 -2
  18. package/lib/build/less/components/presence.less +23 -3
  19. package/lib/build/less/components/toast.less +2 -2
  20. package/lib/build/less/recipes/leftbar_row.less +1 -0
  21. package/lib/build/less/recipes/unread_pill.less +1 -1
  22. package/lib/build/less/utilities/effects.less +11 -5
  23. package/lib/dist/dialtone-default-theme.css +608 -162
  24. package/lib/dist/dialtone-default-theme.min.css +1 -1
  25. package/lib/dist/dialtone-docs.json +1 -1
  26. package/lib/dist/dialtone.css +446 -118
  27. package/lib/dist/dialtone.min.css +1 -1
  28. package/lib/dist/js/dialtone_migrate_border_radius/index.mjs +273 -0
  29. package/lib/dist/js/dialtone_migrate_border_radius/test.mjs +422 -0
  30. package/lib/dist/js/dialtone_migrate_typography/index.mjs +1628 -0
  31. package/lib/dist/js/dialtone_migrate_typography/test.mjs +1020 -0
  32. package/lib/dist/js/dialtone_migration_helper/configs/theme-to-mode.mjs +108 -0
  33. package/lib/dist/js/dialtone_migration_helper/tests/theme-to-mode-test-examples.vue +24 -0
  34. package/lib/dist/js/dialtone_migration_helper/tests/theme-to-mode.test.mjs +177 -0
  35. package/lib/dist/tokens/tokens-101-dark.css +1 -0
  36. package/lib/dist/tokens/tokens-101-light.css +1 -0
  37. package/lib/dist/tokens/tokens-102-dark.css +1 -0
  38. package/lib/dist/tokens/tokens-102-light.css +1 -0
  39. package/lib/dist/tokens/tokens-103-dark.css +1 -0
  40. package/lib/dist/tokens/tokens-103-light.css +1 -0
  41. package/lib/dist/tokens/tokens-104-dark.css +1 -0
  42. package/lib/dist/tokens/tokens-104-light.css +1 -0
  43. package/lib/dist/tokens/tokens-105-dark.css +1 -0
  44. package/lib/dist/tokens/tokens-105-light.css +1 -0
  45. package/lib/dist/tokens/tokens-106-dark.css +1 -0
  46. package/lib/dist/tokens/tokens-106-light.css +1 -0
  47. package/lib/dist/tokens/tokens-107-dark.css +1 -0
  48. package/lib/dist/tokens/tokens-107-light.css +1 -0
  49. package/lib/dist/tokens/tokens-108-dark.css +1 -0
  50. package/lib/dist/tokens/tokens-108-light.css +1 -0
  51. package/lib/dist/tokens/tokens-109-dark.css +1 -0
  52. package/lib/dist/tokens/tokens-109-light.css +1 -0
  53. package/lib/dist/tokens/tokens-110-dark.css +1 -0
  54. package/lib/dist/tokens/tokens-110-light.css +1 -0
  55. package/lib/dist/tokens/tokens-111-dark.css +1 -0
  56. package/lib/dist/tokens/tokens-111-light.css +1 -0
  57. package/lib/dist/tokens/tokens-112-dark.css +1 -0
  58. package/lib/dist/tokens/tokens-112-light.css +1 -0
  59. package/lib/dist/tokens/tokens-113-dark.css +1 -0
  60. package/lib/dist/tokens/tokens-113-light.css +1 -0
  61. package/lib/dist/tokens/tokens-114-dark.css +1 -0
  62. package/lib/dist/tokens/tokens-114-light.css +1 -0
  63. package/lib/dist/tokens/tokens-115-dark.css +1 -0
  64. package/lib/dist/tokens/tokens-115-light.css +1 -0
  65. package/lib/dist/tokens/tokens-116-dark.css +1 -0
  66. package/lib/dist/tokens/tokens-116-light.css +1 -0
  67. package/lib/dist/tokens/tokens-117-dark.css +1 -0
  68. package/lib/dist/tokens/tokens-117-light.css +1 -0
  69. package/lib/dist/tokens/tokens-118-dark.css +1 -0
  70. package/lib/dist/tokens/tokens-118-light.css +1 -0
  71. package/lib/dist/tokens/tokens-119-dark.css +1 -0
  72. package/lib/dist/tokens/tokens-119-light.css +1 -0
  73. package/lib/dist/tokens/tokens-120-dark.css +1 -0
  74. package/lib/dist/tokens/tokens-120-light.css +1 -0
  75. package/lib/dist/tokens/tokens-121-dark.css +1 -0
  76. package/lib/dist/tokens/tokens-121-light.css +1 -0
  77. package/lib/dist/tokens/tokens-122-dark.css +1 -0
  78. package/lib/dist/tokens/tokens-122-light.css +1 -0
  79. package/lib/dist/tokens/tokens-123-dark.css +1 -0
  80. package/lib/dist/tokens/tokens-123-light.css +1 -0
  81. package/lib/dist/tokens/tokens-124-dark.css +1 -0
  82. package/lib/dist/tokens/tokens-124-light.css +1 -0
  83. package/lib/dist/tokens/tokens-125-dark.css +1 -0
  84. package/lib/dist/tokens/tokens-125-light.css +1 -0
  85. package/lib/dist/tokens/tokens-126-dark.css +1 -0
  86. package/lib/dist/tokens/tokens-126-light.css +1 -0
  87. package/lib/dist/tokens/tokens-127-dark.css +1 -0
  88. package/lib/dist/tokens/tokens-127-light.css +1 -0
  89. package/lib/dist/tokens/tokens-128-dark.css +1 -0
  90. package/lib/dist/tokens/tokens-128-light.css +1 -0
  91. package/lib/dist/tokens/tokens-129-dark.css +1 -0
  92. package/lib/dist/tokens/tokens-129-light.css +1 -0
  93. package/lib/dist/tokens/tokens-130-dark.css +1 -0
  94. package/lib/dist/tokens/tokens-130-light.css +1 -0
  95. package/lib/dist/tokens/tokens-131-dark.css +1 -0
  96. package/lib/dist/tokens/tokens-131-light.css +1 -0
  97. package/lib/dist/tokens/tokens-132-dark.css +1 -0
  98. package/lib/dist/tokens/tokens-132-light.css +1 -0
  99. package/lib/dist/tokens/tokens-133-dark.css +1 -0
  100. package/lib/dist/tokens/tokens-133-light.css +1 -0
  101. package/lib/dist/tokens/tokens-134-dark.css +1 -0
  102. package/lib/dist/tokens/tokens-134-light.css +1 -0
  103. package/lib/dist/tokens/tokens-135-dark.css +1 -0
  104. package/lib/dist/tokens/tokens-135-light.css +1 -0
  105. package/lib/dist/tokens/tokens-136-dark.css +1 -0
  106. package/lib/dist/tokens/tokens-136-light.css +1 -0
  107. package/lib/dist/tokens/tokens-137-dark.css +1 -0
  108. package/lib/dist/tokens/tokens-137-light.css +1 -0
  109. package/lib/dist/tokens/tokens-aegean-dark.css +1 -0
  110. package/lib/dist/tokens/tokens-aegean-light.css +1 -0
  111. package/lib/dist/tokens/tokens-base-dark.css +267 -126
  112. package/lib/dist/tokens/tokens-base-light.css +161 -44
  113. package/lib/dist/tokens/tokens-botany-dark.css +1 -0
  114. package/lib/dist/tokens/tokens-botany-light.css +1 -0
  115. package/lib/dist/tokens/tokens-buttercream-dark.css +1 -0
  116. package/lib/dist/tokens/tokens-buttercream-light.css +1 -0
  117. package/lib/dist/tokens/tokens-ceruleo-dark.css +1 -0
  118. package/lib/dist/tokens/tokens-ceruleo-light.css +1 -0
  119. package/lib/dist/tokens/tokens-debug-base.css +158 -41
  120. package/lib/dist/tokens/tokens-debug-dp.css +1 -0
  121. package/lib/dist/tokens/tokens-dp-dark.css +1 -0
  122. package/lib/dist/tokens/tokens-dp-light.css +1 -0
  123. package/lib/dist/tokens/tokens-expressive-dark.css +1 -0
  124. package/lib/dist/tokens/tokens-expressive-light.css +1 -0
  125. package/lib/dist/tokens/tokens-expressive-sm-dark.css +1 -0
  126. package/lib/dist/tokens/tokens-expressive-sm-light.css +1 -0
  127. package/lib/dist/tokens/tokens-high-desert-dark.css +1 -0
  128. package/lib/dist/tokens/tokens-high-desert-light.css +1 -0
  129. package/lib/dist/tokens/tokens-melon-dark.css +1 -0
  130. package/lib/dist/tokens/tokens-melon-light.css +1 -0
  131. package/lib/dist/tokens/tokens-plum-dark.css +1 -0
  132. package/lib/dist/tokens/tokens-plum-light.css +1 -0
  133. package/lib/dist/tokens/tokens-prota-deuter-dark.css +1 -0
  134. package/lib/dist/tokens/tokens-prota-deuter-light.css +1 -0
  135. package/lib/dist/tokens/tokens-sunflower-dark.css +1 -0
  136. package/lib/dist/tokens/tokens-sunflower-light.css +1 -0
  137. package/lib/dist/tokens/tokens-tmo-dark.css +1 -0
  138. package/lib/dist/tokens/tokens-tmo-light.css +1 -0
  139. package/lib/dist/tokens/tokens-trita-dark.css +1 -0
  140. package/lib/dist/tokens/tokens-trita-light.css +1 -0
  141. package/lib/dist/tokens/tokens-verdant-haze-dark.css +1 -0
  142. package/lib/dist/tokens/tokens-verdant-haze-light.css +1 -0
  143. package/lib/dist/tokens-docs.json +1 -1
  144. package/package.json +5 -3
@@ -787,6 +787,7 @@
787
787
  --dt-color-surface-moderate: var(--dt-color-black-250);
788
788
  --dt-color-surface-secondary: var(--dt-color-black-150);
789
789
  --dt-color-surface-primary: var(--dt-color-black-100);
790
+ --dt-color-surface-overlay: var(--dt-color-black-200);
790
791
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
791
792
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
792
793
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -770,6 +770,7 @@
770
770
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
771
771
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
772
772
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
773
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
773
774
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
774
775
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
775
776
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -787,6 +787,7 @@
787
787
  --dt-color-surface-moderate: var(--dt-color-black-250);
788
788
  --dt-color-surface-secondary: var(--dt-color-black-150);
789
789
  --dt-color-surface-primary: var(--dt-color-black-100);
790
+ --dt-color-surface-overlay: var(--dt-color-black-200);
790
791
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
791
792
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
792
793
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -770,6 +770,7 @@
770
770
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
771
771
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
772
772
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
773
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
773
774
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
774
775
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
775
776
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -787,6 +787,7 @@
787
787
  --dt-color-surface-moderate: var(--dt-color-black-250);
788
788
  --dt-color-surface-secondary: var(--dt-color-black-150);
789
789
  --dt-color-surface-primary: var(--dt-color-black-100);
790
+ --dt-color-surface-overlay: var(--dt-color-black-200);
790
791
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
791
792
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
792
793
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -770,6 +770,7 @@
770
770
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
771
771
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
772
772
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
773
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
773
774
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
774
775
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
775
776
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -787,6 +787,7 @@
787
787
  --dt-color-surface-moderate: var(--dt-color-black-250);
788
788
  --dt-color-surface-secondary: var(--dt-color-black-150);
789
789
  --dt-color-surface-primary: var(--dt-color-black-100);
790
+ --dt-color-surface-overlay: var(--dt-color-black-200);
790
791
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
791
792
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
792
793
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -770,6 +770,7 @@
770
770
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
771
771
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
772
772
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
773
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
773
774
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
774
775
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
775
776
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -787,6 +787,7 @@
787
787
  --dt-color-surface-moderate: var(--dt-color-black-250);
788
788
  --dt-color-surface-secondary: var(--dt-color-black-150);
789
789
  --dt-color-surface-primary: var(--dt-color-black-100);
790
+ --dt-color-surface-overlay: var(--dt-color-black-200);
790
791
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
791
792
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
792
793
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -770,6 +770,7 @@
770
770
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
771
771
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
772
772
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
773
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
773
774
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
774
775
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
775
776
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -787,6 +787,7 @@
787
787
  --dt-color-surface-moderate: var(--dt-color-black-250);
788
788
  --dt-color-surface-secondary: var(--dt-color-black-150);
789
789
  --dt-color-surface-primary: var(--dt-color-black-100);
790
+ --dt-color-surface-overlay: var(--dt-color-black-200);
790
791
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
791
792
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
792
793
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -770,6 +770,7 @@
770
770
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
771
771
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
772
772
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
773
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
773
774
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
774
775
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
775
776
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -787,6 +787,7 @@
787
787
  --dt-color-surface-moderate: var(--dt-color-black-250);
788
788
  --dt-color-surface-secondary: var(--dt-color-black-150);
789
789
  --dt-color-surface-primary: var(--dt-color-black-100);
790
+ --dt-color-surface-overlay: var(--dt-color-black-200);
790
791
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
791
792
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
792
793
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -770,6 +770,7 @@
770
770
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
771
771
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
772
772
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
773
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
773
774
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
774
775
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
775
776
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -787,6 +787,7 @@
787
787
  --dt-color-surface-moderate: var(--dt-color-black-250);
788
788
  --dt-color-surface-secondary: var(--dt-color-black-150);
789
789
  --dt-color-surface-primary: var(--dt-color-black-100);
790
+ --dt-color-surface-overlay: var(--dt-color-black-200);
790
791
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
791
792
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
792
793
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -770,6 +770,7 @@
770
770
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
771
771
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
772
772
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
773
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
773
774
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
774
775
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
775
776
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -787,6 +787,7 @@
787
787
  --dt-color-surface-moderate: var(--dt-color-black-250);
788
788
  --dt-color-surface-secondary: var(--dt-color-black-150);
789
789
  --dt-color-surface-primary: var(--dt-color-black-100);
790
+ --dt-color-surface-overlay: var(--dt-color-black-200);
790
791
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
791
792
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
792
793
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -770,6 +770,7 @@
770
770
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
771
771
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
772
772
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
773
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
773
774
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
774
775
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
775
776
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -787,6 +787,7 @@
787
787
  --dt-color-surface-moderate: var(--dt-color-black-250);
788
788
  --dt-color-surface-secondary: var(--dt-color-black-150);
789
789
  --dt-color-surface-primary: var(--dt-color-black-100);
790
+ --dt-color-surface-overlay: var(--dt-color-black-200);
790
791
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
791
792
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
792
793
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -770,6 +770,7 @@
770
770
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
771
771
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
772
772
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
773
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
773
774
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
774
775
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
775
776
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -787,6 +787,7 @@
787
787
  --dt-color-surface-moderate: var(--dt-color-black-250);
788
788
  --dt-color-surface-secondary: var(--dt-color-black-150);
789
789
  --dt-color-surface-primary: var(--dt-color-black-100);
790
+ --dt-color-surface-overlay: var(--dt-color-black-200);
790
791
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
791
792
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
792
793
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -770,6 +770,7 @@
770
770
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
771
771
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
772
772
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
773
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
773
774
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
774
775
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
775
776
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -787,6 +787,7 @@
787
787
  --dt-color-surface-moderate: var(--dt-color-black-250);
788
788
  --dt-color-surface-secondary: var(--dt-color-black-150);
789
789
  --dt-color-surface-primary: var(--dt-color-black-100);
790
+ --dt-color-surface-overlay: var(--dt-color-black-200);
790
791
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
791
792
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
792
793
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -770,6 +770,7 @@
770
770
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
771
771
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
772
772
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
773
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
773
774
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
774
775
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
775
776
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -787,6 +787,7 @@
787
787
  --dt-color-surface-moderate: var(--dt-color-black-250);
788
788
  --dt-color-surface-secondary: var(--dt-color-black-150);
789
789
  --dt-color-surface-primary: var(--dt-color-black-100);
790
+ --dt-color-surface-overlay: var(--dt-color-black-200);
790
791
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
791
792
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
792
793
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -770,6 +770,7 @@
770
770
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
771
771
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
772
772
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
773
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
773
774
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
774
775
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
775
776
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -787,6 +787,7 @@
787
787
  --dt-color-surface-moderate: var(--dt-color-black-250);
788
788
  --dt-color-surface-secondary: var(--dt-color-black-150);
789
789
  --dt-color-surface-primary: var(--dt-color-black-100);
790
+ --dt-color-surface-overlay: var(--dt-color-black-200);
790
791
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
791
792
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
792
793
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -770,6 +770,7 @@
770
770
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
771
771
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
772
772
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
773
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
773
774
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
774
775
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
775
776
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -787,6 +787,7 @@
787
787
  --dt-color-surface-moderate: var(--dt-color-black-250);
788
788
  --dt-color-surface-secondary: var(--dt-color-black-150);
789
789
  --dt-color-surface-primary: var(--dt-color-black-100);
790
+ --dt-color-surface-overlay: var(--dt-color-black-200);
790
791
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
791
792
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
792
793
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -770,6 +770,7 @@
770
770
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
771
771
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
772
772
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
773
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
773
774
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
774
775
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
775
776
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -787,6 +787,7 @@
787
787
  --dt-color-surface-moderate: var(--dt-color-black-250);
788
788
  --dt-color-surface-secondary: var(--dt-color-black-150);
789
789
  --dt-color-surface-primary: var(--dt-color-black-100);
790
+ --dt-color-surface-overlay: var(--dt-color-black-200);
790
791
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
791
792
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
792
793
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -770,6 +770,7 @@
770
770
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
771
771
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
772
772
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
773
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
773
774
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
774
775
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
775
776
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -787,6 +787,7 @@
787
787
  --dt-color-surface-moderate: var(--dt-color-black-250);
788
788
  --dt-color-surface-secondary: var(--dt-color-black-150);
789
789
  --dt-color-surface-primary: var(--dt-color-black-100);
790
+ --dt-color-surface-overlay: var(--dt-color-black-200);
790
791
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
791
792
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
792
793
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -770,6 +770,7 @@
770
770
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
771
771
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
772
772
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
773
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
773
774
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
774
775
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
775
776
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -787,6 +787,7 @@
787
787
  --dt-color-surface-moderate: var(--dt-color-black-250);
788
788
  --dt-color-surface-secondary: var(--dt-color-black-150);
789
789
  --dt-color-surface-primary: var(--dt-color-black-100);
790
+ --dt-color-surface-overlay: var(--dt-color-black-200);
790
791
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
791
792
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
792
793
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -770,6 +770,7 @@
770
770
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
771
771
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
772
772
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
773
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
773
774
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
774
775
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
775
776
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -787,6 +787,7 @@
787
787
  --dt-color-surface-moderate: var(--dt-color-black-250);
788
788
  --dt-color-surface-secondary: var(--dt-color-black-150);
789
789
  --dt-color-surface-primary: var(--dt-color-black-100);
790
+ --dt-color-surface-overlay: var(--dt-color-black-200);
790
791
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
791
792
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
792
793
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -770,6 +770,7 @@
770
770
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
771
771
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
772
772
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
773
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
773
774
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
774
775
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
775
776
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -787,6 +787,7 @@
787
787
  --dt-color-surface-moderate: var(--dt-color-black-250);
788
788
  --dt-color-surface-secondary: var(--dt-color-black-150);
789
789
  --dt-color-surface-primary: var(--dt-color-black-100);
790
+ --dt-color-surface-overlay: var(--dt-color-black-200);
790
791
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
791
792
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
792
793
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -770,6 +770,7 @@
770
770
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
771
771
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
772
772
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
773
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
773
774
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
774
775
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
775
776
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -767,6 +767,7 @@
767
767
  --dt-color-surface-moderate: var(--dt-color-black-250);
768
768
  --dt-color-surface-secondary: var(--dt-color-black-150);
769
769
  --dt-color-surface-primary: var(--dt-color-black-100);
770
+ --dt-color-surface-overlay: var(--dt-color-black-200);
770
771
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
771
772
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
772
773
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -751,6 +751,7 @@
751
751
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
752
752
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
753
753
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
754
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
754
755
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
755
756
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
756
757
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);