@ngxsmk/theme 1.0.0 → 1.2.0

package/styles/ngxsmk.violet.css

@@ -1,31 +1,44 @@
 /* Generated by @ngxsmk/theme — do not edit by hand. */
 :root {
-  --ngxsmk-color-brand-50: #F6F1FE;
-  --ngxsmk-color-brand-100: #ECE3FC;
-  --ngxsmk-color-brand-200: #D7C2F9;
-  --ngxsmk-color-brand-300: #BB98F6;
-  --ngxsmk-color-brand-400: #9560F0;
-  --ngxsmk-color-brand-500: #7C3AED;
-  --ngxsmk-color-brand-600: #6014E0;
-  --ngxsmk-color-brand-700: #5011BB;
-  --ngxsmk-color-brand-800: #400E96;
-  --ngxsmk-color-brand-900: #320B75;
-  --ngxsmk-color-brand-950: #20074B;
-  --ngxsmk-color-neutral-50: #F1F4F7;
-  --ngxsmk-color-neutral-100: #E4E9EE;
-  --ngxsmk-color-neutral-200: #CCD3DB;
-  --ngxsmk-color-neutral-300: #A4B0BC;
+  --ngxsmk-color-brand-50: #f6f1fe;
+  --ngxsmk-color-brand-100: #ece3fc;
+  --ngxsmk-color-brand-200: #d7c2f9;
+  --ngxsmk-color-brand-300: #bb98f6;
+  --ngxsmk-color-brand-400: #9560f0;
+  --ngxsmk-color-brand-500: #7c3aed;
+  --ngxsmk-color-brand-600: #6014e0;
+  --ngxsmk-color-brand-700: #5011bb;
+  --ngxsmk-color-brand-800: #400e96;
+  --ngxsmk-color-brand-900: #320b75;
+  --ngxsmk-color-brand-950: #20074b;
+  --ngxsmk-color-secondary-50: #fef1f9;
+  --ngxsmk-color-secondary-100: #fce3f3;
+  --ngxsmk-color-secondary-200: #f9c2e5;
+  --ngxsmk-color-secondary-300: #f698d3;
+  --ngxsmk-color-secondary-400: #f060bb;
+  --ngxsmk-color-secondary-500: #ed3aab;
+  --ngxsmk-color-secondary-600: #e01495;
+  --ngxsmk-color-secondary-700: #bb117c;
+  --ngxsmk-color-secondary-800: #960e63;
+  --ngxsmk-color-secondary-900: #750b4e;
+  --ngxsmk-color-secondary-950: #4b0732;
+  --ngxsmk-color-neutral-50: #f1f4f7;
+  --ngxsmk-color-neutral-100: #e4e9ee;
+  --ngxsmk-color-neutral-200: #ccd3db;
+  --ngxsmk-color-neutral-300: #a4b0bc;
   --ngxsmk-color-neutral-400: #778593;
-  --ngxsmk-color-neutral-500: #4E606F;
-  --ngxsmk-color-neutral-600: #3A4650;
-  --ngxsmk-color-neutral-700: #2A333B;
-  --ngxsmk-color-neutral-800: #1F1F22;
-  --ngxsmk-color-neutral-900: #18181A;
+  --ngxsmk-color-neutral-500: #4e606f;
+  --ngxsmk-color-neutral-600: #3a4650;
+  --ngxsmk-color-neutral-700: #2a333b;
+  --ngxsmk-color-neutral-800: #1f1f22;
+  --ngxsmk-color-neutral-900: #18181a;
   --ngxsmk-color-neutral-950: #111112;
   --ngxsmk-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
   --ngxsmk-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
   --ngxsmk-radius-base: 0.5rem;
   --ngxsmk-control-height: 2.5rem;
+  --ngxsmk-motion-duration: var(--ngxsmk-duration-normal);
+  --ngxsmk-motion-ease: var(--ngxsmk-ease-in-out);
   --ngxsmk-button-bg: var(--ngxsmk-color-primary);
   --ngxsmk-button-color: var(--ngxsmk-color-on-primary);
   --ngxsmk-button-font-family: var(--ngxsmk-font-sans);
@@ -146,90 +159,122 @@
   --ngxsmk-text-body-xs-line: 1rem;
   --ngxsmk-text-body-xs-weight: 400;
   color-scheme: light;
-  --ngxsmk-color-primary: #7C3AED;
-  --ngxsmk-color-on-primary: #FFFFFF;
-  --ngxsmk-color-primary-hover: #6315E9;
-  --ngxsmk-color-primary-active: #5713CD;
-  --ngxsmk-color-primary-container: #ECE3FC;
-  --ngxsmk-color-on-primary-container: #320B75;
-  --ngxsmk-color-background: #F1F4F7;
-  --ngxsmk-color-on-background: #0A1317;
-  --ngxsmk-color-surface: #FFFFFF;
-  --ngxsmk-color-on-surface: #0A1317;
-  --ngxsmk-color-surface-variant: #E4E9EE;
-  --ngxsmk-color-on-surface-variant: #4E606F;
+  --ngxsmk-color-primary: #7c3aed;
+  --ngxsmk-color-on-primary: #ffffff;
+  --ngxsmk-color-primary-hover: #6315e9;
+  --ngxsmk-color-primary-active: #5713cd;
+  --ngxsmk-color-primary-container: #ece3fc;
+  --ngxsmk-color-on-primary-container: #320b75;
+  --ngxsmk-color-secondary: #ed3aab;
+  --ngxsmk-color-on-secondary: #ffffff;
+  --ngxsmk-color-secondary-hover: #e9159b;
+  --ngxsmk-color-secondary-active: #cd1388;
+  --ngxsmk-color-secondary-container: #fce3f3;
+  --ngxsmk-color-on-secondary-container: #750b4e;
+  --ngxsmk-color-background: #f1f4f7;
+  --ngxsmk-color-on-background: #0a1317;
+  --ngxsmk-color-surface: #ffffff;
+  --ngxsmk-color-on-surface: #0a1317;
+  --ngxsmk-color-surface-variant: #e4e9ee;
+  --ngxsmk-color-on-surface-variant: #4e606f;
   --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-surface-container: #ffffff;
   --ngxsmk-color-outline: rgb(5 54 89 / 0.1);
-  --ngxsmk-color-outline-strong: #CCD3DB;
+  --ngxsmk-color-outline-strong: #ccd3db;
   --ngxsmk-color-outline-variant: rgb(5 54 89 / 0.06);
-  --ngxsmk-color-ring: #7C3AED;
+  --ngxsmk-color-surface-1: #ffffff;
+  --ngxsmk-color-surface-2: #f1f4f7;
+  --ngxsmk-color-surface-3: #e4e9ee;
+  --ngxsmk-color-surface-4: #ccd3db;
+  --ngxsmk-color-surface-5: #a4b0bc;
+  --ngxsmk-color-ring: #7c3aed;
   --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
-  --ngxsmk-shadow-focus: 0 0 0 2px #ECE3FC, 0 0 0 4px color-mix(in srgb, #7C3AED 45%, transparent);
-  --ngxsmk-color-tertiary: #ED3A9F;
-  --ngxsmk-color-on-tertiary: #FFFFFF;
-  --ngxsmk-color-tertiary-container: #FCE3F1;
-  --ngxsmk-color-on-tertiary-container: #750B47;
-  --ngxsmk-color-success: #0D8626;
-  --ngxsmk-color-on-success: #FFFFFF;
-  --ngxsmk-color-success-container: #E3FCE8;
-  --ngxsmk-color-on-success-container: #0D8626;
-  --ngxsmk-color-warning: #E9AF08;
-  --ngxsmk-color-on-warning: #FFFFFF;
-  --ngxsmk-color-warning-container: #FEF7E1;
-  --ngxsmk-color-on-warning-container: #9E7705;
-  --ngxsmk-color-error: #E3193B;
-  --ngxsmk-color-on-error: #FFFFFF;
-  --ngxsmk-color-error-container: #FCE3E8;
+  --ngxsmk-shadow-focus: 0 0 0 2px #ece3fc, 0 0 0 4px color-mix(in srgb, #7c3aed 45%, transparent);
+  --ngxsmk-color-tertiary: #ed3a9f;
+  --ngxsmk-color-on-tertiary: #ffffff;
+  --ngxsmk-color-tertiary-container: #fce3f1;
+  --ngxsmk-color-on-tertiary-container: #750b47;
+  --ngxsmk-color-success: #0d8626;
+  --ngxsmk-color-on-success: #ffffff;
+  --ngxsmk-color-success-container: #e3fce8;
+  --ngxsmk-color-on-success-container: #0d8626;
+  --ngxsmk-color-warning: #e9af08;
+  --ngxsmk-color-on-warning: #ffffff;
+  --ngxsmk-color-warning-container: #fef7e1;
+  --ngxsmk-color-on-warning-container: #9e7705;
+  --ngxsmk-color-error: #e3193b;
+  --ngxsmk-color-on-error: #ffffff;
+  --ngxsmk-color-error-container: #fce3e8;
   --ngxsmk-color-on-error-container: #931026;
-  --ngxsmk-color-info: #0064E0;
-  --ngxsmk-color-on-info: #FFFFFF;
-  --ngxsmk-color-info-container: #E0EEFF;
-  --ngxsmk-color-on-info-container: #0049A3;
+  --ngxsmk-color-info: #0064e0;
+  --ngxsmk-color-on-info: #ffffff;
+  --ngxsmk-color-info-container: #e0eeff;
+  --ngxsmk-color-on-info-container: #0049a3;
 }
 
