@kanso-protocol/core 0.4.0 → 0.5.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 (4) hide show
  1. package/package.json +1 -1
  2. package/styles/_tokens.scss +36 -35
  3. package/styles/dark.css +21 -31
  4. package/styles/tokens.css +36 -35
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kanso-protocol/core",
3
- "version": "0.4.0",
3
+ "version": "0.5.1",
4
4
  "description": "Kanso Protocol — core design tokens (CSS/SCSS variables + generated TS constants).",
5
5
  "license": "MIT",
6
6
  "author": "GregNBlack",
package/styles/_tokens.scss CHANGED
@@ -3,6 +3,7 @@
3
3
 
4
4
  $kp-color-white: #ffffff;
5
5
  $kp-color-black: #09090b;
6
+ $kp-color-foreground-on-saturated: #ffffff; // Text/icon color on saturated brand backgrounds — solid buttons, filled badges, alert solid title, selected pagination items, stepper indicators. Stays #FFFFFF in BOTH modes (no dark.json override) — semantic primitive that decouples 'fg on saturated' from `color.white` (which is the elevation surface and inverts to #18181B in dark).
6
7
  $kp-color-gray-50: #fafafa;
7
8
  $kp-color-gray-100: #f4f4f5;
8
9
  $kp-color-gray-200: #e4e4e7;
@@ -253,12 +254,12 @@ $kp-color-primary-default-bg-active: $kp-color-blue-800;
253
254
  $kp-color-primary-default-bg-focus: $kp-color-blue-600;
254
255
  $kp-color-primary-default-bg-disabled: $kp-color-gray-200;
255
256
  $kp-color-primary-default-bg-loading: $kp-color-blue-500;
256
- $kp-color-primary-default-fg-rest: $kp-color-white;
257
- $kp-color-primary-default-fg-hover: $kp-color-white;
258
- $kp-color-primary-default-fg-active: $kp-color-white;
259
- $kp-color-primary-default-fg-focus: $kp-color-white;
257
+ $kp-color-primary-default-fg-rest: $kp-color-foreground-on-saturated;
258
+ $kp-color-primary-default-fg-hover: $kp-color-foreground-on-saturated;
259
+ $kp-color-primary-default-fg-active: $kp-color-foreground-on-saturated;
260
+ $kp-color-primary-default-fg-focus: $kp-color-foreground-on-saturated;
260
261
  $kp-color-primary-default-fg-disabled: $kp-color-gray-400;
261
- $kp-color-primary-default-fg-loading: $kp-color-white;
262
+ $kp-color-primary-default-fg-loading: $kp-color-foreground-on-saturated;
262
263
  $kp-color-primary-default-border-rest: $kp-color-blue-600;
263
264
  $kp-color-primary-default-border-hover: $kp-color-blue-700;
264
265
  $kp-color-primary-default-border-active: $kp-color-blue-800;
@@ -307,12 +308,12 @@ $kp-color-danger-default-bg-active: $kp-color-red-800;
307
308
  $kp-color-danger-default-bg-focus: $kp-color-red-600;
308
309
  $kp-color-danger-default-bg-disabled: $kp-color-gray-200;
309
310
  $kp-color-danger-default-bg-loading: $kp-color-red-500;
310
- $kp-color-danger-default-fg-rest: $kp-color-white;
311
- $kp-color-danger-default-fg-hover: $kp-color-white;
312
- $kp-color-danger-default-fg-active: $kp-color-white;
313
- $kp-color-danger-default-fg-focus: $kp-color-white;
311
+ $kp-color-danger-default-fg-rest: $kp-color-foreground-on-saturated;
312
+ $kp-color-danger-default-fg-hover: $kp-color-foreground-on-saturated;
313
+ $kp-color-danger-default-fg-active: $kp-color-foreground-on-saturated;
314
+ $kp-color-danger-default-fg-focus: $kp-color-foreground-on-saturated;
314
315
  $kp-color-danger-default-fg-disabled: $kp-color-gray-400;
315
- $kp-color-danger-default-fg-loading: $kp-color-white;
316
+ $kp-color-danger-default-fg-loading: $kp-color-foreground-on-saturated;
316
317
  $kp-color-danger-default-border-rest: $kp-color-red-600;
317
318
  $kp-color-danger-default-border-hover: $kp-color-red-700;
318
319
  $kp-color-danger-default-border-active: $kp-color-red-800;
@@ -475,9 +476,9 @@ $kp-color-stepper-indicator-border-active: $kp-color-blue-600;
475
476
  $kp-color-stepper-indicator-border-completed: $kp-color-blue-600;
476
477
  $kp-color-stepper-indicator-border-error: $kp-color-red-600;
477
478
  $kp-color-stepper-indicator-fg-pending: $kp-color-gray-500;
