@ngxsmk/theme 1.3.2 → 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, signal, computed, effect, Injectable } from '@angular/core';
+import { inject, Injectable, signal, computed, effect, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER } from '@angular/core';
 
 /**
  * Design token model for the NGXSMK universal theme engine.
@@ -148,7 +148,7 @@ const DEFAULT_SEMANTIC = {
 };
 const DEFAULT_FONT_FAMILY = {
     sans: "'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif",
-    mono: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace",
+    mono: "'Geist Mono', 'Geist Mono Fallback', monospace",
 };
 const DEFAULT_TYPOGRAPHY = {
     display: {
@@ -213,6 +213,20 @@ const TRACKING = {
     normal: '0',
     wide: '0.08em',
 };
+/** Font-weight tokens — standalone scale for direct use outside typography presets. */
+const FONT_WEIGHT = {
+    regular: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700',
+};
+/** Line-height tokens — unitless multipliers for flexible leading control. */
+const LEADING = {
+    none: '1',
+    tight: '1.25',
+    normal: '1.5',
+    relaxed: '1.625',
+};
 const SPACING = {
     '0': '0px',
     '0-5': '0.125rem',
@@ -289,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:
@@ -339,51 +362,34 @@ function scaleVars(prefix, scale) {
     }
     return vars;
 }
