@ngstarter-ui/components 1.0.47 → 1.0.48

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 (5) hide show
  1. package/fesm2022/ngstarter-ui-components-core.mjs +41 -63
  2. package/fesm2022/ngstarter-ui-components-core.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/styles/_tokens.scss +81 -81
  5. package/styles/themes/modern.scss +48 -48
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ngstarter-ui/components",
3
3
  "description": "NgStarter - AI-friendly Enterprise Angular UI Components and Admin Panel",
4
- "version": "1.0.47",
4
+ "version": "1.0.48",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/elementarlabsdev/ngstarter.git"
package/styles/_tokens.scss CHANGED
@@ -25,39 +25,39 @@
25
25
 
26
26
  --ngs-color-primary-seed: #036fe3;
27
27
  --ngs-color-primary: var(--ngs-color-primary-seed);
28
- --ngs-color-on-primary: #ffffff;
28
+ --ngs-color-on-primary: contrast-color(var(--ngs-color-primary));
29
29
  --ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 84%);
30
- --ngs-color-on-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #000000 64%);
30
+ --ngs-color-on-primary-container: contrast-color(var(--ngs-color-primary-container));
31
31
  --ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #334155 70%);
32
- --ngs-color-on-secondary: #ffffff;
32
+ --ngs-color-on-secondary: contrast-color(var(--ngs-color-secondary));
33
33
  --ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #ffffff 88%);
34
- --ngs-color-on-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #000000 68%);
34
+ --ngs-color-on-secondary-container: contrast-color(var(--ngs-color-secondary-container));
35
35
  --ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #db2777 45%);
36
- --ngs-color-on-tertiary: #ffffff;
36
+ --ngs-color-on-tertiary: contrast-color(var(--ngs-color-tertiary));
37
37
  --ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #ffffff 86%);
38
- --ngs-color-on-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #000000 64%);
38
+ --ngs-color-on-tertiary-container: contrast-color(var(--ngs-color-tertiary-container));
39
39
  --ngs-color-danger: #ef4444;
40
- --ngs-color-on-danger: #ffffff;
40
+ --ngs-color-on-danger: contrast-color(var(--ngs-color-danger));
41
41
  --ngs-color-danger-container: #fee2e2;
42
- --ngs-color-on-danger-container: #7f1d1d;
42
+ --ngs-color-on-danger-container: contrast-color(var(--ngs-color-danger-container));
43
43
  --ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #2563eb 35%);
44
- --ngs-color-on-info: #ffffff;
44
+ --ngs-color-on-info: contrast-color(var(--ngs-color-info));
45
45
  --ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #ffffff 86%);
46
- --ngs-color-on-info-container: color-mix(in srgb, var(--ngs-color-info), #000000 64%);
46
+ --ngs-color-on-info-container: contrast-color(var(--ngs-color-info-container));
47
47
  --ngs-color-success: #22c55e;
48
- --ngs-color-on-success: #ffffff;
48
+ --ngs-color-on-success: contrast-color(var(--ngs-color-success));
49
49
  --ngs-color-success-container: #dcfce7;
50
- --ngs-color-on-success-container: #14532d;
50
+ --ngs-color-on-success-container: contrast-color(var(--ngs-color-success-container));
51
51
  --ngs-color-warning: #f59e0b;
52
- --ngs-color-on-warning: #ffffff;
52
+ --ngs-color-on-warning: contrast-color(var(--ngs-color-warning));
53
53
  --ngs-color-warning-container: #fef3c7;
54
- --ngs-color-on-warning-container: #78350f;
54
+ --ngs-color-on-warning-container: contrast-color(var(--ngs-color-warning-container));
55
55
 
56
56
  --ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 99%);
57
- --ngs-color-on-background: #0f172a;
57
+ --ngs-color-on-background: contrast-color(var(--ngs-color-background));
58
58
  --ngs-color-surface: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 98%);
59
59
  --ngs-color-surface-bright: #ffffff;
60
- --ngs-color-on-surface: #0f172a;
60
+ --ngs-color-on-surface: contrast-color(var(--ngs-color-surface));
61
61
  --ngs-color-on-surface-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #64748b 88%);
