@ngxsmk/theme 1.1.0 → 1.3.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 (29) hide show
  1. package/README.md +50 -12
  2. package/esm2022/lib/color.mjs +2 -5
  3. package/esm2022/lib/css.mjs +33 -4
  4. package/esm2022/lib/define-config.mjs +5 -2
  5. package/esm2022/lib/presets.mjs +5 -26
  6. package/esm2022/lib/theme.service.mjs +11 -12
  7. package/esm2022/lib/tokens.mjs +10 -11
  8. package/esm2022/lib/types.mjs +1 -1
  9. package/fesm2022/ngxsmk-theme.mjs +59 -53
  10. package/fesm2022/ngxsmk-theme.mjs.map +1 -1
  11. package/lib/color.d.ts.map +1 -1
  12. package/lib/css.d.ts.map +1 -1
  13. package/lib/define-config.d.ts.map +1 -1
  14. package/lib/presets.d.ts +4 -6
  15. package/lib/presets.d.ts.map +1 -1
  16. package/lib/theme.service.d.ts +3 -2
  17. package/lib/theme.service.d.ts.map +1 -1
  18. package/lib/tokens.d.ts +8 -9
  19. package/lib/tokens.d.ts.map +1 -1
  20. package/lib/types.d.ts +6 -0
  21. package/lib/types.d.ts.map +1 -1
  22. package/package.json +11 -1
  23. package/styles/ngxsmk.css +136 -91
  24. package/styles/ngxsmk.emerald.css +132 -87
  25. package/styles/ngxsmk.neutral.css +133 -88
  26. package/styles/ngxsmk.rose.css +135 -90
  27. package/styles/ngxsmk.violet.css +136 -91
  28. package/styles/ngx.css +0 -210
  29. package/styles/ngxsmk.astryx.css +0 -235
