@ngstarter-ui/components 21.0.1 → 21.0.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 (5) hide show
  1. package/fesm2022/ngstarter-ui-components-core.mjs +80 -52
  2. package/fesm2022/ngstarter-ui-components-core.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/styles/_tokens.scss +84 -84
  5. package/styles/themes/modern.scss +50 -50
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": "21.0.1",
4
+ "version": "21.0.2",
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: contrast-color(var(--ngs-color-primary));
28
+ --ngs-color-on-primary: #ffffff;
29
29
  --ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 84%);
30
- --ngs-color-on-primary-container: contrast-color(var(--ngs-color-primary-container));
30
+ --ngs-color-on-primary-container: #000000;
31
31
  --ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #334155 70%);
32
- --ngs-color-on-secondary: contrast-color(var(--ngs-color-secondary));
32
+ --ngs-color-on-secondary: #ffffff;
33
33
  --ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #ffffff 88%);
34
- --ngs-color-on-secondary-container: contrast-color(var(--ngs-color-secondary-container));
34
+ --ngs-color-on-secondary-container: #000000;
35
35
  --ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #db2777 45%);
36
- --ngs-color-on-tertiary: contrast-color(var(--ngs-color-tertiary));
36
+ --ngs-color-on-tertiary: #ffffff;
37
37
  --ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #ffffff 86%);
38
- --ngs-color-on-tertiary-container: contrast-color(var(--ngs-color-tertiary-container));
38
+ --ngs-color-on-tertiary-container: #000000;
39
39
  --ngs-color-danger: #ef4444;
40
- --ngs-color-on-danger: contrast-color(var(--ngs-color-danger));
40
+ --ngs-color-on-danger: #000000;
41
41
  --ngs-color-danger-container: #fee2e2;
42
- --ngs-color-on-danger-container: contrast-color(var(--ngs-color-danger-container));
42
+ --ngs-color-on-danger-container: #000000;
43
43
  --ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #2563eb 35%);
44
- --ngs-color-on-info: contrast-color(var(--ngs-color-info));
44
+ --ngs-color-on-info: #ffffff;
45
45
  --ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #ffffff 86%);
46
- --ngs-color-on-info-container: contrast-color(var(--ngs-color-info-container));
46
+ --ngs-color-on-info-container: #000000;
47
47
  --ngs-color-success: #22c55e;
48
- --ngs-color-on-success: contrast-color(var(--ngs-color-success));
48
+ --ngs-color-on-success: #000000;
49
49
  --ngs-color-success-container: #dcfce7;
50
- --ngs-color-on-success-container: contrast-color(var(--ngs-color-success-container));
50
+ --ngs-color-on-success-container: #000000;
51
51
  --ngs-color-warning: #f59e0b;
52
- --ngs-color-on-warning: contrast-color(var(--ngs-color-warning));
52
+ --ngs-color-on-warning: #000000;
53
53
  --ngs-color-warning-container: #fef3c7;
54
- --ngs-color-on-warning-container: contrast-color(var(--ngs-color-warning-container));
54
+ --ngs-color-on-warning-container: #000000;
55
55
 
56
56
  --ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 99%);
57
- --ngs-color-on-background: contrast-color(var(--ngs-color-background));
57
+ --ngs-color-on-background: #000000;
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: contrast-color(var(--ngs-color-surface));
60
+ --ngs-color-on-surface: #000000;
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: contrast-color(var(--ngs-color-orange-container));
120
+ --ngs-color-on-orange-container: #000000;
121
121
  --ngs-color-green-500: #22c55e;
122
122
 
123
123
  --ngs-density-scale: -9;
@@ -292,43 +292,43 @@
292
292
  @media (prefers-color-scheme: dark) {
293
293
  :root:not([data-ngs-color-scheme='light']) {
294
294
  color-scheme: dark;
295
- --ngs-color-primary: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 32%);
296
- --ngs-color-on-primary: contrast-color(var(--ngs-color-primary));
295
+ --ngs-color-primary: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 40%);
296
+ --ngs-color-on-primary: #000000;
297
297
  --ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #000000 42%);
