@ngxsmk/theme 1.3.2 → 2.0.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 (27) hide show
  1. package/README.md +12 -0
  2. package/esm2022/lib/css.mjs +112 -30
  3. package/esm2022/lib/theme-injector.service.mjs +81 -0
  4. package/esm2022/lib/theme.service.mjs +19 -20
  5. package/esm2022/lib/token-adapter.mjs +80 -0
  6. package/esm2022/lib/tokens.mjs +16 -2
  7. package/esm2022/public-api.mjs +3 -1
  8. package/fesm2022/ngxsmk-theme.mjs +298 -49
  9. package/fesm2022/ngxsmk-theme.mjs.map +1 -1
  10. package/lib/css.d.ts.map +1 -1
  11. package/lib/theme-injector.service.d.ts +37 -0
  12. package/lib/theme-injector.service.d.ts.map +1 -0
  13. package/lib/theme.service.d.ts +12 -6
  14. package/lib/theme.service.d.ts.map +1 -1
  15. package/lib/token-adapter.d.ts +26 -0
  16. package/lib/token-adapter.d.ts.map +1 -0
  17. package/lib/tokens.d.ts +4 -0
  18. package/lib/tokens.d.ts.map +1 -1
  19. package/package.json +29 -13
  20. package/public-api.d.ts +2 -0
  21. package/public-api.d.ts.map +1 -1
  22. package/styles/ngxsmk.css +62 -1
  23. package/styles/ngxsmk.emerald.css +62 -1
  24. package/styles/ngxsmk.neutral.css +62 -1
  25. package/styles/ngxsmk.rose.css +62 -1
  26. package/styles/ngxsmk.violet.css +62 -1
  27. package/tailwind-v4.css +234 -0
