@ngxsmk/theme 2.0.0 → 3.0.0

package/fesm2022/ngxsmk-theme.mjs

@@ -1,6 +1,6 @@
 import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Injectable, signal, computed, effect } from '@angular/core';
+import { inject, Injectable, signal, computed, effect, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER } from '@angular/core';
 
 /**
  * Design token model for the NGXSMK universal theme engine.
@@ -303,6 +303,15 @@ const EASING = {
     'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
     emphasized: 'cubic-bezier(0.2, 0, 0, 1)',
 };
+/** Safe-area inset defaults (fallback to CSS env() variables for iOS/Android/Ionic). */
+const SAFE_AREA = {
+    top: 'env(safe-area-inset-top, 0px)',
+    bottom: 'env(safe-area-inset-bottom, 0px)',
+    left: 'env(safe-area-inset-left, 0px)',
+    right: 'env(safe-area-inset-right, 0px)',
+};
+/** Minimum touch target size for mobile accessibility (Apple HIG & Android Material). */
+const TOUCH_TARGET_MIN = '44px';
 
 /**
  * Identity helper that gives `ngxsmk.config.ts` files full type inference:
@@ -454,6 +463,12 @@ function staticVars(theme) {
         '--ngxsmk-focus-ring': 'var(--ngxsmk-shadow-focus)',
         '--ngxsmk-focus-ring-error': '0 0 0 2px color-mix(in srgb, var(--ngxsmk-color-error) 15%, transparent), ' +
             '0 0 0 4px color-mix(in srgb, var(--ngxsmk-color-error) 45%, transparent)',
+        // Mobile viewport & safe-area tokens (iOS / Android / Ionic)
+        '--ngxsmk-safe-area-top': 'env(safe-area-inset-top, 0px)',
+        '--ngxsmk-safe-area-bottom': 'env(safe-area-inset-bottom, 0px)',
+        '--ngxsmk-safe-area-left': 'env(safe-area-inset-left, 0px)',
+        '--ngxsmk-safe-area-right': 'env(safe-area-inset-right, 0px)',
+        '--ngxsmk-touch-target-min': '44px',
         // Component-specific token defaults
         ...Object.values(COMPONENT_TOKEN_DEFAULTS).reduce((merged, tokens) => ({ ...merged, ...tokens }), {}),
     };
@@ -532,12 +547,17 @@ function lightVars(theme) {
         '--ngxsmk-color-on-surface': '#0A1317',
         '--ngxsmk-color-surface-variant': theme.neutral[100],
         '--ngxsmk-color-on-surface-variant': theme.neutral[500],
+        '--ngxsmk-color-surface-muted': theme.neutral[50],
+        '--ngxsmk-color-surface-elevated': '#FFFFFF',
+        '--ngxsmk-color-surface-overlay': '#FFFFFF',
+        '--ngxsmk-color-on-surface-muted': theme.neutral[400],
         '--ngxsmk-color-surface-hover': 'rgb(5 54 89 / 0.05)',
         '--ngxsmk-color-surface-active': 'rgb(5 54 89 / 0.1)',
         '--ngxsmk-color-surface-container': '#FFFFFF',
         '--ngxsmk-color-outline': 'rgb(5 54 89 / 0.1)',
         '--ngxsmk-color-outline-strong': theme.neutral[200],
         '--ngxsmk-color-outline-variant': 'rgb(5 54 89 / 0.06)',
+        '--ngxsmk-color-outline-subtle': 'rgb(5 54 89 / 0.05)',
         // Elevation ladder
         '--ngxsmk-color-surface-1': '#FFFFFF',
         '--ngxsmk-color-surface-2': theme.neutral[50],
@@ -599,12 +619,17 @@ function darkVars(theme) {
         '--ngxsmk-color-on-surface': '#DFE2E5',
         '--ngxsmk-color-surface-variant': '#28292C',
         '--ngxsmk-color-on-surface-variant': '#AAAFB5',
+        '--ngxsmk-color-surface-muted': '#141416',
+        '--ngxsmk-color-surface-elevated': '#28292C',
+        '--ngxsmk-color-surface-overlay': '#2F3136',
+        '--ngxsmk-color-on-surface-muted': '#777C85',
         '--ngxsmk-color-surface-hover': 'rgb(255 255 255 / 0.05)',
         '--ngxsmk-color-surface-active': 'rgb(255 255 255 / 0.1)',
         '--ngxsmk-color-surface-container': '#28292C',
         '--ngxsmk-color-outline': 'rgb(242 244 246 / 0.1)',
         '--ngxsmk-color-outline-strong': '#494D53',
         '--ngxsmk-color-outline-variant': 'rgb(242 244 246 / 0.06)',
+        '--ngxsmk-color-outline-subtle': 'rgb(242 244 246 / 0.05)',
         // Elevation ladder
         '--ngxsmk-color-surface-1': theme.neutral[800],
         '--ngxsmk-color-surface-2': theme.neutral[700],
@@ -755,51 +780,127 @@ const presets = {
 };
 
 /**
- * Maps NGXSMK semantic color roles to Ionic's color variable namespace.
- *
- * Ionic expects:
- *   --ion-color-primary, --ion-color-primary-rgb, --ion-color-primary-shade,
- *   --ion-color-primary-tint, --ion-color-secondary, etc.
+ * Maps NGXSMK semantic color roles to Ionic 7 & 8 color variable specifications.
  *
- * This adapter produces the subset Ionic needs for theming.
+ * Emits full color suites (base, rgb, contrast, contrast-rgb, shade, tint),
+ * 19-step contrast ladder (--ion-color-step-50..950), safe area mappings, and
+ * surface variables for seamless Ionic framework interoperability.
  */
 const ionicVarsAdapter = {
     name: 'ionic',
-    vars(theme) {
-        const vars = {};
-        // Primary
-        vars['--ion-color-primary'] = theme.brandBase;
-        vars['--ion-color-primary-rgb'] = hexToRgbStr(theme.brandBase);
-        vars['--ion-color-primary-shade'] = shiftLightnessHex(theme.brandBase, -14);
-        vars['--ion-color-primary-tint'] = shiftLightnessHex(theme.brandBase, 8);
-        // Secondary
-        vars['--ion-color-secondary'] = theme.secondaryBase;
-        vars['--ion-color-secondary-rgb'] = hexToRgbStr(theme.secondaryBase);
-        vars['--ion-color-secondary-shade'] = shiftLightnessHex(theme.secondaryBase, -14);
-        vars['--ion-color-secondary-tint'] = shiftLightnessHex(theme.secondaryBase, 8);
-        // Tertiary (derived from brand hue + 64)
-        const tertiary = deriveScale(rotateHue(theme.brandBase, 64));
-        vars['--ion-color-tertiary'] = tertiary[500];
-        vars['--ion-color-tertiary-rgb'] = hexToRgbStr(tertiary[500]);
-        vars['--ion-color-tertiary-shade'] = tertiary[600];
-        vars['--ion-color-tertiary-tint'] = tertiary[400];
-        // Semantic status colors
-        for (const [name, hex] of Object.entries(theme.semantic)) {
-            vars[`--ion-color-${name}`] = hex;
-            vars[`--ion-color-${name}-rgb`] = hexToRgbStr(hex);
+    vars(theme, options) {
+        if (options?.isDark) {
+            return this.darkVars ? this.darkVars(theme) : buildLightVars(theme);
         }
-        // Background / surface
-        vars['--ion-background-color'] = theme.neutral[50];
-        vars['--ion-background-color-rgb'] = hexToRgbStr(theme.neutral[50]);
-        vars['--ion-text-color'] = '#0A1317';
-        vars['--ion-text-color-rgb'] = '10, 19, 23';
-        // Typography
-        vars['--ion-font-family'] = theme.fontFamily.sans;
-        // Border radius (Ionic uses --ion-border-radius)
-        vars['--ion-border-radius'] = theme.radius[theme.radiusBase];
-        return vars;
+        return buildLightVars(theme);
+    },
+    darkVars(theme) {
+        return buildDarkVars(theme);
     },
 };
+function buildColorSuite(prefix, baseHex, vars) {
+    const contrastHex = getContrastHex(baseHex);
+    vars[`--ion-color-${prefix}`] = baseHex;
+    vars[`--ion-color-${prefix}-rgb`] = hexToRgbStr(baseHex);
+    vars[`--ion-color-${prefix}-contrast`] = contrastHex;
+    vars[`--ion-color-${prefix}-contrast-rgb`] = hexToRgbStr(contrastHex);
+    vars[`--ion-color-${prefix}-shade`] = shiftLightnessHex(baseHex, -12);
+    vars[`--ion-color-${prefix}-tint`] = shiftLightnessHex(baseHex, 10);
+}
+function buildLightVars(theme) {
+    const vars = {};
+    // Primary & Secondary
+    buildColorSuite('primary', theme.brandBase, vars);
+    buildColorSuite('secondary', theme.secondaryBase, vars);
+    // Tertiary (derived from brand hue + 64)
+    const tertiary = deriveScale(rotateHue(theme.brandBase, 64));
+    buildColorSuite('tertiary', tertiary[500], vars);
+    // Status & Feedback colors
+    const successHex = theme.semantic['success'] ?? '#0D8626';
+    const warningHex = theme.semantic['warning'] ?? '#E9AF08';
+    const dangerHex = theme.semantic['error'] ?? '#E3193B';
+    const infoHex = theme.semantic['info'] ?? '#2563EB';
+    buildColorSuite('success', successHex, vars);
+    buildColorSuite('warning', warningHex, vars);
+    buildColorSuite('danger', dangerHex, vars);
+    buildColorSuite('info', infoHex, vars);
+    // Medium / Light / Dark baseline scales
+    buildColorSuite('light', theme.neutral[100] ?? '#F1F4F7', vars);
+    buildColorSuite('medium', theme.neutral[500] ?? '#778593', vars);
+    buildColorSuite('dark', theme.neutral[900] ?? '#18181A', vars);
+    // Background / Surfaces
+    const bgHex = theme.neutral[50] ?? '#FFFFFF';
+    const textHex = '#0A1317';
+    vars['--ion-background-color'] = bgHex;
+    vars['--ion-background-color-rgb'] = hexToRgbStr(bgHex);
+    vars['--ion-text-color'] = textHex;
+    vars['--ion-text-color-rgb'] = hexToRgbStr(textHex);
+    vars['--ion-card-background'] = '#FFFFFF';
+    vars['--ion-item-background'] = '#FFFFFF';
+    vars['--ion-item-color'] = textHex;
+    vars['--ion-toolbar-background'] = bgHex;
+    vars['--ion-toolbar-color'] = textHex;
+    vars['--ion-tab-bar-background'] = '#FFFFFF';
+    vars['--ion-border-color'] = theme.neutral[200] ?? '#CCD3DB';
+    // Typography & Radius
+    vars['--ion-font-family'] = theme.fontFamily.sans;
+    vars['--ion-border-radius'] = theme.radius[theme.radiusBase];
+    // Stepped colors for light mode (interpolated between bg and text)
+    interpolateSteppedColors(bgHex, textHex, vars);
+    // Safe area insets
+    vars['--ion-safe-area-top'] = 'var(--ngxsmk-safe-area-top, env(safe-area-inset-top, 0px))';
+    vars['--ion-safe-area-bottom'] =
+        'var(--ngxsmk-safe-area-bottom, env(safe-area-inset-bottom, 0px))';
+    vars['--ion-safe-area-left'] = 'var(--ngxsmk-safe-area-left, env(safe-area-inset-left, 0px))';
+    vars['--ion-safe-area-right'] = 'var(--ngxsmk-safe-area-right, env(safe-area-inset-right, 0px))';
+    return vars;
+}
+function buildDarkVars(theme) {
+    const vars = {};
+    // Primary & Secondary dark adjustments
+    const primaryDark = theme.brand[400] ?? theme.brandBase;
+    const secondaryDark = theme.secondary[400] ?? theme.secondaryBase;
+    buildColorSuite('primary', primaryDark, vars);
+    buildColorSuite('secondary', secondaryDark, vars);
+    // Tertiary
+    const tertiary = deriveScale(rotateHue(theme.brandBase, 64));
+    buildColorSuite('tertiary', tertiary[400] ?? tertiary[500], vars);
+    // Status & Feedback
+    buildColorSuite('success', shiftLightnessHex(theme.semantic['success'] ?? '#0D8626', 10), vars);
+    buildColorSuite('warning', shiftLightnessHex(theme.semantic['warning'] ?? '#E9AF08', 8), vars);
+    buildColorSuite('danger', shiftLightnessHex(theme.semantic['error'] ?? '#E3193B', 10), vars);
+    buildColorSuite('info', shiftLightnessHex(theme.semantic['info'] ?? '#2563EB', 10), vars);
+    buildColorSuite('light', theme.neutral[800] ?? '#1F1F22', vars);
+    buildColorSuite('medium', theme.neutral[400] ?? '#778593', vars);
+    buildColorSuite('dark', theme.neutral[100] ?? '#F1F4F7', vars);
+    // Dark backgrounds & surfaces
+    const darkBgHex = '#111112';
+    const darkTextHex = '#DFE2E5';
+    const darkSurface = '#1F1F22';
+    vars['--ion-background-color'] = darkBgHex;
+    vars['--ion-background-color-rgb'] = hexToRgbStr(darkBgHex);
+    vars['--ion-text-color'] = darkTextHex;
+    vars['--ion-text-color-rgb'] = hexToRgbStr(darkTextHex);
+    vars['--ion-card-background'] = darkSurface;
+    vars['--ion-item-background'] = darkSurface;
+    vars['--ion-item-color'] = darkTextHex;
+    vars['--ion-toolbar-background'] = '#18181A';
+    vars['--ion-toolbar-color'] = darkTextHex;
+    vars['--ion-tab-bar-background'] = '#18181A';
+    vars['--ion-border-color'] = 'rgba(242, 244, 246, 0.1)';
+    // Typography & Radius
+    vars['--ion-font-family'] = theme.fontFamily.sans;
+    vars['--ion-border-radius'] = theme.radius[theme.radiusBase];
+    // Stepped colors for dark mode
+    interpolateSteppedColors(darkBgHex, darkTextHex, vars);
+    // Safe area insets
+    vars['--ion-safe-area-top'] = 'var(--ngxsmk-safe-area-top, env(safe-area-inset-top, 0px))';
+    vars['--ion-safe-area-bottom'] =
+        'var(--ngxsmk-safe-area-bottom, env(safe-area-inset-bottom, 0px))';
+    vars['--ion-safe-area-left'] = 'var(--ngxsmk-safe-area-left, env(safe-area-inset-left, 0px))';
+    vars['--ion-safe-area-right'] = 'var(--ngxsmk-safe-area-right, env(safe-area-inset-right, 0px))';
+    return vars;
+}
 /** Default NGXSMK adapter — emits `--ngxsmk-*` variables. */
 const cssVarsAdapter = {
     name: 'ngxsmk',
@@ -807,18 +908,26 @@ const cssVarsAdapter = {
 };
 // ─── Helpers ──────────────────────────────────────────────
 function hexToRgbStr(hex) {
-    const h = hex.replace('#', '');
-    const r = parseInt(h.substring(0, 2), 16);
-    const g = parseInt(h.substring(2, 4), 16);
-    const b = parseInt(h.substring(4, 6), 16);
+    const clean = hex.replace('#', '');
+    const r = parseInt(clean.substring(0, 2), 16) || 0;
+    const g = parseInt(clean.substring(2, 4), 16) || 0;
+    const b = parseInt(clean.substring(4, 6), 16) || 0;
     return `${r}, ${g}, ${b}`;
 }
+function getContrastHex(hex) {
+    const clean = hex.replace('#', '');
+    const r = parseInt(clean.substring(0, 2), 16) || 0;
+    const g = parseInt(clean.substring(2, 4), 16) || 0;
+    const b = parseInt(clean.substring(4, 6), 16) || 0;
+    // Standard WCAG relative luminance approximation
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+    return yiq >= 150 ? '#000000' : '#FFFFFF';
+}
 function shiftLightnessHex(hex, amount) {
-    // Simple hex lightness shift — import from color.ts would be circular
-    const h = hex.replace('#', '');
-    let r = parseInt(h.substring(0, 2), 16);
-    let g = parseInt(h.substring(2, 4), 16);
-    let b = parseInt(h.substring(4, 6), 16);
+    const clean = hex.replace('#', '');
+    let r = parseInt(clean.substring(0, 2), 16) || 0;
+    let g = parseInt(clean.substring(2, 4), 16) || 0;
+    let b = parseInt(clean.substring(4, 6), 16) || 0;
     if (amount > 0) {
         r = Math.min(255, r + Math.round((255 - r) * (amount / 100)));
         g = Math.min(255, g + Math.round((255 - g) * (amount / 100)));
@@ -830,7 +939,28 @@ function shiftLightnessHex(hex, amount) {
         g = Math.max(0, Math.round(g * factor));
         b = Math.max(0, Math.round(b * factor));
     }
-    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`.toUpperCase();
+}
+function interpolateSteppedColors(bgHex, textHex, vars) {
+    const cleanBg = bgHex.replace('#', '');
+    const cleanText = textHex.replace('#', '');
+    const bgR = parseInt(cleanBg.substring(0, 2), 16) || 0;
+    const bgG = parseInt(cleanBg.substring(2, 4), 16) || 0;
+    const bgB = parseInt(cleanBg.substring(4, 6), 16) || 0;
+    const textR = parseInt(cleanText.substring(0, 2), 16) || 0;
+    const textG = parseInt(cleanText.substring(2, 4), 16) || 0;
+    const textB = parseInt(cleanText.substring(4, 6), 16) || 0;
+    const steps = [
+        50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950,
+    ];
+    for (const step of steps) {
+        const weight = step / 1000;
+        const r = Math.round(bgR * (1 - weight) + textR * weight);
+        const g = Math.round(bgG * (1 - weight) + textG * weight);
+        const b = Math.round(bgB * (1 - weight) + textB * weight);
+        const hex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`.toUpperCase();
+        vars[`--ion-color-step-${step}`] = hex;
+    }
 }
 
 const STYLE_ID = 'ngxsmk-theme';
@@ -862,7 +992,7 @@ class NgxThemeInjectorService {
         if (!style) {
             style = this.document.createElement('style');
             style.id = STYLE_ID;
-            head.appendChild(style);
+            head?.appendChild(style);
         }
         let css = buildThemeCss(config);
         if (adapter) {
@@ -870,7 +1000,9 @@ class NgxThemeInjectorService {
             const platformVars = adapter.vars(resolved);
             css += '\n' + this.buildAdapterCss(adapter.name, platformVars);
         }
-        style.textContent = css;
+        if (style) {
+            style.textContent = css;
+        }
     }
     /**
      * Apply Ionic-specific token variables alongside the standard NGXSMK theme.
@@ -882,11 +1014,14 @@ class NgxThemeInjectorService {
         if (!style) {
             style = this.document.createElement('style');
             style.id = IONIC_STYLE_ID;
-            head.appendChild(style);
+            head?.appendChild(style);
         }
         const resolved = resolveTheme(config);
-        const vars = ionicVarsAdapter.vars(resolved);
-        style.textContent = this.buildAdapterCss('ionic', vars);
+        const lightVars = ionicVarsAdapter.vars(resolved);
+        const darkVars = ionicVarsAdapter.darkVars ? ionicVarsAdapter.darkVars(resolved) : undefined;
+        if (style) {
+            style.textContent = this.buildAdapterCss('ionic', lightVars, darkVars);
+        }
     }
     /** Remove a runtime-applied theme, falling back to the build-time CSS. */
     clearTheme() {
@@ -896,9 +1031,15 @@ class NgxThemeInjectorService {
     clearIonicTheme() {
         this.document.getElementById(IONIC_STYLE_ID)?.remove();
     }
-    buildAdapterCss(adapterName, vars) {
+    buildAdapterCss(adapterName, vars, darkVars) {
         const lines = Object.entries(vars).map(([k, v]) => `  ${k}: ${v};`);
-        return `/* @ngxsmk/theme — ${adapterName} adapter */\n:root {\n${lines.join('\n')}\n}`;
+        let result = `/* @ngxsmk/theme — ${adapterName} adapter */\n:root {\n${lines.join('\n')}\n}`;
+        if (darkVars && Object.keys(darkVars).length > 0) {
+            const darkLines = Object.entries(darkVars).map(([k, v]) => `  ${k}: ${v};`);
+            result += `\n\n:root.dark, body.dark, html.dark, [data-theme="dark"] {\n${darkLines.join('\n')}\n}`;
+            result += `\n\n@media (prefers-color-scheme: dark) {\n  :root:not(.light) {\n  ${darkLines.join('\n  ')}\n  }\n}`;
+        }
+        return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: NgxThemeInjectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: NgxThemeInjectorService, providedIn: 'root' }); }
@@ -983,6 +1124,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+/**
+ * Standalone provider for Angular 18-22+ applications that automatically
+ * synchronizes NGXSMK design tokens with Ionic 7/8 CSS variables on startup.
+ *
+ * @example
+ * ```ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideIonicAngular(),
+ *     provideNgxsmkIonicTheme(),
+ *   ]
+ * };
+ * ```
+ */
+function provideNgxsmkIonicTheme(config) {
+    return makeEnvironmentProviders([
+        {
+            provide: ENVIRONMENT_INITIALIZER,
+            multi: true,
+            useValue: () => {
+                const theme = inject(NgxsmkThemeService);
+                theme.applyIonicTheme(config ?? violetPreset);
+            },
+        },
+    ]);
+}
+
 /*
  * Public API Surface of @ngxsmk/theme
  */
@@ -991,5 +1159,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CONTROL_HEIGHT, CONTROL_HEIGHTS, DEFAULT_FONT_FAMILY, DEFAULT_NEUTRAL, DEFAULT_SEMANTIC, DEFAULT_TYPOGRAPHY, DURATION, EASING, FONT_WEIGHT, ICON_SIZE, LEADING, NgxThemeInjectorService, NgxsmkThemeService, OPACITY, RADIUS, SHADOW, SPACING, TRACKING, Z_INDEX, buildThemeCss, cssVarsAdapter, defineConfig, deriveScale, emeraldPreset, hexToOklch, ionicVarsAdapter, neutralPreset, oklchToHex, presets, resolveTheme, rosePreset, rotateHue, shiftLightness, violetPreset };
+export { CONTROL_HEIGHT, CONTROL_HEIGHTS, DEFAULT_FONT_FAMILY, DEFAULT_NEUTRAL, DEFAULT_SEMANTIC, DEFAULT_TYPOGRAPHY, DURATION, EASING, FONT_WEIGHT, ICON_SIZE, LEADING, NgxThemeInjectorService, NgxsmkThemeService, OPACITY, RADIUS, SAFE_AREA, SHADOW, SPACING, TOUCH_TARGET_MIN, TRACKING, Z_INDEX, buildThemeCss, cssVarsAdapter, defineConfig, deriveScale, emeraldPreset, hexToOklch, ionicVarsAdapter, neutralPreset, oklchToHex, presets, provideNgxsmkIonicTheme, resolveTheme, rosePreset, rotateHue, shiftLightness, violetPreset };
 //# sourceMappingURL=ngxsmk-theme.mjs.map