298
- --ngs-color-on-primary-container: contrast-color(var(--ngs-color-primary-container));
298
+ --ngs-color-on-primary-container: #ffffff;
299
299
  --ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #cbd5e1 64%);
300
- --ngs-color-on-secondary: contrast-color(var(--ngs-color-secondary));
300
+ --ngs-color-on-secondary: #000000;
301
301
  --ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #000000 66%);
302
- --ngs-color-on-secondary-container: contrast-color(var(--ngs-color-secondary-container));
302
+ --ngs-color-on-secondary-container: #ffffff;
303
303
  --ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #f9a8d4 48%);
304
- --ngs-color-on-tertiary: contrast-color(var(--ngs-color-tertiary));
304
+ --ngs-color-on-tertiary: #000000;
305
305
  --ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #000000 58%);
306
- --ngs-color-on-tertiary-container: contrast-color(var(--ngs-color-tertiary-container));
306
+ --ngs-color-on-tertiary-container: #ffffff;
307
307
  --ngs-color-danger: #f87171;
308
- --ngs-color-on-danger: contrast-color(var(--ngs-color-danger));
308
+ --ngs-color-on-danger: #000000;
309
309
  --ngs-color-danger-container: #7f1d1d;
310
- --ngs-color-on-danger-container: contrast-color(var(--ngs-color-danger-container));
310
+ --ngs-color-on-danger-container: #ffffff;
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: contrast-color(var(--ngs-color-info));
316
+ --ngs-color-on-info: #000000;
317
317
  --ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #000000 58%);
318
- --ngs-color-on-info-container: contrast-color(var(--ngs-color-info-container));
318
+ --ngs-color-on-info-container: #ffffff;
319
319
  --ngs-color-success: #4ade80;
320
- --ngs-color-on-success: contrast-color(var(--ngs-color-success));
320
+ --ngs-color-on-success: #000000;
321
321
  --ngs-color-success-container: #064e3b;
322
- --ngs-color-on-success-container: contrast-color(var(--ngs-color-success-container));
322
+ --ngs-color-on-success-container: #ffffff;
323
323
  --ngs-color-warning: #fbbf24;
324
- --ngs-color-on-warning: contrast-color(var(--ngs-color-warning));
324
+ --ngs-color-on-warning: #000000;
325
325
  --ngs-color-warning-container: #78350f;
326
- --ngs-color-on-warning-container: contrast-color(var(--ngs-color-warning-container));
326
+ --ngs-color-on-warning-container: #ffffff;
327
327
  --ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #0f172a 96%);
328
- --ngs-color-on-background: contrast-color(var(--ngs-color-background));
328
+ --ngs-color-on-background: #ffffff;
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: contrast-color(var(--ngs-color-surface));
331
+ --ngs-color-on-surface: #ffffff;
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%);
@@ -367,43 +367,43 @@
367
367
  .dark,
368
368
  [data-ngs-color-scheme='dark'] {
369
369
  color-scheme: dark;
370
- --ngs-color-primary: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 32%);
371
- --ngs-color-on-primary: contrast-color(var(--ngs-color-primary));
370
+ --ngs-color-primary: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 40%);
371
+ --ngs-color-on-primary: #000000;
372
372
  --ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #000000 42%);
373
- --ngs-color-on-primary-container: contrast-color(var(--ngs-color-primary-container));
373
+ --ngs-color-on-primary-container: #ffffff;
374
374
  --ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #cbd5e1 64%);
375
- --ngs-color-on-secondary: contrast-color(var(--ngs-color-secondary));
375
+ --ngs-color-on-secondary: #000000;
376
376
  --ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #000000 66%);
377
- --ngs-color-on-secondary-container: contrast-color(var(--ngs-color-secondary-container));
377
+ --ngs-color-on-secondary-container: #ffffff;
378
378
  --ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #f9a8d4 48%);
379
- --ngs-color-on-tertiary: contrast-color(var(--ngs-color-tertiary));
379
+ --ngs-color-on-tertiary: #000000;
380
380
  --ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #000000 58%);
381
- --ngs-color-on-tertiary-container: contrast-color(var(--ngs-color-tertiary-container));
381
+ --ngs-color-on-tertiary-container: #ffffff;
382
382
  --ngs-color-danger: #f87171;
