@ngxsmk/theme 2.0.0 → 3.1.0

package/lib/token-adapter.d.ts

@@ -9,16 +9,18 @@ export interface TokenOutputAdapter {
     /** Unique name for this adapter (e.g. 'ngxsmk', 'ionic'). */
     readonly name: string;
     /** Transform a resolved theme into platform-specific CSS variables. */
-    vars(theme: ResolvedTheme): Record<string, string>;
+    vars(theme: ResolvedTheme, options?: {
+        isDark?: boolean;
+    }): Record<string, string>;
+    /** Transform a resolved theme into dark-mode platform CSS variables. */
+    darkVars?(theme: ResolvedTheme): Record<string, string>;
 }
 /**
- * Maps NGXSMK semantic color roles to Ionic's color variable namespace.
+ * Maps NGXSMK semantic color roles to Ionic 7 & 8 color variable specifications.
  *
- * Ionic expects:
- *   --ion-color-primary, --ion-color-primary-rgb, --ion-color-primary-shade,
- *   --ion-color-primary-tint, --ion-color-secondary, etc.
- *
- * This adapter produces the subset Ionic needs for theming.
+ * 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.
  */
 export declare const ionicVarsAdapter: TokenOutputAdapter;
 /** Default NGXSMK adapter — emits `--ngxsmk-*` variables. */

