@happyvertical/smrt-ui 0.30.0 → 0.31.1

package/dist/actions/__tests__/ripple.test.js

@@ -1,8 +1,13 @@
 /**
  * Unit test for the ripple action (coverage uplift, S6 gate).
  */
-import { describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { ripple } from '../ripple';
+afterEach(() => {
+    vi.restoreAllMocks();
+    // Drop any matchMedia stub a test installed.
+    Reflect.deleteProperty(window, 'matchMedia');
+});
 describe('ripple action', () => {
     it('appends a ripple element on pointer down', () => {
         const node = document.createElement('button');
@@ -25,4 +30,53 @@ describe('ripple action', () => {
         action?.destroy?.();
         node.remove();
     });
+    it('fills the ripple with the canonical --smrt-color-primary token (#1586)', () => {
+        // Regression: the canonical theme system only emits `--smrt-color-*`; the
+        // old `--md-sys-color-primary` namespace always fell back to currentColor.
+        const node = document.createElement('button');
+        document.body.appendChild(node);
+        const action = ripple(node);
+        node.dispatchEvent(new MouseEvent('mousedown', { clientX: 5, clientY: 5, bubbles: true }));
+        const span = node.querySelector('span');
+        expect(span.style.backgroundColor).toContain('--smrt-color-primary');
+        expect(span.style.backgroundColor).not.toContain('--md-sys');
+        action?.destroy?.();
+        node.remove();
+    });
+    it('destroy() removes pending ripple spans and clears window listeners (#1586)', () => {
+        const node = document.createElement('button');
+        document.body.appendChild(node);
+        const action = ripple(node);
+        // Press without releasing: the ripple span stays appended, and a one-shot
+        // window mouseup listener is still registered.
+        node.dispatchEvent(new MouseEvent('mousedown', { clientX: 5, clientY: 5, bubbles: true }));
+        expect(node.querySelectorAll('span.smrt-ripple').length).toBe(1);
+        const removeSpy = vi.spyOn(window, 'removeEventListener');
+        action?.destroy?.();
+        // The leaked span is gone immediately (no waiting for a later global mouseup).
+        expect(node.querySelectorAll('span.smrt-ripple').length).toBe(0);
+        // And the pending window pointer-up listeners were detached.
+        expect(removeSpy).toHaveBeenCalledWith('mouseup', expect.any(Function));
+        expect(removeSpy).toHaveBeenCalledWith('touchend', expect.any(Function));
+        node.remove();
+    });
+    it('skips the ripple when prefers-reduced-motion is set (#1586)', () => {
+        window.matchMedia = vi.fn().mockImplementation((query) => ({
+            matches: query.includes('prefers-reduced-motion'),
+            media: query,
+            onchange: null,
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+            addListener: vi.fn(),
+            removeListener: vi.fn(),
+            dispatchEvent: vi.fn(),
+        }));
+        const node = document.createElement('button');
+        document.body.appendChild(node);
+        const action = ripple(node);
+        node.dispatchEvent(new MouseEvent('mousedown', { clientX: 5, clientY: 5, bubbles: true }));
+        expect(node.querySelectorAll('span.smrt-ripple').length).toBe(0);
+        action?.destroy?.();
+        node.remove();
+    });
 });

package/dist/actions/ripple.d.ts

@@ -1,7 +1,15 @@
 import type { Action } from 'svelte/action';
 /**
  * Svelte action to add a Material 3 ripple effect to an element.
- * Respects CSS variables defined by ThemeProvider.
+ *
+ * Uses the canonical `--smrt-color-primary` token (the SMRT theme system only
+ * ever emits `--smrt-color-*`; the legacy `--md-sys-*` namespace is not produced
+ * by the canonical providers), falling back to `currentColor`.
+ *
+ * Respects `prefers-reduced-motion`: when the user requests reduced motion the
+ * ripple is skipped entirely. On `destroy()` all pending ripple spans, their
+ * removal timeouts, and the window pointer-up listeners are cleaned up so an
+ * unmount mid-press cannot leak DOM nodes or listeners.
  */
 export declare const ripple: Action<HTMLElement>;
 //# sourceMappingURL=ripple.d.ts.map

package/dist/actions/ripple.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.d.ts","sourceRoot":"","sources":["../../src/actions/ripple.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,WAAW,CA2EtC,CAAC"}
+{"version":3,"file":"ripple.d.ts","sourceRoot":"","sources":["../../src/actions/ripple.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,WAAW,CA2HtC,CAAC"}

package/dist/actions/ripple.js

@@ -1,9 +1,27 @@
 /**
  * Svelte action to add a Material 3 ripple effect to an element.
- * Respects CSS variables defined by ThemeProvider.
+ *
+ * Uses the canonical `--smrt-color-primary` token (the SMRT theme system only
+ * ever emits `--smrt-color-*`; the legacy `--md-sys-*` namespace is not produced
+ * by the canonical providers), falling back to `currentColor`.
+ *
+ * Respects `prefers-reduced-motion`: when the user requests reduced motion the
+ * ripple is skipped entirely. On `destroy()` all pending ripple spans, their
+ * removal timeouts, and the window pointer-up listeners are cleaned up so an
+ * unmount mid-press cannot leak DOM nodes or listeners.
  */
 export const ripple = (node) => {
+    const prefersReducedMotion = () => typeof window !== 'undefined' &&
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    // Track in-flight ripples so destroy() can tear them down deterministically.
+    const activeSpans = new Set();
+    const pendingTimeouts = new Set();
+    const pendingPointerUp = new Set();
     const handleStart = (e) => {
+        // Honor reduced-motion: no ripple animation at all.
+        if (prefersReducedMotion())
+            return;
         const rect = node.getBoundingClientRect();
         const clientX = 'touches' in e
             ? e.touches[0].clientX
@@ -23,32 +41,45 @@ export const ripple = (node) => {
         rippleEl.style.width = rippleEl.style.height = `${diameter}px`;
         rippleEl.style.left = `${x - radius}px`;
         rippleEl.style.top = `${y - radius}px`;
-        rippleEl.style.backgroundColor =
-            'var(--md-sys-color-primary, currentColor)';
+        rippleEl.style.backgroundColor = 'var(--smrt-color-primary, currentColor)';
         rippleEl.style.opacity = '0.12';
         rippleEl.style.transform = 'scale(0)';
         rippleEl.style.transition =
             'transform 600ms cubic-bezier(0.4, 0, 0.2, 1), opacity 600ms linear';
         rippleEl.classList.add('smrt-ripple');
         node.appendChild(rippleEl);
+        activeSpans.add(rippleEl);
         // Trigger animation
         requestAnimationFrame(() => {
             rippleEl.style.transform = 'scale(1)';
         });
-        const removeRipple = () => {
+        // Bound to this ripple so the pointer-up handler and its timeout can be
+        // forgotten once they run (or torn down early in destroy()).
+        let removeRipple;
+        const detachPointerUp = () => {
+            window.removeEventListener('mouseup', removeRipple);
+            window.removeEventListener('touchend', removeRipple);
+            pendingPointerUp.delete(removeRipple);
+        };
+        removeRipple = () => {
+            detachPointerUp();
             rippleEl.style.opacity = '0';
-            setTimeout(() => {
+            const timeout = setTimeout(() => {
+                pendingTimeouts.delete(timeout);
+                activeSpans.delete(rippleEl);
                 if (rippleEl.parentNode === node) {
                     node.removeChild(rippleEl);
                 }
             }, 600);
+            pendingTimeouts.add(timeout);
         };
+        pendingPointerUp.add(removeRipple);
         window.addEventListener('mouseup', removeRipple, { once: true });
         window.addEventListener('touchend', removeRipple, { once: true });
     };
     node.addEventListener('mousedown', handleStart);
     node.addEventListener('touchstart', handleStart, { passive: true });
-    // Ensure node is prepared
+    // Ensure node is prepared (and remember prior values so destroy() can restore).
     const originalPosition = node.style.position;
     const originalOverflow = node.style.overflow;
     if (!node.style.position || node.style.position === 'static') {
@@ -59,7 +90,25 @@ export const ripple = (node) => {
         destroy() {
             node.removeEventListener('mousedown', handleStart);
             node.removeEventListener('touchstart', handleStart);
-            // Restore styles if necessary, though usually fine to keep for UI components
+            // Cancel pending removal timeouts.
+            for (const timeout of pendingTimeouts)
+                clearTimeout(timeout);
+            pendingTimeouts.clear();
+            // Detach any window pointer-up listeners still waiting for a release.
+            for (const handler of pendingPointerUp) {
+                window.removeEventListener('mouseup', handler);
+                window.removeEventListener('touchend', handler);
+            }
+            pendingPointerUp.clear();
+            // Remove any ripple spans still appended to the node.
+            for (const span of activeSpans) {
+                if (span.parentNode === node)
+                    node.removeChild(span);
+            }
+            activeSpans.clear();
+            // Restore the node's original inline layout styles.
+            node.style.position = originalPosition;
+            node.style.overflow = originalOverflow;
         },
     };
 };

package/dist/components/display/ConfidenceBadge.svelte

@@ -40,26 +40,30 @@ const level = $derived.by(() => {
   return 'low';
 });
 
-// Color scheme based on level - uses CSS variables with fallbacks
+// Color scheme based on level, referencing the canonical `--smrt-color-*`
+// tokens directly. Literal hex fallbacks are intentionally omitted: smrt-ui owns
+// the theme system so the tokens are always defined, and the old hardcoded
+// fallbacks were the wrong colors (e.g. high → green #dcfce7, real material
+// primary-container light is the blue #d3e3fd) — see #1586.
 const colors = $derived.by(() => {
   switch (level) {
     case 'high':
       return {
-        bg: 'var(--smrt-color-primary-container, #dcfce7)',
-        text: 'var(--smrt-color-on-primary-container, #166534)',
-        bar: 'var(--smrt-color-primary, #22c55e)',
+        bg: 'var(--smrt-color-primary-container)',
+        text: 'var(--smrt-color-on-primary-container)',
+        bar: 'var(--smrt-color-primary)',
       };
     case 'medium':
       return {
-        bg: 'var(--smrt-color-secondary-container, #fef3c7)',
-        text: 'var(--smrt-color-on-secondary-container, #92400e)',
-        bar: 'var(--smrt-color-secondary, #f59e0b)',
+        bg: 'var(--smrt-color-secondary-container)',
+        text: 'var(--smrt-color-on-secondary-container)',
+        bar: 'var(--smrt-color-secondary)',
       };
     case 'low':
       return {
-        bg: 'var(--smrt-color-error-container, #fee2e2)',
-        text: 'var(--smrt-color-on-error-container, #dc2626)',
-        bar: 'var(--smrt-color-error, #ef4444)',
+        bg: 'var(--smrt-color-error-container)',
+        text: 'var(--smrt-color-on-error-container)',
+        bar: 'var(--smrt-color-error)',
       };
   }
 });

package/dist/components/display/ConfidenceBadge.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfidenceBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/display/ConfidenceBadge.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AAEH,0CAA0C;AAC1C,MAAM,WAAW,KAAK;IACpB,+BAA+B;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAqED,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ConfidenceBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/display/ConfidenceBadge.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AAEH,0CAA0C;AAC1C,MAAM,WAAW,KAAK;IACpB,+BAA+B;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAyED,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/display/StatusBadge.svelte

@@ -30,167 +30,173 @@ const {
   label,
 }: Props = $props();
 
-// Color mappings for different status domains - uses CSS variables with fallbacks
+// Color mappings for different status domains, referencing the canonical
+// `--smrt-color-*` tokens directly. smrt-ui owns the theme system, so every
+// preset (material/glass/studio) always defines these tokens. Literal hex
+// fallbacks are intentionally omitted: a fallback only belongs here if it equals
+// the token's real light value, and the previous hardcoded greens/blues did not
+// (e.g. primary-container fell back to green #dcfce7, real material light is the
+// blue #d3e3fd) — see #1586.
 const colorSchemes: Record<
   StatusType,
   Record<string, { bg: string; text: string; border?: string }>
 > = {
   default: {
     active: {
-      bg: 'var(--smrt-color-primary-container, #dcfce7)',
-      text: 'var(--smrt-color-on-primary-container, #166534)',
+      bg: 'var(--smrt-color-primary-container)',
+      text: 'var(--smrt-color-on-primary-container)',
     },
     inactive: {
-      bg: 'var(--smrt-color-surface-container-highest, #f3f4f6)',
-      text: 'var(--smrt-color-on-surface-variant, #6b7280)',
+      bg: 'var(--smrt-color-surface-container-highest)',
+      text: 'var(--smrt-color-on-surface-variant)',
     },
     pending: {
-      bg: 'var(--smrt-color-secondary-container, #fef3c7)',
-      text: 'var(--smrt-color-on-secondary-container, #92400e)',
+      bg: 'var(--smrt-color-secondary-container)',
+      text: 'var(--smrt-color-on-secondary-container)',
     },
     error: {
-      bg: 'var(--smrt-color-error-container, #fee2e2)',
-      text: 'var(--smrt-color-on-error-container, #dc2626)',
+      bg: 'var(--smrt-color-error-container)',
+      text: 'var(--smrt-color-on-error-container)',
     },
     success: {
-      bg: 'var(--smrt-color-primary-container, #dcfce7)',
-      text: 'var(--smrt-color-on-primary-container, #166534)',
+      bg: 'var(--smrt-color-primary-container)',
+      text: 'var(--smrt-color-on-primary-container)',
     },
     warning: {
-      bg: 'var(--smrt-color-secondary-container, #fef3c7)',
-      text: 'var(--smrt-color-on-secondary-container, #92400e)',
+      bg: 'var(--smrt-color-secondary-container)',
+      text: 'var(--smrt-color-on-secondary-container)',
     },
   },
   invoice: {
     draft: {
-      bg: 'var(--smrt-color-surface-container-highest, #f3f4f6)',
-      text: 'var(--smrt-color-on-surface-variant, #6b7280)',
+      bg: 'var(--smrt-color-surface-container-highest)',
+      text: 'var(--smrt-color-on-surface-variant)',
     },
     sent: {
-      bg: 'var(--smrt-color-tertiary-container, #dbeafe)',
-      text: 'var(--smrt-color-on-tertiary-container, #1e40af)',
+      bg: 'var(--smrt-color-tertiary-container)',
+      text: 'var(--smrt-color-on-tertiary-container)',
     },
     viewed: {
-      bg: 'var(--smrt-color-primary-container, #e0e7ff)',
-      text: 'var(--smrt-color-on-primary-container, #4338ca)',
+      bg: 'var(--smrt-color-primary-container)',
+      text: 'var(--smrt-color-on-primary-container)',
     },
     paid: {
-      bg: 'var(--smrt-color-primary-container, #dcfce7)',
-      text: 'var(--smrt-color-on-primary-container, #166534)',
+      bg: 'var(--smrt-color-primary-container)',
+      text: 'var(--smrt-color-on-primary-container)',
     },
     overdue: {
-      bg: 'var(--smrt-color-error-container, #fee2e2)',
-      text: 'var(--smrt-color-on-error-container, #dc2626)',
+      bg: 'var(--smrt-color-error-container)',
+      text: 'var(--smrt-color-on-error-container)',
     },
     cancelled: {
-      bg: 'var(--smrt-color-error-container, #fecaca)',
-      text: 'var(--smrt-color-on-error-container, #991b1b)',
+      bg: 'var(--smrt-color-error-container)',
+      text: 'var(--smrt-color-on-error-container)',
     },
   },
   project: {
     lead: {
-      bg: 'var(--smrt-color-primary-container, #e0e7ff)',
-      text: 'var(--smrt-color-on-primary-container, #4338ca)',
+      bg: 'var(--smrt-color-primary-container)',
+      text: 'var(--smrt-color-on-primary-container)',
     },
     quoted: {
-      bg: 'var(--smrt-color-secondary-container, #fef3c7)',
-      text: 'var(--smrt-color-on-secondary-container, #92400e)',
+      bg: 'var(--smrt-color-secondary-container)',
+      text: 'var(--smrt-color-on-secondary-container)',
     },
     active: {
-      bg: 'var(--smrt-color-tertiary-container, #dbeafe)',
-      text: 'var(--smrt-color-on-tertiary-container, #1e40af)',
+      bg: 'var(--smrt-color-tertiary-container)',
+      text: 'var(--smrt-color-on-tertiary-container)',
     },
     on_hold: {
-      bg: 'var(--smrt-color-secondary-container, #fef3c7)',
-      text: 'var(--smrt-color-on-secondary-container, #92400e)',
+      bg: 'var(--smrt-color-secondary-container)',
+      text: 'var(--smrt-color-on-secondary-container)',
     },
     completed: {
-      bg: 'var(--smrt-color-primary-container, #dcfce7)',
-      text: 'var(--smrt-color-on-primary-container, #166534)',
+      bg: 'var(--smrt-color-primary-container)',
+      text: 'var(--smrt-color-on-primary-container)',
     },
     archived: {
-      bg: 'var(--smrt-color-surface-container-highest, #f3f4f6)',
-      text: 'var(--smrt-color-on-surface-variant, #6b7280)',
+      bg: 'var(--smrt-color-surface-container-highest)',
+      text: 'var(--smrt-color-on-surface-variant)',
     },
   },
   expense: {
     unbilled: {
-      bg: 'var(--smrt-color-secondary-container, #fef3c7)',
-      text: 'var(--smrt-color-on-secondary-container, #92400e)',
+      bg: 'var(--smrt-color-secondary-container)',
+      text: 'var(--smrt-color-on-secondary-container)',
     },
     billed: {
-      bg: 'var(--smrt-color-primary-container, #dcfce7)',
-      text: 'var(--smrt-color-on-primary-container, #166534)',
+      bg: 'var(--smrt-color-primary-container)',
+      text: 'var(--smrt-color-on-primary-container)',
     },
     reimbursed: {
-      bg: 'var(--smrt-color-tertiary-container, #dbeafe)',
-      text: 'var(--smrt-color-on-tertiary-container, #1e40af)',
+      bg: 'var(--smrt-color-tertiary-container)',
+      text: 'var(--smrt-color-on-tertiary-container)',
     },
     rejected: {
-      bg: 'var(--smrt-color-error-container, #fee2e2)',
-      text: 'var(--smrt-color-on-error-container, #dc2626)',
+      bg: 'var(--smrt-color-error-container)',
+      text: 'var(--smrt-color-on-error-container)',
     },
   },
   time: {
     draft: {
-      bg: 'var(--smrt-color-surface-container-highest, #f3f4f6)',
-      text: 'var(--smrt-color-on-surface-variant, #6b7280)',
+      bg: 'var(--smrt-color-surface-container-highest)',
+      text: 'var(--smrt-color-on-surface-variant)',
     },
     submitted: {
-      bg: 'var(--smrt-color-tertiary-container, #dbeafe)',
-      text: 'var(--smrt-color-on-tertiary-container, #1e40af)',
+      bg: 'var(--smrt-color-tertiary-container)',
+      text: 'var(--smrt-color-on-tertiary-container)',
     },
     approved: {
-      bg: 'var(--smrt-color-primary-container, #dcfce7)',
-      text: 'var(--smrt-color-on-primary-container, #166534)',
+      bg: 'var(--smrt-color-primary-container)',
+      text: 'var(--smrt-color-on-primary-container)',
     },
     rejected: {
-      bg: 'var(--smrt-color-error-container, #fee2e2)',
-      text: 'var(--smrt-color-on-error-container, #dc2626)',
+      bg: 'var(--smrt-color-error-container)',
+      text: 'var(--smrt-color-on-error-container)',
     },
     billed: {
-      bg: 'var(--smrt-color-primary-container, #e0e7ff)',
-      text: 'var(--smrt-color-on-primary-container, #4338ca)',
+      bg: 'var(--smrt-color-primary-container)',
+      text: 'var(--smrt-color-on-primary-container)',
     },
   },
   compliance: {
     valid: {
-      bg: 'var(--smrt-color-primary-container, #dcfce7)',
-      text: 'var(--smrt-color-on-primary-container, #166534)',
+      bg: 'var(--smrt-color-primary-container)',
+      text: 'var(--smrt-color-on-primary-container)',
     },
     expiring: {
-      bg: 'var(--smrt-color-secondary-container, #fef3c7)',
-      text: 'var(--smrt-color-on-secondary-container, #92400e)',
+      bg: 'var(--smrt-color-secondary-container)',
+      text: 'var(--smrt-color-on-secondary-container)',
     },
     expired: {
-      bg: 'var(--smrt-color-error-container, #fee2e2)',
-      text: 'var(--smrt-color-on-error-container, #dc2626)',
+      bg: 'var(--smrt-color-error-container)',
+      text: 'var(--smrt-color-on-error-container)',
     },
     pending: {
-      bg: 'var(--smrt-color-tertiary-container, #dbeafe)',
-      text: 'var(--smrt-color-on-tertiary-container, #1e40af)',
+      bg: 'var(--smrt-color-tertiary-container)',
+      text: 'var(--smrt-color-on-tertiary-container)',
     },
   },
   estimate: {
     draft: {
-      bg: 'var(--smrt-color-surface-container-highest, #f3f4f6)',
-      text: 'var(--smrt-color-on-surface-variant, #6b7280)',
+      bg: 'var(--smrt-color-surface-container-highest)',
+      text: 'var(--smrt-color-on-surface-variant)',
     },
     presented: {
-      bg: 'var(--smrt-color-tertiary-container, #dbeafe)',
-      text: 'var(--smrt-color-on-tertiary-container, #1e40af)',
+      bg: 'var(--smrt-color-tertiary-container)',
+      text: 'var(--smrt-color-on-tertiary-container)',
     },
     accepted: {
-      bg: 'var(--smrt-color-primary-container, #dcfce7)',
-      text: 'var(--smrt-color-on-primary-container, #166534)',
+      bg: 'var(--smrt-color-primary-container)',
+      text: 'var(--smrt-color-on-primary-container)',
     },
     declined: {
-      bg: 'var(--smrt-color-error-container, #fee2e2)',
-      text: 'var(--smrt-color-on-error-container, #dc2626)',
+      bg: 'var(--smrt-color-error-container)',
+      text: 'var(--smrt-color-on-error-container)',
     },
     expired: {
-      bg: 'var(--smrt-color-error-container, #fecaca)',
-      text: 'var(--smrt-color-on-error-container, #991b1b)',
+      bg: 'var(--smrt-color-error-container)',
+      text: 'var(--smrt-color-on-error-container)',
     },
   },
 };
@@ -203,8 +209,8 @@ const colors = $derived.by(() => {
   const scheme = colorSchemes[type] ?? colorSchemes.default;
   return (
     scheme[normalizedStatus] ?? {
-      bg: 'var(--smrt-color-surface-container-highest, #e5e7eb)',
-      text: 'var(--smrt-color-on-surface-variant, #374151)',
+      bg: 'var(--smrt-color-surface-container-highest)',
+      text: 'var(--smrt-color-on-surface-variant)',
     }
   );
 });

package/dist/components/display/StatusBadge.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/display/StatusBadge.svelte.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG7C,sCAAsC;AACtC,MAAM,WAAW,KAAK;IACpB,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iBAAiB;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qBAAqB;IACrB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8MD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"StatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/display/StatusBadge.svelte.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG7C,sCAAsC;AACtC,MAAM,WAAW,KAAK;IACpB,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iBAAiB;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qBAAqB;IACrB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoND,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/display/__tests__/ConfidenceBadge.test.js

@@ -71,6 +71,19 @@ describe('ConfidenceBadge', () => {
         const badge = container.querySelector('.confidence-badge');
         expect(badge.style.getPropertyValue('--bar-color')).toContain(`smrt-color-${token}`);
     });
+    it('emits bare design tokens with no literal hex fallback', () => {
+        // Regression for #1586: the old `var(--token, #hex)` fallbacks were the
+        // wrong colors (high → green #dcfce7 vs real material light blue #d3e3fd).
+        const { container } = render(ConfidenceBadge, {
+            props: { confidence: 90 },
+        });
+        const badge = container.querySelector('.confidence-badge');
+        for (const prop of ['--badge-bg', '--badge-text', '--bar-color']) {
+            const value = badge.style.getPropertyValue(prop);
+            expect(value).toMatch(/^var\(--smrt-color-[a-z-]+\)$/);
+            expect(value).not.toContain('#');
+        }
+    });
     it('appends a custom class alongside the base class', () => {
         const { container } = render(ConfidenceBadge, {
             props: { confidence: 50, class: 'my-badge' },

package/dist/components/display/__tests__/StatusBadge.test.js

@@ -66,8 +66,23 @@ describe('StatusBadge', () => {
             props: { status: 'totally-unknown', type: 'invoice' },
         });
         const span = container.querySelector('span');
-        expect(span.style.getPropertyValue('--badge-bg')).toContain('#e5e7eb');
-        expect(span.style.getPropertyValue('--badge-text')).toContain('#374151');
+        // The neutral fallback resolves to canonical surface tokens, not a literal
+        // hex. smrt-ui owns the theme system, so the tokens are always defined; a
+        // hardcoded fallback would freeze the wrong color across presets (#1586).
+        expect(span.style.getPropertyValue('--badge-bg')).toBe('var(--smrt-color-surface-container-highest)');
+        expect(span.style.getPropertyValue('--badge-text')).toBe('var(--smrt-color-on-surface-variant)');
+    });
+    it('uses bare design tokens with no literal hex fallback in scheme colors', () => {
+        // Regression for #1586: the `var(--token, #hex)` fallbacks were the wrong
+        // colors (e.g. primary-container → green #dcfce7 vs real material light blue
+        // #d3e3fd). Every emitted custom property must be a bare token reference.
+        const { container } = render(StatusBadge, {
+            props: { status: 'paid', type: 'invoice' },
+        });
+        const span = container.querySelector('span');
+        expect(span.style.getPropertyValue('--badge-bg')).toBe('var(--smrt-color-primary-container)');
+        expect(span.style.getPropertyValue('--badge-bg')).not.toContain('#');
+        expect(span.style.getPropertyValue('--badge-text')).not.toContain('#');
     });
     it('normalizes spaces and hyphens when matching a scheme key', () => {
         // 'On-Hold' normalizes to 'on_hold', a known project status.