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

package/lib/build/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/build/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/build/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/build/less/components/button.less

@@ -274,6 +274,7 @@
 //  ----------------------------------------------------------------------------
 .d-btn__leading,
 .d-btn__trailing {
+  z-index: var(--zi-base1);
   display: inline-flex;
   align-items: center;
   align-self: stretch;
@@ -318,6 +319,7 @@
 }
 
 .d-btn__icon {
+  z-index: var(--zi-base1);
   display: flex;
 
   :where(.d-btn--disabled) & ,

package/lib/build/less/components/emoji-picker.less

@@ -17,7 +17,7 @@
   // with this width we have 9 emoji per row
   inline-size: var(--dt-layout-550);
   block-size: 100%;
-  background-color: var(--dt-color-surface-primary);
+  background-color: var(--dt-color-surface-overlay);
   border-radius: var(--dt-size-radius-300);
 
   &--header {
@@ -28,8 +28,8 @@
       position: absolute;
       inset-inline: 0;
       inset-block-end: 0;
-      block-size: var(--dt-size-border-200);
-      background-color: var(--dt-color-surface-moderate) !important;
+      block-size: var(--dt-size-border-100);
+      background-color: var(--dt-color-border-subtle) !important;
       content: '';
     }
   }
@@ -49,7 +49,6 @@
     justify-content: space-between;
     block-size: calc(var(--dt-layout-100) - var(--dt-spacing-75));
     padding: 0 var(--dt-spacing-200);
-    background: var(--dt-color-surface-secondary);
     border-block-start: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
   }
 
@@ -62,7 +61,7 @@
       gap: var(--dt-spacing-0);
 
       &::after {
-        background-color: var(--dt-color-surface-moderate) !important;
+        background-color: var(--dt-color-neutral-transparent) !important;
       }
 
       .d-tablist__item {
@@ -92,8 +91,8 @@
       margin: 0;
       padding: 0;
       background: none;
-      border: var(--dt-size-border-100) solid transparent;
-      border-radius: var(--dt-size-radius-350);
+      border: var(--dt-size-border-100) solid var(--dt-color-neutral-transparent);
+      border-radius: var(--dt-size-radius-circle);
       outline: none;
       cursor: pointer;
 
@@ -103,7 +102,7 @@
 
       &:active,
       &.selected {
-        border-color: var(--dt-color-border-bold);
+        border-color: var(--dt-color-border-moderate);
       }
     }
   }
@@ -116,13 +115,13 @@
       margin: 0;
       padding: calc(var(--dt-spacing-75) + var(--dt-spacing-1));
       background: var(--dt-color-surface-moderate-opaque);
-      border: none;
+      border: var(--dt-size-border-100) solid var(--dt-color-neutral-transparent);
       border-radius: var(--dt-size-radius-circle);
       outline: none;
       cursor: pointer;
 
       &:hover {
-        background: var(--dt-color-surface-bold);
+        border-color: var(--dt-color-border-subtle);
       }
     }
   }
@@ -144,7 +143,7 @@
     inline-size: 100%;
     margin: 0;
     padding: var(--dt-spacing-200) var(--dt-spacing-200) 0 var(--dt-spacing-200);
