@ngxsmk/theme 1.3.0 → 1.3.2

package/lib/color.d.ts

@@ -1,22 +1,16 @@
 import { ColorScale } from './types';
-/** HSL triple: h in [0,360), s and l in [0,100]. */
-export interface Hsl {
-    h: number;
-    s: number;
+/** OKLCH color: l in [0,1], c in [0,0.4], h in [0,360). */
+export interface Oklch {
     l: number;
+    c: number;
+    h: number;
 }
-export declare function hexToHsl(hex: string): Hsl;
-export declare function hslToHex({ h, s, l }: Hsl): string;
-/** Shift a color's lightness by `delta` percentage points (clamped 0–100). */
+export declare function hexToOklch(hex: string): Oklch;
+export declare function oklchToHex({ l: L, c: C, h }: Oklch): string;
+/** Shift a color's lightness by `delta` (clamped 0–1). */
 export declare function shiftLightness(hex: string, delta: number): string;
-/** Rotate a color's hue by `degrees`, keeping saturation and lightness. */
+/** Rotate a color's hue by `degrees`, keeping chroma and lightness. */
 export 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.
- */
+/** Derive a full 50–950 color scale from a single brand hex. */
 export declare function deriveScale(baseHex: string): ColorScale;
 //# sourceMappingURL=color.d.ts.map

package/lib/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../packages/theme/src/lib/color.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,oDAAoD;AACpD,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAwCzC;AAED,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,MAAM,CAqBjD;AAED,8EAA8E;AAC9E,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAGjE;AAED,2EAA2E;AAC3E,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAG9D;AAqBD;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,UAAU,CAmBvD"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../packages/theme/src/lib/color.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,2DAA2D;AAC3D,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AA6BD,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,CAuB7C;AAED,wBAAgB,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,GAAG,MAAM,CAuB3D;AAED,0DAA0D;AAC1D,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAGjE;AAED,uEAAuE;AACvE,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAG9D;AAiBD,gEAAgE;AAChE,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,UAAU,CAyBvD"}

package/lib/css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../../../packages/theme/src/lib/css.ts"],"names":[],"mappings":"AAEA,OAAO,EAAc,aAAa,EAAE,WAAW,EAA2B,MAAM,SAAS,CAAC;AAuO1F;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,WAAW,GAAG,aAAa,GAAG,MAAM,CAqCzE"}
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../../../packages/theme/src/lib/css.ts"],"names":[],"mappings":"AAEA,OAAO,EAAc,aAAa,EAAE,WAAW,EAA2B,MAAM,SAAS,CAAC;AAgQ1F;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,WAAW,GAAG,aAAa,GAAG,MAAM,CAmDzE"}

package/lib/tokens.d.ts

@@ -14,6 +14,20 @@ export declare const DEFAULT_TYPOGRAPHY: TypographyScale;
  * family use this so they read as one consistent size.
  */
 export declare const CONTROL_HEIGHT = "2.5rem";
