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

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 (134) 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/button.less +2 -0
  9. package/lib/build/less/components/emoji-picker.less +10 -11
  10. package/lib/build/less/components/forms.less +22 -16
  11. package/lib/build/less/components/modal.less +8 -2
  12. package/lib/build/less/components/notice.less +4 -0
  13. package/lib/build/less/components/popover.less +1 -1
  14. package/lib/build/less/components/presence.less +23 -3
  15. package/lib/build/less/recipes/leftbar_row.less +1 -0
  16. package/lib/dist/dialtone-default-theme.css +67 -34
  17. package/lib/dist/dialtone-default-theme.min.css +1 -1
  18. package/lib/dist/dialtone-docs.json +1 -1
  19. package/lib/dist/dialtone.css +66 -34
  20. package/lib/dist/dialtone.min.css +1 -1
  21. package/lib/dist/js/dialtone_migrate_border_radius/index.mjs +273 -0
  22. package/lib/dist/js/dialtone_migrate_border_radius/test.mjs +422 -0
  23. package/lib/dist/js/dialtone_migrate_typography/index.mjs +1628 -0
  24. package/lib/dist/js/dialtone_migrate_typography/test.mjs +1020 -0
  25. package/lib/dist/js/dialtone_migration_helper/configs/theme-to-mode.mjs +108 -0
  26. package/lib/dist/js/dialtone_migration_helper/tests/theme-to-mode-test-examples.vue +24 -0
  27. package/lib/dist/js/dialtone_migration_helper/tests/theme-to-mode.test.mjs +177 -0
  28. package/lib/dist/tokens/tokens-101-dark.css +1 -0
  29. package/lib/dist/tokens/tokens-101-light.css +1 -0
  30. package/lib/dist/tokens/tokens-102-dark.css +1 -0
  31. package/lib/dist/tokens/tokens-102-light.css +1 -0
  32. package/lib/dist/tokens/tokens-103-dark.css +1 -0
  33. package/lib/dist/tokens/tokens-103-light.css +1 -0
  34. package/lib/dist/tokens/tokens-104-dark.css +1 -0
  35. package/lib/dist/tokens/tokens-104-light.css +1 -0
  36. package/lib/dist/tokens/tokens-105-dark.css +1 -0
  37. package/lib/dist/tokens/tokens-105-light.css +1 -0
  38. package/lib/dist/tokens/tokens-106-dark.css +1 -0
  39. package/lib/dist/tokens/tokens-106-light.css +1 -0
  40. package/lib/dist/tokens/tokens-107-dark.css +1 -0
  41. package/lib/dist/tokens/tokens-107-light.css +1 -0
  42. package/lib/dist/tokens/tokens-108-dark.css +1 -0
  43. package/lib/dist/tokens/tokens-108-light.css +1 -0
  44. package/lib/dist/tokens/tokens-109-dark.css +1 -0
  45. package/lib/dist/tokens/tokens-109-light.css +1 -0
  46. package/lib/dist/tokens/tokens-110-dark.css +1 -0
  47. package/lib/dist/tokens/tokens-110-light.css +1 -0
  48. package/lib/dist/tokens/tokens-111-dark.css +1 -0
  49. package/lib/dist/tokens/tokens-111-light.css +1 -0
  50. package/lib/dist/tokens/tokens-112-dark.css +1 -0
  51. package/lib/dist/tokens/tokens-112-light.css +1 -0
  52. package/lib/dist/tokens/tokens-113-dark.css +1 -0
  53. package/lib/dist/tokens/tokens-113-light.css +1 -0
  54. package/lib/dist/tokens/tokens-114-dark.css +1 -0
  55. package/lib/dist/tokens/tokens-114-light.css +1 -0
  56. package/lib/dist/tokens/tokens-115-dark.css +1 -0
  57. package/lib/dist/tokens/tokens-115-light.css +1 -0
  58. package/lib/dist/tokens/tokens-116-dark.css +1 -0
  59. package/lib/dist/tokens/tokens-116-light.css +1 -0
  60. package/lib/dist/tokens/tokens-117-dark.css +1 -0
  61. package/lib/dist/tokens/tokens-117-light.css +1 -0
  62. package/lib/dist/tokens/tokens-118-dark.css +1 -0
  63. package/lib/dist/tokens/tokens-118-light.css +1 -0
  64. package/lib/dist/tokens/tokens-119-dark.css +1 -0
  65. package/lib/dist/tokens/tokens-119-light.css +1 -0
  66. package/lib/dist/tokens/tokens-120-dark.css +1 -0
  67. package/lib/dist/tokens/tokens-120-light.css +1 -0
  68. package/lib/dist/tokens/tokens-121-dark.css +1 -0
  69. package/lib/dist/tokens/tokens-121-light.css +1 -0
  70. package/lib/dist/tokens/tokens-122-dark.css +1 -0
  71. package/lib/dist/tokens/tokens-122-light.css +1 -0
  72. package/lib/dist/tokens/tokens-123-dark.css +1 -0
  73. package/lib/dist/tokens/tokens-123-light.css +1 -0
  74. package/lib/dist/tokens/tokens-124-dark.css +1 -0
  75. package/lib/dist/tokens/tokens-124-light.css +1 -0
  76. package/lib/dist/tokens/tokens-125-dark.css +1 -0
  77. package/lib/dist/tokens/tokens-125-light.css +1 -0
  78. package/lib/dist/tokens/tokens-126-dark.css +1 -0
  79. package/lib/dist/tokens/tokens-126-light.css +1 -0
  80. package/lib/dist/tokens/tokens-127-dark.css +1 -0
  81. package/lib/dist/tokens/tokens-127-light.css +1 -0
  82. package/lib/dist/tokens/tokens-128-dark.css +1 -0
  83. package/lib/dist/tokens/tokens-128-light.css +1 -0
  84. package/lib/dist/tokens/tokens-129-dark.css +1 -0
  85. package/lib/dist/tokens/tokens-129-light.css +1 -0
  86. package/lib/dist/tokens/tokens-130-dark.css +1 -0
  87. package/lib/dist/tokens/tokens-130-light.css +1 -0
  88. package/lib/dist/tokens/tokens-131-dark.css +1 -0
  89. package/lib/dist/tokens/tokens-131-light.css +1 -0
  90. package/lib/dist/tokens/tokens-132-dark.css +1 -0
  91. package/lib/dist/tokens/tokens-132-light.css +1 -0
  92. package/lib/dist/tokens/tokens-133-dark.css +1 -0
  93. package/lib/dist/tokens/tokens-133-light.css +1 -0
  94. package/lib/dist/tokens/tokens-134-dark.css +1 -0
  95. package/lib/dist/tokens/tokens-134-light.css +1 -0
  96. package/lib/dist/tokens/tokens-135-dark.css +1 -0
  97. package/lib/dist/tokens/tokens-135-light.css +1 -0
  98. package/lib/dist/tokens/tokens-136-dark.css +1 -0
  99. package/lib/dist/tokens/tokens-136-light.css +1 -0
  100. package/lib/dist/tokens/tokens-137-dark.css +1 -0
  101. package/lib/dist/tokens/tokens-137-light.css +1 -0
  102. package/lib/dist/tokens/tokens-aegean-dark.css +1 -0
  103. package/lib/dist/tokens/tokens-aegean-light.css +1 -0
  104. package/lib/dist/tokens/tokens-botany-dark.css +1 -0
  105. package/lib/dist/tokens/tokens-botany-light.css +1 -0
  106. package/lib/dist/tokens/tokens-buttercream-dark.css +1 -0
  107. package/lib/dist/tokens/tokens-buttercream-light.css +1 -0
  108. package/lib/dist/tokens/tokens-ceruleo-dark.css +1 -0
  109. package/lib/dist/tokens/tokens-ceruleo-light.css +1 -0
  110. package/lib/dist/tokens/tokens-debug-dp.css +1 -0
  111. package/lib/dist/tokens/tokens-dp-dark.css +1 -0
  112. package/lib/dist/tokens/tokens-dp-light.css +1 -0
  113. package/lib/dist/tokens/tokens-expressive-dark.css +1 -0
  114. package/lib/dist/tokens/tokens-expressive-light.css +1 -0
  115. package/lib/dist/tokens/tokens-expressive-sm-dark.css +1 -0
  116. package/lib/dist/tokens/tokens-expressive-sm-light.css +1 -0
  117. package/lib/dist/tokens/tokens-high-desert-dark.css +1 -0
  118. package/lib/dist/tokens/tokens-high-desert-light.css +1 -0
  119. package/lib/dist/tokens/tokens-melon-dark.css +1 -0
  120. package/lib/dist/tokens/tokens-melon-light.css +1 -0
  121. package/lib/dist/tokens/tokens-plum-dark.css +1 -0
  122. package/lib/dist/tokens/tokens-plum-light.css +1 -0
  123. package/lib/dist/tokens/tokens-prota-deuter-dark.css +1 -0
  124. package/lib/dist/tokens/tokens-prota-deuter-light.css +1 -0
  125. package/lib/dist/tokens/tokens-sunflower-dark.css +1 -0
  126. package/lib/dist/tokens/tokens-sunflower-light.css +1 -0
  127. package/lib/dist/tokens/tokens-tmo-dark.css +1 -0
  128. package/lib/dist/tokens/tokens-tmo-light.css +1 -0
  129. package/lib/dist/tokens/tokens-trita-dark.css +1 -0
  130. package/lib/dist/tokens/tokens-trita-light.css +1 -0
  131. package/lib/dist/tokens/tokens-verdant-haze-dark.css +1 -0
  132. package/lib/dist/tokens/tokens-verdant-haze-light.css +1 -0
  133. package/lib/dist/tokens-docs.json +1 -1
  134. 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);
