@ngxsmk/theme 1.1.0 → 1.2.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 (24) hide show
  1. package/esm2022/lib/color.mjs +2 -5
  2. package/esm2022/lib/css.mjs +31 -2
  3. package/esm2022/lib/define-config.mjs +5 -2
  4. package/esm2022/lib/theme.service.mjs +11 -12
  5. package/esm2022/lib/tokens.mjs +1 -1
  6. package/esm2022/lib/types.mjs +1 -1
  7. package/fesm2022/ngxsmk-theme.mjs +43 -15
  8. package/fesm2022/ngxsmk-theme.mjs.map +1 -1
  9. package/lib/color.d.ts.map +1 -1
  10. package/lib/css.d.ts.map +1 -1
  11. package/lib/define-config.d.ts.map +1 -1
  12. package/lib/theme.service.d.ts +3 -2
  13. package/lib/theme.service.d.ts.map +1 -1
  14. package/lib/tokens.d.ts.map +1 -1
  15. package/lib/types.d.ts +6 -0
  16. package/lib/types.d.ts.map +1 -1
  17. package/package.json +1 -1
  18. package/styles/ngx.css +88 -86
  19. package/styles/ngxsmk.astryx.css +132 -87
  20. package/styles/ngxsmk.css +132 -87
  21. package/styles/ngxsmk.emerald.css +130 -85
  22. package/styles/ngxsmk.neutral.css +131 -86
  23. package/styles/ngxsmk.rose.css +133 -88
  24. package/styles/ngxsmk.violet.css +134 -89
package/styles/ngxsmk.rose.css CHANGED
@@ -1,31 +1,44 @@
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;
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
13
  --ngxsmk-color-brand-950: #480917;
14
- --ngxsmk-color-neutral-50: #F1F4F7;
15
- --ngxsmk-color-neutral-100: #E4E9EE;
16
- --ngxsmk-color-neutral-200: #CCD3DB;
17
- --ngxsmk-color-neutral-300: #A4B0BC;
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;
25
+ --ngxsmk-color-neutral-50: #f1f4f7;
26
+ --ngxsmk-color-neutral-100: #e4e9ee;
27
+ --ngxsmk-color-neutral-200: #ccd3db;
28
+ --ngxsmk-color-neutral-300: #a4b0bc;
18
29
  --ngxsmk-color-neutral-400: #778593;
19
- --ngxsmk-color-neutral-500: #4E606F;
20
- --ngxsmk-color-neutral-600: #3A4650;
21
- --ngxsmk-color-neutral-700: #2A333B;
22
- --ngxsmk-color-neutral-800: #1F1F22;
23
- --ngxsmk-color-neutral-900: #18181A;
30
+ --ngxsmk-color-neutral-500: #4e606f;
31
+ --ngxsmk-color-neutral-600: #3a4650;
32
+ --ngxsmk-color-neutral-700: #2a333b;
33
+ --ngxsmk-color-neutral-800: #1f1f22;
34
+ --ngxsmk-color-neutral-900: #18181a;
24
35
  --ngxsmk-color-neutral-950: #111112;
25
36
  --ngxsmk-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
26
37
  --ngxsmk-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
27
38
  --ngxsmk-radius-base: 0.5rem;
28
39
  --ngxsmk-control-height: 2.5rem;
40
+ --ngxsmk-motion-duration: var(--ngxsmk-duration-normal);
41
+ --ngxsmk-motion-ease: var(--ngxsmk-ease-in-out);
29
42
  --ngxsmk-button-bg: var(--ngxsmk-color-primary);
30
43
  --ngxsmk-button-color: var(--ngxsmk-color-on-primary);
31
44
  --ngxsmk-button-font-family: var(--ngxsmk-font-sans);
@@ -146,90 +159,122 @@
146
159
  --ngxsmk-text-body-xs-line: 1rem;
147
160
  --ngxsmk-text-body-xs-weight: 400;
148
161
  color-scheme: light;