package/styles/ngxsmk.astryx.css DELETED
@@ -1,235 +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-control-height: 2.5rem;
29
- --ngxsmk-button-bg: var(--ngxsmk-color-primary);
30
- --ngxsmk-button-color: var(--ngxsmk-color-on-primary);
31
- --ngxsmk-button-font-family: var(--ngxsmk-font-sans);
32
- --ngxsmk-button-font-weight: 500;
33
- --ngxsmk-button-radius: var(--ngxsmk-radius-base);
34
- --ngxsmk-button-disabled-opacity: 0.5;
35
- --ngxsmk-card-bg: var(--ngxsmk-color-surface);
36
- --ngxsmk-card-radius: var(--ngxsmk-radius-xl);
37
- --ngxsmk-card-shadow: var(--ngxsmk-shadow-sm);
38
- --ngxsmk-card-border-color: var(--ngxsmk-color-outline);
39
- --ngxsmk-accordion-bg: var(--ngxsmk-color-surface);
40
- --ngxsmk-accordion-radius: var(--ngxsmk-radius-lg);
41
- --ngxsmk-accordion-border-color: var(--ngxsmk-color-outline);
42
- --ngxsmk-progress-height: 0.5rem;
43
- --ngxsmk-progress-bg: var(--ngxsmk-color-surface-variant);
44
- --ngxsmk-progress-color: var(--ngxsmk-color-primary);
45
- --ngxsmk-progress-radius: var(--ngxsmk-radius-full);
46
- --ngxsmk-switch-width: 2.25rem;
47
- --ngxsmk-switch-height: 1.25rem;
48
- --ngxsmk-switch-radius: var(--ngxsmk-radius-full);
49
- --ngxsmk-switch-bg: var(--ngxsmk-color-outline-strong);
50
- --ngxsmk-switch-thumb-size: 0.875rem;
51
- --ngxsmk-switch-thumb-bg: var(--ngxsmk-color-surface);
52
- --ngxsmk-switch-checked-bg: var(--ngxsmk-color-primary);
53
- --ngxsmk-space-0: 0px;
54
- --ngxsmk-space-1: 0.25rem;
55
- --ngxsmk-space-2: 0.5rem;
56
- --ngxsmk-space-3: 0.75rem;
57
- --ngxsmk-space-4: 1rem;
58
- --ngxsmk-space-5: 1.25rem;
59
- --ngxsmk-space-6: 1.5rem;
60
- --ngxsmk-space-8: 2rem;
61
- --ngxsmk-space-10: 2.5rem;
62
- --ngxsmk-space-12: 3rem;
63
- --ngxsmk-space-16: 4rem;
64
- --ngxsmk-space-20: 5rem;
65
- --ngxsmk-space-24: 6rem;
66
- --ngxsmk-space-32: 8rem;
67
- --ngxsmk-space-0-5: 0.125rem;
68
- --ngxsmk-space-1-5: 0.375rem;
69
- --ngxsmk-radius-none: 0px;
70
- --ngxsmk-radius-sm: 0.25rem;
71
- --ngxsmk-radius-md: 0.5rem;
72
- --ngxsmk-radius-lg: 0.75rem;
73
- --ngxsmk-radius-xl: 1rem;
74
- --ngxsmk-radius-2xl: 1.25rem;
75
- --ngxsmk-radius-3xl: 1.75rem;
76
- --ngxsmk-radius-full: 9999px;
77
- --ngxsmk-shadow-sm: 0 1px 1px rgb(0 0 0 / 0.08), 0 2px 8px rgb(0 0 0 / 0.08);
78
- --ngxsmk-shadow-md: 0 1px 2px rgb(0 0 0 / 0.1), 0 2px 12px rgb(0 0 0 / 0.1);
79
- --ngxsmk-shadow-lg: 0 2px 2px rgb(0 0 0 / 0.1), 0 8px 24px rgb(0 0 0 / 0.12);
80
- --ngxsmk-shadow-xl: 0 4px 6px rgb(0 0 0 / 0.1), 0 12px 32px rgb(0 0 0 / 0.16);
81
- --ngxsmk-shadow-2xl: 0 8px 12px rgb(0 0 0 / 0.14), 0 24px 48px rgb(0 0 0 / 0.22);
82
- --ngxsmk-duration-instant: 0ms;
83
- --ngxsmk-duration-fast: 100ms;
84
- --ngxsmk-duration-normal: 200ms;
85
- --ngxsmk-duration-slow: 300ms;
86
- --ngxsmk-duration-slower: 500ms;
87
- --ngxsmk-ease-linear: linear;
88
- --ngxsmk-ease-in: cubic-bezier(0.4, 0, 1, 1);
89
- --ngxsmk-ease-out: cubic-bezier(0, 0, 0.2, 1);
90
- --ngxsmk-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
91
- --ngxsmk-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
92
- --ngxsmk-z-dropdown: 1000;
93
- --ngxsmk-z-sticky: 1100;
94
- --ngxsmk-z-banner: 1200;
95
- --ngxsmk-z-overlay: 1300;
96
- --ngxsmk-z-modal: 1400;
97
- --ngxsmk-z-popover: 1500;
98
- --ngxsmk-z-toast: 1600;
99
- --ngxsmk-z-tooltip: 1700;
100
- --ngxsmk-text-display-lg-size: 3.5625rem;
101
- --ngxsmk-text-display-lg-line: 4rem;
102
- --ngxsmk-text-display-lg-weight: 700;
103
- --ngxsmk-text-display-md-size: 2.8125rem;
104
- --ngxsmk-text-display-md-line: 3.25rem;
105
- --ngxsmk-text-display-md-weight: 700;
106
- --ngxsmk-text-display-sm-size: 2.25rem;
107
- --ngxsmk-text-display-sm-line: 2.75rem;
108
- --ngxsmk-text-display-sm-weight: 700;
109
- --ngxsmk-text-headline-lg-size: 2rem;
110
- --ngxsmk-text-headline-lg-line: 2.5rem;
111
- --ngxsmk-text-headline-lg-weight: 600;
112
- --ngxsmk-text-headline-md-size: 1.75rem;
113
- --ngxsmk-text-headline-md-line: 2.25rem;
114
- --ngxsmk-text-headline-md-weight: 600;
115
- --ngxsmk-text-headline-sm-size: 1.5rem;
116
- --ngxsmk-text-headline-sm-line: 2rem;
117
- --ngxsmk-text-headline-sm-weight: 600;
118
- --ngxsmk-text-title-lg-size: 1.375rem;
119
- --ngxsmk-text-title-lg-line: 1.75rem;
120
- --ngxsmk-text-title-lg-weight: 600;
121
- --ngxsmk-text-title-md-size: 1.125rem;
122
- --ngxsmk-text-title-md-line: 1.5rem;
123
- --ngxsmk-text-title-md-weight: 600;
124
- --ngxsmk-text-title-sm-size: 1rem;
125
- --ngxsmk-text-title-sm-line: 1.5rem;
126
- --ngxsmk-text-title-sm-weight: 600;
127
- --ngxsmk-text-body-lg-size: 1rem;
128
- --ngxsmk-text-body-lg-line: 1.5rem;
129
- --ngxsmk-text-body-lg-weight: 400;
130
- --ngxsmk-text-body-md-size: 0.875rem;
131
- --ngxsmk-text-body-md-line: 1.25rem;
132
- --ngxsmk-text-body-md-weight: 400;
133
- --ngxsmk-text-body-sm-size: 0.75rem;
134
- --ngxsmk-text-body-sm-line: 1rem;
135
- --ngxsmk-text-body-sm-weight: 400;
136
- --ngxsmk-text-label-lg-size: 0.875rem;
137
- --ngxsmk-text-label-lg-line: 1.25rem;
138
- --ngxsmk-text-label-lg-weight: 500;
139
- --ngxsmk-text-label-md-size: 0.75rem;
140
- --ngxsmk-text-label-md-line: 1rem;
141
- --ngxsmk-text-label-md-weight: 500;
142
- --ngxsmk-text-label-sm-size: 0.6875rem;
143
- --ngxsmk-text-label-sm-line: 1rem;
144
- --ngxsmk-text-label-sm-weight: 500;
145
- --ngxsmk-text-body-xs-size: 0.6875rem;
146
- --ngxsmk-text-body-xs-line: 1rem;
147
- --ngxsmk-text-body-xs-weight: 400;
148
- color-scheme: light;
149
- --ngxsmk-color-primary: #0064E0;
150
- --ngxsmk-color-on-primary: #FFFFFF;
151
- --ngxsmk-color-primary-hover: #0052B7;
152
- --ngxsmk-color-primary-active: #004499;
153
- --ngxsmk-color-primary-container: #CFE3FD;
154
- --ngxsmk-color-on-primary-container: #002C63;
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;
161
- --ngxsmk-color-surface-hover: rgb(5 54 89 / 0.05);
162
- --ngxsmk-color-surface-active: rgb(5 54 89 / 0.1);
163
- --ngxsmk-color-surface-container: #FFFFFF;
164
- --ngxsmk-color-outline: rgb(5 54 89 / 0.1);
165
- --ngxsmk-color-outline-strong: #CCD3DB;
166
- --ngxsmk-color-outline-variant: rgb(5 54 89 / 0.06);
167
- --ngxsmk-color-ring: #0064E0;
168
- --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
169
- --ngxsmk-shadow-focus: 0 0 0 2px #CFE3FD, 0 0 0 4px color-mix(in srgb, #0064E0 45%, transparent);
170
- --ngxsmk-color-tertiary: #AA1FFF;
171
- --ngxsmk-color-on-tertiary: #FFFFFF;
172
- --ngxsmk-color-tertiary-container: #F3E0FF;
173
- --ngxsmk-color-on-tertiary-container: #4F0080;
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;
185
- --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;
190
- }
191
-
192
- :root.dark, :root.dark body, .dark {
193
- color-scheme: dark;
194
- --ngxsmk-color-primary: #2694FE;
195
- --ngxsmk-color-on-primary: #FFFFFF;
196
- --ngxsmk-color-primary-hover: #5CA5FB;
197
- --ngxsmk-color-primary-active: #9AC6FC;
198
- --ngxsmk-color-primary-container: #002C63;
199
- --ngxsmk-color-on-primary-container: #CFE3FD;
200
- --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;
206
- --ngxsmk-color-surface-hover: rgb(255 255 255 / 0.05);
207
- --ngxsmk-color-surface-active: rgb(255 255 255 / 0.1);
208
- --ngxsmk-color-surface-container: #28292C;
209
- --ngxsmk-color-outline: rgb(242 244 246 / 0.1);
210
- --ngxsmk-color-outline-strong: #494D53;
211
- --ngxsmk-color-outline-variant: rgb(242 244 246 / 0.06);
212
- --ngxsmk-color-ring: #2694FE;
213
- --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
214
- --ngxsmk-shadow-focus: 0 0 0 2px color-mix(in srgb, #2694FE 25%, transparent), 0 0 0 4px color-mix(in srgb, #2694FE 45%, transparent);
215
- --ngxsmk-color-tertiary: #BD52FF;
216
- --ngxsmk-color-on-tertiary: #330052;
217
- --ngxsmk-color-tertiary-container: #4F0080;
218
- --ngxsmk-color-on-tertiary-container: #F3E0FF;
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;
232
- --ngxsmk-color-on-info: #002452;
233
- --ngxsmk-color-info-container: #002452;
234
- --ngxsmk-color-on-info-container: #8FC1FF;
235
- }