@ngxsmk/theme 1.0.0

package/fesm2022/ngxsmk-theme.mjs

@@ -0,0 +1,678 @@
+import { DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, signal, computed, effect, Injectable } from '@angular/core';
+
+/**
+ * Design token model for the NGXSMK universal theme engine.
+ *
+ * A `ThemeConfig` is the single source of truth for a theme. The token
+ * engine transforms it into platform outputs (CSS custom properties today;
+ * SCSS/Tailwind/JSON exporters build on the same model).
+ */
+
+function hexToHsl(hex) {
+    const value = hex.replace('#', '');
+    const full = value.length === 3
+        ? value
+            .split('')
+            .map((c) => c + c)
+            .join('')
+        : value;
+    if (!/^[0-9a-fA-F]{6}$/.test(full)) {
+        throw new Error(`Invalid hex color: "${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);
+        }
+    }
+    if (h < 0)
+        h += 360;
+    return { h, s: s * 100, l: l * 100 };
+}
+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();
+}
+/** Shift a color's lightness by `delta` percentage points (clamped 0–100). */
+function shiftLightness(hex, delta) {
+    const hsl = hexToHsl(hex);
+    return hslToHex({ ...hsl, l: Math.min(100, Math.max(0, hsl.l + delta)) });
+}
+/** Rotate a color's hue by `degrees`, keeping saturation and lightness. */
+function rotateHue(hex, degrees) {
+    const hsl = hexToHsl(hex);
+    return hslToHex({ ...hsl, h: (((hsl.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).
+ */
+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,
+};
+/**
+ * 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.
+ */
+function deriveScale(baseHex) {
+    const base = hexToHsl(baseHex);
+    let nearest = 500;
+    let nearestDelta = Number.POSITIVE_INFINITY;
+    for (const [step, stop] of Object.entries(LIGHTNESS_STOPS)) {
+        const delta = Math.abs(stop - base.l);
+        if (delta < nearestDelta) {
+            nearestDelta = delta;
+            nearest = Number(step);
+        }
+    }
+    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 });
+    }
+    return scale;
+}
+
+/**
+ * Cool blue-grey neutral scale matching the Astryx (Meta) design language.
+ * Light steps carry a subtle blue tint; the darkest steps flatten toward
+ * a near-neutral charcoal so dark-mode surfaces read like Astryx's
+ * (#111112 body / #1F1F22 card) rather than a saturated navy.
+ */
+const DEFAULT_NEUTRAL = {
+    50: '#F1F4F7',
+    100: '#E4E9EE',
+    200: '#CCD3DB',
+    300: '#A4B0BC',
+    400: '#778593',
+    500: '#4E606F',
+    600: '#3A4650',
+    700: '#2A333B',
+    800: '#1F1F22',
+    900: '#18181A',
+    950: '#111112',
+};
+const DEFAULT_SEMANTIC = {
+    success: '#0D8626',
+    warning: '#E9AF08',
+    error: '#E3193B',
+    info: '#0064E0',
+};
+const DEFAULT_FONT_FAMILY = {
+    sans: "'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif",
+    mono: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace",
+};
+const DEFAULT_TYPOGRAPHY = {
+    display: {
+        large: { size: '3.5625rem', lineHeight: '4rem', weight: '700' },
+        medium: { size: '2.8125rem', lineHeight: '3.25rem', weight: '700' },
+        small: { size: '2.25rem', lineHeight: '2.75rem', weight: '700' },
+    },
+    headline: {
+        large: { size: '2rem', lineHeight: '2.5rem', weight: '600' },
+        medium: { size: '1.75rem', lineHeight: '2.25rem', weight: '600' },
+        small: { size: '1.5rem', lineHeight: '2rem', weight: '600' },
+    },
+    title: {
+        large: { size: '1.375rem', lineHeight: '1.75rem', weight: '600' },
+        medium: { size: '1.125rem', lineHeight: '1.5rem', weight: '600' },
+        small: { size: '1rem', lineHeight: '1.5rem', weight: '600' },
+    },
+    body: {
+        large: { size: '1rem', lineHeight: '1.5rem', weight: '400' },
+        medium: { size: '0.875rem', lineHeight: '1.25rem', weight: '400' },
+        small: { size: '0.75rem', lineHeight: '1rem', weight: '400' },
+    },
+    label: {
+        large: { size: '0.875rem', lineHeight: '1.25rem', weight: '500' },
+        medium: { size: '0.75rem', lineHeight: '1rem', weight: '500' },
+        small: { size: '0.6875rem', lineHeight: '1rem', weight: '500' },
+    },
+};
+/**
+ * Standard height for single-line text controls (input, select, number-input,
+ * combobox, input-group, power-search, multi-select). All controls in the
+ * family use this so they read as one consistent size.
+ */
+const CONTROL_HEIGHT = '2.5rem';
+const SPACING = {
+    '0': '0px',
+    '0-5': '0.125rem',
+    '1': '0.25rem',
+    '1-5': '0.375rem',
+    '2': '0.5rem',
+    '3': '0.75rem',
+    '4': '1rem',
+    '5': '1.25rem',
+    '6': '1.5rem',
+    '8': '2rem',
+    '10': '2.5rem',
+    '12': '3rem',
+    '16': '4rem',
+    '20': '5rem',
+    '24': '6rem',
+    '32': '8rem',
+};
+/**
+ * Astryx radius scale: inner 4px, element 8px (buttons/inputs, the base),
+ * container 12px (cards), then progressively larger through 28px "page"
+ * rounding. Deliberately generous — Astryx reads soft and rounded.
+ */
+const RADIUS = {
+    none: '0px',
+    sm: '0.25rem', // 4px  — inner (nested chips, checkboxes)
+    md: '0.5rem', // 8px  — element (buttons, inputs) — default base
+    lg: '0.75rem', // 12px — container (cards, popovers)
+    xl: '1rem', // 16px
+    '2xl': '1.25rem', // 20px
+    '3xl': '1.75rem', // 28px — page / hero surfaces
+    full: '9999px',
+};
+/**
+ * Soft, diffuse, layered shadows in the Astryx style (two stacked blurs,
+ * low alpha). Overlay CSS resolves these to slightly stronger values in
+ * dark mode via the elevation tokens on each surface.
+ */
+const SHADOW = {
+    sm: '0 1px 1px rgb(0 0 0 / 0.08), 0 2px 8px rgb(0 0 0 / 0.08)',
+    md: '0 1px 2px rgb(0 0 0 / 0.1), 0 2px 12px rgb(0 0 0 / 0.1)',
+    lg: '0 2px 2px rgb(0 0 0 / 0.1), 0 8px 24px rgb(0 0 0 / 0.12)',
+    xl: '0 4px 6px rgb(0 0 0 / 0.1), 0 12px 32px rgb(0 0 0 / 0.16)',
+    '2xl': '0 8px 12px rgb(0 0 0 / 0.14), 0 24px 48px rgb(0 0 0 / 0.22)',
+};
+/**
+ * Stacking ladder for overlay components. Anchored popups sit lowest;
+ * tooltips always win. Components must use these instead of ad-hoc values
+ * so overlays never fight each other.
+ */
+const Z_INDEX = {
+    dropdown: '1000',
+    sticky: '1100',
+    banner: '1200',
+    overlay: '1300',
+    modal: '1400',
+    popover: '1500',
+    toast: '1600',
+    tooltip: '1700',
+};
+const DURATION = {
+    instant: '0ms',
+    fast: '100ms',
+    normal: '200ms',
+    slow: '300ms',
+    slower: '500ms',
+};
+const EASING = {
+    linear: 'linear',
+    in: 'cubic-bezier(0.4, 0, 1, 1)',
+    out: 'cubic-bezier(0, 0, 0.2, 1)',
+    'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    emphasized: 'cubic-bezier(0.2, 0, 0, 1)',
+};
+
+/**
+ * Identity helper that gives `ngxsmk.config.ts` files full type inference:
+ *
+ * ```ts
+ * import { defineConfig } from '@ngxsmk/theme';
+ * export default defineConfig({ brand: { primary: '#7C3AED' } });
+ * ```
+ */
+function defineConfig(config) {
+    return config;
+}
+/** Merge a user config with defaults and derive all color scales. */
+function resolveTheme(config) {
+    return {
+        name: config.name ?? 'custom',
+        brandBase: config.brand.primary,
+        brand: config.brand.primaryScale ?? deriveScale(config.brand.primary),
+        neutral: config.neutral ?? DEFAULT_NEUTRAL,
+        semantic: { ...DEFAULT_SEMANTIC, ...config.semantic },
+        fontFamily: { ...DEFAULT_FONT_FAMILY, ...config.typography?.fontFamily },
+        typography: DEFAULT_TYPOGRAPHY,
+        spacing: SPACING,
+        radius: RADIUS,
+        radiusBase: config.borderRadius ?? 'md',
+        shadow: SHADOW,
+        duration: DURATION,
+        easing: EASING,
+        zIndex: Z_INDEX,
+        darkMode: {
+            strategy: config.darkMode?.strategy ?? 'class',
+            className: config.darkMode?.className ?? 'dark',
+        },
+        overrides: {
+            light: config.overrides?.light ?? {},
+            dark: config.overrides?.dark ?? {},
+        },
+    };
+}
+
+function scaleVars(prefix, scale) {
+    const vars = {};
+    for (const [step, value] of Object.entries(scale)) {
+        vars[`--ngxsmk-color-${prefix}-${step}`] = value;
+    }
+    return vars;
+}
+/** Tokens that do not change between light and dark mode. */
+function staticVars(theme) {
+    const vars = {
+        ...scaleVars('brand', theme.brand),
+        ...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,
+        // Component-specific Tokens (Buttons)
+        '--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)
+        '--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)
+        '--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)
+        '--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)
+        '--ngxsmk-switch-width': '2.25rem',
+        '--ngxsmk-switch-height': '1.25rem',
+        '--ngxsmk-switch-radius': 'var(--ngxsmk-radius-full)',
+        '--ngxsmk-switch-bg': 'var(--ngxsmk-color-outline-strong)',
+        '--ngxsmk-switch-thumb-size': '0.875rem',
+        '--ngxsmk-switch-thumb-bg': 'var(--ngxsmk-color-surface)',
+        '--ngxsmk-switch-checked-bg': 'var(--ngxsmk-color-primary)',
+    };
+    for (const [key, value] of Object.entries(theme.spacing)) {
+        vars[`--ngxsmk-space-${key}`] = value;
+    }
+    for (const [key, value] of Object.entries(theme.radius)) {
+        vars[`--ngxsmk-radius-${key}`] = value;
+    }
+    for (const [key, value] of Object.entries(theme.shadow)) {
+        vars[`--ngxsmk-shadow-${key}`] = value;
+    }
+    for (const [key, value] of Object.entries(theme.duration)) {
+        vars[`--ngxsmk-duration-${key}`] = value;
+    }
+    for (const [key, value] of Object.entries(theme.easing)) {
+        vars[`--ngxsmk-ease-${key}`] = value;
+    }
+    for (const [key, value] of Object.entries(theme.zIndex)) {
+        vars[`--ngxsmk-z-${key}`] = value;
+    }
+    const sizes = { large: 'lg', medium: 'md', small: 'sm' };
+    for (const [role, styles] of Object.entries(theme.typography)) {
+        for (const [size, suffix] of Object.entries(sizes)) {
+            const style = styles[size];
+            vars[`--ngxsmk-text-${role}-${suffix}-size`] = style.size;
+            vars[`--ngxsmk-text-${role}-${suffix}-line`] = style.lineHeight;
+            vars[`--ngxsmk-text-${role}-${suffix}-weight`] = style.weight;
+        }
+    }
+    // Extra-small body text for dense metadata rows; below the smallest
+    // TypeRoleSize so it is emitted outside the role loop.
+    vars['--ngxsmk-text-body-xs-size'] = '0.6875rem';
+    vars['--ngxsmk-text-body-xs-line'] = '1rem';
+    vars['--ngxsmk-text-body-xs-weight'] = '400';
+    return vars;
+}
+/** Semantic role tokens for light mode. */
+function lightVars(theme) {
+    const vars = {
+        'color-scheme': 'light',
+        '--ngxsmk-color-primary': theme.brandBase,
+        '--ngxsmk-color-on-primary': '#FFFFFF',
+        '--ngxsmk-color-primary-hover': shiftLightness(theme.brandBase, -8),
+        '--ngxsmk-color-primary-active': shiftLightness(theme.brandBase, -14),
+        '--ngxsmk-color-primary-container': theme.brand[100],
+        '--ngxsmk-color-on-primary-container': theme.brand[900],
+        // Astryx: cool-grey body, white cards floating on top, hairline borders.
+        '--ngxsmk-color-background': theme.neutral[50],
+        '--ngxsmk-color-on-background': '#0A1317',
+        '--ngxsmk-color-surface': '#FFFFFF',
+        '--ngxsmk-color-on-surface': '#0A1317',
+        '--ngxsmk-color-surface-variant': theme.neutral[100],
+        '--ngxsmk-color-on-surface-variant': theme.neutral[500],
+        '--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-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)`,
+    };
+    const tertiary = deriveScale(rotateHue(theme.brandBase, 64));
+    vars['--ngxsmk-color-tertiary'] = tertiary[500];
+    vars['--ngxsmk-color-on-tertiary'] = '#FFFFFF';
+    vars['--ngxsmk-color-tertiary-container'] = tertiary[100];
+    vars['--ngxsmk-color-on-tertiary-container'] = tertiary[900];
+    for (const [name, hex] of Object.entries(theme.semantic)) {
+        const scale = deriveScale(hex);
+        vars[`--ngxsmk-color-${name}`] = hex;
+        vars[`--ngxsmk-color-on-${name}`] = '#FFFFFF';
+        vars[`--ngxsmk-color-${name}-container`] = scale[100];
+        vars[`--ngxsmk-color-on-${name}-container`] = scale[800];
+    }
+    return { ...vars, ...theme.overrides.light };
+}
+/** Semantic role tokens for dark mode. */
+function darkVars(theme) {
+    const vars = {
+        'color-scheme': 'dark',
+        '--ngxsmk-color-primary': theme.brand[400],
+        '--ngxsmk-color-on-primary': '#FFFFFF',
+        '--ngxsmk-color-primary-hover': theme.brand[300],
+        '--ngxsmk-color-primary-active': theme.brand[200],
+        '--ngxsmk-color-primary-container': theme.brand[900],
+        '--ngxsmk-color-on-primary-container': theme.brand[100],
+        // Astryx dark: near-neutral charcoal body, slightly lighter card,
+        // lighter still for popovers; hairline light-on-dark borders.
+        '--ngxsmk-color-background': '#111112',
+        '--ngxsmk-color-on-background': '#DFE2E5',
+        '--ngxsmk-color-surface': '#1F1F22',
+        '--ngxsmk-color-on-surface': '#DFE2E5',
+        '--ngxsmk-color-surface-variant': '#28292C',
+        '--ngxsmk-color-on-surface-variant': '#AAAFB5',
+        '--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-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)`,
+    };
+    const tertiary = deriveScale(rotateHue(theme.brandBase, 64));
+    vars['--ngxsmk-color-tertiary'] = tertiary[400];
+    vars['--ngxsmk-color-on-tertiary'] = tertiary[950];
+    vars['--ngxsmk-color-tertiary-container'] = tertiary[900];
+    vars['--ngxsmk-color-on-tertiary-container'] = tertiary[100];
+    for (const [name, hex] of Object.entries(theme.semantic)) {
+        const scale = deriveScale(hex);
+        vars[`--ngxsmk-color-${name}`] = scale[400];
+        vars[`--ngxsmk-color-on-${name}`] = scale[950];
+        vars[`--ngxsmk-color-${name}-container`] = scale[950];
+        vars[`--ngxsmk-color-on-${name}-container`] = scale[300];
+    }
+    return { ...vars, ...theme.overrides.dark };
+}
+function block(selector, vars, indent = '') {
+    const lines = Object.entries(vars).map(([name, value]) => `${indent}  ${name}: ${value};`);
+    return `${indent}${selector} {\n${lines.join('\n')}\n${indent}}`;
+}
+/**
+ * Transform a theme config into a CSS stylesheet of `--ngxsmk-*` custom
+ * properties. Emits static tokens plus light-mode roles on `:root`, and
+ * dark-mode roles according to the configured dark-mode strategy.
+ */
+function buildThemeCss(config) {
+    const theme = 'brand' in config && 'spacing' in config
+        ? config
+        : resolveTheme(config);
+    const root = block(':root', { ...staticVars(theme), ...lightVars(theme) });
+    const dark = darkVars(theme);
+    let darkBlock;
+    switch (theme.darkMode.strategy) {
+        case 'media':
+            darkBlock = `@media (prefers-color-scheme: dark) {\n${block(':root', dark, '  ')}\n}`;
+            break;
+        case 'system': {
+            // `light-dark()` support is per-property; the class block still serves
+            // as the override hook, so `system` behaves as media + class.
+            const cn = theme.darkMode.className;
+            darkBlock = [
+                `@media (prefers-color-scheme: dark) {\n${block(':root', dark, '  ')}\n}`,
+                block(`:root.${cn}, :root.${cn} body, .${cn}`, dark),
+            ].join('\n\n');
+            break;
+        }
+        default: {
+            // `:root.<class>` (specificity 0,2,0) plus a `body` variant defend the
+            // dark tokens against third-party stylesheets that redefine `--ngxsmk-*`
+            // on a plain `:root` (0,1,0) — those would otherwise win by source order
+            // when injected into <head> after this sheet. The bare `.<class>` keeps
+            // scoped (non-root) dark regions working.
+            const cn = theme.darkMode.className;
+            darkBlock = block(`:root.${cn}, :root.${cn} body, .${cn}`, dark);
+        }
+    }
+    return `/* Generated by @ngxsmk/theme — do not edit by hand. */\n${root}\n\n${darkBlock}\n`;
+}
+
+/**
+ * Default preset: Astryx (Meta) blue. Light-mode primary is the exact
+ * Astryx accent (#0064E0); dark mode brightens it to #2694FE via the
+ * scale, matching astryx.atmeta.com.
+ */
+const astryxPreset = {
+    name: 'astryx',
+    brand: {
+        primary: '#0064E0',
+        primaryScale: {
+            50: '#E7F1FE',
+            100: '#CFE3FD',
+            200: '#9AC6FC',
+            300: '#5CA5FB',
+            400: '#2694FE',
+            500: '#0064E0',
+            600: '#0057C2',
+            700: '#0046A0',
+            800: '#00397F',
+            900: '#002C63',
+            950: '#001A3D',
+        },
+    },
+};
+/** Retained alias so existing violet-themed demos keep working. */
+const violetPreset = {
+    name: 'violet',
+    brand: { primary: '#7C3AED' },
+};
+/** Monochrome preset in the spirit of shadcn/ui's default look. */
+const neutralPreset = {
+    name: 'neutral',
+    brand: {
+        primary: '#18181B',
+        // A neutral brand cannot be derived from lightness alone — pin the scale.
+        primaryScale: {
+            50: '#FAFAFA',
+            100: '#F4F4F5',
+            200: '#E4E4E7',
+            300: '#D4D4D8',
+            400: '#A1A1AA',
+            500: '#71717A',
+            600: '#3F3F46',
+            700: '#27272A',
+            800: '#1F1F23',
+            900: '#18181B',
+            950: '#09090B',
+        },
+    },
+    overrides: {
+        // A near-black brand must invert in dark mode to stay visible.
+        dark: {
+            '--ngxsmk-color-primary': '#FAFAFA',
+            '--ngxsmk-color-on-primary': '#18181B',
+            '--ngxsmk-color-primary-hover': '#E4E4E7',
+            '--ngxsmk-color-primary-active': '#D4D4D8',
+            '--ngxsmk-color-ring': '#D4D4D8',
+        },
+    },
+};
+const emeraldPreset = {
+    name: 'emerald',
+    brand: { primary: '#059669' },
+};
+const rosePreset = {
+    name: 'rose',
+    brand: { primary: '#E11D48' },
+};
+const presets = {
+    astryx: astryxPreset,
+    violet: violetPreset,
+    neutral: neutralPreset,
+    emerald: emeraldPreset,
+    rose: rosePreset,
+};
+
+const STORAGE_KEY = 'ngxsmk-theme-mode';
+const STYLE_ID = 'ngxsmk-theme';
+/**
+ * Runtime theme control: dark-mode switching (class strategy) and dynamic
+ * theme application by injecting generated token CSS into the document.
+ *
+ * SSR-safe: all DOM access goes through the injected document and degrades
+ * gracefully when `window`/`matchMedia` are unavailable.
+ */
+class NgxsmkThemeService {
+    document = inject(DOCUMENT);
+    /** User preference: explicit light/dark or follow the OS. */
+    mode = signal(this.restoreMode(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    systemDark = signal(this.matchSystemDark(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "systemDark" }] : /* istanbul ignore next */ []));
+    /** Effective darkness after resolving `system` against the OS setting. */
+    isDark = computed(() => this.mode() === 'system' ? this.systemDark() : this.mode() === 'dark', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const media = this.document.defaultView?.matchMedia?.('(prefers-color-scheme: dark)');
+        media?.addEventListener('change', (e) => this.systemDark.set(e.matches));
+        effect(() => {
+            this.document.documentElement.classList.toggle('dark', this.isDark());
+        });
+    }
+    setMode(mode) {
+        this.mode.set(mode);
+        try {
+            this.document.defaultView?.localStorage?.setItem(STORAGE_KEY, mode);
+        }
+        catch {
+            // Storage unavailable (SSR, privacy mode) — preference is session-only.
+        }
+    }
+    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);
+    }
+    /** Remove a runtime-applied theme, falling back to the build-time CSS. */
+    clearTheme() {
+        this.document.getElementById(STYLE_ID)?.remove();
+    }
+    restoreMode() {
+        try {
+            const stored = this.document.defaultView?.localStorage?.getItem(STORAGE_KEY);
+            if (stored === 'light' || stored === 'dark' || stored === 'system') {
+                return stored;
+            }
+        }
+        catch {
+            // Fall through to default.
+        }
+        return 'system';
+    }
+    matchSystemDark() {
+        return (this.document.defaultView?.matchMedia?.('(prefers-color-scheme: dark)')
+            .matches ?? false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgxsmkThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgxsmkThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgxsmkThemeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Public API Surface of @ngxsmk/theme
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CONTROL_HEIGHT, DEFAULT_FONT_FAMILY, DEFAULT_NEUTRAL, DEFAULT_SEMANTIC, DEFAULT_TYPOGRAPHY, DURATION, EASING, NgxsmkThemeService, RADIUS, SHADOW, SPACING, Z_INDEX, astryxPreset, buildThemeCss, defineConfig, deriveScale, emeraldPreset, hexToHsl, hslToHex, neutralPreset, presets, resolveTheme, rosePreset, rotateHue, shiftLightness, violetPreset };
+//# sourceMappingURL=ngxsmk-theme.mjs.map