478
- $kp-color-stepper-indicator-fg-active: $kp-color-white;
479
- $kp-color-stepper-indicator-fg-completed: $kp-color-white;
480
- $kp-color-stepper-indicator-fg-error: $kp-color-white;
479
+ $kp-color-stepper-indicator-fg-active: $kp-color-foreground-on-saturated;
480
+ $kp-color-stepper-indicator-fg-completed: $kp-color-foreground-on-saturated;
481
+ $kp-color-stepper-indicator-fg-error: $kp-color-foreground-on-saturated;
481
482
  $kp-color-stepper-label-pending: $kp-color-gray-500;
482
483
  $kp-color-stepper-label-active: $kp-color-gray-900;
483
484
  $kp-color-stepper-label-completed: $kp-color-gray-700;
@@ -496,9 +497,9 @@ $kp-color-segmented-segment-fg-unselected-rest: $kp-color-gray-600;
496
497
  $kp-color-segmented-segment-fg-unselected-hover: $kp-color-gray-900;
497
498
  $kp-color-segmented-segment-fg-disabled: $kp-color-gray-400;
498
499
  $kp-color-badge-primary-filled-bg: $kp-color-blue-600;
499
- $kp-color-badge-primary-filled-fg: $kp-color-white;
500
+ $kp-color-badge-primary-filled-fg: $kp-color-foreground-on-saturated;
500
501
  $kp-color-badge-primary-filled-border: $kp-color-blue-600;
501
- $kp-color-badge-primary-filled-dot: $kp-color-white;
502
+ $kp-color-badge-primary-filled-dot: $kp-color-foreground-on-saturated;
502
503
  $kp-color-badge-primary-subtle-bg: $kp-color-blue-50;
503
504
  $kp-color-badge-primary-subtle-fg: $kp-color-blue-700;
504
505
  $kp-color-badge-primary-subtle-dot: $kp-color-blue-600;
@@ -508,9 +509,9 @@ $kp-color-badge-primary-outline-dot: $kp-color-blue-600;
508
509
  $kp-color-badge-primary-dot-fg: $kp-color-gray-700;
509
510
  $kp-color-badge-primary-dot-dot: $kp-color-blue-600;
510
511
  $kp-color-badge-danger-filled-bg: $kp-color-red-600;
511
- $kp-color-badge-danger-filled-fg: $kp-color-white;
512
+ $kp-color-badge-danger-filled-fg: $kp-color-foreground-on-saturated;
512
513
  $kp-color-badge-danger-filled-border: $kp-color-red-600;
513
- $kp-color-badge-danger-filled-dot: $kp-color-white;
514
+ $kp-color-badge-danger-filled-dot: $kp-color-foreground-on-saturated;
514
515
  $kp-color-badge-danger-subtle-bg: $kp-color-red-50;
515
516
  $kp-color-badge-danger-subtle-fg: $kp-color-red-700;
516
517
  $kp-color-badge-danger-subtle-dot: $kp-color-red-600;
@@ -520,9 +521,9 @@ $kp-color-badge-danger-outline-dot: $kp-color-red-600;
520
521
  $kp-color-badge-danger-dot-fg: $kp-color-gray-700;
521
522
  $kp-color-badge-danger-dot-dot: $kp-color-red-600;
522
523
  $kp-color-badge-success-filled-bg: $kp-color-green-600;
523
- $kp-color-badge-success-filled-fg: $kp-color-white;
524
+ $kp-color-badge-success-filled-fg: $kp-color-foreground-on-saturated;
524
525
  $kp-color-badge-success-filled-border: $kp-color-green-600;
525
- $kp-color-badge-success-filled-dot: $kp-color-white;
526
+ $kp-color-badge-success-filled-dot: $kp-color-foreground-on-saturated;
526
527
  $kp-color-badge-success-subtle-bg: $kp-color-green-50;
527
528
  $kp-color-badge-success-subtle-fg: $kp-color-green-700;
528
529
  $kp-color-badge-success-subtle-dot: $kp-color-green-600;
@@ -544,9 +545,9 @@ $kp-color-badge-warning-outline-dot: $kp-color-amber-500;
544
545
  $kp-color-badge-warning-dot-fg: $kp-color-gray-700;
545
546
  $kp-color-badge-warning-dot-dot: $kp-color-amber-500;
546
547
  $kp-color-badge-info-filled-bg: $kp-color-cyan-600;
547
- $kp-color-badge-info-filled-fg: $kp-color-white;
548
+ $kp-color-badge-info-filled-fg: $kp-color-foreground-on-saturated;
548
549
  $kp-color-badge-info-filled-border: $kp-color-cyan-600;
549
- $kp-color-badge-info-filled-dot: $kp-color-white;
550
+ $kp-color-badge-info-filled-dot: $kp-color-foreground-on-saturated;
550
551
  $kp-color-badge-info-subtle-bg: $kp-color-cyan-50;
551
552
  $kp-color-badge-info-subtle-fg: $kp-color-cyan-700;
552
553
  $kp-color-badge-info-subtle-dot: $kp-color-cyan-600;
