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

package/lib/dist/js/dialtone_migration_helper/configs/theme-to-mode.mjs

@@ -0,0 +1,108 @@
+// Migration: deprecated `setTheme()` and `data-dt-theme` attribute → layered API.
+//
+// - Startup call: setTheme(KnownTheme) → initDialtoneTheme(KnownTheme, 'mode')
+// - Dynamic calls: setTheme(expr) → flagged with TODO comment
+// - HTML attributes: data-dt-theme= → data-dt-mode=
+// - JS attribute methods: setAttribute/getAttribute('data-dt-theme') → 'data-dt-mode'
+// - CSS selectors: [data-dt-theme...] → [data-dt-mode...]
+// - Invert regions (data-dt-theme="invert") are flagged with a TODO comment
+//   rather than auto-rewritten — the v-dt-mode directive uses a live
+//   MutationObserver that cannot be replicated with a static replacement.
+
+// Identifiers and their mode extracted from the known legacy theme names.
+const KNOWN_LIGHT = ['DpLight', 'TmoLight', 'ExpressiveLight', 'ExpressiveSmLight'];
+const KNOWN_DARK = ['DpDark', 'TmoDark', 'ExpressiveDark', 'ExpressiveSmDark'];
+const ALL_KNOWN = [...KNOWN_LIGHT, ...KNOWN_DARK];
+const KNOWN_PATTERN = ALL_KNOWN.join('|');
+
+export default {
+  description:
+    'Migrates from the deprecated setTheme() / data-dt-theme API to the layered theming API.\n' +
+    '- setTheme(DpLight) → initDialtoneTheme(DpLight, \'light\')\n' +
+    '- setTheme(DpDark) → initDialtoneTheme(DpDark, \'dark\')\n' +
+    '- Same for TmoLight, TmoDark, ExpressiveLight, ExpressiveDark, ExpressiveSmLight, ExpressiveSmDark\n' +
+    '- setTheme(dynamicExpr) → preserved + TODO comment\n' +
+    '- data-dt-theme= → data-dt-mode= (HTML attributes, JS attr methods, CSS selectors)\n' +
+    '- data-dt-theme="invert" → preserved + TODO comment (review for v-dt-mode directive)\n',
+
+  patterns: ['**/*.{vue,html,js,ts,jsx,tsx,css,less,scss,mjs}'],
+
+  globbyConfig: {
+    ignore: [
+      '**/dialtone_migration_helper/tests/**',
+      '**/guides/migration/theme-to-mode/**',
+      '**/guides/theme-and-mode/index.md',
+      '**/whats-new/posts/2024-8-1.md',
+    ],
+  },
+
+  expressions: [
+    // 1. setTheme() call rewrites for known light identifiers.
+    //    Must run BEFORE the unknown-call flag expression (3) so these are
+    //    fully consumed before the fallthrough regex fires.
+    {
+      from: new RegExp(
+        `(?<!\\.)setTheme\\(\\s*(${KNOWN_LIGHT.join('|')})\\s*\\)`,
+        'g',
+      ),
+      to: (_match, identifier) => `initDialtoneTheme(${identifier}, 'light')`,
+    },
+
+    // 2. setTheme() call rewrites for known dark identifiers.
+    {
+      from: new RegExp(
+        `(?<!\\.)setTheme\\(\\s*(${KNOWN_DARK.join('|')})\\s*\\)`,
+        'g',
+      ),
+      to: (_match, identifier) => `initDialtoneTheme(${identifier}, 'dark')`,
+    },
+
+    // 3. setTheme() calls with unknown / dynamic arguments → TODO comment.
+    //    Negative-lookahead skips the eight known identifiers already rewritten above.
+    //    Negative-lookbehind on '.' prevents matching unrelated .setTheme() methods.
+    {
+      from: new RegExp(
+        `(?<!\\.)setTheme\\(\\s*(?!(${KNOWN_PATTERN})\\s*\\))([^)]*)\\)`,
+        'g',
+      ),
+      to: (match) =>
+        `// TODO: review for layered API migration — see /guides/migration/theme-to-mode/\n${match}`,
+    },
+
+    // 4. Attribute rename: data-dt-theme → data-dt-mode
+    //    Covers HTML/Vue/JSX attributes, JS string literals, and CSS selectors.
+    //    Negative lookahead (?!-) prevents matching data-dt-theme-x (longer names).
+    //    Works correctly with applyConfig's inner match.replace() since the inner
+    //    call operates on just the matched text "data-dt-theme" where (?!-) passes
+    //    at end-of-string (no "-" follows).
+    {
+      from: /\bdata-dt-theme(?!-)/g,
+      to: () => 'data-dt-mode',
+    },
+
+    // 5. CSS selector invert — add TODO comment before the renamed selector.
+    //    Expression 5 already renamed [data-dt-theme=...] → [data-dt-mode=...],
+    //    so we match on the result.  HTML attribute invert is handled by
+    //    expression 5 (just renamed, no comment — inserting HTML comments inside
+    //    tags produces invalid markup; consumers grep for data-dt-mode="invert"
+    //    to find regions needing v-dt-mode review).
+    {
+      from: /\[data-dt-mode="invert"\]|\[data-dt-mode=invert\]/g,
+      to: (match) =>
+        `/* TODO: review for v-dt-mode adoption — see /guides/migration/theme-to-mode/ */\n${match}`,
+    },
+
+    // 6. JS attribute methods: setAttribute/getAttribute/etc. on 'data-dt-theme'
+    {
+      from: /(\.(?:set|get|toggle|remove|has)Attribute\(\s*['"])data-dt-theme(['"])/g,
+      to: (_match, prefix, suffix) => `${prefix}data-dt-mode${suffix}`,
+    },
+
+    // 7. CSS attribute selectors: [data-dt-theme...] → [data-dt-mode...]
+    //    Runs after the invert-flagging expressions to avoid double-processing.
+    {
+      from: /\[data-dt-theme(\]|=[^\]]*\])/g,
+      to: (_match, rest) => `[data-dt-mode${rest}`,
+    },
+  ],
+};

package/lib/dist/js/dialtone_migration_helper/tests/theme-to-mode-test-examples.vue

@@ -0,0 +1,24 @@
+<template>
+  <!-- Module path example (should be rewritten by codemod) -->
+  <section data-dt-theme="light">
+    Light mode section
+  </section>
+
+  <!-- CSS selector example (for stylesheet tests) -->
+  <div class="themed-container">
+    Theme-aware container
+  </div>
+</template>
+
+<script>
+// Legacy imports — these paths and calls are transformed by the codemod
+import DpLight from '@dialpad/dialtone/themes/dp-light';
+import DpDark from '@dialpad/dialtone/themes/dp-dark';
+import { setTheme } from '@dialpad/dialtone/themes/config';
+
+// Startup initialization
+setTheme(DpLight);
+
+// Mode switching (runtime)
+setTheme(DpDark);
+</script>

package/lib/dist/js/dialtone_migration_helper/tests/theme-to-mode.test.mjs

@@ -0,0 +1,177 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import config from '../configs/theme-to-mode.mjs';
+import { applyConfig } from './helpers.mjs';
+
+const apply = (input) => applyConfig(config, input);
+
+describe('theme-to-mode config', () => {
+  // ─── setTheme call rewrites ───────────────────────────────────────────────
+
+  describe('setTheme() → initDialtoneTheme() for known identifiers', () => {
+    it('rewrites setTheme(DpLight) → initDialtoneTheme(DpLight, \'light\')', () => {
+      const input = `setTheme(DpLight);`;
+      const expected = `initDialtoneTheme(DpLight, 'light');`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites setTheme(DpDark) → initDialtoneTheme(DpDark, \'dark\')', () => {
+      const input = `setTheme(DpDark);`;
+      const expected = `initDialtoneTheme(DpDark, 'dark');`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites setTheme(TmoLight) → initDialtoneTheme(TmoLight, \'light\')', () => {
+      const input = `setTheme(TmoLight);`;
+      const expected = `initDialtoneTheme(TmoLight, 'light');`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites setTheme(TmoDark) → initDialtoneTheme(TmoDark, \'dark\')', () => {
+      const input = `setTheme(TmoDark);`;
+      const expected = `initDialtoneTheme(TmoDark, 'dark');`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites setTheme(ExpressiveLight) → initDialtoneTheme(ExpressiveLight, \'light\')', () => {
+      const input = `setTheme(ExpressiveLight);`;
+      const expected = `initDialtoneTheme(ExpressiveLight, 'light');`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites setTheme(ExpressiveDark) → initDialtoneTheme(ExpressiveDark, \'dark\')', () => {
+      const input = `setTheme(ExpressiveDark);`;
+      const expected = `initDialtoneTheme(ExpressiveDark, 'dark');`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('handles whitespace inside setTheme call', () => {
+      const input = `setTheme( DpLight );`;
+      const expected = `initDialtoneTheme(DpLight, 'light');`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites setTheme(DpLight) as part of onMounted setup', () => {
+      const input = `onMounted(() => { setTheme(DpLight); });`;
+      const expected = `onMounted(() => { initDialtoneTheme(DpLight, 'light'); });`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('does NOT rewrite setTheme() with a dynamic variable — emits TODO comment', () => {
+      const input = `setTheme(myDynamicTheme);`;
+      const result = apply(input);
+      assert.ok(result.includes('setTheme(myDynamicTheme)'), 'original call preserved');
+      assert.ok(result.includes('TODO: review for layered API migration'), 'TODO comment inserted');
+    });
+
+    it('does NOT rewrite setTheme() with an expression — emits TODO comment', () => {
+      const input = `setTheme(isDark ? DpDark : DpLight);`;
+      const result = apply(input);
+      assert.ok(result.includes('setTheme(isDark ? DpDark : DpLight)'), 'original call preserved');
+      assert.ok(result.includes('TODO: review for layered API migration'), 'TODO comment inserted');
+    });
+
+    it('does NOT rewrite myObj.setTheme() — unrelated method', () => {
+      const input = `myThemeManager.setTheme(DpLight);`;
+      assert.equal(apply(input), input);
+    });
+  });
+
+  // ─── Attribute renames ────────────────────────────────────────────────────
+
+  describe('data-dt-theme → data-dt-mode in HTML attributes', () => {
+    it('rewrites data-dt-theme= in HTML attribute', () => {
+      const input = `<html data-dt-theme="dp-light">`;
+      const expected = `<html data-dt-mode="dp-light">`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites data-dt-theme= with single quotes', () => {
+      const input = `<section data-dt-theme='dark'>content</section>`;
+      const expected = `<section data-dt-mode='dark'>content</section>`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('does NOT rewrite data-dt-theme-x (longer attribute with same prefix)', () => {
+      const input = `<div data-dt-theme-custom="foo">`;
+      assert.equal(apply(input), input);
+    });
+
+    it('rewrites data-dt-theme= in Vue template binding (static)', () => {
+      const input = `<div data-dt-theme="light">`;
+      const expected = `<div data-dt-mode="light">`;
+      assert.equal(apply(input), expected);
+    });
+  });
+
+  describe('data-dt-theme in JS setAttribute/getAttribute', () => {
+    it('rewrites setAttribute first argument', () => {
+      const input = `el.setAttribute('data-dt-theme', 'dark');`;
+      const expected = `el.setAttribute('data-dt-mode', 'dark');`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites getAttribute first argument', () => {
+      const input = `const mode = el.getAttribute('data-dt-theme');`;
+      const expected = `const mode = el.getAttribute('data-dt-mode');`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites removeAttribute first argument', () => {
+      const input = `el.removeAttribute('data-dt-theme');`;
+      const expected = `el.removeAttribute('data-dt-mode');`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites hasAttribute first argument', () => {
+      const input = `if (el.hasAttribute('data-dt-theme')) {`;
+      const expected = `if (el.hasAttribute('data-dt-mode')) {`;
+      assert.equal(apply(input), expected);
+    });
+  });
+
+  describe('data-dt-theme in CSS attribute selectors', () => {
+    it('rewrites [data-dt-theme] bare selector', () => {
+      const input = `[data-dt-theme] { color: red; }`;
+      const expected = `[data-dt-mode] { color: red; }`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites [data-dt-theme="value"] selector', () => {
+      const input = `[data-dt-theme="dp-light"] { background: white; }`;
+      const expected = `[data-dt-mode="dp-light"] { background: white; }`;
+      assert.equal(apply(input), expected);
+    });
+
+    it('rewrites [data-dt-theme=value] selector (unquoted)', () => {
+      const input = `[data-dt-theme=light] .d-banner { border: 1px; }`;
+      const expected = `[data-dt-mode=light] .d-banner { border: 1px; }`;
+      assert.equal(apply(input), expected);
+    });
+  });
+
+  // ─── Invert handling ──────────────────────────────────────────────────────
+
+  describe('data-dt-theme="invert" handling', () => {
+    it('renames data-dt-theme="invert" to data-dt-mode="invert" (grep to find for v-dt-mode review)', () => {
+      const input = `<section data-dt-theme="invert">content</section>`;
+      const result = apply(input);
+      assert.ok(result.includes('data-dt-mode="invert"'), 'attribute renamed');
+      assert.ok(!result.includes('data-dt-theme="invert"'), 'old attribute removed');
+    });
+
+    it('adds TODO comment before [data-dt-theme="invert"] CSS selector', () => {
+      const input = `[data-dt-theme="invert"] .d-card { box-shadow: none; }`;
+      const result = apply(input);
+      assert.ok(result.includes('[data-dt-mode="invert"]'), 'selector renamed');
+      assert.ok(result.includes('TODO: review for v-dt-mode adoption'), 'TODO inserted');
+    });
+
+    it('adds TODO comment before [data-dt-theme=invert] unquoted CSS selector', () => {
+      const input = `[data-dt-theme=invert] { background: red; }`;
+      const result = apply(input);
+      assert.ok(result.includes('[data-dt-mode=invert]'), 'selector renamed');
+      assert.ok(result.includes('TODO: review for v-dt-mode adoption'), 'TODO inserted');
+    });
+  });
+});

package/lib/dist/tokens/tokens-101-dark.css

@@ -787,6 +787,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-101-light.css

@@ -770,6 +770,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-102-dark.css

@@ -787,6 +787,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-102-light.css

@@ -770,6 +770,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-103-dark.css

@@ -787,6 +787,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-103-light.css

@@ -770,6 +770,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-104-dark.css

@@ -787,6 +787,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-104-light.css

@@ -770,6 +770,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-105-dark.css

@@ -787,6 +787,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-105-light.css

@@ -770,6 +770,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-106-dark.css

@@ -787,6 +787,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-106-light.css

@@ -770,6 +770,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-107-dark.css

@@ -787,6 +787,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-107-light.css

@@ -770,6 +770,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-108-dark.css

@@ -787,6 +787,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-108-light.css

@@ -770,6 +770,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-109-dark.css

@@ -787,6 +787,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-109-light.css

@@ -770,6 +770,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-110-dark.css

@@ -787,6 +787,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-110-light.css

@@ -770,6 +770,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-111-dark.css

@@ -787,6 +787,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-111-light.css

@@ -770,6 +770,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-112-dark.css

@@ -787,6 +787,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-112-light.css

@@ -770,6 +770,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-113-dark.css

@@ -787,6 +787,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-113-light.css

@@ -770,6 +770,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-114-dark.css

@@ -787,6 +787,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-114-light.css

@@ -770,6 +770,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-115-dark.css

@@ -787,6 +787,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-115-light.css

@@ -770,6 +770,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-116-dark.css

@@ -787,6 +787,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-116-light.css

@@ -770,6 +770,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);

package/lib/dist/tokens/tokens-117-dark.css

@@ -787,6 +787,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-250);
   --dt-color-surface-secondary: var(--dt-color-black-150);
   --dt-color-surface-primary: var(--dt-color-black-100);
+  --dt-color-surface-overlay: var(--dt-color-black-200);
   --dt-color-link-mention-inverted-background-hover: oklch(0.3 0.15 283 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.3 0.15 283 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.3 0.15 283 / 0.25);

package/lib/dist/tokens/tokens-117-light.css

@@ -770,6 +770,7 @@
   --dt-color-surface-moderate: var(--dt-color-black-200); /* A tertiary surface level, prominent without being too overpowering. */
   --dt-color-surface-secondary: var(--dt-color-black-100); /* For adjacent or complementary regions. */
   --dt-color-surface-primary: var(--dt-color-black-50); /* Default surface color for the majority of surfaces. */
+  --dt-color-surface-overlay: var(--dt-color-black-50); /* For overlay surfaces like modals, popovers, and dialogs. */
   --dt-color-link-mention-inverted-background-hover: oklch(0.85 0.09 301 / 0.2);
   --dt-color-link-mention-inverted-background: oklch(0.85 0.09 301 / 0.3);
   --dt-color-link-mention-background-hover: oklch(0.85 0.09 301 / 0.15);