383
- --ngs-color-on-danger: contrast-color(var(--ngs-color-danger));
383
+ --ngs-color-on-danger: #000000;
384
384
  --ngs-color-danger-container: #7f1d1d;
385
- --ngs-color-on-danger-container: contrast-color(var(--ngs-color-danger-container));
385
+ --ngs-color-on-danger-container: #ffffff;
386
386
  --ngs-color-danger-container-lowest: color-mix(in srgb, var(--ngs-color-danger), #000000 92%);
387
387
  --ngs-color-danger-container-low: color-mix(in srgb, var(--ngs-color-danger), #000000 88%);
388
388
  --ngs-color-danger-container-high: color-mix(in srgb, var(--ngs-color-danger), #000000 80%);
389
389
  --ngs-color-danger-container-highest: color-mix(in srgb, var(--ngs-color-danger), #000000 76%);
390
390
  --ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #93c5fd 52%);
391
- --ngs-color-on-info: contrast-color(var(--ngs-color-info));
391
+ --ngs-color-on-info: #000000;
392
392
  --ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #000000 58%);
393
- --ngs-color-on-info-container: contrast-color(var(--ngs-color-info-container));
393
+ --ngs-color-on-info-container: #ffffff;
394
394
  --ngs-color-success: #4ade80;
395
- --ngs-color-on-success: contrast-color(var(--ngs-color-success));
395
+ --ngs-color-on-success: #000000;
396
396
  --ngs-color-success-container: #064e3b;
397
- --ngs-color-on-success-container: contrast-color(var(--ngs-color-success-container));
397
+ --ngs-color-on-success-container: #ffffff;
398
398
  --ngs-color-warning: #fbbf24;
399
- --ngs-color-on-warning: contrast-color(var(--ngs-color-warning));
399
+ --ngs-color-on-warning: #000000;
400
400
  --ngs-color-warning-container: #78350f;
401
- --ngs-color-on-warning-container: contrast-color(var(--ngs-color-warning-container));
401
+ --ngs-color-on-warning-container: #ffffff;
402
402
  --ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #0f172a 96%);
403
- --ngs-color-on-background: contrast-color(var(--ngs-color-background));
403
+ --ngs-color-on-background: #ffffff;
404
404
  --ngs-color-surface: color-mix(in srgb, var(--ngs-color-primary-seed), #0f172a 94%);
405
405
  --ngs-color-surface-bright: color-mix(in srgb, var(--ngs-color-primary-seed), #1e293b 90%);
406
- --ngs-color-on-surface: contrast-color(var(--ngs-color-surface));
406
+ --ngs-color-on-surface: #ffffff;
407
407
  --ngs-color-on-surface-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #94a3b8 86%);
408
408
  --ngs-color-neutral-50: color-mix(in srgb, var(--ngs-color-primary-seed), #020617 96%);
409
409
  --ngs-color-neutral-100: color-mix(in srgb, var(--ngs-color-primary-seed), #0f172a 94%);
@@ -451,38 +451,38 @@
451
451
 
452
452
  --ngs-color-primary-seed: #4f46e5;
453
453
  --ngs-color-primary: var(--ngs-color-primary-seed);
454
- --ngs-color-on-primary: contrast-color(var(--ngs-color-primary));
454
+ --ngs-color-on-primary: #ffffff;
455
455
  --ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 86%);
456
- --ngs-color-on-primary-container: contrast-color(var(--ngs-color-primary-container));
456
+ --ngs-color-on-primary-container: #000000;
457
457
  --ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #0f766e 58%);
458
- --ngs-color-on-secondary: contrast-color(var(--ngs-color-secondary));
458
+ --ngs-color-on-secondary: #ffffff;
459
459
  --ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #ffffff 84%);
460
- --ngs-color-on-secondary-container: contrast-color(var(--ngs-color-secondary-container));
460
+ --ngs-color-on-secondary-container: #000000;
461
461
  --ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #db2777 50%);
462
- --ngs-color-on-tertiary: contrast-color(var(--ngs-color-tertiary));
462
+ --ngs-color-on-tertiary: #ffffff;
463
463
  --ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #ffffff 86%);
464
- --ngs-color-on-tertiary-container: contrast-color(var(--ngs-color-tertiary-container));
464
+ --ngs-color-on-tertiary-container: #000000;
465
465
  --ngs-color-danger: #e11d48;
466
- --ngs-color-on-danger: contrast-color(var(--ngs-color-danger));
466
+ --ngs-color-on-danger: #ffffff;
467
467
  --ngs-color-danger-container: #ffe4e6;
468
- --ngs-color-on-danger-container: contrast-color(var(--ngs-color-danger-container));
468
+ --ngs-color-on-danger-container: #000000;
469
469
  --ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #2563eb 40%);
470
- --ngs-color-on-info: contrast-color(var(--ngs-color-info));
470
+ --ngs-color-on-info: #ffffff;
471
471
  --ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #ffffff 86%);
472
- --ngs-color-on-info-container: contrast-color(var(--ngs-color-info-container));
472
+ --ngs-color-on-info-container: #000000;
473
473
  --ngs-color-success: #059669;
474
- --ngs-color-on-success: contrast-color(var(--ngs-color-success));
474
+ --ngs-color-on-success: #000000;
475
475
  --ngs-color-success-container: #d1fae5;
476
- --ngs-color-on-success-container: contrast-color(var(--ngs-color-success-container));
476
+ --ngs-color-on-success-container: #000000;
477
477
  --ngs-color-warning: #d97706;
478
- --ngs-color-on-warning: contrast-color(var(--ngs-color-warning));
478
+ --ngs-color-on-warning: #000000;
479
479
  --ngs-color-warning-container: #fef3c7;
480
- --ngs-color-on-warning-container: contrast-color(var(--ngs-color-warning-container));
480
+ --ngs-color-on-warning-container: #000000;
481
481
  --ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #f7f8ff 98%);
482
- --ngs-color-on-background: contrast-color(var(--ngs-color-background));
482
+ --ngs-color-on-background: #000000;
483
483
  --ngs-color-surface: color-mix(in srgb, var(--ngs-color-primary-seed), #f9fbff 98%);
484
484
  --ngs-color-surface-bright: #ffffff;
485
- --ngs-color-on-surface: contrast-color(var(--ngs-color-surface));
485
+ --ngs-color-on-surface: #000000;
486
486
  --ngs-color-on-surface-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #667085 88%);
487
487
  --ngs-color-neutral-50: color-mix(in srgb, var(--ngs-color-primary-seed), #fafbff 98%);
488
488
  --ngs-color-neutral-100: color-mix(in srgb, var(--ngs-color-primary-seed), #f3f5fb 96%);
@@ -579,39 +579,39 @@
579
579
  .dark[data-ngs-theme='modern'],
580
580
  [data-ngs-theme='modern'][data-ngs-color-scheme='dark'] {
581
581
  --ngs-color-primary-seed: #4f46e5;
582
- --ngs-color-primary: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 42%);
583
- --ngs-color-on-primary: contrast-color(var(--ngs-color-primary));
582
+ --ngs-color-primary: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 48%);
583
+ --ngs-color-on-primary: #000000;
584
584
  --ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #000000 42%);
585
- --ngs-color-on-primary-container: contrast-color(var(--ngs-color-primary-container));
585
+ --ngs-color-on-primary-container: #ffffff;
586
586
  --ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #5eead4 58%);
587
- --ngs-color-on-secondary: contrast-color(var(--ngs-color-secondary));
587
+ --ngs-color-on-secondary: #000000;
588
588
  --ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #000000 62%);
589
- --ngs-color-on-secondary-container: contrast-color(var(--ngs-color-secondary-container));
589
+ --ngs-color-on-secondary-container: #ffffff;
590
590
  --ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #f9a8d4 50%);
591
- --ngs-color-on-tertiary: contrast-color(var(--ngs-color-tertiary));
591
+ --ngs-color-on-tertiary: #000000;
592
592
  --ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #000000 58%);
593
- --ngs-color-on-tertiary-container: contrast-color(var(--ngs-color-tertiary-container));
593
+ --ngs-color-on-tertiary-container: #ffffff;
594
594
  --ngs-color-danger: #fb7185;
595
- --ngs-color-on-danger: contrast-color(var(--ngs-color-danger));
595
+ --ngs-color-on-danger: #000000;
596
596
  --ngs-color-danger-container: #9f1239;
597
- --ngs-color-on-danger-container: contrast-color(var(--ngs-color-danger-container));
597
+ --ngs-color-on-danger-container: #ffffff;
598
598
  --ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #93c5fd 46%);
599
- --ngs-color-on-info: contrast-color(var(--ngs-color-info));
599
+ --ngs-color-on-info: #000000;
600
600
  --ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #000000 58%);
601
- --ngs-color-on-info-container: contrast-color(var(--ngs-color-info-container));
601
+ --ngs-color-on-info-container: #ffffff;
602
602
  --ngs-color-success: #6ee7b7;
603
- --ngs-color-on-success: contrast-color(var(--ngs-color-success));
603
+ --ngs-color-on-success: #000000;
604
604
  --ngs-color-success-container: #047857;
605
- --ngs-color-on-success-container: contrast-color(var(--ngs-color-success-container));
605
+ --ngs-color-on-success-container: #ffffff;
606
606
  --ngs-color-warning: #fbbf24;
607
- --ngs-color-on-warning: contrast-color(var(--ngs-color-warning));
607
+ --ngs-color-on-warning: #000000;
608
608
  --ngs-color-warning-container: #92400e;
609
- --ngs-color-on-warning-container: contrast-color(var(--ngs-color-warning-container));
609
+ --ngs-color-on-warning-container: #ffffff;
610
610
  --ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #090d1a 96%);
611
- --ngs-color-on-background: contrast-color(var(--ngs-color-background));
611
+ --ngs-color-on-background: #ffffff;
612
612
  --ngs-color-surface: color-mix(in srgb, var(--ngs-color-primary-seed), #11162a 94%);
613
613
  --ngs-color-surface-bright: color-mix(in srgb, var(--ngs-color-primary-seed), #1b2138 90%);
614
- --ngs-color-on-surface: contrast-color(var(--ngs-color-surface));
614
+ --ngs-color-on-surface: #ffffff;
615
615
  --ngs-color-on-surface-variant: color-mix(in srgb, var(--ngs-color-primary-seed), #b6c0d6 86%);
616
616
  --ngs-color-neutral-50: color-mix(in srgb, var(--ngs-color-primary-seed), #090d1a 96%);
617
617
  --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: contrast-color(var(--ngs-color-primary));
22
+ --ngs-color-on-primary: #ffffff;
23
23
  --ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 86%);
24
- --ngs-color-on-primary-container: contrast-color(var(--ngs-color-primary-container));
24
+ --ngs-color-on-primary-container: #000000;
25
25
  --ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #0f766e 58%);
26
- --ngs-color-on-secondary: contrast-color(var(--ngs-color-secondary));
26
+ --ngs-color-on-secondary: #ffffff;
27
27
  --ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #ffffff 84%);
28
- --ngs-color-on-secondary-container: contrast-color(var(--ngs-color-secondary-container));
28
+ --ngs-color-on-secondary-container: #000000;
29
29
  --ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #db2777 50%);
30
- --ngs-color-on-tertiary: contrast-color(var(--ngs-color-tertiary));
30
+ --ngs-color-on-tertiary: #ffffff;
31
31
  --ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #ffffff 86%);
32
- --ngs-color-on-tertiary-container: contrast-color(var(--ngs-color-tertiary-container));
32
+ --ngs-color-on-tertiary-container: #000000;
33
33
  --ngs-color-danger: #e11d48;
34
- --ngs-color-on-danger: contrast-color(var(--ngs-color-danger));
34
+ --ngs-color-on-danger: #ffffff;
35
35
  --ngs-color-danger-container: #ffe4e6;
36
- --ngs-color-on-danger-container: contrast-color(var(--ngs-color-danger-container));
36
+ --ngs-color-on-danger-container: #000000;
37
37
  --ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #2563eb 40%);
38
- --ngs-color-on-info: contrast-color(var(--ngs-color-info));
38
+ --ngs-color-on-info: #ffffff;
39
39
  --ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #ffffff 86%);
40
- --ngs-color-on-info-container: contrast-color(var(--ngs-color-info-container));
40
+ --ngs-color-on-info-container: #000000;
41
41
  --ngs-color-success: #059669;
42
- --ngs-color-on-success: contrast-color(var(--ngs-color-success));
42
+ --ngs-color-on-success: #000000;
43
43
  --ngs-color-success-container: #d1fae5;
44
- --ngs-color-on-success-container: contrast-color(var(--ngs-color-success-container));
44
+ --ngs-color-on-success-container: #000000;
45
45
  --ngs-color-warning: #d97706;
46
- --ngs-color-on-warning: contrast-color(var(--ngs-color-warning));
46
+ --ngs-color-on-warning: #000000;
47
47
  --ngs-color-warning-container: #fef3c7;
48
- --ngs-color-on-warning-container: contrast-color(var(--ngs-color-warning-container));
48
+ --ngs-color-on-warning-container: #000000;
49
49
  --ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #f7f8ff 98%);
50
- --ngs-color-on-background: contrast-color(var(--ngs-color-background));
50
+ --ngs-color-on-background: #000000;
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: contrast-color(var(--ngs-color-surface));
53
+ --ngs-color-on-surface: #000000;
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%);
@@ -149,39 +149,39 @@
149
149
  color-scheme: dark;
150
150
 
151
151
  --ngs-color-primary-seed: #4f46e5;
152
- --ngs-color-primary: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 42%);
153
- --ngs-color-on-primary: contrast-color(var(--ngs-color-primary));
152
+ --ngs-color-primary: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 48%);
153
+ --ngs-color-on-primary: #000000;
154
154
  --ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #000000 42%);
155
- --ngs-color-on-primary-container: contrast-color(var(--ngs-color-primary-container));
155
+ --ngs-color-on-primary-container: #ffffff;
156
156
  --ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #5eead4 58%);
157
- --ngs-color-on-secondary: contrast-color(var(--ngs-color-secondary));
157
+ --ngs-color-on-secondary: #000000;
158
158
  --ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #000000 62%);
159
- --ngs-color-on-secondary-container: contrast-color(var(--ngs-color-secondary-container));
159
+ --ngs-color-on-secondary-container: #ffffff;
160
160
  --ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #f9a8d4 50%);
161
- --ngs-color-on-tertiary: contrast-color(var(--ngs-color-tertiary));
161
+ --ngs-color-on-tertiary: #000000;
162
162
  --ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #000000 58%);
163
- --ngs-color-on-tertiary-container: contrast-color(var(--ngs-color-tertiary-container));
163
+ --ngs-color-on-tertiary-container: #ffffff;
164
164
  --ngs-color-danger: #fb7185;
165
- --ngs-color-on-danger: contrast-color(var(--ngs-color-danger));
165
+ --ngs-color-on-danger: #000000;
166
166
  --ngs-color-danger-container: #9f1239;
167
- --ngs-color-on-danger-container: contrast-color(var(--ngs-color-danger-container));
167
+ --ngs-color-on-danger-container: #ffffff;
168
168
  --ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #93c5fd 46%);
169
- --ngs-color-on-info: contrast-color(var(--ngs-color-info));
169
+ --ngs-color-on-info: #000000;
170
170
  --ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #000000 58%);
171
- --ngs-color-on-info-container: contrast-color(var(--ngs-color-info-container));
171
+ --ngs-color-on-info-container: #ffffff;
172
172
  --ngs-color-success: #6ee7b7;
173
- --ngs-color-on-success: contrast-color(var(--ngs-color-success));
173
+ --ngs-color-on-success: #000000;
174
174
  --ngs-color-success-container: #047857;
175
- --ngs-color-on-success-container: contrast-color(var(--ngs-color-success-container));
175
+ --ngs-color-on-success-container: #ffffff;
176
176
  --ngs-color-warning: #fbbf24;
177
- --ngs-color-on-warning: contrast-color(var(--ngs-color-warning));
177
+ --ngs-color-on-warning: #000000;
178
178
  --ngs-color-warning-container: #92400e;
179
- --ngs-color-on-warning-container: contrast-color(var(--ngs-color-warning-container));
179
+ --ngs-color-on-warning-container: #ffffff;
180
180
  --ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #090d1a 96%);
181
- --ngs-color-on-background: contrast-color(var(--ngs-color-background));
181
+ --ngs-color-on-background: #ffffff;
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: contrast-color(var(--ngs-color-surface));
184
+ --ngs-color-on-surface: #ffffff;
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%);
@@ -251,39 +251,39 @@
251
251
  color-scheme: dark;
252
252
 
253
253
  --ngs-color-primary-seed: #4f46e5;
254
- --ngs-color-primary: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 42%);
255
- --ngs-color-on-primary: contrast-color(var(--ngs-color-primary));
254
+ --ngs-color-primary: color-mix(in srgb, var(--ngs-color-primary-seed), #ffffff 48%);
255
+ --ngs-color-on-primary: #000000;
256
256
  --ngs-color-primary-container: color-mix(in srgb, var(--ngs-color-primary-seed), #000000 42%);
257
- --ngs-color-on-primary-container: contrast-color(var(--ngs-color-primary-container));
257
+ --ngs-color-on-primary-container: #ffffff;
258
258
  --ngs-color-secondary: color-mix(in srgb, var(--ngs-color-primary-seed), #5eead4 58%);
259
- --ngs-color-on-secondary: contrast-color(var(--ngs-color-secondary));
259
+ --ngs-color-on-secondary: #000000;
260
260
  --ngs-color-secondary-container: color-mix(in srgb, var(--ngs-color-secondary), #000000 62%);
261
- --ngs-color-on-secondary-container: contrast-color(var(--ngs-color-secondary-container));
261
+ --ngs-color-on-secondary-container: #ffffff;
262
262
  --ngs-color-tertiary: color-mix(in srgb, var(--ngs-color-primary-seed), #f9a8d4 50%);
263
- --ngs-color-on-tertiary: contrast-color(var(--ngs-color-tertiary));
263
+ --ngs-color-on-tertiary: #000000;
264
264
  --ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #000000 58%);
265
- --ngs-color-on-tertiary-container: contrast-color(var(--ngs-color-tertiary-container));
265
+ --ngs-color-on-tertiary-container: #ffffff;
266
266
  --ngs-color-danger: #fb7185;
267
- --ngs-color-on-danger: contrast-color(var(--ngs-color-danger));
267
+ --ngs-color-on-danger: #000000;
268
268
  --ngs-color-danger-container: #9f1239;
269
- --ngs-color-on-danger-container: contrast-color(var(--ngs-color-danger-container));
269
+ --ngs-color-on-danger-container: #ffffff;
270
270
  --ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #93c5fd 46%);
271
- --ngs-color-on-info: contrast-color(var(--ngs-color-info));
271
+ --ngs-color-on-info: #000000;
272
272
  --ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #000000 58%);
273
- --ngs-color-on-info-container: contrast-color(var(--ngs-color-info-container));
273
+ --ngs-color-on-info-container: #ffffff;
274
274
  --ngs-color-success: #6ee7b7;
275
- --ngs-color-on-success: contrast-color(var(--ngs-color-success));
275
+ --ngs-color-on-success: #000000;
276
276
  --ngs-color-success-container: #047857;
277
- --ngs-color-on-success-container: contrast-color(var(--ngs-color-success-container));
277
+ --ngs-color-on-success-container: #ffffff;
278
278
  --ngs-color-warning: #fbbf24;
279
- --ngs-color-on-warning: contrast-color(var(--ngs-color-warning));
279
+ --ngs-color-on-warning: #000000;
280
280
  --ngs-color-warning-container: #92400e;
281
- --ngs-color-on-warning-container: contrast-color(var(--ngs-color-warning-container));
281
+ --ngs-color-on-warning-container: #ffffff;
282
282
  --ngs-color-background: color-mix(in srgb, var(--ngs-color-primary-seed), #090d1a 96%);
283
- --ngs-color-on-background: contrast-color(var(--ngs-color-background));
283
+ --ngs-color-on-background: #ffffff;
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: contrast-color(var(--ngs-color-surface));
286
+ --ngs-color-on-surface: #ffffff;
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%);