@ngxsmk/theme 2.0.0 → 3.1.0

package/fesm2022/ngxsmk-theme.mjs

@@ -1,6 +1,6 @@
 import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Injectable, signal, computed, effect } from '@angular/core';
+import { inject, Injectable, signal, computed, effect, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER } from '@angular/core';
 
 /**
  * Design token model for the NGXSMK universal theme engine.
@@ -303,6 +303,15 @@ const EASING = {
     'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
     emphasized: 'cubic-bezier(0.2, 0, 0, 1)',
 };
+/** Safe-area inset defaults (fallback to CSS env() variables for iOS/Android/Ionic). */
+const SAFE_AREA = {
+    top: 'env(safe-area-inset-top, 0px)',
+    bottom: 'env(safe-area-inset-bottom, 0px)',
+    left: 'env(safe-area-inset-left, 0px)',
+    right: 'env(safe-area-inset-right, 0px)',
+};
+/** Minimum touch target size for mobile accessibility (Apple HIG & Android Material). */
+const TOUCH_TARGET_MIN = '44px';
 
 /**
  * Identity helper that gives `ngxsmk.config.ts` files full type inference:
@@ -329,9 +338,9 @@ function resolveTheme(config) {
         fontFamily: { ...DEFAULT_FONT_FAMILY, ...config.typography?.fontFamily },
         typography: DEFAULT_TYPOGRAPHY,
         spacing: SPACING,
-        radius: RADIUS,
+        radius: { ...RADIUS, ...(config.radiusScale ?? {}) },
         radiusBase: config.borderRadius ?? 'md',
-        shadow: SHADOW,
+        shadow: { ...SHADOW, ...(config.shadowScale ?? {}) },
         duration: DURATION,
         easing: EASING,
         zIndex: Z_INDEX,
@@ -362,12 +371,25 @@ const COMPONENT_TOKEN_DEFAULTS = {
         '--ngxsmk-button-font-weight': '500',
         '--ngxsmk-button-radius': 'var(--ngxsmk-radius-base)',
         '--ngxsmk-button-disabled-opacity': '0.5',
+        '--ngxsmk-button-border-width': '1px',
+        '--ngxsmk-button-gap': 'var(--ngxsmk-space-2)',
+    },
+    input: {
+        '--ngxsmk-input-bg': 'var(--ngxsmk-color-surface)',
+        '--ngxsmk-input-color': 'var(--ngxsmk-color-on-surface)',
+        '--ngxsmk-input-border': 'var(--ngxsmk-color-outline-strong)',
+        '--ngxsmk-input-radius': 'var(--ngxsmk-radius-base)',
+        '--ngxsmk-input-height': 'var(--ngxsmk-control-height)',
+        '--ngxsmk-input-padding-inline': 'var(--ngxsmk-space-3)',
+        '--ngxsmk-input-placeholder': 'var(--ngxsmk-color-on-surface-variant)',
     },
     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)',
+        '--ngxsmk-card-border-width': '1px',
+        '--ngxsmk-card-padding': 'var(--ngxsmk-space-5)',
     },
     accordion: {
         '--ngxsmk-accordion-bg': 'var(--ngxsmk-color-surface)',
@@ -389,6 +411,122 @@ const COMPONENT_TOKEN_DEFAULTS = {
         '--ngxsmk-switch-thumb-bg': 'var(--ngxsmk-color-surface)',
         '--ngxsmk-switch-checked-bg': 'var(--ngxsmk-color-primary)',
     },
+    checkbox: {
+        '--ngxsmk-checkbox-size': '1.125rem',
+        '--ngxsmk-checkbox-radius': 'var(--ngxsmk-radius-sm)',
+        '--ngxsmk-checkbox-border': 'var(--ngxsmk-color-outline-strong)',
+        '--ngxsmk-checkbox-checked-bg': 'var(--ngxsmk-color-primary)',
+    },
+    badge: {
+        '--ngxsmk-badge-radius': 'var(--ngxsmk-radius-full)',
+        '--ngxsmk-badge-font-weight': '600',
+        '--ngxsmk-badge-padding-inline': '0.5rem',
+        '--ngxsmk-badge-padding-block': '0.125rem',
+        '--ngxsmk-badge-border-mix': '20%',
+    },
+    alert: {
+        '--ngxsmk-alert-radius': 'var(--ngxsmk-radius-lg)',
+        '--ngxsmk-alert-border-mix': '22%',
+        '--ngxsmk-alert-padding': 'var(--ngxsmk-space-4)',
+    },
+    dialog: {
+        '--ngxsmk-dialog-radius': 'var(--ngxsmk-radius-2xl)',
+        '--ngxsmk-dialog-shadow': 'var(--ngxsmk-shadow-xl)',
+        '--ngxsmk-dialog-bg': 'var(--ngxsmk-color-surface-elevated)',
+        '--ngxsmk-dialog-backdrop': 'var(--ngxsmk-color-backdrop)',
+        '--ngxsmk-dialog-blur': '4px',
+        '--ngxsmk-dialog-max-width': '28rem',
+    },
+    sheet: {
+        '--ngxsmk-sheet-radius': 'var(--ngxsmk-radius-xl)',
+        '--ngxsmk-sheet-shadow': 'var(--ngxsmk-shadow-xl)',
+        '--ngxsmk-sheet-bg': 'var(--ngxsmk-color-surface-elevated)',
+        '--ngxsmk-sheet-backdrop': 'var(--ngxsmk-color-backdrop)',
+        '--ngxsmk-sheet-width': '24rem',
+    },
+    lightbox: {
+        '--ngxsmk-lightbox-backdrop': 'rgb(0 0 0 / 0.9)',
+        '--ngxsmk-lightbox-fg': '#ffffff',
+        '--ngxsmk-lightbox-control-bg': 'rgb(255 255 255 / 0.12)',
+        '--ngxsmk-lightbox-control-bg-hover': 'rgb(255 255 255 / 0.22)',
+    },
+    toast: {
+        '--ngxsmk-toast-radius': 'var(--ngxsmk-radius-lg)',
+        '--ngxsmk-toast-shadow': 'var(--ngxsmk-shadow-lg)',
+        '--ngxsmk-toast-bg': 'var(--ngxsmk-color-surface-elevated)',
+        '--ngxsmk-toast-accent-width': '3px',
+    },
+    table: {
+        '--ngxsmk-table-border': 'var(--ngxsmk-color-outline)',
+        '--ngxsmk-table-header-bg': 'color-mix(in srgb, var(--ngxsmk-color-surface-variant) 55%, transparent)',
+        '--ngxsmk-table-row-hover': 'var(--ngxsmk-color-surface-hover)',
+        '--ngxsmk-table-stripe': 'color-mix(in srgb, var(--ngxsmk-color-surface-variant) 35%, transparent)',
+        '--ngxsmk-table-drop-indicator': 'inset 2px 0 0 var(--ngxsmk-color-primary)',
+        '--ngxsmk-table-cell-padding': '0.625rem 0.75rem',
+    },
+    tabs: {
+        '--ngxsmk-tabs-indicator': '2px',
+        '--ngxsmk-tabs-radius': 'var(--ngxsmk-radius-md)',
+        '--ngxsmk-tabs-gap': 'var(--ngxsmk-space-1)',
+    },
+    select: {
+        '--ngxsmk-select-bg': 'var(--ngxsmk-color-surface)',
+        '--ngxsmk-select-border': 'var(--ngxsmk-color-outline-strong)',
+        '--ngxsmk-select-radius': 'var(--ngxsmk-radius-base)',
+        '--ngxsmk-select-list-shadow': 'var(--ngxsmk-shadow-lg)',
+        '--ngxsmk-select-list-radius': 'var(--ngxsmk-radius-lg)',
+    },
+    menu: {
+        '--ngxsmk-menu-bg': 'var(--ngxsmk-color-surface-elevated)',
+        '--ngxsmk-menu-radius': 'var(--ngxsmk-radius-lg)',
+        '--ngxsmk-menu-shadow': 'var(--ngxsmk-shadow-lg)',
+        '--ngxsmk-menu-border': 'var(--ngxsmk-color-outline)',
+        '--ngxsmk-menu-item-radius': 'var(--ngxsmk-radius-md)',
+    },
+    pagination: {
+        '--ngxsmk-pagination-size': '2.25rem',
+        '--ngxsmk-pagination-radius': 'var(--ngxsmk-radius-md)',
+    },
+    formField: {
+        '--ngxsmk-form-field-gap': 'var(--ngxsmk-space-1-5)',
+        '--ngxsmk-form-field-label-weight': '500',
+    },
+    radio: {
+        '--ngxsmk-radio-size': '1.125rem',
+        '--ngxsmk-radio-dot-size': '0.5rem',
+        '--ngxsmk-radio-border': 'var(--ngxsmk-color-outline-strong)',
+    },
+    dataTable: {
+        '--ngxsmk-data-table-border': 'var(--ngxsmk-color-outline)',
+        '--ngxsmk-data-table-radius': 'var(--ngxsmk-radius-md)',
+        '--ngxsmk-data-table-filter-bg': 'color-mix(in srgb, var(--ngxsmk-color-surface-variant) 40%, transparent)',
+        '--ngxsmk-data-table-filter-label-size': '0.7rem',
+        '--ngxsmk-data-table-page-size': '2rem',
+        '--ngxsmk-data-table-loading-height': '3px',
+    },
+    aiChat: {
+        '--ngxsmk-ai-chat-radius': 'var(--ngxsmk-radius-xl)',
+        '--ngxsmk-ai-chat-border': 'var(--ngxsmk-color-outline)',
+        '--ngxsmk-ai-chat-bg': 'var(--ngxsmk-color-surface)',
+        '--ngxsmk-ai-chat-header-bg': 'var(--ngxsmk-color-surface-variant)',
+        '--ngxsmk-ai-chat-bubble-bg': 'var(--ngxsmk-color-surface-variant)',
+        '--ngxsmk-ai-chat-bubble-user-bg': 'var(--ngxsmk-color-primary)',
+        '--ngxsmk-ai-chat-bubble-radius': 'var(--ngxsmk-radius-lg)',
+        '--ngxsmk-ai-chat-composer-radius': 'var(--ngxsmk-radius-full)',
+    },
+    promptInput: {
+        '--ngxsmk-prompt-radius': 'var(--ngxsmk-radius-xl)',
+        '--ngxsmk-prompt-border': 'var(--ngxsmk-color-outline-strong)',
+        '--ngxsmk-prompt-shadow': 'var(--ngxsmk-shadow-sm)',
+        '--ngxsmk-prompt-bg': 'var(--ngxsmk-color-surface)',
+        '--ngxsmk-prompt-send-radius': 'var(--ngxsmk-radius-full)',
+    },
+    chatBubble: {
+        '--ngxsmk-chat-bubble-radius': 'var(--ngxsmk-radius-lg)',
+        '--ngxsmk-chat-bubble-bg': 'var(--ngxsmk-color-surface-container)',
+        '--ngxsmk-chat-bubble-user-bg': 'var(--ngxsmk-color-primary-container)',
+        '--ngxsmk-chat-bubble-padding': 'var(--ngxsmk-space-2) var(--ngxsmk-space-3)',
+    },
     spreadsheet: {
         '--ngxsmk-spreadsheet-bg': 'var(--ngxsmk-color-surface)',
         '--ngxsmk-spreadsheet-header-bg': 'var(--ngxsmk-color-surface-variant)',
@@ -420,16 +558,22 @@ const COMPONENT_TOKEN_DEFAULTS = {
         '--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-focus-shadow': 'var(--ngxsmk-focus-ring)',
         '--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-error-focus-shadow': 'var(--ngxsmk-focus-ring-error)',
         '--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-height': 'var(--ngxsmk-control-height)',
         '--ngxsmk-input-group-padding': '0.75rem',
         '--ngxsmk-input-group-gap': 'var(--ngxsmk-space-2)',
         '--ngxsmk-input-group-font': 'var(--ngxsmk-font-sans)',
     },
+    heatmap: {
+        '--ngxsmk-heatmap-level-1': 'color-mix(in srgb, var(--ngxsmk-color-success) 28%, var(--ngxsmk-color-surface-variant))',
+        '--ngxsmk-heatmap-level-2': 'color-mix(in srgb, var(--ngxsmk-color-success) 52%, var(--ngxsmk-color-surface-variant))',
+        '--ngxsmk-heatmap-level-3': 'color-mix(in srgb, var(--ngxsmk-color-success) 76%, var(--ngxsmk-color-surface-variant))',
+        '--ngxsmk-heatmap-level-4': 'var(--ngxsmk-color-success)',
+    },
 };
 /** Tokens that do not change between light and dark mode. */
 function staticVars(theme) {
@@ -454,6 +598,12 @@ function staticVars(theme) {
         '--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)',
+        // Mobile viewport & safe-area tokens (iOS / Android / Ionic)
+        '--ngxsmk-safe-area-top': 'env(safe-area-inset-top, 0px)',
+        '--ngxsmk-safe-area-bottom': 'env(safe-area-inset-bottom, 0px)',
+        '--ngxsmk-safe-area-left': 'env(safe-area-inset-left, 0px)',
+        '--ngxsmk-safe-area-right': 'env(safe-area-inset-right, 0px)',
+        '--ngxsmk-touch-target-min': '44px',
         // Component-specific token defaults
         ...Object.values(COMPONENT_TOKEN_DEFAULTS).reduce((merged, tokens) => ({ ...merged, ...tokens }), {}),
     };
@@ -532,12 +682,17 @@ function lightVars(theme) {
         '--ngxsmk-color-on-surface': '#0A1317',
         '--ngxsmk-color-surface-variant': theme.neutral[100],
         '--ngxsmk-color-on-surface-variant': theme.neutral[500],
+        '--ngxsmk-color-surface-muted': theme.neutral[50],
+        '--ngxsmk-color-surface-elevated': '#FFFFFF',
+        '--ngxsmk-color-surface-overlay': '#FFFFFF',
+        '--ngxsmk-color-on-surface-muted': theme.neutral[400],
         '--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-outline-subtle': 'rgb(5 54 89 / 0.05)',
         // Elevation ladder
         '--ngxsmk-color-surface-1': '#FFFFFF',
         '--ngxsmk-color-surface-2': theme.neutral[50],
@@ -599,12 +754,17 @@ function darkVars(theme) {
         '--ngxsmk-color-on-surface': '#DFE2E5',
         '--ngxsmk-color-surface-variant': '#28292C',
         '--ngxsmk-color-on-surface-variant': '#AAAFB5',
+        '--ngxsmk-color-surface-muted': '#141416',
+        '--ngxsmk-color-surface-elevated': '#28292C',
+        '--ngxsmk-color-surface-overlay': '#2F3136',
+        '--ngxsmk-color-on-surface-muted': '#777C85',
         '--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-outline-subtle': 'rgb(242 244 246 / 0.05)',
         // Elevation ladder
         '--ngxsmk-color-surface-1': theme.neutral[800],
         '--ngxsmk-color-surface-2': theme.neutral[700],
@@ -738,6 +898,9 @@ const neutralPreset = {
 /**
  * Default preset: Emerald green. This preset generates the prebuilt
  * `ngxsmk.css` stylesheet shipped with @ngxsmk/theme.
+ *
+ * **Classic contract:** keep this visually stable for existing consumers.
+ * Premium Ink lives in `inkPreset` / `ngxsmk.ink.css` as an opt-in.
  */
 const emeraldPreset = {
     name: 'emerald',
@@ -747,59 +910,298 @@ const rosePreset = {
     name: 'rose',
     brand: { primary: '#E11D48' },
 };
+/**
+ * Cool graphite neutrals for the Ink & precision look. Independent of the
+ * Classic `DEFAULT_NEUTRAL` so emerald/violet/rose stay unchanged.
+ */
+const INK_NEUTRAL = {
+    50: '#F6F7F8',
+    100: '#EBEDF0',
+    200: '#D5D8DE',
+    300: '#B0B5BF',
+    400: '#7E8491',
+    500: '#5A606C',
+    600: '#454954',
+    700: '#33363E',
+    800: '#1C1E24',
+    900: '#12141A',
+    950: '#0A0B0E',
+};
+/**
+ * Opt-in premium preset: Ink & precision.
+ * Generates `ngxsmk.ink.css`. Does not replace the default `ngxsmk.css`.
+ *
+ * Consumers:
+ * ```css
+ * @import '@ngxsmk/theme/styles/ngxsmk.ink.css';
+ * ```
+ * or `theme.applyTheme(inkPreset)`.
+ */
+const inkPreset = {
+    name: 'ink',
+    brand: { primary: '#0F766E' },
+    neutral: INK_NEUTRAL,
+    typography: {
+        fontFamily: {
+            sans: "'Geist Sans', 'Geist Sans Fallback', system-ui, -apple-system, sans-serif",
+            mono: "'Geist Mono', 'Geist Mono Fallback', monospace",
+        },
+    },
+    borderRadius: 'md',
+    radiusScale: {
+        sm: '0.1875rem', // 3px
+        md: '0.375rem', // 6px — element base
+        lg: '0.5rem', // 8px — cards / popovers
+        xl: '0.625rem', // 10px
+        '2xl': '0.75rem', // 12px
+        '3xl': '1rem', // 16px — page surfaces (was 28px in Classic)
+    },
+    shadowScale: {
+        sm: '0 0 0 1px rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.04)',
+        md: '0 0 0 1px rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.05), 0 4px 10px rgb(0 0 0 / 0.05)',
+        lg: '0 0 0 1px rgb(0 0 0 / 0.05), 0 2px 4px rgb(0 0 0 / 0.05), 0 10px 28px rgb(0 0 0 / 0.08)',
+        xl: '0 0 0 1px rgb(0 0 0 / 0.05), 0 4px 8px rgb(0 0 0 / 0.06), 0 18px 40px rgb(0 0 0 / 0.1)',
+        '2xl': '0 0 0 1px rgb(0 0 0 / 0.06), 0 8px 16px rgb(0 0 0 / 0.08), 0 28px 56px rgb(0 0 0 / 0.12)',
+    },
+    overrides: {
+        light: {
+            // Graphite canvas — quieter than Classic cool-blue wash.
+            '--ngxsmk-color-background': '#F4F5F7',
+            '--ngxsmk-color-surface': '#FFFFFF',
+            '--ngxsmk-color-surface-elevated': '#FFFFFF',
+            '--ngxsmk-color-surface-overlay': '#FFFFFF',
+            '--ngxsmk-color-surface-variant': '#EBEDF0',
+            '--ngxsmk-color-on-background': '#0A0B0E',
+            '--ngxsmk-color-on-surface': '#0A0B0E',
+            '--ngxsmk-color-on-surface-variant': '#5A606C',
+            '--ngxsmk-color-surface-hover': 'rgb(10 11 14 / 0.04)',
+            '--ngxsmk-color-surface-active': 'rgb(10 11 14 / 0.08)',
+            '--ngxsmk-color-outline': 'rgb(10 11 14 / 0.1)',
+            '--ngxsmk-color-outline-strong': '#D5D8DE',
+            '--ngxsmk-color-outline-variant': 'rgb(10 11 14 / 0.06)',
+            '--ngxsmk-color-outline-subtle': 'rgb(10 11 14 / 0.05)',
+            '--ngxsmk-color-backdrop': 'rgb(10 11 14 / 0.48)',
+            '--ngxsmk-color-ring': '#0F766E',
+            // Precision focus — tighter than Classic double ring.
+            '--ngxsmk-shadow-focus': '0 0 0 1px #FFFFFF, 0 0 0 3px color-mix(in srgb, #0F766E 55%, transparent)',
+            // Density.
+            '--ngxsmk-control-height': '2.25rem',
+            '--ngxsmk-control-height-sm': '1.875rem',
+            '--ngxsmk-control-height-md': '2.25rem',
+            '--ngxsmk-control-height-lg': '2.75rem',
+            // Component chrome — border-first, no float.
+            '--ngxsmk-hover-lift': 'none',
+            '--ngxsmk-button-font-weight': '600',
+            '--ngxsmk-button-radius': 'var(--ngxsmk-radius-md)',
+            '--ngxsmk-input-border': 'var(--ngxsmk-color-outline)',
+            '--ngxsmk-input-height': 'var(--ngxsmk-control-height)',
+            '--ngxsmk-input-group-height': '2.25rem',
+            '--ngxsmk-input-group-border': 'var(--ngxsmk-color-outline)',
+            '--ngxsmk-card-shadow': 'none',
+            '--ngxsmk-card-radius': 'var(--ngxsmk-radius-lg)',
+            '--ngxsmk-card-border-width': '1px',
+            '--ngxsmk-dialog-radius': 'var(--ngxsmk-radius-lg)',
+            '--ngxsmk-dialog-blur': '8px',
+            '--ngxsmk-sheet-radius': 'var(--ngxsmk-radius-lg)',
+            '--ngxsmk-toast-radius': 'var(--ngxsmk-radius-md)',
+            '--ngxsmk-toast-accent-width': '2px',
+            '--ngxsmk-select-border': 'var(--ngxsmk-color-outline)',
+            '--ngxsmk-menu-radius': 'var(--ngxsmk-radius-md)',
+            '--ngxsmk-pagination-size': '2rem',
+            '--ngxsmk-pagination-radius': 'var(--ngxsmk-radius-md)',
+            '--ngxsmk-table-header-bg': 'color-mix(in srgb, var(--ngxsmk-color-surface-variant) 70%, transparent)',
+            '--ngxsmk-badge-font-weight': '650',
+            '--ngxsmk-progress-height': '0.375rem',
+            // Forms — denser labels, quieter group chrome.
+            '--ngxsmk-form-field-gap': 'var(--ngxsmk-space-1)',
+            '--ngxsmk-form-field-label-weight': '600',
+            '--ngxsmk-input-group-radius': 'var(--ngxsmk-radius-md)',
+            '--ngxsmk-input-group-padding': '0.625rem',
+            '--ngxsmk-radio-border': 'var(--ngxsmk-color-outline)',
+            // Data table — ops density.
+            '--ngxsmk-data-table-radius': 'var(--ngxsmk-radius-md)',
+            '--ngxsmk-data-table-filter-bg': 'color-mix(in srgb, var(--ngxsmk-color-surface-variant) 55%, transparent)',
+            '--ngxsmk-data-table-page-size': '1.875rem',
+            '--ngxsmk-data-table-loading-height': '2px',
+            // AI surfaces — border-first console, no soft float.
+            '--ngxsmk-ai-chat-radius': 'var(--ngxsmk-radius-lg)',
+            '--ngxsmk-ai-chat-header-bg': 'var(--ngxsmk-color-surface)',
+            '--ngxsmk-ai-chat-bubble-bg': 'var(--ngxsmk-color-surface-variant)',
+            '--ngxsmk-ai-chat-bubble-radius': 'var(--ngxsmk-radius-md)',
+            '--ngxsmk-ai-chat-composer-radius': 'var(--ngxsmk-radius-md)',
+            '--ngxsmk-prompt-radius': 'var(--ngxsmk-radius-lg)',
+            '--ngxsmk-prompt-border': 'var(--ngxsmk-color-outline)',
+            '--ngxsmk-prompt-shadow': 'none',
+            '--ngxsmk-prompt-send-radius': 'var(--ngxsmk-radius-md)',
+            '--ngxsmk-chat-bubble-radius': 'var(--ngxsmk-radius-md)',
+            '--ngxsmk-chat-bubble-padding': 'var(--ngxsmk-space-2) var(--ngxsmk-space-3)',
+        },
+        dark: {
+            '--ngxsmk-color-background': '#0A0B0E',
+            '--ngxsmk-color-surface': '#12141A',
+            '--ngxsmk-color-surface-elevated': '#1C1E24',
+            '--ngxsmk-color-surface-overlay': '#1C1E24',
+            '--ngxsmk-color-surface-container': '#12141A',
+            '--ngxsmk-color-surface-variant': '#1C1E24',
+            '--ngxsmk-color-surface-1': '#12141A',
+            '--ngxsmk-color-surface-2': '#1C1E24',
+            '--ngxsmk-color-outline': 'rgb(246 247 248 / 0.12)',
+            '--ngxsmk-color-outline-strong': 'rgb(246 247 248 / 0.18)',
+            '--ngxsmk-color-outline-variant': 'rgb(246 247 248 / 0.08)',
+            '--ngxsmk-color-backdrop': 'rgb(0 0 0 / 0.62)',
+            '--ngxsmk-shadow-focus': '0 0 0 1px #12141A, 0 0 0 3px color-mix(in srgb, #2DD4BF 50%, transparent)',
+            '--ngxsmk-hover-lift': 'none',
+            '--ngxsmk-control-height': '2.25rem',
+            '--ngxsmk-control-height-sm': '1.875rem',
+            '--ngxsmk-control-height-md': '2.25rem',
+            '--ngxsmk-control-height-lg': '2.75rem',
+            '--ngxsmk-button-font-weight': '600',
+            '--ngxsmk-card-shadow': 'none',
+            '--ngxsmk-card-radius': 'var(--ngxsmk-radius-lg)',
+            '--ngxsmk-dialog-radius': 'var(--ngxsmk-radius-lg)',
+            '--ngxsmk-input-border': 'var(--ngxsmk-color-outline)',
+            '--ngxsmk-select-border': 'var(--ngxsmk-color-outline)',
+            '--ngxsmk-form-field-label-weight': '600',
+            '--ngxsmk-input-group-height': '2.25rem',
+            '--ngxsmk-ai-chat-radius': 'var(--ngxsmk-radius-lg)',
+            '--ngxsmk-ai-chat-header-bg': 'var(--ngxsmk-color-surface)',
+            '--ngxsmk-prompt-shadow': 'none',
+            '--ngxsmk-prompt-border': 'var(--ngxsmk-color-outline)',
+            '--ngxsmk-prompt-send-radius': 'var(--ngxsmk-radius-md)',
+            '--ngxsmk-data-table-filter-bg': 'color-mix(in srgb, var(--ngxsmk-color-surface-variant) 70%, transparent)',
+        },
+    },
+};
 const presets = {
     violet: violetPreset,
     neutral: neutralPreset,
     emerald: emeraldPreset,
     rose: rosePreset,
+    ink: inkPreset,
 };
 
 /**
- * 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.
+ * Maps NGXSMK semantic color roles to Ionic 7 & 8 color variable specifications.
  *
- * This adapter produces the subset Ionic needs for theming.
+ * Emits full color suites (base, rgb, contrast, contrast-rgb, shade, tint),
+ * 19-step contrast ladder (--ion-color-step-50..950), safe area mappings, and
+ * surface variables for seamless Ionic framework interoperability.
  */
 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);
+    vars(theme, options) {
+        if (options?.isDark) {
+            return this.darkVars ? this.darkVars(theme) : buildLightVars(theme);
         }
-        // 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;
+        return buildLightVars(theme);
+    },
+    darkVars(theme) {
+        return buildDarkVars(theme);
     },
 };
+function buildColorSuite(prefix, baseHex, vars) {
+    const contrastHex = getContrastHex(baseHex);
+    vars[`--ion-color-${prefix}`] = baseHex;
+    vars[`--ion-color-${prefix}-rgb`] = hexToRgbStr(baseHex);
+    vars[`--ion-color-${prefix}-contrast`] = contrastHex;
+    vars[`--ion-color-${prefix}-contrast-rgb`] = hexToRgbStr(contrastHex);
+    vars[`--ion-color-${prefix}-shade`] = shiftLightnessHex(baseHex, -12);
+    vars[`--ion-color-${prefix}-tint`] = shiftLightnessHex(baseHex, 10);
+}
+function buildLightVars(theme) {
+    const vars = {};
+    // Primary & Secondary
+    buildColorSuite('primary', theme.brandBase, vars);
+    buildColorSuite('secondary', theme.secondaryBase, vars);
+    // Tertiary (derived from brand hue + 64)
+    const tertiary = deriveScale(rotateHue(theme.brandBase, 64));
+    buildColorSuite('tertiary', tertiary[500], vars);
+    // Status & Feedback colors
+    const successHex = theme.semantic['success'] ?? '#0D8626';
+    const warningHex = theme.semantic['warning'] ?? '#E9AF08';
+    const dangerHex = theme.semantic['error'] ?? '#E3193B';
+    const infoHex = theme.semantic['info'] ?? '#2563EB';
+    buildColorSuite('success', successHex, vars);
+    buildColorSuite('warning', warningHex, vars);
+    buildColorSuite('danger', dangerHex, vars);
+    buildColorSuite('info', infoHex, vars);
+    // Medium / Light / Dark baseline scales
+    buildColorSuite('light', theme.neutral[100] ?? '#F1F4F7', vars);
+    buildColorSuite('medium', theme.neutral[500] ?? '#778593', vars);
+    buildColorSuite('dark', theme.neutral[900] ?? '#18181A', vars);
+    // Background / Surfaces
+    const bgHex = theme.neutral[50] ?? '#FFFFFF';
+    const textHex = '#0A1317';
+    vars['--ion-background-color'] = bgHex;
+    vars['--ion-background-color-rgb'] = hexToRgbStr(bgHex);
+    vars['--ion-text-color'] = textHex;
+    vars['--ion-text-color-rgb'] = hexToRgbStr(textHex);
+    vars['--ion-card-background'] = '#FFFFFF';
+    vars['--ion-item-background'] = '#FFFFFF';
+    vars['--ion-item-color'] = textHex;
+    vars['--ion-toolbar-background'] = bgHex;
+    vars['--ion-toolbar-color'] = textHex;
+    vars['--ion-tab-bar-background'] = '#FFFFFF';
+    vars['--ion-border-color'] = theme.neutral[200] ?? '#CCD3DB';
+    // Typography & Radius
+    vars['--ion-font-family'] = theme.fontFamily.sans;
+    vars['--ion-border-radius'] = theme.radius[theme.radiusBase];
+    // Stepped colors for light mode (interpolated between bg and text)
+    interpolateSteppedColors(bgHex, textHex, vars);
+    // Safe area insets
+    vars['--ion-safe-area-top'] = 'var(--ngxsmk-safe-area-top, env(safe-area-inset-top, 0px))';
+    vars['--ion-safe-area-bottom'] =
+        'var(--ngxsmk-safe-area-bottom, env(safe-area-inset-bottom, 0px))';
+    vars['--ion-safe-area-left'] = 'var(--ngxsmk-safe-area-left, env(safe-area-inset-left, 0px))';
+    vars['--ion-safe-area-right'] = 'var(--ngxsmk-safe-area-right, env(safe-area-inset-right, 0px))';
+    return vars;
+}
+function buildDarkVars(theme) {
+    const vars = {};
+    // Primary & Secondary dark adjustments
+    const primaryDark = theme.brand[400] ?? theme.brandBase;
+    const secondaryDark = theme.secondary[400] ?? theme.secondaryBase;
+    buildColorSuite('primary', primaryDark, vars);
+    buildColorSuite('secondary', secondaryDark, vars);
+    // Tertiary
+    const tertiary = deriveScale(rotateHue(theme.brandBase, 64));
+    buildColorSuite('tertiary', tertiary[400] ?? tertiary[500], vars);
+    // Status & Feedback
+    buildColorSuite('success', shiftLightnessHex(theme.semantic['success'] ?? '#0D8626', 10), vars);
+    buildColorSuite('warning', shiftLightnessHex(theme.semantic['warning'] ?? '#E9AF08', 8), vars);
+    buildColorSuite('danger', shiftLightnessHex(theme.semantic['error'] ?? '#E3193B', 10), vars);
+    buildColorSuite('info', shiftLightnessHex(theme.semantic['info'] ?? '#2563EB', 10), vars);
+    buildColorSuite('light', theme.neutral[800] ?? '#1F1F22', vars);
+    buildColorSuite('medium', theme.neutral[400] ?? '#778593', vars);
+    buildColorSuite('dark', theme.neutral[100] ?? '#F1F4F7', vars);
+    // Dark backgrounds & surfaces
+    const darkBgHex = '#111112';
+    const darkTextHex = '#DFE2E5';
+    const darkSurface = '#1F1F22';
+    vars['--ion-background-color'] = darkBgHex;
+    vars['--ion-background-color-rgb'] = hexToRgbStr(darkBgHex);
+    vars['--ion-text-color'] = darkTextHex;
+    vars['--ion-text-color-rgb'] = hexToRgbStr(darkTextHex);
+    vars['--ion-card-background'] = darkSurface;
+    vars['--ion-item-background'] = darkSurface;
+    vars['--ion-item-color'] = darkTextHex;
+    vars['--ion-toolbar-background'] = '#18181A';
+    vars['--ion-toolbar-color'] = darkTextHex;
+    vars['--ion-tab-bar-background'] = '#18181A';
+    vars['--ion-border-color'] = 'rgba(242, 244, 246, 0.1)';
+    // Typography & Radius
+    vars['--ion-font-family'] = theme.fontFamily.sans;
+    vars['--ion-border-radius'] = theme.radius[theme.radiusBase];
+    // Stepped colors for dark mode
+    interpolateSteppedColors(darkBgHex, darkTextHex, vars);
+    // Safe area insets
+    vars['--ion-safe-area-top'] = 'var(--ngxsmk-safe-area-top, env(safe-area-inset-top, 0px))';
+    vars['--ion-safe-area-bottom'] =
+        'var(--ngxsmk-safe-area-bottom, env(safe-area-inset-bottom, 0px))';
+    vars['--ion-safe-area-left'] = 'var(--ngxsmk-safe-area-left, env(safe-area-inset-left, 0px))';
+    vars['--ion-safe-area-right'] = 'var(--ngxsmk-safe-area-right, env(safe-area-inset-right, 0px))';
+    return vars;
+}
 /** Default NGXSMK adapter — emits `--ngxsmk-*` variables. */
 const cssVarsAdapter = {
     name: 'ngxsmk',
@@ -807,18 +1209,26 @@ const cssVarsAdapter = {
 };
 // ─── 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);
+    const clean = hex.replace('#', '');
+    const r = parseInt(clean.substring(0, 2), 16) || 0;
+    const g = parseInt(clean.substring(2, 4), 16) || 0;
+    const b = parseInt(clean.substring(4, 6), 16) || 0;
     return `${r}, ${g}, ${b}`;
 }
+function getContrastHex(hex) {
+    const clean = hex.replace('#', '');
+    const r = parseInt(clean.substring(0, 2), 16) || 0;
+    const g = parseInt(clean.substring(2, 4), 16) || 0;
+    const b = parseInt(clean.substring(4, 6), 16) || 0;
+    // Standard WCAG relative luminance approximation
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+    return yiq >= 150 ? '#000000' : '#FFFFFF';
+}
 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);
+    const clean = hex.replace('#', '');
+    let r = parseInt(clean.substring(0, 2), 16) || 0;
+    let g = parseInt(clean.substring(2, 4), 16) || 0;
+    let b = parseInt(clean.substring(4, 6), 16) || 0;
     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)));