@@ -775,6 +775,7 @@
775
775
  --dt-color-surface-moderate: var(--dt-color-black-250);
776
776
  --dt-color-surface-secondary: var(--dt-color-black-150);
777
777
  --dt-color-surface-primary: var(--dt-color-black-100);
778
+ --dt-color-surface-overlay: var(--dt-color-black-200);
778
779
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
779
780
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
780
781
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -757,6 +757,7 @@
757
757
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
758
758
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
759
759
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
760
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
760
761
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
761
762
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
762
763
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -780,6 +780,7 @@
780
780
  --dt-color-surface-moderate: var(--dt-color-black-250);
781
781
  --dt-color-surface-secondary: var(--dt-color-black-150);
782
782
  --dt-color-surface-primary: var(--dt-color-black-100);
783
+ --dt-color-surface-overlay: var(--dt-color-black-200);
783
784
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
784
785
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
785
786
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -763,6 +763,7 @@
763
763
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
764
764
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
765
765
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
766
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
766
767
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
767
768
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
768
769
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -770,6 +770,7 @@
770
770
  --dt-color-surface-moderate: var(--dt-color-black-250);
771
771
  --dt-color-surface-secondary: var(--dt-color-black-150);
772
772
  --dt-color-surface-primary: var(--dt-color-black-100);
