@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.emerald.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: #F0FFFA;
4
- --ngxsmk-color-brand-100: #E1FEF5;
5
- --ngxsmk-color-brand-200: #BFFDEA;
6
- --ngxsmk-color-brand-300: #92FBDB;
7
- --ngxsmk-color-brand-400: #57F9C7;
8
- --ngxsmk-color-brand-500: #26F8B7;
9
- --ngxsmk-color-brand-600: #08EDA6;
10
- --ngxsmk-color-brand-700: #07C58A;
3
+ --ngxsmk-color-brand-50: #f0fffa;
4
+ --ngxsmk-color-brand-100: #e1fef5;
5
+ --ngxsmk-color-brand-200: #bffdea;
6
+ --ngxsmk-color-brand-300: #92fbdb;
7
+ --ngxsmk-color-brand-400: #57f9c7;
8
+ --ngxsmk-color-brand-500: #26f8b7;
9
+ --ngxsmk-color-brand-600: #08eda6;
10
+ --ngxsmk-color-brand-700: #07c58a;
11
11
  --ngxsmk-color-brand-800: #059669;
12
- --ngxsmk-color-brand-900: #047B56;
13
- --ngxsmk-color-brand-950: #034F37;
14
- --ngxsmk-color-neutral-50: #F1F4F7;
15
- --ngxsmk-color-neutral-100: #E4E9EE;
16
- --ngxsmk-color-neutral-200: #CCD3DB;
17
- --ngxsmk-color-neutral-300: #A4B0BC;
12
+ --ngxsmk-color-brand-900: #047b56;
13
+ --ngxsmk-color-brand-950: #034f37;
14
+ --ngxsmk-color-secondary-50: #f0f5ff;
15
+ --ngxsmk-color-secondary-100: #e1eafe;
16
+ --ngxsmk-color-secondary-200: #bfd2fd;
17
+ --ngxsmk-color-secondary-300: #92b3fb;
18
+ --ngxsmk-color-secondary-400: #578af9;
19
+ --ngxsmk-color-secondary-500: #2667f8;
20
+ --ngxsmk-color-secondary-600: #084fed;
21
+ --ngxsmk-color-secondary-700: #0742c5;
22
+ --ngxsmk-color-secondary-800: #053296;
23
+ --ngxsmk-color-secondary-900: #04297b;
24
+ --ngxsmk-color-secondary-950: #031a4f;
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);
@@ -147,89 +160,121 @@
147
160
  --ngxsmk-text-body-xs-weight: 400;
148
161
  color-scheme: light;
149
162
  --ngxsmk-color-primary: #059669;
150
- --ngxsmk-color-on-primary: #FFFFFF;
151
- --ngxsmk-color-primary-hover: #046F4D;
163
+ --ngxsmk-color-on-primary: #ffffff;
164
+ --ngxsmk-color-primary-hover: #046f4d;
152
165
  --ngxsmk-color-primary-active: #035139;
153
- --ngxsmk-color-primary-container: #E1FEF5;
154
- --ngxsmk-color-on-primary-container: #047B56;
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: #e1fef5;
167
+ --ngxsmk-color-on-primary-container: #047b56;
168
+ --ngxsmk-color-secondary: #053296;
169
+ --ngxsmk-color-on-secondary: #ffffff;
170
+ --ngxsmk-color-secondary-hover: #04256f;
171
+ --ngxsmk-color-secondary-active: #031b51;
172
+ --ngxsmk-color-secondary-container: #e1eafe;
173
+ --ngxsmk-color-on-secondary-container: #04297b;
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);
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;
167
191
  --ngxsmk-color-ring: #059669;