@@ -830,7 +1240,28 @@ function shiftLightnessHex(hex, amount) {
         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')}`;
+    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`.toUpperCase();
+}
+function interpolateSteppedColors(bgHex, textHex, vars) {
+    const cleanBg = bgHex.replace('#', '');
+    const cleanText = textHex.replace('#', '');
+    const bgR = parseInt(cleanBg.substring(0, 2), 16) || 0;
+    const bgG = parseInt(cleanBg.substring(2, 4), 16) || 0;
+    const bgB = parseInt(cleanBg.substring(4, 6), 16) || 0;
+    const textR = parseInt(cleanText.substring(0, 2), 16) || 0;
+    const textG = parseInt(cleanText.substring(2, 4), 16) || 0;
+    const textB = parseInt(cleanText.substring(4, 6), 16) || 0;
+    const steps = [
+        50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950,
+    ];
+    for (const step of steps) {
+        const weight = step / 1000;
+        const r = Math.round(bgR * (1 - weight) + textR * weight);
+        const g = Math.round(bgG * (1 - weight) + textG * weight);
+        const b = Math.round(bgB * (1 - weight) + textB * weight);
+        const hex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`.toUpperCase();
+        vars[`--ion-color-step-${step}`] = hex;
+    }
 }
 
 const STYLE_ID = 'ngxsmk-theme';
