@kanso-protocol/core 2.0.2 → 3.0.0
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.
- package/package.json +1 -1
- package/styles/_tokens.scss +17 -16
- package/styles/dark.css +29 -2
- package/styles/tokens.css +17 -16
package/package.json
CHANGED
package/styles/_tokens.scss
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
$kp-color-white: #ffffff;
|
|
5
5
|
$kp-color-black: #09090b;
|
|
6
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).
|
|
7
|
+
$kp-color-foreground-on-dark-accent-primary: #60a5fa; // audit-2026-05-12 — brand-accent fg for active states on always-dark surfaces (kp-header--dark, kp-sidebar--dark). Stays at blue-400 light in BOTH themes (no dark.json override) so the active fg reads ~7:1 on #18181B regardless of which theme the page is in. Without this, a dark-appearance header in a light-themed page used theme-aware accent.primary.fg which is the darker blue.700 — fails AA.
|
|
7
8
|
$kp-color-gray-50: #fafafa;
|
|
8
9
|
$kp-color-gray-100: #f4f4f5;
|
|
9
10
|
$kp-color-gray-200: #e4e4e7;
|
|
@@ -248,11 +249,11 @@ $kp-layout-container-padding-none: 0;
|
|
|
248
249
|
$kp-layout-container-padding-sm: 16px;
|
|
249
250
|
$kp-layout-container-padding-md: 24px;
|
|
250
251
|
$kp-layout-container-padding-lg: 32px;
|
|
251
|
-
$kp-color-accent-primary-fg: $kp-color-blue-600
|
|
252
|
-
$kp-color-accent-danger-fg: $kp-color-red-600
|
|
253
|
-
$kp-color-accent-success-fg: $kp-color-green-600
|
|
254
|
-
$kp-color-accent-warning-fg: $kp-color-amber-600
|
|
255
|
-
$kp-color-accent-info-fg: $kp-color-cyan-600
|
|
252
|
+
$kp-color-accent-primary-fg: $kp-color-blue-700; // audit-2026-05-12 — was blue.600 #2563EB (4.55:1 on white, borderline AA). blue.700 #1D4ED8 → 7.46:1.
|
|
253
|
+
$kp-color-accent-danger-fg: $kp-color-red-700; // audit-2026-05-12 — was red.600 #DC2626 (4.95:1 on white, borderline AA). red.700 #B91C1C → 6.27:1.
|
|
254
|
+
$kp-color-accent-success-fg: $kp-color-green-700; // audit-2026-05-12 — was green.600 #16A34A (2.94:1 on white, fails AA). green.700 #15803D → 4.74:1.
|
|
255
|
+
$kp-color-accent-warning-fg: $kp-color-amber-700; // audit-2026-05-12 — was amber.600 #D97706 (3.04:1 on white, fails AA). amber.700 #B45309 → 5.53:1.
|
|
256
|
+
$kp-color-accent-info-fg: $kp-color-cyan-700; // audit-2026-05-12 — was cyan.600 #0891B2 (4.16:1 on white, fails AA). cyan.700 #0E7490 → 5.54:1.
|
|
256
257
|
$kp-color-primary-default-bg-rest: $kp-color-blue-600;
|
|
257
258
|
$kp-color-primary-default-bg-hover: $kp-color-blue-700;
|
|
258
259
|
$kp-color-primary-default-bg-active: $kp-color-blue-800;
|
|
@@ -419,7 +420,7 @@ $kp-color-focus-ring: $kp-color-blue-400; // Focus ring — 2px offset outline f
|
|
|
419
420
|
$kp-color-text-strong: $kp-color-gray-900; // Headings and primary emphasized text
|
|
420
421
|
$kp-color-text-default: $kp-color-gray-700; // Default body text
|
|
421
422
|
$kp-color-text-muted: $kp-color-gray-500; // Secondary text — captions, helper, less important labels. Dark override → gray.600 for AA contrast against dark page bg.
|
|
422
|
-
$kp-color-text-disabled: $kp-color-gray-
|
|
423
|
+
$kp-color-text-disabled: $kp-color-gray-500; // audit-2026-05-12 — was gray.400 #A1A1AA (2.62:1 on white, fails AA). gray.500 #71717A → 4.84:1. Visually collapses with `muted` (same hex) in light; the visual disabled affordance now comes from `cursor: not-allowed` + reduced font-weight on actually-disabled controls. Dark override aligned to gray.600 (=#A1A1AA in dark) for consistency.
|
|
423
424
|
$kp-color-surface-base: $kp-color-white; // Top elevated surface — cards, dialogs, dropdowns. Inverts to gray-900 dark = #18181B
|
|
424
425
|
$kp-color-surface-subtle: $kp-color-gray-50; // Page background behind cards, recessed regions. Inverts to gray-950 dark = #09090B
|
|
425
426
|
$kp-color-surface-muted: $kp-color-gray-100; // Hover background, alternating rows, muted callouts. Dark override → gray.200 (= #27272A in dark, distinguishable from base)
|
|
@@ -476,7 +477,7 @@ $kp-color-input-border-hover: $kp-color-gray-400;
|
|
|
476
477
|
$kp-color-input-border-focus: $kp-color-blue-600;
|
|
477
478
|
$kp-color-input-border-disabled: $kp-color-gray-200;
|
|
478
479
|
$kp-color-input-border-error: $kp-color-red-500;
|
|
479
|
-
$kp-color-input-placeholder-default: $kp-color-gray-400
|
|
480
|
+
$kp-color-input-placeholder-default: $kp-color-gray-500; // audit-2026-05-12 — was gray.400 #A1A1AA (2.62:1 on white, fails AA). gray.500 #71717A → 4.84:1. Dark override (#A1A1AA) preserves prior dark contrast.
|
|
480
481
|
$kp-color-input-placeholder-disabled: $kp-color-gray-300;
|
|
481
482
|
$kp-color-checkbox-border-rest: $kp-color-gray-300;
|
|
482
483
|
$kp-color-checkbox-border-hover: $kp-color-gray-400;
|
|
@@ -538,9 +539,9 @@ $kp-color-badge-danger-outline-border: $kp-color-red-300;
|
|
|
538
539
|
$kp-color-badge-danger-outline-dot: $kp-color-red-600;
|
|
539
540
|
$kp-color-badge-danger-dot-fg: $kp-color-gray-700;
|
|
540
541
|
$kp-color-badge-danger-dot-dot: $kp-color-red-600;
|
|
541
|
-
$kp-color-badge-success-filled-bg: $kp-color-green-
|
|
542
|
+
$kp-color-badge-success-filled-bg: $kp-color-green-700;
|
|
542
543
|
$kp-color-badge-success-filled-fg: $kp-color-foreground-on-saturated;
|
|
543
|
-
$kp-color-badge-success-filled-border: $kp-color-green-
|
|
544
|
+
$kp-color-badge-success-filled-border: $kp-color-green-700;
|
|
544
545
|
$kp-color-badge-success-filled-dot: $kp-color-foreground-on-saturated;
|
|
545
546
|
$kp-color-badge-success-subtle-bg: $kp-color-green-50;
|
|
546
547
|
$kp-color-badge-success-subtle-fg: $kp-color-green-700;
|
|
@@ -562,9 +563,9 @@ $kp-color-badge-warning-outline-border: $kp-color-amber-400;
|
|
|
562
563
|
$kp-color-badge-warning-outline-dot: $kp-color-amber-500;
|
|
563
564
|
$kp-color-badge-warning-dot-fg: $kp-color-gray-700;
|
|
564
565
|
$kp-color-badge-warning-dot-dot: $kp-color-amber-500;
|
|
565
|
-
$kp-color-badge-info-filled-bg: $kp-color-cyan-
|
|
566
|
+
$kp-color-badge-info-filled-bg: $kp-color-cyan-700;
|
|
566
567
|
$kp-color-badge-info-filled-fg: $kp-color-foreground-on-saturated;
|
|
567
|
-
$kp-color-badge-info-filled-border: $kp-color-cyan-
|
|
568
|
+
$kp-color-badge-info-filled-border: $kp-color-cyan-700;
|
|
568
569
|
$kp-color-badge-info-filled-dot: $kp-color-foreground-on-saturated;
|
|
569
570
|
$kp-color-badge-info-subtle-bg: $kp-color-cyan-50;
|
|
570
571
|
$kp-color-badge-info-subtle-fg: $kp-color-cyan-700;
|
|
@@ -743,9 +744,9 @@ $kp-color-popover-divider: $kp-color-gray-100; // Divider between header/body/fo
|
|
|
743
744
|
$kp-color-progress-track: $kp-color-gray-100; // Empty track background
|
|
744
745
|
$kp-color-progress-label: $kp-color-gray-700; // Progress label text
|
|
745
746
|
$kp-color-progress-value: $kp-color-gray-900; // Progress percentage text
|
|
746
|
-
$kp-color-progress-primary-fill: $kp-color-blue-600
|
|
747
|
-
$kp-color-progress-success-fill: $kp-color-green-600
|
|
748
|
-
$kp-color-progress-danger-fill: $kp-color-red-600
|
|
747
|
+
$kp-color-progress-primary-fill: $kp-color-blue-700; // audit-2026-05-13 — was blue.600. Used as both filled-segment bg (white fg → 7.46:1) and current-label color on page bg (white = 7.46:1). brand.700 passes AA in both roles.
|
|
748
|
+
$kp-color-progress-success-fill: $kp-color-green-700; // audit-2026-05-13 — was green.600 (2.94:1 fails as label color on white). green.700 → 4.74:1.
|
|
749
|
+
$kp-color-progress-danger-fill: $kp-color-red-700; // audit-2026-05-13 — was red.600. red.700 → 6.27:1 on white.
|
|
749
750
|
$kp-color-progress-warning-fill: $kp-color-amber-500;
|
|
750
751
|
$kp-color-progress-neutral-fill: $kp-color-gray-700;
|
|
751
752
|
$kp-color-tabs-tab-fg-rest: $kp-color-gray-600;
|
|
@@ -807,7 +808,7 @@ $kp-color-header-fg: $kp-color-gray-900;
|
|
|
807
808
|
$kp-color-header-fg-dark: $kp-color-white;
|
|
808
809
|
$kp-color-header-nav-item-fg-rest: $kp-color-gray-700;
|
|
809
810
|
$kp-color-header-nav-item-fg-hover: $kp-color-gray-900;
|
|
810
|
-
$kp-color-header-nav-item-fg-active: $kp-color-blue-600
|
|
811
|
+
$kp-color-header-nav-item-fg-active: $kp-color-blue-700; // audit-2026-05-12 — was blue.600 (4.55:1 on white, borderline AA). blue.700 → 7.46:1.
|
|
811
812
|
$kp-color-header-nav-item-bg-hover: $kp-color-gray-50;
|
|
812
813
|
$kp-color-breadcrumbs-item-fg-link-rest: $kp-color-gray-600; // Link item at rest
|
|
813
814
|
$kp-color-breadcrumbs-item-fg-link-hover: $kp-color-gray-900; // Link item on hover
|
|
@@ -882,7 +883,7 @@ $kp-color-tree-node-bg-hover: $kp-color-gray-50;
|
|
|
882
883
|
$kp-color-tree-node-bg-selected: $kp-color-blue-50;
|
|
883
884
|
$kp-color-tree-node-fg-rest: $kp-color-gray-900;
|
|
884
885
|
$kp-color-tree-node-fg-selected: $kp-color-blue-700;
|
|
885
|
-
$kp-color-tree-node-fg-disabled: $kp-color-gray-400
|
|
886
|
+
$kp-color-tree-node-fg-disabled: $kp-color-gray-500; // audit-2026-05-13 — was gray.400 (2.62:1 on white, fails AA). gray.500 → 4.84:1.
|
|
886
887
|
$kp-color-tree-node-icon-rest: $kp-color-gray-600;
|
|
887
888
|
$kp-color-tree-node-icon-selected: $kp-color-blue-600;
|
|
888
889
|
$kp-color-tree-node-chevron: $kp-color-gray-500;
|
package/styles/dark.css
CHANGED
|
@@ -85,14 +85,20 @@
|
|
|
85
85
|
--kp-color-cyan-950: #ecfeff;
|
|
86
86
|
--kp-color-badge-primary-subtle-bg: #1e3a8a;
|
|
87
87
|
--kp-color-badge-primary-subtle-fg: #93c5fd;
|
|
88
|
+
--kp-color-badge-primary-outline-fg: #93c5fd;
|
|
88
89
|
--kp-color-badge-danger-subtle-bg: #7f1d1d;
|
|
89
90
|
--kp-color-badge-danger-subtle-fg: #fca5a5;
|
|
91
|
+
--kp-color-badge-danger-outline-fg: #fca5a5;
|
|
90
92
|
--kp-color-badge-success-subtle-bg: #14532d;
|
|
91
93
|
--kp-color-badge-success-subtle-fg: #86efac;
|
|
94
|
+
--kp-color-badge-success-outline-fg: #86efac;
|
|
92
95
|
--kp-color-badge-warning-subtle-bg: #78350f;
|
|
93
96
|
--kp-color-badge-warning-subtle-fg: #fde68a;
|
|
97
|
+
--kp-color-badge-warning-filled-fg: #18181b;
|
|
98
|
+
--kp-color-badge-warning-outline-fg: #fde68a;
|
|
94
99
|
--kp-color-badge-info-subtle-bg: #164e63;
|
|
95
100
|
--kp-color-badge-info-subtle-fg: #67e8f9;
|
|
101
|
+
--kp-color-badge-info-outline-fg: #67e8f9;
|
|
96
102
|
--kp-color-badge-neutral-subtle-bg: #27272a;
|
|
97
103
|
--kp-color-badge-neutral-subtle-fg: #d4d4d8;
|
|
98
104
|
--kp-color-alert-primary-subtle-bg: #1e3a8a;
|
|
@@ -197,7 +203,11 @@
|
|
|
197
203
|
--kp-color-primary-subtle-border-disabled: rgba(0, 0, 0, 0);
|
|
198
204
|
--kp-color-primary-outline-bg-hover: #1e2a4f;
|
|
199
205
|
--kp-color-primary-outline-bg-active: #27395e;
|
|
206
|
+
--kp-color-primary-outline-fg-rest: #93c5fd;
|
|
207
|
+
--kp-color-primary-outline-fg-hover: #bfdbfe;
|
|
200
208
|
--kp-color-primary-outline-fg-active: #bfdbfe;
|
|
209
|
+
--kp-color-primary-outline-fg-focus: #93c5fd;
|
|
210
|
+
--kp-color-primary-outline-fg-loading: #93c5fd;
|
|
201
211
|
--kp-color-primary-outline-fg-disabled: #3f3f46;
|
|
202
212
|
--kp-color-primary-outline-border-rest: #3a4f88;
|
|
203
213
|
--kp-color-primary-outline-border-hover: #4a60a0;
|
|
@@ -207,7 +217,11 @@
|
|
|
207
217
|
--kp-color-primary-outline-border-loading: #3a4f88;
|
|
208
218
|
--kp-color-primary-ghost-bg-hover: #1e2a4f;
|
|
209
219
|
--kp-color-primary-ghost-bg-active: #27395e;
|
|
220
|
+
--kp-color-primary-ghost-fg-rest: #93c5fd;
|
|
221
|
+
--kp-color-primary-ghost-fg-hover: #bfdbfe;
|
|
210
222
|
--kp-color-primary-ghost-fg-active: #bfdbfe;
|
|
223
|
+
--kp-color-primary-ghost-fg-focus: #93c5fd;
|
|
224
|
+
--kp-color-primary-ghost-fg-loading: #93c5fd;
|
|
211
225
|
--kp-color-primary-ghost-fg-disabled: #3f3f46;
|
|
212
226
|
--kp-color-danger-default-bg-disabled: #18181b;
|
|
213
227
|
--kp-color-danger-default-bg-loading: #ef4444;
|
|
@@ -230,7 +244,11 @@
|
|
|
230
244
|
--kp-color-danger-subtle-border-disabled: rgba(0, 0, 0, 0);
|
|
231
245
|
--kp-color-danger-outline-bg-hover: #3a1518;
|
|
232
246
|
--kp-color-danger-outline-bg-active: #4d1b1f;
|
|
247
|
+
--kp-color-danger-outline-fg-rest: #fca5a5;
|
|
248
|
+
--kp-color-danger-outline-fg-hover: #fecaca;
|
|
233
249
|
--kp-color-danger-outline-fg-active: #fecaca;
|
|
250
|
+
--kp-color-danger-outline-fg-focus: #fca5a5;
|
|
251
|
+
--kp-color-danger-outline-fg-loading: #fca5a5;
|
|
234
252
|
--kp-color-danger-outline-fg-disabled: #3f3f46;
|
|
235
253
|
--kp-color-danger-outline-border-rest: #7a2a2d;
|
|
236
254
|
--kp-color-danger-outline-border-hover: #933338;
|
|
@@ -240,7 +258,11 @@
|
|
|
240
258
|
--kp-color-danger-outline-border-loading: #7a2a2d;
|
|
241
259
|
--kp-color-danger-ghost-bg-hover: #3a1518;
|
|
242
260
|
--kp-color-danger-ghost-bg-active: #4d1b1f;
|
|
261
|
+
--kp-color-danger-ghost-fg-rest: #fca5a5;
|
|
262
|
+
--kp-color-danger-ghost-fg-hover: #fecaca;
|
|
243
263
|
--kp-color-danger-ghost-fg-active: #fecaca;
|
|
264
|
+
--kp-color-danger-ghost-fg-focus: #fca5a5;
|
|
265
|
+
--kp-color-danger-ghost-fg-loading: #fca5a5;
|
|
244
266
|
--kp-color-danger-ghost-fg-disabled: #3f3f46;
|
|
245
267
|
--kp-color-neutral-default-bg-rest: #3f3f46;
|
|
246
268
|
--kp-color-neutral-default-bg-hover: #52525b;
|
|
@@ -321,7 +343,7 @@
|
|
|
321
343
|
--kp-color-input-border-disabled: #27272a;
|
|
322
344
|
--kp-color-input-fg-default: #e4e4e7;
|
|
323
345
|
--kp-color-input-fg-disabled: #3f3f46;
|
|
324
|
-
--kp-color-input-placeholder-default: #
|
|
346
|
+
--kp-color-input-placeholder-default: #a1a1aa;
|
|
325
347
|
--kp-color-popover-fg-desc: #a1a1aa;
|
|
326
348
|
--kp-color-popover-bg: #1f1f22;
|
|
327
349
|
--kp-color-popover-border: #3f3f46;
|
|
@@ -331,6 +353,7 @@
|
|
|
331
353
|
--kp-color-nav-item-fg-active: #dbeafe;
|
|
332
354
|
--kp-color-nav-item-fg-disabled: #71717a;
|
|
333
355
|
--kp-color-nav-item-icon-active: #bfdbfe;
|
|
356
|
+
--kp-color-header-nav-item-fg-active: #60a5fa;
|
|
334
357
|
--kp-color-breadcrumbs-item-fg-link-rest: #93c5fd;
|
|
335
358
|
--kp-color-table-header-fg: #a1a1aa;
|
|
336
359
|
--kp-color-table-row-fg: #f4f4f5;
|
|
@@ -339,7 +362,11 @@
|
|
|
339
362
|
--kp-color-datepicker-day-fg-outside: #71717a;
|
|
340
363
|
--kp-color-sidebar-section-label: #a1a1aa;
|
|
341
364
|
--kp-color-text-muted: #a1a1aa;
|
|
342
|
-
--kp-color-text-disabled: #
|
|
365
|
+
--kp-color-text-disabled: #a1a1aa;
|
|
366
|
+
--kp-color-form-required-optional: #a1a1aa;
|
|
367
|
+
--kp-color-tree-node-fg-selected: #93c5fd;
|
|
368
|
+
--kp-color-tree-node-fg-disabled: #71717a;
|
|
369
|
+
--kp-color-tree-node-bg-selected: #1e2a4f;
|
|
343
370
|
--kp-color-surface-muted: #27272a;
|
|
344
371
|
--kp-color-surface-strong: #3f3f46;
|
|
345
372
|
--kp-color-accent-primary-fg: #60a5fa;
|
package/styles/tokens.css
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
--kp-color-white: #ffffff;
|
|
9
9
|
--kp-color-black: #09090b;
|
|
10
10
|
--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). */
|
|
11
|
+
--kp-color-foreground-on-dark-accent-primary: #60a5fa; /** audit-2026-05-12 — brand-accent fg for active states on always-dark surfaces (kp-header--dark, kp-sidebar--dark). Stays at blue-400 light in BOTH themes (no dark.json override) so the active fg reads ~7:1 on #18181B regardless of which theme the page is in. Without this, a dark-appearance header in a light-themed page used theme-aware accent.primary.fg which is the darker blue.700 — fails AA. */
|
|
11
12
|
--kp-color-gray-50: #fafafa;
|
|
12
13
|
--kp-color-gray-100: #f4f4f5;
|
|
13
14
|
--kp-color-gray-200: #e4e4e7;
|
|
@@ -74,11 +75,11 @@
|
|
|
74
75
|
--kp-color-cyan-800: #155e75;
|
|
75
76
|
--kp-color-cyan-900: #164e63;
|
|
76
77
|
--kp-color-cyan-950: #083344;
|
|
77
|
-
--kp-color-accent-primary-fg: var(--kp-color-blue-600)
|
|
78
|
-
--kp-color-accent-danger-fg: var(--kp-color-red-600)
|
|
79
|
-
--kp-color-accent-success-fg: var(--kp-color-green-600)
|
|
80
|
-
--kp-color-accent-warning-fg: var(--kp-color-amber-600)
|
|
81
|
-
--kp-color-accent-info-fg: var(--kp-color-cyan-600)
|
|
78
|
+
--kp-color-accent-primary-fg: var(--kp-color-blue-700); /** audit-2026-05-12 — was blue.600 #2563EB (4.55:1 on white, borderline AA). blue.700 #1D4ED8 → 7.46:1. */
|
|
79
|
+
--kp-color-accent-danger-fg: var(--kp-color-red-700); /** audit-2026-05-12 — was red.600 #DC2626 (4.95:1 on white, borderline AA). red.700 #B91C1C → 6.27:1. */
|
|
80
|
+
--kp-color-accent-success-fg: var(--kp-color-green-700); /** audit-2026-05-12 — was green.600 #16A34A (2.94:1 on white, fails AA). green.700 #15803D → 4.74:1. */
|
|
81
|
+
--kp-color-accent-warning-fg: var(--kp-color-amber-700); /** audit-2026-05-12 — was amber.600 #D97706 (3.04:1 on white, fails AA). amber.700 #B45309 → 5.53:1. */
|
|
82
|
+
--kp-color-accent-info-fg: var(--kp-color-cyan-700); /** audit-2026-05-12 — was cyan.600 #0891B2 (4.16:1 on white, fails AA). cyan.700 #0E7490 → 5.54:1. */
|
|
82
83
|
--kp-color-primary-default-bg-rest: var(--kp-color-blue-600);
|
|
83
84
|
--kp-color-primary-default-bg-hover: var(--kp-color-blue-700);
|
|
84
85
|
--kp-color-primary-default-bg-active: var(--kp-color-blue-800);
|
|
@@ -299,7 +300,7 @@
|
|
|
299
300
|
--kp-color-text-strong: var(--kp-color-gray-900); /** Headings and primary emphasized text */
|
|
300
301
|
--kp-color-text-default: var(--kp-color-gray-700); /** Default body text */
|
|
301
302
|
--kp-color-text-muted: var(--kp-color-gray-500); /** Secondary text — captions, helper, less important labels. Dark override → gray.600 for AA contrast against dark page bg. */
|
|
302
|
-
--kp-color-text-disabled: var(--kp-color-gray-
|
|
303
|
+
--kp-color-text-disabled: var(--kp-color-gray-500); /** audit-2026-05-12 — was gray.400 #A1A1AA (2.62:1 on white, fails AA). gray.500 #71717A → 4.84:1. Visually collapses with `muted` (same hex) in light; the visual disabled affordance now comes from `cursor: not-allowed` + reduced font-weight on actually-disabled controls. Dark override aligned to gray.600 (=#A1A1AA in dark) for consistency. */
|
|
303
304
|
--kp-color-surface-base: var(--kp-color-white); /** Top elevated surface — cards, dialogs, dropdowns. Inverts to gray-900 dark = #18181B */
|
|
304
305
|
--kp-color-surface-subtle: var(--kp-color-gray-50); /** Page background behind cards, recessed regions. Inverts to gray-950 dark = #09090B */
|
|
305
306
|
--kp-color-surface-muted: var(--kp-color-gray-100); /** Hover background, alternating rows, muted callouts. Dark override → gray.200 (= #27272A in dark, distinguishable from base) */
|
|
@@ -361,7 +362,7 @@
|
|
|
361
362
|
--kp-color-input-border-focus: var(--kp-color-blue-600);
|
|
362
363
|
--kp-color-input-border-disabled: var(--kp-color-gray-200);
|
|
363
364
|
--kp-color-input-border-error: var(--kp-color-red-500);
|
|
364
|
-
--kp-color-input-placeholder-default: var(--kp-color-gray-400)
|
|
365
|
+
--kp-color-input-placeholder-default: var(--kp-color-gray-500); /** audit-2026-05-12 — was gray.400 #A1A1AA (2.62:1 on white, fails AA). gray.500 #71717A → 4.84:1. Dark override (#A1A1AA) preserves prior dark contrast. */
|
|
365
366
|
--kp-color-input-placeholder-disabled: var(--kp-color-gray-300);
|
|
366
367
|
--kp-color-checkbox-border-rest: var(--kp-color-gray-300);
|
|
367
368
|
--kp-color-checkbox-border-hover: var(--kp-color-gray-400);
|
|
@@ -433,9 +434,9 @@
|
|
|
433
434
|
--kp-color-badge-danger-dot-fg: var(--kp-color-gray-700);
|
|
434
435
|
--kp-color-badge-danger-dot-border: rgba(0, 0, 0, 0);
|
|
435
436
|
--kp-color-badge-danger-dot-dot: var(--kp-color-red-600);
|
|
436
|
-
--kp-color-badge-success-filled-bg: var(--kp-color-green-
|
|
437
|
+
--kp-color-badge-success-filled-bg: var(--kp-color-green-700);
|
|
437
438
|
--kp-color-badge-success-filled-fg: var(--kp-color-foreground-on-saturated);
|
|
438
|
-
--kp-color-badge-success-filled-border: var(--kp-color-green-
|
|
439
|
+
--kp-color-badge-success-filled-border: var(--kp-color-green-700);
|
|
439
440
|
--kp-color-badge-success-filled-dot: var(--kp-color-foreground-on-saturated);
|
|
440
441
|
--kp-color-badge-success-subtle-bg: var(--kp-color-green-50);
|
|
441
442
|
--kp-color-badge-success-subtle-fg: var(--kp-color-green-700);
|
|
@@ -465,9 +466,9 @@
|
|
|
465
466
|
--kp-color-badge-warning-dot-fg: var(--kp-color-gray-700);
|
|
466
467
|
--kp-color-badge-warning-dot-border: rgba(0, 0, 0, 0);
|
|
467
468
|
--kp-color-badge-warning-dot-dot: var(--kp-color-amber-500);
|
|
468
|
-
--kp-color-badge-info-filled-bg: var(--kp-color-cyan-
|
|
469
|
+
--kp-color-badge-info-filled-bg: var(--kp-color-cyan-700);
|
|
469
470
|
--kp-color-badge-info-filled-fg: var(--kp-color-foreground-on-saturated);
|
|
470
|
-
--kp-color-badge-info-filled-border: var(--kp-color-cyan-
|
|
471
|
+
--kp-color-badge-info-filled-border: var(--kp-color-cyan-700);
|
|
471
472
|
--kp-color-badge-info-filled-dot: var(--kp-color-foreground-on-saturated);
|
|
472
473
|
--kp-color-badge-info-subtle-bg: var(--kp-color-cyan-50);
|
|
473
474
|
--kp-color-badge-info-subtle-fg: var(--kp-color-cyan-700);
|
|
@@ -654,9 +655,9 @@
|
|
|
654
655
|
--kp-color-progress-track: var(--kp-color-gray-100); /** Empty track background */
|
|
655
656
|
--kp-color-progress-label: var(--kp-color-gray-700); /** Progress label text */
|
|
656
657
|
--kp-color-progress-value: var(--kp-color-gray-900); /** Progress percentage text */
|
|
657
|
-
--kp-color-progress-primary-fill: var(--kp-color-blue-600)
|
|
658
|
-
--kp-color-progress-success-fill: var(--kp-color-green-600)
|
|
659
|
-
--kp-color-progress-danger-fill: var(--kp-color-red-
|
|
658
|
+
--kp-color-progress-primary-fill: var(--kp-color-blue-700); /** audit-2026-05-13 — was blue.600. Used as both filled-segment bg (white fg → 7.46:1) and current-label color on page bg (white = 7.46:1). brand.700 passes AA in both roles. */
|
|
659
|
+
--kp-color-progress-success-fill: var(--kp-color-green-700); /** audit-2026-05-13 — was green.600 (2.94:1 fails as label color on white). green.700 → 4.74:1. */
|
|
660
|
+
--kp-color-progress-danger-fill: var(--kp-color-red-700); /** audit-2026-05-13 — was red.600. red.700 → 6.27:1 on white. */
|
|
660
661
|
--kp-color-progress-warning-fill: var(--kp-color-amber-500);
|
|
661
662
|
--kp-color-progress-neutral-fill: var(--kp-color-gray-700);
|
|
662
663
|
--kp-color-tabs-tab-fg-rest: var(--kp-color-gray-600);
|
|
@@ -721,7 +722,7 @@
|
|
|
721
722
|
--kp-color-header-fg-dark: var(--kp-color-white);
|
|
722
723
|
--kp-color-header-nav-item-fg-rest: var(--kp-color-gray-700);
|
|
723
724
|
--kp-color-header-nav-item-fg-hover: var(--kp-color-gray-900);
|
|
724
|
-
--kp-color-header-nav-item-fg-active: var(--kp-color-blue-600)
|
|
725
|
+
--kp-color-header-nav-item-fg-active: var(--kp-color-blue-700); /** audit-2026-05-12 — was blue.600 (4.55:1 on white, borderline AA). blue.700 → 7.46:1. */
|
|
725
726
|
--kp-color-header-nav-item-bg-hover: var(--kp-color-gray-50);
|
|
726
727
|
--kp-color-breadcrumbs-item-fg-link-rest: var(--kp-color-gray-600); /** Link item at rest */
|
|
727
728
|
--kp-color-breadcrumbs-item-fg-link-hover: var(--kp-color-gray-900); /** Link item on hover */
|
|
@@ -801,7 +802,7 @@
|
|
|
801
802
|
--kp-color-tree-node-bg-selected: var(--kp-color-blue-50);
|
|
802
803
|
--kp-color-tree-node-fg-rest: var(--kp-color-gray-900);
|
|
803
804
|
--kp-color-tree-node-fg-selected: var(--kp-color-blue-700);
|
|
804
|
-
--kp-color-tree-node-fg-disabled: var(--kp-color-gray-400)
|
|
805
|
+
--kp-color-tree-node-fg-disabled: var(--kp-color-gray-500); /** audit-2026-05-13 — was gray.400 (2.62:1 on white, fails AA). gray.500 → 4.84:1. */
|
|
805
806
|
--kp-color-tree-node-icon-rest: var(--kp-color-gray-600);
|
|
806
807
|
--kp-color-tree-node-icon-selected: var(--kp-color-blue-600);
|
|
807
808
|
--kp-color-tree-node-chevron: var(--kp-color-gray-500);
|