package/lib/token-adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"token-adapter.d.ts","sourceRoot":"","sources":["../../../../packages/theme/src/lib/token-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGxC;;;;;GAKG;AACH,MAAM,WAAW,kBAAkB;IACjC,6DAA6D;IAC7D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,uEAAuE;IACvE,IAAI,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpD;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,EAAE,kBA6C9B,CAAC;AAEF,6DAA6D;AAC7D,eAAO,MAAM,cAAc,EAAE,kBAG5B,CAAC"}
+{"version":3,"file":"token-adapter.d.ts","sourceRoot":"","sources":["../../../../packages/theme/src/lib/token-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGxC;;;;;GAKG;AACH,MAAM,WAAW,kBAAkB;IACjC,6DAA6D;IAC7D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,uEAAuE;IACvE,IAAI,CAAC,KAAK,EAAE,aAAa,EAAE,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnF,wEAAwE;IACxE,QAAQ,CAAC,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACzD;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,EAAE,kBAa9B,CAAC;AAmIF,6DAA6D;AAC7D,eAAO,MAAM,cAAc,EAAE,kBAG5B,CAAC"}

package/lib/tokens.d.ts

@@ -55,4 +55,13 @@ export declare const SHADOW: Record<string, string>;
 export declare const Z_INDEX: Record<string, string>;
 export declare const DURATION: Record<string, string>;
 export declare const EASING: Record<string, string>;
+/** Safe-area inset defaults (fallback to CSS env() variables for iOS/Android/Ionic). */
+export declare const SAFE_AREA: {
+    top: string;
+    bottom: string;
+    left: string;
+    right: string;
+};
+/** Minimum touch target size for mobile accessibility (Apple HIG & Android Material). */
+export declare const TOUCH_TARGET_MIN = "44px";
 //# sourceMappingURL=tokens.d.ts.map

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;;;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,uFAAuF;AACvF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAK9C,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAK1C,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"}
+{"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,uFAAuF;AACvF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAK9C,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAK1C,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;AAEF,wFAAwF;AACxF,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,yFAAyF;AACzF,eAAO,MAAM,gBAAgB,SAAS,CAAC"}

package/lib/types.d.ts

@@ -70,6 +70,17 @@ export interface ThemeConfig {
     };
     /** Global corner rounding character of the theme. Default `md`. */
     borderRadius?: RadiusPreset;
+    /**
+     * Partial override of the radius ladder (`sm`/`md`/`lg`/…). Merged over
+     * package defaults so presets like Ink can sharpen corners without
+     * changing Classic (`emerald`) consumers.
+     */
+    radiusScale?: Partial<Record<string, string>>;
+    /**
+     * Partial override of the shadow ladder. Same consumer-safety pattern as
+     * `radiusScale`.
+     */
+    shadowScale?: Partial<Record<string, string>>;
     /** How dark mode is activated. Default: `class` (a `.dark` class on `<html>`). */
     darkMode?: {
         strategy?: DarkModeStrategy;
@@ -79,6 +90,8 @@ export interface ThemeConfig {
     /**
      * Raw semantic-role token overrides merged into the generated output,
      * e.g. `{ dark: { '--ngxsmk-color-primary': '#FAFAFA' } }`.
+     * Light overrides also win over static `:root` tokens (fonts already set,
+     * hover-lift, etc.).
      */
     overrides?: {
         light?: Record<string, string>;

package/lib/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../packages/theme/src/lib/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../packages/theme/src/lib/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngxsmk/theme",
-  "version": "2.0.0",
+  "version": "3.1.0",
   "description": "Runtime theming and design-token engine for @ngxsmk/core with light/dark modes and preset palettes.",
   "keywords": [
     "angular",
@@ -25,11 +25,15 @@
   },
   "peerDependencies": {
     "@angular/common": ">=17.3.0",
-    "@angular/core": ">=17.3.0"
+    "@angular/core": ">=17.3.0",
+    "@ionic/angular": ">=7.0.0 || >=8.0.0"
   },
   "peerDependenciesMeta": {
     "tailwindcss": {
       "optional": true
+    },
+    "@ionic/angular": {
+      "optional": true
     }
   },
   "dependencies": {

package/public-api.d.ts

@@ -7,4 +7,5 @@ export * from './lib/presets';
 export * from './lib/theme.service';
 export * from './lib/theme-injector.service';
 export * from './lib/token-adapter';
+export * from './lib/ionic-provider';
 //# sourceMappingURL=public-api.d.ts.map

package/public-api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../../packages/theme/src/public-api.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../../packages/theme/src/public-api.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}

package/styles/ngxsmk.css

@@ -43,16 +43,32 @@
   --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-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;
   --ngxsmk-button-bg: var(--ngxsmk-color-primary);
   --ngxsmk-button-color: var(--ngxsmk-color-on-primary);
   --ngxsmk-button-font-family: var(--ngxsmk-font-sans);
   --ngxsmk-button-font-weight: 500;
   --ngxsmk-button-radius: var(--ngxsmk-radius-base);
   --ngxsmk-button-disabled-opacity: 0.5;
+  --ngxsmk-button-border-width: 1px;
+  --ngxsmk-button-gap: var(--ngxsmk-space-2);
+  --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);
   --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);
   --ngxsmk-accordion-bg: var(--ngxsmk-color-surface);
   --ngxsmk-accordion-radius: var(--ngxsmk-radius-lg);
   --ngxsmk-accordion-border-color: var(--ngxsmk-color-outline);
@@ -67,6 +83,86 @@
   --ngxsmk-switch-thumb-size: 0.875rem;
   --ngxsmk-switch-thumb-bg: var(--ngxsmk-color-surface);
   --ngxsmk-switch-checked-bg: var(--ngxsmk-color-primary);
+  --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);
+  --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%;
+  --ngxsmk-alert-radius: var(--ngxsmk-radius-lg);
+  --ngxsmk-alert-border-mix: 22%;
+  --ngxsmk-alert-padding: var(--ngxsmk-space-4);
+  --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;
+  --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;
+  --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);
+  --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;
+  --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;
+  --ngxsmk-tabs-indicator: 2px;
+  --ngxsmk-tabs-radius: var(--ngxsmk-radius-md);
+  --ngxsmk-tabs-gap: var(--ngxsmk-space-1);
+  --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);
+  --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);
+  --ngxsmk-pagination-size: 2.25rem;
+  --ngxsmk-pagination-radius: var(--ngxsmk-radius-md);
+  --ngxsmk-form-field-gap: var(--ngxsmk-space-1-5);
+  --ngxsmk-form-field-label-weight: 500;
+  --ngxsmk-radio-size: 1.125rem;
+  --ngxsmk-radio-dot-size: 0.5rem;
+  --ngxsmk-radio-border: var(--ngxsmk-color-outline-strong);
+  --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;
+  --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);
+  --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);
+  --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);
   --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);
@@ -95,15 +191,19 @@
   --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);
+  --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);
   --ngxsmk-control-height-sm: 2rem;
   --ngxsmk-control-height-md: 2.5rem;
   --ngxsmk-control-height-lg: 3rem;
@@ -238,12 +338,17 @@
   --ngxsmk-color-on-surface: #0A1317;
   --ngxsmk-color-surface-variant: #E4E9EE;
   --ngxsmk-color-on-surface-variant: #4E606F;