@@ -574,11 +575,11 @@ $kp-color-alert-primary-subtle-border: $kp-color-blue-200;
574
575
  $kp-color-alert-primary-subtle-icon: $kp-color-blue-600;
575
576
  $kp-color-alert-primary-subtle-accent: $kp-color-blue-600;
576
577
  $kp-color-alert-primary-solid-bg: $kp-color-blue-600;
577
- $kp-color-alert-primary-solid-fg-title: $kp-color-white;
578
+ $kp-color-alert-primary-solid-fg-title: $kp-color-foreground-on-saturated;
578
579
  $kp-color-alert-primary-solid-fg-desc: $kp-color-blue-50;
579
580
  $kp-color-alert-primary-solid-border: $kp-color-blue-600;
580
- $kp-color-alert-primary-solid-icon: $kp-color-white;
581
- $kp-color-alert-primary-solid-accent: $kp-color-white;
581
+ $kp-color-alert-primary-solid-icon: $kp-color-foreground-on-saturated;
582
+ $kp-color-alert-primary-solid-accent: $kp-color-foreground-on-saturated;
582
583
  $kp-color-alert-primary-outline-bg: $kp-color-white;
583
584
  $kp-color-alert-primary-outline-fg-title: $kp-color-blue-900;
584
585
  $kp-color-alert-primary-outline-fg-desc: $kp-color-gray-700;
@@ -598,11 +599,11 @@ $kp-color-alert-danger-subtle-border: $kp-color-red-200;
598
599
  $kp-color-alert-danger-subtle-icon: $kp-color-red-600;
599
600
  $kp-color-alert-danger-subtle-accent: $kp-color-red-600;
600
601
  $kp-color-alert-danger-solid-bg: $kp-color-red-600;
601
- $kp-color-alert-danger-solid-fg-title: $kp-color-white;
602
+ $kp-color-alert-danger-solid-fg-title: $kp-color-foreground-on-saturated;
602
603
  $kp-color-alert-danger-solid-fg-desc: $kp-color-red-50;
603
604
  $kp-color-alert-danger-solid-border: $kp-color-red-600;
604
- $kp-color-alert-danger-solid-icon: $kp-color-white;
605
- $kp-color-alert-danger-solid-accent: $kp-color-white;
605
+ $kp-color-alert-danger-solid-icon: $kp-color-foreground-on-saturated;
606
+ $kp-color-alert-danger-solid-accent: $kp-color-foreground-on-saturated;
606
607
  $kp-color-alert-danger-outline-bg: $kp-color-white;
607
608
  $kp-color-alert-danger-outline-fg-title: $kp-color-red-900;
608
609
  $kp-color-alert-danger-outline-fg-desc: $kp-color-gray-700;
@@ -622,11 +623,11 @@ $kp-color-alert-success-subtle-border: $kp-color-green-200;
622
623
  $kp-color-alert-success-subtle-icon: $kp-color-green-600;
623
624
  $kp-color-alert-success-subtle-accent: $kp-color-green-600;
624
625
  $kp-color-alert-success-solid-bg: $kp-color-green-600;
625
- $kp-color-alert-success-solid-fg-title: $kp-color-white;
626
+ $kp-color-alert-success-solid-fg-title: $kp-color-foreground-on-saturated;
626
627
  $kp-color-alert-success-solid-fg-desc: $kp-color-green-50;
627
628
  $kp-color-alert-success-solid-border: $kp-color-green-600;
628
- $kp-color-alert-success-solid-icon: $kp-color-white;
629
- $kp-color-alert-success-solid-accent: $kp-color-white;
629
+ $kp-color-alert-success-solid-icon: $kp-color-foreground-on-saturated;
630
+ $kp-color-alert-success-solid-accent: $kp-color-foreground-on-saturated;
630
631
  $kp-color-alert-success-outline-bg: $kp-color-white;
631
632
  $kp-color-alert-success-outline-fg-title: $kp-color-green-900;
632
633
  $kp-color-alert-success-outline-fg-desc: $kp-color-gray-700;
@@ -670,11 +671,11 @@ $kp-color-alert-info-subtle-border: $kp-color-cyan-200;
670
671
  $kp-color-alert-info-subtle-icon: $kp-color-cyan-600;
671
672
  $kp-color-alert-info-subtle-accent: $kp-color-cyan-600;
672
673
  $kp-color-alert-info-solid-bg: $kp-color-cyan-600;
673
- $kp-color-alert-info-solid-fg-title: $kp-color-white;
674
+ $kp-color-alert-info-solid-fg-title: $kp-color-foreground-on-saturated;
674
675
  $kp-color-alert-info-solid-fg-desc: $kp-color-cyan-50;
675
676
  $kp-color-alert-info-solid-border: $kp-color-cyan-600;
