@ngxsmk/theme 2.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 (33) hide show
  1. package/README.md +50 -9
  2. package/esm2022/lib/css.mjs +155 -4
  3. package/esm2022/lib/define-config.mjs +3 -3
  4. package/esm2022/lib/ionic-provider.mjs +30 -0
  5. package/esm2022/lib/presets.mjs +167 -1
  6. package/esm2022/lib/theme-injector.service.mjs +17 -8
  7. package/esm2022/lib/token-adapter.mjs +154 -49
  8. package/esm2022/lib/tokens.mjs +10 -1
  9. package/esm2022/lib/types.mjs +1 -1
  10. package/esm2022/public-api.mjs +2 -1
  11. package/fesm2022/ngxsmk-theme.mjs +529 -62
  12. package/fesm2022/ngxsmk-theme.mjs.map +1 -1
  13. package/lib/css.d.ts.map +1 -1
  14. package/lib/ionic-provider.d.ts +18 -0
  15. package/lib/ionic-provider.d.ts.map +1 -0
  16. package/lib/presets.d.ts +14 -0
  17. package/lib/presets.d.ts.map +1 -1
  18. package/lib/theme-injector.service.d.ts.map +1 -1
  19. package/lib/token-adapter.d.ts +9 -7
  20. package/lib/token-adapter.d.ts.map +1 -1
  21. package/lib/tokens.d.ts +9 -0
  22. package/lib/tokens.d.ts.map +1 -1
  23. package/lib/types.d.ts +13 -0
  24. package/lib/types.d.ts.map +1 -1
  25. package/package.json +6 -2
  26. package/public-api.d.ts +1 -0
  27. package/public-api.d.ts.map +1 -1
  28. package/styles/ngxsmk.css +113 -3
  29. package/styles/ngxsmk.emerald.css +113 -3
  30. package/styles/ngxsmk.ink.css +500 -0
  31. package/styles/ngxsmk.neutral.css +113 -3
  32. package/styles/ngxsmk.rose.css +113 -3
  33. package/styles/ngxsmk.violet.css +113 -3