-    background: var(--dt-color-surface-primary);
+    background: var(--dt-color-surface-overlay);
   }
 
   &__list {

package/lib/build/less/components/forms.less

@@ -118,6 +118,8 @@ fieldset {
 //  ----------------------------------------------------------------------------
 .d-validation-message {
   --validation-color-text: var(--dt-color-foreground-tertiary);
+  --validation-size-icon: var(--dt-layout-25);
+  --validation-icon: initial;
 
   display: flex;
   gap: var(--dt-spacing-50);
@@ -129,14 +131,15 @@ fieldset {
   font-family: inherit;
   line-height: var(--dt-font-line-height-300);
 
-  // Icon Slot
-  &::before {
+  // Raw-HTML icon fallback — suppressed when a real .d-icon child is present
+  &:not(:has(.d-icon))::before {
     display: block;
     margin-block-start: var(--dt-spacing-25);
-    inline-size: var(--dt-layout-25); // 16
-    min-inline-size: var(--dt-layout-25); // 16
-    block-size: var(--dt-layout-25); // 16
+    inline-size: var(--validation-size-icon);
+    min-inline-size: var(--validation-size-icon);
+    block-size: var(--validation-size-icon);
     background-color: var(--validation-color-text);
+    mask: var(--validation-icon);
     content: '';
   }
 
@@ -144,6 +147,13 @@ fieldset {
     display: flex;
     flex-direction: column;
   }
+
+  &__icon {
+    margin-block-start: calc(var(--dt-spacing-25) / 2);
+    color: var(--validation-color-text);
+    inline-size: var(--validation-size-icon);
+    block-size: var(--validation-size-icon);
+  }
 }
 
 //  $$   VALIDATION STATES
@@ -151,27 +161,23 @@ fieldset {
 
 .d-validation-message--warning {
   --validation-color-text: var(--dt-color-foreground-warning);
-
-  &::before {
-    mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS4yNCAxLjE5N2ExLjUgMS41IDAgMCAxIDIuMDYuNTU2bDMuOTk4IDYuOTk3YTEuNTA0IDEuNTA0IDAgMCAxIDAgMS41IDEuNSAxLjUgMCAwIDEtMS4yOTcuNzVIMi4wMDJhMS41IDEuNSAwIDAgMS0xLjMxLTIuMjQ5VjguNzVMNC42OSAxLjc1M2ExLjUgMS41IDAgMCAxIC41NS0uNTU2Wm0uNzU1Ljc5NmEuNS41IDAgMCAwLS40MzUuMjU0di4wMDFMMS41NTcgOS4yNWEuNS41IDAgMCAwIC40MzguNzVIMTBhLjUuNSAwIDAgMCAuNDMyLS43NWwtLjAwMS0uMDAyLTQtNy0uMDAxLS4wMDFhLjUuNSAwIDAgMC0uNDM1LS4yNTRaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiA0YS41LjUgMCAwIDEgLjUuNXYyYS41LjUgMCAwIDEtMSAwdi0yQS41LjUgMCAwIDEgNiA0Wm0tLjUgNC41QS41LjUgMCAwIDEgNiA4aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvc3ZnPg==') repeat;
-  }
+  --validation-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS4yNCAxLjE5N2ExLjUgMS41IDAgMCAxIDIuMDYuNTU2bDMuOTk4IDYuOTk3YTEuNTA0IDEuNTA0IDAgMCAxIDAgMS41IDEuNSAxLjUgMCAwIDEtMS4yOTcuNzVIMi4wMDJhMS41IDEuNSAwIDAgMS0xLjMxLTIuMjQ5VjguNzVMNC42OSAxLjc1M2ExLjUgMS41IDAgMCAxIC41NS0uNTU2Wm0uNzU1Ljc5NmEuNS41IDAgMCAwLS40MzUuMjU0di4wMDFMMS41NTcgOS4yNWEuNS41IDAgMCAwIC40MzguNzVIMTBhLjUuNSAwIDAgMCAuNDMyLS43NWwtLjAwMS0uMDAyLTQtNy0uMDAxLS4wMDFhLjUuNSAwIDAgMC0uNDM1LS4yNTRaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4gPHBhdGggZmlsbD0iIzY4M2UwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiA0YS41LjUgMCAwIDEgLjUuNXYyYS41LjUgMCAwIDEtMSAwdi0yQS41LjUgMCAwIDEgNiA0Wm0tLjUgNC41QS41LjUgMCAwIDEgNiA4aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvc3ZnPg==') repeat;
 }
 
 .d-validation-message--critical,
 .d-validation-message--error {
   --validation-color-text: var(--dt-color-foreground-critical);
-
-  &::before {
-    mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iI2VjMGUwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiAxLjVhNC41IDQuNSAwIDEgMCAwIDkgNC41IDQuNSAwIDAgMCAwLTlaTS41IDZhNS41IDUuNSAwIDEgMSAxMSAwIDUuNSA1LjUgMCAwIDEtMTEgMFpNNiAzLjVhLjUuNSAwIDAgMSAuNS41djJhLjUuNSAwIDAgMS0xIDBWNGEuNS41IDAgMCAxIC41LS41Wk01LjUgOGEuNS41IDAgMCAxIC41LS41aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
-  }
+  --validation-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iI2VjMGUwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiAxLjVhNC41IDQuNSAwIDEgMCAwIDkgNC41IDQuNSAwIDAgMCAwLTlaTS41IDZhNS41IDUuNSAwIDEgMSAxMSAwIDUuNSA1LjUgMCAwIDEtMTEgMFpNNiAzLjVhLjUuNSAwIDAgMSAuNS41djJhLjUuNSAwIDAgMS0xIDBWNGEuNS41IDAgMCAxIC41LS41Wk01LjUgOGEuNS41IDAgMCAxIC41LS41aC4wMDVhLjUuNSAwIDAgMSAwIDFINmEuNS41IDAgMCAxLS41LS41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
 }
 
 .d-validation-message--positive,
 .d-validation-message--success {
   --validation-color-text: var(--dt-color-foreground-positive);
+  --validation-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iIzAwNjcxZCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNLjUgNmE1LjUgNS41IDAgMSAxIDExIDAgNS41IDUuNSAwIDAgMS0xMSAwWk02IDEuNWE0LjUgNC41IDAgMSAwIDAgOSA0LjUgNC41IDAgMCAwIDAtOVptMS44NTQgMy4xNDZhLjUuNSAwIDAgMSAwIC43MDhsLTIgMmEuNS41IDAgMCAxLS43MDggMGwtMS0xYS41LjUgMCAxIDEgLjcwOC0uNzA4bC42NDYuNjQ3IDEuNjQ2LTEuNjQ3YS41LjUgMCAwIDEgLjcwOCAwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
+}
 
-  &::before {
-    mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iIzAwNjcxZCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNLjUgNmE1LjUgNS41IDAgMSAxIDExIDAgNS41IDUuNSAwIDAgMS0xMSAwWk02IDEuNWE0LjUgNC41IDAgMSAwIDAgOSA0LjUgNC41IDAgMCAwIDAtOVptMS44NTQgMy4xNDZhLjUuNSAwIDAgMSAwIC43MDhsLTIgMmEuNS41IDAgMCAxLS43MDggMGwtMS0xYS41LjUgMCAxIDEgLjcwOC0uNzA4bC42NDYuNjQ3IDEuNjQ2LTEuNjQ3YS41LjUgMCAwIDEgLjcwOCAwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+IDwvZz4gPGRlZnM+IDxjbGlwUGF0aCBpZD0iYSI+IDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTJ2MTJIMHoiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4=') no-repeat;
-  }
+.d-validation-message--info {
+  --validation-color-text: var(--dt-color-foreground-info);
+  --validation-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDEyIDEyIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4gPHBhdGggZmlsbD0iIzAwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNiAxLjVhNC41IDQuNSAwIDEgMCAwIDkgNC41IDQuNSAwIDAgMCAwLTlaTS41IDZhNS41IDUuNSAwIDEgMSAxMSAwIDUuNSA1LjUgMCAwIDEtMTEgMFptNS0yYS41LjUgMCAwIDEgLjUtLjVoLjAwNWEuNS41IDAgMCAxIDAgMUg2YS41LjUgMCAwIDEtLjUtLjVaTTYgNS41YS41LjUgMCAwIDEgLjUuNXYyYS41LjUgMCAwIDEtMSAwVjZhLjUuNSAwIDAgMSAuNS0uNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPiA8L2c+IDxkZWZzPiA8Y2xpcFBhdGggaWQ9ImEiPiA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDEydjEySDB6Ii8+IDwvY2xpcFBhdGg+IDwvZGVmcz4gPC9zdmc+') no-repeat;
 }
 }

package/lib/build/less/components/modal.less

@@ -96,7 +96,7 @@
     //  ------------------------------------------------------------------------
     --modal-backdrop-color-background: var(--dt-color-surface-backdrop);
     --modal-dialog-padding: var(--dt-spacing-400);
-    --modal-dialog-color-background: var(--dt-color-surface-primary);
+    --modal-dialog-color-background: var(--dt-color-surface-overlay);
     --modal-dialog-color-border: var(--dt-color-border-subtle);
     --modal-dialog-color-text: var(--dt-color-foreground-primary);
     --modal-header-color-text: var(--dt-color-foreground-primary);
@@ -144,7 +144,7 @@
 }
 
 .d-modal--transparent {
-  --modal-backdrop-color-background: var(--d-bgc-transparent);
+  --modal-backdrop-color-background: var(--dt-color-neutral-transparent);
 
   // If we don't set this the native app header region will override all click events on the modal overlay
   -webkit-app-region: no-drag;
@@ -158,6 +158,12 @@
   }
 }
 
+// Not to be confused with .d-modal--transparent above — that one is used
+// standalone (without .d-modal) by Popover/Tooltip.
+.d-modal--transparent-backdrop {
+  --modal-backdrop-color-background: var(--dt-color-neutral-transparent);
+}
+
 //  $$  MODAL DIALOG
 //  ----------------------------------------------------------------------------
 .d-modal__dialog {

package/lib/build/less/components/notice.less

@@ -44,6 +44,10 @@
     align-items: start;
 }
 
+.d-toast {
+    --notice-color-background: var(--dt-color-surface-overlay);
+}
+
 //  ============================================================================
 //  $   NOTICE AREAS
 //  ============================================================================

package/lib/build/less/components/popover.less

@@ -25,7 +25,7 @@
   &__dialog {
     //  $$  CSS CUSTOM PROPERTIES
     //  ----------------------------------------------------------------------------
-    --popover-color-background: var(--dt-color-surface-secondary);
+    --popover-color-background: var(--dt-color-surface-overlay);
     --popover-border-width: var(--dt-size-border-100);
     --popover-border-radius: var(--dt-size-radius-400);
     --popover-color-border: var(--dt-color-border-subtle);

package/lib/build/less/components/presence.less

@@ -12,11 +12,14 @@
   --presence-color-border-offline: var(--dt-presence-color-offline);
   --presence-color-background-active: var(--dt-presence-color-available);
   --presence-color-background-busy: var(--dt-presence-color-unavailable);
+  --presence-color-border-dnd: var(--dt-presence-color-unavailable);
   --presence-color-background-away: var(--dt-presence-color-busy);
   --presence-color-background-offline: var(--dt-color-surface-primary);
   --presence-border-radius: calc(var(--presence-size) * 0.208);
-  --presence-border-inner-width: calc(calc(var(--presence-size) - calc(var(--presence-size) * 0.556)) / 2);
+  --presence-border-inner-width: calc(calc(var(--presence-size) - calc(var(--presence-size) * 0.556)) / 3);
   --presence-size: var(--dt-spacing-150);
+  --presence-icon-size: var(--dt-layout-100-percent);
+  --presence-icon-color: var(--dt-color-foreground-primary-inverted);
 
   display: inline-block;
 
@@ -29,11 +32,13 @@
   }
 
   &__inner {
+    display: grid;
     box-sizing: border-box;
-    inline-size: var(--presence-size);
-    block-size: var(--presence-size);
     border: none;
     border-radius: var(--presence-border-radius);
+    inline-size: var(--presence-size);
+    block-size: var(--presence-size);
+    place-items: center;
 
     &--active {
       background-color: var(--presence-color-background-active);
@@ -52,6 +57,21 @@
       border-style: solid;
       border-width: var(--presence-border-inner-width);
     }
+
+    &--dnd {
+      --presence-icon-color: var(--presence-color-border-dnd);
+
+      border-color: var(--presence-color-border-dnd);
+      border-style: solid;
+      border-width: var(--presence-border-inner-width);
+    }
+  }
+
+  &__icon {
+    display: block;
+    color: var(--presence-icon-color);
+    block-size: var(--presence-icon-size);
+    inline-size: var(--presence-icon-size);
   }
 }
 }

package/lib/build/less/recipes/leftbar_row.less

@@ -30,6 +30,7 @@
     --presence-color-background-active: var(--dt-shell-presence-color-available);
     --presence-color-background-busy: var(--dt-shell-presence-color-unavailable);
     --presence-color-background-away: var(--dt-shell-presence-color-busy);
+    --presence-color-border-dnd: var(--dt-shell-presence-color-unavailable);
   }
 
   //  ============================================================================