-/** Tokens that do not change between light and dark mode. */
-function staticVars(theme) {
-    const vars = {
-        ...scaleVars('brand', theme.brand),
-        ...scaleVars('secondary', theme.secondary),
-        ...scaleVars('neutral', theme.neutral),
-        '--ngxsmk-font-sans': theme.fontFamily.sans,
-        '--ngxsmk-font-mono': theme.fontFamily.mono,
-        '--ngxsmk-radius-base': theme.radius[theme.radiusBase],
-        '--ngxsmk-control-height': CONTROL_HEIGHT,
-        // Motion Tokens
-        '--ngxsmk-motion-duration': 'var(--ngxsmk-duration-normal)',
-        '--ngxsmk-motion-ease': 'var(--ngxsmk-ease-in-out)',
-        // Interactive-state motion: shared lift/press transforms. Neutralized to
-        // `none` under prefers-reduced-motion (see buildThemeCss).
-        '--ngxsmk-hover-lift': 'translateY(-1px)',
-        '--ngxsmk-press-scale': 'scale(0.98)',
-        // Focus ring: THE focus indicator for every component. Aliases the
-        // mode-aware --ngxsmk-shadow-focus; the error variant derives from the
-        // semantic error role so invalid controls ring red in both modes.
-        '--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)',
-        // Component-specific Tokens (Buttons)
+/** Default CSS custom properties for each component, emitted once in :root. */
+const COMPONENT_TOKEN_DEFAULTS = {
+    button: {
         '--ngxsmk-button-bg': 'var(--ngxsmk-color-primary)',
         '--ngxsmk-button-color': 'var(--ngxsmk-color-on-primary)',
         '--ngxsmk-button-font-family': 'var(--ngxsmk-font-sans)',
         '--ngxsmk-button-font-weight': '500',
         '--ngxsmk-button-radius': 'var(--ngxsmk-radius-base)',
         '--ngxsmk-button-disabled-opacity': '0.5',
-        // Component-specific Tokens (Cards)
+    },
+    card: {
         '--ngxsmk-card-bg': 'var(--ngxsmk-color-surface)',
         '--ngxsmk-card-radius': 'var(--ngxsmk-radius-xl)',
         '--ngxsmk-card-shadow': 'var(--ngxsmk-shadow-sm)',
         '--ngxsmk-card-border-color': 'var(--ngxsmk-color-outline)',
-        // Component-specific Tokens (Accordion)
+    },
+    accordion: {
         '--ngxsmk-accordion-bg': 'var(--ngxsmk-color-surface)',
         '--ngxsmk-accordion-radius': 'var(--ngxsmk-radius-lg)',
         '--ngxsmk-accordion-border-color': 'var(--ngxsmk-color-outline)',
-        // Component-specific Tokens (Progress)
+    },
+    progress: {
         '--ngxsmk-progress-height': '0.5rem',
         '--ngxsmk-progress-bg': 'var(--ngxsmk-color-surface-variant)',
         '--ngxsmk-progress-color': 'var(--ngxsmk-color-primary)',
         '--ngxsmk-progress-radius': 'var(--ngxsmk-radius-full)',
-        // Component-specific Tokens (Switch)
+    },
+    switch: {
         '--ngxsmk-switch-width': '2.25rem',
         '--ngxsmk-switch-height': '1.25rem',
         '--ngxsmk-switch-radius': 'var(--ngxsmk-radius-full)',
@@ -391,6 +397,80 @@ function staticVars(theme) {
         '--ngxsmk-switch-thumb-size': '0.875rem',
         '--ngxsmk-switch-thumb-bg': 'var(--ngxsmk-color-surface)',
         '--ngxsmk-switch-checked-bg': 'var(--ngxsmk-color-primary)',
+    },
+    spreadsheet: {
+        '--ngxsmk-spreadsheet-bg': 'var(--ngxsmk-color-surface)',
+        '--ngxsmk-spreadsheet-header-bg': 'var(--ngxsmk-color-surface-variant)',
+        '--ngxsmk-spreadsheet-header-color': 'var(--ngxsmk-color-on-surface-variant)',
+        '--ngxsmk-spreadsheet-border': 'var(--ngxsmk-color-outline)',
+        '--ngxsmk-spreadsheet-grid-color': 'var(--ngxsmk-color-outline-variant)',
+        '--ngxsmk-spreadsheet-hover-bg': 'var(--ngxsmk-color-surface-hover)',
+        '--ngxsmk-spreadsheet-selected-bg': 'color-mix(in srgb, var(--ngxsmk-color-primary) 12%, transparent)',
+        '--ngxsmk-spreadsheet-active-border': 'var(--ngxsmk-color-primary)',
+        '--ngxsmk-spreadsheet-font': 'var(--ngxsmk-font-sans)',
+        '--ngxsmk-spreadsheet-font-mono': 'var(--ngxsmk-font-mono)',
+        '--ngxsmk-spreadsheet-row-height': '2.25rem',
+        '--ngxsmk-spreadsheet-header-height': '2.5rem',
+        '--ngxsmk-spreadsheet-cell-padding': '6px 10px',
+        '--ngxsmk-spreadsheet-cell-font-size': 'var(--ngxsmk-text-body-sm-size)',
+        '--ngxsmk-spreadsheet-scrollbar-size': '8px',
+        '--ngxsmk-spreadsheet-shadow': 'var(--ngxsmk-shadow-sm)',
+        '--ngxsmk-spreadsheet-radius': 'var(--ngxsmk-radius-lg)',
+        '--ngxsmk-spreadsheet-edit-bg': 'var(--ngxsmk-color-surface)',
+        '--ngxsmk-spreadsheet-edit-border': 'var(--ngxsmk-color-primary)',
+        '--ngxsmk-spreadsheet-row-hover-bg': 'var(--ngxsmk-color-surface-hover)',
+        '--ngxsmk-spreadsheet-col-hover-bg': 'color-mix(in srgb, var(--ngxsmk-color-primary) 6%, transparent)',
+        '--ngxsmk-spreadsheet-frozen-shadow': '2px 0 4px rgba(0,0,0,0.08)',
+        '--ngxsmk-spreadsheet-selection-range': 'color-mix(in srgb, var(--ngxsmk-color-primary) 8%, transparent)',
+    },
+    inputGroup: {
+        '--ngxsmk-input-group-bg': 'var(--ngxsmk-color-surface)',
+        '--ngxsmk-input-group-border': 'var(--ngxsmk-color-outline-strong)',
+        '--ngxsmk-input-group-radius': 'var(--ngxsmk-radius-md)',
+        '--ngxsmk-input-group-shadow': 'none',
+        '--ngxsmk-input-group-focus-border': 'var(--ngxsmk-color-primary)',
+        '--ngxsmk-input-group-focus-shadow': '0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-primary) 15%, transparent)',
+        '--ngxsmk-input-group-error-border': 'var(--ngxsmk-color-error)',
+        '--ngxsmk-input-group-error-focus-shadow': '0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-error) 15%, transparent)',
+        '--ngxsmk-input-group-success-border': 'var(--ngxsmk-color-success)',
+        '--ngxsmk-input-group-warning-border': 'var(--ngxsmk-color-warning)',
+        '--ngxsmk-input-group-height': '2.5rem',
+        '--ngxsmk-input-group-padding': '0.75rem',
+        '--ngxsmk-input-group-gap': 'var(--ngxsmk-space-2)',
+        '--ngxsmk-input-group-font': 'var(--ngxsmk-font-sans)',
+    },
+};
+/** Tokens that do not change between light and dark mode. */
+function staticVars(theme) {
+    const vars = {
+        ...scaleVars('brand', theme.brand),
+        ...scaleVars('secondary', theme.secondary),
+        ...scaleVars('neutral', theme.neutral),
+        '--ngxsmk-font-sans': theme.fontFamily.sans,
+        '--ngxsmk-font-mono': theme.fontFamily.mono,
+        '--ngxsmk-radius-base': theme.radius[theme.radiusBase],
+        '--ngxsmk-control-height': CONTROL_HEIGHT,
+        // Motion Tokens
+        '--ngxsmk-motion-duration': 'var(--ngxsmk-duration-normal)',
+        '--ngxsmk-motion-ease': 'var(--ngxsmk-ease-in-out)',
+        // Interactive-state motion: shared lift/press transforms. Neutralized to
+        // `none` under prefers-reduced-motion (see buildThemeCss).
+        '--ngxsmk-hover-lift': 'translateY(-1px)',
+        '--ngxsmk-press-scale': 'scale(0.98)',
+        // Focus ring: THE focus indicator for every component. Aliases the
+        // mode-aware --ngxsmk-shadow-focus; the error variant derives from the
+        // semantic error role so invalid controls ring red in both modes.
+        '--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 }), {}),
     };
     for (const [key, value] of Object.entries(CONTROL_HEIGHTS)) {
         vars[`--ngxsmk-control-height-${key}`] = value;
@@ -404,6 +484,12 @@ function staticVars(theme) {
     for (const [key, value] of Object.entries(TRACKING)) {
         vars[`--ngxsmk-tracking-${key}`] = value;
     }
+    for (const [key, value] of Object.entries(FONT_WEIGHT)) {
+        vars[`--ngxsmk-font-weight-${key}`] = value;
+    }
+    for (const [key, value] of Object.entries(LEADING)) {
+        vars[`--ngxsmk-leading-${key}`] = value;
+    }
     for (const [key, value] of Object.entries(theme.spacing)) {
         vars[`--ngxsmk-space-${key}`] = value;
     }
@@ -461,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],
@@ -476,6 +567,19 @@ function lightVars(theme) {
         '--ngxsmk-color-ring': theme.brandBase,
         '--ngxsmk-color-backdrop': 'rgb(1 18 40 / 0.4)',
         '--ngxsmk-shadow-focus': `0 0 0 2px ${theme.brand[100]}, 0 0 0 4px color-mix(in srgb, ${theme.brandBase} 45%, transparent)`,
+        // Categorical chart palette — a fixed 8-hue qualitative set (NOT derived
+        // from the brand, so adjacent series stay distinguishable across themes),
+        // stepped for the light surface. Validated for the light chart surface:
+        // CVD worst-adjacent ΔE 24.2, chroma/lightness in-band. Charts read these
+        // via getComputedStyle; consumers can override any slot to rebrand series.
+        '--ngxsmk-chart-1': '#2A78D6',
+        '--ngxsmk-chart-2': '#1BAF7A',
+        '--ngxsmk-chart-3': '#EDA100',
+        '--ngxsmk-chart-4': '#008300',
+        '--ngxsmk-chart-5': '#4A3AA7',
+        '--ngxsmk-chart-6': '#E34948',
+        '--ngxsmk-chart-7': '#E87BA4',
+        '--ngxsmk-chart-8': '#EB6834',
     };
     const tertiary = deriveScale(rotateHue(theme.brandBase, 64));
     vars['--ngxsmk-color-tertiary'] = tertiary[500];
@@ -515,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],
@@ -530,6 +639,18 @@ function darkVars(theme) {
         '--ngxsmk-color-ring': theme.brand[400],
         '--ngxsmk-color-backdrop': 'rgb(17 17 18 / 0.6)',
         '--ngxsmk-shadow-focus': `0 0 0 2px color-mix(in srgb, ${theme.brand[400]} 25%, transparent), 0 0 0 4px color-mix(in srgb, ${theme.brand[400]} 45%, transparent)`,
+        // Categorical chart palette — the same eight hues as light, re-stepped for
+        // the dark surface (not a different palette). Validated for the dark chart
+        // surface: all slots ≥ 3:1 contrast, CVD worst-adjacent ΔE 10.3 (floor band,
+        // relies on the legend/labels charts already render for secondary encoding).
+        '--ngxsmk-chart-1': '#3987E5',
+        '--ngxsmk-chart-2': '#199E70',
+        '--ngxsmk-chart-3': '#C98500',
+        '--ngxsmk-chart-4': '#008300',
+        '--ngxsmk-chart-5': '#9085E9',
+        '--ngxsmk-chart-6': '#E66767',
+        '--ngxsmk-chart-7': '#D55181',
+        '--ngxsmk-chart-8': '#D95926',
     };
     const tertiary = deriveScale(rotateHue(theme.brandBase, 64));
     vars['--ngxsmk-color-tertiary'] = tertiary[400];
@@ -658,19 +779,290 @@ const presets = {
     rose: rosePreset,
 };
 
-const STORAGE_KEY = 'ngxsmk-theme-mode';
+/**
+ * Maps NGXSMK semantic color roles to Ionic 7 & 8 color variable specifications.
+ *
+ * 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, options) {
+        if (options?.isDark) {
+            return this.darkVars ? this.darkVars(theme) : buildLightVars(theme);
+        }
+        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',
+    vars: () => ({}), // Not used directly — buildThemeCss handles this
+};
+// ─── Helpers ──────────────────────────────────────────────
+function hexToRgbStr(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;
+    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) {
+    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)));
+        b = Math.min(255, b + Math.round((255 - b) * (amount / 100)));
+    }
+    else {
+        const factor = 1 + amount / 100;
+        r = Math.max(0, Math.round(r * factor));
+        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')}`.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';
+const IONIC_STYLE_ID = 'ngxsmk-ionic-theme';
+/**
+ * Injects generated theme CSS into the document at runtime.
+ *
+ * Decoupled from dark-mode switching so consumers who only need
+ * token injection (e.g. the CLI theme-preview) don't pull in
+ * class-toggle / localStorage / matchMedia logic.
+ *
+ * SSR-safe: all DOM access goes through the injected document.
+ */
+class NgxThemeInjectorService {
+    constructor() {
+        this.document = inject(DOCUMENT);
+    }
+    /**
+     * Apply a theme at runtime. Generates token CSS from the config and swaps
+     * it into a dedicated `<style>` element, overriding the build-time theme.
+     *
+     * @param adapter Optional output adapter. Defaults to the standard NGXSMK
+     *   `--ngxsmk-*` CSS variables. Pass `ionicVarsAdapter` to also generate
+     *   `--ion-*` variables for Ionic components.
+     */
+    applyTheme(config, adapter) {
+        const head = this.document.head;
+        let style = this.document.getElementById(STYLE_ID);
+        if (!style) {
+            style = this.document.createElement('style');
+            style.id = STYLE_ID;
+            head?.appendChild(style);
+        }
+        let css = buildThemeCss(config);
+        if (adapter) {
+            const resolved = resolveTheme(config);
+            const platformVars = adapter.vars(resolved);
+            css += '\n' + this.buildAdapterCss(adapter.name, platformVars);
+        }
+        if (style) {
+            style.textContent = css;
+        }
+    }
+    /**
+     * Apply Ionic-specific token variables alongside the standard NGXSMK theme.
+     * Generates `--ion-*` variables derived from the same `ThemeConfig`.
+     */
+    applyIonicTheme(config) {
+        const head = this.document.head;
+        let style = this.document.getElementById(IONIC_STYLE_ID);
+        if (!style) {
+            style = this.document.createElement('style');
+            style.id = IONIC_STYLE_ID;
+            head?.appendChild(style);
+        }
+        const resolved = resolveTheme(config);
+        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() {
+        this.document.getElementById(STYLE_ID)?.remove();
+    }
+    /** Remove the Ionic adapter stylesheet. */
+    clearIonicTheme() {
+        this.document.getElementById(IONIC_STYLE_ID)?.remove();
+    }
+    buildAdapterCss(adapterName, vars, darkVars) {
+        const lines = Object.entries(vars).map(([k, v]) => `  ${k}: ${v};`);
+        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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: NgxThemeInjectorService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const STORAGE_KEY = 'ngxsmk-theme-mode';
 /**
  * Runtime theme control: dark-mode switching (class strategy) and dynamic
  * theme application by injecting generated token CSS into the document.
  *
+ * CSS injection is delegated to {@link NgxThemeInjectorService} for
+ * consumers who only need token injection without dark-mode logic.
+ *
  * SSR-safe: all DOM access goes through the injected document and degrades
  * gracefully when `window`/`matchMedia` are unavailable.
  */
 class NgxsmkThemeService {
     constructor() {
-        // Inject DOCUMENT first so that restoreMode() and matchSystemDark()
-        // can safely access it when the signals are initialised below.
+        this.injector = inject(NgxThemeInjectorService);
         this.document = inject(DOCUMENT);
         this.mode = signal(this.restoreMode());
         this.systemDark = signal(this.matchSystemDark());
@@ -693,23 +1085,21 @@ class NgxsmkThemeService {
     toggle() {
         this.setMode(this.isDark() ? 'light' : 'dark');
     }
-    /**
-     * Apply a theme at runtime. Generates token CSS from the config and swaps
-     * it into a dedicated `<style>` element, overriding the build-time theme.
-     */
-    applyTheme(config) {
-        const head = this.document.head;
-        let style = this.document.getElementById(STYLE_ID);
-        if (!style) {
-            style = this.document.createElement('style');
-            style.id = STYLE_ID;
-            head.appendChild(style);
-        }
-        style.textContent = buildThemeCss(config);
+    /** @see NgxThemeInjectorService.applyTheme */
+    applyTheme(config, adapter) {
+        this.injector.applyTheme(config, adapter);
     }
-    /** Remove a runtime-applied theme, falling back to the build-time CSS. */
+    /** @see NgxThemeInjectorService.applyIonicTheme */
+    applyIonicTheme(config) {
+        this.injector.applyIonicTheme(config);
+    }
+    /** @see NgxThemeInjectorService.clearTheme */
     clearTheme() {
-        this.document.getElementById(STYLE_ID)?.remove();
+        this.injector.clearTheme();
+    }
+    /** @see NgxThemeInjectorService.clearIonicTheme */
+    clearIonicTheme() {
+        this.injector.clearIonicTheme();
     }
     restoreMode() {
         try {
@@ -734,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
  */
@@ -742,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, ICON_SIZE, NgxsmkThemeService, OPACITY, RADIUS, SHADOW, SPACING, TRACKING, Z_INDEX, buildThemeCss, defineConfig, deriveScale, emeraldPreset, hexToOklch, 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