@ngxsmk/theme 1.3.1 → 1.3.2

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 +1 -1
  2. package/esm2022/lib/color.mjs +73 -76
  3. package/fesm2022/ngxsmk-theme.mjs +73 -76
  4. package/fesm2022/ngxsmk-theme.mjs.map +1 -1
  5. package/lib/color.d.ts +9 -15
  6. package/lib/color.d.ts.map +1 -1
  7. package/package.json +10 -1
  8. package/styles/ngxsmk.css +75 -75
  9. package/styles/ngxsmk.emerald.css +75 -75
  10. package/styles/ngxsmk.neutral.css +52 -52
  11. package/styles/ngxsmk.rose.css +75 -75
  12. package/styles/ngxsmk.violet.css +74 -74
package/styles/ngxsmk.emerald.css CHANGED
@@ -1,27 +1,27 @@
1
1
  /* Generated by @ngxsmk/theme — do not edit by hand. */
2
2
  :root {
3
- --ngxsmk-color-brand-50: #F0FFFA;
4
- --ngxsmk-color-brand-100: #E1FEF5;
5
- --ngxsmk-color-brand-200: #BFFDEA;
6
- --ngxsmk-color-brand-300: #92FBDB;
7
- --ngxsmk-color-brand-400: #57F9C7;
8
- --ngxsmk-color-brand-500: #26F8B7;
9
- --ngxsmk-color-brand-600: #08EDA6;
10
- --ngxsmk-color-brand-700: #07C58A;
11
- --ngxsmk-color-brand-800: #059669;
12
- --ngxsmk-color-brand-900: #047B56;
13
- --ngxsmk-color-brand-950: #034F37;
14
- --ngxsmk-color-secondary-50: #F0F5FF;
15
- --ngxsmk-color-secondary-100: #E1EAFE;
16
- --ngxsmk-color-secondary-200: #BFD2FD;
17
- --ngxsmk-color-secondary-300: #92B3FB;
18
- --ngxsmk-color-secondary-400: #578AF9;
19
- --ngxsmk-color-secondary-500: #2667F8;
20
- --ngxsmk-color-secondary-600: #084FED;
21
- --ngxsmk-color-secondary-700: #0742C5;
22
- --ngxsmk-color-secondary-800: #053296;
23
- --ngxsmk-color-secondary-900: #04297B;
24
- --ngxsmk-color-secondary-950: #031A4F;
3
+ --ngxsmk-color-brand-50: #EEF8F3;
4
+ --ngxsmk-color-brand-100: #DEF1E7;
5
+ --ngxsmk-color-brand-200: #B7DFCB;
6
+ --ngxsmk-color-brand-300: #86C8A9;
7
+ --ngxsmk-color-brand-400: #45A77F;
8
+ --ngxsmk-color-brand-500: #059669;
9
+ --ngxsmk-color-brand-600: #007348;
10
+ --ngxsmk-color-brand-700: #005A34;
11
+ --ngxsmk-color-brand-800: #004222;
12
+ --ngxsmk-color-brand-900: #002E14;
13
+ --ngxsmk-color-brand-950: #001406;
14
+ --ngxsmk-color-secondary-50: #EEF7FB;
15
+ --ngxsmk-color-secondary-100: #DDEFF7;
16
+ --ngxsmk-color-secondary-200: #B5DBEC;
17
+ --ngxsmk-color-secondary-300: #83C2DC;
18
+ --ngxsmk-color-secondary-400: #419FC2;
19
+ --ngxsmk-color-secondary-500: #008EB6;
20
+ --ngxsmk-color-secondary-600: #00698F;
21
+ --ngxsmk-color-secondary-700: #005175;
22
+ --ngxsmk-color-secondary-800: #003B58;
23
+ --ngxsmk-color-secondary-900: #00273F;
24
+ --ngxsmk-color-secondary-950: #00111F;
25
25
  --ngxsmk-color-neutral-50: #F1F4F7;
26
26
  --ngxsmk-color-neutral-100: #E4E9EE;
27
27
  --ngxsmk-color-neutral-200: #CCD3DB;
@@ -177,16 +177,16 @@
177
177
  color-scheme: light;
178
178
  --ngxsmk-color-primary: #059669;
179
179
  --ngxsmk-color-on-primary: #FFFFFF;
180
- --ngxsmk-color-primary-hover: #046F4D;
181
- --ngxsmk-color-primary-active: #035139;
182
- --ngxsmk-color-primary-container: #E1FEF5;
183
- --ngxsmk-color-on-primary-container: #047B56;
184
- --ngxsmk-color-secondary: #053296;
180
+ --ngxsmk-color-primary-hover: #000000;
181
+ --ngxsmk-color-primary-active: #000000;
182
+ --ngxsmk-color-primary-container: #DEF1E7;
183
+ --ngxsmk-color-on-primary-container: #002E14;
184
+ --ngxsmk-color-secondary: #008EB6;
185
185
  --ngxsmk-color-on-secondary: #FFFFFF;
186
- --ngxsmk-color-secondary-hover: #04256F;
187
- --ngxsmk-color-secondary-active: #031B51;
188
- --ngxsmk-color-secondary-container: #E1EAFE;
189
- --ngxsmk-color-on-secondary-container: #04297B;
186
+ --ngxsmk-color-secondary-hover: #000009;
187
+ --ngxsmk-color-secondary-active: #000009;
188
+ --ngxsmk-color-secondary-container: #DDEFF7;
189
+ --ngxsmk-color-on-secondary-container: #00273F;
190
190
  --ngxsmk-color-background: #F1F4F7;
191
191
  --ngxsmk-color-on-background: #0A1317;
192
192
  --ngxsmk-color-surface: #FFFFFF;
@@ -206,43 +206,43 @@
206
206
  --ngxsmk-color-surface-5: #A4B0BC;
207
207
  --ngxsmk-color-ring: #059669;
208
208
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
209
- --ngxsmk-shadow-focus: 0 0 0 2px #E1FEF5, 0 0 0 4px color-mix(in srgb, #059669 45%, transparent);
210
- --ngxsmk-color-tertiary: #2659F8;
209
+ --ngxsmk-shadow-focus: 0 0 0 2px #DEF1E7, 0 0 0 4px color-mix(in srgb, #059669 45%, transparent);
210
+ --ngxsmk-color-tertiary: #008DBA;
211
211
  --ngxsmk-color-on-tertiary: #FFFFFF;
212
- --ngxsmk-color-tertiary-container: #E1E8FE;
213
- --ngxsmk-color-on-tertiary-container: #04217B;
212
+ --ngxsmk-color-tertiary-container: #DDEEF7;
213
+ --ngxsmk-color-on-tertiary-container: #002742;
214
214
  --ngxsmk-color-success: #0D8626;
215
215
  --ngxsmk-color-on-success: #FFFFFF;
216
- --ngxsmk-color-success-container: #E3FCE8;
217
- --ngxsmk-color-on-success-container: #0D8626;
216
+ --ngxsmk-color-success-container: #DFF1DF;
217
+ --ngxsmk-color-on-success-container: #004300;
218
218
  --ngxsmk-color-warning: #E9AF08;
219
219
  --ngxsmk-color-on-warning: #FFFFFF;
220
- --ngxsmk-color-warning-container: #FEF7E1;
221
- --ngxsmk-color-on-warning-container: #9E7705;
220
+ --ngxsmk-color-warning-container: #F5EAD5;
221
+ --ngxsmk-color-on-warning-container: #522700;
222
222
  --ngxsmk-color-error: #E3193B;
223
223
  --ngxsmk-color-on-error: #FFFFFF;
224
- --ngxsmk-color-error-container: #FCE3E8;
225
- --ngxsmk-color-on-error-container: #931026;
224
+ --ngxsmk-color-error-container: #FFE1DF;
225
+ --ngxsmk-color-on-error-container: #780000;
226
226
  --ngxsmk-color-info: #2563EB;
227
227
  --ngxsmk-color-on-info: #FFFFFF;
228
- --ngxsmk-color-info-container: #E3EBFC;
229
- --ngxsmk-color-on-info-container: #0E3895;
228
+ --ngxsmk-color-info-container: #DDECFF;
229
+ --ngxsmk-color-on-info-container: #001E8D;
230
230
  }
