@ngxsmk/theme 1.3.0 → 1.3.2

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 (17) hide show
  1. package/README.md +1 -1
  2. package/esm2022/lib/color.mjs +73 -76
  3. package/esm2022/lib/css.mjs +39 -3
  4. package/esm2022/lib/tokens.mjs +41 -9
  5. package/fesm2022/ngxsmk-theme.mjs +150 -85
  6. package/fesm2022/ngxsmk-theme.mjs.map +1 -1
  7. package/lib/color.d.ts +9 -15
  8. package/lib/color.d.ts.map +1 -1
  9. package/lib/css.d.ts.map +1 -1
  10. package/lib/tokens.d.ts +19 -3
  11. package/lib/tokens.d.ts.map +1 -1
  12. package/package.json +10 -1
  13. package/styles/ngxsmk.css +161 -131
  14. package/styles/ngxsmk.emerald.css +161 -131
  15. package/styles/ngxsmk.neutral.css +161 -131
  16. package/styles/ngxsmk.rose.css +163 -133
  17. package/styles/ngxsmk.violet.css +163 -133
package/styles/ngxsmk.rose.css CHANGED
@@ -1,37 +1,37 @@
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;
25
- --ngxsmk-color-neutral-50: #f1f4f7;
26
- --ngxsmk-color-neutral-100: #e4e9ee;
27
- --ngxsmk-color-neutral-200: #ccd3db;
28
- --ngxsmk-color-neutral-300: #a4b0bc;
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
+ --ngxsmk-color-neutral-50: #F1F4F7;
26
+ --ngxsmk-color-neutral-100: #E4E9EE;
27
+ --ngxsmk-color-neutral-200: #CCD3DB;
28
+ --ngxsmk-color-neutral-300: #A4B0BC;
29
29
  --ngxsmk-color-neutral-400: #778593;
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;
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;
35
35
  --ngxsmk-color-neutral-950: #111112;
36
36
  --ngxsmk-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
37
37
  --ngxsmk-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
@@ -39,6 +39,10 @@
39
39
  --ngxsmk-control-height: 2.5rem;
40
40
  --ngxsmk-motion-duration: var(--ngxsmk-duration-normal);
41
41
  --ngxsmk-motion-ease: var(--ngxsmk-ease-in-out);
42
+ --ngxsmk-hover-lift: translateY(-1px);
43
+ --ngxsmk-press-scale: scale(0.98);
44
+ --ngxsmk-focus-ring: var(--ngxsmk-shadow-focus);
45
+ --ngxsmk-focus-ring-error: 0 0 0 2px color-mix(in srgb, var(--ngxsmk-color-error) 15%, transparent), 0 0 0 4px color-mix(in srgb, var(--ngxsmk-color-error) 45%, transparent);
42
46
  --ngxsmk-button-bg: var(--ngxsmk-color-primary);
43
47
  --ngxsmk-button-color: var(--ngxsmk-color-on-primary);
44
48
  --ngxsmk-button-font-family: var(--ngxsmk-font-sans);
@@ -63,6 +67,18 @@
63
67
  --ngxsmk-switch-thumb-size: 0.875rem;
64
68
  --ngxsmk-switch-thumb-bg: var(--ngxsmk-color-surface);
65
69
  --ngxsmk-switch-checked-bg: var(--ngxsmk-color-primary);
70
+ --ngxsmk-control-height-sm: 2rem;
71
+ --ngxsmk-control-height-md: 2.5rem;
72
+ --ngxsmk-control-height-lg: 3rem;
73
+ --ngxsmk-opacity-disabled: 0.5;
74
+ --ngxsmk-opacity-muted: 0.7;
75
+ --ngxsmk-opacity-faint: 0.4;
76
+ --ngxsmk-icon-sm: 1rem;
77
+ --ngxsmk-icon-md: 1.25rem;
78
+ --ngxsmk-icon-lg: 1.5rem;
79
+ --ngxsmk-tracking-tight: -0.02em;
80
+ --ngxsmk-tracking-normal: 0;
81
+ --ngxsmk-tracking-wide: 0.08em;
66
82
  --ngxsmk-space-0: 0px;
