@ngxsmk/theme 1.3.1 → 2.0.0

package/styles/ngxsmk.violet.css

@@ -1,27 +1,27 @@
 /* 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-50: #F5F3FF;
+  --ngxsmk-color-brand-100: #ECE6FF;
+  --ngxsmk-color-brand-200: #D6C9FF;
+  --ngxsmk-color-brand-300: #BCA2FF;
+  --ngxsmk-color-brand-400: #9B6EFF;
   --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-brand-600: #6B1ED7;
+  --ngxsmk-color-brand-700: #5600B6;
+  --ngxsmk-color-brand-800: #40008F;
+  --ngxsmk-color-brand-900: #2C006A;
+  --ngxsmk-color-brand-950: #14003A;
+  --ngxsmk-color-secondary-50: #FFF0F6;
+  --ngxsmk-color-secondary-100: #FFE0ED;
+  --ngxsmk-color-secondary-200: #FFBCD8;
+  --ngxsmk-color-secondary-300: #FE8EBD;
+  --ngxsmk-color-secondary-400: #E9509A;
+  --ngxsmk-color-secondary-500: #CD007B;
+  --ngxsmk-color-secondary-600: #B20065;
+  --ngxsmk-color-secondary-700: #93004F;
+  --ngxsmk-color-secondary-800: #700039;
+  --ngxsmk-color-secondary-900: #510026;
+  --ngxsmk-color-secondary-950: #2A0010;
   --ngxsmk-color-neutral-50: #F1F4F7;
   --ngxsmk-color-neutral-100: #E4E9EE;
   --ngxsmk-color-neutral-200: #CCD3DB;
@@ -34,7 +34,7 @@
   --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-font-mono: 'Geist Mono', 'Geist Mono Fallback', monospace;
   --ngxsmk-radius-base: 0.5rem;
   --ngxsmk-control-height: 2.5rem;
   --ngxsmk-motion-duration: var(--ngxsmk-duration-normal);
@@ -67,6 +67,43 @@
   --ngxsmk-switch-thumb-size: 0.875rem;
   --ngxsmk-switch-thumb-bg: var(--ngxsmk-color-surface);
   --ngxsmk-switch-checked-bg: var(--ngxsmk-color-primary);
+  --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);
+  --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);
   --ngxsmk-control-height-sm: 2rem;
   --ngxsmk-control-height-md: 2.5rem;
   --ngxsmk-control-height-lg: 3rem;
@@ -79,6 +116,14 @@
   --ngxsmk-tracking-tight: -0.02em;
   --ngxsmk-tracking-normal: 0;
   --ngxsmk-tracking-wide: 0.08em;
+  --ngxsmk-font-weight-regular: 400;
+  --ngxsmk-font-weight-medium: 500;
+  --ngxsmk-font-weight-semibold: 600;
+  --ngxsmk-font-weight-bold: 700;
+  --ngxsmk-leading-none: 1;
+  --ngxsmk-leading-tight: 1.25;
+  --ngxsmk-leading-normal: 1.5;
+  --ngxsmk-leading-relaxed: 1.625;
   --ngxsmk-space-0: 0px;
   --ngxsmk-space-1: 0.25rem;
   --ngxsmk-space-2: 0.5rem;
@@ -177,16 +222,16 @@
   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-secondary: #ED3AAB;
+  --ngxsmk-color-primary-hover: #100038;
+  --ngxsmk-color-primary-active: #100038;
+  --ngxsmk-color-primary-container: #ECE6FF;
+  --ngxsmk-color-on-primary-container: #2C006A;
+  --ngxsmk-color-secondary: #CD007B;
   --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-secondary-hover: #080000;
+  --ngxsmk-color-secondary-active: #080000;
+  --ngxsmk-color-secondary-container: #FFE0ED;
+  --ngxsmk-color-on-secondary-container: #510026;
   --ngxsmk-color-background: #F1F4F7;
   --ngxsmk-color-on-background: #0A1317;
   --ngxsmk-color-surface: #FFFFFF;
@@ -206,43 +251,51 @@
   --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-shadow-focus: 0 0 0 2px #ECE6FF, 0 0 0 4px color-mix(in srgb, #7C3AED 45%, transparent);
+  --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;
+  --ngxsmk-color-tertiary: #D00071;
   --ngxsmk-color-on-tertiary: #FFFFFF;
-  --ngxsmk-color-tertiary-container: #FCE3F1;
-  --ngxsmk-color-on-tertiary-container: #750B47;
+  --ngxsmk-color-tertiary-container: #FFE0EB;
+  --ngxsmk-color-on-tertiary-container: #530020;
   --ngxsmk-color-success: #0D8626;
   --ngxsmk-color-on-success: #FFFFFF;
-  --ngxsmk-color-success-container: #E3FCE8;
-  --ngxsmk-color-on-success-container: #0D8626;
+  --ngxsmk-color-success-container: #DFF1DF;
+  --ngxsmk-color-on-success-container: #004300;
   --ngxsmk-color-warning: #E9AF08;
   --ngxsmk-color-on-warning: #FFFFFF;
-  --ngxsmk-color-warning-container: #FEF7E1;
-  --ngxsmk-color-on-warning-container: #9E7705;
+  --ngxsmk-color-warning-container: #F5EAD5;
+  --ngxsmk-color-on-warning-container: #522700;
   --ngxsmk-color-error: #E3193B;
   --ngxsmk-color-on-error: #FFFFFF;
-  --ngxsmk-color-error-container: #FCE3E8;
-  --ngxsmk-color-on-error-container: #931026;
+  --ngxsmk-color-error-container: #FFE1DF;
+  --ngxsmk-color-on-error-container: #780000;
   --ngxsmk-color-info: #2563EB;
   --ngxsmk-color-on-info: #FFFFFF;
-  --ngxsmk-color-info-container: #E3EBFC;
-  --ngxsmk-color-on-info-container: #0E3895;
+  --ngxsmk-color-info-container: #DDECFF;
+  --ngxsmk-color-on-info-container: #001E8D;
 }
 
 :root.dark, :root.dark body, .dark {
   color-scheme: dark;
-  --ngxsmk-color-primary: #9560F0;
+  --ngxsmk-color-primary: #9B6EFF;
   --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-primary-hover: #BCA2FF;
+  --ngxsmk-color-primary-active: #D6C9FF;
+  --ngxsmk-color-primary-container: #2C006A;
+  --ngxsmk-color-on-primary-container: #ECE6FF;
+  --ngxsmk-color-secondary: #E9509A;
   --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-secondary-hover: #FE8EBD;
+  --ngxsmk-color-secondary-active: #FFBCD8;
+  --ngxsmk-color-secondary-container: #510026;
+  --ngxsmk-color-on-secondary-container: #FFE0ED;
   --ngxsmk-color-background: #111112;
   --ngxsmk-color-on-background: #DFE2E5;
   --ngxsmk-color-surface: #1F1F22;
@@ -260,29 +313,37 @@
   --ngxsmk-color-surface-3: #3A4650;
   --ngxsmk-color-surface-4: #4E606F;
   --ngxsmk-color-surface-5: #778593;
-  --ngxsmk-color-ring: #9560F0;
+  --ngxsmk-color-ring: #9B6EFF;
   --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: #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, #9B6EFF 25%, transparent), 0 0 0 4px color-mix(in srgb, #9B6EFF 45%, transparent);
+  --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;
+  --ngxsmk-color-tertiary: #EB5090;
+  --ngxsmk-color-on-tertiary: #2B000C;
+  --ngxsmk-color-tertiary-container: #530020;
+  --ngxsmk-color-on-tertiary-container: #FFE0EB;
+  --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) {

package/tailwind-v4.css

@@ -0,0 +1,234 @@
+/*
+ * Tailwind CSS v4 theme for NGXSMK.
+ *
+ * Usage:
+ * ```css
+ * @import "tailwindcss";
+ * @import "@ngxsmk/theme/tailwind/v4.css";
+ * ```
+ */
+@import 'tailwindcss';
+
+@theme {
+  /* ── Colors ────────────────────────────────────────────── */
+  --color-primary: var(--ngxsmk-color-primary);
+  --color-primary-hover: var(--ngxsmk-color-primary-hover);
+  --color-primary-active: var(--ngxsmk-color-primary-active);
+  --color-primary-container: var(--ngxsmk-color-primary-container);
+  --color-on-primary: var(--ngxsmk-color-on-primary);
+  --color-on-primary-container: var(--ngxsmk-color-on-primary-container);
+
+  --color-primary-50: var(--ngxsmk-color-brand-50);
+  --color-primary-100: var(--ngxsmk-color-brand-100);
+  --color-primary-200: var(--ngxsmk-color-brand-200);
+  --color-primary-300: var(--ngxsmk-color-brand-300);
+  --color-primary-400: var(--ngxsmk-color-brand-400);
+  --color-primary-500: var(--ngxsmk-color-brand-500);
+  --color-primary-600: var(--ngxsmk-color-brand-600);
+  --color-primary-700: var(--ngxsmk-color-brand-700);
+  --color-primary-800: var(--ngxsmk-color-brand-800);
+  --color-primary-900: var(--ngxsmk-color-brand-900);
+  --color-primary-950: var(--ngxsmk-color-brand-950);
+
+  --color-secondary: var(--ngxsmk-color-secondary);
+  --color-secondary-hover: var(--ngxsmk-color-secondary-hover);
+  --color-secondary-active: var(--ngxsmk-color-secondary-active);
+  --color-secondary-container: var(--ngxsmk-color-secondary-container);
+  --color-on-secondary: var(--ngxsmk-color-on-secondary);
+  --color-on-secondary-container: var(--ngxsmk-color-on-secondary-container);
+
+  --color-secondary-50: var(--ngxsmk-color-secondary-50);
+  --color-secondary-100: var(--ngxsmk-color-secondary-100);
+  --color-secondary-200: var(--ngxsmk-color-secondary-200);
+  --color-secondary-300: var(--ngxsmk-color-secondary-300);
+  --color-secondary-400: var(--ngxsmk-color-secondary-400);
+  --color-secondary-500: var(--ngxsmk-color-secondary-500);
+  --color-secondary-600: var(--ngxsmk-color-secondary-600);
+  --color-secondary-700: var(--ngxsmk-color-secondary-700);
+  --color-secondary-800: var(--ngxsmk-color-secondary-800);
+  --color-secondary-900: var(--ngxsmk-color-secondary-900);
+  --color-secondary-950: var(--ngxsmk-color-secondary-950);
+
+  --color-tertiary: var(--ngxsmk-color-tertiary);
+  --color-tertiary-container: var(--ngxsmk-color-tertiary-container);
+  --color-on-tertiary: var(--ngxsmk-color-on-tertiary);
+  --color-on-tertiary-container: var(--ngxsmk-color-on-tertiary-container);
+
+  --color-neutral-50: var(--ngxsmk-color-neutral-50);
+  --color-neutral-100: var(--ngxsmk-color-neutral-100);
+  --color-neutral-200: var(--ngxsmk-color-neutral-200);
+  --color-neutral-300: var(--ngxsmk-color-neutral-300);
+  --color-neutral-400: var(--ngxsmk-color-neutral-400);
+  --color-neutral-500: var(--ngxsmk-color-neutral-500);
+  --color-neutral-600: var(--ngxsmk-color-neutral-600);
+  --color-neutral-700: var(--ngxsmk-color-neutral-700);
+  --color-neutral-800: var(--ngxsmk-color-neutral-800);
+  --color-neutral-900: var(--ngxsmk-color-neutral-900);
+  --color-neutral-950: var(--ngxsmk-color-neutral-950);
+
+  --color-background: var(--ngxsmk-color-background);
+  --color-on-background: var(--ngxsmk-color-on-background);
+  --color-surface: var(--ngxsmk-color-surface);
+  --color-surface-variant: var(--ngxsmk-color-surface-variant);
+  --color-surface-hover: var(--ngxsmk-color-surface-hover);
+  --color-surface-active: var(--ngxsmk-color-surface-active);
+  --color-surface-container: var(--ngxsmk-color-surface-container);
+  --color-surface-1: var(--ngxsmk-color-surface-1);
+  --color-surface-2: var(--ngxsmk-color-surface-2);
+  --color-surface-3: var(--ngxsmk-color-surface-3);
+  --color-surface-4: var(--ngxsmk-color-surface-4);
+  --color-surface-5: var(--ngxsmk-color-surface-5);
+  --color-on-surface: var(--ngxsmk-color-on-surface);
+  --color-on-surface-variant: var(--ngxsmk-color-on-surface-variant);
+  --color-outline: var(--ngxsmk-color-outline);
+  --color-outline-strong: var(--ngxsmk-color-outline-strong);
+  --color-outline-variant: var(--ngxsmk-color-outline-variant);
+  --color-ring: var(--ngxsmk-color-ring);
+  --color-backdrop: var(--ngxsmk-color-backdrop);
+
+  --color-error: var(--ngxsmk-color-error);
+  --color-error-container: var(--ngxsmk-color-error-container);
+  --color-on-error: var(--ngxsmk-color-on-error);
+  --color-on-error-container: var(--ngxsmk-color-on-error-container);
+  --color-success: var(--ngxsmk-color-success);
+  --color-success-container: var(--ngxsmk-color-success-container);
+  --color-on-success: var(--ngxsmk-color-on-success);
+  --color-on-success-container: var(--ngxsmk-color-on-success-container);
+  --color-warning: var(--ngxsmk-color-warning);
+  --color-warning-container: var(--ngxsmk-color-warning-container);
+  --color-on-warning: var(--ngxsmk-color-on-warning);
+  --color-on-warning-container: var(--ngxsmk-color-on-warning-container);
+  --color-info: var(--ngxsmk-color-info);
+  --color-info-container: var(--ngxsmk-color-info-container);
+  --color-on-info: var(--ngxsmk-color-on-info);
+  --color-on-info-container: var(--ngxsmk-color-on-info-container);
+
+  --color-chart-1: var(--ngxsmk-chart-1);
+  --color-chart-2: var(--ngxsmk-chart-2);
+  --color-chart-3: var(--ngxsmk-chart-3);
+  --color-chart-4: var(--ngxsmk-chart-4);
+  --color-chart-5: var(--ngxsmk-chart-5);
+  --color-chart-6: var(--ngxsmk-chart-6);
+  --color-chart-7: var(--ngxsmk-chart-7);
+  --color-chart-8: var(--ngxsmk-chart-8);
+
+  /* ── Border Radius ─────────────────────────────────────── */
+  --radius-none: var(--ngxsmk-radius-none);
+  --radius-sm: var(--ngxsmk-radius-sm);
+  --radius-md: var(--ngxsmk-radius-md);
+  --radius-lg: var(--ngxsmk-radius-lg);
+  --radius-xl: var(--ngxsmk-radius-xl);
+  --radius-2xl: var(--ngxsmk-radius-2xl);
+  --radius-3xl: var(--ngxsmk-radius-3xl);
+  --radius-full: var(--ngxsmk-radius-full);
+
+  /* ── Spacing ───────────────────────────────────────────── */
+  --spacing-ngxsmk-0: var(--ngxsmk-space-0);
+  --spacing-ngxsmk-0-5: var(--ngxsmk-space-0-5);
+  --spacing-ngxsmk-1: var(--ngxsmk-space-1);
+  --spacing-ngxsmk-1-5: var(--ngxsmk-space-1-5);
+  --spacing-ngxsmk-2: var(--ngxsmk-space-2);
+  --spacing-ngxsmk-3: var(--ngxsmk-space-3);
+  --spacing-ngxsmk-4: var(--ngxsmk-space-4);
+  --spacing-ngxsmk-5: var(--ngxsmk-space-5);
+  --spacing-ngxsmk-6: var(--ngxsmk-space-6);
+  --spacing-ngxsmk-8: var(--ngxsmk-space-8);
+  --spacing-ngxsmk-10: var(--ngxsmk-space-10);
+  --spacing-ngxsmk-12: var(--ngxsmk-space-12);
+  --spacing-ngxsmk-16: var(--ngxsmk-space-16);
+  --spacing-ngxsmk-20: var(--ngxsmk-space-20);
+  --spacing-ngxsmk-24: var(--ngxsmk-space-24);
+  --spacing-ngxsmk-32: var(--ngxsmk-space-32);
+
+  /* ── Shadows ───────────────────────────────────────────── */
+  --shadow-sm: var(--ngxsmk-shadow-sm);
+  --shadow-md: var(--ngxsmk-shadow-md);
+  --shadow-lg: var(--ngxsmk-shadow-lg);
+  --shadow-xl: var(--ngxsmk-shadow-xl);
+  --shadow-2xl: var(--ngxsmk-shadow-2xl);
+
+  /* ── Fonts ─────────────────────────────────────────────── */
+  --font-sans: var(--ngxsmk-font-sans);
+  --font-mono: var(--ngxsmk-font-mono);
+
+  /* ── Font Sizes (typography roles) ─────────────────────── */
+  --text-display-lg: var(--ngxsmk-text-display-lg-size);
+  --text-display-md: var(--ngxsmk-text-display-md-size);
+  --text-display-sm: var(--ngxsmk-text-display-sm-size);
+  --text-headline-lg: var(--ngxsmk-text-headline-lg-size);
+  --text-headline-md: var(--ngxsmk-text-headline-md-size);
+  --text-headline-sm: var(--ngxsmk-text-headline-sm-size);
+  --text-title-lg: var(--ngxsmk-text-title-lg-size);
+  --text-title-md: var(--ngxsmk-text-title-md-size);
+  --text-title-sm: var(--ngxsmk-text-title-sm-size);
+  --text-body-lg: var(--ngxsmk-text-body-lg-size);
+  --text-body-md: var(--ngxsmk-text-body-md-size);
+  --text-body-sm: var(--ngxsmk-text-body-sm-size);
+  --text-body-xs: var(--ngxsmk-text-body-xs-size);
+  --text-label-lg: var(--ngxsmk-text-label-lg-size);
+  --text-label-md: var(--ngxsmk-text-label-md-size);
+  --text-label-sm: var(--ngxsmk-text-label-sm-size);
+
+  /* ── Line Heights ──────────────────────────────────────── */
+  --leading-display-lg: var(--ngxsmk-text-display-lg-line);
+  --leading-display-md: var(--ngxsmk-text-display-md-line);
+  --leading-display-sm: var(--ngxsmk-text-display-sm-line);
+  --leading-headline-lg: var(--ngxsmk-text-headline-lg-line);
+  --leading-headline-md: var(--ngxsmk-text-headline-md-line);
+  --leading-headline-sm: var(--ngxsmk-text-headline-sm-line);
+  --leading-title-lg: var(--ngxsmk-text-title-lg-line);
+  --leading-title-md: var(--ngxsmk-text-title-md-line);
+  --leading-title-sm: var(--ngxsmk-text-title-sm-line);
+  --leading-body-lg: var(--ngxsmk-text-body-lg-line);
+  --leading-body-md: var(--ngxsmk-text-body-md-line);
+  --leading-body-sm: var(--ngxsmk-text-body-sm-line);
+  --leading-body-xs: var(--ngxsmk-text-body-xs-line);
+  --leading-label-lg: var(--ngxsmk-text-label-lg-line);
+  --leading-label-md: var(--ngxsmk-text-label-md-line);
+  --leading-label-sm: var(--ngxsmk-text-label-sm-line);
+
+  /* ── Font Weights ──────────────────────────────────────── */
+  --font-weight-display-lg: var(--ngxsmk-text-display-lg-weight);
+  --font-weight-display-md: var(--ngxsmk-text-display-md-weight);
+  --font-weight-display-sm: var(--ngxsmk-text-display-sm-weight);
+  --font-weight-headline-lg: var(--ngxsmk-text-headline-lg-weight);
+  --font-weight-headline-md: var(--ngxsmk-text-headline-md-weight);
+  --font-weight-headline-sm: var(--ngxsmk-text-headline-sm-weight);
+  --font-weight-title-lg: var(--ngxsmk-text-title-lg-weight);
+  --font-weight-title-md: var(--ngxsmk-text-title-md-weight);
+  --font-weight-title-sm: var(--ngxsmk-text-title-sm-weight);
+  --font-weight-body-lg: var(--ngxsmk-text-body-lg-weight);
+  --font-weight-body-md: var(--ngxsmk-text-body-md-weight);
+  --font-weight-body-sm: var(--ngxsmk-text-body-sm-weight);
+  --font-weight-body-xs: var(--ngxsmk-text-body-xs-weight);
+  --font-weight-label-lg: var(--ngxsmk-text-label-lg-weight);
+  --font-weight-label-md: var(--ngxsmk-text-label-md-weight);
+  --font-weight-label-sm: var(--ngxsmk-text-label-sm-weight);
+
+  /* ── Transitions ───────────────────────────────────────── */
+  --duration-instant: var(--ngxsmk-duration-instant);
+  --duration-fast: var(--ngxsmk-duration-fast);
+  --duration-normal: var(--ngxsmk-duration-normal);
+  --duration-slow: var(--ngxsmk-duration-slow);
+  --duration-slower: var(--ngxsmk-duration-slower);
+  --ease-linear: var(--ngxsmk-ease-linear);
+  --ease-in: var(--ngxsmk-ease-in);
+  --ease-out: var(--ngxsmk-ease-out);
+  --ease-in-out: var(--ngxsmk-ease-in-out);
+  --ease-emphasized: var(--ngxsmk-ease-emphasized);
+
+  /* ── Z-Index ───────────────────────────────────────────── */
+  --z-dropdown: var(--ngxsmk-z-dropdown);
+  --z-sticky: var(--ngxsmk-z-sticky);
+  --z-banner: var(--ngxsmk-z-banner);
+  --z-overlay: var(--ngxsmk-z-overlay);
+  --z-modal: var(--ngxsmk-z-modal);
+  --z-popover: var(--ngxsmk-z-popover);
+  --z-toast: var(--ngxsmk-z-toast);
+  --z-tooltip: var(--ngxsmk-z-tooltip);
+
+  /* ── Opacity ───────────────────────────────────────────── */
+  --opacity-disabled: var(--ngxsmk-opacity-disabled);
+  --opacity-muted: var(--ngxsmk-opacity-muted);
+  --opacity-faint: var(--ngxsmk-opacity-faint);
+}