package/styles/ngxsmk.ink.css ADDED
@@ -0,0 +1,500 @@
1
+ /* Generated by @ngxsmk/theme — do not edit by hand. */
2
+ :root {
3
+ --ngxsmk-color-brand-50: #EFF7F6;
4
+ --ngxsmk-color-brand-100: #E0EFED;
5
+ --ngxsmk-color-brand-200: #BCDCD8;
6
+ --ngxsmk-color-brand-300: #90C3BD;
7
+ --ngxsmk-color-brand-400: #57A199;
8
+ --ngxsmk-color-brand-500: #2A847C;
9
+ --ngxsmk-color-brand-600: #0F766E;
10
+ --ngxsmk-color-brand-700: #00554F;
11
+ --ngxsmk-color-brand-800: #003E39;
12
+ --ngxsmk-color-brand-900: #002A26;
13
+ --ngxsmk-color-brand-950: #001310;
14
+ --ngxsmk-color-secondary-50: #F1F6FA;
15
+ --ngxsmk-color-secondary-100: #E3EDF6;
16
+ --ngxsmk-color-secondary-200: #C3D7EA;
17
+ --ngxsmk-color-secondary-300: #9BBCD9;
18
+ --ngxsmk-color-secondary-400: #6B97BE;
19
+ --ngxsmk-color-secondary-500: #4879A3;
20
+ --ngxsmk-color-secondary-600: #396B95;
21
+ --ngxsmk-color-secondary-700: #1B4B71;
22
+ --ngxsmk-color-secondary-800: #0A3555;
23
+ --ngxsmk-color-secondary-900: #02233D;
24
+ --ngxsmk-color-secondary-950: #000E1E;
25
+ --ngxsmk-color-neutral-50: #F6F7F8;
26
+ --ngxsmk-color-neutral-100: #EBEDF0;
27
+ --ngxsmk-color-neutral-200: #D5D8DE;
28
+ --ngxsmk-color-neutral-300: #B0B5BF;
29
+ --ngxsmk-color-neutral-400: #7E8491;
30
+ --ngxsmk-color-neutral-500: #5A606C;
31
+ --ngxsmk-color-neutral-600: #454954;
32
+ --ngxsmk-color-neutral-700: #33363E;
33
+ --ngxsmk-color-neutral-800: #1C1E24;
34
+ --ngxsmk-color-neutral-900: #12141A;
35
+ --ngxsmk-color-neutral-950: #0A0B0E;
36
+ --ngxsmk-font-sans: 'Geist Sans', 'Geist Sans Fallback', system-ui, -apple-system, sans-serif;
37
+ --ngxsmk-font-mono: 'Geist Mono', 'Geist Mono Fallback', monospace;
38
+ --ngxsmk-radius-base: 0.375rem;
39
+ --ngxsmk-control-height: 2.25rem;
40
+ --ngxsmk-motion-duration: var(--ngxsmk-duration-normal);
41
+ --ngxsmk-motion-ease: var(--ngxsmk-ease-in-out);
42
+ --ngxsmk-hover-lift: none;
43
+ --ngxsmk-press-scale: scale(0.98);
44
+ --ngxsmk-focus-ring: var(--ngxsmk-shadow-focus);
45
+ --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);
46
+ --ngxsmk-safe-area-top: env(safe-area-inset-top, 0px);
47
+ --ngxsmk-safe-area-bottom: env(safe-area-inset-bottom, 0px);
48
+ --ngxsmk-safe-area-left: env(safe-area-inset-left, 0px);
49
+ --ngxsmk-safe-area-right: env(safe-area-inset-right, 0px);
50
+ --ngxsmk-touch-target-min: 44px;
51
+ --ngxsmk-button-bg: var(--ngxsmk-color-primary);
52
+ --ngxsmk-button-color: var(--ngxsmk-color-on-primary);
53
+ --ngxsmk-button-font-family: var(--ngxsmk-font-sans);
54
+ --ngxsmk-button-font-weight: 600;
55
+ --ngxsmk-button-radius: var(--ngxsmk-radius-md);
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);
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);
66
+ --ngxsmk-card-bg: var(--ngxsmk-color-surface);
67
+ --ngxsmk-card-radius: var(--ngxsmk-radius-lg);
68
+ --ngxsmk-card-shadow: none;
69
+ --ngxsmk-card-border-color: var(--ngxsmk-color-outline);
70
+ --ngxsmk-card-border-width: 1px;
71
+ --ngxsmk-card-padding: var(--ngxsmk-space-5);
72
+ --ngxsmk-accordion-bg: var(--ngxsmk-color-surface);
73
+ --ngxsmk-accordion-radius: var(--ngxsmk-radius-lg);
74
+ --ngxsmk-accordion-border-color: var(--ngxsmk-color-outline);
75
+ --ngxsmk-progress-height: 0.375rem;
76
+ --ngxsmk-progress-bg: var(--ngxsmk-color-surface-variant);
77
+ --ngxsmk-progress-color: var(--ngxsmk-color-primary);
78
+ --ngxsmk-progress-radius: var(--ngxsmk-radius-full);
79
+ --ngxsmk-switch-width: 2.25rem;
80
+ --ngxsmk-switch-height: 1.25rem;
81
+ --ngxsmk-switch-radius: var(--ngxsmk-radius-full);
82
+ --ngxsmk-switch-bg: var(--ngxsmk-color-outline-strong);
83
+ --ngxsmk-switch-thumb-size: 0.875rem;
84
+ --ngxsmk-switch-thumb-bg: var(--ngxsmk-color-surface);
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: 650;
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-lg);
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: 8px;
103
+ --ngxsmk-dialog-max-width: 28rem;
104
+ --ngxsmk-sheet-radius: var(--ngxsmk-radius-lg);
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-md);
114
+ --ngxsmk-toast-shadow: var(--ngxsmk-shadow-lg);
115
+ --ngxsmk-toast-bg: var(--ngxsmk-color-surface-elevated);
116
+ --ngxsmk-toast-accent-width: 2px;
117
+ --ngxsmk-table-border: var(--ngxsmk-color-outline);
118
+ --ngxsmk-table-header-bg: color-mix(in srgb, var(--ngxsmk-color-surface-variant) 70%, 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);
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-md);
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: 2rem;
137
+ --ngxsmk-pagination-radius: var(--ngxsmk-radius-md);
138
+ --ngxsmk-form-field-gap: var(--ngxsmk-space-1);
139
+ --ngxsmk-form-field-label-weight: 600;
140
+ --ngxsmk-radio-size: 1.125rem;
141
+ --ngxsmk-radio-dot-size: 0.5rem;
142
+ --ngxsmk-radio-border: var(--ngxsmk-color-outline);
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) 55%, transparent);
146
+ --ngxsmk-data-table-filter-label-size: 0.7rem;
147
+ --ngxsmk-data-table-page-size: 1.875rem;
148
+ --ngxsmk-data-table-loading-height: 2px;
149
+ --ngxsmk-ai-chat-radius: var(--ngxsmk-radius-lg);
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);
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-md);
156
+ --ngxsmk-ai-chat-composer-radius: var(--ngxsmk-radius-md);
157
+ --ngxsmk-prompt-radius: var(--ngxsmk-radius-lg);
158
+ --ngxsmk-prompt-border: var(--ngxsmk-color-outline);
159
+ --ngxsmk-prompt-shadow: none;
160
+ --ngxsmk-prompt-bg: var(--ngxsmk-color-surface);
161
+ --ngxsmk-prompt-send-radius: var(--ngxsmk-radius-md);
162
+ --ngxsmk-chat-bubble-radius: var(--ngxsmk-radius-md);
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);
166
+ --ngxsmk-spreadsheet-bg: var(--ngxsmk-color-surface);
167
+ --ngxsmk-spreadsheet-header-bg: var(--ngxsmk-color-surface-variant);
168
+ --ngxsmk-spreadsheet-header-color: var(--ngxsmk-color-on-surface-variant);
169
+ --ngxsmk-spreadsheet-border: var(--ngxsmk-color-outline);
170
+ --ngxsmk-spreadsheet-grid-color: var(--ngxsmk-color-outline-variant);
171
+ --ngxsmk-spreadsheet-hover-bg: var(--ngxsmk-color-surface-hover);
172
+ --ngxsmk-spreadsheet-selected-bg: color-mix(in srgb, var(--ngxsmk-color-primary) 12%, transparent);
173
+ --ngxsmk-spreadsheet-active-border: var(--ngxsmk-color-primary);
174
+ --ngxsmk-spreadsheet-font: var(--ngxsmk-font-sans);
175
+ --ngxsmk-spreadsheet-font-mono: var(--ngxsmk-font-mono);
176
+ --ngxsmk-spreadsheet-row-height: 2.25rem;
177
+ --ngxsmk-spreadsheet-header-height: 2.5rem;
178
+ --ngxsmk-spreadsheet-cell-padding: 6px 10px;
179
+ --ngxsmk-spreadsheet-cell-font-size: var(--ngxsmk-text-body-sm-size);
180
+ --ngxsmk-spreadsheet-scrollbar-size: 8px;
181
+ --ngxsmk-spreadsheet-shadow: var(--ngxsmk-shadow-sm);
182
+ --ngxsmk-spreadsheet-radius: var(--ngxsmk-radius-lg);
183
+ --ngxsmk-spreadsheet-edit-bg: var(--ngxsmk-color-surface);
184
+ --ngxsmk-spreadsheet-edit-border: var(--ngxsmk-color-primary);
185
+ --ngxsmk-spreadsheet-row-hover-bg: var(--ngxsmk-color-surface-hover);
186
+ --ngxsmk-spreadsheet-col-hover-bg: color-mix(in srgb, var(--ngxsmk-color-primary) 6%, transparent);
187
+ --ngxsmk-spreadsheet-frozen-shadow: 2px 0 4px rgba(0,0,0,0.08);
188
+ --ngxsmk-spreadsheet-selection-range: color-mix(in srgb, var(--ngxsmk-color-primary) 8%, transparent);
189
+ --ngxsmk-input-group-bg: var(--ngxsmk-color-surface);
190
+ --ngxsmk-input-group-border: var(--ngxsmk-color-outline);
191
+ --ngxsmk-input-group-radius: var(--ngxsmk-radius-md);
192
+ --ngxsmk-input-group-shadow: none;
193
+ --ngxsmk-input-group-focus-border: var(--ngxsmk-color-primary);
194
+ --ngxsmk-input-group-focus-shadow: var(--ngxsmk-focus-ring);
195
+ --ngxsmk-input-group-error-border: var(--ngxsmk-color-error);
196
+ --ngxsmk-input-group-error-focus-shadow: var(--ngxsmk-focus-ring-error);
197
+ --ngxsmk-input-group-success-border: var(--ngxsmk-color-success);
198
+ --ngxsmk-input-group-warning-border: var(--ngxsmk-color-warning);
199
+ --ngxsmk-input-group-height: 2.25rem;
200
+ --ngxsmk-input-group-padding: 0.625rem;
201
+ --ngxsmk-input-group-gap: var(--ngxsmk-space-2);
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);
207
+ --ngxsmk-control-height-sm: 1.875rem;
208
+ --ngxsmk-control-height-md: 2.25rem;
209
+ --ngxsmk-control-height-lg: 2.75rem;
210
+ --ngxsmk-opacity-disabled: 0.5;
211
+ --ngxsmk-opacity-muted: 0.7;
212
+ --ngxsmk-opacity-faint: 0.4;
213
+ --ngxsmk-icon-sm: 1rem;
214
+ --ngxsmk-icon-md: 1.25rem;
215
+ --ngxsmk-icon-lg: 1.5rem;
216
+ --ngxsmk-tracking-tight: -0.02em;
217
+ --ngxsmk-tracking-normal: 0;
218
+ --ngxsmk-tracking-wide: 0.08em;
219
+ --ngxsmk-font-weight-regular: 400;
220
+ --ngxsmk-font-weight-medium: 500;
221
+ --ngxsmk-font-weight-semibold: 600;
222
+ --ngxsmk-font-weight-bold: 700;
223
+ --ngxsmk-leading-none: 1;
224
+ --ngxsmk-leading-tight: 1.25;
225
+ --ngxsmk-leading-normal: 1.5;
226
+ --ngxsmk-leading-relaxed: 1.625;
227
+ --ngxsmk-space-0: 0px;
228
+ --ngxsmk-space-1: 0.25rem;
229
+ --ngxsmk-space-2: 0.5rem;
230
+ --ngxsmk-space-3: 0.75rem;
231
+ --ngxsmk-space-4: 1rem;
232
+ --ngxsmk-space-5: 1.25rem;
233
+ --ngxsmk-space-6: 1.5rem;
234
+ --ngxsmk-space-8: 2rem;
235
+ --ngxsmk-space-10: 2.5rem;
236
+ --ngxsmk-space-12: 3rem;
237
+ --ngxsmk-space-16: 4rem;
238
+ --ngxsmk-space-20: 5rem;
239
+ --ngxsmk-space-24: 6rem;
240
+ --ngxsmk-space-32: 8rem;
241
+ --ngxsmk-space-0-5: 0.125rem;
242
+ --ngxsmk-space-1-5: 0.375rem;
243
+ --ngxsmk-radius-none: 0px;
244
+ --ngxsmk-radius-sm: 0.1875rem;
245
+ --ngxsmk-radius-md: 0.375rem;
246
+ --ngxsmk-radius-lg: 0.5rem;
247
+ --ngxsmk-radius-xl: 0.625rem;
248
+ --ngxsmk-radius-2xl: 0.75rem;
249
+ --ngxsmk-radius-3xl: 1rem;
250
+ --ngxsmk-radius-full: 9999px;
251
+ --ngxsmk-shadow-sm: 0 0 0 1px rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.04);
252
+ --ngxsmk-shadow-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);
253
+ --ngxsmk-shadow-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);
254
+ --ngxsmk-shadow-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);
255
+ --ngxsmk-shadow-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);
256
+ --ngxsmk-duration-instant: 0ms;
257
+ --ngxsmk-duration-fast: 100ms;
258
+ --ngxsmk-duration-normal: 200ms;
259
+ --ngxsmk-duration-slow: 300ms;
260
+ --ngxsmk-duration-slower: 500ms;
261
+ --ngxsmk-ease-linear: linear;
262
+ --ngxsmk-ease-in: cubic-bezier(0.4, 0, 1, 1);
263
+ --ngxsmk-ease-out: cubic-bezier(0, 0, 0.2, 1);
264
+ --ngxsmk-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
265
+ --ngxsmk-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
266
+ --ngxsmk-z-dropdown: 1000;
267
+ --ngxsmk-z-sticky: 1100;
268
+ --ngxsmk-z-banner: 1200;
269
+ --ngxsmk-z-overlay: 1300;
270
+ --ngxsmk-z-modal: 1400;
271
+ --ngxsmk-z-popover: 1500;
272
+ --ngxsmk-z-toast: 1600;
273
+ --ngxsmk-z-tooltip: 1700;
274
+ --ngxsmk-text-display-lg-size: 3.5625rem;
275
+ --ngxsmk-text-display-lg-line: 4rem;
276
+ --ngxsmk-text-display-lg-weight: 700;
277
+ --ngxsmk-text-display-md-size: 2.8125rem;
278
+ --ngxsmk-text-display-md-line: 3.25rem;
279
+ --ngxsmk-text-display-md-weight: 700;
280
+ --ngxsmk-text-display-sm-size: 2.25rem;
281
+ --ngxsmk-text-display-sm-line: 2.75rem;
282
+ --ngxsmk-text-display-sm-weight: 700;
283
+ --ngxsmk-text-headline-lg-size: 2rem;
284
+ --ngxsmk-text-headline-lg-line: 2.5rem;
285
+ --ngxsmk-text-headline-lg-weight: 600;
286
+ --ngxsmk-text-headline-md-size: 1.75rem;
287
+ --ngxsmk-text-headline-md-line: 2.25rem;
288
+ --ngxsmk-text-headline-md-weight: 600;
289
+ --ngxsmk-text-headline-sm-size: 1.5rem;
290
+ --ngxsmk-text-headline-sm-line: 2rem;
291
+ --ngxsmk-text-headline-sm-weight: 600;
292
+ --ngxsmk-text-title-lg-size: 1.375rem;
293
+ --ngxsmk-text-title-lg-line: 1.75rem;
294
+ --ngxsmk-text-title-lg-weight: 600;
295
+ --ngxsmk-text-title-md-size: 1.125rem;
296
+ --ngxsmk-text-title-md-line: 1.5rem;
297
+ --ngxsmk-text-title-md-weight: 600;
298
+ --ngxsmk-text-title-sm-size: 1rem;
299
+ --ngxsmk-text-title-sm-line: 1.5rem;
300
+ --ngxsmk-text-title-sm-weight: 600;
301
+ --ngxsmk-text-body-lg-size: 1rem;
302
+ --ngxsmk-text-body-lg-line: 1.5rem;
303
+ --ngxsmk-text-body-lg-weight: 400;
304
+ --ngxsmk-text-body-md-size: 0.875rem;
305
+ --ngxsmk-text-body-md-line: 1.25rem;
306
+ --ngxsmk-text-body-md-weight: 400;
307
+ --ngxsmk-text-body-sm-size: 0.75rem;
308
+ --ngxsmk-text-body-sm-line: 1rem;
309
+ --ngxsmk-text-body-sm-weight: 400;
310
+ --ngxsmk-text-label-lg-size: 0.875rem;
311
+ --ngxsmk-text-label-lg-line: 1.25rem;
312
+ --ngxsmk-text-label-lg-weight: 500;
313
+ --ngxsmk-text-label-md-size: 0.75rem;
314
+ --ngxsmk-text-label-md-line: 1rem;
315
+ --ngxsmk-text-label-md-weight: 500;
316
+ --ngxsmk-text-label-sm-size: 0.6875rem;
317
+ --ngxsmk-text-label-sm-line: 1rem;
318
+ --ngxsmk-text-label-sm-weight: 500;
319
+ --ngxsmk-text-body-xs-size: 0.6875rem;
320
+ --ngxsmk-text-body-xs-line: 1rem;
321
+ --ngxsmk-text-body-xs-weight: 400;
322
+ color-scheme: light;
323
+ --ngxsmk-color-primary: #0F766E;
324
+ --ngxsmk-color-on-primary: #FFFFFF;
325
+ --ngxsmk-color-primary-hover: #000000;
326
+ --ngxsmk-color-primary-active: #000000;
327
+ --ngxsmk-color-primary-container: #E0EFED;
328
+ --ngxsmk-color-on-primary-container: #002A26;
329
+ --ngxsmk-color-secondary: #396B95;
330
+ --ngxsmk-color-on-secondary: #FFFFFF;
331
+ --ngxsmk-color-secondary-hover: #000006;
332
+ --ngxsmk-color-secondary-active: #000006;
333
+ --ngxsmk-color-secondary-container: #E3EDF6;
334
+ --ngxsmk-color-on-secondary-container: #02233D;
335
+ --ngxsmk-color-background: #F4F5F7;
336
+ --ngxsmk-color-on-background: #0A0B0E;
337
+ --ngxsmk-color-surface: #FFFFFF;
338
+ --ngxsmk-color-on-surface: #0A0B0E;
339
+ --ngxsmk-color-surface-variant: #EBEDF0;
340
+ --ngxsmk-color-on-surface-variant: #5A606C;
341
+ --ngxsmk-color-surface-muted: #F6F7F8;
342
+ --ngxsmk-color-surface-elevated: #FFFFFF;
343
+ --ngxsmk-color-surface-overlay: #FFFFFF;
344
+ --ngxsmk-color-on-surface-muted: #7E8491;
345
+ --ngxsmk-color-surface-hover: rgb(10 11 14 / 0.04);
346
+ --ngxsmk-color-surface-active: rgb(10 11 14 / 0.08);
347
+ --ngxsmk-color-surface-container: #FFFFFF;
348
+ --ngxsmk-color-outline: rgb(10 11 14 / 0.1);
349
+ --ngxsmk-color-outline-strong: #D5D8DE;
350
+ --ngxsmk-color-outline-variant: rgb(10 11 14 / 0.06);
351
+ --ngxsmk-color-outline-subtle: rgb(10 11 14 / 0.05);
352
+ --ngxsmk-color-surface-1: #FFFFFF;
353
+ --ngxsmk-color-surface-2: #F6F7F8;
354
+ --ngxsmk-color-surface-3: #EBEDF0;
355
+ --ngxsmk-color-surface-4: #D5D8DE;
356
+ --ngxsmk-color-surface-5: #B0B5BF;
357
+ --ngxsmk-color-ring: #0F766E;
358
+ --ngxsmk-color-backdrop: rgb(10 11 14 / 0.48);
359
+ --ngxsmk-shadow-focus: 0 0 0 1px #FFFFFF, 0 0 0 3px color-mix(in srgb, #0F766E 55%, transparent);
360
+ --ngxsmk-chart-1: #2A78D6;
361
+ --ngxsmk-chart-2: #1BAF7A;
362
+ --ngxsmk-chart-3: #EDA100;
363
+ --ngxsmk-chart-4: #008300;
364
+ --ngxsmk-chart-5: #4A3AA7;
365
+ --ngxsmk-chart-6: #E34948;
366
+ --ngxsmk-chart-7: #E87BA4;
367
+ --ngxsmk-chart-8: #EB6834;
368
+ --ngxsmk-color-tertiary: #4D78A5;
369
+ --ngxsmk-color-on-tertiary: #FFFFFF;
370
+ --ngxsmk-color-tertiary-container: #E3ECF6;
371
+ --ngxsmk-color-on-tertiary-container: #07233E;
372
+ --ngxsmk-color-success: #0D8626;
373
+ --ngxsmk-color-on-success: #FFFFFF;
374
+ --ngxsmk-color-success-container: #DFF1DF;
375
+ --ngxsmk-color-on-success-container: #004300;
376
+ --ngxsmk-color-warning: #E9AF08;
377
+ --ngxsmk-color-on-warning: #FFFFFF;
378
+ --ngxsmk-color-warning-container: #F5EAD5;
379
+ --ngxsmk-color-on-warning-container: #522700;
380
+ --ngxsmk-color-error: #E3193B;
381
+ --ngxsmk-color-on-error: #FFFFFF;
382
+ --ngxsmk-color-error-container: #FFE1DF;
383
+ --ngxsmk-color-on-error-container: #780000;
384
+ --ngxsmk-color-info: #2563EB;
385
+ --ngxsmk-color-on-info: #FFFFFF;
386
+ --ngxsmk-color-info-container: #DDECFF;
387
+ --ngxsmk-color-on-info-container: #001E8D;
388
+ }
389
+
390
+ :root.dark, :root.dark body, .dark {
391
+ color-scheme: dark;
392
+ --ngxsmk-color-primary: #57A199;
393
+ --ngxsmk-color-on-primary: #FFFFFF;
394
+ --ngxsmk-color-primary-hover: #90C3BD;
395
+ --ngxsmk-color-primary-active: #BCDCD8;
396
+ --ngxsmk-color-primary-container: #002A26;
397
+ --ngxsmk-color-on-primary-container: #E0EFED;
398
+ --ngxsmk-color-secondary: #6B97BE;
399
+ --ngxsmk-color-on-secondary: #FFFFFF;
400
+ --ngxsmk-color-secondary-hover: #9BBCD9;
401
+ --ngxsmk-color-secondary-active: #C3D7EA;
402
+ --ngxsmk-color-secondary-container: #02233D;
403
+ --ngxsmk-color-on-secondary-container: #E3EDF6;
404
+ --ngxsmk-color-background: #0A0B0E;
405
+ --ngxsmk-color-on-background: #DFE2E5;
406
+ --ngxsmk-color-surface: #12141A;
407
+ --ngxsmk-color-on-surface: #DFE2E5;
408
+ --ngxsmk-color-surface-variant: #1C1E24;
409
+ --ngxsmk-color-on-surface-variant: #AAAFB5;
410
+ --ngxsmk-color-surface-muted: #141416;
411
+ --ngxsmk-color-surface-elevated: #1C1E24;
412
+ --ngxsmk-color-surface-overlay: #1C1E24;
413
+ --ngxsmk-color-on-surface-muted: #777C85;
414
+ --ngxsmk-color-surface-hover: rgb(255 255 255 / 0.05);
415
+ --ngxsmk-color-surface-active: rgb(255 255 255 / 0.1);
416
+ --ngxsmk-color-surface-container: #12141A;
417
+ --ngxsmk-color-outline: rgb(246 247 248 / 0.12);
418
+ --ngxsmk-color-outline-strong: rgb(246 247 248 / 0.18);
419
+ --ngxsmk-color-outline-variant: rgb(246 247 248 / 0.08);
420
+ --ngxsmk-color-outline-subtle: rgb(242 244 246 / 0.05);
421
+ --ngxsmk-color-surface-1: #12141A;
422
+ --ngxsmk-color-surface-2: #1C1E24;
423
+ --ngxsmk-color-surface-3: #454954;
424
+ --ngxsmk-color-surface-4: #5A606C;
425
+ --ngxsmk-color-surface-5: #7E8491;
426
+ --ngxsmk-color-ring: #57A199;
427
+ --ngxsmk-color-backdrop: rgb(0 0 0 / 0.62);
428
+ --ngxsmk-shadow-focus: 0 0 0 1px #12141A, 0 0 0 3px color-mix(in srgb, #2DD4BF 50%, transparent);
429
+ --ngxsmk-chart-1: #3987E5;
430
+ --ngxsmk-chart-2: #199E70;
431
+ --ngxsmk-chart-3: #C98500;
432
+ --ngxsmk-chart-4: #008300;
433
+ --ngxsmk-chart-5: #9085E9;
434
+ --ngxsmk-chart-6: #E66767;
435
+ --ngxsmk-chart-7: #D55181;
436
+ --ngxsmk-chart-8: #D95926;
437
+ --ngxsmk-color-tertiary: #6F96C0;
438
+ --ngxsmk-color-on-tertiary: #010E1E;
439
+ --ngxsmk-color-tertiary-container: #07233E;
440
+ --ngxsmk-color-on-tertiary-container: #E3ECF6;
441
+ --ngxsmk-color-success: #51A957;
442
+ --ngxsmk-color-on-success: #001500;
443
+ --ngxsmk-color-success-container: #001500;
444
+ --ngxsmk-color-on-success-container: #8CCA8D;
445
+ --ngxsmk-color-warning: #BA8900;
446
+ --ngxsmk-color-on-warning: #1C0700;
447
+ --ngxsmk-color-warning-container: #1C0700;
448
+ --ngxsmk-color-on-warning-container: #E9AF08;
449
+ --ngxsmk-color-error: #F3515A;
450
+ --ngxsmk-color-on-error: #2E0000;
451
+ --ngxsmk-color-error-container: #2E0000;
452
+ --ngxsmk-color-on-error-container: #FF8F8F;
453
+ --ngxsmk-color-info: #518BFF;
454
+ --ngxsmk-color-on-info: #000238;
455
+ --ngxsmk-color-info-container: #000238;
456
+ --ngxsmk-color-on-info-container: #88B6FF;
457
+ --ngxsmk-hover-lift: none;
458
+ --ngxsmk-control-height: 2.25rem;
459
+ --ngxsmk-control-height-sm: 1.875rem;
460
+ --ngxsmk-control-height-md: 2.25rem;
461
+ --ngxsmk-control-height-lg: 2.75rem;
462
+ --ngxsmk-button-font-weight: 600;
463
+ --ngxsmk-card-shadow: none;
464
+ --ngxsmk-card-radius: var(--ngxsmk-radius-lg);
465
+ --ngxsmk-dialog-radius: var(--ngxsmk-radius-lg);
466
+ --ngxsmk-input-border: var(--ngxsmk-color-outline);
467
+ --ngxsmk-select-border: var(--ngxsmk-color-outline);
468
+ --ngxsmk-form-field-label-weight: 600;
469
+ --ngxsmk-input-group-height: 2.25rem;
470
+ --ngxsmk-ai-chat-radius: var(--ngxsmk-radius-lg);
471
+ --ngxsmk-ai-chat-header-bg: var(--ngxsmk-color-surface);
472
+ --ngxsmk-prompt-shadow: none;
473
+ --ngxsmk-prompt-border: var(--ngxsmk-color-outline);
474
+ --ngxsmk-prompt-send-radius: var(--ngxsmk-radius-md);
475
+ --ngxsmk-data-table-filter-bg: color-mix(in srgb, var(--ngxsmk-color-surface-variant) 70%, transparent);
476
+ }
477
+
478
+ @media (prefers-reduced-motion: reduce) {
479
+ :root {
480
+ --ngxsmk-motion-duration: 0ms;
481
+ --ngxsmk-hover-lift: none;
482
+ --ngxsmk-press-scale: none;
483
+ --ngxsmk-duration-instant: 0ms;
484
+ --ngxsmk-duration-fast: 0ms;
485
+ --ngxsmk-duration-normal: 0ms;
486
+ --ngxsmk-duration-slow: 0ms;
487
+ --ngxsmk-duration-slower: 0ms;
488
+ }
489
+ }
490
+
491
+ :root.ngxsmk-reduce-motion, .ngxsmk-reduce-motion {
492
+ --ngxsmk-motion-duration: 0ms;
493
+ --ngxsmk-hover-lift: none;
494
+ --ngxsmk-press-scale: none;
495
+ --ngxsmk-duration-instant: 0ms;
496
+ --ngxsmk-duration-fast: 0ms;
497
+ --ngxsmk-duration-normal: 0ms;
498
+ --ngxsmk-duration-slow: 0ms;
499
+ --ngxsmk-duration-slower: 0ms;
500
+ }
package/styles/ngxsmk.neutral.css CHANGED
@@ -43,16 +43,32 @@
43
43
  --ngxsmk-press-scale: scale(0.98);