@@ -862,7 +1293,7 @@ class NgxThemeInjectorService {
         if (!style) {
             style = this.document.createElement('style');
             style.id = STYLE_ID;
-            head.appendChild(style);
+            head?.appendChild(style);
         }
         let css = buildThemeCss(config);
         if (adapter) {
@@ -870,7 +1301,9 @@ class NgxThemeInjectorService {
             const platformVars = adapter.vars(resolved);
             css += '\n' + this.buildAdapterCss(adapter.name, platformVars);
         }
-        style.textContent = css;
+        if (style) {
+            style.textContent = css;
+        }
     }
     /**
      * Apply Ionic-specific token variables alongside the standard NGXSMK theme.
@@ -882,11 +1315,12 @@ class NgxThemeInjectorService {
         if (!style) {
             style = this.document.createElement('style');
             style.id = IONIC_STYLE_ID;
-            head.appendChild(style);
+            head?.appendChild(style);
         }
         const resolved = resolveTheme(config);
-        const vars = ionicVarsAdapter.vars(resolved);
-        style.textContent = this.buildAdapterCss('ionic', vars);
+        const lightVars = ionicVarsAdapter.vars(resolved);
+        const darkVars = ionicVarsAdapter.darkVars ? ionicVarsAdapter.darkVars(resolved) : undefined;
+        style.textContent = this.buildAdapterCss('ionic', lightVars, darkVars);
     }
     /** Remove a runtime-applied theme, falling back to the build-time CSS. */
     clearTheme() {
@@ -896,9 +1330,15 @@ class NgxThemeInjectorService {
     clearIonicTheme() {
         this.document.getElementById(IONIC_STYLE_ID)?.remove();
     }
-    buildAdapterCss(adapterName, vars) {
+    buildAdapterCss(adapterName, vars, darkVars) {
         const lines = Object.entries(vars).map(([k, v]) => `  ${k}: ${v};`);
-        return `/* @ngxsmk/theme — ${adapterName} adapter */\n:root {\n${lines.join('\n')}\n}`;
+        let result = `/* @ngxsmk/theme — ${adapterName} adapter */\n:root {\n${lines.join('\n')}\n}`;
+        if (darkVars && Object.keys(darkVars).length > 0) {
+            const darkLines = Object.entries(darkVars).map(([k, v]) => `  ${k}: ${v};`);
+            result += `\n\n:root.dark, body.dark, html.dark, [data-theme="dark"] {\n${darkLines.join('\n')}\n}`;
+            result += `\n\n@media (prefers-color-scheme: dark) {\n  :root:not(.light) {\n  ${darkLines.join('\n  ')}\n  }\n}`;
+        }
+        return result;
     }
     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' }); }
@@ -983,6 +1423,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+/**
+ * Standalone provider for Angular 18-22+ applications that automatically
+ * synchronizes NGXSMK design tokens with Ionic 7/8 CSS variables on startup.
+ *
+ * @example
+ * ```ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideIonicAngular(),
+ *     provideNgxsmkIonicTheme(),
+ *   ]
+ * };
+ * ```
+ */
+function provideNgxsmkIonicTheme(config) {
+    return makeEnvironmentProviders([
+        {
+            provide: ENVIRONMENT_INITIALIZER,
+            multi: true,
+            useValue: () => {
+                const theme = inject(NgxsmkThemeService);
+                theme.applyIonicTheme(config ?? violetPreset);
+            },
+        },
+    ]);
+}
+
 /*
  * Public API Surface of @ngxsmk/theme
  */
@@ -991,5 +1458,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, 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 };
+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, SAFE_AREA, SHADOW, SPACING, TOUCH_TARGET_MIN, TRACKING, Z_INDEX, buildThemeCss, cssVarsAdapter, defineConfig, deriveScale, emeraldPreset, hexToOklch, inkPreset, ionicVarsAdapter, neutralPreset, oklchToHex, presets, provideNgxsmkIonicTheme, resolveTheme, rosePreset, rotateHue, shiftLightness, violetPreset };
 //# sourceMappingURL=ngxsmk-theme.mjs.map