@ngxsmk/theme 3.0.0 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/README.md +50 -9
  2. package/esm2022/lib/css.mjs +139 -4
  3. package/esm2022/lib/define-config.mjs +3 -3
  4. package/esm2022/lib/presets.mjs +167 -1
  5. package/esm2022/lib/theme-injector.service.mjs +2 -4
  6. package/esm2022/lib/types.mjs +1 -1
  7. package/fesm2022/ngxsmk-theme.mjs +308 -9
  8. package/fesm2022/ngxsmk-theme.mjs.map +1 -1
  9. package/lib/css.d.ts.map +1 -1
  10. package/lib/presets.d.ts +14 -0
  11. package/lib/presets.d.ts.map +1 -1
  12. package/lib/theme-injector.service.d.ts.map +1 -1
  13. package/lib/types.d.ts +13 -0
  14. package/lib/types.d.ts.map +1 -1
  15. package/package.json +1 -1
  16. package/styles/ngxsmk.css +98 -3
  17. package/styles/ngxsmk.emerald.css +98 -3
  18. package/styles/ngxsmk.ink.css +500 -0
  19. package/styles/ngxsmk.neutral.css +98 -3
  20. package/styles/ngxsmk.rose.css +98 -3
  21. package/styles/ngxsmk.violet.css +98 -3
