@ngxsmk/theme 1.3.1 → 2.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 } from '@angular/core';
 
 /**
  * Design token model for the NGXSMK universal theme engine.
@@ -10,7 +10,7 @@ import { inject, signal, computed, effect, Injectable } from '@angular/core';
  * SCSS/Tailwind/JSON exporters build on the same model).
  */
 
-function hexToHsl(hex) {
+function hexToRgb(hex) {
     const value = hex.replace('#', '');
     const full = value.length === 3
         ? value
@@ -24,90 +24,80 @@ function hexToHsl(hex) {
     const r = parseInt(full.slice(0, 2), 16) / 255;
     const g = parseInt(full.slice(2, 4), 16) / 255;
     const b = parseInt(full.slice(4, 6), 16) / 255;
-    const max = Math.max(r, g, b);
-    const min = Math.min(r, g, b);
-    const delta = max - min;
-    const l = (max + min) / 2;
-    let h = 0;
-    let s = 0;
-    if (delta !== 0) {
-        s = delta / (1 - Math.abs(2 * l - 1));
-        switch (max) {
-            case r:
-                h = 60 * (((g - b) / delta) % 6);
-                break;
-            case g:
-                h = 60 * ((b - r) / delta + 2);
-                break;
-            default:
-                h = 60 * ((r - g) / delta + 4);
-        }
-    }
+    return { r, g, b };
+}
+function srgbToLinear(c) {
+    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+function linearToSrgb(c) {
+    return c <= 0.0031308 ? c * 12.92 : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+}
+function hexToOklch(hex) {
+    const { r: sr, g: sg, b: sb } = hexToRgb(hex);
+    const r = srgbToLinear(sr);
+    const g = srgbToLinear(sg);
+    const b = srgbToLinear(sb);
+    const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
+    const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
+    const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+    const l_ = Math.cbrt(l);
+    const m_ = Math.cbrt(m);
+    const s_ = Math.cbrt(s);
+    const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
+    const a = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
+    const b_ = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
+    const C = Math.sqrt(a * a + b_ * b_);
+    let h = (Math.atan2(b_, a) * 180) / Math.PI;
     if (h < 0)
         h += 360;
-    return { h, s: s * 100, l: l * 100 };
+    return { l: L, c: C, h };
 }
-function hslToHex({ h, s, l }) {
-    const sn = s / 100;
-    const ln = l / 100;
-    const c = (1 - Math.abs(2 * ln - 1)) * sn;
-    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
-    const m = ln - c / 2;
-    let rgb;
-    if (h < 60)
-        rgb = [c, x, 0];
-    else if (h < 120)
-        rgb = [x, c, 0];
-    else if (h < 180)
-        rgb = [0, c, x];
-    else if (h < 240)
-        rgb = [0, x, c];
-    else if (h < 300)
-        rgb = [x, 0, c];
-    else
-        rgb = [c, 0, x];
-    const toHex = (v) => Math.round((v + m) * 255)
-        .toString(16)
-        .padStart(2, '0');
-    return `#${toHex(rgb[0])}${toHex(rgb[1])}${toHex(rgb[2])}`.toUpperCase();
+function oklchToHex({ l: L, c: C, h }) {
+    const hRad = (h * Math.PI) / 180;
+    const a = C * Math.cos(hRad);
+    const b_ = C * Math.sin(hRad);
+    const l_ = L + 0.3963377774 * a + 0.2158037573 * b_;
+    const m_ = L - 0.1055613458 * a - 0.0638541728 * b_;
+    const s_ = L - 0.0894841775 * a - 1.291485548 * b_;
+    const l = l_ * l_ * l_;
+    const m = m_ * m_ * m_;
+    const s = s_ * s_ * s_;
+    const r = +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+    const g = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+    const b = -0.0041960863 * l - 0.7034186148 * m + 1.707614701 * s;
+    const rClamped = Math.min(255, Math.max(0, Math.round(linearToSrgb(r) * 255)));
+    const gClamped = Math.min(255, Math.max(0, Math.round(linearToSrgb(g) * 255)));
+    const bClamped = Math.min(255, Math.max(0, Math.round(linearToSrgb(b) * 255)));
+    const toHex = (v) => v.toString(16).padStart(2, '0');
+    return `#${toHex(rClamped)}${toHex(gClamped)}${toHex(bClamped)}`.toUpperCase();
 }
-/** Shift a color's lightness by `delta` percentage points (clamped 0–100). */
+/** Shift a color's lightness by `delta` (clamped 0–1). */
 function shiftLightness(hex, delta) {
-    const hsl = hexToHsl(hex);
-    return hslToHex({ ...hsl, l: Math.min(100, Math.max(0, hsl.l + delta)) });
+    const oklch = hexToOklch(hex);
+    return oklchToHex({ ...oklch, l: Math.min(1.0, Math.max(0.0, oklch.l + delta)) });
 }
-/** Rotate a color's hue by `degrees`, keeping saturation and lightness. */
+/** Rotate a color's hue by `degrees`, keeping chroma and lightness. */
 function rotateHue(hex, degrees) {
-    const hsl = hexToHsl(hex);
-    return hslToHex({ ...hsl, h: (((hsl.h + degrees) % 360) + 360) % 360 });
+    const oklch = hexToOklch(hex);
+    return oklchToHex({ ...oklch, h: (((oklch.h + degrees) % 360) + 360) % 360 });
 }
-/**
- * Lightness stops for each scale step. Tuned so that step 500/600 stays close
- * to typical brand-color lightness and the extremes remain usable as tinted
- * backgrounds (50–100) and readable text (900–950).
- */
+/** Lightness stops for each scale step in OKLCH (0–1). */
 const LIGHTNESS_STOPS = {
-    50: 97,
-    100: 94,
-    200: 87,
-    300: 78,
-    400: 66,
-    500: 56,
-    600: 48,
-    700: 40,
-    800: 32,
-    900: 25,
-    950: 16,
+    50: 0.97,
+    100: 0.94,
+    200: 0.87,
+    300: 0.78,
+    400: 0.66,
+    500: 0.56,
+    600: 0.48,
+    700: 0.4,
+    800: 0.32,
+    900: 0.25,
+    950: 0.16,
 };
-/**
- * Derive a full 50–950 color scale from a single brand hex.
- *
- * The input color keeps its exact value at the step whose lightness stop is
- * nearest to the input's own lightness, so `scale[step]` round-trips brand
- * colors instead of shifting them.
- */
+/** Derive a full 50–950 color scale from a single brand hex. */
 function deriveScale(baseHex) {
-    const base = hexToHsl(baseHex);
+    const base = hexToOklch(baseHex);
     let nearest = 500;
     let nearestDelta = Number.POSITIVE_INFINITY;
     for (const [step, stop] of Object.entries(LIGHTNESS_STOPS)) {
@@ -120,7 +110,14 @@ function deriveScale(baseHex) {
     const scale = {};
     for (const [step, stop] of Object.entries(LIGHTNESS_STOPS)) {
         const key = Number(step);
-        scale[key] = key === nearest ? hslToHex(base) : hslToHex({ h: base.h, s: base.s, l: stop });
+        if (key === nearest) {
+            scale[key] = oklchToHex(base);
+        }
+        else {
+            // Perceptually scale chroma using a sine taper so that extremes (50/950) don't clip/saturate unnaturally.
+            const scaleChroma = base.c * Math.sin(Math.PI * stop);
+            scale[key] = oklchToHex({ l: stop, c: scaleChroma, h: base.h });
+        }
     }
     return scale;
 }
@@ -151,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: {
@@ -216,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',
@@ -342,51 +353,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)',
@@ -394,6 +388,74 @@ 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)',
+        // 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;
@@ -407,6 +469,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;
     }
@@ -479,6 +547,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];
@@ -533,6 +614,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];
@@ -661,19 +754,174 @@ const presets = {
     rose: rosePreset,
 };
 
-const STORAGE_KEY = 'ngxsmk-theme-mode';
+/**
+ * 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.
+ *
+ * This adapter produces the subset Ionic needs for theming.
+ */
+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);
+        }
+        // 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;
+    },
+};
+/** Default NGXSMK adapter — emits `--ngxsmk-*` variables. */
+const cssVarsAdapter = {
+    name: 'ngxsmk',
+    vars: () => ({}), // Not used directly — buildThemeCss handles this
+};
+// ─── 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);
+    return `${r}, ${g}, ${b}`;
+}
+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);
+    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')}`;
+}
+
 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);
+        }
+        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 vars = ionicVarsAdapter.vars(resolved);
+        style.textContent = this.buildAdapterCss('ionic', vars);
+    }
+    /** 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) {
+        const lines = Object.entries(vars).map(([k, v]) => `  ${k}: ${v};`);
+        return `/* @ngxsmk/theme — ${adapterName} adapter */\n:root {\n${lines.join('\n')}\n}`;
+    }
+    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());
@@ -696,23 +944,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 {
@@ -745,5 +991,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, hexToHsl, hslToHex, neutralPreset, 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, SHADOW, SPACING, TRACKING, Z_INDEX, buildThemeCss, cssVarsAdapter, defineConfig, deriveScale, emeraldPreset, hexToOklch, ionicVarsAdapter, neutralPreset, oklchToHex, presets, resolveTheme, rosePreset, rotateHue, shiftLightness, violetPreset };
 //# sourceMappingURL=ngxsmk-theme.mjs.map