@ngxsmk/theme 1.3.1 → 2.0.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 (30) hide show
  1. package/README.md +13 -1
  2. package/esm2022/lib/color.mjs +73 -76
  3. package/esm2022/lib/css.mjs +112 -30
  4. package/esm2022/lib/theme-injector.service.mjs +81 -0
  5. package/esm2022/lib/theme.service.mjs +19 -20
  6. package/esm2022/lib/token-adapter.mjs +80 -0
  7. package/esm2022/lib/tokens.mjs +16 -2
  8. package/esm2022/public-api.mjs +3 -1
  9. package/fesm2022/ngxsmk-theme.mjs +370 -124
  10. package/fesm2022/ngxsmk-theme.mjs.map +1 -1
  11. package/lib/color.d.ts +9 -15
  12. package/lib/color.d.ts.map +1 -1
  13. package/lib/css.d.ts.map +1 -1
  14. package/lib/theme-injector.service.d.ts +37 -0
  15. package/lib/theme-injector.service.d.ts.map +1 -0
  16. package/lib/theme.service.d.ts +12 -6
  17. package/lib/theme.service.d.ts.map +1 -1
  18. package/lib/token-adapter.d.ts +26 -0
  19. package/lib/token-adapter.d.ts.map +1 -0
  20. package/lib/tokens.d.ts +4 -0
  21. package/lib/tokens.d.ts.map +1 -1
  22. package/package.json +38 -13
  23. package/public-api.d.ts +2 -0
  24. package/public-api.d.ts.map +1 -1
  25. package/styles/ngxsmk.css +137 -76
  26. package/styles/ngxsmk.emerald.css +137 -76
  27. package/styles/ngxsmk.neutral.css +114 -53
  28. package/styles/ngxsmk.rose.css +137 -76
  29. package/styles/ngxsmk.violet.css +136 -75
  30. package/tailwind-v4.css +234 -0
package/styles/ngxsmk.neutral.css CHANGED
@@ -11,17 +11,17 @@
11
11
  --ngxsmk-color-brand-800: #1F1F23;
12
12
  --ngxsmk-color-brand-900: #18181B;
13
13
  --ngxsmk-color-brand-950: #09090B;
14
- --ngxsmk-color-secondary-50: #F8F7F8;
15
- --ngxsmk-color-secondary-100: #F1EFF1;
16
- --ngxsmk-color-secondary-200: #E0DCE0;
17
- --ngxsmk-color-secondary-300: #CAC4CA;
18
- --ngxsmk-color-secondary-400: #ADA3AD;
19
- --ngxsmk-color-secondary-500: #958895;
20
- --ngxsmk-color-secondary-600: #827382;
21
- --ngxsmk-color-secondary-700: #6C606C;
22
- --ngxsmk-color-secondary-800: #564D56;
23
- --ngxsmk-color-secondary-900: #443C44;
24
- --ngxsmk-color-secondary-950: #1B181B;
14
+ --ngxsmk-color-secondary-50: #F5F5F5;
15
+ --ngxsmk-color-secondary-100: #ECEBEB;
16
+ --ngxsmk-color-secondary-200: #D5D3D5;
17
+ --ngxsmk-color-secondary-300: #B9B6B8;
18
+ --ngxsmk-color-secondary-400: #949193;
19
+ --ngxsmk-color-secondary-500: #777376;
20
+ --ngxsmk-color-secondary-600: #605C5F;
21
+ --ngxsmk-color-secondary-700: #4A4649;
22
+ --ngxsmk-color-secondary-800: #353234;
23
+ --ngxsmk-color-secondary-900: #1A1719;
24
+ --ngxsmk-color-secondary-950: #0E0D0E;
25
25
  --ngxsmk-color-neutral-50: #F1F4F7;
26
26
  --ngxsmk-color-neutral-100: #E4E9EE;
27
27
  --ngxsmk-color-neutral-200: #CCD3DB;
@@ -34,7 +34,7 @@
34
34
  --ngxsmk-color-neutral-900: #18181A;
35
35
  --ngxsmk-color-neutral-950: #111112;
36
36
  --ngxsmk-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
37
- --ngxsmk-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
37
+ --ngxsmk-font-mono: 'Geist Mono', 'Geist Mono Fallback', monospace;
38
38
  --ngxsmk-radius-base: 0.5rem;
39
39
  --ngxsmk-control-height: 2.5rem;
40
40
  --ngxsmk-motion-duration: var(--ngxsmk-duration-normal);
@@ -67,6 +67,43 @@
67
67
  --ngxsmk-switch-thumb-size: 0.875rem;
68
68
  --ngxsmk-switch-thumb-bg: var(--ngxsmk-color-surface);
