@happyvertical/smrt-ui 0.30.0 → 0.31.1

package/dist/themes/__tests__/create-theme.test.js

@@ -0,0 +1,79 @@
+/**
+ * Regression tests for createTheme color handling (#1586, epic #1354).
+ *
+ * The dark-color derivation and primary-container derivation used to assume the
+ * primary was 6-digit hex. For `rgb()`, 3-digit hex, or a named color they
+ * emitted invalid CSS — `rgb(0,122,255)20`, `#f6320`, `#NaNNaNNaN`. Inputs are
+ * now normalized to RGB first (or rejected with a clear error), so the generated
+ * palette is always valid CSS.
+ */
+import { describe, expect, it } from 'vitest';
+import { createTheme } from '../create-theme';
+const HEX6 = /^#[0-9a-fA-F]{6}$/;
+const HEX_ALPHA = /^#[0-9a-fA-F]{8}$/;
+/** Every color value in a palette must be syntactically valid CSS. */
+function expectAllColorsValid(colors) {
+    for (const [key, value] of Object.entries(colors)) {
+        expect(typeof value).toBe('string');
+        // The regression: derivations used to emit '#NaNNaNNaN' / 'rgb(...)20'.
+        expect(value, `${key}=${value}`).not.toContain('NaN');
+        // Hex values must be well-formed: exactly 3, 4, 6, or 8 digits (all valid
+        // CSS). A 5- or 7-digit hex (e.g. the '#f6320' the bug produced) must fail.
+        // rgb()/rgba() and other formats pass through unchanged.
+        if (value.startsWith('#')) {
+            expect(value, `${key}=${value}`).toMatch(/^#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/);
+        }
+    }
+}
+describe('createTheme color handling (#1586)', () => {
+    it('derives a valid primary container from a 6-digit hex primary', () => {
+        const theme = createTheme({
+            id: 'brand6',
+            name: 'Brand 6',
+            light: { primary: '#0b57d0', background: '#ffffff' },
+        });
+        // 8-digit hex alpha form: primary + "20".
+        expect(theme.light.primaryContainer).toMatch(HEX_ALPHA);
+        expect(theme.light.primaryContainer.toLowerCase()).toBe('#0b57d020');
+        expectAllColorsValid(theme.light);
+        expectAllColorsValid(theme.dark);
+    });
+    it('normalizes an rgb() primary instead of emitting invalid CSS', () => {
+        const theme = createTheme({
+            id: 'brandRgb',
+            name: 'Brand RGB',
+            light: { primary: 'rgb(0, 122, 255)', background: '#ffffff' },
+        });
+        // Was 'rgb(0, 122, 255)20' (invalid); now a normalized 8-digit hex.
+        expect(theme.light.primaryContainer).not.toContain('rgb(');
+        expect(theme.light.primaryContainer).toMatch(HEX_ALPHA);
+        expect(theme.light.primaryContainer.toLowerCase()).toBe('#007aff20');
+        // Auto-generated dark colors used to be '#NaNNaNNaN' for an rgb() input;
+        // every value is now valid CSS (hex values are well-formed, rgb() values
+        // pass through unchanged).
+        expectAllColorsValid(theme.light);
+        expectAllColorsValid(theme.dark);
+        // The brightness-derived dark colors normalize to proper hex.
+        expect(theme.dark.onPrimary).toMatch(HEX6);
+        expect(theme.dark.secondary).toMatch(HEX6);
+    });
+    it('expands a 3-digit hex primary correctly', () => {
+        const theme = createTheme({
+            id: 'brand3',
+            name: 'Brand 3',
+            light: { primary: '#07f', background: '#fff' },
+        });
+        // '#07f' -> '#0077ff', container '#0077ff20'.
+        expect(theme.light.primaryContainer.toLowerCase()).toBe('#0077ff20');
+        expectAllColorsValid(theme.light);
+        expectAllColorsValid(theme.dark);
+        expect(theme.dark.onPrimary).toMatch(HEX6);
+    });
+    it('throws a clear error for an unsupported named color', () => {
+        expect(() => createTheme({
+            id: 'brandNamed',
+            name: 'Brand Named',
+            light: { primary: 'tomato', background: '#ffffff' },
+        })).toThrow(/unsupported color "tomato"/);
+    });
+});

package/dist/themes/__tests__/css-generator.test.js

@@ -1,9 +1,39 @@
 /**
  * Unit tests for the theme CSS generator (coverage uplift, S6 gate).
  */
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
 import { describe, expect, it } from 'vitest';
 import { generateAllThemesCSS, generateThemeCSS, generateThemeVariables, variablesToStyleString, } from '../css-generator';
 import { getTheme } from '../registry';
+// Raw CSS text of the static studio preset, used to prove the static-CSS
+// delivery path and the JS generator emit identical elevation values (#1586).
+// Resolved from process.cwd() (NOT import.meta.url): the smrt-vitest plugin runs
+// each package's suite with cwd === the package root, so this is stable here,
+// whereas `new URL('…', import.meta.url)` fails to resolve under the vite-node
+// loader this suite runs in.
+const studioCss = readFileSync(join(process.cwd(), 'src/themes/styles/studio.css'), 'utf8');
+/**
+ * Pull the `--smrt-elevation-0..5` values out of a specific
+ * `[data-theme="<preset>"][data-color-scheme="<scheme>"]` block of a static CSS
+ * preset file.
+ */
+function staticElevation(css, preset, scheme) {
+    const selector = `[data-theme="${preset}"][data-color-scheme="${scheme}"]`;
+    const start = css.indexOf(selector);
+    if (start === -1)
+        throw new Error(`block not found: ${selector}`);
+    const open = css.indexOf('{', start);
+    const close = css.indexOf('}', open);
+    const body = css.slice(open + 1, close);
+    const out = {};
+    for (const line of body.split('\n')) {
+        const m = line.match(/(--smrt-elevation-\d):\s*(.+);/);
+        if (m)
+            out[m[1]] = m[2].trim();
+    }
+    return out;
+}
 describe('theme CSS generator', () => {
     const theme = getTheme('material');
     it('generateThemeVariables returns --smrt-* custom properties', () => {
@@ -29,4 +59,29 @@ describe('theme CSS generator', () => {
         const css = await generateAllThemesCSS();
         expect(css.length).toBeGreaterThan(0);
     });
+    describe('studio per-scheme elevation (#1586)', () => {
+        const studio = getTheme('studio');
+        it('emits distinct dark-scheme elevation, not the light values', () => {
+            const light = generateThemeVariables(studio, false);
+            const dark = generateThemeVariables(studio, true);
+            // Level 1 is a white inset hairline in dark vs a tinted inset in light.
+            expect(dark['--smrt-elevation-1']).toContain('rgba(255, 255, 255');
+            expect(light['--smrt-elevation-1']).toContain('rgba(60, 64, 67');
+            expect(dark['--smrt-elevation-1']).not.toBe(light['--smrt-elevation-1']);
+            // Deeper black shadows above level 1.
+            expect(dark['--smrt-elevation-5']).toContain('rgba(0, 0, 0, 0.25)');
+        });
+        it('matches the static studio.css for both schemes (drift guard)', () => {
+            // The static-CSS delivery path and the JS generator must agree on VALUES,
+            // not just token names — this is what let the studio dark shadows diverge.
+            for (const scheme of ['light', 'dark']) {
+                const generated = generateThemeVariables(studio, scheme === 'dark');
+                const fromCss = staticElevation(studioCss, 'studio', scheme);
+                for (let level = 0; level <= 5; level += 1) {
+                    const key = `--smrt-elevation-${level}`;
+                    expect(fromCss[key], `${scheme} ${key}`).toBe(generated[key]);
+                }
+            }
+        });
+    });
 });

package/dist/themes/create-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-theme.d.ts","sourceRoot":"","sources":["../../src/themes/create-theme.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAaH,OAAO,KAAK,EACV,YAAY,EACZ,WAAW,EACX,cAAc,EACd,YAAY,EACZ,KAAK,EACL,WAAW,EACX,eAAe,EAChB,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,YAAY,CAAC,CAAC;IAC5E,iFAAiF;IACjF,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC7B,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACtC,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACpC,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAsPD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,KAAK,CAkD9D;AAkBD;;;GAGG;AACH,wBAAsB,oBAAoB,IAAI,OAAO,CAAC,IAAI,CAAC,CAG1D;AAgBD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAEhD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,CAIjE;AAED;;;GAGG;AACH,wBAAsB,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAEpE;AAED;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,MAAM,EACpB,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,GAAG,MAAM,GAAG,OAAO,CAAC,GAC1D,KAAK,CAWP"}
+{"version":3,"file":"create-theme.d.ts","sourceRoot":"","sources":["../../src/themes/create-theme.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAcH,OAAO,KAAK,EACV,YAAY,EACZ,WAAW,EACX,cAAc,EACd,YAAY,EACZ,KAAK,EACL,WAAW,EACX,eAAe,EAChB,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,YAAY,CAAC,CAAC;IAC5E,iFAAiF;IACjF,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC7B,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACtC,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACpC,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAyPD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,KAAK,CAsD9D;AAkBD;;;GAGG;AACH,wBAAsB,oBAAoB,IAAI,OAAO,CAAC,IAAI,CAAC,CAG1D;AAgBD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAEhD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,CAIjE;AAED;;;GAGG;AACH,wBAAsB,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAEpE;AAED;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,MAAM,EACpB,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,GAAG,MAAM,GAAG,OAAO,CAAC,GAC1D,KAAK,CAWP"}

package/dist/themes/create-theme.js

@@ -3,6 +3,7 @@
  *
  * Helper functions for creating custom themes that match the SMRT theme system.
  */
+import { hexToRgb, rgbToHex } from '../utils/theme/color.js';
 import { hasCustomTheme, registerCustomTheme, themes as registeredThemes, } from './registry.js';
 import { borderRadiusScale, durationScale, materialEasing, spacingScale, } from './shared.js';
 /**
@@ -54,34 +55,36 @@ const defaultColorStructure = {
     scrim: 'rgba(0, 0, 0, 0.5)',
 };
 /**
- * Helper function to clamp a value between min and max
- */
-function clamp(value, min, max) {
-    return Math.min(max, Math.max(min, value));
-}
-/**
- * Helper function to convert RGB component to 2-digit hex
+ * Normalize any supported CSS color string to a canonical 6-digit hex.
+ *
+ * Accepts 6-digit hex, 3-digit shorthand hex, and `rgb()`/`rgba()` (via the
+ * shared `hexToRgb`). Throws on input that can't be parsed (e.g. a named color
+ * like `tomato`) so an unsupported value fails loudly instead of silently
+ * producing invalid CSS like `#NaNNaNNaN` or `rgb(...)20` (#1586).
  */
-function toHexComponent(value) {
-    const clamped = Math.round(clamp(value, 0, 255));
-    return clamped.toString(16).padStart(2, '0');
+function normalizeHex(color) {
+    const { r, g, b } = hexToRgb(color);
+    if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
+        throw new Error(`createTheme: unsupported color "${color}". Use 6-digit hex (#rrggbb), ` +
+            '3-digit hex (#rgb), or rgb()/rgba() notation.');
+    }
+    return rgbToHex(r, g, b);
 }
 /**
  * Generate dark mode colors from light mode colors
  * Uses simple inversion logic - for production use, manually define dark colors
  */
 function generateDarkColors(light) {
-    // Helper to adjust color brightness with proper rounding and hex conversion
-    const adjustBrightness = (hex, factor) => {
-        // Handle 3-character hex codes
-        let fullHex = hex;
-        if (hex.length === 4 && hex[0] === '#') {
-            fullHex = `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
+    // Adjust color brightness by a multiplicative factor. Normalizes the input to
+    // RGB first (via the shared parser), so 3-digit hex and rgb()/rgba() inputs no
+    // longer NaN-poison the output into `#NaNNaNNaN` (#1586).
+    const adjustBrightness = (color, factor) => {
+        const { r, g, b } = hexToRgb(color);
+        if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
+            throw new Error(`createTheme: unsupported color "${color}". Use 6-digit hex (#rrggbb), ` +
+                '3-digit hex (#rgb), or rgb()/rgba() notation.');
         }
-        const r = parseInt(fullHex.slice(1, 3), 16) * factor;
-        const g = parseInt(fullHex.slice(3, 5), 16) * factor;
-        const b = parseInt(fullHex.slice(5, 7), 16) * factor;
-        return `#${toHexComponent(r)}${toHexComponent(g)}${toHexComponent(b)}`;
+        return rgbToHex(r * factor, g * factor, b * factor);
     };
     return {
         ...light,
@@ -266,8 +269,12 @@ export function createTheme(options) {
         ...defaultColorStructure,
         ...baseTheme?.light,
         ...lightPartial,
-        // Generate derived colors
-        primaryContainer: lightPartial.primaryContainer || `${lightPartial.primary}20`,
+        // Generate derived colors. The container is the primary at ~12.5% alpha,
+        // expressed as 8-digit hex. Normalize the primary to canonical 6-hex first
+        // so a 3-digit hex or rgb()/rgba() primary can't yield invalid CSS like
+        // `rgb(0,122,255)20` or `#f6320` (#1586).
+        primaryContainer: lightPartial.primaryContainer ||
+            `${normalizeHex(lightPartial.primary)}20`,
         onPrimaryContainer: lightPartial.onPrimaryContainer || lightPartial.primary,
         inversePrimary: lightPartial.inversePrimary || lightPartial.primary,
     };

package/dist/themes/css-generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css-generator.d.ts","sourceRoot":"","sources":["../../src/themes/css-generator.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAWH,OAAO,KAAK,EAQV,KAAK,EAEN,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA+LD;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAsCxB;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAChC,MAAM,CAIR;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAaR;AAED;;;GAGG;AACH,wBAAsB,oBAAoB,IAAI,OAAO,CAAC,MAAM,CAAC,CAS5D"}
+{"version":3,"file":"css-generator.d.ts","sourceRoot":"","sources":["../../src/themes/css-generator.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAWH,OAAO,KAAK,EAQV,KAAK,EAEN,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA+LD;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA0CxB;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAChC,MAAM,CAIR;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAaR;AAED;;;GAGG;AACH,wBAAsB,oBAAoB,IAAI,OAAO,CAAC,MAAM,CAAC,CAS5D"}

package/dist/themes/css-generator.js

@@ -157,6 +157,9 @@ function generateStaticTokens(prefix) {
 export function generateThemeVariables(theme, isDark, options = {}) {
     const { prefix = '--smrt' } = options;
     const colors = isDark ? theme.dark : theme.light;
+    // Per-scheme elevation: dark uses `darkElevation` when the preset defines it,
+    // so the JS generator and the static dark CSS stay in lockstep (#1586).
+    const elevation = isDark && theme.darkElevation ? theme.darkElevation : theme.elevation;
     return {
         // Theme identification
         [`${prefix}-theme-id`]: theme.id,
@@ -172,7 +175,7 @@ export function generateThemeVariables(theme, isDark, options = {}) {
         // Border radius
         ...generateBorderRadiusVariables(theme.borderRadius, prefix),
         // Elevation
-        ...generateElevationVariables(theme.elevation, prefix),
+        ...generateElevationVariables(elevation, prefix),
         // Duration
         ...generateDurationVariables(theme.duration, prefix),
         // Easing

package/dist/themes/studio/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/studio/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAQH,OAAO,KAAK,EAGV,KAAK,EAEN,MAAM,aAAa,CAAC;AA+QrB;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAYzB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/studio/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAQH,OAAO,KAAK,EAGV,KAAK,EAEN,MAAM,aAAa,CAAC;AAiSrB;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAazB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/themes/studio/index.js

@@ -240,7 +240,7 @@ const typography = {
     },
 };
 /**
- * Studio elevation - Minimal, subtle shadows
+ * Studio elevation (light) - Minimal, subtle shadows
  * Flat design philosophy with only slight depth indication
  */
 const elevation = {
@@ -251,6 +251,23 @@ const elevation = {
     4: '0 4px 8px 0 rgba(60, 64, 67, 0.1), 0 2px 4px 0 rgba(60, 64, 67, 0.06)',
     5: '0 8px 16px 0 rgba(60, 64, 67, 0.12), 0 4px 8px 0 rgba(60, 64, 67, 0.06)',
 };
+/**
+ * Studio elevation (dark) - Tuned for a near-black surface.
+ *
+ * The flat light shadows (tinted with the light surface color, very low alpha)
+ * read as invisible on a dark surface, so dark mode uses a white inset hairline
+ * at level 1 and deeper black shadows above it. Defining this here — rather than
+ * only in the static `styles/studio.css` — keeps the JS ThemeProvider output and
+ * the static dark CSS in lockstep (#1586).
+ */
+const darkElevation = {
+    0: 'none',
+    1: 'inset 0 0 0 1px rgba(255, 255, 255, 0.08)',
+    2: '0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.1)',
+    3: '0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.1)',
+    4: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1)',
+    5: '0 8px 16px 0 rgba(0, 0, 0, 0.25), 0 4px 8px 0 rgba(0, 0, 0, 0.1)',
+};
 /**
  * Studio theme definition
  */
@@ -261,6 +278,7 @@ export const studioTheme = {
     dark: darkColors,
     typography,
     elevation,
+    darkElevation,
     spacing: spacingScale,
     borderRadius: borderRadiusScale,
     duration: durationScale,

package/dist/themes/types.d.ts

@@ -191,8 +191,15 @@ export interface Theme {
     dark: ColorPalette;
     /** Typography scale */
     typography: TypographyScale;
-    /** Elevation shadows */
+    /** Elevation shadows (used for both schemes unless `darkElevation` is set) */
     elevation: ElevationScale;
+    /**
+     * Optional dark-scheme elevation overrides. When present, the CSS generator
+     * emits these for the dark scheme instead of `elevation`. Lets a preset tune
+     * shadows for a dark surface (e.g. studio's punchier dark shadows) so the JS
+     * generator and the static dark CSS can't diverge (#1586).
+     */
+    darkElevation?: ElevationScale;
     /** Spacing scale */
     spacing: SpacingScale;
     /** Border radius scale */

package/dist/themes/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/themes/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,8BAA8B;AAC9B,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE1D,wBAAwB;AACxB,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEtD,6CAA6C;AAC7C,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,CAAC;AAE9C,0BAA0B;AAC1B,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEvE;;;GAGG;AACH,MAAM,WAAW,YAAY;IAE3B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAG3B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAG7B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,mBAAmB,EAAE,MAAM,CAAC;IAG5B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IAGzB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAG3B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAG3B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,uBAAuB,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,MAAM,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IAGtB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IAGrB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IAGvB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IAGvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IAGd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,eAAe,CAAC;IAC9B,aAAa,EAAE,eAAe,CAAC;IAC/B,YAAY,EAAE,eAAe,CAAC;IAC9B,aAAa,EAAE,eAAe,CAAC;IAC/B,cAAc,EAAE,eAAe,CAAC;IAChC,aAAa,EAAE,eAAe,CAAC;IAC/B,UAAU,EAAE,eAAe,CAAC;IAC5B,WAAW,EAAE,eAAe,CAAC;IAC7B,UAAU,EAAE,eAAe,CAAC;IAC5B,SAAS,EAAE,eAAe,CAAC;IAC3B,UAAU,EAAE,eAAe,CAAC;IAC5B,SAAS,EAAE,eAAe,CAAC;IAC3B,UAAU,EAAE,eAAe,CAAC;IAC5B,WAAW,EAAE,eAAe,CAAC;IAC7B,UAAU,EAAE,eAAe,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,GAAG,EAAE,MAAM,CAAC;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,GAAG,EAAE,MAAM,CAAC;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,GAAG,EAAE,MAAM,CAAC;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,GAAG,EAAE,MAAM,CAAC;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,yBAAyB;IACzB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,KAAK;IACpB,uBAAuB;IACvB,EAAE,EAAE,WAAW,CAAC;IAChB,yBAAyB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,wBAAwB;IACxB,KAAK,EAAE,YAAY,CAAC;IACpB,uBAAuB;IACvB,IAAI,EAAE,YAAY,CAAC;IACnB,uBAAuB;IACvB,UAAU,EAAE,eAAe,CAAC;IAC5B,wBAAwB;IACxB,SAAS,EAAE,cAAc,CAAC;IAC1B,oBAAoB;IACpB,OAAO,EAAE,YAAY,CAAC;IACtB,0BAA0B;IAC1B,YAAY,EAAE,iBAAiB,CAAC;IAChC,2BAA2B;IAC3B,QAAQ,EAAE,aAAa,CAAC;IACxB,yBAAyB;IACzB,MAAM,EAAE,WAAW,CAAC;IACpB,sCAAsC;IACtC,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,0BAA0B;IAC1B,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,4BAA4B;IAC5B,MAAM,EAAE,WAAW,CAAC;IACpB,8BAA8B;IAC9B,WAAW,EAAE,WAAW,CAAC;IACzB,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,WAMhC,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,2BAA2B;IAC3B,MAAM,EAAE,WAAW,CAAC;IACpB,2BAA2B;IAC3B,WAAW,EAAE,WAAW,CAAC;IACzB,6CAA6C;IAC7C,cAAc,EAAE,cAAc,CAAC;IAC/B,kCAAkC;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,+BAA+B;IAC/B,MAAM,EAAE,WAAW,CAAC;IACpB,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,0BAA0B;IAC1B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,uBAAuB;IACvB,SAAS,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,uBAAuB;IACvB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,oCAAoC;IACpC,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,iCAAiC;IACjC,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACvD;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/themes/types.ts"],"names":[],"mappings":"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"}

package/dist/utils/theme/__tests__/color.test.js

@@ -6,6 +6,23 @@ describe('Theme Color Utilities', () => {
         expect(hexToRgb('#ffffff')).toEqual({ r: 255, g: 255, b: 255 });
         expect(hexToRgb('#FF5733')).toEqual({ r: 255, g: 87, b: 51 });
     });
+    it('expands 3-digit shorthand hex (#abc -> #aabbcc) (#1586)', () => {
+        // Regression: shorthand hex used to NaN-poison the b channel (only the first
+        // 2 chars were read), corrupting any palette generated from a 3-digit seed.
+        expect(hexToRgb('#abc')).toEqual({ r: 170, g: 187, b: 204 });
+        expect(hexToRgb('#000')).toEqual({ r: 0, g: 0, b: 0 });
+        expect(hexToRgb('#fff')).toEqual({ r: 255, g: 255, b: 255 });
+    });
+    it('parses functional rgb()/rgba() notation (#1586)', () => {
+        expect(hexToRgb('rgb(0, 122, 255)')).toEqual({ r: 0, g: 122, b: 255 });
+        expect(hexToRgb('rgb(0 122 255)')).toEqual({ r: 0, g: 122, b: 255 });
+        expect(hexToRgb('rgba(0, 122, 255, 0.5)')).toEqual({
+            r: 0,
+            g: 122,
+            b: 255,
+        });
+        expect(hexToRgb('rgb(100%, 0%, 50%)')).toEqual({ r: 255, g: 0, b: 128 });
+    });
     it('should convert rgb to hex correctly', () => {
         expect(rgbToHex(0, 0, 0)).toBe('#000000');
         expect(rgbToHex(255, 255, 255)).toBe('#ffffff');

package/dist/utils/theme/color.d.ts

@@ -46,6 +46,17 @@ export interface Theme {
     surfaceContainerHigh: string;
     surfaceContainerHighest: string;
 }
+/**
+ * Parse a CSS color string into an {@link Rgb}.
+ *
+ * Accepts 6-digit hex (`#rrggbb`), 3-digit shorthand hex (`#rgb`, expanded by
+ * doubling each nibble), and functional `rgb()` / `rgba()` notation (commas or
+ * spaces, integer or percentage channels). Named colors and other formats are
+ * not supported and yield `{ r: NaN, g: NaN, b: NaN }`; callers that accept
+ * arbitrary input should validate before relying on the result.
+ *
+ * The leading `#` is optional for hex input.
+ */
 export declare function hexToRgb(hex: string): Rgb;
 export declare function rgbToHex(r: number, g: number, b: number): string;
 /**

package/dist/utils/theme/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../src/utils/theme/color.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAGD,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,uBAAuB,EAAE,MAAM,CAAC;CACjC;AAED,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAMzC;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAMhE;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,GAAG,GAAG,MAAM,CAM7C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,GAAG,MAAM,CAMzD;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC7B,EAAE,EAAE,MAAM,GAAG,GAAG,EAChB,EAAE,EAAE,MAAM,GAAG,GAAG,EAChB,SAAS,UAAQ,GAChB,OAAO,CAKT;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,MAAM,GAAG,GAAG,EAChB,EAAE,EAAE,MAAM,GAAG,GAAG,EAChB,SAAS,UAAQ,GAChB,OAAO,CAKT;AAmED,wBAAgB,aAAa,CAC3B,SAAS,EAAE,MAAM,EACjB,IAAI,GAAE,OAAO,GAAG,MAAgB,GAC/B,KAAK,CA2HP"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../src/utils/theme/color.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAGD,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,uBAAuB,EAAE,MAAM,CAAC;CACjC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAkCzC;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAMhE;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,GAAG,GAAG,MAAM,CAM7C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,GAAG,MAAM,CAMzD;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC7B,EAAE,EAAE,MAAM,GAAG,GAAG,EAChB,EAAE,EAAE,MAAM,GAAG,GAAG,EAChB,SAAS,UAAQ,GAChB,OAAO,CAKT;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,MAAM,GAAG,GAAG,EAChB,EAAE,EAAE,MAAM,GAAG,GAAG,EAChB,SAAS,UAAQ,GAChB,OAAO,CAKT;AAmED,wBAAgB,aAAa,CAC3B,SAAS,EAAE,MAAM,EACjB,IAAI,GAAE,OAAO,GAAG,MAAgB,GAC/B,KAAK,CA2HP"}

package/dist/utils/theme/color.js

@@ -1,8 +1,43 @@
+/**
+ * Parse a CSS color string into an {@link Rgb}.
+ *
+ * Accepts 6-digit hex (`#rrggbb`), 3-digit shorthand hex (`#rgb`, expanded by
+ * doubling each nibble), and functional `rgb()` / `rgba()` notation (commas or
+ * spaces, integer or percentage channels). Named colors and other formats are
+ * not supported and yield `{ r: NaN, g: NaN, b: NaN }`; callers that accept
+ * arbitrary input should validate before relying on the result.
+ *
+ * The leading `#` is optional for hex input.
+ */
 export function hexToRgb(hex) {
-    const cleanHex = hex.replace('#', '');
-    const r = parseInt(cleanHex.substring(0, 2), 16);
-    const g = parseInt(cleanHex.substring(2, 4), 16);
-    const b = parseInt(cleanHex.substring(4, 6), 16);
+    const input = hex.trim();
+    // Functional rgb()/rgba() notation, e.g. rgb(0, 122, 255) or rgb(0 122 255 / .5).
+    const rgbMatch = input.match(/^rgba?\(([^)]+)\)$/i);
+    if (rgbMatch) {
+        const channels = rgbMatch[1]
+            .split(/[\s,/]+/)
+            .filter(Boolean)
+            .slice(0, 3);
+        const toChannel = (part) => {
+            if (part.endsWith('%')) {
+                return Math.round((Number.parseFloat(part) / 100) * 255);
+            }
+            return Number.parseInt(part, 10);
+        };
+        const [r, g, b] = channels.map(toChannel);
+        return { r, g, b };
+    }
+    const cleanHex = input.replace('#', '');
+    // 3-digit shorthand hex: #abc -> #aabbcc.
+    if (cleanHex.length === 3) {
+        const r = Number.parseInt(cleanHex[0] + cleanHex[0], 16);
+        const g = Number.parseInt(cleanHex[1] + cleanHex[1], 16);
+        const b = Number.parseInt(cleanHex[2] + cleanHex[2], 16);
+        return { r, g, b };
+    }
+    const r = Number.parseInt(cleanHex.substring(0, 2), 16);
+    const g = Number.parseInt(cleanHex.substring(2, 4), 16);
+    const b = Number.parseInt(cleanHex.substring(4, 6), 16);
     return { r, g, b };
 }
 export function rgbToHex(r, g, b) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-ui",
-  "version": "0.30.0",
+  "version": "0.31.1",
   "description": "Domain-agnostic Svelte 5 UI runtime for SMRT: primitives, i18n client, theme system, and module UI registry",
   "type": "module",
   "main": "./dist/index.js",
@@ -108,7 +108,7 @@
   },
   "dependencies": {
     "esm-env": "^1.2.2",
-    "@happyvertical/smrt-types": "0.30.0"
+    "@happyvertical/smrt-types": "0.31.1"
   },
   "peerDependencies": {
     "svelte": "^5.18.2"