149
- --ngxsmk-color-primary: #E11D48;
150
- --ngxsmk-color-on-primary: #FFFFFF;
151
- --ngxsmk-color-primary-hover: #BD183C;
152
- --ngxsmk-color-primary-active: #A21534;
153
- --ngxsmk-color-primary-container: #FCE4E9;
154
- --ngxsmk-color-on-primary-container: #710F24;
155
- --ngxsmk-color-background: #F1F4F7;
156
- --ngxsmk-color-on-background: #0A1317;
157
- --ngxsmk-color-surface: #FFFFFF;
158
- --ngxsmk-color-on-surface: #0A1317;
159
- --ngxsmk-color-surface-variant: #E4E9EE;
160
- --ngxsmk-color-on-surface-variant: #4E606F;
162
+ --ngxsmk-color-primary: #e11d48;
163
+ --ngxsmk-color-on-primary: #ffffff;
164
+ --ngxsmk-color-primary-hover: #bd183c;
165
+ --ngxsmk-color-primary-active: #a21534;
166
+ --ngxsmk-color-primary-container: #fce4e9;
167
+ --ngxsmk-color-on-primary-container: #710f24;
168
+ --ngxsmk-color-secondary: #e1b61d;
169
+ --ngxsmk-color-on-secondary: #ffffff;
170
+ --ngxsmk-color-secondary-hover: #bd9918;
171
+ --ngxsmk-color-secondary-active: #a28315;
172
+ --ngxsmk-color-secondary-container: #fcf6e4;
173
+ --ngxsmk-color-on-secondary-container: #715b0f;
174
+ --ngxsmk-color-background: #f1f4f7;
175
+ --ngxsmk-color-on-background: #0a1317;
176
+ --ngxsmk-color-surface: #ffffff;
177
+ --ngxsmk-color-on-surface: #0a1317;
178
+ --ngxsmk-color-surface-variant: #e4e9ee;
179
+ --ngxsmk-color-on-surface-variant: #4e606f;
161
180
  --ngxsmk-color-surface-hover: rgb(5 54 89 / 0.05);
162
181
  --ngxsmk-color-surface-active: rgb(5 54 89 / 0.1);
163
- --ngxsmk-color-surface-container: #FFFFFF;
182
+ --ngxsmk-color-surface-container: #ffffff;
164
183
  --ngxsmk-color-outline: rgb(5 54 89 / 0.1);
165
- --ngxsmk-color-outline-strong: #CCD3DB;
184
+ --ngxsmk-color-outline-strong: #ccd3db;
166
185
  --ngxsmk-color-outline-variant: rgb(5 54 89 / 0.06);
167
- --ngxsmk-color-ring: #E11D48;
186
+ --ngxsmk-color-surface-1: #ffffff;
187
+ --ngxsmk-color-surface-2: #f1f4f7;
188
+ --ngxsmk-color-surface-3: #e4e9ee;
189
+ --ngxsmk-color-surface-4: #ccd3db;
190
+ --ngxsmk-color-surface-5: #a4b0bc;
191
+ --ngxsmk-color-ring: #e11d48;
168
192
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
169
- --ngxsmk-shadow-focus: 0 0 0 2px #FCE4E9, 0 0 0 4px color-mix(in srgb, #E11D48 45%, transparent);
170
- --ngxsmk-color-tertiary: #E5CB38;
171
- --ngxsmk-color-on-tertiary: #FFFFFF;
172
- --ngxsmk-color-tertiary-container: #FCF8E4;
173
- --ngxsmk-color-on-tertiary-container: #71620F;
174
- --ngxsmk-color-success: #0D8626;
175
- --ngxsmk-color-on-success: #FFFFFF;
176
- --ngxsmk-color-success-container: #E3FCE8;
177
- --ngxsmk-color-on-success-container: #0D8626;
178
- --ngxsmk-color-warning: #E9AF08;
179
- --ngxsmk-color-on-warning: #FFFFFF;
180
- --ngxsmk-color-warning-container: #FEF7E1;
181
- --ngxsmk-color-on-warning-container: #9E7705;
182
- --ngxsmk-color-error: #E3193B;
183
- --ngxsmk-color-on-error: #FFFFFF;
184
- --ngxsmk-color-error-container: #FCE3E8;
193
+ --ngxsmk-shadow-focus: 0 0 0 2px #fce4e9, 0 0 0 4px color-mix(in srgb, #e11d48 45%, transparent);
194
+ --ngxsmk-color-tertiary: #e5cb38;
195
+ --ngxsmk-color-on-tertiary: #ffffff;
196
+ --ngxsmk-color-tertiary-container: #fcf8e4;
197
+ --ngxsmk-color-on-tertiary-container: #71620f;
198
+ --ngxsmk-color-success: #0d8626;
199
+ --ngxsmk-color-on-success: #ffffff;
200
+ --ngxsmk-color-success-container: #e3fce8;
201
+ --ngxsmk-color-on-success-container: #0d8626;
202
+ --ngxsmk-color-warning: #e9af08;
203
+ --ngxsmk-color-on-warning: #ffffff;
204
+ --ngxsmk-color-warning-container: #fef7e1;
205
+ --ngxsmk-color-on-warning-container: #9e7705;
206
+ --ngxsmk-color-error: #e3193b;
207
+ --ngxsmk-color-on-error: #ffffff;
208
+ --ngxsmk-color-error-container: #fce3e8;
185
209
  --ngxsmk-color-on-error-container: #931026;