44
44
  --ngxsmk-focus-ring: var(--ngxsmk-shadow-focus);
45
45
  --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);
46
+ --ngxsmk-safe-area-top: env(safe-area-inset-top, 0px);
47
+ --ngxsmk-safe-area-bottom: env(safe-area-inset-bottom, 0px);
48
+ --ngxsmk-safe-area-left: env(safe-area-inset-left, 0px);
49
+ --ngxsmk-safe-area-right: env(safe-area-inset-right, 0px);
50
+ --ngxsmk-touch-target-min: 44px;
46
51
  --ngxsmk-button-bg: var(--ngxsmk-color-primary);
47
52
  --ngxsmk-button-color: var(--ngxsmk-color-on-primary);
48
53
  --ngxsmk-button-font-family: var(--ngxsmk-font-sans);
49
54
  --ngxsmk-button-font-weight: 500;
50
55
  --ngxsmk-button-radius: var(--ngxsmk-radius-base);
51
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);
52
66
  --ngxsmk-card-bg: var(--ngxsmk-color-surface);
53
67
  --ngxsmk-card-radius: var(--ngxsmk-radius-xl);
54
68
  --ngxsmk-card-shadow: var(--ngxsmk-shadow-sm);
55
69
  --ngxsmk-card-border-color: var(--ngxsmk-color-outline);
