@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.astryx.css DELETED
@@ -1,280 +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-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;
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;
35
- --ngxsmk-color-neutral-950: #111112;
36
- --ngxsmk-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
37
- --ngxsmk-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
38
- --ngxsmk-radius-base: 0.5rem;
39
- --ngxsmk-control-height: 2.5rem;
40
- --ngxsmk-motion-duration: var(--ngxsmk-duration-normal);
41
- --ngxsmk-motion-ease: var(--ngxsmk-ease-in-out);
42
- --ngxsmk-button-bg: var(--ngxsmk-color-primary);
43
- --ngxsmk-button-color: var(--ngxsmk-color-on-primary);
44
- --ngxsmk-button-font-family: var(--ngxsmk-font-sans);
45
- --ngxsmk-button-font-weight: 500;
46
- --ngxsmk-button-radius: var(--ngxsmk-radius-base);
47
- --ngxsmk-button-disabled-opacity: 0.5;
48
- --ngxsmk-card-bg: var(--ngxsmk-color-surface);
49
- --ngxsmk-card-radius: var(--ngxsmk-radius-xl);
50
- --ngxsmk-card-shadow: var(--ngxsmk-shadow-sm);
51
- --ngxsmk-card-border-color: var(--ngxsmk-color-outline);
52
- --ngxsmk-accordion-bg: var(--ngxsmk-color-surface);
53
- --ngxsmk-accordion-radius: var(--ngxsmk-radius-lg);
54
- --ngxsmk-accordion-border-color: var(--ngxsmk-color-outline);
55
- --ngxsmk-progress-height: 0.5rem;
56
- --ngxsmk-progress-bg: var(--ngxsmk-color-surface-variant);
57
- --ngxsmk-progress-color: var(--ngxsmk-color-primary);
58
- --ngxsmk-progress-radius: var(--ngxsmk-radius-full);
59
- --ngxsmk-switch-width: 2.25rem;
60
- --ngxsmk-switch-height: 1.25rem;
61
- --ngxsmk-switch-radius: var(--ngxsmk-radius-full);
62
- --ngxsmk-switch-bg: var(--ngxsmk-color-outline-strong);
63
- --ngxsmk-switch-thumb-size: 0.875rem;
64
- --ngxsmk-switch-thumb-bg: var(--ngxsmk-color-surface);
65
- --ngxsmk-switch-checked-bg: var(--ngxsmk-color-primary);
66
- --ngxsmk-space-0: 0px;
67
- --ngxsmk-space-1: 0.25rem;
68
- --ngxsmk-space-2: 0.5rem;
69
- --ngxsmk-space-3: 0.75rem;
70
- --ngxsmk-space-4: 1rem;
71
- --ngxsmk-space-5: 1.25rem;
72
- --ngxsmk-space-6: 1.5rem;
73
- --ngxsmk-space-8: 2rem;
74
- --ngxsmk-space-10: 2.5rem;
75
- --ngxsmk-space-12: 3rem;
76
- --ngxsmk-space-16: 4rem;
77
- --ngxsmk-space-20: 5rem;
78
- --ngxsmk-space-24: 6rem;
79
- --ngxsmk-space-32: 8rem;
80
- --ngxsmk-space-0-5: 0.125rem;
81
- --ngxsmk-space-1-5: 0.375rem;
82
- --ngxsmk-radius-none: 0px;
83
- --ngxsmk-radius-sm: 0.25rem;
84
- --ngxsmk-radius-md: 0.5rem;
85
- --ngxsmk-radius-lg: 0.75rem;
86
- --ngxsmk-radius-xl: 1rem;
87
- --ngxsmk-radius-2xl: 1.25rem;
88
- --ngxsmk-radius-3xl: 1.75rem;
89
- --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);
95
- --ngxsmk-duration-instant: 0ms;
96
- --ngxsmk-duration-fast: 100ms;
97
- --ngxsmk-duration-normal: 200ms;
98
- --ngxsmk-duration-slow: 300ms;
99
- --ngxsmk-duration-slower: 500ms;
100
- --ngxsmk-ease-linear: linear;
101
- --ngxsmk-ease-in: cubic-bezier(0.4, 0, 1, 1);
102
- --ngxsmk-ease-out: cubic-bezier(0, 0, 0.2, 1);
103
- --ngxsmk-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
104
- --ngxsmk-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
105
- --ngxsmk-z-dropdown: 1000;
106
- --ngxsmk-z-sticky: 1100;
107
- --ngxsmk-z-banner: 1200;
108
- --ngxsmk-z-overlay: 1300;
109
- --ngxsmk-z-modal: 1400;
110
- --ngxsmk-z-popover: 1500;
111
- --ngxsmk-z-toast: 1600;
112
- --ngxsmk-z-tooltip: 1700;
113
- --ngxsmk-text-display-lg-size: 3.5625rem;
114
- --ngxsmk-text-display-lg-line: 4rem;
115
- --ngxsmk-text-display-lg-weight: 700;
116
- --ngxsmk-text-display-md-size: 2.8125rem;
117
- --ngxsmk-text-display-md-line: 3.25rem;
118
- --ngxsmk-text-display-md-weight: 700;
119
- --ngxsmk-text-display-sm-size: 2.25rem;
120
- --ngxsmk-text-display-sm-line: 2.75rem;
121
- --ngxsmk-text-display-sm-weight: 700;
122
- --ngxsmk-text-headline-lg-size: 2rem;
123
- --ngxsmk-text-headline-lg-line: 2.5rem;
124
- --ngxsmk-text-headline-lg-weight: 600;
125
- --ngxsmk-text-headline-md-size: 1.75rem;
126
- --ngxsmk-text-headline-md-line: 2.25rem;
127
- --ngxsmk-text-headline-md-weight: 600;
128
- --ngxsmk-text-headline-sm-size: 1.5rem;
129
- --ngxsmk-text-headline-sm-line: 2rem;
130
- --ngxsmk-text-headline-sm-weight: 600;
131
- --ngxsmk-text-title-lg-size: 1.375rem;
132
- --ngxsmk-text-title-lg-line: 1.75rem;
133
- --ngxsmk-text-title-lg-weight: 600;
134
- --ngxsmk-text-title-md-size: 1.125rem;
135
- --ngxsmk-text-title-md-line: 1.5rem;
136
- --ngxsmk-text-title-md-weight: 600;
137
- --ngxsmk-text-title-sm-size: 1rem;
138
- --ngxsmk-text-title-sm-line: 1.5rem;
139
- --ngxsmk-text-title-sm-weight: 600;
140
- --ngxsmk-text-body-lg-size: 1rem;
141
- --ngxsmk-text-body-lg-line: 1.5rem;
142
- --ngxsmk-text-body-lg-weight: 400;
143
- --ngxsmk-text-body-md-size: 0.875rem;
144
- --ngxsmk-text-body-md-line: 1.25rem;
145
- --ngxsmk-text-body-md-weight: 400;
146
- --ngxsmk-text-body-sm-size: 0.75rem;
147
- --ngxsmk-text-body-sm-line: 1rem;
148
- --ngxsmk-text-body-sm-weight: 400;
149
- --ngxsmk-text-label-lg-size: 0.875rem;
150
- --ngxsmk-text-label-lg-line: 1.25rem;
151
- --ngxsmk-text-label-lg-weight: 500;
152
- --ngxsmk-text-label-md-size: 0.75rem;
153
- --ngxsmk-text-label-md-line: 1rem;
154
- --ngxsmk-text-label-md-weight: 500;
155
- --ngxsmk-text-label-sm-size: 0.6875rem;
156
- --ngxsmk-text-label-sm-line: 1rem;
157
- --ngxsmk-text-label-sm-weight: 500;
158
- --ngxsmk-text-body-xs-size: 0.6875rem;
159
- --ngxsmk-text-body-xs-line: 1rem;
160
- --ngxsmk-text-body-xs-weight: 400;
161
- color-scheme: light;
162
- --ngxsmk-color-primary: #0064e0;
163
- --ngxsmk-color-on-primary: #ffffff;
164
- --ngxsmk-color-primary-hover: #0052b7;
165
- --ngxsmk-color-primary-active: #004499;
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;
180
- --ngxsmk-color-surface-hover: rgb(5 54 89 / 0.05);
181
- --ngxsmk-color-surface-active: rgb(5 54 89 / 0.1);
182
- --ngxsmk-color-surface-container: #ffffff;
183
- --ngxsmk-color-outline: rgb(5 54 89 / 0.1);
184
- --ngxsmk-color-outline-strong: #ccd3db;
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;
191
- --ngxsmk-color-ring: #0064e0;
192
- --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
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;
209
- --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;
214
- }
215
-
216
- :root.dark,
217
- :root.dark body,
218
- .dark {
219
- color-scheme: dark;
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;
232
- --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;
238
- --ngxsmk-color-surface-hover: rgb(255 255 255 / 0.05);
239
- --ngxsmk-color-surface-active: rgb(255 255 255 / 0.1);
240
- --ngxsmk-color-surface-container: #28292c;
241
- --ngxsmk-color-outline: rgb(242 244 246 / 0.1);
242
- --ngxsmk-color-outline-strong: #494d53;
243
- --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;
248
- --ngxsmk-color-surface-5: #778593;
249
- --ngxsmk-color-ring: #2694fe;
250
- --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
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;
255
- --ngxsmk-color-on-tertiary: #330052;
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;
271
- --ngxsmk-color-on-info: #002452;
272
- --ngxsmk-color-info-container: #002452;
273
- --ngxsmk-color-on-info-container: #8fc1ff;
274
- }
275
-
276
- @media (prefers-reduced-motion: reduce) {
277
- :root {
278
- --ngxsmk-motion-duration: 0ms;
279
- }
280
- }