@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.astryx.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: #E7F1FE;
4
- --ngxsmk-color-brand-100: #CFE3FD;
5
- --ngxsmk-color-brand-200: #9AC6FC;
6
- --ngxsmk-color-brand-300: #5CA5FB;
7
- --ngxsmk-color-brand-400: #2694FE;
8
- --ngxsmk-color-brand-500: #0064E0;
9
- --ngxsmk-color-brand-600: #0057C2;
10
- --ngxsmk-color-brand-700: #0046A0;
11
- --ngxsmk-color-brand-800: #00397F;
12
- --ngxsmk-color-brand-900: #002C63;
13
- --ngxsmk-color-brand-950: #001A3D;
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: #e7f1fe;
4
+ --ngxsmk-color-brand-100: #cfe3fd;
5
+ --ngxsmk-color-brand-200: #9ac6fc;
6
+ --ngxsmk-color-brand-300: #5ca5fb;
7
+ --ngxsmk-color-brand-400: #2694fe;
8
+ --ngxsmk-color-brand-500: #0064e0;
9
+ --ngxsmk-color-brand-600: #0057c2;
10
+ --ngxsmk-color-brand-700: #0046a0;
11
+ --ngxsmk-color-brand-800: #00397f;
12
+ --ngxsmk-color-brand-900: #002c63;
13
+ --ngxsmk-color-brand-950: #001a3d;
14
+ --ngxsmk-color-secondary-50: #f8f0ff;
15
+ --ngxsmk-color-secondary-100: #f1e0ff;
16
+ --ngxsmk-color-secondary-200: #e1bdff;
17
+ --ngxsmk-color-secondary-300: #cd8fff;
18
+ --ngxsmk-color-secondary-400: #b252ff;
19
+ --ngxsmk-color-secondary-500: #9b1fff;
20
+ --ngxsmk-color-secondary-600: #8800f5;
21
+ --ngxsmk-color-secondary-700: #7c00e0;
22
+ --ngxsmk-color-secondary-800: #5a00a3;
23
+ --ngxsmk-color-secondary-900: #470080;
24
+ --ngxsmk-color-secondary-950: #2d0052;
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: #0064E0;
150
- --ngxsmk-color-on-primary: #FFFFFF;
151
- --ngxsmk-color-primary-hover: #0052B7;
162
+ --ngxsmk-color-primary: #0064e0;
163
+ --ngxsmk-color-on-primary: #ffffff;
164
+ --ngxsmk-color-primary-hover: #0052b7;
152
165
  --ngxsmk-color-primary-active: #004499;