186
- --ngxsmk-color-info: #0064E0;
187
- --ngxsmk-color-on-info: #FFFFFF;
188
- --ngxsmk-color-info-container: #E0EEFF;
189
- --ngxsmk-color-on-info-container: #0049A3;
210
+ --ngxsmk-color-info: #0064e0;
211
+ --ngxsmk-color-on-info: #ffffff;
212
+ --ngxsmk-color-info-container: #e0eeff;
213
+ --ngxsmk-color-on-info-container: #0049a3;
190
214
  }
191
215
 
192
- :root.dark, :root.dark body, .dark {
216
+ :root.dark,
217
+ :root.dark body,
218
+ .dark {
193
219
  color-scheme: dark;
194
- --ngxsmk-color-primary: #EB6583;
195
- --ngxsmk-color-on-primary: #FFFFFF;
196
- --ngxsmk-color-primary-hover: #F29CAF;
197
- --ngxsmk-color-primary-active: #F7C4CF;
198
- --ngxsmk-color-primary-container: #710F24;
199
- --ngxsmk-color-on-primary-container: #FCE4E9;
220
+ --ngxsmk-color-primary: #eb6583;
221
+ --ngxsmk-color-on-primary: #ffffff;
222
+ --ngxsmk-color-primary-hover: #f29caf;
223
+ --ngxsmk-color-primary-active: #f7c4cf;
224
+ --ngxsmk-color-primary-container: #710f24;
225
+ --ngxsmk-color-on-primary-container: #fce4e9;
226
+ --ngxsmk-color-secondary: #ebce65;
227
+ --ngxsmk-color-on-secondary: #ffffff;
228
+ --ngxsmk-color-secondary-hover: #f2df9c;
229
+ --ngxsmk-color-secondary-active: #f7ecc4;
230
+ --ngxsmk-color-secondary-container: #715b0f;
231
+ --ngxsmk-color-on-secondary-container: #fcf6e4;
200
232
  --ngxsmk-color-background: #111112;
201
- --ngxsmk-color-on-background: #DFE2E5;
202
- --ngxsmk-color-surface: #1F1F22;
203
- --ngxsmk-color-on-surface: #DFE2E5;
204
- --ngxsmk-color-surface-variant: #28292C;
205
- --ngxsmk-color-on-surface-variant: #AAAFB5;
233
+ --ngxsmk-color-on-background: #dfe2e5;
234
+ --ngxsmk-color-surface: #1f1f22;
235
+ --ngxsmk-color-on-surface: #dfe2e5;
236
+ --ngxsmk-color-surface-variant: #28292c;
237
+ --ngxsmk-color-on-surface-variant: #aaafb5;
206
238
  --ngxsmk-color-surface-hover: rgb(255 255 255 / 0.05);
207
239
  --ngxsmk-color-surface-active: rgb(255 255 255 / 0.1);
208
- --ngxsmk-color-surface-container: #28292C;
240
+ --ngxsmk-color-surface-container: #28292c;
209
241
  --ngxsmk-color-outline: rgb(242 244 246 / 0.1);
210
- --ngxsmk-color-outline-strong: #494D53;
242
+ --ngxsmk-color-outline-strong: #494d53;
211
243
  --ngxsmk-color-outline-variant: rgb(242 244 246 / 0.06);
212
- --ngxsmk-color-ring: #EB6583;
244
+ --ngxsmk-color-surface-1: #1f1f22;
245
+ --ngxsmk-color-surface-2: #2a333b;
246
+ --ngxsmk-color-surface-3: #3a4650;
247
+ --ngxsmk-color-surface-4: #4e606f;
248
+ --ngxsmk-color-surface-5: #778593;
249
+ --ngxsmk-color-ring: #eb6583;
213
250
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
214
- --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);
215
- --ngxsmk-color-tertiary: #EBD765;
216
- --ngxsmk-color-on-tertiary: #483F09;
217
- --ngxsmk-color-tertiary-container: #71620F;
218
- --ngxsmk-color-on-tertiary-container: #FCF8E4;
219
- --ngxsmk-color-success: #61F07E;
220
- --ngxsmk-color-on-success: #074A15;
221
- --ngxsmk-color-success-container: #074A15;
222
- --ngxsmk-color-on-success-container: #99F5AC;
223
- --ngxsmk-color-warning: #F9D057;
224
- --ngxsmk-color-on-warning: #4F3B03;
225
- --ngxsmk-color-warning-container: #4F3B03;
226
- --ngxsmk-color-on-warning-container: #FBE093;
227
- --ngxsmk-color-error: #EE637A;
228
- --ngxsmk-color-on-error: #4A0813;
229
- --ngxsmk-color-error-container: #4A0813;
230
- --ngxsmk-color-on-error-container: #F49AA9;
231
- --ngxsmk-color-info: #529FFF;
251
+ --ngxsmk-shadow-focus:
252
+ 0 0 0 2px color-mix(in srgb, #eb6583 25%, transparent),
253
+ 0 0 0 4px color-mix(in srgb, #eb6583 45%, transparent);
254
+ --ngxsmk-color-tertiary: #ebd765;
255
+ --ngxsmk-color-on-tertiary: #483f09;
256
+ --ngxsmk-color-tertiary-container: #71620f;
257
+ --ngxsmk-color-on-tertiary-container: #fcf8e4;
258
+ --ngxsmk-color-success: #61f07e;
259
+ --ngxsmk-color-on-success: #074a15;
260
+ --ngxsmk-color-success-container: #074a15;
261
+ --ngxsmk-color-on-success-container: #99f5ac;
262
+ --ngxsmk-color-warning: #f9d057;
263
+ --ngxsmk-color-on-warning: #4f3b03;
264
+ --ngxsmk-color-warning-container: #4f3b03;
265
+ --ngxsmk-color-on-warning-container: #fbe093;
266
+ --ngxsmk-color-error: #ee637a;
267
+ --ngxsmk-color-on-error: #4a0813;
268
+ --ngxsmk-color-error-container: #4a0813;
269
+ --ngxsmk-color-on-error-container: #f49aa9;
270
+ --ngxsmk-color-info: #529fff;
232
271
  --ngxsmk-color-on-info: #002452;
233
272
  --ngxsmk-color-info-container: #002452;
234
- --ngxsmk-color-on-info-container: #8FC1FF;
273
+ --ngxsmk-color-on-info-container: #8fc1ff;
274
+ }
275
+
276
+ @media (prefers-reduced-motion: reduce) {
277
+ :root {
278
+ --ngxsmk-motion-duration: 0ms;
279
+ }
235
280
  }
package/styles/ngxsmk.violet.css CHANGED
@@ -1,31 +1,44 @@
1
1
  /* Generated by @ngxsmk/theme — do not edit by hand. */
2
2
  :root {
3
- --ngxsmk-color-brand-50: #F6F1FE;
4
- --ngxsmk-color-brand-100: #ECE3FC;
5
- --ngxsmk-color-brand-200: #D7C2F9;
6
- --ngxsmk-color-brand-300: #BB98F6;
7
- --ngxsmk-color-brand-400: #9560F0;
8
- --ngxsmk-color-brand-500: #7C3AED;
9
- --ngxsmk-color-brand-600: #6014E0;
10
- --ngxsmk-color-brand-700: #5011BB;
11
- --ngxsmk-color-brand-800: #400E96;
12
- --ngxsmk-color-brand-900: #320B75;
13
- --ngxsmk-color-brand-950: #20074B;
14
- --ngxsmk-color-neutral-50: #F1F4F7;
15
- --ngxsmk-color-neutral-100: #E4E9EE;
16
- --ngxsmk-color-neutral-200: #CCD3DB;
17
- --ngxsmk-color-neutral-300: #A4B0BC;
3
+ --ngxsmk-color-brand-50: #f6f1fe;
4
+ --ngxsmk-color-brand-100: #ece3fc;
5
+ --ngxsmk-color-brand-200: #d7c2f9;
6
+ --ngxsmk-color-brand-300: #bb98f6;
7
+ --ngxsmk-color-brand-400: #9560f0;
8
+ --ngxsmk-color-brand-500: #7c3aed;
9
+ --ngxsmk-color-brand-600: #6014e0;
10
+ --ngxsmk-color-brand-700: #5011bb;
11
+ --ngxsmk-color-brand-800: #400e96;
12
+ --ngxsmk-color-brand-900: #320b75;
13
+ --ngxsmk-color-brand-950: #20074b;
14
+ --ngxsmk-color-secondary-50: #fef1f9;
15
+ --ngxsmk-color-secondary-100: #fce3f3;
16
+ --ngxsmk-color-secondary-200: #f9c2e5;
17
+ --ngxsmk-color-secondary-300: #f698d3;
18
+ --ngxsmk-color-secondary-400: #f060bb;
19
+ --ngxsmk-color-secondary-500: #ed3aab;
20
+ --ngxsmk-color-secondary-600: #e01495;
21
+ --ngxsmk-color-secondary-700: #bb117c;
22
+ --ngxsmk-color-secondary-800: #960e63;
23
+ --ngxsmk-color-secondary-900: #750b4e;
24
+ --ngxsmk-color-secondary-950: #4b0732;
25
+ --ngxsmk-color-neutral-50: #f1f4f7;
26
+ --ngxsmk-color-neutral-100: #e4e9ee;
27
+ --ngxsmk-color-neutral-200: #ccd3db;
28
+ --ngxsmk-color-neutral-300: #a4b0bc;
18
29
  --ngxsmk-color-neutral-400: #778593;
19
- --ngxsmk-color-neutral-500: #4E606F;
20
- --ngxsmk-color-neutral-600: #3A4650;
21
- --ngxsmk-color-neutral-700: #2A333B;
22
- --ngxsmk-color-neutral-800: #1F1F22;
23
- --ngxsmk-color-neutral-900: #18181A;
30
+ --ngxsmk-color-neutral-500: #4e606f;
31
+ --ngxsmk-color-neutral-600: #3a4650;
32
+ --ngxsmk-color-neutral-700: #2a333b;
33
+ --ngxsmk-color-neutral-800: #1f1f22;
34
+ --ngxsmk-color-neutral-900: #18181a;
24
35
  --ngxsmk-color-neutral-950: #111112;
25
36
  --ngxsmk-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
26
37
  --ngxsmk-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
27
38
  --ngxsmk-radius-base: 0.5rem;
28
39
  --ngxsmk-control-height: 2.5rem;
40
+ --ngxsmk-motion-duration: var(--ngxsmk-duration-normal);
41
+ --ngxsmk-motion-ease: var(--ngxsmk-ease-in-out);
29
42
  --ngxsmk-button-bg: var(--ngxsmk-color-primary);
30
43
  --ngxsmk-button-color: var(--ngxsmk-color-on-primary);
31
44
  --ngxsmk-button-font-family: var(--ngxsmk-font-sans);
@@ -146,90 +159,122 @@
146
159
  --ngxsmk-text-body-xs-line: 1rem;
147
160
  --ngxsmk-text-body-xs-weight: 400;
148
161
  color-scheme: light;
149
- --ngxsmk-color-primary: #7C3AED;
150
- --ngxsmk-color-on-primary: #FFFFFF;
151
- --ngxsmk-color-primary-hover: #6315E9;
152
- --ngxsmk-color-primary-active: #5713CD;
153
- --ngxsmk-color-primary-container: #ECE3FC;
154
- --ngxsmk-color-on-primary-container: #320B75;
155
- --ngxsmk-color-background: #F1F4F7;
156
- --ngxsmk-color-on-background: #0A1317;
157
- --ngxsmk-color-surface: #FFFFFF;
158
- --ngxsmk-color-on-surface: #0A1317;
159
- --ngxsmk-color-surface-variant: #E4E9EE;
160
- --ngxsmk-color-on-surface-variant: #4E606F;
162
+ --ngxsmk-color-primary: #7c3aed;
163
+ --ngxsmk-color-on-primary: #ffffff;
164
+ --ngxsmk-color-primary-hover: #6315e9;
165
+ --ngxsmk-color-primary-active: #5713cd;
166
+ --ngxsmk-color-primary-container: #ece3fc;
167
+ --ngxsmk-color-on-primary-container: #320b75;
168
+ --ngxsmk-color-secondary: #ed3aab;
169
+ --ngxsmk-color-on-secondary: #ffffff;
170
+ --ngxsmk-color-secondary-hover: #e9159b;
171
+ --ngxsmk-color-secondary-active: #cd1388;
172
+ --ngxsmk-color-secondary-container: #fce3f3;
173
+ --ngxsmk-color-on-secondary-container: #750b4e;
174
+ --ngxsmk-color-background: #f1f4f7;
175
+ --ngxsmk-color-on-background: #0a1317;
176
+ --ngxsmk-color-surface: #ffffff;
177
+ --ngxsmk-color-on-surface: #0a1317;
178
+ --ngxsmk-color-surface-variant: #e4e9ee;
179
+ --ngxsmk-color-on-surface-variant: #4e606f;
161
180
  --ngxsmk-color-surface-hover: rgb(5 54 89 / 0.05);
162
181
  --ngxsmk-color-surface-active: rgb(5 54 89 / 0.1);
163
- --ngxsmk-color-surface-container: #FFFFFF;
182
+ --ngxsmk-color-surface-container: #ffffff;
164
183
  --ngxsmk-color-outline: rgb(5 54 89 / 0.1);
165
- --ngxsmk-color-outline-strong: #CCD3DB;
184
+ --ngxsmk-color-outline-strong: #ccd3db;
166
185
  --ngxsmk-color-outline-variant: rgb(5 54 89 / 0.06);
167
- --ngxsmk-color-ring: #7C3AED;
186
+ --ngxsmk-color-surface-1: #ffffff;
187
+ --ngxsmk-color-surface-2: #f1f4f7;
188
+ --ngxsmk-color-surface-3: #e4e9ee;
189
+ --ngxsmk-color-surface-4: #ccd3db;
190
+ --ngxsmk-color-surface-5: #a4b0bc;
191
+ --ngxsmk-color-ring: #7c3aed;
168
192
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
169
- --ngxsmk-shadow-focus: 0 0 0 2px #ECE3FC, 0 0 0 4px color-mix(in srgb, #7C3AED 45%, transparent);
170
- --ngxsmk-color-tertiary: #ED3A9F;
171
- --ngxsmk-color-on-tertiary: #FFFFFF;
172
- --ngxsmk-color-tertiary-container: #FCE3F1;
173
- --ngxsmk-color-on-tertiary-container: #750B47;
174
- --ngxsmk-color-success: #0D8626;
175
- --ngxsmk-color-on-success: #FFFFFF;
176
- --ngxsmk-color-success-container: #E3FCE8;
177
- --ngxsmk-color-on-success-container: #0D8626;
178
- --ngxsmk-color-warning: #E9AF08;
179
- --ngxsmk-color-on-warning: #FFFFFF;
180
- --ngxsmk-color-warning-container: #FEF7E1;
181
- --ngxsmk-color-on-warning-container: #9E7705;
182
- --ngxsmk-color-error: #E3193B;
183
- --ngxsmk-color-on-error: #FFFFFF;
184
- --ngxsmk-color-error-container: #FCE3E8;
193
+ --ngxsmk-shadow-focus: 0 0 0 2px #ece3fc, 0 0 0 4px color-mix(in srgb, #7c3aed 45%, transparent);
194
+ --ngxsmk-color-tertiary: #ed3a9f;
195
+ --ngxsmk-color-on-tertiary: #ffffff;
196
+ --ngxsmk-color-tertiary-container: #fce3f1;
197
+ --ngxsmk-color-on-tertiary-container: #750b47;
198
+ --ngxsmk-color-success: #0d8626;
199
+ --ngxsmk-color-on-success: #ffffff;
200
+ --ngxsmk-color-success-container: #e3fce8;
201
+ --ngxsmk-color-on-success-container: #0d8626;
202
+ --ngxsmk-color-warning: #e9af08;
203
+ --ngxsmk-color-on-warning: #ffffff;
204
+ --ngxsmk-color-warning-container: #fef7e1;
205
+ --ngxsmk-color-on-warning-container: #9e7705;
206
+ --ngxsmk-color-error: #e3193b;
207
+ --ngxsmk-color-on-error: #ffffff;
208
+ --ngxsmk-color-error-container: #fce3e8;
185
209
  --ngxsmk-color-on-error-container: #931026;
186
- --ngxsmk-color-info: #0064E0;
187
- --ngxsmk-color-on-info: #FFFFFF;
188
- --ngxsmk-color-info-container: #E0EEFF;
189
- --ngxsmk-color-on-info-container: #0049A3;
210
+ --ngxsmk-color-info: #0064e0;
211
+ --ngxsmk-color-on-info: #ffffff;
212
+ --ngxsmk-color-info-container: #e0eeff;
213
+ --ngxsmk-color-on-info-container: #0049a3;
190
214
  }
191
215
 
192
- :root.dark, :root.dark body, .dark {
216
+ :root.dark,
217
+ :root.dark body,
218
+ .dark {
193
219
  color-scheme: dark;
194
- --ngxsmk-color-primary: #9560F0;
195
- --ngxsmk-color-on-primary: #FFFFFF;
196
- --ngxsmk-color-primary-hover: #BB98F6;
197
- --ngxsmk-color-primary-active: #D7C2F9;
198
- --ngxsmk-color-primary-container: #320B75;
199
- --ngxsmk-color-on-primary-container: #ECE3FC;
220
+ --ngxsmk-color-primary: #9560f0;
221
+ --ngxsmk-color-on-primary: #ffffff;
222
+ --ngxsmk-color-primary-hover: #bb98f6;
223
+ --ngxsmk-color-primary-active: #d7c2f9;
224
+ --ngxsmk-color-primary-container: #320b75;
225
+ --ngxsmk-color-on-primary-container: #ece3fc;
226
+ --ngxsmk-color-secondary: #f060bb;
227
+ --ngxsmk-color-on-secondary: #ffffff;
228
+ --ngxsmk-color-secondary-hover: #f698d3;
229
+ --ngxsmk-color-secondary-active: #f9c2e5;
230
+ --ngxsmk-color-secondary-container: #750b4e;
231
+ --ngxsmk-color-on-secondary-container: #fce3f3;
200
232
  --ngxsmk-color-background: #111112;
201
- --ngxsmk-color-on-background: #DFE2E5;
202
- --ngxsmk-color-surface: #1F1F22;
203
- --ngxsmk-color-on-surface: #DFE2E5;
204
- --ngxsmk-color-surface-variant: #28292C;
205
- --ngxsmk-color-on-surface-variant: #AAAFB5;
233
+ --ngxsmk-color-on-background: #dfe2e5;
234
+ --ngxsmk-color-surface: #1f1f22;
235
+ --ngxsmk-color-on-surface: #dfe2e5;
236
+ --ngxsmk-color-surface-variant: #28292c;
237
+ --ngxsmk-color-on-surface-variant: #aaafb5;
206
238
  --ngxsmk-color-surface-hover: rgb(255 255 255 / 0.05);
207
239
  --ngxsmk-color-surface-active: rgb(255 255 255 / 0.1);
208
- --ngxsmk-color-surface-container: #28292C;
240
+ --ngxsmk-color-surface-container: #28292c;
209
241
  --ngxsmk-color-outline: rgb(242 244 246 / 0.1);
210
- --ngxsmk-color-outline-strong: #494D53;
242
+ --ngxsmk-color-outline-strong: #494d53;
211
243
  --ngxsmk-color-outline-variant: rgb(242 244 246 / 0.06);
212
- --ngxsmk-color-ring: #9560F0;
244
+ --ngxsmk-color-surface-1: #1f1f22;
245
+ --ngxsmk-color-surface-2: #2a333b;
246
+ --ngxsmk-color-surface-3: #3a4650;
247
+ --ngxsmk-color-surface-4: #4e606f;
248
+ --ngxsmk-color-surface-5: #778593;
249
+ --ngxsmk-color-ring: #9560f0;
213
250
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
214
- --ngxsmk-shadow-focus: 0 0 0 2px color-mix(in srgb, #9560F0 25%, transparent), 0 0 0 4px color-mix(in srgb, #9560F0 45%, transparent);
215
- --ngxsmk-color-tertiary: #F060B2;
216
- --ngxsmk-color-on-tertiary: #4B072D;
217
- --ngxsmk-color-tertiary-container: #750B47;
218
- --ngxsmk-color-on-tertiary-container: #FCE3F1;
219
- --ngxsmk-color-success: #61F07E;
220
- --ngxsmk-color-on-success: #074A15;
221
- --ngxsmk-color-success-container: #074A15;
222
- --ngxsmk-color-on-success-container: #99F5AC;
223
- --ngxsmk-color-warning: #F9D057;
224
- --ngxsmk-color-on-warning: #4F3B03;
225
- --ngxsmk-color-warning-container: #4F3B03;
226
- --ngxsmk-color-on-warning-container: #FBE093;
227
- --ngxsmk-color-error: #EE637A;
228
- --ngxsmk-color-on-error: #4A0813;
229
- --ngxsmk-color-error-container: #4A0813;
230
- --ngxsmk-color-on-error-container: #F49AA9;
231
- --ngxsmk-color-info: #529FFF;
251
+ --ngxsmk-shadow-focus:
252
+ 0 0 0 2px color-mix(in srgb, #9560f0 25%, transparent),
253
+ 0 0 0 4px color-mix(in srgb, #9560f0 45%, transparent);
254
+ --ngxsmk-color-tertiary: #f060b2;
255
+ --ngxsmk-color-on-tertiary: #4b072d;
256
+ --ngxsmk-color-tertiary-container: #750b47;
257
+ --ngxsmk-color-on-tertiary-container: #fce3f1;
258
+ --ngxsmk-color-success: #61f07e;
259
+ --ngxsmk-color-on-success: #074a15;
260
+ --ngxsmk-color-success-container: #074a15;
261
+ --ngxsmk-color-on-success-container: #99f5ac;
262
+ --ngxsmk-color-warning: #f9d057;
263
+ --ngxsmk-color-on-warning: #4f3b03;
264
+ --ngxsmk-color-warning-container: #4f3b03;
265
+ --ngxsmk-color-on-warning-container: #fbe093;
266
+ --ngxsmk-color-error: #ee637a;
267
+ --ngxsmk-color-on-error: #4a0813;
268
+ --ngxsmk-color-error-container: #4a0813;
269
+ --ngxsmk-color-on-error-container: #f49aa9;
270
+ --ngxsmk-color-info: #529fff;
232
271
  --ngxsmk-color-on-info: #002452;
233
272
  --ngxsmk-color-info-container: #002452;
234
- --ngxsmk-color-on-info-container: #8FC1FF;
273
+ --ngxsmk-color-on-info-container: #8fc1ff;
274
+ }
275
+
276
+ @media (prefers-reduced-motion: reduce) {
277
+ :root {
278
+ --ngxsmk-motion-duration: 0ms;
279
+ }
235
280
  }