67
83
  --ngxsmk-space-1: 0.25rem;
68
84
  --ngxsmk-space-2: 0.5rem;
@@ -87,11 +103,11 @@
87
103
  --ngxsmk-radius-2xl: 1.25rem;
88
104
  --ngxsmk-radius-3xl: 1.75rem;
89
105
  --ngxsmk-radius-full: 9999px;
90
- --ngxsmk-shadow-sm: 0 1px 1px rgb(0 0 0 / 0.08), 0 2px 8px rgb(0 0 0 / 0.08);
91
- --ngxsmk-shadow-md: 0 1px 2px rgb(0 0 0 / 0.1), 0 2px 12px rgb(0 0 0 / 0.1);
92
- --ngxsmk-shadow-lg: 0 2px 2px rgb(0 0 0 / 0.1), 0 8px 24px rgb(0 0 0 / 0.12);
93
- --ngxsmk-shadow-xl: 0 4px 6px rgb(0 0 0 / 0.1), 0 12px 32px rgb(0 0 0 / 0.16);
94
- --ngxsmk-shadow-2xl: 0 8px 12px rgb(0 0 0 / 0.14), 0 24px 48px rgb(0 0 0 / 0.22);
106
+ --ngxsmk-shadow-sm: 0 0 0 1px rgb(0 0 0 / 0.03), 0 1px 1px rgb(0 0 0 / 0.07), 0 2px 8px rgb(0 0 0 / 0.07);
107
+ --ngxsmk-shadow-md: 0 0 0 1px rgb(0 0 0 / 0.03), 0 1px 2px rgb(0 0 0 / 0.09), 0 4px 16px rgb(0 0 0 / 0.09);
108
+ --ngxsmk-shadow-lg: 0 0 0 1px rgb(0 0 0 / 0.04), 0 2px 4px rgb(0 0 0 / 0.09), 0 10px 28px rgb(0 0 0 / 0.11);
109
+ --ngxsmk-shadow-xl: 0 0 0 1px rgb(0 0 0 / 0.04), 0 4px 8px rgb(0 0 0 / 0.1), 0 16px 40px rgb(0 0 0 / 0.15);
110
+ --ngxsmk-shadow-2xl: 0 0 0 1px rgb(0 0 0 / 0.05), 0 8px 16px rgb(0 0 0 / 0.13), 0 28px 56px rgb(0 0 0 / 0.2);
95
111
  --ngxsmk-duration-instant: 0ms;
96
112
  --ngxsmk-duration-fast: 100ms;
97
113
  --ngxsmk-duration-normal: 200ms;
@@ -159,122 +175,136 @@
159
175
  --ngxsmk-text-body-xs-line: 1rem;
160
176
  --ngxsmk-text-body-xs-weight: 400;
161
177
  color-scheme: light;
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;
178
+ --ngxsmk-color-primary: #E11D48;
179
+ --ngxsmk-color-on-primary: #FFFFFF;
180
+ --ngxsmk-color-primary-hover: #0C0000;
181
+ --ngxsmk-color-primary-active: #0C0000;
182
+ --ngxsmk-color-primary-container: #FFE1E1;
183
+ --ngxsmk-color-on-primary-container: #560001;
184
+ --ngxsmk-color-secondary: #C15F00;
185
+ --ngxsmk-color-on-secondary: #FFFFFF;
186
+ --ngxsmk-color-secondary-hover: #000400;
187
+ --ngxsmk-color-secondary-active: #000400;
188
+ --ngxsmk-color-secondary-container: #FBE7DA;
189
+ --ngxsmk-color-on-secondary-container: #450700;
190
+ --ngxsmk-color-background: #F1F4F7;
191
+ --ngxsmk-color-on-background: #0A1317;
192
+ --ngxsmk-color-surface: #FFFFFF;
193
+ --ngxsmk-color-on-surface: #0A1317;
194
+ --ngxsmk-color-surface-variant: #E4E9EE;
195
+ --ngxsmk-color-on-surface-variant: #4E606F;
180
196
  --ngxsmk-color-surface-hover: rgb(5 54 89 / 0.05);
