@ngstarter-ui/components 1.0.47 → 21.0.1

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 (8) hide show
  1. package/README.md +109 -109
  2. package/fesm2022/ngstarter-ui-components-color-scheme.mjs +24 -1
  3. package/fesm2022/ngstarter-ui-components-color-scheme.mjs.map +1 -1
  4. package/fesm2022/ngstarter-ui-components-core.mjs +41 -63
  5. package/fesm2022/ngstarter-ui-components-core.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/styles/_tokens.scss +95 -83
  8. package/styles/themes/modern.scss +52 -52
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": "21.0.1",
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%);
@@ -355,6 +355,12 @@
355
355
  --ngs-color-muted: var(--ngs-color-surface-container-high);
356
356
  --ngs-color-emphasis: color-mix(in srgb, var(--ngs-color-primary), #ffffff 40%);
357
357
  --ngs-color-strong: color-mix(in srgb, var(--ngs-color-primary), #ffffff 20%);
358
+ --ngs-nav-item-color: var(--ngs-color-neutral-800);
359
+ --ngs-nav-item-hover-color: var(--ngs-color-neutral-950);
360
+ --ngs-nav-item-active-color: var(--ngs-color-neutral-950);
361
+ --ngs-nav-item-icon-color: var(--ngs-color-neutral-700);
362
+ --ngs-nav-item-hover-icon-color: var(--ngs-color-neutral-950);
363
+ --ngs-nav-item-active-icon-color: var(--ngs-color-primary);
358
364
  }
359
365
  }
360
366
 
@@ -362,42 +368,42 @@
362
368
  [data-ngs-color-scheme='dark'] {
363
369
  color-scheme: dark;
364
370
  --ngs-color-primary: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 32%);
365
- --ngs-color-on-primary: #ffffff;
371
+ --ngs-color-on-primary: contrast-color(var(--ngs-color-primary));
366
372
  --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%);
373
+ --ngs-color-on-primary-container: contrast-color(var(--ngs-color-primary-container));
368
374
  --ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #cbd5e1 64%);
369
- --ngs-color-on-secondary: #0f172a;
375
+ --ngs-color-on-secondary: contrast-color(var(--ngs-color-secondary));
370
376
  --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%);
377
+ --ngs-color-on-secondary-container: contrast-color(var(--ngs-color-secondary-container));
372
378
  --ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #f9a8d4 48%);
373
- --ngs-color-on-tertiary: #0c4a6e;
379
+ --ngs-color-on-tertiary: contrast-color(var(--ngs-color-tertiary));
374
380
  --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%);
381
+ --ngs-color-on-tertiary-container: contrast-color(var(--ngs-color-tertiary-container));
376
382
  --ngs-color-danger: #f87171;
377
- --ngs-color-on-danger: #450a0a;
383
+ --ngs-color-on-danger: contrast-color(var(--ngs-color-danger));
378
384
  --ngs-color-danger-container: #7f1d1d;
