@ngxsmk/theme 1.2.0 → 1.3.1

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 (19) hide show
  1. package/README.md +50 -12
  2. package/esm2022/lib/css.mjs +41 -5
  3. package/esm2022/lib/presets.mjs +5 -26
  4. package/esm2022/lib/tokens.mjs +47 -16
  5. package/fesm2022/ngxsmk-theme.mjs +90 -44
  6. package/fesm2022/ngxsmk-theme.mjs.map +1 -1
  7. package/lib/css.d.ts.map +1 -1
  8. package/lib/presets.d.ts +4 -6
  9. package/lib/presets.d.ts.map +1 -1
  10. package/lib/tokens.d.ts +24 -9
  11. package/lib/tokens.d.ts.map +1 -1
  12. package/package.json +11 -1
  13. package/styles/ngxsmk.css +162 -132
  14. package/styles/ngxsmk.emerald.css +156 -126
  15. package/styles/ngxsmk.neutral.css +155 -125
  16. package/styles/ngxsmk.rose.css +160 -130
  17. package/styles/ngxsmk.violet.css +162 -132
  18. package/styles/ngx.css +0 -212
  19. package/styles/ngxsmk.astryx.css +0 -280
package/styles/ngxsmk.violet.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: #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;
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;
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: #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;
178
+ --ngxsmk-color-primary: #7C3AED;
179
+ --ngxsmk-color-on-primary: #FFFFFF;
180
+ --ngxsmk-color-primary-hover: #6315E9;
181
+ --ngxsmk-color-primary-active: #5713CD;
182
+ --ngxsmk-color-primary-container: #ECE3FC;
183
+ --ngxsmk-color-on-primary-container: #320B75;
184
+ --ngxsmk-color-secondary: #ED3AAB;
185
+ --ngxsmk-color-on-secondary: #FFFFFF;
186
+ --ngxsmk-color-secondary-hover: #E9159B;
187
+ --ngxsmk-color-secondary-active: #CD1388;
188
+ --ngxsmk-color-secondary-container: #FCE3F3;
189
+ --ngxsmk-color-on-secondary-container: #750B4E;
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: #7c3aed;
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: #7C3AED;
192
208
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
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;
209
+ --ngxsmk-shadow-focus: 0 0 0 2px #ECE3FC, 0 0 0 4px color-mix(in srgb, #7C3AED 45%, transparent);
210
+ --ngxsmk-color-tertiary: #ED3A9F;
211
+ --ngxsmk-color-on-tertiary: #FFFFFF;
212
+ --ngxsmk-color-tertiary-container: #FCE3F1;
213
+ --ngxsmk-color-on-tertiary-container: #750B47;
214
+ --ngxsmk-color-success: #0D8626;
215
+ --ngxsmk-color-on-success: #FFFFFF;
216
+ --ngxsmk-color-success-container: #E3FCE8;
217
+ --ngxsmk-color-on-success-container: #0D8626;
218
+ --ngxsmk-color-warning: #E9AF08;
219
+ --ngxsmk-color-on-warning: #FFFFFF;
220
+ --ngxsmk-color-warning-container: #FEF7E1;
221
+ --ngxsmk-color-on-warning-container: #9E7705;
222
+ --ngxsmk-color-error: #E3193B;
223
+ --ngxsmk-color-on-error: #FFFFFF;
224
+ --ngxsmk-color-error-container: #FCE3E8;
209
225
  --ngxsmk-color-on-error-container: #931026;