181
197
  --ngxsmk-color-surface-active: rgb(5 54 89 / 0.1);
182
- --ngxsmk-color-surface-container: #ffffff;
198
+ --ngxsmk-color-surface-container: #FFFFFF;
183
199
  --ngxsmk-color-outline: rgb(5 54 89 / 0.1);
184
- --ngxsmk-color-outline-strong: #ccd3db;
200
+ --ngxsmk-color-outline-strong: #CCD3DB;
185
201
  --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;
191
- --ngxsmk-color-ring: #e11d48;
202
+ --ngxsmk-color-surface-1: #FFFFFF;
203
+ --ngxsmk-color-surface-2: #F1F4F7;
204
+ --ngxsmk-color-surface-3: #E4E9EE;
205
+ --ngxsmk-color-surface-4: #CCD3DB;
206
+ --ngxsmk-color-surface-5: #A4B0BC;
207
+ --ngxsmk-color-ring: #E11D48;
192
208
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
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;
209
- --ngxsmk-color-on-error-container: #931026;
210
- --ngxsmk-color-info: #2563eb;
211
- --ngxsmk-color-on-info: #ffffff;
212
- --ngxsmk-color-info-container: #e3ebfc;
213
- --ngxsmk-color-on-info-container: #0e3895;
209
+ --ngxsmk-shadow-focus: 0 0 0 2px #FFE1E1, 0 0 0 4px color-mix(in srgb, #E11D48 45%, transparent);
210
+ --ngxsmk-color-tertiary: #BB6400;
211
+ --ngxsmk-color-on-tertiary: #FFFFFF;
212
+ --ngxsmk-color-tertiary-container: #FAE7DA;
213
+ --ngxsmk-color-on-tertiary-container: #420D00;
214
+ --ngxsmk-color-success: #0D8626;
215
+ --ngxsmk-color-on-success: #FFFFFF;
216
+ --ngxsmk-color-success-container: #DFF1DF;
217
+ --ngxsmk-color-on-success-container: #004300;
218
+ --ngxsmk-color-warning: #E9AF08;
219
+ --ngxsmk-color-on-warning: #FFFFFF;
220
+ --ngxsmk-color-warning-container: #F5EAD5;
221
+ --ngxsmk-color-on-warning-container: #522700;
222
+ --ngxsmk-color-error: #E3193B;
223
+ --ngxsmk-color-on-error: #FFFFFF;
224
+ --ngxsmk-color-error-container: #FFE1DF;
225
+ --ngxsmk-color-on-error-container: #780000;
226
+ --ngxsmk-color-info: #2563EB;
227
+ --ngxsmk-color-on-info: #FFFFFF;
228
+ --ngxsmk-color-info-container: #DDECFF;
229
+ --ngxsmk-color-on-info-container: #001E8D;
214
230
  }
215
231
 