69
69
  --ngxsmk-switch-checked-bg: var(--ngxsmk-color-primary);
70
+ --ngxsmk-spreadsheet-bg: var(--ngxsmk-color-surface);
71
+ --ngxsmk-spreadsheet-header-bg: var(--ngxsmk-color-surface-variant);
72
+ --ngxsmk-spreadsheet-header-color: var(--ngxsmk-color-on-surface-variant);
73
+ --ngxsmk-spreadsheet-border: var(--ngxsmk-color-outline);
74
+ --ngxsmk-spreadsheet-grid-color: var(--ngxsmk-color-outline-variant);
75
+ --ngxsmk-spreadsheet-hover-bg: var(--ngxsmk-color-surface-hover);
76
+ --ngxsmk-spreadsheet-selected-bg: color-mix(in srgb, var(--ngxsmk-color-primary) 12%, transparent);
77
+ --ngxsmk-spreadsheet-active-border: var(--ngxsmk-color-primary);
78
+ --ngxsmk-spreadsheet-font: var(--ngxsmk-font-sans);
79
+ --ngxsmk-spreadsheet-font-mono: var(--ngxsmk-font-mono);
80
+ --ngxsmk-spreadsheet-row-height: 2.25rem;
81
+ --ngxsmk-spreadsheet-header-height: 2.5rem;
82
+ --ngxsmk-spreadsheet-cell-padding: 6px 10px;
83
+ --ngxsmk-spreadsheet-cell-font-size: var(--ngxsmk-text-body-sm-size);
84
+ --ngxsmk-spreadsheet-scrollbar-size: 8px;
85
+ --ngxsmk-spreadsheet-shadow: var(--ngxsmk-shadow-sm);
86
+ --ngxsmk-spreadsheet-radius: var(--ngxsmk-radius-lg);
87
+ --ngxsmk-spreadsheet-edit-bg: var(--ngxsmk-color-surface);
88
+ --ngxsmk-spreadsheet-edit-border: var(--ngxsmk-color-primary);
89
+ --ngxsmk-spreadsheet-row-hover-bg: var(--ngxsmk-color-surface-hover);
90
+ --ngxsmk-spreadsheet-col-hover-bg: color-mix(in srgb, var(--ngxsmk-color-primary) 6%, transparent);
91
+ --ngxsmk-spreadsheet-frozen-shadow: 2px 0 4px rgba(0,0,0,0.08);
92
+ --ngxsmk-spreadsheet-selection-range: color-mix(in srgb, var(--ngxsmk-color-primary) 8%, transparent);
93
+ --ngxsmk-input-group-bg: var(--ngxsmk-color-surface);
94
+ --ngxsmk-input-group-border: var(--ngxsmk-color-outline-strong);
95
+ --ngxsmk-input-group-radius: var(--ngxsmk-radius-md);
96
+ --ngxsmk-input-group-shadow: none;
97
+ --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);
99
+ --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);
101
+ --ngxsmk-input-group-success-border: var(--ngxsmk-color-success);
102
+ --ngxsmk-input-group-warning-border: var(--ngxsmk-color-warning);
103
+ --ngxsmk-input-group-height: 2.5rem;
104
+ --ngxsmk-input-group-padding: 0.75rem;
105
+ --ngxsmk-input-group-gap: var(--ngxsmk-space-2);
106
+ --ngxsmk-input-group-font: var(--ngxsmk-font-sans);
70
107
  --ngxsmk-control-height-sm: 2rem;
71
108
  --ngxsmk-control-height-md: 2.5rem;
72
109
  --ngxsmk-control-height-lg: 3rem;
@@ -79,6 +116,14 @@
79
116
  --ngxsmk-tracking-tight: -0.02em;
80
117
  --ngxsmk-tracking-normal: 0;
81
118
  --ngxsmk-tracking-wide: 0.08em;
119
+ --ngxsmk-font-weight-regular: 400;
120
+ --ngxsmk-font-weight-medium: 500;
121
+ --ngxsmk-font-weight-semibold: 600;
122
+ --ngxsmk-font-weight-bold: 700;
123
+ --ngxsmk-leading-none: 1;
124
+ --ngxsmk-leading-tight: 1.25;
125
+ --ngxsmk-leading-normal: 1.5;
126
+ --ngxsmk-leading-relaxed: 1.625;
82
127
  --ngxsmk-space-0: 0px;
83
128
  --ngxsmk-space-1: 0.25rem;
84
129
  --ngxsmk-space-2: 0.5rem;
@@ -177,16 +222,16 @@
177
222
  color-scheme: light;
178
223
  --ngxsmk-color-primary: #18181B;