package/tailwind-v4.css ADDED
@@ -0,0 +1,234 @@
1
+ /*
2
+ * Tailwind CSS v4 theme for NGXSMK.
3
+ *
4
+ * Usage:
5
+ * ```css
6
+ * @import "tailwindcss";
7
+ * @import "@ngxsmk/theme/tailwind/v4.css";
8
+ * ```
9
+ */
10
+ @import 'tailwindcss';
11
+
12
+ @theme {
13
+ /* ── Colors ────────────────────────────────────────────── */
14
+ --color-primary: var(--ngxsmk-color-primary);
15
+ --color-primary-hover: var(--ngxsmk-color-primary-hover);
16
+ --color-primary-active: var(--ngxsmk-color-primary-active);
17
+ --color-primary-container: var(--ngxsmk-color-primary-container);
18
+ --color-on-primary: var(--ngxsmk-color-on-primary);
19
+ --color-on-primary-container: var(--ngxsmk-color-on-primary-container);
20
+
21
+ --color-primary-50: var(--ngxsmk-color-brand-50);
22
+ --color-primary-100: var(--ngxsmk-color-brand-100);
23
+ --color-primary-200: var(--ngxsmk-color-brand-200);
24
+ --color-primary-300: var(--ngxsmk-color-brand-300);
25
+ --color-primary-400: var(--ngxsmk-color-brand-400);
26
+ --color-primary-500: var(--ngxsmk-color-brand-500);
27
+ --color-primary-600: var(--ngxsmk-color-brand-600);
28
+ --color-primary-700: var(--ngxsmk-color-brand-700);
29
+ --color-primary-800: var(--ngxsmk-color-brand-800);
30
+ --color-primary-900: var(--ngxsmk-color-brand-900);
31
+ --color-primary-950: var(--ngxsmk-color-brand-950);
32
+
33
+ --color-secondary: var(--ngxsmk-color-secondary);
34
+ --color-secondary-hover: var(--ngxsmk-color-secondary-hover);
35
+ --color-secondary-active: var(--ngxsmk-color-secondary-active);
36
+ --color-secondary-container: var(--ngxsmk-color-secondary-container);
37
+ --color-on-secondary: var(--ngxsmk-color-on-secondary);
38
+ --color-on-secondary-container: var(--ngxsmk-color-on-secondary-container);
39
+
40
+ --color-secondary-50: var(--ngxsmk-color-secondary-50);
41
+ --color-secondary-100: var(--ngxsmk-color-secondary-100);
42
+ --color-secondary-200: var(--ngxsmk-color-secondary-200);
43
+ --color-secondary-300: var(--ngxsmk-color-secondary-300);
44
+ --color-secondary-400: var(--ngxsmk-color-secondary-400);
45
+ --color-secondary-500: var(--ngxsmk-color-secondary-500);
46
+ --color-secondary-600: var(--ngxsmk-color-secondary-600);
47
+ --color-secondary-700: var(--ngxsmk-color-secondary-700);
48
+ --color-secondary-800: var(--ngxsmk-color-secondary-800);
49
+ --color-secondary-900: var(--ngxsmk-color-secondary-900);
50
+ --color-secondary-950: var(--ngxsmk-color-secondary-950);
51
+
52
+ --color-tertiary: var(--ngxsmk-color-tertiary);
53
+ --color-tertiary-container: var(--ngxsmk-color-tertiary-container);
54
+ --color-on-tertiary: var(--ngxsmk-color-on-tertiary);
55
+ --color-on-tertiary-container: var(--ngxsmk-color-on-tertiary-container);
56
+
57
+ --color-neutral-50: var(--ngxsmk-color-neutral-50);
58
+ --color-neutral-100: var(--ngxsmk-color-neutral-100);
59
+ --color-neutral-200: var(--ngxsmk-color-neutral-200);
60
+ --color-neutral-300: var(--ngxsmk-color-neutral-300);
61
+ --color-neutral-400: var(--ngxsmk-color-neutral-400);
62
+ --color-neutral-500: var(--ngxsmk-color-neutral-500);
63
+ --color-neutral-600: var(--ngxsmk-color-neutral-600);
64
+ --color-neutral-700: var(--ngxsmk-color-neutral-700);
65
+ --color-neutral-800: var(--ngxsmk-color-neutral-800);
66
+ --color-neutral-900: var(--ngxsmk-color-neutral-900);
67
+ --color-neutral-950: var(--ngxsmk-color-neutral-950);
68
+
69
+ --color-background: var(--ngxsmk-color-background);
70
+ --color-on-background: var(--ngxsmk-color-on-background);
71
+ --color-surface: var(--ngxsmk-color-surface);
72
+ --color-surface-variant: var(--ngxsmk-color-surface-variant);
73
+ --color-surface-hover: var(--ngxsmk-color-surface-hover);
74
+ --color-surface-active: var(--ngxsmk-color-surface-active);
75
+ --color-surface-container: var(--ngxsmk-color-surface-container);
76
+ --color-surface-1: var(--ngxsmk-color-surface-1);
77
+ --color-surface-2: var(--ngxsmk-color-surface-2);
78
+ --color-surface-3: var(--ngxsmk-color-surface-3);
79
+ --color-surface-4: var(--ngxsmk-color-surface-4);
80
+ --color-surface-5: var(--ngxsmk-color-surface-5);
81
+ --color-on-surface: var(--ngxsmk-color-on-surface);
82
+ --color-on-surface-variant: var(--ngxsmk-color-on-surface-variant);
83
+ --color-outline: var(--ngxsmk-color-outline);
84
+ --color-outline-strong: var(--ngxsmk-color-outline-strong);
85
+ --color-outline-variant: var(--ngxsmk-color-outline-variant);
86
+ --color-ring: var(--ngxsmk-color-ring);
87
+ --color-backdrop: var(--ngxsmk-color-backdrop);
88
+
89
+ --color-error: var(--ngxsmk-color-error);
90
+ --color-error-container: var(--ngxsmk-color-error-container);
91
+ --color-on-error: var(--ngxsmk-color-on-error);
92
+ --color-on-error-container: var(--ngxsmk-color-on-error-container);
93
+ --color-success: var(--ngxsmk-color-success);
94
+ --color-success-container: var(--ngxsmk-color-success-container);
95
+ --color-on-success: var(--ngxsmk-color-on-success);
96
+ --color-on-success-container: var(--ngxsmk-color-on-success-container);
97
+ --color-warning: var(--ngxsmk-color-warning);
98
+ --color-warning-container: var(--ngxsmk-color-warning-container);
99
+ --color-on-warning: var(--ngxsmk-color-on-warning);
100
+ --color-on-warning-container: var(--ngxsmk-color-on-warning-container);
101
+ --color-info: var(--ngxsmk-color-info);
102
+ --color-info-container: var(--ngxsmk-color-info-container);
103
+ --color-on-info: var(--ngxsmk-color-on-info);
104
+ --color-on-info-container: var(--ngxsmk-color-on-info-container);
105
+
106
+ --color-chart-1: var(--ngxsmk-chart-1);
107
+ --color-chart-2: var(--ngxsmk-chart-2);
108
+ --color-chart-3: var(--ngxsmk-chart-3);
109
+ --color-chart-4: var(--ngxsmk-chart-4);
110
+ --color-chart-5: var(--ngxsmk-chart-5);
111
+ --color-chart-6: var(--ngxsmk-chart-6);
112
+ --color-chart-7: var(--ngxsmk-chart-7);
113
+ --color-chart-8: var(--ngxsmk-chart-8);
114
+
115
+ /* ── Border Radius ─────────────────────────────────────── */
116
+ --radius-none: var(--ngxsmk-radius-none);
117
+ --radius-sm: var(--ngxsmk-radius-sm);
118
+ --radius-md: var(--ngxsmk-radius-md);
119
+ --radius-lg: var(--ngxsmk-radius-lg);
120
+ --radius-xl: var(--ngxsmk-radius-xl);
121
+ --radius-2xl: var(--ngxsmk-radius-2xl);
122
+ --radius-3xl: var(--ngxsmk-radius-3xl);
123
+ --radius-full: var(--ngxsmk-radius-full);
124
+
125
+ /* ── Spacing ───────────────────────────────────────────── */
126
+ --spacing-ngxsmk-0: var(--ngxsmk-space-0);
127
+ --spacing-ngxsmk-0-5: var(--ngxsmk-space-0-5);
128
+ --spacing-ngxsmk-1: var(--ngxsmk-space-1);
129
+ --spacing-ngxsmk-1-5: var(--ngxsmk-space-1-5);
130
+ --spacing-ngxsmk-2: var(--ngxsmk-space-2);
131
+ --spacing-ngxsmk-3: var(--ngxsmk-space-3);
132
+ --spacing-ngxsmk-4: var(--ngxsmk-space-4);
133
+ --spacing-ngxsmk-5: var(--ngxsmk-space-5);
134
+ --spacing-ngxsmk-6: var(--ngxsmk-space-6);
135
+ --spacing-ngxsmk-8: var(--ngxsmk-space-8);
136
+ --spacing-ngxsmk-10: var(--ngxsmk-space-10);
137
+ --spacing-ngxsmk-12: var(--ngxsmk-space-12);
138
+ --spacing-ngxsmk-16: var(--ngxsmk-space-16);
139
+ --spacing-ngxsmk-20: var(--ngxsmk-space-20);
140
+ --spacing-ngxsmk-24: var(--ngxsmk-space-24);
141
+ --spacing-ngxsmk-32: var(--ngxsmk-space-32);
142
+
143
+ /* ── Shadows ───────────────────────────────────────────── */
144
+ --shadow-sm: var(--ngxsmk-shadow-sm);
145
+ --shadow-md: var(--ngxsmk-shadow-md);
146
+ --shadow-lg: var(--ngxsmk-shadow-lg);
147
+ --shadow-xl: var(--ngxsmk-shadow-xl);
148
+ --shadow-2xl: var(--ngxsmk-shadow-2xl);
149
+
150
+ /* ── Fonts ─────────────────────────────────────────────── */
151
+ --font-sans: var(--ngxsmk-font-sans);
152
+ --font-mono: var(--ngxsmk-font-mono);
153
+
154
+ /* ── Font Sizes (typography roles) ─────────────────────── */
155
+ --text-display-lg: var(--ngxsmk-text-display-lg-size);
156
+ --text-display-md: var(--ngxsmk-text-display-md-size);
157
+ --text-display-sm: var(--ngxsmk-text-display-sm-size);
158
+ --text-headline-lg: var(--ngxsmk-text-headline-lg-size);
159
+ --text-headline-md: var(--ngxsmk-text-headline-md-size);
160
+ --text-headline-sm: var(--ngxsmk-text-headline-sm-size);
161
+ --text-title-lg: var(--ngxsmk-text-title-lg-size);
162
+ --text-title-md: var(--ngxsmk-text-title-md-size);
163
+ --text-title-sm: var(--ngxsmk-text-title-sm-size);
164
+ --text-body-lg: var(--ngxsmk-text-body-lg-size);
165
+ --text-body-md: var(--ngxsmk-text-body-md-size);
166
+ --text-body-sm: var(--ngxsmk-text-body-sm-size);
167
+ --text-body-xs: var(--ngxsmk-text-body-xs-size);
168
+ --text-label-lg: var(--ngxsmk-text-label-lg-size);
169
+ --text-label-md: var(--ngxsmk-text-label-md-size);
170
+ --text-label-sm: var(--ngxsmk-text-label-sm-size);
171
+
172
+ /* ── Line Heights ──────────────────────────────────────── */
173
+ --leading-display-lg: var(--ngxsmk-text-display-lg-line);
174
+ --leading-display-md: var(--ngxsmk-text-display-md-line);
175
+ --leading-display-sm: var(--ngxsmk-text-display-sm-line);
176
+ --leading-headline-lg: var(--ngxsmk-text-headline-lg-line);
177
+ --leading-headline-md: var(--ngxsmk-text-headline-md-line);
178
+ --leading-headline-sm: var(--ngxsmk-text-headline-sm-line);
179
+ --leading-title-lg: var(--ngxsmk-text-title-lg-line);
180
+ --leading-title-md: var(--ngxsmk-text-title-md-line);
181
+ --leading-title-sm: var(--ngxsmk-text-title-sm-line);
182
+ --leading-body-lg: var(--ngxsmk-text-body-lg-line);
183
+ --leading-body-md: var(--ngxsmk-text-body-md-line);
184
+ --leading-body-sm: var(--ngxsmk-text-body-sm-line);
185
+ --leading-body-xs: var(--ngxsmk-text-body-xs-line);
186
+ --leading-label-lg: var(--ngxsmk-text-label-lg-line);
187
+ --leading-label-md: var(--ngxsmk-text-label-md-line);
188
+ --leading-label-sm: var(--ngxsmk-text-label-sm-line);
189
+
190
+ /* ── Font Weights ──────────────────────────────────────── */
191
+ --font-weight-display-lg: var(--ngxsmk-text-display-lg-weight);
192
+ --font-weight-display-md: var(--ngxsmk-text-display-md-weight);
193
+ --font-weight-display-sm: var(--ngxsmk-text-display-sm-weight);
194
+ --font-weight-headline-lg: var(--ngxsmk-text-headline-lg-weight);
195
+ --font-weight-headline-md: var(--ngxsmk-text-headline-md-weight);
196
+ --font-weight-headline-sm: var(--ngxsmk-text-headline-sm-weight);
197
+ --font-weight-title-lg: var(--ngxsmk-text-title-lg-weight);
198
+ --font-weight-title-md: var(--ngxsmk-text-title-md-weight);
199
+ --font-weight-title-sm: var(--ngxsmk-text-title-sm-weight);
200
+ --font-weight-body-lg: var(--ngxsmk-text-body-lg-weight);
201
+ --font-weight-body-md: var(--ngxsmk-text-body-md-weight);
202
+ --font-weight-body-sm: var(--ngxsmk-text-body-sm-weight);
203
+ --font-weight-body-xs: var(--ngxsmk-text-body-xs-weight);
204
+ --font-weight-label-lg: var(--ngxsmk-text-label-lg-weight);
205
+ --font-weight-label-md: var(--ngxsmk-text-label-md-weight);
206
+ --font-weight-label-sm: var(--ngxsmk-text-label-sm-weight);
207
+
208
+ /* ── Transitions ───────────────────────────────────────── */
209
+ --duration-instant: var(--ngxsmk-duration-instant);
210
+ --duration-fast: var(--ngxsmk-duration-fast);
211
+ --duration-normal: var(--ngxsmk-duration-normal);
212
+ --duration-slow: var(--ngxsmk-duration-slow);
213
+ --duration-slower: var(--ngxsmk-duration-slower);
214
+ --ease-linear: var(--ngxsmk-ease-linear);
215
+ --ease-in: var(--ngxsmk-ease-in);
216
+ --ease-out: var(--ngxsmk-ease-out);
217
+ --ease-in-out: var(--ngxsmk-ease-in-out);
218
+ --ease-emphasized: var(--ngxsmk-ease-emphasized);
219
+
220
+ /* ── Z-Index ───────────────────────────────────────────── */
221
+ --z-dropdown: var(--ngxsmk-z-dropdown);
222
+ --z-sticky: var(--ngxsmk-z-sticky);
223
+ --z-banner: var(--ngxsmk-z-banner);
224
+ --z-overlay: var(--ngxsmk-z-overlay);
225
+ --z-modal: var(--ngxsmk-z-modal);
226
+ --z-popover: var(--ngxsmk-z-popover);
227
+ --z-toast: var(--ngxsmk-z-toast);
228
+ --z-tooltip: var(--ngxsmk-z-tooltip);
229
+
230
+ /* ── Opacity ───────────────────────────────────────────── */
231
+ --opacity-disabled: var(--ngxsmk-opacity-disabled);
232
+ --opacity-muted: var(--ngxsmk-opacity-muted);
233
+ --opacity-faint: var(--ngxsmk-opacity-faint);
234
+ }