+/**
+ * Control-height ladder. `md` mirrors CONTROL_HEIGHT (the family default);
+ * `sm`/`lg` give dense and comfortable variants the same rhythm.
+ */
+export declare const CONTROL_HEIGHTS: Record<string, string>;
+/**
+ * Opacity roles. Components must use these instead of ad-hoc literals so
+ * disabled/muted content reads identically across the whole kit.
+ */
+export declare const OPACITY: Record<string, string>;
+/** Icon sizing ladder — aligns glyph boxes with the text roles they sit next to. */
+export declare const ICON_SIZE: Record<string, string>;
+/** Letter-spacing roles: tight for display/headline, wide for overline/labels. */
+export declare const TRACKING: Record<string, string>;
 export declare const SPACING: Record<string, string>;
 /**
  * Radius scale: inner 4px, element 8px (buttons/inputs, the base),
@@ -22,9 +36,11 @@ export declare const SPACING: Record<string, string>;
  */
 export declare const RADIUS: Record<string, string>;
 /**
- * Soft, diffuse, layered shadows (two stacked blurs, low alpha). Overlay
- * CSS resolves these to slightly stronger values in dark mode via the
- * elevation tokens on each surface.
+ * Soft, diffuse, layered shadows: a 1px hairline "contact" line keeps edges
+ * crisp on white, a tight key shadow gives definition, and a wide low-alpha
+ * ambient blur supplies the soft depth. Overlay CSS resolves these to
+ * slightly stronger values in dark mode via the elevation tokens on each
+ * surface.
  */
 export declare const SHADOW: Record<string, string>;
 /**

package/lib/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../packages/theme/src/lib/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAEpF;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,UAY7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,cAK9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,YAGjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,eA0BhC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,cAAc,WAAW,CAAC;AAEvC,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAiB1C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CASzC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAMzC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAS1C,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAM3C,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAMzC,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../packages/theme/src/lib/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAEpF;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,UAY7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,cAK9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,YAGjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,eA0BhC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,cAAc,WAAW,CAAC;AAEvC;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAIlD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAI1C,CAAC;AAEF,oFAAoF;AACpF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAI5C,CAAC;AAEF,kFAAkF;AAClF,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAI3C,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAiB1C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CASzC,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAMzC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAS1C,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAM3C,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAMzC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngxsmk/theme",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Runtime theming and design-token engine for @ngxsmk/core with light/dark modes and preset palettes.",
   "keywords": [
     "angular",
@@ -12,6 +12,15 @@
     "themes"
   ],
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NGXSMK/ngxsmk-ui-kit.git",
+    "directory": "packages/theme"
+  },
+  "homepage": "https://ngxsmk.github.io/ngxsmk-ui-kit",
+  "bugs": {
+    "url": "https://github.com/NGXSMK/ngxsmk-ui-kit/issues"
+  },
   "peerDependencies": {
     "@angular/common": ">=17.3.0",
     "@angular/core": ">=17.3.0"

package/styles/ngxsmk.css

@@ -1,37 +1,37 @@
 /* Generated by @ngxsmk/theme — do not edit by hand. */
 :root {
-  --ngxsmk-color-brand-50: #f0fffa;
-  --ngxsmk-color-brand-100: #e1fef5;
-  --ngxsmk-color-brand-200: #bffdea;
-  --ngxsmk-color-brand-300: #92fbdb;
-  --ngxsmk-color-brand-400: #57f9c7;
-  --ngxsmk-color-brand-500: #26f8b7;
-  --ngxsmk-color-brand-600: #08eda6;
-  --ngxsmk-color-brand-700: #07c58a;
-  --ngxsmk-color-brand-800: #059669;
-  --ngxsmk-color-brand-900: #047b56;
-  --ngxsmk-color-brand-950: #034f37;
-  --ngxsmk-color-secondary-50: #f0f5ff;
-  --ngxsmk-color-secondary-100: #e1eafe;
-  --ngxsmk-color-secondary-200: #bfd2fd;
-  --ngxsmk-color-secondary-300: #92b3fb;
-  --ngxsmk-color-secondary-400: #578af9;
-  --ngxsmk-color-secondary-500: #2667f8;
-  --ngxsmk-color-secondary-600: #084fed;
-  --ngxsmk-color-secondary-700: #0742c5;
-  --ngxsmk-color-secondary-800: #053296;
-  --ngxsmk-color-secondary-900: #04297b;
-  --ngxsmk-color-secondary-950: #031a4f;
-  --ngxsmk-color-neutral-50: #f1f4f7;
-  --ngxsmk-color-neutral-100: #e4e9ee;
-  --ngxsmk-color-neutral-200: #ccd3db;
-  --ngxsmk-color-neutral-300: #a4b0bc;
+  --ngxsmk-color-brand-50: #EEF8F3;
+  --ngxsmk-color-brand-100: #DEF1E7;
+  --ngxsmk-color-brand-200: #B7DFCB;
+  --ngxsmk-color-brand-300: #86C8A9;
+  --ngxsmk-color-brand-400: #45A77F;
+  --ngxsmk-color-brand-500: #059669;
+  --ngxsmk-color-brand-600: #007348;
+  --ngxsmk-color-brand-700: #005A34;
+  --ngxsmk-color-brand-800: #004222;
+  --ngxsmk-color-brand-900: #002E14;
+  --ngxsmk-color-brand-950: #001406;
+  --ngxsmk-color-secondary-50: #EEF7FB;
+  --ngxsmk-color-secondary-100: #DDEFF7;
+  --ngxsmk-color-secondary-200: #B5DBEC;
+  --ngxsmk-color-secondary-300: #83C2DC;
+  --ngxsmk-color-secondary-400: #419FC2;
+  --ngxsmk-color-secondary-500: #008EB6;
+  --ngxsmk-color-secondary-600: #00698F;
+  --ngxsmk-color-secondary-700: #005175;
+  --ngxsmk-color-secondary-800: #003B58;
+  --ngxsmk-color-secondary-900: #00273F;
+  --ngxsmk-color-secondary-950: #00111F;
+  --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;
@@ -39,6 +39,10 @@
   --ngxsmk-control-height: 2.5rem;
   --ngxsmk-motion-duration: var(--ngxsmk-duration-normal);
   --ngxsmk-motion-ease: var(--ngxsmk-ease-in-out);
+  --ngxsmk-hover-lift: translateY(-1px);
+  --ngxsmk-press-scale: scale(0.98);
+  --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);
   --ngxsmk-button-bg: var(--ngxsmk-color-primary);
   --ngxsmk-button-color: var(--ngxsmk-color-on-primary);
   --ngxsmk-button-font-family: var(--ngxsmk-font-sans);