package/lib/theme-injector.service.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme-injector.service.d.ts","sourceRoot":"","sources":["../../../../packages/theme/src/lib/theme-injector.service.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAoB,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;;AAKtC;;;;;;;;GAQG;AACH,qBACa,uBAAuB;IAClC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IAEzD;;;;;;;OAOG;IACH,UAAU,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,CAAC,EAAE,kBAAkB,GAAG,IAAI;IAsBnE;;;OAGG;IACH,eAAe,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAiB1C,0EAA0E;IAC1E,UAAU,IAAI,IAAI;IAIlB,2CAA2C;IAC3C,eAAe,IAAI,IAAI;IAIvB,OAAO,CAAC,eAAe;yCAhEZ,uBAAuB;6CAAvB,uBAAuB;CA8EnC"}
1
+ {"version":3,"file":"theme-injector.service.d.ts","sourceRoot":"","sources":["../../../../packages/theme/src/lib/theme-injector.service.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAoB,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;;AAKtC;;;;;;;;GAQG;AACH,qBACa,uBAAuB;IAClC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IAEzD;;;;;;;OAOG;IACH,UAAU,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,CAAC,EAAE,kBAAkB,GAAG,IAAI;IAsBnE;;;OAGG;IACH,eAAe,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAe1C,0EAA0E;IAC1E,UAAU,IAAI,IAAI;IAIlB,2CAA2C;IAC3C,eAAe,IAAI,IAAI;IAIvB,OAAO,CAAC,eAAe;yCA9DZ,uBAAuB;6CAAvB,uBAAuB;CA4EnC"}
package/lib/types.d.ts CHANGED
@@ -70,6 +70,17 @@ export interface ThemeConfig {
70
70
  };
71
71
  /** Global corner rounding character of the theme. Default `md`. */
72
72
  borderRadius?: RadiusPreset;
73
+ /**
74
+ * Partial override of the radius ladder (`sm`/`md`/`lg`/…). Merged over
75
+ * package defaults so presets like Ink can sharpen corners without
76
+ * changing Classic (`emerald`) consumers.
77
+ */
78
+ radiusScale?: Partial<Record<string, string>>;
79
+ /**
80
+ * Partial override of the shadow ladder. Same consumer-safety pattern as
81
+ * `radiusScale`.
82
+ */
83
+ shadowScale?: Partial<Record<string, string>>;
73
84
  /** How dark mode is activated. Default: `class` (a `.dark` class on `<html>`). */
74
85
  darkMode?: {
75
86
  strategy?: DarkModeStrategy;
@@ -79,6 +90,8 @@ export interface ThemeConfig {
79
90
  /**
80
91
  * Raw semantic-role token overrides merged into the generated output,
81
92
  * e.g. `{ dark: { '--ngxsmk-color-primary': '#FAFAFA' } }`.
93
+ * Light overrides also win over static `:root` tokens (fonts already set,
94
+ * hover-lift, etc.).
82
95
  */
83
96
  overrides?: {
84
97
  light?: Record<string, string>;
package/lib/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../packages/theme/src/lib/types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../packages/theme/src/lib/types.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ngxsmk/theme",
3
- "version": "3.0.0",
3
+ "version": "3.1.0",
4
4
  "description": "Runtime theming and design-token engine for @ngxsmk/core with light/dark modes and preset palettes.",
5
5
  "keywords": [
6
6
  "angular",
package/styles/ngxsmk.css CHANGED
@@ -54,10 +54,21 @@
54
54
  --ngxsmk-button-font-weight: 500;
55
55
  --ngxsmk-button-radius: var(--ngxsmk-radius-base);
56
56
  --ngxsmk-button-disabled-opacity: 0.5;
57
+ --ngxsmk-button-border-width: 1px;
58
+ --ngxsmk-button-gap: var(--ngxsmk-space-2);
59
+ --ngxsmk-input-bg: var(--ngxsmk-color-surface);
60
+ --ngxsmk-input-color: var(--ngxsmk-color-on-surface);
61
+ --ngxsmk-input-border: var(--ngxsmk-color-outline-strong);
62
+ --ngxsmk-input-radius: var(--ngxsmk-radius-base);
63
+ --ngxsmk-input-height: var(--ngxsmk-control-height);
64
+ --ngxsmk-input-padding-inline: var(--ngxsmk-space-3);
65
+ --ngxsmk-input-placeholder: var(--ngxsmk-color-on-surface-variant);
57
66
  --ngxsmk-card-bg: var(--ngxsmk-color-surface);
58
67
  --ngxsmk-card-radius: var(--ngxsmk-radius-xl);
59
68
  --ngxsmk-card-shadow: var(--ngxsmk-shadow-sm);
60
69
  --ngxsmk-card-border-color: var(--ngxsmk-color-outline);
70
+ --ngxsmk-card-border-width: 1px;
71
+ --ngxsmk-card-padding: var(--ngxsmk-space-5);
61
72
  --ngxsmk-accordion-bg: var(--ngxsmk-color-surface);
62
73
  --ngxsmk-accordion-radius: var(--ngxsmk-radius-lg);
63
74
  --ngxsmk-accordion-border-color: var(--ngxsmk-color-outline);
@@ -72,6 +83,86 @@
72
83
  --ngxsmk-switch-thumb-size: 0.875rem;
73
84
  --ngxsmk-switch-thumb-bg: var(--ngxsmk-color-surface);
74
85
  --ngxsmk-switch-checked-bg: var(--ngxsmk-color-primary);
86
+ --ngxsmk-checkbox-size: 1.125rem;
87
+ --ngxsmk-checkbox-radius: var(--ngxsmk-radius-sm);
88
+ --ngxsmk-checkbox-border: var(--ngxsmk-color-outline-strong);
89
+ --ngxsmk-checkbox-checked-bg: var(--ngxsmk-color-primary);
90
+ --ngxsmk-badge-radius: var(--ngxsmk-radius-full);
91
+ --ngxsmk-badge-font-weight: 600;
92
+ --ngxsmk-badge-padding-inline: 0.5rem;
93
+ --ngxsmk-badge-padding-block: 0.125rem;
94
+ --ngxsmk-badge-border-mix: 20%;
95
+ --ngxsmk-alert-radius: var(--ngxsmk-radius-lg);
96
+ --ngxsmk-alert-border-mix: 22%;
97
+ --ngxsmk-alert-padding: var(--ngxsmk-space-4);
98
+ --ngxsmk-dialog-radius: var(--ngxsmk-radius-2xl);
99
+ --ngxsmk-dialog-shadow: var(--ngxsmk-shadow-xl);
100
+ --ngxsmk-dialog-bg: var(--ngxsmk-color-surface-elevated);
101
+ --ngxsmk-dialog-backdrop: var(--ngxsmk-color-backdrop);
102
+ --ngxsmk-dialog-blur: 4px;
103
+ --ngxsmk-dialog-max-width: 28rem;
104
+ --ngxsmk-sheet-radius: var(--ngxsmk-radius-xl);
105
+ --ngxsmk-sheet-shadow: var(--ngxsmk-shadow-xl);
106
+ --ngxsmk-sheet-bg: var(--ngxsmk-color-surface-elevated);
107
+ --ngxsmk-sheet-backdrop: var(--ngxsmk-color-backdrop);
108
+ --ngxsmk-sheet-width: 24rem;
109
+ --ngxsmk-lightbox-backdrop: rgb(0 0 0 / 0.9);
110
+ --ngxsmk-lightbox-fg: #ffffff;
111
+ --ngxsmk-lightbox-control-bg: rgb(255 255 255 / 0.12);
112
+ --ngxsmk-lightbox-control-bg-hover: rgb(255 255 255 / 0.22);
113
+ --ngxsmk-toast-radius: var(--ngxsmk-radius-lg);
114
+ --ngxsmk-toast-shadow: var(--ngxsmk-shadow-lg);
115
+ --ngxsmk-toast-bg: var(--ngxsmk-color-surface-elevated);
116
+ --ngxsmk-toast-accent-width: 3px;
117
+ --ngxsmk-table-border: var(--ngxsmk-color-outline);
118
+ --ngxsmk-table-header-bg: color-mix(in srgb, var(--ngxsmk-color-surface-variant) 55%, transparent);
119
+ --ngxsmk-table-row-hover: var(--ngxsmk-color-surface-hover);
120
+ --ngxsmk-table-stripe: color-mix(in srgb, var(--ngxsmk-color-surface-variant) 35%, transparent);
121
+ --ngxsmk-table-drop-indicator: inset 2px 0 0 var(--ngxsmk-color-primary);
122
+ --ngxsmk-table-cell-padding: 0.625rem 0.75rem;
123
+ --ngxsmk-tabs-indicator: 2px;
124
+ --ngxsmk-tabs-radius: var(--ngxsmk-radius-md);
125
+ --ngxsmk-tabs-gap: var(--ngxsmk-space-1);
126
+ --ngxsmk-select-bg: var(--ngxsmk-color-surface);
127
+ --ngxsmk-select-border: var(--ngxsmk-color-outline-strong);
128
+ --ngxsmk-select-radius: var(--ngxsmk-radius-base);
129
+ --ngxsmk-select-list-shadow: var(--ngxsmk-shadow-lg);
130
+ --ngxsmk-select-list-radius: var(--ngxsmk-radius-lg);
131
+ --ngxsmk-menu-bg: var(--ngxsmk-color-surface-elevated);
132
+ --ngxsmk-menu-radius: var(--ngxsmk-radius-lg);
133
+ --ngxsmk-menu-shadow: var(--ngxsmk-shadow-lg);
134
+ --ngxsmk-menu-border: var(--ngxsmk-color-outline);
135
+ --ngxsmk-menu-item-radius: var(--ngxsmk-radius-md);
136
+ --ngxsmk-pagination-size: 2.25rem;
137
+ --ngxsmk-pagination-radius: var(--ngxsmk-radius-md);
138
+ --ngxsmk-form-field-gap: var(--ngxsmk-space-1-5);
139
+ --ngxsmk-form-field-label-weight: 500;
140
+ --ngxsmk-radio-size: 1.125rem;
141
+ --ngxsmk-radio-dot-size: 0.5rem;
142
+ --ngxsmk-radio-border: var(--ngxsmk-color-outline-strong);
143
+ --ngxsmk-data-table-border: var(--ngxsmk-color-outline);
144
+ --ngxsmk-data-table-radius: var(--ngxsmk-radius-md);
145
+ --ngxsmk-data-table-filter-bg: color-mix(in srgb, var(--ngxsmk-color-surface-variant) 40%, transparent);
146
+ --ngxsmk-data-table-filter-label-size: 0.7rem;
147
+ --ngxsmk-data-table-page-size: 2rem;
148
+ --ngxsmk-data-table-loading-height: 3px;
149
+ --ngxsmk-ai-chat-radius: var(--ngxsmk-radius-xl);
150
+ --ngxsmk-ai-chat-border: var(--ngxsmk-color-outline);
151
+ --ngxsmk-ai-chat-bg: var(--ngxsmk-color-surface);
152
+ --ngxsmk-ai-chat-header-bg: var(--ngxsmk-color-surface-variant);
153
+ --ngxsmk-ai-chat-bubble-bg: var(--ngxsmk-color-surface-variant);
154
+ --ngxsmk-ai-chat-bubble-user-bg: var(--ngxsmk-color-primary);
155
+ --ngxsmk-ai-chat-bubble-radius: var(--ngxsmk-radius-lg);
156
+ --ngxsmk-ai-chat-composer-radius: var(--ngxsmk-radius-full);
157
+ --ngxsmk-prompt-radius: var(--ngxsmk-radius-xl);
158
+ --ngxsmk-prompt-border: var(--ngxsmk-color-outline-strong);
159
+ --ngxsmk-prompt-shadow: var(--ngxsmk-shadow-sm);
160
+ --ngxsmk-prompt-bg: var(--ngxsmk-color-surface);
161
+ --ngxsmk-prompt-send-radius: var(--ngxsmk-radius-full);
162
+ --ngxsmk-chat-bubble-radius: var(--ngxsmk-radius-lg);
163
+ --ngxsmk-chat-bubble-bg: var(--ngxsmk-color-surface-container);
164
+ --ngxsmk-chat-bubble-user-bg: var(--ngxsmk-color-primary-container);
165
+ --ngxsmk-chat-bubble-padding: var(--ngxsmk-space-2) var(--ngxsmk-space-3);
75
166
  --ngxsmk-spreadsheet-bg: var(--ngxsmk-color-surface);
76
167
  --ngxsmk-spreadsheet-header-bg: var(--ngxsmk-color-surface-variant);
77
168
  --ngxsmk-spreadsheet-header-color: var(--ngxsmk-color-on-surface-variant);
@@ -100,15 +191,19 @@
100
191
  --ngxsmk-input-group-radius: var(--ngxsmk-radius-md);
101
192
  --ngxsmk-input-group-shadow: none;
102
193
  --ngxsmk-input-group-focus-border: var(--ngxsmk-color-primary);
103
- --ngxsmk-input-group-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-primary) 15%, transparent);
194
+ --ngxsmk-input-group-focus-shadow: var(--ngxsmk-focus-ring);
104
195
  --ngxsmk-input-group-error-border: var(--ngxsmk-color-error);
105
- --ngxsmk-input-group-error-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-error) 15%, transparent);
196
+ --ngxsmk-input-group-error-focus-shadow: var(--ngxsmk-focus-ring-error);
106
197
  --ngxsmk-input-group-success-border: var(--ngxsmk-color-success);
107
198
  --ngxsmk-input-group-warning-border: var(--ngxsmk-color-warning);
108
- --ngxsmk-input-group-height: 2.5rem;
199
+ --ngxsmk-input-group-height: var(--ngxsmk-control-height);
109
200
  --ngxsmk-input-group-padding: 0.75rem;
110
201
  --ngxsmk-input-group-gap: var(--ngxsmk-space-2);
111
202
  --ngxsmk-input-group-font: var(--ngxsmk-font-sans);
203
+ --ngxsmk-heatmap-level-1: color-mix(in srgb, var(--ngxsmk-color-success) 28%, var(--ngxsmk-color-surface-variant));
204
+ --ngxsmk-heatmap-level-2: color-mix(in srgb, var(--ngxsmk-color-success) 52%, var(--ngxsmk-color-surface-variant));
205
+ --ngxsmk-heatmap-level-3: color-mix(in srgb, var(--ngxsmk-color-success) 76%, var(--ngxsmk-color-surface-variant));
206
+ --ngxsmk-heatmap-level-4: var(--ngxsmk-color-success);
112
207
  --ngxsmk-control-height-sm: 2rem;
113
208
  --ngxsmk-control-height-md: 2.5rem;
114
209
  --ngxsmk-control-height-lg: 3rem;
package/styles/ngxsmk.emerald.css CHANGED
@@ -54,10 +54,21 @@
54
54
  --ngxsmk-button-font-weight: 500;
55
55
  --ngxsmk-button-radius: var(--ngxsmk-radius-base);
56
56
  --ngxsmk-button-disabled-opacity: 0.5;
57
+ --ngxsmk-button-border-width: 1px;
58
+ --ngxsmk-button-gap: var(--ngxsmk-space-2);
59
+ --ngxsmk-input-bg: var(--ngxsmk-color-surface);
60
+ --ngxsmk-input-color: var(--ngxsmk-color-on-surface);
61
+ --ngxsmk-input-border: var(--ngxsmk-color-outline-strong);
62
+ --ngxsmk-input-radius: var(--ngxsmk-radius-base);
63
+ --ngxsmk-input-height: var(--ngxsmk-control-height);
64
+ --ngxsmk-input-padding-inline: var(--ngxsmk-space-3);
65
+ --ngxsmk-input-placeholder: var(--ngxsmk-color-on-surface-variant);
57
66
  --ngxsmk-card-bg: var(--ngxsmk-color-surface);
58
67
  --ngxsmk-card-radius: var(--ngxsmk-radius-xl);
59
68
  --ngxsmk-card-shadow: var(--ngxsmk-shadow-sm);
60
69
  --ngxsmk-card-border-color: var(--ngxsmk-color-outline);
70
+ --ngxsmk-card-border-width: 1px;
71
+ --ngxsmk-card-padding: var(--ngxsmk-space-5);
61
72
  --ngxsmk-accordion-bg: var(--ngxsmk-color-surface);
62
73
  --ngxsmk-accordion-radius: var(--ngxsmk-radius-lg);
63
74
  --ngxsmk-accordion-border-color: var(--ngxsmk-color-outline);
@@ -72,6 +83,86 @@
72
83
  --ngxsmk-switch-thumb-size: 0.875rem;
73
84
  --ngxsmk-switch-thumb-bg: var(--ngxsmk-color-surface);
74
85
  --ngxsmk-switch-checked-bg: var(--ngxsmk-color-primary);
86
+ --ngxsmk-checkbox-size: 1.125rem;
87
+ --ngxsmk-checkbox-radius: var(--ngxsmk-radius-sm);
88
+ --ngxsmk-checkbox-border: var(--ngxsmk-color-outline-strong);
89
+ --ngxsmk-checkbox-checked-bg: var(--ngxsmk-color-primary);
90
+ --ngxsmk-badge-radius: var(--ngxsmk-radius-full);
91
+ --ngxsmk-badge-font-weight: 600;
92
+ --ngxsmk-badge-padding-inline: 0.5rem;
93
+ --ngxsmk-badge-padding-block: 0.125rem;
94
+ --ngxsmk-badge-border-mix: 20%;
95
+ --ngxsmk-alert-radius: var(--ngxsmk-radius-lg);
96
+ --ngxsmk-alert-border-mix: 22%;
97
+ --ngxsmk-alert-padding: var(--ngxsmk-space-4);
98
+ --ngxsmk-dialog-radius: var(--ngxsmk-radius-2xl);
99
+ --ngxsmk-dialog-shadow: var(--ngxsmk-shadow-xl);
100
+ --ngxsmk-dialog-bg: var(--ngxsmk-color-surface-elevated);
101
+ --ngxsmk-dialog-backdrop: var(--ngxsmk-color-backdrop);
102
+ --ngxsmk-dialog-blur: 4px;
103
+ --ngxsmk-dialog-max-width: 28rem;
104
+ --ngxsmk-sheet-radius: var(--ngxsmk-radius-xl);
105
+ --ngxsmk-sheet-shadow: var(--ngxsmk-shadow-xl);
106
+ --ngxsmk-sheet-bg: var(--ngxsmk-color-surface-elevated);
107
+ --ngxsmk-sheet-backdrop: var(--ngxsmk-color-backdrop);
108
+ --ngxsmk-sheet-width: 24rem;
109
+ --ngxsmk-lightbox-backdrop: rgb(0 0 0 / 0.9);
110
+ --ngxsmk-lightbox-fg: #ffffff;
111
+ --ngxsmk-lightbox-control-bg: rgb(255 255 255 / 0.12);
112
+ --ngxsmk-lightbox-control-bg-hover: rgb(255 255 255 / 0.22);
113
+ --ngxsmk-toast-radius: var(--ngxsmk-radius-lg);
114
+ --ngxsmk-toast-shadow: var(--ngxsmk-shadow-lg);
115
+ --ngxsmk-toast-bg: var(--ngxsmk-color-surface-elevated);
116
+ --ngxsmk-toast-accent-width: 3px;
117
+ --ngxsmk-table-border: var(--ngxsmk-color-outline);
118
+ --ngxsmk-table-header-bg: color-mix(in srgb, var(--ngxsmk-color-surface-variant) 55%, transparent);
119
+ --ngxsmk-table-row-hover: var(--ngxsmk-color-surface-hover);
120
+ --ngxsmk-table-stripe: color-mix(in srgb, var(--ngxsmk-color-surface-variant) 35%, transparent);
121
+ --ngxsmk-table-drop-indicator: inset 2px 0 0 var(--ngxsmk-color-primary);
122
+ --ngxsmk-table-cell-padding: 0.625rem 0.75rem;
123
+ --ngxsmk-tabs-indicator: 2px;
124
+ --ngxsmk-tabs-radius: var(--ngxsmk-radius-md);
125
+ --ngxsmk-tabs-gap: var(--ngxsmk-space-1);
126
+ --ngxsmk-select-bg: var(--ngxsmk-color-surface);
127
+ --ngxsmk-select-border: var(--ngxsmk-color-outline-strong);
128
+ --ngxsmk-select-radius: var(--ngxsmk-radius-base);
129
+ --ngxsmk-select-list-shadow: var(--ngxsmk-shadow-lg);
130
+ --ngxsmk-select-list-radius: var(--ngxsmk-radius-lg);
131
+ --ngxsmk-menu-bg: var(--ngxsmk-color-surface-elevated);
132
+ --ngxsmk-menu-radius: var(--ngxsmk-radius-lg);
133
+ --ngxsmk-menu-shadow: var(--ngxsmk-shadow-lg);
134
+ --ngxsmk-menu-border: var(--ngxsmk-color-outline);
135
+ --ngxsmk-menu-item-radius: var(--ngxsmk-radius-md);
136
+ --ngxsmk-pagination-size: 2.25rem;
137
+ --ngxsmk-pagination-radius: var(--ngxsmk-radius-md);
138
+ --ngxsmk-form-field-gap: var(--ngxsmk-space-1-5);
139
+ --ngxsmk-form-field-label-weight: 500;
140
+ --ngxsmk-radio-size: 1.125rem;
141
+ --ngxsmk-radio-dot-size: 0.5rem;
142
+ --ngxsmk-radio-border: var(--ngxsmk-color-outline-strong);
143
+ --ngxsmk-data-table-border: var(--ngxsmk-color-outline);
144
+ --ngxsmk-data-table-radius: var(--ngxsmk-radius-md);
145
+ --ngxsmk-data-table-filter-bg: color-mix(in srgb, var(--ngxsmk-color-surface-variant) 40%, transparent);
146
+ --ngxsmk-data-table-filter-label-size: 0.7rem;
147
+ --ngxsmk-data-table-page-size: 2rem;
148
+ --ngxsmk-data-table-loading-height: 3px;
149
+ --ngxsmk-ai-chat-radius: var(--ngxsmk-radius-xl);
150
+ --ngxsmk-ai-chat-border: var(--ngxsmk-color-outline);
151
+ --ngxsmk-ai-chat-bg: var(--ngxsmk-color-surface);
152
+ --ngxsmk-ai-chat-header-bg: var(--ngxsmk-color-surface-variant);
153
+ --ngxsmk-ai-chat-bubble-bg: var(--ngxsmk-color-surface-variant);
154
+ --ngxsmk-ai-chat-bubble-user-bg: var(--ngxsmk-color-primary);
155
+ --ngxsmk-ai-chat-bubble-radius: var(--ngxsmk-radius-lg);
156
+ --ngxsmk-ai-chat-composer-radius: var(--ngxsmk-radius-full);
157
+ --ngxsmk-prompt-radius: var(--ngxsmk-radius-xl);
158
+ --ngxsmk-prompt-border: var(--ngxsmk-color-outline-strong);
159
+ --ngxsmk-prompt-shadow: var(--ngxsmk-shadow-sm);
160
+ --ngxsmk-prompt-bg: var(--ngxsmk-color-surface);
161
+ --ngxsmk-prompt-send-radius: var(--ngxsmk-radius-full);
162
+ --ngxsmk-chat-bubble-radius: var(--ngxsmk-radius-lg);
163
+ --ngxsmk-chat-bubble-bg: var(--ngxsmk-color-surface-container);
164
+ --ngxsmk-chat-bubble-user-bg: var(--ngxsmk-color-primary-container);
165
+ --ngxsmk-chat-bubble-padding: var(--ngxsmk-space-2) var(--ngxsmk-space-3);
75
166
  --ngxsmk-spreadsheet-bg: var(--ngxsmk-color-surface);
76
167
  --ngxsmk-spreadsheet-header-bg: var(--ngxsmk-color-surface-variant);
77
168
  --ngxsmk-spreadsheet-header-color: var(--ngxsmk-color-on-surface-variant);
@@ -100,15 +191,19 @@
100
191
  --ngxsmk-input-group-radius: var(--ngxsmk-radius-md);
101
192
  --ngxsmk-input-group-shadow: none;
102
193
  --ngxsmk-input-group-focus-border: var(--ngxsmk-color-primary);
103
- --ngxsmk-input-group-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-primary) 15%, transparent);
194
+ --ngxsmk-input-group-focus-shadow: var(--ngxsmk-focus-ring);
104
195
  --ngxsmk-input-group-error-border: var(--ngxsmk-color-error);