216
- :root.dark,
217
- :root.dark body,
218
- .dark {
232
+ :root.dark, :root.dark body, .dark {
219
233
  color-scheme: dark;
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;
234
+ --ngxsmk-color-primary: #F15265;
235
+ --ngxsmk-color-on-primary: #FFFFFF;
236
+ --ngxsmk-color-primary-hover: #FF8F96;
237
+ --ngxsmk-color-primary-active: #FFBDBF;
238
+ --ngxsmk-color-primary-container: #560001;
239
+ --ngxsmk-color-on-primary-container: #FFE1E1;
240
+ --ngxsmk-color-secondary: #D0793C;
241
+ --ngxsmk-color-on-secondary: #FFFFFF;
242
+ --ngxsmk-color-secondary-hover: #E9A67D;
243
+ --ngxsmk-color-secondary-active: #F5CAB0;
244
+ --ngxsmk-color-secondary-container: #450700;
245
+ --ngxsmk-color-on-secondary-container: #FBE7DA;
232
246
  --ngxsmk-color-background: #111112;
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;
247
+ --ngxsmk-color-on-background: #DFE2E5;
248
+ --ngxsmk-color-surface: #1F1F22;
249
+ --ngxsmk-color-on-surface: #DFE2E5;
250
+ --ngxsmk-color-surface-variant: #28292C;
251
+ --ngxsmk-color-on-surface-variant: #AAAFB5;
238
252
  --ngxsmk-color-surface-hover: rgb(255 255 255 / 0.05);
239
253
  --ngxsmk-color-surface-active: rgb(255 255 255 / 0.1);
240
- --ngxsmk-color-surface-container: #28292c;
254
+ --ngxsmk-color-surface-container: #28292C;
241
255
  --ngxsmk-color-outline: rgb(242 244 246 / 0.1);
242
- --ngxsmk-color-outline-strong: #494d53;
256
+ --ngxsmk-color-outline-strong: #494D53;
243
257
  --ngxsmk-color-outline-variant: rgb(242 244 246 / 0.06);
244
- --ngxsmk-color-surface-1: #1f1f22;
245
- --ngxsmk-color-surface-2: #2a333b;
246
- --ngxsmk-color-surface-3: #3a4650;
247
- --ngxsmk-color-surface-4: #4e606f;
258
+ --ngxsmk-color-surface-1: #1F1F22;
259
+ --ngxsmk-color-surface-2: #2A333B;
260
+ --ngxsmk-color-surface-3: #3A4650;
261
+ --ngxsmk-color-surface-4: #4E606F;
248
262
  --ngxsmk-color-surface-5: #778593;
249
- --ngxsmk-color-ring: #eb6583;
263
+ --ngxsmk-color-ring: #F15265;
250
264
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
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: #608df0;
271
- --ngxsmk-color-on-info: #071c4b;
272
- --ngxsmk-color-info-container: #071c4b;
273
- --ngxsmk-color-on-info-container: #98b5f6;
265
+ --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);
266
+ --ngxsmk-color-tertiary: #CB7D3C;
267
+ --ngxsmk-color-on-tertiary: #210200;
268
+ --ngxsmk-color-tertiary-container: #420D00;
269
+ --ngxsmk-color-on-tertiary-container: #FAE7DA;
270
+ --ngxsmk-color-success: #51A957;
271
+ --ngxsmk-color-on-success: #001500;
272
+ --ngxsmk-color-success-container: #001500;
273
+ --ngxsmk-color-on-success-container: #8CCA8D;
274
+ --ngxsmk-color-warning: #BA8900;
275
+ --ngxsmk-color-on-warning: #1C0700;
276
+ --ngxsmk-color-warning-container: #1C0700;
277
+ --ngxsmk-color-on-warning-container: #E9AF08;
278
+ --ngxsmk-color-error: #F3515A;
279
+ --ngxsmk-color-on-error: #2E0000;
280
+ --ngxsmk-color-error-container: #2E0000;
281
+ --ngxsmk-color-on-error-container: #FF8F8F;
282
+ --ngxsmk-color-info: #518BFF;
283
+ --ngxsmk-color-on-info: #000238;
284
+ --ngxsmk-color-info-container: #000238;
285
+ --ngxsmk-color-on-info-container: #88B6FF;
274
286
  }
275
287
 
276
288
  @media (prefers-reduced-motion: reduce) {
277
289
  :root {
278
290
  --ngxsmk-motion-duration: 0ms;
291
+ --ngxsmk-hover-lift: none;
292
+ --ngxsmk-press-scale: none;
293
+ --ngxsmk-duration-instant: 0ms;
294
+ --ngxsmk-duration-fast: 0ms;
295
+ --ngxsmk-duration-normal: 0ms;
296
+ --ngxsmk-duration-slow: 0ms;
297
+ --ngxsmk-duration-slower: 0ms;
279
298
  }
280
299
  }
300
+
301
+ :root.ngxsmk-reduce-motion, .ngxsmk-reduce-motion {
302
+ --ngxsmk-motion-duration: 0ms;
303
+ --ngxsmk-hover-lift: none;
304
+ --ngxsmk-press-scale: none;
305
+ --ngxsmk-duration-instant: 0ms;
306
+ --ngxsmk-duration-fast: 0ms;
307
+ --ngxsmk-duration-normal: 0ms;
308
+ --ngxsmk-duration-slow: 0ms;
309
+ --ngxsmk-duration-slower: 0ms;
310
+ }