@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.neutral.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: #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;
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
19
  --ngxsmk-color-secondary-500: #958895;
20
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;
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;
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: #18181b;
163
- --ngxsmk-color-on-primary: #ffffff;
178
+ --ngxsmk-color-primary: #18181B;
179
+ --ngxsmk-color-on-primary: #FFFFFF;
164
180
  --ngxsmk-color-primary-hover: #050505;
165
181
  --ngxsmk-color-primary-active: #000000;
166
- --ngxsmk-color-primary-container: #f4f4f5;
167
- --ngxsmk-color-on-primary-container: #18181b;
168
- --ngxsmk-color-secondary: #1b181b;
169
- --ngxsmk-color-on-secondary: #ffffff;
182
+ --ngxsmk-color-primary-container: #F4F4F5;
183
+ --ngxsmk-color-on-primary-container: #18181B;
184
+ --ngxsmk-color-secondary: #1B181B;
185
+ --ngxsmk-color-on-secondary: #FFFFFF;
170
186
  --ngxsmk-color-secondary-hover: #050505;
171
187
  --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;
188
+ --ngxsmk-color-secondary-container: #F1EFF1;
189
+ --ngxsmk-color-on-secondary-container: #443C44;
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: #18181b;
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: #18181B;
192
208
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
193
- --ngxsmk-shadow-focus: 0 0 0 2px #f4f4f5, 0 0 0 4px color-mix(in srgb, #18181b 45%, transparent);
209
+ --ngxsmk-shadow-focus: 0 0 0 2px #F4F4F5, 0 0 0 4px color-mix(in srgb, #18181B 45%, transparent);
194
210
  --ngxsmk-color-tertiary: #958895;
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;
211
+ --ngxsmk-color-on-tertiary: #FFFFFF;
212
+ --ngxsmk-color-tertiary-container: #F1EFF1;
213
+ --ngxsmk-color-on-tertiary-container: #443C44;
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: #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;
234
+ --ngxsmk-color-primary: #FAFAFA;
235
+ --ngxsmk-color-on-primary: #18181B;
236
+ --ngxsmk-color-primary-hover: #E4E4E7;
237
+ --ngxsmk-color-primary-active: #D4D4D8;
238
+ --ngxsmk-color-primary-container: #18181B;
239
+ --ngxsmk-color-on-primary-container: #F4F4F5;
240
+ --ngxsmk-color-secondary: #ADA3AD;
241
+ --ngxsmk-color-on-secondary: #FFFFFF;
242
+ --ngxsmk-color-secondary-hover: #CAC4CA;
243
+ --ngxsmk-color-secondary-active: #E0DCE0;
244
+ --ngxsmk-color-secondary-container: #443C44;
245
+ --ngxsmk-color-on-secondary-container: #F1EFF1;
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: #d4d4d8;
263
+ --ngxsmk-color-ring: #D4D4D8;
250
264
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
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;
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, #A1A1AA 25%, transparent), 0 0 0 4px color-mix(in srgb, #A1A1AA 45%, transparent);
266
+ --ngxsmk-color-tertiary: #ADA3AD;
267
+ --ngxsmk-color-on-tertiary: #1B181B;
268
+ --ngxsmk-color-tertiary-container: #443C44;
269
+ --ngxsmk-color-on-tertiary-container: #F1EFF1;
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
+ }