676
- $kp-color-alert-info-solid-icon: $kp-color-white;
677
- $kp-color-alert-info-solid-accent: $kp-color-white;
677
+ $kp-color-alert-info-solid-icon: $kp-color-foreground-on-saturated;
678
+ $kp-color-alert-info-solid-accent: $kp-color-foreground-on-saturated;
678
679
  $kp-color-alert-info-outline-bg: $kp-color-white;
679
680
  $kp-color-alert-info-outline-fg-title: $kp-color-cyan-900;
680
681
  $kp-color-alert-info-outline-fg-desc: $kp-color-gray-700;
@@ -807,12 +808,12 @@ $kp-color-pagination-item-bg-selected: $kp-color-blue-600;
807
808
  $kp-color-pagination-item-fg-rest: $kp-color-gray-700;
808
809
  $kp-color-pagination-item-fg-hover: $kp-color-blue-700;
809
810
  $kp-color-pagination-item-fg-active: $kp-color-blue-700;
810
- $kp-color-pagination-item-fg-selected: $kp-color-white;
811
+ $kp-color-pagination-item-fg-selected: $kp-color-foreground-on-saturated;
811
812
  $kp-color-pagination-item-fg-disabled: $kp-color-gray-300;
812
813
  $kp-color-pagination-item-icon-rest: $kp-color-gray-600;
813
814
  $kp-color-pagination-item-icon-hover: $kp-color-blue-700;
814
815
  $kp-color-pagination-item-icon-active: $kp-color-blue-700;
815
- $kp-color-pagination-item-icon-selected: $kp-color-white;
816
+ $kp-color-pagination-item-icon-selected: $kp-color-foreground-on-saturated;
816
817
  $kp-color-pagination-item-icon-disabled: $kp-color-gray-300;
817
818
  $kp-color-pagination-ellipsis: $kp-color-gray-500; // Ellipsis (…) color between page ranges
818
819
  $kp-color-pagination-info: $kp-color-gray-600; // 'Showing X of Y' info text + 'Per page' label
package/styles/dark.css CHANGED
@@ -34,9 +34,9 @@
34
34
  --kp-color-blue-300: #1d4ed8;
35
35
  --kp-color-blue-400: #2563eb;
36
36
  --kp-color-blue-500: #3b82f6;
37
- --kp-color-blue-600: #60a5fa;
38
- --kp-color-blue-700: #93c5fd;
39
- --kp-color-blue-800: #bfdbfe;
37
+ --kp-color-blue-600: #2563eb;
38
+ --kp-color-blue-700: #1d4ed8;
39
+ --kp-color-blue-800: #1e40af;
40
40
  --kp-color-blue-900: #dbeafe;
41
41
  --kp-color-blue-950: #eff6ff;
42
42
  --kp-color-red-50: #450a0a;
@@ -45,9 +45,9 @@
45
45
  --kp-color-red-300: #b91c1c;
46
46
  --kp-color-red-400: #dc2626;
47
47
  --kp-color-red-500: #ef4444;
48
- --kp-color-red-600: #f87171;
49
- --kp-color-red-700: #fca5a5;
50
- --kp-color-red-800: #fecaca;
48
+ --kp-color-red-600: #dc2626;
49
+ --kp-color-red-700: #b91c1c;
50
+ --kp-color-red-800: #991b1b;
51
51
  --kp-color-red-900: #fee2e2;
52
52
  --kp-color-red-950: #fef2f2;
53
53
  --kp-color-green-50: #052e16;
@@ -56,9 +56,9 @@
56
56
  --kp-color-green-300: #15803d;
57
57
  --kp-color-green-400: #16a34a;
58
58
  --kp-color-green-500: #22c55e;
59
- --kp-color-green-600: #4ade80;
60
- --kp-color-green-700: #86efac;
61
- --kp-color-green-800: #bbf7d0;
59
+ --kp-color-green-600: #16a34a;
60
+ --kp-color-green-700: #15803d;
61
+ --kp-color-green-800: #166534;
62
62
  --kp-color-green-900: #dcfce7;
63
63
  --kp-color-green-950: #f0fdf4;
64
64
  --kp-color-amber-50: #451a03;
@@ -67,9 +67,9 @@
67
67
  --kp-color-amber-300: #b45309;
68
68
  --kp-color-amber-400: #d97706;
69
69
  --kp-color-amber-500: #f59e0b;
70
- --kp-color-amber-600: #fbbf24;
71
- --kp-color-amber-700: #fcd34d;
72
- --kp-color-amber-800: #fde68a;
70
+ --kp-color-amber-600: #d97706;
71
+ --kp-color-amber-700: #b45309;
72
+ --kp-color-amber-800: #92400e;
73
73
  --kp-color-amber-900: #fef3c7;
74
74
  --kp-color-amber-950: #fffbeb;
75
75
  --kp-color-cyan-50: #083344;
@@ -78,9 +78,9 @@
78
78
  --kp-color-cyan-300: #0e7490;
79
79
  --kp-color-cyan-400: #0891b2;
80
80
  --kp-color-cyan-500: #06b6d4;