@@ -63,6 +67,18 @@
   --ngxsmk-switch-thumb-size: 0.875rem;
   --ngxsmk-switch-thumb-bg: var(--ngxsmk-color-surface);
   --ngxsmk-switch-checked-bg: var(--ngxsmk-color-primary);
+  --ngxsmk-control-height-sm: 2rem;
+  --ngxsmk-control-height-md: 2.5rem;
+  --ngxsmk-control-height-lg: 3rem;
+  --ngxsmk-opacity-disabled: 0.5;
+  --ngxsmk-opacity-muted: 0.7;
+  --ngxsmk-opacity-faint: 0.4;
+  --ngxsmk-icon-sm: 1rem;
+  --ngxsmk-icon-md: 1.25rem;
+  --ngxsmk-icon-lg: 1.5rem;
+  --ngxsmk-tracking-tight: -0.02em;
+  --ngxsmk-tracking-normal: 0;
+  --ngxsmk-tracking-wide: 0.08em;
   --ngxsmk-space-0: 0px;
   --ngxsmk-space-1: 0.25rem;
   --ngxsmk-space-2: 0.5rem;
@@ -87,11 +103,11 @@
   --ngxsmk-radius-2xl: 1.25rem;
   --ngxsmk-radius-3xl: 1.75rem;
   --ngxsmk-radius-full: 9999px;
-  --ngxsmk-shadow-sm: 0 1px 1px rgb(0 0 0 / 0.08), 0 2px 8px rgb(0 0 0 / 0.08);
-  --ngxsmk-shadow-md: 0 1px 2px rgb(0 0 0 / 0.1), 0 2px 12px rgb(0 0 0 / 0.1);
-  --ngxsmk-shadow-lg: 0 2px 2px rgb(0 0 0 / 0.1), 0 8px 24px rgb(0 0 0 / 0.12);
-  --ngxsmk-shadow-xl: 0 4px 6px rgb(0 0 0 / 0.1), 0 12px 32px rgb(0 0 0 / 0.16);
-  --ngxsmk-shadow-2xl: 0 8px 12px rgb(0 0 0 / 0.14), 0 24px 48px rgb(0 0 0 / 0.22);
+  --ngxsmk-shadow-sm: 0 0 0 1px rgb(0 0 0 / 0.03), 0 1px 1px rgb(0 0 0 / 0.07), 0 2px 8px rgb(0 0 0 / 0.07);
+  --ngxsmk-shadow-md: 0 0 0 1px rgb(0 0 0 / 0.03), 0 1px 2px rgb(0 0 0 / 0.09), 0 4px 16px rgb(0 0 0 / 0.09);
+  --ngxsmk-shadow-lg: 0 0 0 1px rgb(0 0 0 / 0.04), 0 2px 4px rgb(0 0 0 / 0.09), 0 10px 28px rgb(0 0 0 / 0.11);
+  --ngxsmk-shadow-xl: 0 0 0 1px rgb(0 0 0 / 0.04), 0 4px 8px rgb(0 0 0 / 0.1), 0 16px 40px rgb(0 0 0 / 0.15);
+  --ngxsmk-shadow-2xl: 0 0 0 1px rgb(0 0 0 / 0.05), 0 8px 16px rgb(0 0 0 / 0.13), 0 28px 56px rgb(0 0 0 / 0.2);
   --ngxsmk-duration-instant: 0ms;
   --ngxsmk-duration-fast: 100ms;
   --ngxsmk-duration-normal: 200ms;