179
224
  --ngxsmk-color-on-primary: #FFFFFF;
180
- --ngxsmk-color-primary-hover: #050505;
225
+ --ngxsmk-color-primary-hover: #000000;
181
226
  --ngxsmk-color-primary-active: #000000;
182
227
  --ngxsmk-color-primary-container: #F4F4F5;
183
228
  --ngxsmk-color-on-primary-container: #18181B;
184
- --ngxsmk-color-secondary: #1B181B;
229
+ --ngxsmk-color-secondary: #1A1719;
185
230
  --ngxsmk-color-on-secondary: #FFFFFF;
186
- --ngxsmk-color-secondary-hover: #050505;
231
+ --ngxsmk-color-secondary-hover: #000000;
187
232
  --ngxsmk-color-secondary-active: #000000;
188
- --ngxsmk-color-secondary-container: #F1EFF1;
189
- --ngxsmk-color-on-secondary-container: #443C44;
233
+ --ngxsmk-color-secondary-container: #ECEBEB;
234
+ --ngxsmk-color-on-secondary-container: #1A1719;
190
235
  --ngxsmk-color-background: #F1F4F7;
191
236
  --ngxsmk-color-on-background: #0A1317;
192
237
  --ngxsmk-color-surface: #FFFFFF;
@@ -207,26 +252,34 @@
207
252
  --ngxsmk-color-ring: #18181B;
208
253
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
209
254
  --ngxsmk-shadow-focus: 0 0 0 2px #F4F4F5, 0 0 0 4px color-mix(in srgb, #18181B 45%, transparent);
210
- --ngxsmk-color-tertiary: #958895;
255
+ --ngxsmk-chart-1: #2A78D6;
256
+ --ngxsmk-chart-2: #1BAF7A;
257
+ --ngxsmk-chart-3: #EDA100;
258
+ --ngxsmk-chart-4: #008300;
259
+ --ngxsmk-chart-5: #4A3AA7;
260
+ --ngxsmk-chart-6: #E34948;
261
+ --ngxsmk-chart-7: #E87BA4;
262
+ --ngxsmk-chart-8: #EB6834;
263
+ --ngxsmk-color-tertiary: #787375;
211
264
  --ngxsmk-color-on-tertiary: #FFFFFF;
212
- --ngxsmk-color-tertiary-container: #F1EFF1;
213
- --ngxsmk-color-on-tertiary-container: #443C44;
265
+ --ngxsmk-color-tertiary-container: #ECEBEB;
266
+ --ngxsmk-color-on-tertiary-container: #1B1719;
214
267
  --ngxsmk-color-success: #0D8626;
215
268
  --ngxsmk-color-on-success: #FFFFFF;
216
- --ngxsmk-color-success-container: #E3FCE8;
217
- --ngxsmk-color-on-success-container: #0D8626;
269
+ --ngxsmk-color-success-container: #DFF1DF;
270
+ --ngxsmk-color-on-success-container: #004300;
218
271
  --ngxsmk-color-warning: #E9AF08;
219
272
  --ngxsmk-color-on-warning: #FFFFFF;
220
- --ngxsmk-color-warning-container: #FEF7E1;
221
- --ngxsmk-color-on-warning-container: #9E7705;
273
+ --ngxsmk-color-warning-container: #F5EAD5;
274
+ --ngxsmk-color-on-warning-container: #522700;
222
275
  --ngxsmk-color-error: #E3193B;
223
276
  --ngxsmk-color-on-error: #FFFFFF;
224
- --ngxsmk-color-error-container: #FCE3E8;
225
- --ngxsmk-color-on-error-container: #931026;
277
+ --ngxsmk-color-error-container: #FFE1DF;
278
+ --ngxsmk-color-on-error-container: #780000;
226
279
  --ngxsmk-color-info: #2563EB;
227
280
  --ngxsmk-color-on-info: #FFFFFF;
228
- --ngxsmk-color-info-container: #E3EBFC;
229
- --ngxsmk-color-on-info-container: #0E3895;
281
+ --ngxsmk-color-info-container: #DDECFF;
282
+ --ngxsmk-color-on-info-container: #001E8D;
230
283
  }
231
284
 