231
231
 
232
232
  :root.dark, :root.dark body, .dark {
233
233
  color-scheme: dark;
234
- --ngxsmk-color-primary: #57F9C7;
234
+ --ngxsmk-color-primary: #45A77F;
235
235
  --ngxsmk-color-on-primary: #FFFFFF;
236
- --ngxsmk-color-primary-hover: #92FBDB;
237
- --ngxsmk-color-primary-active: #BFFDEA;
238
- --ngxsmk-color-primary-container: #047B56;
239
- --ngxsmk-color-on-primary-container: #E1FEF5;
240
- --ngxsmk-color-secondary: #578AF9;
236
+ --ngxsmk-color-primary-hover: #86C8A9;
237
+ --ngxsmk-color-primary-active: #B7DFCB;
238
+ --ngxsmk-color-primary-container: #002E14;
239
+ --ngxsmk-color-on-primary-container: #DEF1E7;
240
+ --ngxsmk-color-secondary: #419FC2;
241
241
  --ngxsmk-color-on-secondary: #FFFFFF;
242
- --ngxsmk-color-secondary-hover: #92B3FB;
243
- --ngxsmk-color-secondary-active: #BFD2FD;
244
- --ngxsmk-color-secondary-container: #04297B;
245
- --ngxsmk-color-on-secondary-container: #E1EAFE;
242
+ --ngxsmk-color-secondary-hover: #83C2DC;
243
+ --ngxsmk-color-secondary-active: #B5DBEC;
244
+ --ngxsmk-color-secondary-container: #00273F;
245
+ --ngxsmk-color-on-secondary-container: #DDEFF7;
246
246
  --ngxsmk-color-background: #111112;
247
247
  --ngxsmk-color-on-background: #DFE2E5;
248
248
  --ngxsmk-color-surface: #1F1F22;
@@ -260,29 +260,29 @@
260
260
  --ngxsmk-color-surface-3: #3A4650;
261
261
  --ngxsmk-color-surface-4: #4E606F;
262
262
  --ngxsmk-color-surface-5: #778593;
263
- --ngxsmk-color-ring: #57F9C7;
263
+ --ngxsmk-color-ring: #45A77F;
264
264
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
265
- --ngxsmk-shadow-focus: 0 0 0 2px color-mix(in srgb, #57F9C7 25%, transparent), 0 0 0 4px color-mix(in srgb, #57F9C7 45%, transparent);
266
- --ngxsmk-color-tertiary: #577EF9;
267
- --ngxsmk-color-on-tertiary: #03154F;
268
- --ngxsmk-color-tertiary-container: #04217B;
269
- --ngxsmk-color-on-tertiary-container: #E1E8FE;
270
- --ngxsmk-color-success: #61F07E;
271
- --ngxsmk-color-on-success: #074A15;
272
- --ngxsmk-color-success-container: #074A15;
273
- --ngxsmk-color-on-success-container: #99F5AC;
274
- --ngxsmk-color-warning: #F9D057;
275
- --ngxsmk-color-on-warning: #4F3B03;
276
- --ngxsmk-color-warning-container: #4F3B03;
277
- --ngxsmk-color-on-warning-container: #FBE093;
278
- --ngxsmk-color-error: #EE637A;
279
- --ngxsmk-color-on-error: #4A0813;
280
- --ngxsmk-color-error-container: #4A0813;
281
- --ngxsmk-color-on-error-container: #F49AA9;
282
- --ngxsmk-color-info: #608DF0;
283
- --ngxsmk-color-on-info: #071C4B;
284
- --ngxsmk-color-info-container: #071C4B;
285
- --ngxsmk-color-on-info-container: #98B5F6;
265
+ --ngxsmk-shadow-focus: 0 0 0 2px color-mix(in srgb, #45A77F 25%, transparent), 0 0 0 4px color-mix(in srgb, #45A77F 45%, transparent);
266
+ --ngxsmk-color-tertiary: #419EC6;
267
+ --ngxsmk-color-on-tertiary: #001021;
268
+ --ngxsmk-color-tertiary-container: #002742;
269
+ --ngxsmk-color-on-tertiary-container: #DDEEF7;
270
+ --ngxsmk-color-success: #51A957;
271
+ --ngxsmk-color-on-success: #001500;
272
+ --ngxsmk-color-success-container: #001500;
273
+ --ngxsmk-color-on-success-container: #8CCA8D;
274
+ --ngxsmk-color-warning: #BA8900;
275
+ --ngxsmk-color-on-warning: #1C0700;
276
+ --ngxsmk-color-warning-container: #1C0700;
277
+ --ngxsmk-color-on-warning-container: #E9AF08;
278
+ --ngxsmk-color-error: #F3515A;
279
+ --ngxsmk-color-on-error: #2E0000;
280
+ --ngxsmk-color-error-container: #2E0000;
281
+ --ngxsmk-color-on-error-container: #FF8F8F;
282
+ --ngxsmk-color-info: #518BFF;
283
+ --ngxsmk-color-on-info: #000238;
284
+ --ngxsmk-color-info-container: #000238;
285
+ --ngxsmk-color-on-info-container: #88B6FF;
286
286
  }
287
287
 
288
288
  @media (prefers-reduced-motion: reduce) {
package/styles/ngxsmk.neutral.css CHANGED
@@ -11,17 +11,17 @@
11
11
  --ngxsmk-color-brand-800: #1F1F23;
12
12
  --ngxsmk-color-brand-900: #18181B;
13
13
  --ngxsmk-color-brand-950: #09090B;
14
- --ngxsmk-color-secondary-50: #F8F7F8;
15
- --ngxsmk-color-secondary-100: #F1EFF1;
16
- --ngxsmk-color-secondary-200: #E0DCE0;
17
- --ngxsmk-color-secondary-300: #CAC4CA;
18
- --ngxsmk-color-secondary-400: #ADA3AD;
19
- --ngxsmk-color-secondary-500: #958895;
20
- --ngxsmk-color-secondary-600: #827382;
21
- --ngxsmk-color-secondary-700: #6C606C;
22
- --ngxsmk-color-secondary-800: #564D56;
23
- --ngxsmk-color-secondary-900: #443C44;
24
- --ngxsmk-color-secondary-950: #1B181B;
14
+ --ngxsmk-color-secondary-50: #F5F5F5;
15
+ --ngxsmk-color-secondary-100: #ECEBEB;
16
+ --ngxsmk-color-secondary-200: #D5D3D5;
17
+ --ngxsmk-color-secondary-300: #B9B6B8;
18
+ --ngxsmk-color-secondary-400: #949193;
19
+ --ngxsmk-color-secondary-500: #777376;
20
+ --ngxsmk-color-secondary-600: #605C5F;
21
+ --ngxsmk-color-secondary-700: #4A4649;
22
+ --ngxsmk-color-secondary-800: #353234;
23
+ --ngxsmk-color-secondary-900: #1A1719;
24
+ --ngxsmk-color-secondary-950: #0E0D0E;
25
25
  --ngxsmk-color-neutral-50: #F1F4F7;
26
26
  --ngxsmk-color-neutral-100: #E4E9EE;
27
27
  --ngxsmk-color-neutral-200: #CCD3DB;
@@ -177,16 +177,16 @@
177
177
  color-scheme: light;
178
178
  --ngxsmk-color-primary: #18181B;
179
179
  --ngxsmk-color-on-primary: #FFFFFF;
180
- --ngxsmk-color-primary-hover: #050505;
180
+ --ngxsmk-color-primary-hover: #000000;
181
181
  --ngxsmk-color-primary-active: #000000;
182
182
  --ngxsmk-color-primary-container: #F4F4F5;
183
183
  --ngxsmk-color-on-primary-container: #18181B;
184
- --ngxsmk-color-secondary: #1B181B;
184
+ --ngxsmk-color-secondary: #1A1719;
185
185
  --ngxsmk-color-on-secondary: #FFFFFF;
186
- --ngxsmk-color-secondary-hover: #050505;
186
+ --ngxsmk-color-secondary-hover: #000000;
187
187
  --ngxsmk-color-secondary-active: #000000;
188
- --ngxsmk-color-secondary-container: #F1EFF1;
189
- --ngxsmk-color-on-secondary-container: #443C44;
188
+ --ngxsmk-color-secondary-container: #ECEBEB;
189
+ --ngxsmk-color-on-secondary-container: #1A1719;
190
190
  --ngxsmk-color-background: #F1F4F7;
191
191
  --ngxsmk-color-on-background: #0A1317;
192
192
  --ngxsmk-color-surface: #FFFFFF;
@@ -207,26 +207,26 @@
207
207
  --ngxsmk-color-ring: #18181B;
208
208
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
209
209
  --ngxsmk-shadow-focus: 0 0 0 2px #F4F4F5, 0 0 0 4px color-mix(in srgb, #18181B 45%, transparent);
210
- --ngxsmk-color-tertiary: #958895;
210
+ --ngxsmk-color-tertiary: #787375;
211
211
  --ngxsmk-color-on-tertiary: #FFFFFF;
212
- --ngxsmk-color-tertiary-container: #F1EFF1;
213
- --ngxsmk-color-on-tertiary-container: #443C44;
212
+ --ngxsmk-color-tertiary-container: #ECEBEB;
213
+ --ngxsmk-color-on-tertiary-container: #1B1719;
214
214
  --ngxsmk-color-success: #0D8626;
215
215
  --ngxsmk-color-on-success: #FFFFFF;
216
- --ngxsmk-color-success-container: #E3FCE8;
217
- --ngxsmk-color-on-success-container: #0D8626;
216
+ --ngxsmk-color-success-container: #DFF1DF;
217
+ --ngxsmk-color-on-success-container: #004300;
218
218
  --ngxsmk-color-warning: #E9AF08;
219
219
  --ngxsmk-color-on-warning: #FFFFFF;
220
- --ngxsmk-color-warning-container: #FEF7E1;
221
- --ngxsmk-color-on-warning-container: #9E7705;
220
+ --ngxsmk-color-warning-container: #F5EAD5;
221
+ --ngxsmk-color-on-warning-container: #522700;
222
222
  --ngxsmk-color-error: #E3193B;
223
223
  --ngxsmk-color-on-error: #FFFFFF;
224
- --ngxsmk-color-error-container: #FCE3E8;
225
- --ngxsmk-color-on-error-container: #931026;
224
+ --ngxsmk-color-error-container: #FFE1DF;
225
+ --ngxsmk-color-on-error-container: #780000;
226
226
  --ngxsmk-color-info: #2563EB;
227
227
  --ngxsmk-color-on-info: #FFFFFF;
228
- --ngxsmk-color-info-container: #E3EBFC;
229
- --ngxsmk-color-on-info-container: #0E3895;
228
+ --ngxsmk-color-info-container: #DDECFF;
229
+ --ngxsmk-color-on-info-container: #001E8D;
230
230
  }
231
231
 
232
232
  :root.dark, :root.dark body, .dark {
@@ -237,12 +237,12 @@
237
237
  --ngxsmk-color-primary-active: #D4D4D8;
238
238
  --ngxsmk-color-primary-container: #18181B;
239
239
  --ngxsmk-color-on-primary-container: #F4F4F5;
240
- --ngxsmk-color-secondary: #ADA3AD;
240
+ --ngxsmk-color-secondary: #949193;
241
241
  --ngxsmk-color-on-secondary: #FFFFFF;
242
- --ngxsmk-color-secondary-hover: #CAC4CA;
243
- --ngxsmk-color-secondary-active: #E0DCE0;
244
- --ngxsmk-color-secondary-container: #443C44;
245
- --ngxsmk-color-on-secondary-container: #F1EFF1;
242
+ --ngxsmk-color-secondary-hover: #B9B6B8;
243
+ --ngxsmk-color-secondary-active: #D5D3D5;
244
+ --ngxsmk-color-secondary-container: #1A1719;
245
+ --ngxsmk-color-on-secondary-container: #ECEBEB;
246
246
  --ngxsmk-color-background: #111112;
247
247
  --ngxsmk-color-on-background: #DFE2E5;
248
248
  --ngxsmk-color-surface: #1F1F22;
@@ -263,26 +263,26 @@
263
263
  --ngxsmk-color-ring: #D4D4D8;
264
264
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
265
265
  --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);
266
- --ngxsmk-color-tertiary: #ADA3AD;
267
- --ngxsmk-color-on-tertiary: #1B181B;
268
- --ngxsmk-color-tertiary-container: #443C44;
269
- --ngxsmk-color-on-tertiary-container: #F1EFF1;
270
- --ngxsmk-color-success: #61F07E;
271
- --ngxsmk-color-on-success: #074A15;
272
- --ngxsmk-color-success-container: #074A15;
273
- --ngxsmk-color-on-success-container: #99F5AC;
274
- --ngxsmk-color-warning: #F9D057;
275
- --ngxsmk-color-on-warning: #4F3B03;
276
- --ngxsmk-color-warning-container: #4F3B03;
277
- --ngxsmk-color-on-warning-container: #FBE093;
278
- --ngxsmk-color-error: #EE637A;
279
- --ngxsmk-color-on-error: #4A0813;
280
- --ngxsmk-color-error-container: #4A0813;
281
- --ngxsmk-color-on-error-container: #F49AA9;
282
- --ngxsmk-color-info: #608DF0;
283
- --ngxsmk-color-on-info: #071C4B;
284
- --ngxsmk-color-info-container: #071C4B;
285
- --ngxsmk-color-on-info-container: #98B5F6;
266
+ --ngxsmk-color-tertiary: #959193;
267
+ --ngxsmk-color-on-tertiary: #0E0D0E;
268
+ --ngxsmk-color-tertiary-container: #1B1719;
269
+ --ngxsmk-color-on-tertiary-container: #ECEBEB;
270
+ --ngxsmk-color-success: #51A957;
271
+ --ngxsmk-color-on-success: #001500;
272
+ --ngxsmk-color-success-container: #001500;
273
+ --ngxsmk-color-on-success-container: #8CCA8D;
274
+ --ngxsmk-color-warning: #BA8900;
275
+ --ngxsmk-color-on-warning: #1C0700;
276
+ --ngxsmk-color-warning-container: #1C0700;
277
+ --ngxsmk-color-on-warning-container: #E9AF08;
278
+ --ngxsmk-color-error: #F3515A;
279
+ --ngxsmk-color-on-error: #2E0000;
280
+ --ngxsmk-color-error-container: #2E0000;
281
+ --ngxsmk-color-on-error-container: #FF8F8F;
282
+ --ngxsmk-color-info: #518BFF;
283
+ --ngxsmk-color-on-info: #000238;
284
+ --ngxsmk-color-info-container: #000238;
285
+ --ngxsmk-color-on-info-container: #88B6FF;
286
286
  }
287
287
 
288
288
  @media (prefers-reduced-motion: reduce) {
package/styles/ngxsmk.rose.css CHANGED
@@ -1,27 +1,27 @@
1
1
  /* Generated by @ngxsmk/theme — do not edit by hand. */
2
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-secondary-50: #FDFBF1;
15
- --ngxsmk-color-secondary-100: #FCF6E4;
16
- --ngxsmk-color-secondary-200: #F7ECC4;
17
- --ngxsmk-color-secondary-300: #F2DF9C;
18
- --ngxsmk-color-secondary-400: #EBCE65;
19
- --ngxsmk-color-secondary-500: #E5BF38;
20
- --ngxsmk-color-secondary-600: #E1B61D;
21
- --ngxsmk-color-secondary-700: #B59217;
22
- --ngxsmk-color-secondary-800: #917513;
23
- --ngxsmk-color-secondary-900: #715B0F;
24
- --ngxsmk-color-secondary-950: #483A09;
3
+ --ngxsmk-color-brand-50: #FFF0F0;
4
+ --ngxsmk-color-brand-100: #FFE1E1;
5
+ --ngxsmk-color-brand-200: #FFBDBF;
6
+ --ngxsmk-color-brand-300: #FF8F96;
7
+ --ngxsmk-color-brand-400: #F15265;
8
+ --ngxsmk-color-brand-500: #E11D48;
9
+ --ngxsmk-color-brand-600: #BA002A;
10
+ --ngxsmk-color-brand-700: #9A0017;
11
+ --ngxsmk-color-brand-800: #760007;
12
+ --ngxsmk-color-brand-900: #560001;
13
+ --ngxsmk-color-brand-950: #2D0000;
14
+ --ngxsmk-color-secondary-50: #FDF3ED;
15
+ --ngxsmk-color-secondary-100: #FBE7DA;
16
+ --ngxsmk-color-secondary-200: #F5CAB0;
17
+ --ngxsmk-color-secondary-300: #E9A67D;
18
+ --ngxsmk-color-secondary-400: #D0793C;
19
+ --ngxsmk-color-secondary-500: #C15F00;
20
+ --ngxsmk-color-secondary-600: #9B3C00;
21
+ --ngxsmk-color-secondary-700: #7F2600;
22
+ --ngxsmk-color-secondary-800: #601400;
23
+ --ngxsmk-color-secondary-900: #450700;
24
+ --ngxsmk-color-secondary-950: #230100;
25
25
  --ngxsmk-color-neutral-50: #F1F4F7;
26
26
  --ngxsmk-color-neutral-100: #E4E9EE;
27
27
  --ngxsmk-color-neutral-200: #CCD3DB;
@@ -177,16 +177,16 @@
177
177
  color-scheme: light;
178
178
  --ngxsmk-color-primary: #E11D48;
179
179
  --ngxsmk-color-on-primary: #FFFFFF;
180
- --ngxsmk-color-primary-hover: #BD183C;
181
- --ngxsmk-color-primary-active: #A21534;
182
- --ngxsmk-color-primary-container: #FCE4E9;
183
- --ngxsmk-color-on-primary-container: #710F24;
184
- --ngxsmk-color-secondary: #E1B61D;
180
+ --ngxsmk-color-primary-hover: #0C0000;
181
+ --ngxsmk-color-primary-active: #0C0000;
182
+ --ngxsmk-color-primary-container: #FFE1E1;
183
+ --ngxsmk-color-on-primary-container: #560001;
184
+ --ngxsmk-color-secondary: #C15F00;
185
185
  --ngxsmk-color-on-secondary: #FFFFFF;
186
- --ngxsmk-color-secondary-hover: #BD9918;
187
- --ngxsmk-color-secondary-active: #A28315;
188
- --ngxsmk-color-secondary-container: #FCF6E4;
189
- --ngxsmk-color-on-secondary-container: #715B0F;
186
+ --ngxsmk-color-secondary-hover: #000400;
187
+ --ngxsmk-color-secondary-active: #000400;
188
+ --ngxsmk-color-secondary-container: #FBE7DA;
189
+ --ngxsmk-color-on-secondary-container: #450700;
190
190
  --ngxsmk-color-background: #F1F4F7;
191
191
  --ngxsmk-color-on-background: #0A1317;
192
192
  --ngxsmk-color-surface: #FFFFFF;
@@ -206,43 +206,43 @@
206
206
  --ngxsmk-color-surface-5: #A4B0BC;
207
207
  --ngxsmk-color-ring: #E11D48;
208
208
  --ngxsmk-color-backdrop: rgb(1 18 40 / 0.4);
209
- --ngxsmk-shadow-focus: 0 0 0 2px #FCE4E9, 0 0 0 4px color-mix(in srgb, #E11D48 45%, transparent);
210
- --ngxsmk-color-tertiary: #E5CB38;
209
+ --ngxsmk-shadow-focus: 0 0 0 2px #FFE1E1, 0 0 0 4px color-mix(in srgb, #E11D48 45%, transparent);
210
+ --ngxsmk-color-tertiary: #BB6400;
211
211
  --ngxsmk-color-on-tertiary: #FFFFFF;
212
- --ngxsmk-color-tertiary-container: #FCF8E4;
213
- --ngxsmk-color-on-tertiary-container: #71620F;
212
+ --ngxsmk-color-tertiary-container: #FAE7DA;
213
+ --ngxsmk-color-on-tertiary-container: #420D00;
214
214
  --ngxsmk-color-success: #0D8626;
215
215
  --ngxsmk-color-on-success: #FFFFFF;
216
- --ngxsmk-color-success-container: #E3FCE8;
217
- --ngxsmk-color-on-success-container: #0D8626;
216
+ --ngxsmk-color-success-container: #DFF1DF;
217
+ --ngxsmk-color-on-success-container: #004300;
218
218
  --ngxsmk-color-warning: #E9AF08;
219
219
  --ngxsmk-color-on-warning: #FFFFFF;
220
- --ngxsmk-color-warning-container: #FEF7E1;
221
- --ngxsmk-color-on-warning-container: #9E7705;
220
+ --ngxsmk-color-warning-container: #F5EAD5;
221
+ --ngxsmk-color-on-warning-container: #522700;
222
222
  --ngxsmk-color-error: #E3193B;
223
223
  --ngxsmk-color-on-error: #FFFFFF;
224
- --ngxsmk-color-error-container: #FCE3E8;
225
- --ngxsmk-color-on-error-container: #931026;
224
+ --ngxsmk-color-error-container: #FFE1DF;
225
+ --ngxsmk-color-on-error-container: #780000;
226
226
  --ngxsmk-color-info: #2563EB;
227
227
  --ngxsmk-color-on-info: #FFFFFF;
228
- --ngxsmk-color-info-container: #E3EBFC;
229
- --ngxsmk-color-on-info-container: #0E3895;
228
+ --ngxsmk-color-info-container: #DDECFF;
229
+ --ngxsmk-color-on-info-container: #001E8D;
230
230
  }
231
231
 
232
232
  :root.dark, :root.dark body, .dark {
233
233
  color-scheme: dark;
234
- --ngxsmk-color-primary: #EB6583;
234
+ --ngxsmk-color-primary: #F15265;
235
235
  --ngxsmk-color-on-primary: #FFFFFF;
236
- --ngxsmk-color-primary-hover: #F29CAF;
237
- --ngxsmk-color-primary-active: #F7C4CF;
238
- --ngxsmk-color-primary-container: #710F24;
239
- --ngxsmk-color-on-primary-container: #FCE4E9;
240
- --ngxsmk-color-secondary: #EBCE65;
236
+ --ngxsmk-color-primary-hover: #FF8F96;
237
+ --ngxsmk-color-primary-active: #FFBDBF;
238
+ --ngxsmk-color-primary-container: #560001;
239
+ --ngxsmk-color-on-primary-container: #FFE1E1;
240
+ --ngxsmk-color-secondary: #D0793C;
241
241
  --ngxsmk-color-on-secondary: #FFFFFF;
242
- --ngxsmk-color-secondary-hover: #F2DF9C;
243
- --ngxsmk-color-secondary-active: #F7ECC4;
244
- --ngxsmk-color-secondary-container: #715B0F;
245
- --ngxsmk-color-on-secondary-container: #FCF6E4;
242
+ --ngxsmk-color-secondary-hover: #E9A67D;
243
+ --ngxsmk-color-secondary-active: #F5CAB0;
244
+ --ngxsmk-color-secondary-container: #450700;
245
+ --ngxsmk-color-on-secondary-container: #FBE7DA;
246
246
  --ngxsmk-color-background: #111112;
247
247
  --ngxsmk-color-on-background: #DFE2E5;
248
248
  --ngxsmk-color-surface: #1F1F22;
@@ -260,29 +260,29 @@
260
260
  --ngxsmk-color-surface-3: #3A4650;
261
261
  --ngxsmk-color-surface-4: #4E606F;
262
262
  --ngxsmk-color-surface-5: #778593;
263
- --ngxsmk-color-ring: #EB6583;
263
+ --ngxsmk-color-ring: #F15265;
264
264
  --ngxsmk-color-backdrop: rgb(17 17 18 / 0.6);
265
- --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);
266
- --ngxsmk-color-tertiary: #EBD765;
267
- --ngxsmk-color-on-tertiary: #483F09;
268
- --ngxsmk-color-tertiary-container: #71620F;
269
- --ngxsmk-color-on-tertiary-container: #FCF8E4;
270
- --ngxsmk-color-success: #61F07E;
271
- --ngxsmk-color-on-success: #074A15;
272
- --ngxsmk-color-success-container: #074A15;
273
- --ngxsmk-color-on-success-container: #99F5AC;
274
- --ngxsmk-color-warning: #F9D057;
275
- --ngxsmk-color-on-warning: #4F3B03;
276
- --ngxsmk-color-warning-container: #4F3B03;
277
- --ngxsmk-color-on-warning-container: #FBE093;
278
- --ngxsmk-color-error: #EE637A;
279
- --ngxsmk-color-on-error: #4A0813;
280
- --ngxsmk-color-error-container: #4A0813;
281
- --ngxsmk-color-on-error-container: #F49AA9;
282
- --ngxsmk-color-info: #608DF0;
283
- --ngxsmk-color-on-info: #071C4B;
284
- --ngxsmk-color-info-container: #071C4B;
285
- --ngxsmk-color-on-info-container: #98B5F6;
265
+ --ngxsmk-shadow-focus: 0 0 0 2px color-mix(in srgb, #F15265 25%, transparent), 0 0 0 4px color-mix(in srgb, #F15265 45%, transparent);
266
+ --ngxsmk-color-tertiary: #CB7D3C;
267
+ --ngxsmk-color-on-tertiary: #210200;
268
+ --ngxsmk-color-tertiary-container: #420D00;
269
+ --ngxsmk-color-on-tertiary-container: #FAE7DA;
270
+ --ngxsmk-color-success: #51A957;
271
+ --ngxsmk-color-on-success: #001500;
272
+ --ngxsmk-color-success-container: #001500;
273
+ --ngxsmk-color-on-success-container: #8CCA8D;
274
+ --ngxsmk-color-warning: #BA8900;
275
+ --ngxsmk-color-on-warning: #1C0700;
276
+ --ngxsmk-color-warning-container: #1C0700;
277
+ --ngxsmk-color-on-warning-container: #E9AF08;
278
+ --ngxsmk-color-error: #F3515A;
279
+ --ngxsmk-color-on-error: #2E0000;
280
+ --ngxsmk-color-error-container: #2E0000;
281
+ --ngxsmk-color-on-error-container: #FF8F8F;
282
+ --ngxsmk-color-info: #518BFF;
283
+ --ngxsmk-color-on-info: #000238;
284
+ --ngxsmk-color-info-container: #000238;
285
+ --ngxsmk-color-on-info-container: #88B6FF;
286
286
  }
287
287
 
288
288
  @media (prefers-reduced-motion: reduce) {