81
- --kp-color-cyan-600: #22d3ee;
82
- --kp-color-cyan-700: #67e8f9;
83
- --kp-color-cyan-800: #a5f3fc;
81
+ --kp-color-cyan-600: #0891b2;
82
+ --kp-color-cyan-700: #0e7490;
83
+ --kp-color-cyan-800: #155e75;
84
84
  --kp-color-cyan-900: #cffafe;
85
85
  --kp-color-cyan-950: #ecfeff;
86
86
  --kp-color-orange-50: #431407;
@@ -89,9 +89,9 @@
89
89
  --kp-color-orange-300: #c2410c;
90
90
  --kp-color-orange-400: #ea580c;
91
91
  --kp-color-orange-500: #f97316;
92
- --kp-color-orange-600: #fb923c;
93
- --kp-color-orange-700: #fdba74;
94
- --kp-color-orange-800: #fed7aa;
92
+ --kp-color-orange-600: #ea580c;
93
+ --kp-color-orange-700: #c2410c;
94
+ --kp-color-orange-800: #9a3412;
95
95
  --kp-color-orange-900: #ffedd5;
96
96
  --kp-color-orange-950: #fff7ed;
97
97
  --kp-color-violet-50: #2e1065;
@@ -100,9 +100,9 @@
100
100
  --kp-color-violet-300: #6d28d9;
101
101
  --kp-color-violet-400: #7c3aed;
102
102
  --kp-color-violet-500: #8b5cf6;
103
- --kp-color-violet-600: #a78bfa;
104
- --kp-color-violet-700: #c4b5fd;
105
- --kp-color-violet-800: #ddd6fe;
103
+ --kp-color-violet-600: #7c3aed;
104
+ --kp-color-violet-700: #6d28d9;
105
+ --kp-color-violet-800: #5b21b6;
106
106
  --kp-color-violet-900: #ede9fe;
107
107
  --kp-color-violet-950: #f5f3ff;
108
108
  --kp-color-badge-primary-subtle-bg: #1e3a8a;
@@ -125,11 +125,6 @@
125
125
  --kp-color-alert-warning-subtle-bg: #78350f;
126
126
  --kp-color-alert-info-subtle-bg: #164e63;
127
127
  --kp-color-alert-neutral-subtle-bg: #27272a;
128
- --kp-color-primary-default-fg-rest: #172554;
129
- --kp-color-primary-default-fg-hover: #172554;
130
- --kp-color-primary-default-fg-active: #172554;
131
- --kp-color-primary-default-fg-focus: #172554;
132
- --kp-color-primary-default-fg-loading: #172554;
133
128
  --kp-color-primary-default-fg-disabled: #a1a1aa;
134
129
  --kp-color-primary-subtle-fg-rest: #93c5fd;
135
130
  --kp-color-primary-subtle-fg-hover: #bfdbfe;
@@ -137,11 +132,6 @@
137
132
  --kp-color-primary-subtle-fg-focus: #93c5fd;
138
133
  --kp-color-primary-subtle-fg-loading: #93c5fd;
139
134
  --kp-color-primary-subtle-fg-disabled: #52525b;
140
- --kp-color-danger-default-fg-rest: #450a0a;
141
- --kp-color-danger-default-fg-hover: #450a0a;
142
- --kp-color-danger-default-fg-active: #450a0a;
143
- --kp-color-danger-default-fg-focus: #450a0a;
144
- --kp-color-danger-default-fg-loading: #450a0a;
145
135
  --kp-color-danger-default-fg-disabled: #a1a1aa;
146
136
  --kp-color-danger-subtle-fg-rest: #fca5a5;
147
137
  --kp-color-danger-subtle-fg-hover: #fecaca;