70
+ --ngxsmk-card-border-width: 1px;
71
+ --ngxsmk-card-padding: var(--ngxsmk-space-5);
56
72
  --ngxsmk-accordion-bg: var(--ngxsmk-color-surface);
57
73
  --ngxsmk-accordion-radius: var(--ngxsmk-radius-lg);
58
74
  --ngxsmk-accordion-border-color: var(--ngxsmk-color-outline);
@@ -67,6 +83,86 @@
67
83
  --ngxsmk-switch-thumb-size: 0.875rem;
68
84
  --ngxsmk-switch-thumb-bg: var(--ngxsmk-color-surface);
69
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);
70
166
  --ngxsmk-spreadsheet-bg: var(--ngxsmk-color-surface);
71
167
  --ngxsmk-spreadsheet-header-bg: var(--ngxsmk-color-surface-variant);
72
168
  --ngxsmk-spreadsheet-header-color: var(--ngxsmk-color-on-surface-variant);
@@ -95,15 +191,19 @@
95
191
  --ngxsmk-input-group-radius: var(--ngxsmk-radius-md);
96
192
  --ngxsmk-input-group-shadow: none;
97
193
  --ngxsmk-input-group-focus-border: var(--ngxsmk-color-primary);
98
- --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);
99
195
  --ngxsmk-input-group-error-border: var(--ngxsmk-color-error);