168
192
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
169
- --ngxsmk-shadow-focus: 0 0 0 2px #E1FEF5, 0 0 0 4px color-mix(in srgb, #059669 45%, transparent);
170
- --ngxsmk-color-tertiary: #2659F8;
171
- --ngxsmk-color-on-tertiary: #FFFFFF;
172
- --ngxsmk-color-tertiary-container: #E1E8FE;
173
- --ngxsmk-color-on-tertiary-container: #04217B;
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 #e1fef5, 0 0 0 4px color-mix(in srgb, #059669 45%, transparent);
194
+ --ngxsmk-color-tertiary: #2659f8;
195
+ --ngxsmk-color-on-tertiary: #ffffff;
196
+ --ngxsmk-color-tertiary-container: #e1e8fe;
197
+ --ngxsmk-color-on-tertiary-container: #04217b;
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: #57F9C7;
195
- --ngxsmk-color-on-primary: #FFFFFF;
196
- --ngxsmk-color-primary-hover: #92FBDB;
197
- --ngxsmk-color-primary-active: #BFFDEA;
198
- --ngxsmk-color-primary-container: #047B56;
199
- --ngxsmk-color-on-primary-container: #E1FEF5;
220
+ --ngxsmk-color-primary: #57f9c7;
221
+ --ngxsmk-color-on-primary: #ffffff;
222
+ --ngxsmk-color-primary-hover: #92fbdb;
223
+ --ngxsmk-color-primary-active: #bffdea;
224
+ --ngxsmk-color-primary-container: #047b56;
225
+ --ngxsmk-color-on-primary-container: #e1fef5;
226
+ --ngxsmk-color-secondary: #578af9;
227
+ --ngxsmk-color-on-secondary: #ffffff;
228
+ --ngxsmk-color-secondary-hover: #92b3fb;
229
+ --ngxsmk-color-secondary-active: #bfd2fd;
230
+ --ngxsmk-color-secondary-container: #04297b;
231
+ --ngxsmk-color-on-secondary-container: #e1eafe;
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: #57F9C7;
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: #57f9c7;
213
250
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
214
- --ngxsmk-shadow-focus: 0 0 0 2px color-mix(in srgb, #57F9C7 25%, transparent), 0 0 0 4px color-mix(in srgb, #57F9C7 45%, transparent);
215
- --ngxsmk-color-tertiary: #577EF9;
216
- --ngxsmk-color-on-tertiary: #03154F;
217
- --ngxsmk-color-tertiary-container: #04217B;
218
- --ngxsmk-color-on-tertiary-container: #E1E8FE;
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, #57f9c7 25%, transparent),
253
+ 0 0 0 4px color-mix(in srgb, #57f9c7 45%, transparent);
254
+ --ngxsmk-color-tertiary: #577ef9;
255
+ --ngxsmk-color-on-tertiary: #03154f;
256
+ --ngxsmk-color-tertiary-container: #04217b;
257
+ --ngxsmk-color-on-tertiary-container: #e1e8fe;
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.neutral.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: #FAFAFA;
4
- --ngxsmk-color-brand-100: #F4F4F5;
5
- --ngxsmk-color-brand-200: #E4E4E7;
6
- --ngxsmk-color-brand-300: #D4D4D8;
7
- --ngxsmk-color-brand-400: #A1A1AA;
8
- --ngxsmk-color-brand-500: #71717A;
9
- --ngxsmk-color-brand-600: #3F3F46;
10
- --ngxsmk-color-brand-700: #27272A;
11
- --ngxsmk-color-brand-800: #1F1F23;
12
- --ngxsmk-color-brand-900: #18181B;
13
- --ngxsmk-color-brand-950: #09090B;
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: #fafafa;
4
+ --ngxsmk-color-brand-100: #f4f4f5;
5
+ --ngxsmk-color-brand-200: #e4e4e7;
6
+ --ngxsmk-color-brand-300: #d4d4d8;
7
+ --ngxsmk-color-brand-400: #a1a1aa;
8
+ --ngxsmk-color-brand-500: #71717a;
9
+ --ngxsmk-color-brand-600: #3f3f46;
10
+ --ngxsmk-color-brand-700: #27272a;
11
+ --ngxsmk-color-brand-800: #1f1f23;
12
+ --ngxsmk-color-brand-900: #18181b;
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;
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: #18181B;
150
- --ngxsmk-color-on-primary: #FFFFFF;
162
+ --ngxsmk-color-primary: #18181b;
163
+ --ngxsmk-color-on-primary: #ffffff;
151
164
  --ngxsmk-color-primary-hover: #050505;
152
165
  --ngxsmk-color-primary-active: #000000;
153
- --ngxsmk-color-primary-container: #F4F4F5;
154
- --ngxsmk-color-on-primary-container: #18181B;
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: #f4f4f5;
167
+ --ngxsmk-color-on-primary-container: #18181b;
168
+ --ngxsmk-color-secondary: #1b181b;
169
+ --ngxsmk-color-on-secondary: #ffffff;
170
+ --ngxsmk-color-secondary-hover: #050505;
171
+ --ngxsmk-color-secondary-active: #000000;
172
+ --ngxsmk-color-secondary-container: #f1eff1;
173
+ --ngxsmk-color-on-secondary-container: #443c44;
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: #18181B;
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: #18181b;
168
192
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
169
- --ngxsmk-shadow-focus: 0 0 0 2px #F4F4F5, 0 0 0 4px color-mix(in srgb, #18181B 45%, transparent);
193
+ --ngxsmk-shadow-focus: 0 0 0 2px #f4f4f5, 0 0 0 4px color-mix(in srgb, #18181b 45%, transparent);
170
194
  --ngxsmk-color-tertiary: #958895;
171
- --ngxsmk-color-on-tertiary: #FFFFFF;
172
- --ngxsmk-color-tertiary-container: #F1EFF1;
173
- --ngxsmk-color-on-tertiary-container: #443C44;
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;
195
+ --ngxsmk-color-on-tertiary: #ffffff;
196
+ --ngxsmk-color-tertiary-container: #f1eff1;
197
+ --ngxsmk-color-on-tertiary-container: #443c44;
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: #FAFAFA;
195
- --ngxsmk-color-on-primary: #18181B;
196
- --ngxsmk-color-primary-hover: #E4E4E7;
197
- --ngxsmk-color-primary-active: #D4D4D8;
198
- --ngxsmk-color-primary-container: #18181B;
199
- --ngxsmk-color-on-primary-container: #F4F4F5;
220
+ --ngxsmk-color-primary: #fafafa;
221
+ --ngxsmk-color-on-primary: #18181b;
222
+ --ngxsmk-color-primary-hover: #e4e4e7;
223
+ --ngxsmk-color-primary-active: #d4d4d8;
224
+ --ngxsmk-color-primary-container: #18181b;
225
+ --ngxsmk-color-on-primary-container: #f4f4f5;
226
+ --ngxsmk-color-secondary: #ada3ad;
227
+ --ngxsmk-color-on-secondary: #ffffff;
228
+ --ngxsmk-color-secondary-hover: #cac4ca;
229
+ --ngxsmk-color-secondary-active: #e0dce0;
230
+ --ngxsmk-color-secondary-container: #443c44;
231
+ --ngxsmk-color-on-secondary-container: #f1eff1;
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: #D4D4D8;
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: #d4d4d8;
213
250
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
214
- --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);
215
- --ngxsmk-color-tertiary: #ADA3AD;
216
- --ngxsmk-color-on-tertiary: #1B181B;
217
- --ngxsmk-color-tertiary-container: #443C44;
218
- --ngxsmk-color-on-tertiary-container: #F1EFF1;
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, #a1a1aa 25%, transparent),
253
+ 0 0 0 4px color-mix(in srgb, #a1a1aa 45%, transparent);
254
+ --ngxsmk-color-tertiary: #ada3ad;
255
+ --ngxsmk-color-on-tertiary: #1b181b;
256
+ --ngxsmk-color-tertiary-container: #443c44;
257
+ --ngxsmk-color-on-tertiary-container: #f1eff1;
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
  }