153
- --ngxsmk-color-primary-container: #CFE3FD;
154
- --ngxsmk-color-on-primary-container: #002C63;
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;
166
+ --ngxsmk-color-primary-container: #cfe3fd;
167
+ --ngxsmk-color-on-primary-container: #002c63;
168
+ --ngxsmk-color-secondary: #7c00e0;
169
+ --ngxsmk-color-on-secondary: #ffffff;
170
+ --ngxsmk-color-secondary-hover: #6500b7;
171
+ --ngxsmk-color-secondary-active: #540099;
172
+ --ngxsmk-color-secondary-container: #f1e0ff;
173
+ --ngxsmk-color-on-secondary-container: #470080;
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: #0064E0;
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: #0064e0;
168
192
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
169
- --ngxsmk-shadow-focus: 0 0 0 2px #CFE3FD, 0 0 0 4px color-mix(in srgb, #0064E0 45%, transparent);
170
- --ngxsmk-color-tertiary: #AA1FFF;
171
- --ngxsmk-color-on-tertiary: #FFFFFF;
172
- --ngxsmk-color-tertiary-container: #F3E0FF;
173
- --ngxsmk-color-on-tertiary-container: #4F0080;
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 #cfe3fd, 0 0 0 4px color-mix(in srgb, #0064e0 45%, transparent);
194
+ --ngxsmk-color-tertiary: #aa1fff;
195
+ --ngxsmk-color-on-tertiary: #ffffff;
196
+ --ngxsmk-color-tertiary-container: #f3e0ff;
197
+ --ngxsmk-color-on-tertiary-container: #4f0080;
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: #2694FE;
195
- --ngxsmk-color-on-primary: #FFFFFF;
196
- --ngxsmk-color-primary-hover: #5CA5FB;
197
- --ngxsmk-color-primary-active: #9AC6FC;
198
- --ngxsmk-color-primary-container: #002C63;
199
- --ngxsmk-color-on-primary-container: #CFE3FD;
220
+ --ngxsmk-color-primary: #2694fe;
221
+ --ngxsmk-color-on-primary: #ffffff;
222
+ --ngxsmk-color-primary-hover: #5ca5fb;
223
+ --ngxsmk-color-primary-active: #9ac6fc;
224
+ --ngxsmk-color-primary-container: #002c63;
225
+ --ngxsmk-color-on-primary-container: #cfe3fd;
226
+ --ngxsmk-color-secondary: #b252ff;
227
+ --ngxsmk-color-on-secondary: #ffffff;
228
+ --ngxsmk-color-secondary-hover: #cd8fff;
229
+ --ngxsmk-color-secondary-active: #e1bdff;
230
+ --ngxsmk-color-secondary-container: #470080;
231
+ --ngxsmk-color-on-secondary-container: #f1e0ff;
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: #2694FE;
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: #2694fe;
213
250
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
214
- --ngxsmk-shadow-focus: 0 0 0 2px color-mix(in srgb, #2694FE 25%, transparent), 0 0 0 4px color-mix(in srgb, #2694FE 45%, transparent);
215
- --ngxsmk-color-tertiary: #BD52FF;
251
+ --ngxsmk-shadow-focus:
252
+ 0 0 0 2px color-mix(in srgb, #2694fe 25%, transparent),
253
+ 0 0 0 4px color-mix(in srgb, #2694fe 45%, transparent);
254
+ --ngxsmk-color-tertiary: #bd52ff;
216
255
  --ngxsmk-color-on-tertiary: #330052;
217
- --ngxsmk-color-tertiary-container: #4F0080;
218
- --ngxsmk-color-on-tertiary-container: #F3E0FF;
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;
256
+ --ngxsmk-color-tertiary-container: #4f0080;
257
+ --ngxsmk-color-on-tertiary-container: #f3e0ff;
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.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: #E7F1FE;
4
- --ngxsmk-color-brand-100: #CFE3FD;
5
- --ngxsmk-color-brand-200: #9AC6FC;
6
- --ngxsmk-color-brand-300: #5CA5FB;
7
- --ngxsmk-color-brand-400: #2694FE;
8
- --ngxsmk-color-brand-500: #0064E0;
9
- --ngxsmk-color-brand-600: #0057C2;
10
- --ngxsmk-color-brand-700: #0046A0;
11
- --ngxsmk-color-brand-800: #00397F;
12
- --ngxsmk-color-brand-900: #002C63;
13
- --ngxsmk-color-brand-950: #001A3D;
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: #e7f1fe;
4
+ --ngxsmk-color-brand-100: #cfe3fd;
5
+ --ngxsmk-color-brand-200: #9ac6fc;
6
+ --ngxsmk-color-brand-300: #5ca5fb;
7
+ --ngxsmk-color-brand-400: #2694fe;
8
+ --ngxsmk-color-brand-500: #0064e0;
9
+ --ngxsmk-color-brand-600: #0057c2;
10
+ --ngxsmk-color-brand-700: #0046a0;
11
+ --ngxsmk-color-brand-800: #00397f;
12
+ --ngxsmk-color-brand-900: #002c63;
13
+ --ngxsmk-color-brand-950: #001a3d;
14
+ --ngxsmk-color-secondary-50: #f8f0ff;
15
+ --ngxsmk-color-secondary-100: #f1e0ff;
16
+ --ngxsmk-color-secondary-200: #e1bdff;
17
+ --ngxsmk-color-secondary-300: #cd8fff;
18
+ --ngxsmk-color-secondary-400: #b252ff;
19
+ --ngxsmk-color-secondary-500: #9b1fff;
20
+ --ngxsmk-color-secondary-600: #8800f5;
21
+ --ngxsmk-color-secondary-700: #7c00e0;
22
+ --ngxsmk-color-secondary-800: #5a00a3;
23
+ --ngxsmk-color-secondary-900: #470080;
24
+ --ngxsmk-color-secondary-950: #2d0052;
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: #0064E0;
150
- --ngxsmk-color-on-primary: #FFFFFF;
151
- --ngxsmk-color-primary-hover: #0052B7;
162
+ --ngxsmk-color-primary: #0064e0;
163
+ --ngxsmk-color-on-primary: #ffffff;
164
+ --ngxsmk-color-primary-hover: #0052b7;
152
165
  --ngxsmk-color-primary-active: #004499;
153
- --ngxsmk-color-primary-container: #CFE3FD;
154
- --ngxsmk-color-on-primary-container: #002C63;
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;
166
+ --ngxsmk-color-primary-container: #cfe3fd;
167
+ --ngxsmk-color-on-primary-container: #002c63;
168
+ --ngxsmk-color-secondary: #7c00e0;
169
+ --ngxsmk-color-on-secondary: #ffffff;
170
+ --ngxsmk-color-secondary-hover: #6500b7;
171
+ --ngxsmk-color-secondary-active: #540099;
172
+ --ngxsmk-color-secondary-container: #f1e0ff;
173
+ --ngxsmk-color-on-secondary-container: #470080;
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: #0064E0;
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: #0064e0;
168
192
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
169
- --ngxsmk-shadow-focus: 0 0 0 2px #CFE3FD, 0 0 0 4px color-mix(in srgb, #0064E0 45%, transparent);
170
- --ngxsmk-color-tertiary: #AA1FFF;
171
- --ngxsmk-color-on-tertiary: #FFFFFF;
172
- --ngxsmk-color-tertiary-container: #F3E0FF;
173
- --ngxsmk-color-on-tertiary-container: #4F0080;
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 #cfe3fd, 0 0 0 4px color-mix(in srgb, #0064e0 45%, transparent);
194
+ --ngxsmk-color-tertiary: #aa1fff;
195
+ --ngxsmk-color-on-tertiary: #ffffff;
196
+ --ngxsmk-color-tertiary-container: #f3e0ff;
197
+ --ngxsmk-color-on-tertiary-container: #4f0080;
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: #2694FE;
195
- --ngxsmk-color-on-primary: #FFFFFF;
196
- --ngxsmk-color-primary-hover: #5CA5FB;
197
- --ngxsmk-color-primary-active: #9AC6FC;
198
- --ngxsmk-color-primary-container: #002C63;
199
- --ngxsmk-color-on-primary-container: #CFE3FD;
220
+ --ngxsmk-color-primary: #2694fe;
221
+ --ngxsmk-color-on-primary: #ffffff;
222
+ --ngxsmk-color-primary-hover: #5ca5fb;
223
+ --ngxsmk-color-primary-active: #9ac6fc;
224
+ --ngxsmk-color-primary-container: #002c63;
225
+ --ngxsmk-color-on-primary-container: #cfe3fd;
226
+ --ngxsmk-color-secondary: #b252ff;
227
+ --ngxsmk-color-on-secondary: #ffffff;
228
+ --ngxsmk-color-secondary-hover: #cd8fff;
229
+ --ngxsmk-color-secondary-active: #e1bdff;
230
+ --ngxsmk-color-secondary-container: #470080;
231
+ --ngxsmk-color-on-secondary-container: #f1e0ff;
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: #2694FE;
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: #2694fe;
213
250
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
214
- --ngxsmk-shadow-focus: 0 0 0 2px color-mix(in srgb, #2694FE 25%, transparent), 0 0 0 4px color-mix(in srgb, #2694FE 45%, transparent);
215
- --ngxsmk-color-tertiary: #BD52FF;
251
+ --ngxsmk-shadow-focus:
252
+ 0 0 0 2px color-mix(in srgb, #2694fe 25%, transparent),
253
+ 0 0 0 4px color-mix(in srgb, #2694fe 45%, transparent);
254
+ --ngxsmk-color-tertiary: #bd52ff;
216
255
  --ngxsmk-color-on-tertiary: #330052;
217
- --ngxsmk-color-tertiary-container: #4F0080;
218
- --ngxsmk-color-on-tertiary-container: #F3E0FF;
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;
256
+ --ngxsmk-color-tertiary-container: #4f0080;
257
+ --ngxsmk-color-on-tertiary-container: #f3e0ff;
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
  }