100
- --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);
101
197
  --ngxsmk-input-group-success-border: var(--ngxsmk-color-success);
102
198
  --ngxsmk-input-group-warning-border: var(--ngxsmk-color-warning);
103
- --ngxsmk-input-group-height: 2.5rem;
199
+ --ngxsmk-input-group-height: var(--ngxsmk-control-height);
104
200
  --ngxsmk-input-group-padding: 0.75rem;
105
201
  --ngxsmk-input-group-gap: var(--ngxsmk-space-2);
106
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);
107
207
  --ngxsmk-control-height-sm: 2rem;
108
208
  --ngxsmk-control-height-md: 2.5rem;
109
209
  --ngxsmk-control-height-lg: 3rem;
@@ -238,12 +338,17 @@
238
338
  --ngxsmk-color-on-surface: #0A1317;
239
339
  --ngxsmk-color-surface-variant: #E4E9EE;
240
340
  --ngxsmk-color-on-surface-variant: #4E606F;
341
+ --ngxsmk-color-surface-muted: #F1F4F7;
342
+ --ngxsmk-color-surface-elevated: #FFFFFF;
343
+ --ngxsmk-color-surface-overlay: #FFFFFF;
344
+ --ngxsmk-color-on-surface-muted: #778593;
241
345
  --ngxsmk-color-surface-hover: rgb(5 54 89 / 0.05);