379
- --ngs-color-on-danger-container: #fef2f2;
385
+ --ngs-color-on-danger-container: contrast-color(var(--ngs-color-danger-container));
380
386
  --ngs-color-danger-container-lowest: color-mix(in srgb, var(--ngs-color-danger), #000000 92%);
381
387
  --ngs-color-danger-container-low: color-mix(in srgb, var(--ngs-color-danger), #000000 88%);
382
388
  --ngs-color-danger-container-high: color-mix(in srgb, var(--ngs-color-danger), #000000 80%);
383
389
  --ngs-color-danger-container-highest: color-mix(in srgb, var(--ngs-color-danger), #000000 76%);
384
390
  --ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #93c5fd 52%);
385
- --ngs-color-on-info: #1e3a8a;
391
+ --ngs-color-on-info: contrast-color(var(--ngs-color-info));
386
392
  --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%);
393
+ --ngs-color-on-info-container: contrast-color(var(--ngs-color-info-container));
388
394
  --ngs-color-success: #4ade80;
389
- --ngs-color-on-success: #064e3b;
395
+ --ngs-color-on-success: contrast-color(var(--ngs-color-success));
390
396
  --ngs-color-success-container: #064e3b;
391
- --ngs-color-on-success-container: #dcfce7;
397
+ --ngs-color-on-success-container: contrast-color(var(--ngs-color-success-container));
392
398
  --ngs-color-warning: #fbbf24;
393
- --ngs-color-on-warning: #78350f;
399
+ --ngs-color-on-warning: contrast-color(var(--ngs-color-warning));
394
400
  --ngs-color-warning-container: #78350f;
395
- --ngs-color-on-warning-container: #fef3c7;
401
+ --ngs-color-on-warning-container: contrast-color(var(--ngs-color-warning-container));
396
402
  --ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #0f172a 96%);
397
- --ngs-color-on-background: #f8fafc;
403
+ --ngs-color-on-background: contrast-color(var(--ngs-color-background));
398
404
  --ngs-color-surface: color-mix(in srgb, var(--ngs-color-primary-seed), #0f172a 94%);
399
405
  --ngs-color-surface-bright: color-mix(in srgb, var(--ngs-color-primary-seed), #1e293b 90%);
400
- --ngs-color-on-surface: #f8fafc;
406
+ --ngs-color-on-surface: contrast-color(var(--ngs-color-surface));
401
407
  --ngs-color-on-surface-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #94a3b8 86%);
402
408
  --ngs-color-neutral-50: color-mix(in srgb, var(--ngs-color-primary-seed), #020617 96%);
403
409
  --ngs-color-neutral-100: color-mix(in srgb, var(--ngs-color-primary-seed), #0f172a 94%);
@@ -424,6 +430,12 @@
424
430
  --ngs-color-muted: var(--ngs-color-surface-container-high);
425
431
  --ngs-color-emphasis: color-mix(in srgb, var(--ngs-color-primary), #ffffff 40%);
426
432
  --ngs-color-strong: color-mix(in srgb, var(--ngs-color-primary), #ffffff 20%);
433
+ --ngs-nav-item-color: var(--ngs-color-neutral-800);
434
+ --ngs-nav-item-hover-color: var(--ngs-color-neutral-950);
435
+ --ngs-nav-item-active-color: var(--ngs-color-neutral-950);
436
+ --ngs-nav-item-icon-color: var(--ngs-color-neutral-700);
437
+ --ngs-nav-item-hover-icon-color: var(--ngs-color-neutral-950);
438
+ --ngs-nav-item-active-icon-color: var(--ngs-color-primary);
427
439
  }
428
440
 
429
441
  [data-ngs-theme='modern']:not([data-ngs-color-scheme='dark']):not(.dark) {
@@ -439,38 +451,38 @@
439
451
 
440
452
  --ngs-color-primary-seed: #4f46e5;
441
453
  --ngs-color-primary: var(--ngs-color-primary-seed);
442
- --ngs-color-on-primary: #ffffff;
454
+ --ngs-color-on-primary: contrast-color(var(--ngs-color-primary));
443
455
  --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%);
456
+ --ngs-color-on-primary-container: contrast-color(var(--ngs-color-primary-container));
445
457
  --ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #0f766e 58%);
446
- --ngs-color-on-secondary: #ffffff;
458
+ --ngs-color-on-secondary: contrast-color(var(--ngs-color-secondary));
447
459
  --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%);
460
+ --ngs-color-on-secondary-container: contrast-color(var(--ngs-color-secondary-container));
449
461
  --ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #db2777 50%);
450
- --ngs-color-on-tertiary: #ffffff;
462
+ --ngs-color-on-tertiary: contrast-color(var(--ngs-color-tertiary));
451
463
  --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%);
464
+ --ngs-color-on-tertiary-container: contrast-color(var(--ngs-color-tertiary-container));
453
465
  --ngs-color-danger: #e11d48;
454
- --ngs-color-on-danger: #ffffff;
466
+ --ngs-color-on-danger: contrast-color(var(--ngs-color-danger));
455
467
  --ngs-color-danger-container: #ffe4e6;
456
- --ngs-color-on-danger-container: #9f1239;
468
+ --ngs-color-on-danger-container: contrast-color(var(--ngs-color-danger-container));
457
469
  --ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #2563eb 40%);
458
- --ngs-color-on-info: #ffffff;
470
+ --ngs-color-on-info: contrast-color(var(--ngs-color-info));
459
471
  --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%);
472
+ --ngs-color-on-info-container: contrast-color(var(--ngs-color-info-container));
461
473
  --ngs-color-success: #059669;
462
- --ngs-color-on-success: #ffffff;
474
+ --ngs-color-on-success: contrast-color(var(--ngs-color-success));
463
475
  --ngs-color-success-container: #d1fae5;
464
- --ngs-color-on-success-container: #065f46;
476
+ --ngs-color-on-success-container: contrast-color(var(--ngs-color-success-container));
465
477
  --ngs-color-warning: #d97706;
466
- --ngs-color-on-warning: #ffffff;
478
+ --ngs-color-on-warning: contrast-color(var(--ngs-color-warning));
467
479
  --ngs-color-warning-container: #fef3c7;
468
- --ngs-color-on-warning-container: #92400e;
480
+ --ngs-color-on-warning-container: contrast-color(var(--ngs-color-warning-container));
469
481
  --ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #f7f8ff 98%);
470
- --ngs-color-on-background: #172033;
482
+ --ngs-color-on-background: contrast-color(var(--ngs-color-background));
471
483
  --ngs-color-surface: color-mix(in srgb, var(--ngs-color-primary-seed), #f9fbff 98%);
472
484
  --ngs-color-surface-bright: #ffffff;
473
- --ngs-color-on-surface: #172033;
485
+ --ngs-color-on-surface: contrast-color(var(--ngs-color-surface));
474
486
  --ngs-color-on-surface-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #667085 88%);
475
487
  --ngs-color-neutral-50: color-mix(in srgb, var(--ngs-color-primary-seed), #fafbff 98%);
476
488
  --ngs-color-neutral-100: color-mix(in srgb, var(--ngs-color-primary-seed), #f3f5fb 96%);
@@ -568,38 +580,38 @@
568
580
  [data-ngs-theme='modern'][data-ngs-color-scheme='dark'] {
569
581
  --ngs-color-primary-seed: #4f46e5;
570
582
  --ngs-color-primary: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 42%);
571
- --ngs-color-on-primary: #111827;
583
+ --ngs-color-on-primary: contrast-color(var(--ngs-color-primary));
572
584
  --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%);
585
+ --ngs-color-on-primary-container: contrast-color(var(--ngs-color-primary-container));
574
586
  --ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #5eead4 58%);
575
- --ngs-color-on-secondary: #042f2e;
587
+ --ngs-color-on-secondary: contrast-color(var(--ngs-color-secondary));
576
588
  --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%);
589
+ --ngs-color-on-secondary-container: contrast-color(var(--ngs-color-secondary-container));
578
590
  --ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #f9a8d4 50%);
579
- --ngs-color-on-tertiary: #500724;
591
+ --ngs-color-on-tertiary: contrast-color(var(--ngs-color-tertiary));
580
592
  --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%);
593
+ --ngs-color-on-tertiary-container: contrast-color(var(--ngs-color-tertiary-container));
582
594
  --ngs-color-danger: #fb7185;
583
- --ngs-color-on-danger: #4c0519;
595
+ --ngs-color-on-danger: contrast-color(var(--ngs-color-danger));
584
596
  --ngs-color-danger-container: #9f1239;
585
- --ngs-color-on-danger-container: #ffe4e6;
597
+ --ngs-color-on-danger-container: contrast-color(var(--ngs-color-danger-container));
586
598
  --ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #93c5fd 46%);
587
- --ngs-color-on-info: #0f1e46;
599
+ --ngs-color-on-info: contrast-color(var(--ngs-color-info));
588
600
  --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%);
601
+ --ngs-color-on-info-container: contrast-color(var(--ngs-color-info-container));
590
602
  --ngs-color-success: #6ee7b7;
591
- --ngs-color-on-success: #042f2e;
603
+ --ngs-color-on-success: contrast-color(var(--ngs-color-success));
592
604
  --ngs-color-success-container: #047857;
593
- --ngs-color-on-success-container: #d1fae5;
605
+ --ngs-color-on-success-container: contrast-color(var(--ngs-color-success-container));
594
606
  --ngs-color-warning: #fbbf24;
595
- --ngs-color-on-warning: #451a03;
607
+ --ngs-color-on-warning: contrast-color(var(--ngs-color-warning));
596
608
  --ngs-color-warning-container: #92400e;
597
- --ngs-color-on-warning-container: #fef3c7;
609
+ --ngs-color-on-warning-container: contrast-color(var(--ngs-color-warning-container));
598
610
  --ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #090d1a 96%);
599
- --ngs-color-on-background: #eef2ff;
611
+ --ngs-color-on-background: contrast-color(var(--ngs-color-background));
600
612
  --ngs-color-surface: color-mix(in srgb, var(--ngs-color-primary-seed), #11162a 94%);
601
613
  --ngs-color-surface-bright: color-mix(in srgb, var(--ngs-color-primary-seed), #1b2138 90%);
602
- --ngs-color-on-surface: #eef2ff;
614
+ --ngs-color-on-surface: contrast-color(var(--ngs-color-surface));
603
615
  --ngs-color-on-surface-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #b6c0d6 86%);
604
616
  --ngs-color-neutral-50: color-mix(in srgb, var(--ngs-color-primary-seed), #090d1a 96%);
605
617
  --ngs-color-neutral-100: color-mix(in srgb, var(--ngs-color-primary-seed), #11162a 94%);
@@ -651,12 +663,12 @@
651
663
  --ngs-table-header-bg: linear-gradient(135deg, var(--ngs-color-surface-container), var(--ngs-color-secondary-container));
652
664
  --ngs-table-row-bg: var(--ngs-color-surface);
653
665
  --ngs-table-border-color: var(--ngs-color-border);
654
- --ngs-nav-item-color: #b6c0d6;
666
+ --ngs-nav-item-color: #d5dcf0;
655
667
  --ngs-nav-item-hover-color: #eef2ff;
656
668
  --ngs-nav-item-active-color: #eef2ff;
657
669
  --ngs-nav-item-hover-bg: var(--ngs-state-hover-bg);
658
670
  --ngs-nav-item-active-bg: var(--ngs-state-selected-bg);
659
- --ngs-nav-item-icon-color: #8d98b5;
671
+ --ngs-nav-item-icon-color: #b6c0d6;
660
672
  --ngs-nav-item-hover-icon-color: var(--ngs-color-primary);
661
673
  --ngs-nav-item-active-icon-color: var(--ngs-color-secondary);
662
674
  }
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%);
@@ -233,12 +233,12 @@
233
233
  --ngs-table-header-bg: linear-gradient(135deg, var(--ngs-color-surface-container), var(--ngs-color-secondary-container));
234
234
  --ngs-table-row-bg: var(--ngs-color-surface);
235
235
  --ngs-table-border-color: var(--ngs-color-border);
236
- --ngs-nav-item-color: #b6c0d6;
236
+ --ngs-nav-item-color: #d5dcf0;
237
237
  --ngs-nav-item-hover-color: #eef2ff;
238
238
  --ngs-nav-item-active-color: #eef2ff;
239
239
  --ngs-nav-item-hover-bg: var(--ngs-state-hover-bg);
240
240
  --ngs-nav-item-active-bg: var(--ngs-state-selected-bg);
241
- --ngs-nav-item-icon-color: #8d98b5;
241
+ --ngs-nav-item-icon-color: #b6c0d6;
242
242
  --ngs-nav-item-hover-icon-color: var(--ngs-color-primary);
243
243
  --ngs-nav-item-active-icon-color: var(--ngs-color-secondary);
244
244
  }
@@ -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%);
@@ -335,12 +335,12 @@
335
335
  --ngs-table-header-bg: linear-gradient(135deg, var(--ngs-color-surface-container), var(--ngs-color-secondary-container));
336
336
  --ngs-table-row-bg: var(--ngs-color-surface);
337
337
  --ngs-table-border-color: var(--ngs-color-border);
338
- --ngs-nav-item-color: #b6c0d6;
338
+ --ngs-nav-item-color: #d5dcf0;
339
339
  --ngs-nav-item-hover-color: #eef2ff;
340
340
  --ngs-nav-item-active-color: #eef2ff;
341
341
  --ngs-nav-item-hover-bg: var(--ngs-state-hover-bg);
342
342
  --ngs-nav-item-active-bg: var(--ngs-state-selected-bg);
343
- --ngs-nav-item-icon-color: #8d98b5;
343
+ --ngs-nav-item-icon-color: #b6c0d6;
344
344
  --ngs-nav-item-hover-icon-color: var(--ngs-color-primary);
345
345
  --ngs-nav-item-active-icon-color: var(--ngs-color-secondary);
346
346
  }