@ngxsmk/theme 1.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 (12) hide show
  1. package/README.md +41 -0
  2. package/fesm2022/ngxsmk-theme.mjs +678 -0
  3. package/fesm2022/ngxsmk-theme.mjs.map +1 -0
  4. package/package.json +30 -0
  5. package/styles/ngx.css +210 -0
  6. package/styles/ngxsmk.astryx.css +235 -0
  7. package/styles/ngxsmk.css +235 -0
  8. package/styles/ngxsmk.emerald.css +235 -0
  9. package/styles/ngxsmk.neutral.css +235 -0
  10. package/styles/ngxsmk.rose.css +235 -0
  11. package/styles/ngxsmk.violet.css +235 -0
  12. package/types/ngxsmk-theme.d.ts +238 -0
package/styles/ngxsmk.neutral.css ADDED
@@ -0,0 +1,235 @@
1
+ /* Generated by @ngxsmk/theme — do not edit by hand. */
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-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: #18181B;
150
+ --ngxsmk-color-on-primary: #FFFFFF;
151
+ --ngxsmk-color-primary-hover: #050505;
152
+ --ngxsmk-color-primary-active: #000000;
153
+ --ngxsmk-color-primary-container: #F4F4F5;
154
+ --ngxsmk-color-on-primary-container: #18181B;
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: #18181B;
168
+ --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
169
+ --ngxsmk-shadow-focus: 0 0 0 2px #F4F4F5, 0 0 0 4px color-mix(in srgb, #18181B 45%, transparent);
170
+ --ngxsmk-color-tertiary: #958895;
171
+ --ngxsmk-color-on-tertiary: #FFFFFF;
172
+ --ngxsmk-color-tertiary-container: #F1EFF1;
173
+ --ngxsmk-color-on-tertiary-container: #443C44;
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: #FAFAFA;
195
+ --ngxsmk-color-on-primary: #18181B;
196
+ --ngxsmk-color-primary-hover: #E4E4E7;
197
+ --ngxsmk-color-primary-active: #D4D4D8;
198
+ --ngxsmk-color-primary-container: #18181B;
199
+ --ngxsmk-color-on-primary-container: #F4F4F5;
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: #D4D4D8;
213
+ --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
214
+ --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);
215
+ --ngxsmk-color-tertiary: #ADA3AD;
216
+ --ngxsmk-color-on-tertiary: #1B181B;
217
+ --ngxsmk-color-tertiary-container: #443C44;
218
+ --ngxsmk-color-on-tertiary-container: #F1EFF1;
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
+ }
package/styles/ngxsmk.rose.css ADDED
@@ -0,0 +1,235 @@
1
+ /* Generated by @ngxsmk/theme — do not edit by hand. */
2
+ :root {
3
+ --ngxsmk-color-brand-50: #FDF1F4;
4
+ --ngxsmk-color-brand-100: #FCE4E9;
5
+ --ngxsmk-color-brand-200: #F7C4CF;
6
+ --ngxsmk-color-brand-300: #F29CAF;
7
+ --ngxsmk-color-brand-400: #EB6583;
8
+ --ngxsmk-color-brand-500: #E5385E;
9
+ --ngxsmk-color-brand-600: #E11D48;
10
+ --ngxsmk-color-brand-700: #B5173A;
11
+ --ngxsmk-color-brand-800: #91132E;
12
+ --ngxsmk-color-brand-900: #710F24;
13
+ --ngxsmk-color-brand-950: #480917;
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: #E11D48;
150
+ --ngxsmk-color-on-primary: #FFFFFF;
151
+ --ngxsmk-color-primary-hover: #BD183C;
152
+ --ngxsmk-color-primary-active: #A21534;
153
+ --ngxsmk-color-primary-container: #FCE4E9;
154
+ --ngxsmk-color-on-primary-container: #710F24;
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: #E11D48;
168
+ --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
169
+ --ngxsmk-shadow-focus: 0 0 0 2px #FCE4E9, 0 0 0 4px color-mix(in srgb, #E11D48 45%, transparent);
170
+ --ngxsmk-color-tertiary: #E5CB38;
171
+ --ngxsmk-color-on-tertiary: #FFFFFF;
172
+ --ngxsmk-color-tertiary-container: #FCF8E4;
173
+ --ngxsmk-color-on-tertiary-container: #71620F;
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: #EB6583;
195
+ --ngxsmk-color-on-primary: #FFFFFF;
196
+ --ngxsmk-color-primary-hover: #F29CAF;
197
+ --ngxsmk-color-primary-active: #F7C4CF;
198
+ --ngxsmk-color-primary-container: #710F24;
199
+ --ngxsmk-color-on-primary-container: #FCE4E9;
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: #EB6583;
213
+ --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
214
+ --ngxsmk-shadow-focus: 0 0 0 2px color-mix(in srgb, #EB6583 25%, transparent), 0 0 0 4px color-mix(in srgb, #EB6583 45%, transparent);
215
+ --ngxsmk-color-tertiary: #EBD765;
216
+ --ngxsmk-color-on-tertiary: #483F09;
217
+ --ngxsmk-color-tertiary-container: #71620F;
218
+ --ngxsmk-color-on-tertiary-container: #FCF8E4;
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
+ }