242
346
  --ngxsmk-color-surface-active: rgb(5 54 89 / 0.1);
243
347
  --ngxsmk-color-surface-container: #FFFFFF;
244
348
  --ngxsmk-color-outline: rgb(5 54 89 / 0.1);
245
349
  --ngxsmk-color-outline-strong: #CCD3DB;
246
350
  --ngxsmk-color-outline-variant: rgb(5 54 89 / 0.06);
351
+ --ngxsmk-color-outline-subtle: rgb(5 54 89 / 0.05);
247
352
  --ngxsmk-color-surface-1: #FFFFFF;
248
353
  --ngxsmk-color-surface-2: #F1F4F7;
249
354
  --ngxsmk-color-surface-3: #E4E9EE;
@@ -302,12 +407,17 @@
302
407
  --ngxsmk-color-on-surface: #DFE2E5;
303
408
  --ngxsmk-color-surface-variant: #28292C;
304
409
  --ngxsmk-color-on-surface-variant: #AAAFB5;
410
+ --ngxsmk-color-surface-muted: #141416;
411
+ --ngxsmk-color-surface-elevated: #28292C;
412
+ --ngxsmk-color-surface-overlay: #2F3136;
413
+ --ngxsmk-color-on-surface-muted: #777C85;
305
414
  --ngxsmk-color-surface-hover: rgb(255 255 255 / 0.05);
306
415
  --ngxsmk-color-surface-active: rgb(255 255 255 / 0.1);
307
416
  --ngxsmk-color-surface-container: #28292C;
308
417
  --ngxsmk-color-outline: rgb(242 244 246 / 0.1);
309
418
  --ngxsmk-color-outline-strong: #494D53;
310
419
  --ngxsmk-color-outline-variant: rgb(242 244 246 / 0.06);
420
+ --ngxsmk-color-outline-subtle: rgb(242 244 246 / 0.05);
311
421
  --ngxsmk-color-surface-1: #1F1F22;
312
422
  --ngxsmk-color-surface-2: #2A333B;
313
423
  --ngxsmk-color-surface-3: #3A4650;