package/styles/tokens.css CHANGED
@@ -5,6 +5,7 @@
5
5
  :root {
6
6
  --kp-color-white: #ffffff;
7
7
  --kp-color-black: #09090b;
8
+ --kp-color-foreground-on-saturated: #ffffff; /** Text/icon color on saturated brand backgrounds — solid buttons, filled badges, alert solid title, selected pagination items, stepper indicators. Stays #FFFFFF in BOTH modes (no dark.json override) — semantic primitive that decouples 'fg on saturated' from `color.white` (which is the elevation surface and inverts to #18181B in dark). */
8
9
  --kp-color-gray-50: #fafafa;
9
10
  --kp-color-gray-100: #f4f4f5;
10
11
  --kp-color-gray-200: #e4e4e7;
@@ -255,12 +256,12 @@
255
256
  --kp-color-primary-default-bg-focus: var(--kp-color-blue-600);
256
257
  --kp-color-primary-default-bg-disabled: var(--kp-color-gray-200);
257
258
  --kp-color-primary-default-bg-loading: var(--kp-color-blue-500);
258
- --kp-color-primary-default-fg-rest: var(--kp-color-white);
259
- --kp-color-primary-default-fg-hover: var(--kp-color-white);
260
- --kp-color-primary-default-fg-active: var(--kp-color-white);
261
- --kp-color-primary-default-fg-focus: var(--kp-color-white);
259
+ --kp-color-primary-default-fg-rest: var(--kp-color-foreground-on-saturated);
260
+ --kp-color-primary-default-fg-hover: var(--kp-color-foreground-on-saturated);
261
+ --kp-color-primary-default-fg-active: var(--kp-color-foreground-on-saturated);
262
+ --kp-color-primary-default-fg-focus: var(--kp-color-foreground-on-saturated);
262
263
  --kp-color-primary-default-fg-disabled: var(--kp-color-gray-400);
263
- --kp-color-primary-default-fg-loading: var(--kp-color-white);
264
+ --kp-color-primary-default-fg-loading: var(--kp-color-foreground-on-saturated);
264
265
  --kp-color-primary-default-border-rest: var(--kp-color-blue-600);
265
266
  --kp-color-primary-default-border-hover: var(--kp-color-blue-700);
266
267
  --kp-color-primary-default-border-active: var(--kp-color-blue-800);
@@ -309,12 +310,12 @@
309
310
  --kp-color-danger-default-bg-focus: var(--kp-color-red-600);
310
311
  --kp-color-danger-default-bg-disabled: var(--kp-color-gray-200);
311
312
  --kp-color-danger-default-bg-loading: var(--kp-color-red-500);
312
- --kp-color-danger-default-fg-rest: var(--kp-color-white);
313
- --kp-color-danger-default-fg-hover: var(--kp-color-white);
314
- --kp-color-danger-default-fg-active: var(--kp-color-white);
315
- --kp-color-danger-default-fg-focus: var(--kp-color-white);
313
+ --kp-color-danger-default-fg-rest: var(--kp-color-foreground-on-saturated);
314
+ --kp-color-danger-default-fg-hover: var(--kp-color-foreground-on-saturated);
315
+ --kp-color-danger-default-fg-active: var(--kp-color-foreground-on-saturated);
316
+ --kp-color-danger-default-fg-focus: var(--kp-color-foreground-on-saturated);
316
317
  --kp-color-danger-default-fg-disabled: var(--kp-color-gray-400);
317
- --kp-color-danger-default-fg-loading: var(--kp-color-white);
318
+ --kp-color-danger-default-fg-loading: var(--kp-color-foreground-on-saturated);
318
319
  --kp-color-danger-default-border-rest: var(--kp-color-red-600);
319
320
  --kp-color-danger-default-border-hover: var(--kp-color-red-700);
320
321
  --kp-color-danger-default-border-active: var(--kp-color-red-800);
@@ -477,9 +478,9 @@
477
478
  --kp-color-stepper-indicator-border-completed: var(--kp-color-blue-600);
478
479
  --kp-color-stepper-indicator-border-error: var(--kp-color-red-600);
479
480
  --kp-color-stepper-indicator-fg-pending: var(--kp-color-gray-500);
480
- --kp-color-stepper-indicator-fg-active: var(--kp-color-white);
481
- --kp-color-stepper-indicator-fg-completed: var(--kp-color-white);
482
- --kp-color-stepper-indicator-fg-error: var(--kp-color-white);
481
+ --kp-color-stepper-indicator-fg-active: var(--kp-color-foreground-on-saturated);
482
+ --kp-color-stepper-indicator-fg-completed: var(--kp-color-foreground-on-saturated);
483
+ --kp-color-stepper-indicator-fg-error: var(--kp-color-foreground-on-saturated);
483
484
  --kp-color-stepper-label-pending: var(--kp-color-gray-500);
484
485
  --kp-color-stepper-label-active: var(--kp-color-gray-900);
485
486
  --kp-color-stepper-label-completed: var(--kp-color-gray-700);
@@ -498,9 +499,9 @@
498
499
  --kp-color-segmented-segment-fg-unselected-hover: var(--kp-color-gray-900);
499
500
  --kp-color-segmented-segment-fg-disabled: var(--kp-color-gray-400);
500
501
  --kp-color-badge-primary-filled-bg: var(--kp-color-blue-600);
501
- --kp-color-badge-primary-filled-fg: var(--kp-color-white);
502
+ --kp-color-badge-primary-filled-fg: var(--kp-color-foreground-on-saturated);
502
503
  --kp-color-badge-primary-filled-border: var(--kp-color-blue-600);
503
- --kp-color-badge-primary-filled-dot: var(--kp-color-white);
504
+ --kp-color-badge-primary-filled-dot: var(--kp-color-foreground-on-saturated);
504
505
  --kp-color-badge-primary-subtle-bg: var(--kp-color-blue-50);
505
506
  --kp-color-badge-primary-subtle-fg: var(--kp-color-blue-700);
506
507
  --kp-color-badge-primary-subtle-dot: var(--kp-color-blue-600);
@@ -510,9 +511,9 @@
510
511
  --kp-color-badge-primary-dot-fg: var(--kp-color-gray-700);
511
512
  --kp-color-badge-primary-dot-dot: var(--kp-color-blue-600);
512
513
  --kp-color-badge-danger-filled-bg: var(--kp-color-red-600);
513
- --kp-color-badge-danger-filled-fg: var(--kp-color-white);
514
+ --kp-color-badge-danger-filled-fg: var(--kp-color-foreground-on-saturated);
514
515
  --kp-color-badge-danger-filled-border: var(--kp-color-red-600);
515
- --kp-color-badge-danger-filled-dot: var(--kp-color-white);
516
+ --kp-color-badge-danger-filled-dot: var(--kp-color-foreground-on-saturated);
516
517
  --kp-color-badge-danger-subtle-bg: var(--kp-color-red-50);
517
518
  --kp-color-badge-danger-subtle-fg: var(--kp-color-red-700);
518
519
  --kp-color-badge-danger-subtle-dot: var(--kp-color-red-600);
@@ -522,9 +523,9 @@
522
523
  --kp-color-badge-danger-dot-fg: var(--kp-color-gray-700);
523
524
  --kp-color-badge-danger-dot-dot: var(--kp-color-red-600);
524
525
  --kp-color-badge-success-filled-bg: var(--kp-color-green-600);
525
- --kp-color-badge-success-filled-fg: var(--kp-color-white);
526
+ --kp-color-badge-success-filled-fg: var(--kp-color-foreground-on-saturated);
526
527
  --kp-color-badge-success-filled-border: var(--kp-color-green-600);
527
- --kp-color-badge-success-filled-dot: var(--kp-color-white);
528
+ --kp-color-badge-success-filled-dot: var(--kp-color-foreground-on-saturated);
528
529
  --kp-color-badge-success-subtle-bg: var(--kp-color-green-50);
529
530
  --kp-color-badge-success-subtle-fg: var(--kp-color-green-700);
530
531
  --kp-color-badge-success-subtle-dot: var(--kp-color-green-600);
@@ -546,9 +547,9 @@
546
547
  --kp-color-badge-warning-dot-fg: var(--kp-color-gray-700);
547
548
  --kp-color-badge-warning-dot-dot: var(--kp-color-amber-500);
548
549
  --kp-color-badge-info-filled-bg: var(--kp-color-cyan-600);
549
- --kp-color-badge-info-filled-fg: var(--kp-color-white);
550
+ --kp-color-badge-info-filled-fg: var(--kp-color-foreground-on-saturated);
550
551
  --kp-color-badge-info-filled-border: var(--kp-color-cyan-600);
551
- --kp-color-badge-info-filled-dot: var(--kp-color-white);
552
+ --kp-color-badge-info-filled-dot: var(--kp-color-foreground-on-saturated);
552
553
  --kp-color-badge-info-subtle-bg: var(--kp-color-cyan-50);
553
554
  --kp-color-badge-info-subtle-fg: var(--kp-color-cyan-700);
554
555
  --kp-color-badge-info-subtle-dot: var(--kp-color-cyan-600);
@@ -576,11 +577,11 @@
576
577
  --kp-color-alert-primary-subtle-icon: var(--kp-color-blue-600);
577
578
  --kp-color-alert-primary-subtle-accent: var(--kp-color-blue-600);
578
579
  --kp-color-alert-primary-solid-bg: var(--kp-color-blue-600);
579
- --kp-color-alert-primary-solid-fg-title: var(--kp-color-white);
580
+ --kp-color-alert-primary-solid-fg-title: var(--kp-color-foreground-on-saturated);
580
581
  --kp-color-alert-primary-solid-fg-desc: var(--kp-color-blue-50);
581
582
  --kp-color-alert-primary-solid-border: var(--kp-color-blue-600);
582
- --kp-color-alert-primary-solid-icon: var(--kp-color-white);
583
- --kp-color-alert-primary-solid-accent: var(--kp-color-white);
583
+ --kp-color-alert-primary-solid-icon: var(--kp-color-foreground-on-saturated);
584
+ --kp-color-alert-primary-solid-accent: var(--kp-color-foreground-on-saturated);
584
585
  --kp-color-alert-primary-outline-bg: var(--kp-color-white);
585
586
  --kp-color-alert-primary-outline-fg-title: var(--kp-color-blue-900);
586
587
  --kp-color-alert-primary-outline-fg-desc: var(--kp-color-gray-700);
@@ -600,11 +601,11 @@
600
601
  --kp-color-alert-danger-subtle-icon: var(--kp-color-red-600);
601
602
  --kp-color-alert-danger-subtle-accent: var(--kp-color-red-600);
602
603
  --kp-color-alert-danger-solid-bg: var(--kp-color-red-600);
603
- --kp-color-alert-danger-solid-fg-title: var(--kp-color-white);
604
+ --kp-color-alert-danger-solid-fg-title: var(--kp-color-foreground-on-saturated);
604
605
  --kp-color-alert-danger-solid-fg-desc: var(--kp-color-red-50);
605
606
  --kp-color-alert-danger-solid-border: var(--kp-color-red-600);
606
- --kp-color-alert-danger-solid-icon: var(--kp-color-white);
607
- --kp-color-alert-danger-solid-accent: var(--kp-color-white);
607
+ --kp-color-alert-danger-solid-icon: var(--kp-color-foreground-on-saturated);
608
+ --kp-color-alert-danger-solid-accent: var(--kp-color-foreground-on-saturated);
608
609
  --kp-color-alert-danger-outline-bg: var(--kp-color-white);
609
610
  --kp-color-alert-danger-outline-fg-title: var(--kp-color-red-900);
610
611
  --kp-color-alert-danger-outline-fg-desc: var(--kp-color-gray-700);
@@ -624,11 +625,11 @@
624
625
  --kp-color-alert-success-subtle-icon: var(--kp-color-green-600);
625
626
  --kp-color-alert-success-subtle-accent: var(--kp-color-green-600);
626
627
  --kp-color-alert-success-solid-bg: var(--kp-color-green-600);
627
- --kp-color-alert-success-solid-fg-title: var(--kp-color-white);
628
+ --kp-color-alert-success-solid-fg-title: var(--kp-color-foreground-on-saturated);
628
629
  --kp-color-alert-success-solid-fg-desc: var(--kp-color-green-50);
629
630
  --kp-color-alert-success-solid-border: var(--kp-color-green-600);
630
- --kp-color-alert-success-solid-icon: var(--kp-color-white);
631
- --kp-color-alert-success-solid-accent: var(--kp-color-white);
631
+ --kp-color-alert-success-solid-icon: var(--kp-color-foreground-on-saturated);
632
+ --kp-color-alert-success-solid-accent: var(--kp-color-foreground-on-saturated);
632
633
  --kp-color-alert-success-outline-bg: var(--kp-color-white);
633
634
  --kp-color-alert-success-outline-fg-title: var(--kp-color-green-900);
634
635
  --kp-color-alert-success-outline-fg-desc: var(--kp-color-gray-700);
@@ -672,11 +673,11 @@
672
673
  --kp-color-alert-info-subtle-icon: var(--kp-color-cyan-600);
673
674
  --kp-color-alert-info-subtle-accent: var(--kp-color-cyan-600);
674
675
  --kp-color-alert-info-solid-bg: var(--kp-color-cyan-600);
675
- --kp-color-alert-info-solid-fg-title: var(--kp-color-white);
676
+ --kp-color-alert-info-solid-fg-title: var(--kp-color-foreground-on-saturated);
676
677
  --kp-color-alert-info-solid-fg-desc: var(--kp-color-cyan-50);
677
678
  --kp-color-alert-info-solid-border: var(--kp-color-cyan-600);
678
- --kp-color-alert-info-solid-icon: var(--kp-color-white);
679
- --kp-color-alert-info-solid-accent: var(--kp-color-white);
679
+ --kp-color-alert-info-solid-icon: var(--kp-color-foreground-on-saturated);
680
+ --kp-color-alert-info-solid-accent: var(--kp-color-foreground-on-saturated);
680
681
  --kp-color-alert-info-outline-bg: var(--kp-color-white);
681
682
  --kp-color-alert-info-outline-fg-title: var(--kp-color-cyan-900);
682
683
  --kp-color-alert-info-outline-fg-desc: var(--kp-color-gray-700);
@@ -809,12 +810,12 @@
809
810
  --kp-color-pagination-item-fg-rest: var(--kp-color-gray-700);
810
811
  --kp-color-pagination-item-fg-hover: var(--kp-color-blue-700);
811
812
  --kp-color-pagination-item-fg-active: var(--kp-color-blue-700);
812
- --kp-color-pagination-item-fg-selected: var(--kp-color-white);
813
+ --kp-color-pagination-item-fg-selected: var(--kp-color-foreground-on-saturated);
813
814
  --kp-color-pagination-item-fg-disabled: var(--kp-color-gray-300);
814
815
  --kp-color-pagination-item-icon-rest: var(--kp-color-gray-600);
815
816
  --kp-color-pagination-item-icon-hover: var(--kp-color-blue-700);
816
817
  --kp-color-pagination-item-icon-active: var(--kp-color-blue-700);
817
- --kp-color-pagination-item-icon-selected: var(--kp-color-white);
818
+ --kp-color-pagination-item-icon-selected: var(--kp-color-foreground-on-saturated);
818
819
  --kp-color-pagination-item-icon-disabled: var(--kp-color-gray-300);
819
820
  --kp-color-pagination-ellipsis: var(--kp-color-gray-500); /** Ellipsis (…) color between page ranges */
820
821
  --kp-color-pagination-info: var(--kp-color-gray-600); /** 'Showing X of Y' info text + 'Per page' label */