@ngxsmk/theme 1.3.2 → 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.
@@ -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',
@@ -339,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)',
@@ -391,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;
@@ -404,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;
     }
@@ -476,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];
@@ -530,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];
@@ -658,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());
@@ -693,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 {
@@ -742,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, 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, 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