@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.rose.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;
package/styles/ngxsmk.violet.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;