62
62
  --ngs-color-neutral-50: color-mix(in srgb, var(--ngs-color-primary-seed), #f8fafc 98%);
63
63
  --ngs-color-neutral-100: color-mix(in srgb, var(--ngs-color-primary-seed), #f1f5f9 96%);
@@ -117,7 +117,7 @@
117
117
  --ngs-color-danger-container-high: color-mix(in srgb, var(--ngs-color-danger), #ffffff 86%);
118
118
  --ngs-color-danger-container-highest: color-mix(in srgb, var(--ngs-color-danger), #ffffff 78%);
119
119
  --ngs-color-orange-container: var(--ngs-color-warning-container);
120
- --ngs-color-on-orange-container: var(--ngs-color-on-warning-container);
120
+ --ngs-color-on-orange-container: contrast-color(var(--ngs-color-orange-container));
121
121
  --ngs-color-green-500: #22c55e;
122
122
 
123
123
  --ngs-density-scale: -9;
@@ -293,42 +293,42 @@
293
293
  :root:not([data-ngs-color-scheme='light']) {
294
294
  color-scheme: dark;
295
295
  --ngs-color-primary: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 32%);
296
- --ngs-color-on-primary: #ffffff;
296
+ --ngs-color-on-primary: contrast-color(var(--ngs-color-primary));
297
297
  --ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #000000 42%);
298
- --ngs-color-on-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 84%);
298
+ --ngs-color-on-primary-container: contrast-color(var(--ngs-color-primary-container));
299
299
  --ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #cbd5e1 64%);
300
- --ngs-color-on-secondary: #0f172a;
300
+ --ngs-color-on-secondary: contrast-color(var(--ngs-color-secondary));
301
301
  --ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #000000 66%);
302
- --ngs-color-on-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #ffffff 82%);
302
+ --ngs-color-on-secondary-container: contrast-color(var(--ngs-color-secondary-container));
303
303
  --ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #f9a8d4 48%);
304
- --ngs-color-on-tertiary: #0c4a6e;
304
+ --ngs-color-on-tertiary: contrast-color(var(--ngs-color-tertiary));
305
305
  --ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #000000 58%);
306
- --ngs-color-on-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #ffffff 84%);
306
+ --ngs-color-on-tertiary-container: contrast-color(var(--ngs-color-tertiary-container));
307
307
  --ngs-color-danger: #f87171;
308
- --ngs-color-on-danger: #450a0a;
308
+ --ngs-color-on-danger: contrast-color(var(--ngs-color-danger));
309
309
  --ngs-color-danger-container: #7f1d1d;
310
- --ngs-color-on-danger-container: #fef2f2;
310
+ --ngs-color-on-danger-container: contrast-color(var(--ngs-color-danger-container));
311
311
  --ngs-color-danger-container-lowest: color-mix(in srgb, var(--ngs-color-danger), #000000 92%);
312
312
  --ngs-color-danger-container-low: color-mix(in srgb, var(--ngs-color-danger), #000000 88%);
313
313
  --ngs-color-danger-container-high: color-mix(in srgb, var(--ngs-color-danger), #000000 80%);
314
314
  --ngs-color-danger-container-highest: color-mix(in srgb, var(--ngs-color-danger), #000000 76%);
315
315
  --ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #93c5fd 52%);
316
- --ngs-color-on-info: #1e3a8a;
316
+ --ngs-color-on-info: contrast-color(var(--ngs-color-info));
317
317
  --ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #000000 58%);
318
- --ngs-color-on-info-container: color-mix(in srgb, var(--ngs-color-info), #ffffff 84%);
318
+ --ngs-color-on-info-container: contrast-color(var(--ngs-color-info-container));
319
319
  --ngs-color-success: #4ade80;
320
- --ngs-color-on-success: #064e3b;
320
+ --ngs-color-on-success: contrast-color(var(--ngs-color-success));
321
321
  --ngs-color-success-container: #064e3b;
322
- --ngs-color-on-success-container: #dcfce7;
322
+ --ngs-color-on-success-container: contrast-color(var(--ngs-color-success-container));
323
323
  --ngs-color-warning: #fbbf24;
324
- --ngs-color-on-warning: #78350f;
324
+ --ngs-color-on-warning: contrast-color(var(--ngs-color-warning));
325
325
  --ngs-color-warning-container: #78350f;
326
- --ngs-color-on-warning-container: #fef3c7;
326
+ --ngs-color-on-warning-container: contrast-color(var(--ngs-color-warning-container));
327
327
  --ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #0f172a 96%);
328
- --ngs-color-on-background: #f8fafc;
328
+ --ngs-color-on-background: contrast-color(var(--ngs-color-background));
329
329
  --ngs-color-surface: color-mix(in srgb, var(--ngs-color-primary-seed), #0f172a 94%);
330
330
  --ngs-color-surface-bright: color-mix(in srgb, var(--ngs-color-primary-seed), #1e293b 90%);
331
- --ngs-color-on-surface: #f8fafc;
331
+ --ngs-color-on-surface: contrast-color(var(--ngs-color-surface));
332
332
  --ngs-color-on-surface-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #94a3b8 86%);
333
333
  --ngs-color-neutral-50: color-mix(in srgb, var(--ngs-color-primary-seed), #020617 96%);
334
334
  --ngs-color-neutral-100: color-mix(in srgb, var(--ngs-color-primary-seed), #0f172a 94%);
@@ -362,42 +362,42 @@
362
362
  [data-ngs-color-scheme='dark'] {
363
363
  color-scheme: dark;
364
364
  --ngs-color-primary: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 32%);
365
- --ngs-color-on-primary: #ffffff;
365
+ --ngs-color-on-primary: contrast-color(var(--ngs-color-primary));
366
366
  --ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #000000 42%);
367
- --ngs-color-on-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 84%);
367
+ --ngs-color-on-primary-container: contrast-color(var(--ngs-color-primary-container));
368
368
  --ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #cbd5e1 64%);
369
- --ngs-color-on-secondary: #0f172a;
369
+ --ngs-color-on-secondary: contrast-color(var(--ngs-color-secondary));
370
370
  --ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #000000 66%);
371
- --ngs-color-on-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #ffffff 82%);
371
+ --ngs-color-on-secondary-container: contrast-color(var(--ngs-color-secondary-container));
372
372
  --ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #f9a8d4 48%);
373
- --ngs-color-on-tertiary: #0c4a6e;
373
+ --ngs-color-on-tertiary: contrast-color(var(--ngs-color-tertiary));
374
374
  --ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #000000 58%);
375
- --ngs-color-on-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #ffffff 84%);
375
+ --ngs-color-on-tertiary-container: contrast-color(var(--ngs-color-tertiary-container));
376
376
  --ngs-color-danger: #f87171;
377
- --ngs-color-on-danger: #450a0a;
377
+ --ngs-color-on-danger: contrast-color(var(--ngs-color-danger));
378
378
  --ngs-color-danger-container: #7f1d1d;
379
- --ngs-color-on-danger-container: #fef2f2;
379
+ --ngs-color-on-danger-container: contrast-color(var(--ngs-color-danger-container));
380
380
  --ngs-color-danger-container-lowest: color-mix(in srgb, var(--ngs-color-danger), #000000 92%);
381
381
  --ngs-color-danger-container-low: color-mix(in srgb, var(--ngs-color-danger), #000000 88%);
382
382
  --ngs-color-danger-container-high: color-mix(in srgb, var(--ngs-color-danger), #000000 80%);
383
383
  --ngs-color-danger-container-highest: color-mix(in srgb, var(--ngs-color-danger), #000000 76%);
384
384
  --ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #93c5fd 52%);
385
- --ngs-color-on-info: #1e3a8a;
385
+ --ngs-color-on-info: contrast-color(var(--ngs-color-info));
386
386
  --ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #000000 58%);
387
- --ngs-color-on-info-container: color-mix(in srgb, var(--ngs-color-info), #ffffff 84%);
387
+ --ngs-color-on-info-container: contrast-color(var(--ngs-color-info-container));
388
388
  --ngs-color-success: #4ade80;
389
- --ngs-color-on-success: #064e3b;
389
+ --ngs-color-on-success: contrast-color(var(--ngs-color-success));
390
390
  --ngs-color-success-container: #064e3b;
391
- --ngs-color-on-success-container: #dcfce7;
391
+ --ngs-color-on-success-container: contrast-color(var(--ngs-color-success-container));
392
392
  --ngs-color-warning: #fbbf24;
393
- --ngs-color-on-warning: #78350f;
393
+ --ngs-color-on-warning: contrast-color(var(--ngs-color-warning));
394
394
  --ngs-color-warning-container: #78350f;
395
- --ngs-color-on-warning-container: #fef3c7;
395
+ --ngs-color-on-warning-container: contrast-color(var(--ngs-color-warning-container));
396
396
  --ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #0f172a 96%);
397
- --ngs-color-on-background: #f8fafc;
397
+ --ngs-color-on-background: contrast-color(var(--ngs-color-background));
398
398
  --ngs-color-surface: color-mix(in srgb, var(--ngs-color-primary-seed), #0f172a 94%);
399
399
  --ngs-color-surface-bright: color-mix(in srgb, var(--ngs-color-primary-seed), #1e293b 90%);
400
- --ngs-color-on-surface: #f8fafc;
400
+ --ngs-color-on-surface: contrast-color(var(--ngs-color-surface));
401
401
  --ngs-color-on-surface-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #94a3b8 86%);
402
402
  --ngs-color-neutral-50: color-mix(in srgb, var(--ngs-color-primary-seed), #020617 96%);
403
403
  --ngs-color-neutral-100: color-mix(in srgb, var(--ngs-color-primary-seed), #0f172a 94%);
@@ -439,38 +439,38 @@
439
439
 
440
440
  --ngs-color-primary-seed: #4f46e5;
441
441
  --ngs-color-primary: var(--ngs-color-primary-seed);
442
- --ngs-color-on-primary: #ffffff;
442
+ --ngs-color-on-primary: contrast-color(var(--ngs-color-primary));
443
443
  --ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 86%);
444
- --ngs-color-on-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #000000 62%);
444
+ --ngs-color-on-primary-container: contrast-color(var(--ngs-color-primary-container));
445
445
  --ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #0f766e 58%);
446
- --ngs-color-on-secondary: #ffffff;
446
+ --ngs-color-on-secondary: contrast-color(var(--ngs-color-secondary));
447
447
  --ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #ffffff 84%);
448
- --ngs-color-on-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #000000 68%);
448
+ --ngs-color-on-secondary-container: contrast-color(var(--ngs-color-secondary-container));
449
449
  --ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #db2777 50%);
450
- --ngs-color-on-tertiary: #ffffff;
450
+ --ngs-color-on-tertiary: contrast-color(var(--ngs-color-tertiary));
451
451
  --ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #ffffff 86%);
452
- --ngs-color-on-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #000000 62%);
452
+ --ngs-color-on-tertiary-container: contrast-color(var(--ngs-color-tertiary-container));
453
453
  --ngs-color-danger: #e11d48;
454
- --ngs-color-on-danger: #ffffff;
454
+ --ngs-color-on-danger: contrast-color(var(--ngs-color-danger));
455
455
  --ngs-color-danger-container: #ffe4e6;
456
- --ngs-color-on-danger-container: #9f1239;
456
+ --ngs-color-on-danger-container: contrast-color(var(--ngs-color-danger-container));
457
457
  --ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #2563eb 40%);
458
- --ngs-color-on-info: #ffffff;
458
+ --ngs-color-on-info: contrast-color(var(--ngs-color-info));
459
459
  --ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #ffffff 86%);
460
- --ngs-color-on-info-container: color-mix(in srgb, var(--ngs-color-info), #000000 62%);
460
+ --ngs-color-on-info-container: contrast-color(var(--ngs-color-info-container));
461
461
  --ngs-color-success: #059669;
462
- --ngs-color-on-success: #ffffff;
462
+ --ngs-color-on-success: contrast-color(var(--ngs-color-success));
463
463
  --ngs-color-success-container: #d1fae5;
464
- --ngs-color-on-success-container: #065f46;
464
+ --ngs-color-on-success-container: contrast-color(var(--ngs-color-success-container));
465
465
  --ngs-color-warning: #d97706;
466
- --ngs-color-on-warning: #ffffff;
466
+ --ngs-color-on-warning: contrast-color(var(--ngs-color-warning));
467
467
  --ngs-color-warning-container: #fef3c7;
468
- --ngs-color-on-warning-container: #92400e;
468
+ --ngs-color-on-warning-container: contrast-color(var(--ngs-color-warning-container));
469
469
  --ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #f7f8ff 98%);
470
- --ngs-color-on-background: #172033;
470
+ --ngs-color-on-background: contrast-color(var(--ngs-color-background));
471
471
  --ngs-color-surface: color-mix(in srgb, var(--ngs-color-primary-seed), #f9fbff 98%);
472
472
  --ngs-color-surface-bright: #ffffff;
473
- --ngs-color-on-surface: #172033;
473
+ --ngs-color-on-surface: contrast-color(var(--ngs-color-surface));
474
474
  --ngs-color-on-surface-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #667085 88%);
475
475
  --ngs-color-neutral-50: color-mix(in srgb, var(--ngs-color-primary-seed), #fafbff 98%);
476
476
  --ngs-color-neutral-100: color-mix(in srgb, var(--ngs-color-primary-seed), #f3f5fb 96%);
@@ -568,38 +568,38 @@
568
568
  [data-ngs-theme='modern'][data-ngs-color-scheme='dark'] {
569
569
  --ngs-color-primary-seed: #4f46e5;
570
570
  --ngs-color-primary: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 42%);
571
- --ngs-color-on-primary: #111827;
571
+ --ngs-color-on-primary: contrast-color(var(--ngs-color-primary));
572
572
  --ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #000000 42%);
573
- --ngs-color-on-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 86%);
573
+ --ngs-color-on-primary-container: contrast-color(var(--ngs-color-primary-container));
574
574
  --ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #5eead4 58%);
575
- --ngs-color-on-secondary: #042f2e;
575
+ --ngs-color-on-secondary: contrast-color(var(--ngs-color-secondary));
576
576
  --ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #000000 62%);
577
- --ngs-color-on-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #ffffff 82%);
577
+ --ngs-color-on-secondary-container: contrast-color(var(--ngs-color-secondary-container));
578
578
  --ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #f9a8d4 50%);
579
- --ngs-color-on-tertiary: #500724;
579
+ --ngs-color-on-tertiary: contrast-color(var(--ngs-color-tertiary));
580
580
  --ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #000000 58%);
581
- --ngs-color-on-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #ffffff 84%);
581
+ --ngs-color-on-tertiary-container: contrast-color(var(--ngs-color-tertiary-container));
582
582
  --ngs-color-danger: #fb7185;
583
- --ngs-color-on-danger: #4c0519;
583
+ --ngs-color-on-danger: contrast-color(var(--ngs-color-danger));
584
584
  --ngs-color-danger-container: #9f1239;
585
- --ngs-color-on-danger-container: #ffe4e6;
585
+ --ngs-color-on-danger-container: contrast-color(var(--ngs-color-danger-container));
586
586
  --ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #93c5fd 46%);
587
- --ngs-color-on-info: #0f1e46;
587
+ --ngs-color-on-info: contrast-color(var(--ngs-color-info));
588
588
  --ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #000000 58%);
589
- --ngs-color-on-info-container: color-mix(in srgb, var(--ngs-color-info), #ffffff 84%);
589
+ --ngs-color-on-info-container: contrast-color(var(--ngs-color-info-container));
590
590
  --ngs-color-success: #6ee7b7;
591
- --ngs-color-on-success: #042f2e;
591
+ --ngs-color-on-success: contrast-color(var(--ngs-color-success));
592
592
  --ngs-color-success-container: #047857;
593
- --ngs-color-on-success-container: #d1fae5;
593
+ --ngs-color-on-success-container: contrast-color(var(--ngs-color-success-container));
594
594
  --ngs-color-warning: #fbbf24;
595
- --ngs-color-on-warning: #451a03;
595
+ --ngs-color-on-warning: contrast-color(var(--ngs-color-warning));
596
596
  --ngs-color-warning-container: #92400e;
597
- --ngs-color-on-warning-container: #fef3c7;
597
+ --ngs-color-on-warning-container: contrast-color(var(--ngs-color-warning-container));
598
598
  --ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #090d1a 96%);
599
- --ngs-color-on-background: #eef2ff;
599
+ --ngs-color-on-background: contrast-color(var(--ngs-color-background));
600
600
  --ngs-color-surface: color-mix(in srgb, var(--ngs-color-primary-seed), #11162a 94%);
601
601
  --ngs-color-surface-bright: color-mix(in srgb, var(--ngs-color-primary-seed), #1b2138 90%);
602
- --ngs-color-on-surface: #eef2ff;
602
+ --ngs-color-on-surface: contrast-color(var(--ngs-color-surface));
603
603
  --ngs-color-on-surface-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #b6c0d6 86%);
604
604
  --ngs-color-neutral-50: color-mix(in srgb, var(--ngs-color-primary-seed), #090d1a 96%);
605
605
  --ngs-color-neutral-100: color-mix(in srgb, var(--ngs-color-primary-seed), #11162a 94%);
package/styles/themes/modern.scss CHANGED
@@ -19,38 +19,38 @@
19
19
 
20
20
  --ngs-color-primary-seed: #4f46e5;
21
21
  --ngs-color-primary: var(--ngs-color-primary-seed);
22
- --ngs-color-on-primary: #ffffff;
22
+ --ngs-color-on-primary: contrast-color(var(--ngs-color-primary));
23
23
  --ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 86%);
24
- --ngs-color-on-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #000000 62%);
24
+ --ngs-color-on-primary-container: contrast-color(var(--ngs-color-primary-container));
25
25
  --ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #0f766e 58%);
26
- --ngs-color-on-secondary: #ffffff;
26
+ --ngs-color-on-secondary: contrast-color(var(--ngs-color-secondary));
27
27
  --ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #ffffff 84%);
28
- --ngs-color-on-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #000000 68%);
28
+ --ngs-color-on-secondary-container: contrast-color(var(--ngs-color-secondary-container));
29
29
  --ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #db2777 50%);
30
- --ngs-color-on-tertiary: #ffffff;
30
+ --ngs-color-on-tertiary: contrast-color(var(--ngs-color-tertiary));
31
31
  --ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #ffffff 86%);
32
- --ngs-color-on-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #000000 62%);
32
+ --ngs-color-on-tertiary-container: contrast-color(var(--ngs-color-tertiary-container));
33
33
  --ngs-color-danger: #e11d48;
34
- --ngs-color-on-danger: #ffffff;
34
+ --ngs-color-on-danger: contrast-color(var(--ngs-color-danger));
35
35
  --ngs-color-danger-container: #ffe4e6;
36
- --ngs-color-on-danger-container: #9f1239;
36
+ --ngs-color-on-danger-container: contrast-color(var(--ngs-color-danger-container));
37
37
  --ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #2563eb 40%);
38
- --ngs-color-on-info: #ffffff;
38
+ --ngs-color-on-info: contrast-color(var(--ngs-color-info));
39
39
  --ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #ffffff 86%);
40
- --ngs-color-on-info-container: color-mix(in srgb, var(--ngs-color-info), #000000 62%);
40
+ --ngs-color-on-info-container: contrast-color(var(--ngs-color-info-container));
41
41
  --ngs-color-success: #059669;
42
- --ngs-color-on-success: #ffffff;
42
+ --ngs-color-on-success: contrast-color(var(--ngs-color-success));
43
43
  --ngs-color-success-container: #d1fae5;
44
- --ngs-color-on-success-container: #065f46;
44
+ --ngs-color-on-success-container: contrast-color(var(--ngs-color-success-container));
45
45
  --ngs-color-warning: #d97706;
46
- --ngs-color-on-warning: #ffffff;
46
+ --ngs-color-on-warning: contrast-color(var(--ngs-color-warning));
47
47
  --ngs-color-warning-container: #fef3c7;
48
- --ngs-color-on-warning-container: #92400e;
48
+ --ngs-color-on-warning-container: contrast-color(var(--ngs-color-warning-container));
49
49
  --ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #f7f8ff 98%);
50
- --ngs-color-on-background: #172033;
50
+ --ngs-color-on-background: contrast-color(var(--ngs-color-background));
51
51
  --ngs-color-surface: color-mix(in srgb, var(--ngs-color-primary-seed), #f9fbff 98%);
52
52
  --ngs-color-surface-bright: #ffffff;
53
- --ngs-color-on-surface: #172033;
53
+ --ngs-color-on-surface: contrast-color(var(--ngs-color-surface));
54
54
  --ngs-color-on-surface-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #667085 88%);
55
55
  --ngs-color-neutral-50: color-mix(in srgb, var(--ngs-color-primary-seed), #fafbff 98%);
56
56
  --ngs-color-neutral-100: color-mix(in srgb, var(--ngs-color-primary-seed), #f3f5fb 96%);
@@ -150,38 +150,38 @@
150
150
 
151
151
  --ngs-color-primary-seed: #4f46e5;
152
152
  --ngs-color-primary: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 42%);
153
- --ngs-color-on-primary: #111827;
153
+ --ngs-color-on-primary: contrast-color(var(--ngs-color-primary));
154
154
  --ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #000000 42%);
155
- --ngs-color-on-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 86%);
155
+ --ngs-color-on-primary-container: contrast-color(var(--ngs-color-primary-container));
156
156
  --ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #5eead4 58%);
157
- --ngs-color-on-secondary: #042f2e;
157
+ --ngs-color-on-secondary: contrast-color(var(--ngs-color-secondary));
158
158
  --ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #000000 62%);
159
- --ngs-color-on-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #ffffff 82%);
159
+ --ngs-color-on-secondary-container: contrast-color(var(--ngs-color-secondary-container));
160
160
  --ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #f9a8d4 50%);
161
- --ngs-color-on-tertiary: #500724;
161
+ --ngs-color-on-tertiary: contrast-color(var(--ngs-color-tertiary));
162
162
  --ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #000000 58%);
163
- --ngs-color-on-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #ffffff 84%);
163
+ --ngs-color-on-tertiary-container: contrast-color(var(--ngs-color-tertiary-container));
164
164
  --ngs-color-danger: #fb7185;
165
- --ngs-color-on-danger: #4c0519;
165
+ --ngs-color-on-danger: contrast-color(var(--ngs-color-danger));
166
166
  --ngs-color-danger-container: #9f1239;
167
- --ngs-color-on-danger-container: #ffe4e6;
167
+ --ngs-color-on-danger-container: contrast-color(var(--ngs-color-danger-container));
168
168
  --ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #93c5fd 46%);
169
- --ngs-color-on-info: #0f1e46;
169
+ --ngs-color-on-info: contrast-color(var(--ngs-color-info));
170
170
  --ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #000000 58%);
171
- --ngs-color-on-info-container: color-mix(in srgb, var(--ngs-color-info), #ffffff 84%);
171
+ --ngs-color-on-info-container: contrast-color(var(--ngs-color-info-container));
172
172
  --ngs-color-success: #6ee7b7;
173
- --ngs-color-on-success: #042f2e;
173
+ --ngs-color-on-success: contrast-color(var(--ngs-color-success));
174
174
  --ngs-color-success-container: #047857;
175
- --ngs-color-on-success-container: #d1fae5;
175
+ --ngs-color-on-success-container: contrast-color(var(--ngs-color-success-container));
176
176
  --ngs-color-warning: #fbbf24;
177
- --ngs-color-on-warning: #451a03;
177
+ --ngs-color-on-warning: contrast-color(var(--ngs-color-warning));
178
178
  --ngs-color-warning-container: #92400e;
179
- --ngs-color-on-warning-container: #fef3c7;
179
+ --ngs-color-on-warning-container: contrast-color(var(--ngs-color-warning-container));
180
180
  --ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #090d1a 96%);
181
- --ngs-color-on-background: #eef2ff;
181
+ --ngs-color-on-background: contrast-color(var(--ngs-color-background));
182
182
  --ngs-color-surface: color-mix(in srgb, var(--ngs-color-primary-seed), #11162a 94%);
183
183
  --ngs-color-surface-bright: color-mix(in srgb, var(--ngs-color-primary-seed), #1b2138 90%);
184
- --ngs-color-on-surface: #eef2ff;
184
+ --ngs-color-on-surface: contrast-color(var(--ngs-color-surface));
185
185
  --ngs-color-on-surface-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #b6c0d6 86%);
186
186
  --ngs-color-neutral-50: color-mix(in srgb, var(--ngs-color-primary-seed), #090d1a 96%);
187
187
  --ngs-color-neutral-100: color-mix(in srgb, var(--ngs-color-primary-seed), #11162a 94%);
@@ -252,38 +252,38 @@
252
252
 
253
253
  --ngs-color-primary-seed: #4f46e5;
254
254
  --ngs-color-primary: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 42%);
255
- --ngs-color-on-primary: #111827;
255
+ --ngs-color-on-primary: contrast-color(var(--ngs-color-primary));
256
256
  --ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #000000 42%);
257
- --ngs-color-on-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 86%);
257
+ --ngs-color-on-primary-container: contrast-color(var(--ngs-color-primary-container));
258
258
  --ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #5eead4 58%);
259
- --ngs-color-on-secondary: #042f2e;
259
+ --ngs-color-on-secondary: contrast-color(var(--ngs-color-secondary));
260
260
  --ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #000000 62%);
261
- --ngs-color-on-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #ffffff 82%);
261
+ --ngs-color-on-secondary-container: contrast-color(var(--ngs-color-secondary-container));
262
262
  --ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #f9a8d4 50%);
263
- --ngs-color-on-tertiary: #500724;
263
+ --ngs-color-on-tertiary: contrast-color(var(--ngs-color-tertiary));
264
264
  --ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #000000 58%);
265
- --ngs-color-on-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #ffffff 84%);
265
+ --ngs-color-on-tertiary-container: contrast-color(var(--ngs-color-tertiary-container));
266
266
  --ngs-color-danger: #fb7185;
267
- --ngs-color-on-danger: #4c0519;
267
+ --ngs-color-on-danger: contrast-color(var(--ngs-color-danger));
268
268
  --ngs-color-danger-container: #9f1239;
269
- --ngs-color-on-danger-container: #ffe4e6;
269
+ --ngs-color-on-danger-container: contrast-color(var(--ngs-color-danger-container));
270
270
  --ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #93c5fd 46%);
271
- --ngs-color-on-info: #0f1e46;
271
+ --ngs-color-on-info: contrast-color(var(--ngs-color-info));
272
272
  --ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #000000 58%);
273
- --ngs-color-on-info-container: color-mix(in srgb, var(--ngs-color-info), #ffffff 84%);
273
+ --ngs-color-on-info-container: contrast-color(var(--ngs-color-info-container));
274
274
  --ngs-color-success: #6ee7b7;
275
- --ngs-color-on-success: #042f2e;
275
+ --ngs-color-on-success: contrast-color(var(--ngs-color-success));
276
276
  --ngs-color-success-container: #047857;
277
- --ngs-color-on-success-container: #d1fae5;
277
+ --ngs-color-on-success-container: contrast-color(var(--ngs-color-success-container));
278
278
  --ngs-color-warning: #fbbf24;
279
- --ngs-color-on-warning: #451a03;
279
+ --ngs-color-on-warning: contrast-color(var(--ngs-color-warning));
280
280
  --ngs-color-warning-container: #92400e;
281
- --ngs-color-on-warning-container: #fef3c7;
281
+ --ngs-color-on-warning-container: contrast-color(var(--ngs-color-warning-container));
282
282
  --ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #090d1a 96%);
283
- --ngs-color-on-background: #eef2ff;
283
+ --ngs-color-on-background: contrast-color(var(--ngs-color-background));
284
284
  --ngs-color-surface: color-mix(in srgb, var(--ngs-color-primary-seed), #11162a 94%);
285
285
  --ngs-color-surface-bright: color-mix(in srgb, var(--ngs-color-primary-seed), #1b2138 90%);
286
- --ngs-color-on-surface: #eef2ff;
286
+ --ngs-color-on-surface: contrast-color(var(--ngs-color-surface));
287
287
  --ngs-color-on-surface-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #b6c0d6 86%);
288
288
  --ngs-color-neutral-50: color-mix(in srgb, var(--ngs-color-primary-seed), #090d1a 96%);
289
289
  --ngs-color-neutral-100: color-mix(in srgb, var(--ngs-color-primary-seed), #11162a 94%);