+  --ngxsmk-color-surface-muted: #F1F4F7;
+  --ngxsmk-color-surface-elevated: #FFFFFF;
+  --ngxsmk-color-surface-overlay: #FFFFFF;
+  --ngxsmk-color-on-surface-muted: #778593;
   --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: #CCD3DB;
   --ngxsmk-color-outline-variant: rgb(5 54 89 / 0.06);
+  --ngxsmk-color-outline-subtle: rgb(5 54 89 / 0.05);
   --ngxsmk-color-surface-1: #FFFFFF;
   --ngxsmk-color-surface-2: #F1F4F7;
   --ngxsmk-color-surface-3: #E4E9EE;
@@ -302,12 +407,17 @@
   --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);
   --ngxsmk-color-surface-1: #1F1F22;
   --ngxsmk-color-surface-2: #2A333B;
   --ngxsmk-color-surface-3: #3A4650;

package/styles/ngxsmk.emerald.css

@@ -43,16 +43,32 @@
   --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-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;
   --ngxsmk-button-bg: var(--ngxsmk-color-primary);
   --ngxsmk-button-color: var(--ngxsmk-color-on-primary);
   --ngxsmk-button-font-family: var(--ngxsmk-font-sans);
   --ngxsmk-button-font-weight: 500;
   --ngxsmk-button-radius: var(--ngxsmk-radius-base);
   --ngxsmk-button-disabled-opacity: 0.5;
+  --ngxsmk-button-border-width: 1px;
+  --ngxsmk-button-gap: var(--ngxsmk-space-2);
+  --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);
   --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);
   --ngxsmk-accordion-bg: var(--ngxsmk-color-surface);
   --ngxsmk-accordion-radius: var(--ngxsmk-radius-lg);
   --ngxsmk-accordion-border-color: var(--ngxsmk-color-outline);
@@ -67,6 +83,86 @@
   --ngxsmk-switch-thumb-size: 0.875rem;
   --ngxsmk-switch-thumb-bg: var(--ngxsmk-color-surface);
   --ngxsmk-switch-checked-bg: var(--ngxsmk-color-primary);
+  --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);
+  --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%;
+  --ngxsmk-alert-radius: var(--ngxsmk-radius-lg);
+  --ngxsmk-alert-border-mix: 22%;
+  --ngxsmk-alert-padding: var(--ngxsmk-space-4);
+  --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;
+  --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;
+  --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);
+  --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;
+  --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;
+  --ngxsmk-tabs-indicator: 2px;
+  --ngxsmk-tabs-radius: var(--ngxsmk-radius-md);
+  --ngxsmk-tabs-gap: var(--ngxsmk-space-1);
+  --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);
+  --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);
+  --ngxsmk-pagination-size: 2.25rem;
+  --ngxsmk-pagination-radius: var(--ngxsmk-radius-md);
+  --ngxsmk-form-field-gap: var(--ngxsmk-space-1-5);
+  --ngxsmk-form-field-label-weight: 500;
+  --ngxsmk-radio-size: 1.125rem;
+  --ngxsmk-radio-dot-size: 0.5rem;
+  --ngxsmk-radio-border: var(--ngxsmk-color-outline-strong);
+  --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;
+  --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);
+  --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);
+  --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);
   --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);
@@ -95,15 +191,19 @@
   --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);
+  --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);
   --ngxsmk-control-height-sm: 2rem;
   --ngxsmk-control-height-md: 2.5rem;
   --ngxsmk-control-height-lg: 3rem;
@@ -238,12 +338,17 @@
   --ngxsmk-color-on-surface: #0A1317;
   --ngxsmk-color-surface-variant: #E4E9EE;
   --ngxsmk-color-on-surface-variant: #4E606F;
+  --ngxsmk-color-surface-muted: #F1F4F7;
+  --ngxsmk-color-surface-elevated: #FFFFFF;
+  --ngxsmk-color-surface-overlay: #FFFFFF;
+  --ngxsmk-color-on-surface-muted: #778593;
   --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: #CCD3DB;
   --ngxsmk-color-outline-variant: rgb(5 54 89 / 0.06);
+  --ngxsmk-color-outline-subtle: rgb(5 54 89 / 0.05);
   --ngxsmk-color-surface-1: #FFFFFF;
   --ngxsmk-color-surface-2: #F1F4F7;
   --ngxsmk-color-surface-3: #E4E9EE;
@@ -302,12 +407,17 @@
   --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);
   --ngxsmk-color-surface-1: #1F1F22;
   --ngxsmk-color-surface-2: #2A333B;
   --ngxsmk-color-surface-3: #3A4650;