-:root.dark, :root.dark body, .dark {
+:root.dark,
+:root.dark body,
+.dark {
   color-scheme: dark;
-  --ngxsmk-color-primary: #9560F0;
-  --ngxsmk-color-on-primary: #FFFFFF;
-  --ngxsmk-color-primary-hover: #BB98F6;
-  --ngxsmk-color-primary-active: #D7C2F9;
-  --ngxsmk-color-primary-container: #320B75;
-  --ngxsmk-color-on-primary-container: #ECE3FC;
+  --ngxsmk-color-primary: #9560f0;
+  --ngxsmk-color-on-primary: #ffffff;
+  --ngxsmk-color-primary-hover: #bb98f6;
+  --ngxsmk-color-primary-active: #d7c2f9;
+  --ngxsmk-color-primary-container: #320b75;
+  --ngxsmk-color-on-primary-container: #ece3fc;
+  --ngxsmk-color-secondary: #f060bb;
+  --ngxsmk-color-on-secondary: #ffffff;
+  --ngxsmk-color-secondary-hover: #f698d3;
+  --ngxsmk-color-secondary-active: #f9c2e5;
+  --ngxsmk-color-secondary-container: #750b4e;
+  --ngxsmk-color-on-secondary-container: #fce3f3;
   --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-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-surface-container: #28292c;
   --ngxsmk-color-outline: rgb(242 244 246 / 0.1);
-  --ngxsmk-color-outline-strong: #494D53;
+  --ngxsmk-color-outline-strong: #494d53;
   --ngxsmk-color-outline-variant: rgb(242 244 246 / 0.06);
-  --ngxsmk-color-ring: #9560F0;
+  --ngxsmk-color-surface-1: #1f1f22;
+  --ngxsmk-color-surface-2: #2a333b;
+  --ngxsmk-color-surface-3: #3a4650;
+  --ngxsmk-color-surface-4: #4e606f;
+  --ngxsmk-color-surface-5: #778593;
+  --ngxsmk-color-ring: #9560f0;
   --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
-  --ngxsmk-shadow-focus: 0 0 0 2px color-mix(in srgb, #9560F0 25%, transparent), 0 0 0 4px color-mix(in srgb, #9560F0 45%, transparent);
-  --ngxsmk-color-tertiary: #F060B2;
-  --ngxsmk-color-on-tertiary: #4B072D;
-  --ngxsmk-color-tertiary-container: #750B47;
-  --ngxsmk-color-on-tertiary-container: #FCE3F1;
-  --ngxsmk-color-success: #61F07E;
-  --ngxsmk-color-on-success: #074A15;
-  --ngxsmk-color-success-container: #074A15;
-  --ngxsmk-color-on-success-container: #99F5AC;
-  --ngxsmk-color-warning: #F9D057;
-  --ngxsmk-color-on-warning: #4F3B03;
-  --ngxsmk-color-warning-container: #4F3B03;
-  --ngxsmk-color-on-warning-container: #FBE093;
-  --ngxsmk-color-error: #EE637A;
-  --ngxsmk-color-on-error: #4A0813;
-  --ngxsmk-color-error-container: #4A0813;
-  --ngxsmk-color-on-error-container: #F49AA9;
-  --ngxsmk-color-info: #529FFF;
+  --ngxsmk-shadow-focus:
+    0 0 0 2px color-mix(in srgb, #9560f0 25%, transparent),
+    0 0 0 4px color-mix(in srgb, #9560f0 45%, transparent);
+  --ngxsmk-color-tertiary: #f060b2;
+  --ngxsmk-color-on-tertiary: #4b072d;
+  --ngxsmk-color-tertiary-container: #750b47;
+  --ngxsmk-color-on-tertiary-container: #fce3f1;
+  --ngxsmk-color-success: #61f07e;
+  --ngxsmk-color-on-success: #074a15;
+  --ngxsmk-color-success-container: #074a15;
+  --ngxsmk-color-on-success-container: #99f5ac;
+  --ngxsmk-color-warning: #f9d057;
+  --ngxsmk-color-on-warning: #4f3b03;
+  --ngxsmk-color-warning-container: #4f3b03;
+  --ngxsmk-color-on-warning-container: #fbe093;
+  --ngxsmk-color-error: #ee637a;
+  --ngxsmk-color-on-error: #4a0813;
+  --ngxsmk-color-error-container: #4a0813;
+  --ngxsmk-color-on-error-container: #f49aa9;
+  --ngxsmk-color-info: #529fff;
   --ngxsmk-color-on-info: #002452;
   --ngxsmk-color-info-container: #002452;
-  --ngxsmk-color-on-info-container: #8FC1FF;
+  --ngxsmk-color-on-info-container: #8fc1ff;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --ngxsmk-motion-duration: 0ms;
+  }
 }

package/types/ngxsmk-theme.d.ts

@@ -1,238 +0,0 @@
-import * as _angular_core 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).
- */
-/** An 11-step color scale, 50 (lightest) to 950 (darkest). */
-interface ColorScale {
-    50: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-    950: string;
-}
-type ColorScaleStep = keyof ColorScale;
-/** Status colors used by alerts, badges, form validation, toasts. */
-interface SemanticColors {
-    success: string;
-    warning: string;
-    error: string;
-    info: string;
-}
-interface FontFamilies {
-    sans: string;
-    mono: string;
-}
-/** A single typographic role (size + line height + weight). */
-interface TypeStyle {
-    size: string;
-    lineHeight: string;
-    weight: string;
-}
-type TypeRoleSize = 'large' | 'medium' | 'small';
-/** Material-inspired type roles: display, headline, title, body, label. */
-interface TypographyScale {
-    display: Record<TypeRoleSize, TypeStyle>;
-    headline: Record<TypeRoleSize, TypeStyle>;
-    title: Record<TypeRoleSize, TypeStyle>;
-    body: Record<TypeRoleSize, TypeStyle>;
-    label: Record<TypeRoleSize, TypeStyle>;
-}
-type DarkModeStrategy = 'class' | 'media' | 'system';
-type RadiusPreset = 'none' | 'sm' | 'md' | 'lg' | 'xl';
-/** User-facing theme configuration. Everything except `brand` is optional. */
-interface ThemeConfig {
-    /** Identifier used when registering multiple themes. */
-    name?: string;
-    brand: {
-        /** Brand color as hex (e.g. `#7C3AED`). A full 50–950 scale is derived. */
-        primary: string;
-        /** Optional pre-built scale; overrides derivation from `primary`. */
-        primaryScale?: ColorScale;
-    };
-    /** Neutral (gray) scale. Defaults to a balanced zinc-like scale. */
-    neutral?: ColorScale;
-    semantic?: Partial<SemanticColors>;
-    typography?: {
-        fontFamily?: Partial<FontFamilies>;
-    };
-    /** Global corner rounding character of the theme. Default `md`. */
-    borderRadius?: RadiusPreset;
-    /** How dark mode is activated. Default: `class` (a `.dark` class on `<html>`). */
-    darkMode?: {
-        strategy?: DarkModeStrategy;
-        /** Class name used by the `class` strategy. Default `dark`. */
-        className?: string;
-    };
-    /**
-     * Raw semantic-role token overrides merged into the generated output,
-     * e.g. `{ dark: { '--ngxsmk-color-primary': '#FAFAFA' } }`.
-     */
-    overrides?: {
-        light?: Record<string, string>;
-        dark?: Record<string, string>;
-    };
-}
-/** A fully resolved theme: config merged with defaults, scales derived. */
-interface ResolvedTheme {
-    name: string;
-    /** The exact brand color from the config — light-mode primary. */
-    brandBase: string;
-    brand: ColorScale;
-    neutral: ColorScale;
-    semantic: SemanticColors;
-    fontFamily: FontFamilies;
-    typography: TypographyScale;
-    spacing: Record<string, string>;
-    radius: Record<string, string>;
-    radiusBase: RadiusPreset;
-    shadow: Record<string, string>;
-    duration: Record<string, string>;
-    easing: Record<string, string>;
-    /** Stacking layers emitted as `--ngxsmk-z-*`; overlays must share this ladder. */
-    zIndex: Record<string, string>;
-    darkMode: {
-        strategy: DarkModeStrategy;
-        className: string;
-    };
-    overrides: {
-        light: Record<string, string>;
-        dark: Record<string, string>;
-    };
-}
-
-/** HSL triple: h in [0,360), s and l in [0,100]. */
-interface Hsl {
-    h: number;
-    s: number;
-    l: number;
-}
-declare function hexToHsl(hex: string): Hsl;
-declare function hslToHex({ h, s, l }: Hsl): string;
-/** Shift a color's lightness by `delta` percentage points (clamped 0–100). */
-declare function shiftLightness(hex: string, delta: number): string;
-/** Rotate a color's hue by `degrees`, keeping saturation and lightness. */
-declare function rotateHue(hex: string, degrees: number): string;
-/**
- * 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.
- */
-declare function deriveScale(baseHex: string): ColorScale;
-
-/**
- * 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.
- */
-declare const DEFAULT_NEUTRAL: ColorScale;
-declare const DEFAULT_SEMANTIC: SemanticColors;
-declare const DEFAULT_FONT_FAMILY: FontFamilies;
-declare const DEFAULT_TYPOGRAPHY: TypographyScale;
-/**
- * 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.
- */
-declare const CONTROL_HEIGHT = "2.5rem";
-declare const SPACING: Record<string, string>;
-/**
- * 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.
- */
-declare const RADIUS: Record<string, string>;
-/**
- * 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.
- */
-declare const SHADOW: Record<string, string>;
-/**
- * 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.
- */
-declare const Z_INDEX: Record<string, string>;
-declare const DURATION: Record<string, string>;
-declare const EASING: Record<string, string>;
-
-/**
- * Identity helper that gives `ngxsmk.config.ts` files full type inference:
- *
- * ```ts
- * import { defineConfig } from '@ngxsmk/theme';
- * export default defineConfig({ brand: { primary: '#7C3AED' } });
- * ```
- */
-declare function defineConfig(config: ThemeConfig): ThemeConfig;
-/** Merge a user config with defaults and derive all color scales. */
-declare function resolveTheme(config: ThemeConfig): ResolvedTheme;
-
-/**
- * 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.
- */
-declare function buildThemeCss(config: ThemeConfig | ResolvedTheme): string;
-
-/**
- * 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.
- */
-declare const astryxPreset: ThemeConfig;
-/** Retained alias so existing violet-themed demos keep working. */
-declare const violetPreset: ThemeConfig;
-/** Monochrome preset in the spirit of shadcn/ui's default look. */
-declare const neutralPreset: ThemeConfig;
-declare const emeraldPreset: ThemeConfig;
-declare const rosePreset: ThemeConfig;
-declare const presets: Record<string, ThemeConfig>;
-
-type ThemeMode = 'light' | 'dark' | 'system';
-/**
- * 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.
- */
-declare class NgxsmkThemeService {
-    private readonly document;
-    /** User preference: explicit light/dark or follow the OS. */
-    readonly mode: _angular_core.WritableSignal<ThemeMode>;
-    private readonly systemDark;
-    /** Effective darkness after resolving `system` against the OS setting. */
-    readonly isDark: _angular_core.Signal<boolean>;
-    constructor();
-    setMode(mode: ThemeMode): void;
-    toggle(): void;
-    /**
-     * 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: ThemeConfig): void;
-    /** Remove a runtime-applied theme, falling back to the build-time CSS. */
-    clearTheme(): void;
-    private restoreMode;
-    private matchSystemDark;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxsmkThemeService, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NgxsmkThemeService>;
-}
-
-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 };
-export type { ColorScale, ColorScaleStep, DarkModeStrategy, FontFamilies, Hsl, RadiusPreset, ResolvedTheme, SemanticColors, ThemeConfig, ThemeMode, TypeRoleSize, TypeStyle, TypographyScale };