773
+ --dt-color-surface-overlay: var(--dt-color-black-200);
773
774
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
774
775
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
775
776
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -754,6 +754,7 @@
754
754
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
755
755
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
756
756
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
757
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
757
758
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
758
759
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
759
760
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -733,6 +733,7 @@
733
733
  --dt-color-surface-moderate: oklch(0.7 0.25 54.01); /* A tertiary surface level, prominent without being too overpowering. */
734
734
  --dt-color-surface-secondary: oklch(0.7 0.25 54.01); /* For adjacent or complementary regions. */
735
735
  --dt-color-surface-primary: oklch(0.7 0.25 54.01); /* Default surface color for the majority of surfaces. */
736
+ --dt-color-surface-overlay: oklch(0.7 0.25 54.01); /* For overlay surfaces like modals, popovers, and dialogs. */
736
737
  --dt-color-link-mention-inverted-background-hover: oklch(0.7 0.25 54.01);
737
738
  --dt-color-link-mention-inverted-background: oklch(0.7 0.25 54.01);
738
739
  --dt-color-link-mention-background-hover: oklch(0.7 0.25 54.01);
@@ -750,6 +750,7 @@
750
750
  --dt-color-surface-moderate: var(--dt-color-black-250);
751
751
  --dt-color-surface-secondary: var(--dt-color-black-150);
752
752
  --dt-color-surface-primary: var(--dt-color-black-100);
753
+ --dt-color-surface-overlay: var(--dt-color-black-200);
753
754
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
754
755
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
755
756
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -733,6 +733,7 @@
733
733
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
734
734
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
735
735
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
736
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
736
737
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
737
738
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
738
739
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -723,6 +723,7 @@
723
723
  --dt-color-surface-moderate: var(--dt-color-black-250);
724
724
  --dt-color-surface-secondary: var(--dt-color-black-150);
725
725
  --dt-color-surface-primary: var(--dt-color-black-100);
726
+ --dt-color-surface-overlay: var(--dt-color-black-200);
726
727
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
727
728
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
728
729
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -705,6 +705,7 @@
705
705
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
706
706
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
707
707
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
708
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
708
709
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
709
710
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
710
711
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -723,6 +723,7 @@
723
723
  --dt-color-surface-moderate: var(--dt-color-black-250);
724
724
  --dt-color-surface-secondary: var(--dt-color-black-150);
725
725
  --dt-color-surface-primary: var(--dt-color-black-100);
726
+ --dt-color-surface-overlay: var(--dt-color-black-200);
726
727
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
727
728
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
728
729
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -705,6 +705,7 @@
705
705
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
706
706
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
707
707
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
708
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
708
709
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
709
710
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
710
711
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);
@@ -768,6 +768,7 @@
768
768
  --dt-color-surface-moderate: var(--dt-color-black-250);
769
769
  --dt-color-surface-secondary: var(--dt-color-black-150);
770
770
  --dt-color-surface-primary: var(--dt-color-black-100);
771
+ --dt-color-surface-overlay: var(--dt-color-black-200);
771
772
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
772
773
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
773
774
  --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);
@@ -775,6 +775,7 @@
775
775
  --dt-color-surface-moderate: var(--dt-color-black-250);
776
776
  --dt-color-surface-secondary: var(--dt-color-black-150);
777
777
  --dt-color-surface-primary: var(--dt-color-black-100);
778
+ --dt-color-surface-overlay: var(--dt-color-black-200);
778
779
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
779
780
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
780
781
  --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);
@@ -740,6 +740,7 @@
740
740
  --dt-color-surface-moderate: var(--dt-color-black-250);
741
741
  --dt-color-surface-secondary: var(--dt-color-black-150);
742
742
  --dt-color-surface-primary: var(--dt-color-black-100);
743
+ --dt-color-surface-overlay: var(--dt-color-black-200);
743
744
  --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
744
745
  --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
745
746
  --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);
@@ -721,6 +721,7 @@
721
721
  --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
722
722
  --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
723
723
  --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
724
+ --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
724
725
  --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
725
726
  --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
726
727
  --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);