232
285
  :root.dark, :root.dark body, .dark {
@@ -237,12 +290,12 @@
237
290
  --ngxsmk-color-primary-active: #D4D4D8;
238
291
  --ngxsmk-color-primary-container: #18181B;
239
292
  --ngxsmk-color-on-primary-container: #F4F4F5;
240
- --ngxsmk-color-secondary: #ADA3AD;
293
+ --ngxsmk-color-secondary: #949193;
241
294
  --ngxsmk-color-on-secondary: #FFFFFF;
242
- --ngxsmk-color-secondary-hover: #CAC4CA;
243
- --ngxsmk-color-secondary-active: #E0DCE0;
244
- --ngxsmk-color-secondary-container: #443C44;
245
- --ngxsmk-color-on-secondary-container: #F1EFF1;
295
+ --ngxsmk-color-secondary-hover: #B9B6B8;
296
+ --ngxsmk-color-secondary-active: #D5D3D5;
297
+ --ngxsmk-color-secondary-container: #1A1719;
298
+ --ngxsmk-color-on-secondary-container: #ECEBEB;
246
299
  --ngxsmk-color-background: #111112;
247
300
  --ngxsmk-color-on-background: #DFE2E5;
248
301
  --ngxsmk-color-surface: #1F1F22;
@@ -263,26 +316,34 @@
263
316
  --ngxsmk-color-ring: #D4D4D8;
264
317
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
265
318
  --ngxsmk-shadow-focus: 0 0 0 2px color-mix(in srgb, #A1A1AA 25%, transparent), 0 0 0 4px color-mix(in srgb, #A1A1AA 45%, transparent);
266
- --ngxsmk-color-tertiary: #ADA3AD;
267
- --ngxsmk-color-on-tertiary: #1B181B;
268
- --ngxsmk-color-tertiary-container: #443C44;
269
- --ngxsmk-color-on-tertiary-container: #F1EFF1;
270
- --ngxsmk-color-success: #61F07E;
271
- --ngxsmk-color-on-success: #074A15;
272
- --ngxsmk-color-success-container: #074A15;
273
- --ngxsmk-color-on-success-container: #99F5AC;
274
- --ngxsmk-color-warning: #F9D057;
275
- --ngxsmk-color-on-warning: #4F3B03;
276
- --ngxsmk-color-warning-container: #4F3B03;
277
- --ngxsmk-color-on-warning-container: #FBE093;
278
- --ngxsmk-color-error: #EE637A;
279
- --ngxsmk-color-on-error: #4A0813;
280
- --ngxsmk-color-error-container: #4A0813;
281
- --ngxsmk-color-on-error-container: #F49AA9;
282
- --ngxsmk-color-info: #608DF0;
283
- --ngxsmk-color-on-info: #071C4B;
284
- --ngxsmk-color-info-container: #071C4B;
285
- --ngxsmk-color-on-info-container: #98B5F6;
319
+ --ngxsmk-chart-1: #3987E5;
320
+ --ngxsmk-chart-2: #199E70;
321
+ --ngxsmk-chart-3: #C98500;
322
+ --ngxsmk-chart-4: #008300;
323
+ --ngxsmk-chart-5: #9085E9;
324
+ --ngxsmk-chart-6: #E66767;
325
+ --ngxsmk-chart-7: #D55181;
326
+ --ngxsmk-chart-8: #D95926;
327
+ --ngxsmk-color-tertiary: #959193;
328
+ --ngxsmk-color-on-tertiary: #0E0D0E;
329
+ --ngxsmk-color-tertiary-container: #1B1719;
330
+ --ngxsmk-color-on-tertiary-container: #ECEBEB;
331
+ --ngxsmk-color-success: #51A957;
332
+ --ngxsmk-color-on-success: #001500;
333
+ --ngxsmk-color-success-container: #001500;
334
+ --ngxsmk-color-on-success-container: #8CCA8D;
335
+ --ngxsmk-color-warning: #BA8900;
336
+ --ngxsmk-color-on-warning: #1C0700;
337
+ --ngxsmk-color-warning-container: #1C0700;
338
+ --ngxsmk-color-on-warning-container: #E9AF08;
339
+ --ngxsmk-color-error: #F3515A;
340
+ --ngxsmk-color-on-error: #2E0000;
341
+ --ngxsmk-color-error-container: #2E0000;
342
+ --ngxsmk-color-on-error-container: #FF8F8F;
343
+ --ngxsmk-color-info: #518BFF;
344
+ --ngxsmk-color-on-info: #000238;
345
+ --ngxsmk-color-info-container: #000238;
346
+ --ngxsmk-color-on-info-container: #88B6FF;
286
347
  }
287
348
 
288
349
  @media (prefers-reduced-motion: reduce) {
package/styles/ngxsmk.rose.css CHANGED
@@ -1,27 +1,27 @@
1
1
  /* Generated by @ngxsmk/theme — do not edit by hand. */
2
2
  :root {
3
- --ngxsmk-color-brand-50: #FDF1F4;
4
- --ngxsmk-color-brand-100: #FCE4E9;
5
- --ngxsmk-color-brand-200: #F7C4CF;
6
- --ngxsmk-color-brand-300: #F29CAF;
7
- --ngxsmk-color-brand-400: #EB6583;
8
- --ngxsmk-color-brand-500: #E5385E;
9
- --ngxsmk-color-brand-600: #E11D48;
10
- --ngxsmk-color-brand-700: #B5173A;
11
- --ngxsmk-color-brand-800: #91132E;
12
- --ngxsmk-color-brand-900: #710F24;
13
- --ngxsmk-color-brand-950: #480917;
14
- --ngxsmk-color-secondary-50: #FDFBF1;
15
- --ngxsmk-color-secondary-100: #FCF6E4;
16
- --ngxsmk-color-secondary-200: #F7ECC4;
17
- --ngxsmk-color-secondary-300: #F2DF9C;
18
- --ngxsmk-color-secondary-400: #EBCE65;
19
- --ngxsmk-color-secondary-500: #E5BF38;
20
- --ngxsmk-color-secondary-600: #E1B61D;
21
- --ngxsmk-color-secondary-700: #B59217;
22
- --ngxsmk-color-secondary-800: #917513;
23
- --ngxsmk-color-secondary-900: #715B0F;
24
- --ngxsmk-color-secondary-950: #483A09;
3
+ --ngxsmk-color-brand-50: #FFF0F0;
4
+ --ngxsmk-color-brand-100: #FFE1E1;
5
+ --ngxsmk-color-brand-200: #FFBDBF;
6
+ --ngxsmk-color-brand-300: #FF8F96;
7
+ --ngxsmk-color-brand-400: #F15265;
8
+ --ngxsmk-color-brand-500: #E11D48;
9
+ --ngxsmk-color-brand-600: #BA002A;
10
+ --ngxsmk-color-brand-700: #9A0017;
11
+ --ngxsmk-color-brand-800: #760007;
12
+ --ngxsmk-color-brand-900: #560001;
13
+ --ngxsmk-color-brand-950: #2D0000;
14
+ --ngxsmk-color-secondary-50: #FDF3ED;
15
+ --ngxsmk-color-secondary-100: #FBE7DA;
16
+ --ngxsmk-color-secondary-200: #F5CAB0;
17
+ --ngxsmk-color-secondary-300: #E9A67D;
18
+ --ngxsmk-color-secondary-400: #D0793C;
19
+ --ngxsmk-color-secondary-500: #C15F00;
20
+ --ngxsmk-color-secondary-600: #9B3C00;
21
+ --ngxsmk-color-secondary-700: #7F2600;
22
+ --ngxsmk-color-secondary-800: #601400;
23
+ --ngxsmk-color-secondary-900: #450700;
24
+ --ngxsmk-color-secondary-950: #230100;
25
25
  --ngxsmk-color-neutral-50: #F1F4F7;
26
26
  --ngxsmk-color-neutral-100: #E4E9EE;
27
27
  --ngxsmk-color-neutral-200: #CCD3DB;
@@ -34,7 +34,7 @@
34
34
  --ngxsmk-color-neutral-900: #18181A;
35
35
  --ngxsmk-color-neutral-950: #111112;
36
36
  --ngxsmk-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
37
- --ngxsmk-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
37
+ --ngxsmk-font-mono: 'Geist Mono', 'Geist Mono Fallback', monospace;
38
38
  --ngxsmk-radius-base: 0.5rem;
39
39
  --ngxsmk-control-height: 2.5rem;
40
40
  --ngxsmk-motion-duration: var(--ngxsmk-duration-normal);
@@ -67,6 +67,43 @@
67
67
  --ngxsmk-switch-thumb-size: 0.875rem;
68
68
  --ngxsmk-switch-thumb-bg: var(--ngxsmk-color-surface);
69
69
  --ngxsmk-switch-checked-bg: var(--ngxsmk-color-primary);
70
+ --ngxsmk-spreadsheet-bg: var(--ngxsmk-color-surface);
71
+ --ngxsmk-spreadsheet-header-bg: var(--ngxsmk-color-surface-variant);
72
+ --ngxsmk-spreadsheet-header-color: var(--ngxsmk-color-on-surface-variant);
73
+ --ngxsmk-spreadsheet-border: var(--ngxsmk-color-outline);
74
+ --ngxsmk-spreadsheet-grid-color: var(--ngxsmk-color-outline-variant);
75
+ --ngxsmk-spreadsheet-hover-bg: var(--ngxsmk-color-surface-hover);
76
+ --ngxsmk-spreadsheet-selected-bg: color-mix(in srgb, var(--ngxsmk-color-primary) 12%, transparent);
77
+ --ngxsmk-spreadsheet-active-border: var(--ngxsmk-color-primary);
78
+ --ngxsmk-spreadsheet-font: var(--ngxsmk-font-sans);
79
+ --ngxsmk-spreadsheet-font-mono: var(--ngxsmk-font-mono);
80
+ --ngxsmk-spreadsheet-row-height: 2.25rem;
81
+ --ngxsmk-spreadsheet-header-height: 2.5rem;
82
+ --ngxsmk-spreadsheet-cell-padding: 6px 10px;
83
+ --ngxsmk-spreadsheet-cell-font-size: var(--ngxsmk-text-body-sm-size);
84
+ --ngxsmk-spreadsheet-scrollbar-size: 8px;
85
+ --ngxsmk-spreadsheet-shadow: var(--ngxsmk-shadow-sm);
86
+ --ngxsmk-spreadsheet-radius: var(--ngxsmk-radius-lg);
87
+ --ngxsmk-spreadsheet-edit-bg: var(--ngxsmk-color-surface);
88
+ --ngxsmk-spreadsheet-edit-border: var(--ngxsmk-color-primary);
89
+ --ngxsmk-spreadsheet-row-hover-bg: var(--ngxsmk-color-surface-hover);
90
+ --ngxsmk-spreadsheet-col-hover-bg: color-mix(in srgb, var(--ngxsmk-color-primary) 6%, transparent);
91
+ --ngxsmk-spreadsheet-frozen-shadow: 2px 0 4px rgba(0,0,0,0.08);
92
+ --ngxsmk-spreadsheet-selection-range: color-mix(in srgb, var(--ngxsmk-color-primary) 8%, transparent);
93
+ --ngxsmk-input-group-bg: var(--ngxsmk-color-surface);
94
+ --ngxsmk-input-group-border: var(--ngxsmk-color-outline-strong);
95
+ --ngxsmk-input-group-radius: var(--ngxsmk-radius-md);
96
+ --ngxsmk-input-group-shadow: none;
97
+ --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);
99
+ --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);
101
+ --ngxsmk-input-group-success-border: var(--ngxsmk-color-success);
102
+ --ngxsmk-input-group-warning-border: var(--ngxsmk-color-warning);
103
+ --ngxsmk-input-group-height: 2.5rem;
104
+ --ngxsmk-input-group-padding: 0.75rem;
105
+ --ngxsmk-input-group-gap: var(--ngxsmk-space-2);
106
+ --ngxsmk-input-group-font: var(--ngxsmk-font-sans);
70
107
  --ngxsmk-control-height-sm: 2rem;
71
108
  --ngxsmk-control-height-md: 2.5rem;
72
109
  --ngxsmk-control-height-lg: 3rem;
@@ -79,6 +116,14 @@
79
116
  --ngxsmk-tracking-tight: -0.02em;
80
117
  --ngxsmk-tracking-normal: 0;
81
118
  --ngxsmk-tracking-wide: 0.08em;
119
+ --ngxsmk-font-weight-regular: 400;
120
+ --ngxsmk-font-weight-medium: 500;
121
+ --ngxsmk-font-weight-semibold: 600;
122
+ --ngxsmk-font-weight-bold: 700;
123
+ --ngxsmk-leading-none: 1;
124
+ --ngxsmk-leading-tight: 1.25;
125
+ --ngxsmk-leading-normal: 1.5;
126
+ --ngxsmk-leading-relaxed: 1.625;
82
127
  --ngxsmk-space-0: 0px;
83
128
  --ngxsmk-space-1: 0.25rem;
84
129
  --ngxsmk-space-2: 0.5rem;
@@ -177,16 +222,16 @@
177
222
  color-scheme: light;
178
223
  --ngxsmk-color-primary: #E11D48;
179
224
  --ngxsmk-color-on-primary: #FFFFFF;
180
- --ngxsmk-color-primary-hover: #BD183C;
181
- --ngxsmk-color-primary-active: #A21534;
182
- --ngxsmk-color-primary-container: #FCE4E9;
183
- --ngxsmk-color-on-primary-container: #710F24;
184
- --ngxsmk-color-secondary: #E1B61D;
225
+ --ngxsmk-color-primary-hover: #0C0000;
226
+ --ngxsmk-color-primary-active: #0C0000;
227
+ --ngxsmk-color-primary-container: #FFE1E1;
228
+ --ngxsmk-color-on-primary-container: #560001;
229
+ --ngxsmk-color-secondary: #C15F00;
185
230
  --ngxsmk-color-on-secondary: #FFFFFF;
186
- --ngxsmk-color-secondary-hover: #BD9918;
187
- --ngxsmk-color-secondary-active: #A28315;
188
- --ngxsmk-color-secondary-container: #FCF6E4;
189
- --ngxsmk-color-on-secondary-container: #715B0F;
231
+ --ngxsmk-color-secondary-hover: #000400;
232
+ --ngxsmk-color-secondary-active: #000400;
233
+ --ngxsmk-color-secondary-container: #FBE7DA;
234
+ --ngxsmk-color-on-secondary-container: #450700;
190
235
  --ngxsmk-color-background: #F1F4F7;
191
236
  --ngxsmk-color-on-background: #0A1317;
192
237
  --ngxsmk-color-surface: #FFFFFF;
@@ -206,43 +251,51 @@
206
251
  --ngxsmk-color-surface-5: #A4B0BC;
207
252
  --ngxsmk-color-ring: #E11D48;
208
253
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
209
- --ngxsmk-shadow-focus: 0 0 0 2px #FCE4E9, 0 0 0 4px color-mix(in srgb, #E11D48 45%, transparent);
210
- --ngxsmk-color-tertiary: #E5CB38;
254
+ --ngxsmk-shadow-focus: 0 0 0 2px #FFE1E1, 0 0 0 4px color-mix(in srgb, #E11D48 45%, transparent);
255
+ --ngxsmk-chart-1: #2A78D6;
256
+ --ngxsmk-chart-2: #1BAF7A;
257
+ --ngxsmk-chart-3: #EDA100;
258
+ --ngxsmk-chart-4: #008300;
259
+ --ngxsmk-chart-5: #4A3AA7;
260
+ --ngxsmk-chart-6: #E34948;
261
+ --ngxsmk-chart-7: #E87BA4;
262
+ --ngxsmk-chart-8: #EB6834;
263
+ --ngxsmk-color-tertiary: #BB6400;
211
264
  --ngxsmk-color-on-tertiary: #FFFFFF;
212
- --ngxsmk-color-tertiary-container: #FCF8E4;
213
- --ngxsmk-color-on-tertiary-container: #71620F;
265
+ --ngxsmk-color-tertiary-container: #FAE7DA;
266
+ --ngxsmk-color-on-tertiary-container: #420D00;
214
267
  --ngxsmk-color-success: #0D8626;
215
268
  --ngxsmk-color-on-success: #FFFFFF;
216
- --ngxsmk-color-success-container: #E3FCE8;
217
- --ngxsmk-color-on-success-container: #0D8626;
269
+ --ngxsmk-color-success-container: #DFF1DF;
270
+ --ngxsmk-color-on-success-container: #004300;
218
271
  --ngxsmk-color-warning: #E9AF08;
219
272
  --ngxsmk-color-on-warning: #FFFFFF;
220
- --ngxsmk-color-warning-container: #FEF7E1;
221
- --ngxsmk-color-on-warning-container: #9E7705;
273
+ --ngxsmk-color-warning-container: #F5EAD5;
274
+ --ngxsmk-color-on-warning-container: #522700;
222
275
  --ngxsmk-color-error: #E3193B;
223
276
  --ngxsmk-color-on-error: #FFFFFF;
224
- --ngxsmk-color-error-container: #FCE3E8;
225
- --ngxsmk-color-on-error-container: #931026;
277
+ --ngxsmk-color-error-container: #FFE1DF;
278
+ --ngxsmk-color-on-error-container: #780000;
226
279
  --ngxsmk-color-info: #2563EB;
227
280
  --ngxsmk-color-on-info: #FFFFFF;
228
- --ngxsmk-color-info-container: #E3EBFC;
229
- --ngxsmk-color-on-info-container: #0E3895;
281
+ --ngxsmk-color-info-container: #DDECFF;
282
+ --ngxsmk-color-on-info-container: #001E8D;
230
283
  }