105
- --ngxsmk-input-group-error-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-error) 15%, transparent);
196
+ --ngxsmk-input-group-error-focus-shadow: var(--ngxsmk-focus-ring-error);
106
197
  --ngxsmk-input-group-success-border: var(--ngxsmk-color-success);
107
198
  --ngxsmk-input-group-warning-border: var(--ngxsmk-color-warning);
108
- --ngxsmk-input-group-height: 2.5rem;
199
+ --ngxsmk-input-group-height: var(--ngxsmk-control-height);
109
200
  --ngxsmk-input-group-padding: 0.75rem;
110
201
  --ngxsmk-input-group-gap: var(--ngxsmk-space-2);
111
202
  --ngxsmk-input-group-font: var(--ngxsmk-font-sans);
203
+ --ngxsmk-heatmap-level-1: color-mix(in srgb, var(--ngxsmk-color-success) 28%, var(--ngxsmk-color-surface-variant));
204
+ --ngxsmk-heatmap-level-2: color-mix(in srgb, var(--ngxsmk-color-success) 52%, var(--ngxsmk-color-surface-variant));
205
+ --ngxsmk-heatmap-level-3: color-mix(in srgb, var(--ngxsmk-color-success) 76%, var(--ngxsmk-color-surface-variant));
206
+ --ngxsmk-heatmap-level-4: var(--ngxsmk-color-success);
112
207
  --ngxsmk-control-height-sm: 2rem;
113
208
  --ngxsmk-control-height-md: 2.5rem;
114
209
  --ngxsmk-control-height-lg: 3rem;