@ngxsmk/theme 1.3.2 → 3.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.
- package/README.md +13 -1
- package/esm2022/lib/css.mjs +128 -30
- package/esm2022/lib/ionic-provider.mjs +30 -0
- package/esm2022/lib/theme-injector.service.mjs +92 -0
- package/esm2022/lib/theme.service.mjs +19 -20
- package/esm2022/lib/token-adapter.mjs +185 -0
- package/esm2022/lib/tokens.mjs +25 -2
- package/esm2022/public-api.mjs +4 -1
- package/fesm2022/ngxsmk-theme.mjs +466 -49
- package/fesm2022/ngxsmk-theme.mjs.map +1 -1
- package/lib/css.d.ts.map +1 -1
- package/lib/ionic-provider.d.ts +18 -0
- package/lib/ionic-provider.d.ts.map +1 -0
- package/lib/theme-injector.service.d.ts +37 -0
- package/lib/theme-injector.service.d.ts.map +1 -0
- package/lib/theme.service.d.ts +12 -6
- package/lib/theme.service.d.ts.map +1 -1
- package/lib/token-adapter.d.ts +28 -0
- package/lib/token-adapter.d.ts.map +1 -0
- package/lib/tokens.d.ts +13 -0
- package/lib/tokens.d.ts.map +1 -1
- package/package.json +34 -14
- package/public-api.d.ts +3 -0
- package/public-api.d.ts.map +1 -1
- package/styles/ngxsmk.css +77 -1
- package/styles/ngxsmk.emerald.css +77 -1
- package/styles/ngxsmk.neutral.css +77 -1
- package/styles/ngxsmk.rose.css +77 -1
- package/styles/ngxsmk.violet.css +77 -1
- package/tailwind-v4.css +234 -0
package/styles/ngxsmk.violet.css
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
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
|
-
--ngxsmk-font-mono: '
|
|
37
|
+
--ngxsmk-font-mono: 'Geist Mono', 'Geist Mono Fallback', monospace;
|
|
38
38
|
--ngxsmk-radius-base: 0.5rem;
|
|
39
39
|
--ngxsmk-control-height: 2.5rem;
|
|
40
40
|
--ngxsmk-motion-duration: var(--ngxsmk-duration-normal);
|
|
@@ -43,6 +43,11 @@
|
|
|
43
43
|
--ngxsmk-press-scale: scale(0.98);
|
|
44
44
|
--ngxsmk-focus-ring: var(--ngxsmk-shadow-focus);
|
|
45
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);
|
|
46
|
+
--ngxsmk-safe-area-top: env(safe-area-inset-top, 0px);
|
|
47
|
+
--ngxsmk-safe-area-bottom: env(safe-area-inset-bottom, 0px);
|
|
48
|
+
--ngxsmk-safe-area-left: env(safe-area-inset-left, 0px);
|
|
49
|
+
--ngxsmk-safe-area-right: env(safe-area-inset-right, 0px);
|
|
50
|
+
--ngxsmk-touch-target-min: 44px;
|
|
46
51
|
--ngxsmk-button-bg: var(--ngxsmk-color-primary);
|
|
47
52
|
--ngxsmk-button-color: var(--ngxsmk-color-on-primary);
|
|
48
53
|
--ngxsmk-button-font-family: var(--ngxsmk-font-sans);
|
|
@@ -67,6 +72,43 @@
|
|
|
67
72
|
--ngxsmk-switch-thumb-size: 0.875rem;
|
|
68
73
|
--ngxsmk-switch-thumb-bg: var(--ngxsmk-color-surface);
|
|
69
74
|
--ngxsmk-switch-checked-bg: var(--ngxsmk-color-primary);
|
|
75
|
+
--ngxsmk-spreadsheet-bg: var(--ngxsmk-color-surface);
|
|
76
|
+
--ngxsmk-spreadsheet-header-bg: var(--ngxsmk-color-surface-variant);
|
|
77
|
+
--ngxsmk-spreadsheet-header-color: var(--ngxsmk-color-on-surface-variant);
|
|
78
|
+
--ngxsmk-spreadsheet-border: var(--ngxsmk-color-outline);
|
|
79
|
+
--ngxsmk-spreadsheet-grid-color: var(--ngxsmk-color-outline-variant);
|
|
80
|
+
--ngxsmk-spreadsheet-hover-bg: var(--ngxsmk-color-surface-hover);
|
|
81
|
+
--ngxsmk-spreadsheet-selected-bg: color-mix(in srgb, var(--ngxsmk-color-primary) 12%, transparent);
|
|
82
|
+
--ngxsmk-spreadsheet-active-border: var(--ngxsmk-color-primary);
|
|
83
|
+
--ngxsmk-spreadsheet-font: var(--ngxsmk-font-sans);
|
|
84
|
+
--ngxsmk-spreadsheet-font-mono: var(--ngxsmk-font-mono);
|
|
85
|
+
--ngxsmk-spreadsheet-row-height: 2.25rem;
|
|
86
|
+
--ngxsmk-spreadsheet-header-height: 2.5rem;
|
|
87
|
+
--ngxsmk-spreadsheet-cell-padding: 6px 10px;
|
|
88
|
+
--ngxsmk-spreadsheet-cell-font-size: var(--ngxsmk-text-body-sm-size);
|
|
89
|
+
--ngxsmk-spreadsheet-scrollbar-size: 8px;
|
|
90
|
+
--ngxsmk-spreadsheet-shadow: var(--ngxsmk-shadow-sm);
|
|
91
|
+
--ngxsmk-spreadsheet-radius: var(--ngxsmk-radius-lg);
|
|
92
|
+
--ngxsmk-spreadsheet-edit-bg: var(--ngxsmk-color-surface);
|
|
93
|
+
--ngxsmk-spreadsheet-edit-border: var(--ngxsmk-color-primary);
|
|
94
|
+
--ngxsmk-spreadsheet-row-hover-bg: var(--ngxsmk-color-surface-hover);
|
|
95
|
+
--ngxsmk-spreadsheet-col-hover-bg: color-mix(in srgb, var(--ngxsmk-color-primary) 6%, transparent);
|
|
96
|
+
--ngxsmk-spreadsheet-frozen-shadow: 2px 0 4px rgba(0,0,0,0.08);
|
|
97
|
+
--ngxsmk-spreadsheet-selection-range: color-mix(in srgb, var(--ngxsmk-color-primary) 8%, transparent);
|
|
98
|
+
--ngxsmk-input-group-bg: var(--ngxsmk-color-surface);
|
|
99
|
+
--ngxsmk-input-group-border: var(--ngxsmk-color-outline-strong);
|
|
100
|
+
--ngxsmk-input-group-radius: var(--ngxsmk-radius-md);
|
|
101
|
+
--ngxsmk-input-group-shadow: none;
|
|
102
|
+
--ngxsmk-input-group-focus-border: var(--ngxsmk-color-primary);
|
|
103
|
+
--ngxsmk-input-group-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-primary) 15%, transparent);
|
|
104
|
+
--ngxsmk-input-group-error-border: var(--ngxsmk-color-error);
|
|
105
|
+
--ngxsmk-input-group-error-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ngxsmk-color-error) 15%, transparent);
|
|
106
|
+
--ngxsmk-input-group-success-border: var(--ngxsmk-color-success);
|
|
107
|
+
--ngxsmk-input-group-warning-border: var(--ngxsmk-color-warning);
|
|
108
|
+
--ngxsmk-input-group-height: 2.5rem;
|
|
109
|
+
--ngxsmk-input-group-padding: 0.75rem;
|
|
110
|
+
--ngxsmk-input-group-gap: var(--ngxsmk-space-2);
|
|
111
|
+
--ngxsmk-input-group-font: var(--ngxsmk-font-sans);
|
|
70
112
|
--ngxsmk-control-height-sm: 2rem;
|
|
71
113
|
--ngxsmk-control-height-md: 2.5rem;
|
|
72
114
|
--ngxsmk-control-height-lg: 3rem;
|
|
@@ -79,6 +121,14 @@
|
|
|
79
121
|
--ngxsmk-tracking-tight: -0.02em;
|
|
80
122
|
--ngxsmk-tracking-normal: 0;
|
|
81
123
|
--ngxsmk-tracking-wide: 0.08em;
|
|
124
|
+
--ngxsmk-font-weight-regular: 400;
|
|
125
|
+
--ngxsmk-font-weight-medium: 500;
|
|
126
|
+
--ngxsmk-font-weight-semibold: 600;
|
|
127
|
+
--ngxsmk-font-weight-bold: 700;
|
|
128
|
+
--ngxsmk-leading-none: 1;
|
|
129
|
+
--ngxsmk-leading-tight: 1.25;
|
|
130
|
+
--ngxsmk-leading-normal: 1.5;
|
|
131
|
+
--ngxsmk-leading-relaxed: 1.625;
|
|
82
132
|
--ngxsmk-space-0: 0px;
|
|
83
133
|
--ngxsmk-space-1: 0.25rem;
|
|
84
134
|
--ngxsmk-space-2: 0.5rem;
|
|
@@ -193,12 +243,17 @@
|
|
|
193
243
|
--ngxsmk-color-on-surface: #0A1317;
|
|
194
244
|
--ngxsmk-color-surface-variant: #E4E9EE;
|
|
195
245
|
--ngxsmk-color-on-surface-variant: #4E606F;
|
|
246
|
+
--ngxsmk-color-surface-muted: #F1F4F7;
|
|
247
|
+
--ngxsmk-color-surface-elevated: #FFFFFF;
|
|
248
|
+
--ngxsmk-color-surface-overlay: #FFFFFF;
|
|
249
|
+
--ngxsmk-color-on-surface-muted: #778593;
|
|
196
250
|
--ngxsmk-color-surface-hover: rgb(5 54 89 / 0.05);
|
|
197
251
|
--ngxsmk-color-surface-active: rgb(5 54 89 / 0.1);
|
|
198
252
|
--ngxsmk-color-surface-container: #FFFFFF;
|
|
199
253
|
--ngxsmk-color-outline: rgb(5 54 89 / 0.1);
|
|
200
254
|
--ngxsmk-color-outline-strong: #CCD3DB;
|
|
201
255
|
--ngxsmk-color-outline-variant: rgb(5 54 89 / 0.06);
|
|
256
|
+
--ngxsmk-color-outline-subtle: rgb(5 54 89 / 0.05);
|
|
202
257
|
--ngxsmk-color-surface-1: #FFFFFF;
|
|
203
258
|
--ngxsmk-color-surface-2: #F1F4F7;
|
|
204
259
|
--ngxsmk-color-surface-3: #E4E9EE;
|
|
@@ -207,6 +262,14 @@
|
|
|
207
262
|
--ngxsmk-color-ring: #7C3AED;
|
|
208
263
|
--ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
|
|
209
264
|
--ngxsmk-shadow-focus: 0 0 0 2px #ECE6FF, 0 0 0 4px color-mix(in srgb, #7C3AED 45%, transparent);
|
|
265
|
+
--ngxsmk-chart-1: #2A78D6;
|
|
266
|
+
--ngxsmk-chart-2: #1BAF7A;
|
|
267
|
+
--ngxsmk-chart-3: #EDA100;
|
|
268
|
+
--ngxsmk-chart-4: #008300;
|
|
269
|
+
--ngxsmk-chart-5: #4A3AA7;
|
|
270
|
+
--ngxsmk-chart-6: #E34948;
|
|
271
|
+
--ngxsmk-chart-7: #E87BA4;
|
|
272
|
+
--ngxsmk-chart-8: #EB6834;
|
|
210
273
|
--ngxsmk-color-tertiary: #D00071;
|
|
211
274
|
--ngxsmk-color-on-tertiary: #FFFFFF;
|
|
212
275
|
--ngxsmk-color-tertiary-container: #FFE0EB;
|
|
@@ -249,12 +312,17 @@
|
|
|
249
312
|
--ngxsmk-color-on-surface: #DFE2E5;
|
|
250
313
|
--ngxsmk-color-surface-variant: #28292C;
|
|
251
314
|
--ngxsmk-color-on-surface-variant: #AAAFB5;
|
|
315
|
+
--ngxsmk-color-surface-muted: #141416;
|
|
316
|
+
--ngxsmk-color-surface-elevated: #28292C;
|
|
317
|
+
--ngxsmk-color-surface-overlay: #2F3136;
|
|
318
|
+
--ngxsmk-color-on-surface-muted: #777C85;
|
|
252
319
|
--ngxsmk-color-surface-hover: rgb(255 255 255 / 0.05);
|
|
253
320
|
--ngxsmk-color-surface-active: rgb(255 255 255 / 0.1);
|
|
254
321
|
--ngxsmk-color-surface-container: #28292C;
|
|
255
322
|
--ngxsmk-color-outline: rgb(242 244 246 / 0.1);
|
|
256
323
|
--ngxsmk-color-outline-strong: #494D53;
|
|
257
324
|
--ngxsmk-color-outline-variant: rgb(242 244 246 / 0.06);
|
|
325
|
+
--ngxsmk-color-outline-subtle: rgb(242 244 246 / 0.05);
|
|
258
326
|
--ngxsmk-color-surface-1: #1F1F22;
|
|
259
327
|
--ngxsmk-color-surface-2: #2A333B;
|
|
260
328
|
--ngxsmk-color-surface-3: #3A4650;
|
|
@@ -263,6 +331,14 @@
|
|
|
263
331
|
--ngxsmk-color-ring: #9B6EFF;
|
|
264
332
|
--ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
|
|
265
333
|
--ngxsmk-shadow-focus: 0 0 0 2px color-mix(in srgb, #9B6EFF 25%, transparent), 0 0 0 4px color-mix(in srgb, #9B6EFF 45%, transparent);
|
|
334
|
+
--ngxsmk-chart-1: #3987E5;
|
|
335
|
+
--ngxsmk-chart-2: #199E70;
|
|
336
|
+
--ngxsmk-chart-3: #C98500;
|
|
337
|
+
--ngxsmk-chart-4: #008300;
|
|
338
|
+
--ngxsmk-chart-5: #9085E9;
|
|
339
|
+
--ngxsmk-chart-6: #E66767;
|
|
340
|
+
--ngxsmk-chart-7: #D55181;
|
|
341
|
+
--ngxsmk-chart-8: #D95926;
|
|
266
342
|
--ngxsmk-color-tertiary: #EB5090;
|
|
267
343
|
--ngxsmk-color-on-tertiary: #2B000C;
|
|
268
344
|
--ngxsmk-color-tertiary-container: #530020;
|
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
|
+
}
|