@@ -160,121 +176,135 @@
   --ngxsmk-text-body-xs-weight: 400;
   color-scheme: light;
   --ngxsmk-color-primary: #059669;
-  --ngxsmk-color-on-primary: #ffffff;
-  --ngxsmk-color-primary-hover: #046f4d;
-  --ngxsmk-color-primary-active: #035139;
-  --ngxsmk-color-primary-container: #e1fef5;
-  --ngxsmk-color-on-primary-container: #047b56;
-  --ngxsmk-color-secondary: #053296;
-  --ngxsmk-color-on-secondary: #ffffff;
-  --ngxsmk-color-secondary-hover: #04256f;
-  --ngxsmk-color-secondary-active: #031b51;
-  --ngxsmk-color-secondary-container: #e1eafe;
-  --ngxsmk-color-on-secondary-container: #04297b;
-  --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-on-primary: #FFFFFF;
+  --ngxsmk-color-primary-hover: #000000;
+  --ngxsmk-color-primary-active: #000000;
+  --ngxsmk-color-primary-container: #DEF1E7;
+  --ngxsmk-color-on-primary-container: #002E14;
+  --ngxsmk-color-secondary: #008EB6;
+  --ngxsmk-color-on-secondary: #FFFFFF;
+  --ngxsmk-color-secondary-hover: #000009;
+  --ngxsmk-color-secondary-active: #000009;
+  --ngxsmk-color-secondary-container: #DDEFF7;
+  --ngxsmk-color-on-secondary-container: #00273F;
+  --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-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-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: #059669;
   --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
-  --ngxsmk-shadow-focus: 0 0 0 2px #e1fef5, 0 0 0 4px color-mix(in srgb, #059669 45%, transparent);
-  --ngxsmk-color-tertiary: #2659f8;
-  --ngxsmk-color-on-tertiary: #ffffff;
-  --ngxsmk-color-tertiary-container: #e1e8fe;
-  --ngxsmk-color-on-tertiary-container: #04217b;
-  --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: #2563eb;
-  --ngxsmk-color-on-info: #ffffff;
-  --ngxsmk-color-info-container: #e3ebfc;
-  --ngxsmk-color-on-info-container: #0e3895;
+  --ngxsmk-shadow-focus: 0 0 0 2px #DEF1E7, 0 0 0 4px color-mix(in srgb, #059669 45%, transparent);
+  --ngxsmk-color-tertiary: #008DBA;
+  --ngxsmk-color-on-tertiary: #FFFFFF;
+  --ngxsmk-color-tertiary-container: #DDEEF7;
+  --ngxsmk-color-on-tertiary-container: #002742;
+  --ngxsmk-color-success: #0D8626;
+  --ngxsmk-color-on-success: #FFFFFF;
+  --ngxsmk-color-success-container: #DFF1DF;
+  --ngxsmk-color-on-success-container: #004300;
+  --ngxsmk-color-warning: #E9AF08;
+  --ngxsmk-color-on-warning: #FFFFFF;
+  --ngxsmk-color-warning-container: #F5EAD5;
+  --ngxsmk-color-on-warning-container: #522700;
+  --ngxsmk-color-error: #E3193B;
+  --ngxsmk-color-on-error: #FFFFFF;
+  --ngxsmk-color-error-container: #FFE1DF;
+  --ngxsmk-color-on-error-container: #780000;
+  --ngxsmk-color-info: #2563EB;
+  --ngxsmk-color-on-info: #FFFFFF;
+  --ngxsmk-color-info-container: #DDECFF;
+  --ngxsmk-color-on-info-container: #001E8D;
 }
 