231
284
 
232
285
  :root.dark, :root.dark body, .dark {
233
286
  color-scheme: dark;
234
- --ngxsmk-color-primary: #EB6583;
287
+ --ngxsmk-color-primary: #F15265;
235
288
  --ngxsmk-color-on-primary: #FFFFFF;
236
- --ngxsmk-color-primary-hover: #F29CAF;
237
- --ngxsmk-color-primary-active: #F7C4CF;
238
- --ngxsmk-color-primary-container: #710F24;
239
- --ngxsmk-color-on-primary-container: #FCE4E9;
240
- --ngxsmk-color-secondary: #EBCE65;
289
+ --ngxsmk-color-primary-hover: #FF8F96;
290
+ --ngxsmk-color-primary-active: #FFBDBF;
291
+ --ngxsmk-color-primary-container: #560001;
292
+ --ngxsmk-color-on-primary-container: #FFE1E1;
293
+ --ngxsmk-color-secondary: #D0793C;
241
294
  --ngxsmk-color-on-secondary: #FFFFFF;
242
- --ngxsmk-color-secondary-hover: #F2DF9C;
243
- --ngxsmk-color-secondary-active: #F7ECC4;
244
- --ngxsmk-color-secondary-container: #715B0F;
245
- --ngxsmk-color-on-secondary-container: #FCF6E4;
295
+ --ngxsmk-color-secondary-hover: #E9A67D;
296
+ --ngxsmk-color-secondary-active: #F5CAB0;
297
+ --ngxsmk-color-secondary-container: #450700;
298
+ --ngxsmk-color-on-secondary-container: #FBE7DA;
246
299
  --ngxsmk-color-background: #111112;
247
300
  --ngxsmk-color-on-background: #DFE2E5;
248
301
  --ngxsmk-color-surface: #1F1F22;
@@ -260,29 +313,37 @@
260
313
  --ngxsmk-color-surface-3: #3A4650;
261
314
  --ngxsmk-color-surface-4: #4E606F;
262
315
  --ngxsmk-color-surface-5: #778593;
263
- --ngxsmk-color-ring: #EB6583;
316
+ --ngxsmk-color-ring: #F15265;
264
317
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
265
- --ngxsmk-shadow-focus: 0 0 0 2px color-mix(in srgb, #EB6583 25%, transparent), 0 0 0 4px color-mix(in srgb, #EB6583 45%, transparent);
266
- --ngxsmk-color-tertiary: #EBD765;
267
- --ngxsmk-color-on-tertiary: #483F09;
268
- --ngxsmk-color-tertiary-container: #71620F;
269
- --ngxsmk-color-on-tertiary-container: #FCF8E4;
270
- --ngxsmk-color-success: #61F07E;
271
- --ngxsmk-color-on-success: #074A15;
272
- --ngxsmk-color-success-container: #074A15;
273
- --ngxsmk-color-on-success-container: #99F5AC;
274
- --ngxsmk-color-warning: #F9D057;
275
- --ngxsmk-color-on-warning: #4F3B03;
276
- --ngxsmk-color-warning-container: #4F3B03;
277
- --ngxsmk-color-on-warning-container: #FBE093;
278
- --ngxsmk-color-error: #EE637A;
279
- --ngxsmk-color-on-error: #4A0813;
280
- --ngxsmk-color-error-container: #4A0813;
281
- --ngxsmk-color-on-error-container: #F49AA9;
282
- --ngxsmk-color-info: #608DF0;
283
- --ngxsmk-color-on-info: #071C4B;
284
- --ngxsmk-color-info-container: #071C4B;
285
- --ngxsmk-color-on-info-container: #98B5F6;
318
+ --ngxsmk-shadow-focus: 0 0 0 2px color-mix(in srgb, #F15265 25%, transparent), 0 0 0 4px color-mix(in srgb, #F15265 45%, transparent);
319
+ --ngxsmk-chart-1: #3987E5;
320
+ --ngxsmk-chart-2: #199E70;
321
+ --ngxsmk-chart-3: #C98500;
322
+ --ngxsmk-chart-4: #008300;
323
+ --ngxsmk-chart-5: #9085E9;
324
+ --ngxsmk-chart-6: #E66767;
325
+ --ngxsmk-chart-7: #D55181;
326
+ --ngxsmk-chart-8: #D95926;
327
+ --ngxsmk-color-tertiary: #CB7D3C;
328
+ --ngxsmk-color-on-tertiary: #210200;
329
+ --ngxsmk-color-tertiary-container: #420D00;
330
+ --ngxsmk-color-on-tertiary-container: #FAE7DA;
331
+ --ngxsmk-color-success: #51A957;
332
+ --ngxsmk-color-on-success: #001500;
333
+ --ngxsmk-color-success-container: #001500;
334
+ --ngxsmk-color-on-success-container: #8CCA8D;
335
+ --ngxsmk-color-warning: #BA8900;
336
+ --ngxsmk-color-on-warning: #1C0700;
337
+ --ngxsmk-color-warning-container: #1C0700;
338
+ --ngxsmk-color-on-warning-container: #E9AF08;
339
+ --ngxsmk-color-error: #F3515A;
340
+ --ngxsmk-color-on-error: #2E0000;
341
+ --ngxsmk-color-error-container: #2E0000;
342
+ --ngxsmk-color-on-error-container: #FF8F8F;
343
+ --ngxsmk-color-info: #518BFF;
344
+ --ngxsmk-color-on-info: #000238;
345
+ --ngxsmk-color-info-container: #000238;
346
+ --ngxsmk-color-on-info-container: #88B6FF;
286
347
  }
287
348
 
288
349
  @media (prefers-reduced-motion: reduce) {