210
- --ngxsmk-color-info: #0064e0;
211
- --ngxsmk-color-on-info: #ffffff;
212
- --ngxsmk-color-info-container: #e0eeff;
213
- --ngxsmk-color-on-info-container: #0049a3;
226
+ --ngxsmk-color-info: #2563EB;
227
+ --ngxsmk-color-on-info: #FFFFFF;
228
+ --ngxsmk-color-info-container: #E3EBFC;
229
+ --ngxsmk-color-on-info-container: #0E3895;
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: #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;
234
+ --ngxsmk-color-primary: #9560F0;
235
+ --ngxsmk-color-on-primary: #FFFFFF;
236
+ --ngxsmk-color-primary-hover: #BB98F6;
237
+ --ngxsmk-color-primary-active: #D7C2F9;
238
+ --ngxsmk-color-primary-container: #320B75;
239
+ --ngxsmk-color-on-primary-container: #ECE3FC;
240
+ --ngxsmk-color-secondary: #F060BB;
241
+ --ngxsmk-color-on-secondary: #FFFFFF;
242
+ --ngxsmk-color-secondary-hover: #F698D3;
243
+ --ngxsmk-color-secondary-active: #F9C2E5;
244
+ --ngxsmk-color-secondary-container: #750B4E;
245
+ --ngxsmk-color-on-secondary-container: #FCE3F3;
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: #9560f0;
263
+ --ngxsmk-color-ring: #9560F0;
250
264
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
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;
271
- --ngxsmk-color-on-info: #002452;
272
- --ngxsmk-color-info-container: #002452;
273
- --ngxsmk-color-on-info-container: #8fc1ff;
265
+ --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);
266
+ --ngxsmk-color-tertiary: #F060B2;
267
+ --ngxsmk-color-on-tertiary: #4B072D;
268
+ --ngxsmk-color-tertiary-container: #750B47;
269
+ --ngxsmk-color-on-tertiary-container: #FCE3F1;
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;
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
+ }
package/styles/ngx.css DELETED
@@ -1,212 +0,0 @@
1
- /* Generated by @ngxsmk/theme — do not edit by hand. */
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;
18
- --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;
24
- --ngxsmk-color-neutral-950: #111112;
25
- --ngxsmk-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
26
- --ngxsmk-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
27
- --ngxsmk-radius-base: 0.5rem;
28
- --ngxsmk-space-0: 0px;
29
- --ngxsmk-space-1: 0.25rem;
30
- --ngxsmk-space-2: 0.5rem;
31
- --ngxsmk-space-3: 0.75rem;
32
- --ngxsmk-space-4: 1rem;
33
- --ngxsmk-space-5: 1.25rem;
34
- --ngxsmk-space-6: 1.5rem;
35
- --ngxsmk-space-8: 2rem;
36
- --ngxsmk-space-10: 2.5rem;
37
- --ngxsmk-space-12: 3rem;
38
- --ngxsmk-space-16: 4rem;
39
- --ngxsmk-space-20: 5rem;
40
- --ngxsmk-space-24: 6rem;
41
- --ngxsmk-space-32: 8rem;
42
- --ngxsmk-space-0-5: 0.125rem;
43
- --ngxsmk-space-1-5: 0.375rem;
44
- --ngxsmk-radius-none: 0px;
45
- --ngxsmk-radius-sm: 0.25rem;
46
- --ngxsmk-radius-md: 0.5rem;
47
- --ngxsmk-radius-lg: 0.75rem;
48
- --ngxsmk-radius-xl: 1rem;
49
- --ngxsmk-radius-2xl: 1.25rem;
50
- --ngxsmk-radius-3xl: 1.75rem;
51
- --ngxsmk-radius-full: 9999px;
52
- --ngxsmk-shadow-sm: 0 1px 1px rgb(0 0 0 / 0.08), 0 2px 8px rgb(0 0 0 / 0.08);
53
- --ngxsmk-shadow-md: 0 1px 2px rgb(0 0 0 / 0.1), 0 2px 12px rgb(0 0 0 / 0.1);
54
- --ngxsmk-shadow-lg: 0 2px 2px rgb(0 0 0 / 0.1), 0 8px 24px rgb(0 0 0 / 0.12);
55
- --ngxsmk-shadow-xl: 0 4px 6px rgb(0 0 0 / 0.1), 0 12px 32px rgb(0 0 0 / 0.16);
56
- --ngxsmk-shadow-2xl: 0 8px 12px rgb(0 0 0 / 0.14), 0 24px 48px rgb(0 0 0 / 0.22);
57
- --ngxsmk-duration-instant: 0ms;
58
- --ngxsmk-duration-fast: 100ms;
59
- --ngxsmk-duration-normal: 200ms;
60
- --ngxsmk-duration-slow: 300ms;
61
- --ngxsmk-duration-slower: 500ms;
62
- --ngxsmk-ease-linear: linear;
63
- --ngxsmk-ease-in: cubic-bezier(0.4, 0, 1, 1);
64
- --ngxsmk-ease-out: cubic-bezier(0, 0, 0.2, 1);
65
- --ngxsmk-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
66
- --ngxsmk-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
67
- --ngxsmk-z-dropdown: 1000;
68
- --ngxsmk-z-sticky: 1100;
69
- --ngxsmk-z-banner: 1200;
70
- --ngxsmk-z-overlay: 1300;
71
- --ngxsmk-z-modal: 1400;
72
- --ngxsmk-z-popover: 1500;
73
- --ngxsmk-z-toast: 1600;
74
- --ngxsmk-z-tooltip: 1700;
75
- --ngxsmk-text-display-lg-size: 3.5625rem;
76
- --ngxsmk-text-display-lg-line: 4rem;
77
- --ngxsmk-text-display-lg-weight: 700;
78
- --ngxsmk-text-display-md-size: 2.8125rem;
79
- --ngxsmk-text-display-md-line: 3.25rem;
80
- --ngxsmk-text-display-md-weight: 700;
81
- --ngxsmk-text-display-sm-size: 2.25rem;
82
- --ngxsmk-text-display-sm-line: 2.75rem;
83
- --ngxsmk-text-display-sm-weight: 700;
84
- --ngxsmk-text-headline-lg-size: 2rem;
85
- --ngxsmk-text-headline-lg-line: 2.5rem;
86
- --ngxsmk-text-headline-lg-weight: 600;
87
- --ngxsmk-text-headline-md-size: 1.75rem;
88
- --ngxsmk-text-headline-md-line: 2.25rem;
89
- --ngxsmk-text-headline-md-weight: 600;
90
- --ngxsmk-text-headline-sm-size: 1.5rem;
91
- --ngxsmk-text-headline-sm-line: 2rem;
92
- --ngxsmk-text-headline-sm-weight: 600;
93
- --ngxsmk-text-title-lg-size: 1.375rem;
94
- --ngxsmk-text-title-lg-line: 1.75rem;
95
- --ngxsmk-text-title-lg-weight: 600;
96
- --ngxsmk-text-title-md-size: 1.125rem;
97
- --ngxsmk-text-title-md-line: 1.5rem;
98
- --ngxsmk-text-title-md-weight: 600;
99
- --ngxsmk-text-title-sm-size: 1rem;
100
- --ngxsmk-text-title-sm-line: 1.5rem;
101
- --ngxsmk-text-title-sm-weight: 600;
102
- --ngxsmk-text-body-lg-size: 1rem;
103
- --ngxsmk-text-body-lg-line: 1.5rem;
104
- --ngxsmk-text-body-lg-weight: 400;
105
- --ngxsmk-text-body-md-size: 0.875rem;
106
- --ngxsmk-text-body-md-line: 1.25rem;
107
- --ngxsmk-text-body-md-weight: 400;
108
- --ngxsmk-text-body-sm-size: 0.75rem;
109
- --ngxsmk-text-body-sm-line: 1rem;
110
- --ngxsmk-text-body-sm-weight: 400;
111
- --ngxsmk-text-label-lg-size: 0.875rem;
112
- --ngxsmk-text-label-lg-line: 1.25rem;
113
- --ngxsmk-text-label-lg-weight: 500;
114
- --ngxsmk-text-label-md-size: 0.75rem;
115
- --ngxsmk-text-label-md-line: 1rem;
116
- --ngxsmk-text-label-md-weight: 500;
117
- --ngxsmk-text-label-sm-size: 0.6875rem;
118
- --ngxsmk-text-label-sm-line: 1rem;
119
- --ngxsmk-text-label-sm-weight: 500;
120
- --ngxsmk-text-body-xs-size: 0.6875rem;
121
- --ngxsmk-text-body-xs-line: 1rem;
122
- --ngxsmk-text-body-xs-weight: 400;
123
- color-scheme: light;
124
- --ngxsmk-color-primary: #0064e0;
125
- --ngxsmk-color-on-primary: #ffffff;
126
- --ngxsmk-color-primary-hover: #0052b7;
127
- --ngxsmk-color-primary-active: #004499;
128
- --ngxsmk-color-primary-container: #cfe3fd;
129
- --ngxsmk-color-on-primary-container: #002c63;
130
- --ngxsmk-color-background: #f1f4f7;
131
- --ngxsmk-color-on-background: #0a1317;
132
- --ngxsmk-color-surface: #ffffff;
133
- --ngxsmk-color-on-surface: #0a1317;
134
- --ngxsmk-color-surface-variant: #e4e9ee;
135
- --ngxsmk-color-on-surface-variant: #4e606f;
136
- --ngxsmk-color-surface-hover: rgb(5 54 89 / 0.05);
137
- --ngxsmk-color-surface-active: rgb(5 54 89 / 0.1);
138
- --ngxsmk-color-surface-container: #ffffff;
139
- --ngxsmk-color-outline: rgb(5 54 89 / 0.1);
140
- --ngxsmk-color-outline-strong: #ccd3db;
141
- --ngxsmk-color-outline-variant: rgb(5 54 89 / 0.06);
142
- --ngxsmk-color-ring: #0064e0;
143
- --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
144
- --ngxsmk-shadow-focus: 0 0 0 2px #cfe3fd, 0 0 0 4px color-mix(in srgb, #0064e0 45%, transparent);
145
- --ngxsmk-color-tertiary: #aa1fff;
146
- --ngxsmk-color-on-tertiary: #ffffff;
147
- --ngxsmk-color-tertiary-container: #f3e0ff;
148
- --ngxsmk-color-on-tertiary-container: #4f0080;
149
- --ngxsmk-color-success: #0d8626;
150
- --ngxsmk-color-on-success: #ffffff;
151
- --ngxsmk-color-success-container: #e3fce8;
152
- --ngxsmk-color-on-success-container: #0d8626;
153
- --ngxsmk-color-warning: #e9af08;
154
- --ngxsmk-color-on-warning: #ffffff;
155
- --ngxsmk-color-warning-container: #fef7e1;
156
- --ngxsmk-color-on-warning-container: #9e7705;
157
- --ngxsmk-color-error: #e3193b;
158
- --ngxsmk-color-on-error: #ffffff;
159
- --ngxsmk-color-error-container: #fce3e8;
160
- --ngxsmk-color-on-error-container: #931026;
161
- --ngxsmk-color-info: #0064e0;
162
- --ngxsmk-color-on-info: #ffffff;
163
- --ngxsmk-color-info-container: #e0eeff;
164
- --ngxsmk-color-on-info-container: #0049a3;
165
- }
166
-
167
- .dark {
168
- color-scheme: dark;
169
- --ngxsmk-color-primary: #2694fe;
170
- --ngxsmk-color-on-primary: #ffffff;
171
- --ngxsmk-color-primary-hover: #5ca5fb;
172
- --ngxsmk-color-primary-active: #9ac6fc;
173
- --ngxsmk-color-primary-container: #002c63;
174
- --ngxsmk-color-on-primary-container: #cfe3fd;
175
- --ngxsmk-color-background: #111112;
176
- --ngxsmk-color-on-background: #dfe2e5;
177
- --ngxsmk-color-surface: #1f1f22;
178
- --ngxsmk-color-on-surface: #dfe2e5;
179
- --ngxsmk-color-surface-variant: #28292c;
180
- --ngxsmk-color-on-surface-variant: #aaafb5;
181
- --ngxsmk-color-surface-hover: rgb(255 255 255 / 0.05);
182
- --ngxsmk-color-surface-active: rgb(255 255 255 / 0.1);
183
- --ngxsmk-color-surface-container: #28292c;
184
- --ngxsmk-color-outline: rgb(242 244 246 / 0.1);
185
- --ngxsmk-color-outline-strong: #494d53;
186
- --ngxsmk-color-outline-variant: rgb(242 244 246 / 0.06);
187
- --ngxsmk-color-ring: #2694fe;
188
- --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
189
- --ngxsmk-shadow-focus:
190
- 0 0 0 2px color-mix(in srgb, #2694fe 25%, transparent),
191
- 0 0 0 4px color-mix(in srgb, #2694fe 45%, transparent);
192
- --ngxsmk-color-tertiary: #bd52ff;
193
- --ngxsmk-color-on-tertiary: #330052;
194
- --ngxsmk-color-tertiary-container: #4f0080;
195
- --ngxsmk-color-on-tertiary-container: #f3e0ff;
196
- --ngxsmk-color-success: #61f07e;
197
- --ngxsmk-color-on-success: #074a15;
198
- --ngxsmk-color-success-container: #074a15;
199
- --ngxsmk-color-on-success-container: #99f5ac;
200
- --ngxsmk-color-warning: #f9d057;
201
- --ngxsmk-color-on-warning: #4f3b03;
202
- --ngxsmk-color-warning-container: #4f3b03;
203
- --ngxsmk-color-on-warning-container: #fbe093;
204
- --ngxsmk-color-error: #ee637a;
205
- --ngxsmk-color-on-error: #4a0813;
206
- --ngxsmk-color-error-container: #4a0813;
207
- --ngxsmk-color-on-error-container: #f49aa9;
208
- --ngxsmk-color-info: #529fff;
209
- --ngxsmk-color-on-info: #002452;
210
- --ngxsmk-color-info-container: #002452;
211
- --ngxsmk-color-on-info-container: #8fc1ff;
212
- }