-:root.dark,
-:root.dark body,
-.dark {
+:root.dark, :root.dark body, .dark {
   color-scheme: dark;
-  --ngxsmk-color-primary: #57f9c7;
-  --ngxsmk-color-on-primary: #ffffff;
-  --ngxsmk-color-primary-hover: #92fbdb;
-  --ngxsmk-color-primary-active: #bffdea;
-  --ngxsmk-color-primary-container: #047b56;
-  --ngxsmk-color-on-primary-container: #e1fef5;
-  --ngxsmk-color-secondary: #578af9;
-  --ngxsmk-color-on-secondary: #ffffff;
-  --ngxsmk-color-secondary-hover: #92b3fb;
-  --ngxsmk-color-secondary-active: #bfd2fd;
-  --ngxsmk-color-secondary-container: #04297b;
-  --ngxsmk-color-on-secondary-container: #e1eafe;
+  --ngxsmk-color-primary: #45A77F;
+  --ngxsmk-color-on-primary: #FFFFFF;
+  --ngxsmk-color-primary-hover: #86C8A9;
+  --ngxsmk-color-primary-active: #B7DFCB;
+  --ngxsmk-color-primary-container: #002E14;
+  --ngxsmk-color-on-primary-container: #DEF1E7;
+  --ngxsmk-color-secondary: #419FC2;
+  --ngxsmk-color-on-secondary: #FFFFFF;
+  --ngxsmk-color-secondary-hover: #83C2DC;
+  --ngxsmk-color-secondary-active: #B5DBEC;
+  --ngxsmk-color-secondary-container: #00273F;
+  --ngxsmk-color-on-secondary-container: #DDEFF7;
   --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-surface-1: #1f1f22;
-  --ngxsmk-color-surface-2: #2a333b;
-  --ngxsmk-color-surface-3: #3a4650;
-  --ngxsmk-color-surface-4: #4e606f;
+  --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: #57f9c7;
+  --ngxsmk-color-ring: #45A77F;
   --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
-  --ngxsmk-shadow-focus:
-    0 0 0 2px color-mix(in srgb, #57f9c7 25%, transparent),
-    0 0 0 4px color-mix(in srgb, #57f9c7 45%, transparent);
-  --ngxsmk-color-tertiary: #577ef9;
-  --ngxsmk-color-on-tertiary: #03154f;
-  --ngxsmk-color-tertiary-container: #04217b;
-  --ngxsmk-color-on-tertiary-container: #e1e8fe;
-  --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: #608df0;
-  --ngxsmk-color-on-info: #071c4b;
-  --ngxsmk-color-info-container: #071c4b;
-  --ngxsmk-color-on-info-container: #98b5f6;
+  --ngxsmk-shadow-focus: 0 0 0 2px color-mix(in srgb, #45A77F 25%, transparent), 0 0 0 4px color-mix(in srgb, #45A77F 45%, transparent);
+  --ngxsmk-color-tertiary: #419EC6;
+  --ngxsmk-color-on-tertiary: #001021;
+  --ngxsmk-color-tertiary-container: #002742;
+  --ngxsmk-color-on-tertiary-container: #DDEEF7;
+  --ngxsmk-color-success: #51A957;
+  --ngxsmk-color-on-success: #001500;
+  --ngxsmk-color-success-container: #001500;
+  --ngxsmk-color-on-success-container: #8CCA8D;
+  --ngxsmk-color-warning: #BA8900;
+  --ngxsmk-color-on-warning: #1C0700;
+  --ngxsmk-color-warning-container: #1C0700;
+  --ngxsmk-color-on-warning-container: #E9AF08;
+  --ngxsmk-color-error: #F3515A;
+  --ngxsmk-color-on-error: #2E0000;
+  --ngxsmk-color-error-container: #2E0000;
+  --ngxsmk-color-on-error-container: #FF8F8F;
+  --ngxsmk-color-info: #518BFF;
+  --ngxsmk-color-on-info: #000238;
+  --ngxsmk-color-info-container: #000238;
+  --ngxsmk-color-on-info-container: #88B6FF;
 }
 
 @media (prefers-reduced-motion: reduce) {
   :root {
     --ngxsmk-motion-duration: 0ms;
+    --ngxsmk-hover-lift: none;
+    --ngxsmk-press-scale: none;
+    --ngxsmk-duration-instant: 0ms;
+    --ngxsmk-duration-fast: 0ms;
+    --ngxsmk-duration-normal: 0ms;
+    --ngxsmk-duration-slow: 0ms;
+    --ngxsmk-duration-slower: 0ms;
   }
 }
+
+:root.ngxsmk-reduce-motion, .ngxsmk-reduce-motion {
+  --ngxsmk-motion-duration: 0ms;
+  --ngxsmk-hover-lift: none;
+  --ngxsmk-press-scale: none;
+  --ngxsmk-duration-instant: 0ms;
+  --ngxsmk-duration-fast: 0ms;
+  --ngxsmk-duration-normal: 0ms;
+  --ngxsmk-duration-slow: 0ms;
+  --ngxsmk-duration-slower: 0ms;
+}