@happyvertical/smrt-ui 0.40.68 → 0.40.70

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

@@ -5,8 +5,6 @@
  */
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { createTheme, registerTheme } from '../create-theme.js';
-import { generateThemeVariables } from '../css-generator.js';
-import { studioTheme } from '../studio/index.js';
 import { themeScript } from '../theme-script.js';
 function mockSystemDark(matches) {
     window.matchMedia = vi.fn().mockImplementation((query) => ({
@@ -24,13 +22,7 @@ describe('themeScript', () => {
         localStorage.clear();
         document.documentElement.removeAttribute('data-theme');
         document.documentElement.removeAttribute('data-color-scheme');
-        document.documentElement.removeAttribute('data-smrt-theme-bootstrap');
         document.documentElement.classList.remove('dark');
-        for (const property of Array.from(document.documentElement.style)) {
-            if (property.startsWith('--smrt-bootstrap-')) {
-                document.documentElement.style.removeProperty(property);
-            }
-        }
     });
     it('resolves system preference when nothing is stored', () => {
         mockSystemDark(true);
@@ -46,7 +38,19 @@ describe('themeScript', () => {
         expect(document.documentElement.getAttribute('data-theme')).toBe('studio');
         expect(document.documentElement.getAttribute('data-color-scheme')).toBe('light');
         expect(document.documentElement.classList.contains('dark')).toBe(false);
-        expect(document.documentElement.style.getPropertyValue('--smrt-bootstrap-color-background')).toBe(generateThemeVariables(studioTheme, false)['--smrt-color-background']);
+    });
+    it('ships no inline variable payload — static CSS owns the values', () => {
+        mockSystemDark(false);
+        const script = themeScript({ preset: 'studio' });
+        // The pre-paint script only stamps attributes; variable values come from
+        // the static per-preset stylesheets selected by those attributes.
+        expect(script).not.toContain('--smrt-');
+        expect(script).not.toContain('bootstrap');
+        expect(script.length).toBeLessThan(1024);
+        run(script);
+        for (const property of Array.from(document.documentElement.style)) {
+            expect(property.startsWith('--smrt-')).toBe(false);
+        }
     });
     it('uses the custom storageKey', () => {
         mockSystemDark(false);
@@ -82,7 +86,7 @@ describe('themeScript', () => {
         expect(document.documentElement.getAttribute('data-theme')).toBe('material');
         expect(document.documentElement.getAttribute('data-color-scheme')).toBe('light');
     });
-    it('bootstraps a registered custom theme from persistence', () => {
+    it('stamps a persisted registered custom theme pre-paint', () => {
         const brandTheme = createTheme({
             id: 'bootstrap-test-brand',
             name: 'Bootstrap Test Brand',
@@ -97,7 +101,8 @@ describe('themeScript', () => {
         }));
         run(themeScript());
         expect(document.documentElement.getAttribute('data-theme')).toBe('bootstrap-test-brand');
-        expect(document.documentElement.style.getPropertyValue('--smrt-bootstrap-color-background')).toBe(generateThemeVariables(brandTheme, true)['--smrt-color-background']);
+        expect(document.documentElement.getAttribute('data-color-scheme')).toBe('dark');
+        expect(document.documentElement.classList.contains('dark')).toBe(true);
     });
     it('still applies the fallback when localStorage access throws', () => {
         mockSystemDark(true);

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

@@ -20,6 +20,11 @@ export interface GenerateCSSOptions {
  * @param isDark - Whether to use dark mode colors
  * @param options - Generation options
  * @returns Object with CSS variable names and values
+ * @deprecated Prefer the static per-preset stylesheets
+ * (`themes/styles/<preset>.css`) selected by `data-theme`/`data-color-scheme`
+ * attributes — ThemeProvider uses them by default for built-in presets. This
+ * runtime path remains for custom registered themes, which have no static
+ * stylesheet, and for the `inlineVariables` escape hatch.
  */
 export declare function generateThemeVariables(theme: Theme, isDark: boolean, options?: GenerateCSSOptions): Record<string, string>;
 /**

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;AAwMD;;;;;;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"}
+{"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;AAwMD;;;;;;;;;;;GAWG;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

@@ -160,6 +160,11 @@ function generateStaticTokens(prefix, fontFamilyMono) {
  * @param isDark - Whether to use dark mode colors
  * @param options - Generation options
  * @returns Object with CSS variable names and values
+ * @deprecated Prefer the static per-preset stylesheets
+ * (`themes/styles/<preset>.css`) selected by `data-theme`/`data-color-scheme`
+ * attributes — ThemeProvider uses them by default for built-in presets. This
+ * runtime path remains for custom registered themes, which have no static
+ * stylesheet, and for the `inlineVariables` escape hatch.
  */
 export function generateThemeVariables(theme, isDark, options = {}) {
     const { prefix = '--smrt' } = options;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/glass/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAQH,OAAO,KAAK,EAIV,KAAK,EAEN,MAAM,aAAa,CAAC;AAiSrB;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAcxB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/glass/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAQH,OAAO,KAAK,EAIV,KAAK,EAEN,MAAM,aAAa,CAAC;AAySrB;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAcxB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/themes/glass/index.js

@@ -56,8 +56,14 @@ const lightColors = {
     // Background - Vibrant light background
     background: '#f2f2f7',
     onBackground: '#000000',
-    // Outline - Subtle translucent borders
-    outline: 'rgba(120, 120, 128, 0.29)',
+    // Outline - Translucent borders.
+    // `outline` is the boundary role and must clear 3:1 non-text once its alpha
+    // is composited over the frosted surface (WCAG 1.4.11). At the original
+    // rgba(120, 120, 128, 0.29) it composited to 1.42:1 — a control border no one
+    // could see. Darkened the hue rather than pushing alpha toward opaque, which
+    // keeps the translucent character (#2322). `outlineVariant` stays the quiet
+    // hairline for dividers and panel edges.
+    outline: 'rgba(80, 80, 88, 0.75)',
     outlineVariant: 'rgba(120, 120, 128, 0.16)',
     // Inverse
     inverseSurface: '#1c1c1e',
@@ -120,8 +126,10 @@ const darkColors = {
     // Background - Deep dark with subtle tint
     background: '#000000',
     onBackground: '#ffffff',
-    // Outline
-    outline: 'rgba(84, 84, 88, 0.65)',
+    // Outline — see the light-scheme note. Composited over the dark frosted
+    // surface the original rgba(84, 84, 88, 0.65) measured 1.70:1; lightening the
+    // hue clears 3:1 while staying translucent (#2322).
+    outline: 'rgba(160, 160, 166, 0.8)',
     outlineVariant: 'rgba(84, 84, 88, 0.35)',
     // Inverse
     inverseSurface: '#f2f2f7',

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/smrt/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,KAAK,EAIV,KAAK,EAEN,MAAM,aAAa,CAAC;AAsTrB;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/smrt/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,KAAK,EAIV,KAAK,EAEN,MAAM,aAAa,CAAC;AA4TrB;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/themes/smrt/index.js

@@ -68,7 +68,11 @@ const lightColors = {
     background: '#edeff2',
     onBackground: '#14171c',
     // Outline - Hairline / line greys
-    outline: '#c6ccd4',
+    // Boundary role: clears 3:1 non-text on every surface in this scheme so
+    // control borders are perceivable (WCAG 1.4.11). Was #c6ccd4 (1.29–1.62:1),
+    // which read as a divider, not a boundary (#2322). outlineVariant below
+    // remains the hairline for dividers, readout rows, and panel edges.
+    outline: '#7c7f85',
     outlineVariant: '#dfe3e8',
     // Inverse
     inverseSurface: '#14171c',
@@ -131,7 +135,9 @@ const darkColors = {
     background: '#0b0c0e',
     onBackground: '#c9cdd3',
     // Outline - Line / hairline strokes
-    outline: '#333842',
+    // See the light-scheme note: boundary role, 3:1 on every dark surface.
+    // Was #333842 (1.23–1.57:1).
+    outline: '#70747b',
     outlineVariant: '#23272e',
     // Inverse
     inverseSurface: '#edeff2',

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;AAiSrB;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAazB,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;AAqSrB;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAazB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/themes/studio/index.js

@@ -57,7 +57,11 @@ const lightColors = {
     background: '#ffffff',
     onBackground: '#202124',
     // Outline - Light gray borders
-    outline: '#dadce0',
+    // Boundary role: must clear 3:1 non-text on every surface in this scheme so
+    // control borders are perceivable (WCAG 1.4.11). Was #dadce0, a divider-weight
+    // grey measuring 1.21–1.37:1 — invisible as a control boundary (#2322).
+    // outlineVariant below stays the quiet hairline for dividers and panels.
+    outline: '#78797b',
     outlineVariant: '#e8eaed',
     // Inverse
     inverseSurface: '#3c4043',
@@ -118,7 +122,7 @@ const darkColors = {
     background: '#0e0e0e',
     onBackground: '#e8eaed',
     // Outline
-    outline: '#5f6368',
+    outline: '#8c8e92',
     outlineVariant: '#3c4043',
     // Inverse
     inverseSurface: '#e8eaed',