@kanso-protocol/core 0.5.0 → 0.5.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 (4) hide show
  1. package/package.json +1 -1
  2. package/styles/_tokens.scss +55 -35
  3. package/styles/dark.css +208 -48
  4. package/styles/tokens.css +238 -216
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kanso-protocol/core",
3
- "version": "0.5.0",
3
+ "version": "0.5.2",
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;
@@ -123,6 +124,11 @@ $kp-color-neutral-ghost-border-hover: rgba(0, 0, 0, 0);
123
124
  $kp-color-neutral-ghost-border-active: rgba(0, 0, 0, 0);
124
125
  $kp-color-neutral-ghost-border-disabled: rgba(0, 0, 0, 0);
125
126
  $kp-color-neutral-ghost-border-loading: rgba(0, 0, 0, 0);
127
+ $kp-color-surface-on-dark-base: #18181b; // Always-dark elevated surface (e.g. .kp-header--dark, .kp-sidebar--dark). No dark override — value is fixed across themes.
128
+ $kp-color-surface-on-dark-muted: #27272a; // Always-dark hover/muted surface
129
+ $kp-color-surface-on-dark-strong: #3f3f46; // Always-dark active/pressed surface
130
+ $kp-color-border-on-dark-subtle: #27272a; // Faint divider on always-dark surfaces
131
+ $kp-color-border-on-dark-default: #3f3f46; // Standard border on always-dark surfaces
126
132
  $kp-color-segmented-segment-bg-unselected-rest: rgba(0, 0, 0, 0);
127
133
  $kp-color-segmented-segment-bg-disabled: rgba(0, 0, 0, 0);
128
134
  $kp-color-badge-primary-subtle-border: rgba(0, 0, 0, 0);
@@ -253,12 +259,12 @@ $kp-color-primary-default-bg-active: $kp-color-blue-800;
253
259
  $kp-color-primary-default-bg-focus: $kp-color-blue-600;
254
260
  $kp-color-primary-default-bg-disabled: $kp-color-gray-200;
255
261
  $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;
262
+ $kp-color-primary-default-fg-rest: $kp-color-foreground-on-saturated;
263
+ $kp-color-primary-default-fg-hover: $kp-color-foreground-on-saturated;
264
+ $kp-color-primary-default-fg-active: $kp-color-foreground-on-saturated;
265
+ $kp-color-primary-default-fg-focus: $kp-color-foreground-on-saturated;
260
266
  $kp-color-primary-default-fg-disabled: $kp-color-gray-400;
261
- $kp-color-primary-default-fg-loading: $kp-color-white;
267
+ $kp-color-primary-default-fg-loading: $kp-color-foreground-on-saturated;
262
268
  $kp-color-primary-default-border-rest: $kp-color-blue-600;
263
269
  $kp-color-primary-default-border-hover: $kp-color-blue-700;
264
270
  $kp-color-primary-default-border-active: $kp-color-blue-800;
@@ -307,12 +313,12 @@ $kp-color-danger-default-bg-active: $kp-color-red-800;
307
313
  $kp-color-danger-default-bg-focus: $kp-color-red-600;
308
314
  $kp-color-danger-default-bg-disabled: $kp-color-gray-200;
309
315
  $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;
316
+ $kp-color-danger-default-fg-rest: $kp-color-foreground-on-saturated;
317
+ $kp-color-danger-default-fg-hover: $kp-color-foreground-on-saturated;
318
+ $kp-color-danger-default-fg-active: $kp-color-foreground-on-saturated;
319
+ $kp-color-danger-default-fg-focus: $kp-color-foreground-on-saturated;
314
320
  $kp-color-danger-default-fg-disabled: $kp-color-gray-400;
315
- $kp-color-danger-default-fg-loading: $kp-color-white;
321
+ $kp-color-danger-default-fg-loading: $kp-color-foreground-on-saturated;
316
322
  $kp-color-danger-default-border-rest: $kp-color-red-600;
317
323
  $kp-color-danger-default-border-hover: $kp-color-red-700;
318
324
  $kp-color-danger-default-border-active: $kp-color-red-800;
@@ -410,6 +416,17 @@ $kp-color-neutral-ghost-fg-disabled: $kp-color-gray-400;
410
416
  $kp-color-neutral-ghost-fg-loading: $kp-color-gray-400;
411
417
  $kp-color-neutral-ghost-border-focus: $kp-color-gray-600;
412
418
  $kp-color-focus-ring: $kp-color-blue-400; // Focus ring — 2px offset outline for all focusable elements
419
+ $kp-color-text-strong: $kp-color-gray-900; // Headings and primary emphasized text
420
+ $kp-color-text-default: $kp-color-gray-700; // Default body text
421
+ $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-400; // Disabled labels, placeholders. Dark override → gray.500 to stay visibly less prominent than `muted`.
423
+ $kp-color-surface-base: $kp-color-white; // Top elevated surface — cards, dialogs, dropdowns. Inverts to gray-900 dark = #18181B
424
+ $kp-color-surface-subtle: $kp-color-gray-50; // Page background behind cards, recessed regions. Inverts to gray-950 dark = #09090B
425
+ $kp-color-surface-muted: $kp-color-gray-100; // Hover background, alternating rows, muted callouts. Dark override → gray.200 (= #27272A in dark, distinguishable from base)
426
+ $kp-color-surface-strong: $kp-color-gray-200; // Active row, pressed state, more prominent muted bg. Dark override → gray.300
427
+ $kp-color-border-subtle: $kp-color-gray-100; // Faint internal dividers
428
+ $kp-color-border-default: $kp-color-gray-200; // Standard control and card borders
429
+ $kp-color-border-strong: $kp-color-gray-300; // Emphasized borders — focused panels, table headers
413
430
  $kp-color-icon-primary: $kp-color-gray-700; // Default icon color on light backgrounds — navigation, lists, labels
414
431
  $kp-color-icon-secondary: $kp-color-gray-400; // Decorative icons, placeholders, hints
415
432
  $kp-color-icon-disabled: $kp-color-gray-300; // Disabled/inactive icons
@@ -461,6 +478,8 @@ $kp-color-input-border-disabled: $kp-color-gray-200;
461
478
  $kp-color-input-border-error: $kp-color-red-500;
462
479
  $kp-color-input-placeholder-default: $kp-color-gray-400;
463
480
  $kp-color-input-placeholder-disabled: $kp-color-gray-300;
481
+ $kp-color-checkbox-border-rest: $kp-color-gray-300;
482
+ $kp-color-checkbox-border-hover: $kp-color-gray-400;
464
483
  $kp-color-select-chevron-rest: $kp-color-gray-500;
465
484
  $kp-color-select-chevron-hover: $kp-color-gray-700;
466
485
  $kp-color-select-chevron-open: $kp-color-blue-600;
@@ -475,9 +494,9 @@ $kp-color-stepper-indicator-border-active: $kp-color-blue-600;
475
494
  $kp-color-stepper-indicator-border-completed: $kp-color-blue-600;
476
495
  $kp-color-stepper-indicator-border-error: $kp-color-red-600;
477
496
  $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;
497
+ $kp-color-stepper-indicator-fg-active: $kp-color-foreground-on-saturated;
498
+ $kp-color-stepper-indicator-fg-completed: $kp-color-foreground-on-saturated;
499
+ $kp-color-stepper-indicator-fg-error: $kp-color-foreground-on-saturated;
481
500
  $kp-color-stepper-label-pending: $kp-color-gray-500;
482
501
  $kp-color-stepper-label-active: $kp-color-gray-900;
483
502
  $kp-color-stepper-label-completed: $kp-color-gray-700;
@@ -496,9 +515,9 @@ $kp-color-segmented-segment-fg-unselected-rest: $kp-color-gray-600;
496
515
  $kp-color-segmented-segment-fg-unselected-hover: $kp-color-gray-900;
497
516
  $kp-color-segmented-segment-fg-disabled: $kp-color-gray-400;
498
517
  $kp-color-badge-primary-filled-bg: $kp-color-blue-600;
499
- $kp-color-badge-primary-filled-fg: $kp-color-white;
518
+ $kp-color-badge-primary-filled-fg: $kp-color-foreground-on-saturated;
500
519
  $kp-color-badge-primary-filled-border: $kp-color-blue-600;
501
- $kp-color-badge-primary-filled-dot: $kp-color-white;
520
+ $kp-color-badge-primary-filled-dot: $kp-color-foreground-on-saturated;
502
521
  $kp-color-badge-primary-subtle-bg: $kp-color-blue-50;
503
522
  $kp-color-badge-primary-subtle-fg: $kp-color-blue-700;
504
523
  $kp-color-badge-primary-subtle-dot: $kp-color-blue-600;
@@ -508,9 +527,9 @@ $kp-color-badge-primary-outline-dot: $kp-color-blue-600;
508
527
  $kp-color-badge-primary-dot-fg: $kp-color-gray-700;
509
528
  $kp-color-badge-primary-dot-dot: $kp-color-blue-600;
510
529
  $kp-color-badge-danger-filled-bg: $kp-color-red-600;
511
- $kp-color-badge-danger-filled-fg: $kp-color-white;
530
+ $kp-color-badge-danger-filled-fg: $kp-color-foreground-on-saturated;
512
531
  $kp-color-badge-danger-filled-border: $kp-color-red-600;
513
- $kp-color-badge-danger-filled-dot: $kp-color-white;
532
+ $kp-color-badge-danger-filled-dot: $kp-color-foreground-on-saturated;
514
533
  $kp-color-badge-danger-subtle-bg: $kp-color-red-50;
515
534
  $kp-color-badge-danger-subtle-fg: $kp-color-red-700;
516
535
  $kp-color-badge-danger-subtle-dot: $kp-color-red-600;
@@ -520,9 +539,9 @@ $kp-color-badge-danger-outline-dot: $kp-color-red-600;
520
539
  $kp-color-badge-danger-dot-fg: $kp-color-gray-700;
521
540
  $kp-color-badge-danger-dot-dot: $kp-color-red-600;
522
541
  $kp-color-badge-success-filled-bg: $kp-color-green-600;
523
- $kp-color-badge-success-filled-fg: $kp-color-white;
542
+ $kp-color-badge-success-filled-fg: $kp-color-foreground-on-saturated;
524
543
  $kp-color-badge-success-filled-border: $kp-color-green-600;
525
- $kp-color-badge-success-filled-dot: $kp-color-white;
544
+ $kp-color-badge-success-filled-dot: $kp-color-foreground-on-saturated;
526
545
  $kp-color-badge-success-subtle-bg: $kp-color-green-50;
527
546
  $kp-color-badge-success-subtle-fg: $kp-color-green-700;
528
547
  $kp-color-badge-success-subtle-dot: $kp-color-green-600;
@@ -544,9 +563,9 @@ $kp-color-badge-warning-outline-dot: $kp-color-amber-500;
544
563
  $kp-color-badge-warning-dot-fg: $kp-color-gray-700;
545
564
  $kp-color-badge-warning-dot-dot: $kp-color-amber-500;
546
565
  $kp-color-badge-info-filled-bg: $kp-color-cyan-600;
547
- $kp-color-badge-info-filled-fg: $kp-color-white;
566
+ $kp-color-badge-info-filled-fg: $kp-color-foreground-on-saturated;
548
567
  $kp-color-badge-info-filled-border: $kp-color-cyan-600;
549
- $kp-color-badge-info-filled-dot: $kp-color-white;
568
+ $kp-color-badge-info-filled-dot: $kp-color-foreground-on-saturated;
550
569
  $kp-color-badge-info-subtle-bg: $kp-color-cyan-50;
551
570
  $kp-color-badge-info-subtle-fg: $kp-color-cyan-700;
552
571
  $kp-color-badge-info-subtle-dot: $kp-color-cyan-600;
@@ -574,11 +593,11 @@ $kp-color-alert-primary-subtle-border: $kp-color-blue-200;
574
593
  $kp-color-alert-primary-subtle-icon: $kp-color-blue-600;
575
594
  $kp-color-alert-primary-subtle-accent: $kp-color-blue-600;
576
595
  $kp-color-alert-primary-solid-bg: $kp-color-blue-600;
577
- $kp-color-alert-primary-solid-fg-title: $kp-color-white;
596
+ $kp-color-alert-primary-solid-fg-title: $kp-color-foreground-on-saturated;
578
597
  $kp-color-alert-primary-solid-fg-desc: $kp-color-blue-50;
579
598
  $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;
599
+ $kp-color-alert-primary-solid-icon: $kp-color-foreground-on-saturated;
600
+ $kp-color-alert-primary-solid-accent: $kp-color-foreground-on-saturated;
582
601
  $kp-color-alert-primary-outline-bg: $kp-color-white;
583
602
  $kp-color-alert-primary-outline-fg-title: $kp-color-blue-900;
584
603
  $kp-color-alert-primary-outline-fg-desc: $kp-color-gray-700;
@@ -598,11 +617,11 @@ $kp-color-alert-danger-subtle-border: $kp-color-red-200;
598
617
  $kp-color-alert-danger-subtle-icon: $kp-color-red-600;
599
618
  $kp-color-alert-danger-subtle-accent: $kp-color-red-600;
600
619
  $kp-color-alert-danger-solid-bg: $kp-color-red-600;
601
- $kp-color-alert-danger-solid-fg-title: $kp-color-white;
620
+ $kp-color-alert-danger-solid-fg-title: $kp-color-foreground-on-saturated;
602
621
  $kp-color-alert-danger-solid-fg-desc: $kp-color-red-50;
603
622
  $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;
623
+ $kp-color-alert-danger-solid-icon: $kp-color-foreground-on-saturated;
624
+ $kp-color-alert-danger-solid-accent: $kp-color-foreground-on-saturated;
606
625
  $kp-color-alert-danger-outline-bg: $kp-color-white;
607
626
  $kp-color-alert-danger-outline-fg-title: $kp-color-red-900;
608
627
  $kp-color-alert-danger-outline-fg-desc: $kp-color-gray-700;
@@ -622,11 +641,11 @@ $kp-color-alert-success-subtle-border: $kp-color-green-200;
622
641
  $kp-color-alert-success-subtle-icon: $kp-color-green-600;
623
642
  $kp-color-alert-success-subtle-accent: $kp-color-green-600;
624
643
  $kp-color-alert-success-solid-bg: $kp-color-green-600;
625
- $kp-color-alert-success-solid-fg-title: $kp-color-white;
644
+ $kp-color-alert-success-solid-fg-title: $kp-color-foreground-on-saturated;
626
645
  $kp-color-alert-success-solid-fg-desc: $kp-color-green-50;
627
646
  $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;
647
+ $kp-color-alert-success-solid-icon: $kp-color-foreground-on-saturated;
648
+ $kp-color-alert-success-solid-accent: $kp-color-foreground-on-saturated;
630
649
  $kp-color-alert-success-outline-bg: $kp-color-white;
631
650
  $kp-color-alert-success-outline-fg-title: $kp-color-green-900;
632
651
  $kp-color-alert-success-outline-fg-desc: $kp-color-gray-700;
@@ -670,11 +689,11 @@ $kp-color-alert-info-subtle-border: $kp-color-cyan-200;
670
689
  $kp-color-alert-info-subtle-icon: $kp-color-cyan-600;
671
690
  $kp-color-alert-info-subtle-accent: $kp-color-cyan-600;
672
691
  $kp-color-alert-info-solid-bg: $kp-color-cyan-600;
673
- $kp-color-alert-info-solid-fg-title: $kp-color-white;
692
+ $kp-color-alert-info-solid-fg-title: $kp-color-foreground-on-saturated;
674
693
  $kp-color-alert-info-solid-fg-desc: $kp-color-cyan-50;
675
694
  $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;
695
+ $kp-color-alert-info-solid-icon: $kp-color-foreground-on-saturated;
696
+ $kp-color-alert-info-solid-accent: $kp-color-foreground-on-saturated;
678
697
  $kp-color-alert-info-outline-bg: $kp-color-white;
679
698
  $kp-color-alert-info-outline-fg-title: $kp-color-cyan-900;
680
699
  $kp-color-alert-info-outline-fg-desc: $kp-color-gray-700;
@@ -807,12 +826,12 @@ $kp-color-pagination-item-bg-selected: $kp-color-blue-600;
807
826
  $kp-color-pagination-item-fg-rest: $kp-color-gray-700;
808
827
  $kp-color-pagination-item-fg-hover: $kp-color-blue-700;
809
828
  $kp-color-pagination-item-fg-active: $kp-color-blue-700;
810
- $kp-color-pagination-item-fg-selected: $kp-color-white;
829
+ $kp-color-pagination-item-fg-selected: $kp-color-foreground-on-saturated;
811
830
  $kp-color-pagination-item-fg-disabled: $kp-color-gray-300;
812
831
  $kp-color-pagination-item-icon-rest: $kp-color-gray-600;
813
832
  $kp-color-pagination-item-icon-hover: $kp-color-blue-700;
814
833
  $kp-color-pagination-item-icon-active: $kp-color-blue-700;
815
- $kp-color-pagination-item-icon-selected: $kp-color-white;
834
+ $kp-color-pagination-item-icon-selected: $kp-color-foreground-on-saturated;
816
835
  $kp-color-pagination-item-icon-disabled: $kp-color-gray-300;
817
836
  $kp-color-pagination-ellipsis: $kp-color-gray-500; // Ellipsis (…) color between page ranges
818
837
  $kp-color-pagination-info: $kp-color-gray-600; // 'Showing X of Y' info text + 'Per page' label
@@ -883,6 +902,7 @@ $kp-color-empty-state-fg-title: $kp-color-gray-900;
883
902
  $kp-color-empty-state-fg-description: $kp-color-gray-600;
884
903
  $kp-color-card-bg: $kp-color-white;
885
904
  $kp-color-card-bg-muted: $kp-color-gray-50; // Alternative muted background
905
+ $kp-color-card-bg-elevated: $kp-color-white; // Same as bg in light. Dark override (#1F1F22) lifts the elevated card one step above default so the elevation reads against the dark page bg.
886
906
  $kp-color-card-border: $kp-color-gray-200;
887
907
  $kp-color-card-fg-title: $kp-color-gray-900;
888
908
  $kp-color-card-fg-desc: $kp-color-gray-600;
package/styles/dark.css CHANGED
@@ -83,28 +83,6 @@
83
83
  --kp-color-cyan-800: #155e75;
84
84
  --kp-color-cyan-900: #cffafe;
85
85
  --kp-color-cyan-950: #ecfeff;
86
- --kp-color-orange-50: #431407;
87
- --kp-color-orange-100: #7c2d12;
88
- --kp-color-orange-200: #9a3412;
89
- --kp-color-orange-300: #c2410c;
90
- --kp-color-orange-400: #ea580c;
91
- --kp-color-orange-500: #f97316;
92
- --kp-color-orange-600: #ea580c;
93
- --kp-color-orange-700: #c2410c;
94
- --kp-color-orange-800: #9a3412;
95
- --kp-color-orange-900: #ffedd5;
96
- --kp-color-orange-950: #fff7ed;
97
- --kp-color-violet-50: #2e1065;
98
- --kp-color-violet-100: #4c1d95;
99
- --kp-color-violet-200: #5b21b6;
100
- --kp-color-violet-300: #6d28d9;
101
- --kp-color-violet-400: #7c3aed;
102
- --kp-color-violet-500: #8b5cf6;
103
- --kp-color-violet-600: #7c3aed;
104
- --kp-color-violet-700: #6d28d9;
105
- --kp-color-violet-800: #5b21b6;
106
- --kp-color-violet-900: #ede9fe;
107
- --kp-color-violet-950: #f5f3ff;
108
86
  --kp-color-badge-primary-subtle-bg: #1e3a8a;
109
87
  --kp-color-badge-primary-subtle-fg: #93c5fd;
110
88
  --kp-color-badge-danger-subtle-bg: #7f1d1d;
@@ -118,68 +96,250 @@
118
96
  --kp-color-badge-neutral-subtle-bg: #27272a;
119
97
  --kp-color-badge-neutral-subtle-fg: #d4d4d8;
120
98
  --kp-color-alert-primary-subtle-bg: #1e3a8a;
121
- --kp-color-alert-primary-subtle-fg-title: #dbeafe;
122
- --kp-color-alert-primary-subtle-fg-desc: #bfdbfe;
99
+ --kp-color-alert-primary-subtle-fg-title: #fafafa;
100
+ --kp-color-alert-primary-subtle-fg-desc: #dbeafe;
101
+ --kp-color-alert-primary-subtle-border: rgba(0, 0, 0, 0);
102
+ --kp-color-alert-primary-solid-fg-desc: #dbeafe;
103
+ --kp-color-alert-primary-outline-bg: #09090b;
104
+ --kp-color-alert-primary-outline-fg-title: #bfdbfe;
105
+ --kp-color-alert-primary-outline-fg-desc: #a1a1aa;
106
+ --kp-color-alert-primary-left-accent-bg: #09090b;
107
+ --kp-color-alert-primary-left-accent-fg-title: #bfdbfe;
108
+ --kp-color-alert-primary-left-accent-fg-desc: #a1a1aa;
109
+ --kp-color-alert-primary-left-accent-border: #27272a;
110
+ --kp-color-alert-primary-left-accent-accent: #3a4f88;
123
111
  --kp-color-alert-danger-subtle-bg: #7f1d1d;
112
+ --kp-color-alert-danger-subtle-fg-title: #fafafa;
113
+ --kp-color-alert-danger-subtle-fg-desc: #fee2e2;
114
+ --kp-color-alert-danger-subtle-border: rgba(0, 0, 0, 0);
115
+ --kp-color-alert-danger-solid-fg-desc: #fee2e2;
116
+ --kp-color-alert-danger-outline-bg: #09090b;
117
+ --kp-color-alert-danger-outline-fg-title: #fecaca;
118
+ --kp-color-alert-danger-outline-fg-desc: #a1a1aa;
119
+ --kp-color-alert-danger-left-accent-bg: #09090b;
120
+ --kp-color-alert-danger-left-accent-fg-title: #fecaca;
121
+ --kp-color-alert-danger-left-accent-fg-desc: #a1a1aa;
122
+ --kp-color-alert-danger-left-accent-border: #27272a;
123
+ --kp-color-alert-danger-left-accent-accent: #7a2a2d;
124
124
  --kp-color-alert-success-subtle-bg: #14532d;
125
+ --kp-color-alert-success-subtle-fg-title: #fafafa;
126
+ --kp-color-alert-success-subtle-fg-desc: #dcfce7;
127
+ --kp-color-alert-success-subtle-border: rgba(0, 0, 0, 0);
128
+ --kp-color-alert-success-solid-fg-desc: #dcfce7;
129
+ --kp-color-alert-success-outline-bg: #09090b;
130
+ --kp-color-alert-success-outline-fg-title: #bbf7d0;
131
+ --kp-color-alert-success-outline-fg-desc: #a1a1aa;
132
+ --kp-color-alert-success-left-accent-bg: #09090b;
133
+ --kp-color-alert-success-left-accent-fg-title: #bbf7d0;
134
+ --kp-color-alert-success-left-accent-fg-desc: #a1a1aa;
135
+ --kp-color-alert-success-left-accent-border: #27272a;
136
+ --kp-color-alert-success-left-accent-accent: #1f6336;
125
137
  --kp-color-alert-warning-subtle-bg: #78350f;
138
+ --kp-color-alert-warning-subtle-fg-title: #fafafa;
139
+ --kp-color-alert-warning-subtle-fg-desc: #fef3c7;
140
+ --kp-color-alert-warning-subtle-border: rgba(0, 0, 0, 0);
141
+ --kp-color-alert-warning-outline-bg: #09090b;
142
+ --kp-color-alert-warning-outline-fg-title: #fde68a;
143
+ --kp-color-alert-warning-outline-fg-desc: #a1a1aa;
144
+ --kp-color-alert-warning-left-accent-bg: #09090b;
145
+ --kp-color-alert-warning-left-accent-fg-title: #fde68a;
146
+ --kp-color-alert-warning-left-accent-fg-desc: #a1a1aa;
147
+ --kp-color-alert-warning-left-accent-border: #27272a;
148
+ --kp-color-alert-warning-left-accent-accent: #8a4a0e;
126
149
  --kp-color-alert-info-subtle-bg: #164e63;
150
+ --kp-color-alert-info-subtle-fg-title: #fafafa;
151
+ --kp-color-alert-info-subtle-fg-desc: #cffafe;
152
+ --kp-color-alert-info-subtle-border: rgba(0, 0, 0, 0);
153
+ --kp-color-alert-info-solid-fg-desc: #cffafe;
154
+ --kp-color-alert-info-outline-bg: #09090b;
155
+ --kp-color-alert-info-outline-fg-title: #a5f3fc;
156
+ --kp-color-alert-info-outline-fg-desc: #a1a1aa;
157
+ --kp-color-alert-info-left-accent-bg: #09090b;
158
+ --kp-color-alert-info-left-accent-fg-title: #a5f3fc;
159
+ --kp-color-alert-info-left-accent-fg-desc: #a1a1aa;
160
+ --kp-color-alert-info-left-accent-border: #27272a;
161
+ --kp-color-alert-info-left-accent-accent: #155e75;
127
162
  --kp-color-alert-neutral-subtle-bg: #27272a;
128
- --kp-color-primary-default-fg-rest: #ffffff;
129
- --kp-color-primary-default-fg-hover: #ffffff;
130
- --kp-color-primary-default-fg-active: #ffffff;
131
- --kp-color-primary-default-fg-focus: #ffffff;
163
+ --kp-color-alert-neutral-subtle-fg-title: #fafafa;
164
+ --kp-color-alert-neutral-subtle-fg-desc: #a1a1aa;
165
+ --kp-color-alert-neutral-subtle-border: rgba(0, 0, 0, 0);
166
+ --kp-color-alert-neutral-solid-bg: #27272a;
167
+ --kp-color-alert-neutral-solid-fg-title: #fafafa;
168
+ --kp-color-alert-neutral-solid-fg-desc: #a1a1aa;
169
+ --kp-color-alert-neutral-solid-border: #27272a;
170
+ --kp-color-alert-neutral-outline-bg: #09090b;
171
+ --kp-color-alert-neutral-outline-fg-title: #fafafa;
172
+ --kp-color-alert-neutral-outline-fg-desc: #a1a1aa;
173
+ --kp-color-alert-neutral-outline-border: #27272a;
174
+ --kp-color-alert-neutral-left-accent-bg: #09090b;
175
+ --kp-color-alert-neutral-left-accent-fg-title: #fafafa;
176
+ --kp-color-alert-neutral-left-accent-fg-desc: #a1a1aa;
177
+ --kp-color-alert-neutral-left-accent-border: #27272a;
178
+ --kp-color-alert-neutral-left-accent-accent: #3f3f46;
179
+ --kp-color-primary-default-bg-disabled: #18181b;
180
+ --kp-color-primary-default-bg-loading: #3b82f6;
181
+ --kp-color-primary-default-fg-disabled: #52525b;
132
182
  --kp-color-primary-default-fg-loading: #ffffff;
133
- --kp-color-primary-default-fg-disabled: #a1a1aa;
183
+ --kp-color-primary-default-border-disabled: #18181b;
184
+ --kp-color-primary-default-border-loading: #3b82f6;
185
+ --kp-color-primary-subtle-bg-rest: #1e2a4f;
186
+ --kp-color-primary-subtle-bg-hover: #27395e;
187
+ --kp-color-primary-subtle-bg-active: #324871;
188
+ --kp-color-primary-subtle-bg-focus: #1e2a4f;
189
+ --kp-color-primary-subtle-bg-loading: #1e2a4f;
190
+ --kp-color-primary-subtle-bg-disabled: #18181b;
134
191
  --kp-color-primary-subtle-fg-rest: #93c5fd;
135
192
  --kp-color-primary-subtle-fg-hover: #bfdbfe;
136
193
  --kp-color-primary-subtle-fg-active: #dbeafe;
137
194
  --kp-color-primary-subtle-fg-focus: #93c5fd;
138
195
  --kp-color-primary-subtle-fg-loading: #93c5fd;
139
196
  --kp-color-primary-subtle-fg-disabled: #52525b;
140
- --kp-color-danger-default-fg-rest: #ffffff;
141
- --kp-color-danger-default-fg-hover: #ffffff;
142
- --kp-color-danger-default-fg-active: #ffffff;
143
- --kp-color-danger-default-fg-focus: #ffffff;
197
+ --kp-color-primary-subtle-border-disabled: rgba(0, 0, 0, 0);
198
+ --kp-color-primary-outline-bg-hover: #1e2a4f;
199
+ --kp-color-primary-outline-bg-active: #27395e;
200
+ --kp-color-primary-outline-fg-active: #bfdbfe;
201
+ --kp-color-primary-outline-fg-disabled: #3f3f46;
202
+ --kp-color-primary-outline-border-rest: #3a4f88;
203
+ --kp-color-primary-outline-border-hover: #4a60a0;
204
+ --kp-color-primary-outline-border-active: #5c72b8;
205
+ --kp-color-primary-outline-border-focus: #3a4f88;
206
+ --kp-color-primary-outline-border-disabled: #27272a;
207
+ --kp-color-primary-outline-border-loading: #3a4f88;
208
+ --kp-color-primary-ghost-bg-hover: #1e2a4f;
209
+ --kp-color-primary-ghost-bg-active: #27395e;
210
+ --kp-color-primary-ghost-fg-active: #bfdbfe;
211
+ --kp-color-primary-ghost-fg-disabled: #3f3f46;
212
+ --kp-color-danger-default-bg-disabled: #18181b;
213
+ --kp-color-danger-default-bg-loading: #ef4444;
214
+ --kp-color-danger-default-fg-disabled: #52525b;
144
215
  --kp-color-danger-default-fg-loading: #ffffff;
145
- --kp-color-danger-default-fg-disabled: #a1a1aa;
216
+ --kp-color-danger-default-border-disabled: #18181b;
217
+ --kp-color-danger-default-border-loading: #ef4444;
218
+ --kp-color-danger-subtle-bg-rest: #3a1518;
219
+ --kp-color-danger-subtle-bg-hover: #4d1b1f;
220
+ --kp-color-danger-subtle-bg-active: #5e2125;
221
+ --kp-color-danger-subtle-bg-focus: #3a1518;
222
+ --kp-color-danger-subtle-bg-loading: #3a1518;
223
+ --kp-color-danger-subtle-bg-disabled: #18181b;
146
224
  --kp-color-danger-subtle-fg-rest: #fca5a5;
147
225
  --kp-color-danger-subtle-fg-hover: #fecaca;
148
226
  --kp-color-danger-subtle-fg-active: #fee2e2;
149
227
  --kp-color-danger-subtle-fg-focus: #fca5a5;
150
228
  --kp-color-danger-subtle-fg-loading: #fca5a5;
151
229
  --kp-color-danger-subtle-fg-disabled: #52525b;
152
- --kp-color-neutral-default-fg-rest: #09090b;
153
- --kp-color-neutral-default-fg-hover: #09090b;
154
- --kp-color-neutral-default-fg-active: #09090b;
155
- --kp-color-neutral-default-fg-focus: #09090b;
156
- --kp-color-neutral-default-fg-loading: #09090b;
157
- --kp-color-neutral-default-fg-disabled: #a1a1aa;
230
+ --kp-color-danger-subtle-border-disabled: rgba(0, 0, 0, 0);
231
+ --kp-color-danger-outline-bg-hover: #3a1518;
232
+ --kp-color-danger-outline-bg-active: #4d1b1f;
233
+ --kp-color-danger-outline-fg-active: #fecaca;
234
+ --kp-color-danger-outline-fg-disabled: #3f3f46;
235
+ --kp-color-danger-outline-border-rest: #7a2a2d;
236
+ --kp-color-danger-outline-border-hover: #933338;
237
+ --kp-color-danger-outline-border-active: #ac3d44;
238
+ --kp-color-danger-outline-border-focus: #7a2a2d;
239
+ --kp-color-danger-outline-border-disabled: #27272a;
240
+ --kp-color-danger-outline-border-loading: #7a2a2d;
241
+ --kp-color-danger-ghost-bg-hover: #3a1518;
242
+ --kp-color-danger-ghost-bg-active: #4d1b1f;
243
+ --kp-color-danger-ghost-fg-active: #fecaca;
244
+ --kp-color-danger-ghost-fg-disabled: #3f3f46;
245
+ --kp-color-neutral-default-bg-rest: #3f3f46;
246
+ --kp-color-neutral-default-bg-hover: #52525b;
247
+ --kp-color-neutral-default-bg-active: #71717a;
248
+ --kp-color-neutral-default-bg-focus: #3f3f46;
249
+ --kp-color-neutral-default-bg-loading: #52525b;
250
+ --kp-color-neutral-default-bg-disabled: #18181b;
251
+ --kp-color-neutral-default-fg-rest: #fafafa;
252
+ --kp-color-neutral-default-fg-hover: #fafafa;
253
+ --kp-color-neutral-default-fg-active: #fafafa;
254
+ --kp-color-neutral-default-fg-focus: #fafafa;
255
+ --kp-color-neutral-default-fg-loading: #fafafa;
256
+ --kp-color-neutral-default-fg-disabled: #52525b;
257
+ --kp-color-neutral-default-border-rest: #3f3f46;
258
+ --kp-color-neutral-default-border-hover: #52525b;
259
+ --kp-color-neutral-default-border-active: #71717a;
260
+ --kp-color-neutral-default-border-focus: #3f3f46;
261
+ --kp-color-neutral-default-border-loading: #52525b;
262
+ --kp-color-neutral-default-border-disabled: #18181b;
263
+ --kp-color-neutral-subtle-bg-rest: #27272a;
264
+ --kp-color-neutral-subtle-bg-hover: #3f3f46;
265
+ --kp-color-neutral-subtle-bg-active: #52525b;
266
+ --kp-color-neutral-subtle-bg-focus: #27272a;
267
+ --kp-color-neutral-subtle-bg-loading: #27272a;
268
+ --kp-color-neutral-subtle-bg-disabled: #18181b;
158
269
  --kp-color-neutral-subtle-fg-rest: #d4d4d8;
159
270
  --kp-color-neutral-subtle-fg-hover: #e4e4e7;
160
271
  --kp-color-neutral-subtle-fg-active: #f4f4f5;
161
272
  --kp-color-neutral-subtle-fg-focus: #d4d4d8;
162
273
  --kp-color-neutral-subtle-fg-loading: #d4d4d8;
163
274
  --kp-color-neutral-subtle-fg-disabled: #52525b;
275
+ --kp-color-neutral-subtle-border-disabled: rgba(0, 0, 0, 0);
276
+ --kp-color-neutral-outline-bg-hover: #27272a;
277
+ --kp-color-neutral-outline-bg-active: #3f3f46;
278
+ --kp-color-neutral-outline-fg-rest: #e4e4e7;
279
+ --kp-color-neutral-outline-fg-hover: #fafafa;
280
+ --kp-color-neutral-outline-fg-disabled: #3f3f46;
281
+ --kp-color-neutral-outline-border-rest: #3f3f46;
282
+ --kp-color-neutral-outline-border-hover: #52525b;
283
+ --kp-color-neutral-outline-border-active: #71717a;
284
+ --kp-color-neutral-outline-border-focus: #3f3f46;
285
+ --kp-color-neutral-outline-border-disabled: #27272a;
286
+ --kp-color-neutral-outline-border-loading: #3f3f46;
287
+ --kp-color-neutral-ghost-bg-hover: #27272a;
288
+ --kp-color-neutral-ghost-bg-active: #3f3f46;
289
+ --kp-color-neutral-ghost-fg-rest: #e4e4e7;
290
+ --kp-color-neutral-ghost-fg-hover: #fafafa;
291
+ --kp-color-neutral-ghost-fg-disabled: #3f3f46;
164
292
  --kp-color-card-fg-desc: #a1a1aa;
165
- --kp-color-input-fg-default: #71717a;
293
+ --kp-color-card-border: #3f3f46;
294
+ --kp-color-card-bg-elevated: #1f1f22;
295
+ --kp-color-avatar-bg-default: #27272a;
296
+ --kp-color-avatar-bg-primary: #1e2a4f;
297
+ --kp-color-avatar-bg-success: #14392a;
298
+ --kp-color-avatar-bg-warning: #4a2e0a;
299
+ --kp-color-avatar-bg-danger: #3a1518;
300
+ --kp-color-avatar-bg-info: #13384b;
301
+ --kp-color-avatar-bg-neutral: #3f3f46;
302
+ --kp-color-avatar-fg-default: #d4d4d8;
303
+ --kp-color-avatar-fg-primary: #93c5fd;
304
+ --kp-color-avatar-fg-success: #86efac;
305
+ --kp-color-avatar-fg-warning: #fcd34d;
306
+ --kp-color-avatar-fg-danger: #fca5a5;
307
+ --kp-color-avatar-fg-info: #67e8f9;
308
+ --kp-color-avatar-fg-neutral: #fafafa;
309
+ --kp-color-avatar-ring: #09090b;
310
+ --kp-color-avatar-group-count-bg: #27272a;
311
+ --kp-color-avatar-group-count-fg: #fafafa;
312
+ --kp-color-checkbox-border-hover: #71717a;
313
+ --kp-color-menu-item-fg-selected: #dbeafe;
314
+ --kp-color-segmented-track-bg: #27272a;
315
+ --kp-color-segmented-segment-bg-selected: #3f3f46;
316
+ --kp-color-input-bg-default: #0e0f13;
317
+ --kp-color-input-bg-filled: #18181b;
318
+ --kp-color-input-bg-disabled: #09090b;
319
+ --kp-color-input-border-rest: #3f3f46;
320
+ --kp-color-input-border-hover: #52525b;
321
+ --kp-color-input-border-disabled: #27272a;
322
+ --kp-color-input-fg-default: #e4e4e7;
323
+ --kp-color-input-fg-disabled: #3f3f46;
324
+ --kp-color-input-placeholder-default: #52525b;
166
325
  --kp-color-popover-fg-desc: #a1a1aa;
326
+ --kp-color-popover-bg: #1f1f22;
327
+ --kp-color-popover-border: #3f3f46;
167
328
  --kp-color-tabs-tab-fg-rest: #a1a1aa;
329
+ --kp-color-nav-item-fg-active: #dbeafe;
168
330
  --kp-color-nav-item-fg-disabled: #71717a;
331
+ --kp-color-nav-item-icon-active: #bfdbfe;
169
332
  --kp-color-breadcrumbs-item-fg-link-rest: #93c5fd;
170
333
  --kp-color-table-header-fg: #a1a1aa;
171
334
  --kp-color-table-row-fg: #f4f4f5;
172
- --kp-color-form-helper: #a1a1aa;
173
- --kp-color-form-label: #d4d4d8;
174
- --kp-color-stat-card-trend-value-good: #4ade80;
175
- --kp-color-stat-card-trend-value-bad: #f87171;
176
- --kp-color-stat-card-trend-value-neutral: #a1a1aa;
177
- --kp-color-textarea-counter: #71717a;
178
335
  --kp-color-divider-label: #a1a1aa;
179
336
  --kp-color-datepicker-day-fg-rest: #f4f4f5;
180
337
  --kp-color-datepicker-day-fg-outside: #71717a;
181
338
  --kp-color-sidebar-section-label: #a1a1aa;
182
- --kp-color-notif-item-time: #71717a;
339
+ --kp-color-text-muted: #a1a1aa;
340
+ --kp-color-text-disabled: #71717a;
341
+ --kp-color-surface-muted: #27272a;
342
+ --kp-color-surface-strong: #3f3f46;
183
343
  --kp-color-accent-primary-fg: #60a5fa;
184
344
  --kp-color-accent-danger-fg: #f87171;
185
345
  --kp-color-accent-success-fg: #4ade80;
package/styles/tokens.css CHANGED
@@ -2,9 +2,12 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- :root {
5
+ :root,
6
+ :root[data-theme="light"],
7
+ [data-theme="light"] {
6
8
  --kp-color-white: #ffffff;
7
9
  --kp-color-black: #09090b;
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). */
8
11
  --kp-color-gray-50: #fafafa;
9
12
  --kp-color-gray-100: #f4f4f5;
10
13
  --kp-color-gray-200: #e4e4e7;
@@ -71,179 +74,6 @@
71
74
  --kp-color-cyan-800: #155e75;
72
75
  --kp-color-cyan-900: #164e63;
73
76
  --kp-color-cyan-950: #083344;
74
- --kp-color-primary-subtle-border-rest: rgba(0, 0, 0, 0);
75
- --kp-color-primary-subtle-border-hover: rgba(0, 0, 0, 0);
76
- --kp-color-primary-subtle-border-active: rgba(0, 0, 0, 0);
77
- --kp-color-primary-subtle-border-disabled: rgba(0, 0, 0, 0);
78
- --kp-color-primary-subtle-border-loading: rgba(0, 0, 0, 0);
79
- --kp-color-primary-outline-bg-rest: rgba(0, 0, 0, 0);
80
- --kp-color-primary-outline-bg-focus: rgba(0, 0, 0, 0);
81
- --kp-color-primary-outline-bg-disabled: rgba(0, 0, 0, 0);
82
- --kp-color-primary-outline-bg-loading: rgba(0, 0, 0, 0);
83
- --kp-color-primary-ghost-bg-rest: rgba(0, 0, 0, 0);
84
- --kp-color-primary-ghost-bg-focus: rgba(0, 0, 0, 0);
85
- --kp-color-primary-ghost-bg-disabled: rgba(0, 0, 0, 0);
86
- --kp-color-primary-ghost-bg-loading: rgba(0, 0, 0, 0);
87
- --kp-color-primary-ghost-border-rest: rgba(0, 0, 0, 0);
88
- --kp-color-primary-ghost-border-hover: rgba(0, 0, 0, 0);
89
- --kp-color-primary-ghost-border-active: rgba(0, 0, 0, 0);
90
- --kp-color-primary-ghost-border-disabled: rgba(0, 0, 0, 0);
91
- --kp-color-primary-ghost-border-loading: rgba(0, 0, 0, 0);
92
- --kp-color-danger-subtle-border-rest: rgba(0, 0, 0, 0);
93
- --kp-color-danger-subtle-border-hover: rgba(0, 0, 0, 0);
94
- --kp-color-danger-subtle-border-active: rgba(0, 0, 0, 0);
95
- --kp-color-danger-subtle-border-disabled: rgba(0, 0, 0, 0);
96
- --kp-color-danger-subtle-border-loading: rgba(0, 0, 0, 0);
97
- --kp-color-danger-outline-bg-rest: rgba(0, 0, 0, 0);
98
- --kp-color-danger-outline-bg-focus: rgba(0, 0, 0, 0);
99
- --kp-color-danger-outline-bg-disabled: rgba(0, 0, 0, 0);
100
- --kp-color-danger-outline-bg-loading: rgba(0, 0, 0, 0);
101
- --kp-color-danger-ghost-bg-rest: rgba(0, 0, 0, 0);
102
- --kp-color-danger-ghost-bg-focus: rgba(0, 0, 0, 0);
103
- --kp-color-danger-ghost-bg-disabled: rgba(0, 0, 0, 0);
104
- --kp-color-danger-ghost-bg-loading: rgba(0, 0, 0, 0);
105
- --kp-color-danger-ghost-border-rest: rgba(0, 0, 0, 0);
106
- --kp-color-danger-ghost-border-hover: rgba(0, 0, 0, 0);
107
- --kp-color-danger-ghost-border-active: rgba(0, 0, 0, 0);
108
- --kp-color-danger-ghost-border-disabled: rgba(0, 0, 0, 0);
109
- --kp-color-danger-ghost-border-loading: rgba(0, 0, 0, 0);
110
- --kp-color-neutral-subtle-border-rest: rgba(0, 0, 0, 0);
111
- --kp-color-neutral-subtle-border-hover: rgba(0, 0, 0, 0);
112
- --kp-color-neutral-subtle-border-active: rgba(0, 0, 0, 0);
113
- --kp-color-neutral-subtle-border-disabled: rgba(0, 0, 0, 0);
114
- --kp-color-neutral-subtle-border-loading: rgba(0, 0, 0, 0);
115
- --kp-color-neutral-outline-bg-rest: rgba(0, 0, 0, 0);
116
- --kp-color-neutral-outline-bg-focus: rgba(0, 0, 0, 0);
117
- --kp-color-neutral-outline-bg-disabled: rgba(0, 0, 0, 0);
118
- --kp-color-neutral-outline-bg-loading: rgba(0, 0, 0, 0);
119
- --kp-color-neutral-ghost-bg-rest: rgba(0, 0, 0, 0);
120
- --kp-color-neutral-ghost-bg-focus: rgba(0, 0, 0, 0);
121
- --kp-color-neutral-ghost-bg-disabled: rgba(0, 0, 0, 0);
122
- --kp-color-neutral-ghost-bg-loading: rgba(0, 0, 0, 0);
123
- --kp-color-neutral-ghost-border-rest: rgba(0, 0, 0, 0);
124
- --kp-color-neutral-ghost-border-hover: rgba(0, 0, 0, 0);
125
- --kp-color-neutral-ghost-border-active: rgba(0, 0, 0, 0);
126
- --kp-color-neutral-ghost-border-disabled: rgba(0, 0, 0, 0);
127
- --kp-color-neutral-ghost-border-loading: rgba(0, 0, 0, 0);
128
- --kp-color-segmented-segment-bg-unselected-rest: rgba(0, 0, 0, 0);
129
- --kp-color-segmented-segment-bg-disabled: rgba(0, 0, 0, 0);
130
- --kp-color-badge-primary-subtle-border: rgba(0, 0, 0, 0);
131
- --kp-color-badge-primary-outline-bg: rgba(0, 0, 0, 0);
132
- --kp-color-badge-primary-dot-bg: rgba(0, 0, 0, 0);
133
- --kp-color-badge-primary-dot-border: rgba(0, 0, 0, 0);
134
- --kp-color-badge-danger-subtle-border: rgba(0, 0, 0, 0);
135
- --kp-color-badge-danger-outline-bg: rgba(0, 0, 0, 0);
136
- --kp-color-badge-danger-dot-bg: rgba(0, 0, 0, 0);
137
- --kp-color-badge-danger-dot-border: rgba(0, 0, 0, 0);
138
- --kp-color-badge-success-subtle-border: rgba(0, 0, 0, 0);
139
- --kp-color-badge-success-outline-bg: rgba(0, 0, 0, 0);
140
- --kp-color-badge-success-dot-bg: rgba(0, 0, 0, 0);
141
- --kp-color-badge-success-dot-border: rgba(0, 0, 0, 0);
142
- --kp-color-badge-warning-subtle-border: rgba(0, 0, 0, 0);
143
- --kp-color-badge-warning-outline-bg: rgba(0, 0, 0, 0);
144
- --kp-color-badge-warning-dot-bg: rgba(0, 0, 0, 0);
145
- --kp-color-badge-warning-dot-border: rgba(0, 0, 0, 0);
146
- --kp-color-badge-info-subtle-border: rgba(0, 0, 0, 0);
147
- --kp-color-badge-info-outline-bg: rgba(0, 0, 0, 0);
148
- --kp-color-badge-info-dot-bg: rgba(0, 0, 0, 0);
149
- --kp-color-badge-info-dot-border: rgba(0, 0, 0, 0);
150
- --kp-color-badge-neutral-subtle-border: rgba(0, 0, 0, 0);
151
- --kp-color-badge-neutral-outline-bg: rgba(0, 0, 0, 0);
152
- --kp-color-badge-neutral-dot-bg: rgba(0, 0, 0, 0);
153
- --kp-color-badge-neutral-dot-border: rgba(0, 0, 0, 0);
154
- --kp-color-tabs-tab-underline-rest: rgba(0, 0, 0, 0);
155
- --kp-color-tabs-tab-underline-disabled: rgba(0, 0, 0, 0);
156
- --kp-color-nav-item-bg-rest: rgba(0, 0, 0, 0);
157
- --kp-color-pagination-item-bg-rest: rgba(0, 0, 0, 0);
158
- --kp-color-pagination-item-bg-disabled: rgba(0, 0, 0, 0);
159
- --kp-color-datepicker-day-bg-rest: rgba(0, 0, 0, 0);
160
- --kp-color-datepicker-day-bg-today: rgba(0, 0, 0, 0);
161
- --kp-color-tree-node-bg-rest: rgba(0, 0, 0, 0);
162
- --kp-color-accordion-trigger-bg-rest: rgba(0, 0, 0, 0);
163
- --kp-color-accordion-trigger-bg-expanded: rgba(0, 0, 0, 0);
164
- --kp-color-dialog-backdrop: rgba(0, 0, 0, 0.5); /** Semi-transparent overlay behind dialog */
165
- --kp-color-overlay-hover-subtle: rgba(0, 0, 0, 0.04); /** Faintest hover bg — close-button on Alert / Badge / Popover surfaces. */
166
- --kp-color-overlay-hover-light: rgba(0, 0, 0, 0.06); /** Light hover bg — subtle interactive emphasis on light surfaces. */
167
- --kp-color-overlay-hover-medium: rgba(0, 0, 0, 0.08); /** Standard hover bg on light surfaces. */
168
- --kp-color-overlay-primary-hover: rgba(37, 99, 235, 0.08); /** Translucent primary tint — Toast action button hover. */
169
- --kp-color-overlay-focus-ring: rgba(59, 130, 246, 0.12); /** Soft glow around the focused control (3px ring on SearchBar). */
170
- --kp-color-fg-on-dark-strong: rgba(255, 255, 255, 0.92); /** Primary text on dark backgrounds — Sidebar item label. */
171
- --kp-color-fg-on-dark-default: rgba(255, 255, 255, 0.8); /** Default text on dark backgrounds — Header nav item / icon button. */
172
- --kp-color-fg-on-dark-muted: rgba(255, 255, 255, 0.7); /** Secondary text on dark — Sidebar toggle. */
173
- --kp-color-fg-on-dark-subtle: rgba(255, 255, 255, 0.6); /** Lowest-emphasis text on dark — Header user role / chevron. */
174
- --kp-elevation-none: 0px 0px 0px 0px rgba(0,0,0,0);
175
- --kp-elevation-raised: 0px 1px 2px 0px rgba(9,9,11,0.08), 0px 1px 3px -1px rgba(9,9,11,0.05), 0px 0px 4px -1px rgba(9,9,11,0.03);
176
- --kp-elevation-overlay: 0px 4px 6px -2px rgba(9,9,11,0.10), 0px 2px 10px -2px rgba(9,9,11,0.06), 0px 0px 16px -4px rgba(9,9,11,0.04);
177
- --kp-elevation-floating: 0px 8px 16px -4px rgba(9,9,11,0.12), 0px 4px 24px -4px rgba(9,9,11,0.08), 0px 0px 40px -8px rgba(9,9,11,0.05);
178
- --kp-icon-size-xs: 14px; /** Icon for XS components (24px button) */
179
- --kp-icon-size-sm: 16px; /** Icon for SM components (28px button) */
180
- --kp-icon-size-md: 18px; /** Icon for MD components (36px button) */
181
- --kp-icon-size-lg: 22px; /** Icon for LG components (44px button) */
182
- --kp-icon-size-xl: 24px; /** Icon for XL components (52px button) */
183
- --kp-icon-stroke-xs: 1.25px; /** Stroke width for 14px icons — optical compensation */
184
- --kp-icon-stroke-sm: 1.35px; /** Stroke width for 16px icons */
185
- --kp-icon-stroke-md: 1.5px; /** Stroke width for 18px icons */
186
- --kp-icon-stroke-lg: 1.75px; /** Stroke width for 22px icons */
187
- --kp-icon-stroke-xl: 2px; /** Stroke width for 24px icons — standard Tabler default */
188
- --kp-motion-duration-fast: 120ms; /** Hover, focus, color/border state changes. */
189
- --kp-motion-duration-normal: 200ms; /** Overlay enter/exit, accordion expand, larger transitions. */
190
- --kp-motion-duration-slow: 300ms; /** Page-level changes; rare. */
191
- --kp-motion-duration-spin: 1000ms; /** Infinite spinner loop — button loading, progress-circular indeterminate. */
192
- --kp-motion-duration-shimmer: 1400ms; /** Infinite shimmer loop — skeleton placeholder, progress-linear indeterminate slide. */
193
- --kp-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
194
- --kp-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
195
- --kp-motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
196
- --kp-radius-none: 0px;
197
- --kp-radius-comp-xs: 8px;
198
- --kp-radius-comp-sm: 10px;
199
- --kp-radius-comp-md: 12px;
200
- --kp-radius-comp-lg: 14px;
201
- --kp-radius-comp-xl: 16px;
202
- --kp-radius-full: 9999px;
203
- --kp-size-xs: 24px;
204
- --kp-size-sm: 28px;
205
- --kp-size-md: 36px;
206
- --kp-size-lg: 44px;
207
- --kp-size-xl: 52px;
208
- --kp-spacing-4xs: 2px;
209
- --kp-spacing-3xs: 4px;
210
- --kp-spacing-2xs: 8px;
211
- --kp-spacing-xs: 12px;
212
- --kp-spacing-sm: 16px;
213
- --kp-spacing-md: 20px;
214
- --kp-spacing-lg: 24px;
215
- --kp-spacing-xl: 32px;
216
- --kp-spacing-2xl: 40px;
217
- --kp-spacing-3xl: 48px;
218
- --kp-spacing-4xl: 64px;
219
- --kp-font-family-sans: Onest, system-ui, sans-serif; /** Primary UI font */
220
- --kp-font-family-mono: 'SF Mono', Monaco, Consolas, monospace; /** Monospace for code */
221
- --kp-font-weight-regular: 400; /** Body text */
222
- --kp-font-weight-medium: 500; /** Emphasis, small text, section labels */
223
- --kp-font-weight-semibold: 600; /** Headings */
224
- --kp-font-weight-bold: 700; /** Strong emphasis */
225
- --kp-font-size-2xs: 11px; /** Micro labels, captions */
226
- --kp-font-size-xs: 12px; /** Small body, hints */
227
- --kp-font-size-sm: 14px; /** Default body text, UI */
228
- --kp-font-size-md: 16px; /** Comfortable body, large UI */
229
- --kp-font-size-lg: 20px; /** Section labels, small headings */
230
- --kp-font-size-xl: 24px; /** Headings */
231
- --kp-font-size-2xl: 32px; /** Large headings, hero text */
232
- --kp-font-line-height-2xs: 16px; /** Pairs with size 2xs (11px) — 4px grid */
233
- --kp-font-line-height-xs: 16px; /** Pairs with size xs (12px) */
234
- --kp-font-line-height-sm: 20px; /** Pairs with size sm (14px) */
235
- --kp-font-line-height-md: 24px; /** Pairs with size md (16px) */
236
- --kp-font-line-height-lg: 28px; /** Pairs with size lg (20px) */
237
- --kp-font-line-height-xl: 32px; /** Pairs with size xl (24px) */
238
- --kp-font-line-height-2xl: 40px; /** Pairs with size 2xl (32px) */
239
- --kp-layout-container-max-width-narrow: 640px;
240
- --kp-layout-container-max-width-medium: 960px;
241
- --kp-layout-container-max-width-wide: 1280px;
242
- --kp-layout-container-max-width-full: 100%;
243
- --kp-layout-container-padding-none: 0;
244
- --kp-layout-container-padding-sm: 16px;
245
- --kp-layout-container-padding-md: 24px;
246
- --kp-layout-container-padding-lg: 32px;
247
77
  --kp-color-accent-primary-fg: var(--kp-color-blue-600);
248
78
  --kp-color-accent-danger-fg: var(--kp-color-red-600);
249
79
  --kp-color-accent-success-fg: var(--kp-color-green-600);
@@ -255,12 +85,12 @@
255
85
  --kp-color-primary-default-bg-focus: var(--kp-color-blue-600);
256
86
  --kp-color-primary-default-bg-disabled: var(--kp-color-gray-200);
257
87
  --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);
88
+ --kp-color-primary-default-fg-rest: var(--kp-color-foreground-on-saturated);
89
+ --kp-color-primary-default-fg-hover: var(--kp-color-foreground-on-saturated);
90
+ --kp-color-primary-default-fg-active: var(--kp-color-foreground-on-saturated);
91
+ --kp-color-primary-default-fg-focus: var(--kp-color-foreground-on-saturated);
262
92
  --kp-color-primary-default-fg-disabled: var(--kp-color-gray-400);
263
- --kp-color-primary-default-fg-loading: var(--kp-color-white);
93
+ --kp-color-primary-default-fg-loading: var(--kp-color-foreground-on-saturated);
264
94
  --kp-color-primary-default-border-rest: var(--kp-color-blue-600);
265
95
  --kp-color-primary-default-border-hover: var(--kp-color-blue-700);
266
96
  --kp-color-primary-default-border-active: var(--kp-color-blue-800);
@@ -279,9 +109,18 @@
279
109
  --kp-color-primary-subtle-fg-focus: var(--kp-color-blue-700);
280
110
  --kp-color-primary-subtle-fg-disabled: var(--kp-color-gray-400);
281
111
  --kp-color-primary-subtle-fg-loading: var(--kp-color-blue-500);
112
+ --kp-color-primary-subtle-border-rest: rgba(0, 0, 0, 0);
113
+ --kp-color-primary-subtle-border-hover: rgba(0, 0, 0, 0);
114
+ --kp-color-primary-subtle-border-active: rgba(0, 0, 0, 0);
282
115
  --kp-color-primary-subtle-border-focus: var(--kp-color-blue-600);
116
+ --kp-color-primary-subtle-border-disabled: rgba(0, 0, 0, 0);
117
+ --kp-color-primary-subtle-border-loading: rgba(0, 0, 0, 0);
118
+ --kp-color-primary-outline-bg-rest: rgba(0, 0, 0, 0);
283
119
  --kp-color-primary-outline-bg-hover: var(--kp-color-blue-50);
284
120
  --kp-color-primary-outline-bg-active: var(--kp-color-blue-100);
121
+ --kp-color-primary-outline-bg-focus: rgba(0, 0, 0, 0);
122
+ --kp-color-primary-outline-bg-disabled: rgba(0, 0, 0, 0);
123
+ --kp-color-primary-outline-bg-loading: rgba(0, 0, 0, 0);
285
124
  --kp-color-primary-outline-fg-rest: var(--kp-color-blue-600);
286
125
  --kp-color-primary-outline-fg-hover: var(--kp-color-blue-700);
287
126
  --kp-color-primary-outline-fg-active: var(--kp-color-blue-800);
@@ -294,27 +133,36 @@
294
133
  --kp-color-primary-outline-border-focus: var(--kp-color-blue-600);
295
134
  --kp-color-primary-outline-border-disabled: var(--kp-color-gray-200);
296
135
  --kp-color-primary-outline-border-loading: var(--kp-color-blue-200);
136
+ --kp-color-primary-ghost-bg-rest: rgba(0, 0, 0, 0);
297
137
  --kp-color-primary-ghost-bg-hover: var(--kp-color-blue-50);
298
138
  --kp-color-primary-ghost-bg-active: var(--kp-color-blue-100);
139
+ --kp-color-primary-ghost-bg-focus: rgba(0, 0, 0, 0);
140
+ --kp-color-primary-ghost-bg-disabled: rgba(0, 0, 0, 0);
141
+ --kp-color-primary-ghost-bg-loading: rgba(0, 0, 0, 0);
299
142
  --kp-color-primary-ghost-fg-rest: var(--kp-color-blue-600);
300
143
  --kp-color-primary-ghost-fg-hover: var(--kp-color-blue-700);
301
144
  --kp-color-primary-ghost-fg-active: var(--kp-color-blue-800);
302
145
  --kp-color-primary-ghost-fg-focus: var(--kp-color-blue-600);
303
146
  --kp-color-primary-ghost-fg-disabled: var(--kp-color-gray-400);
304
147
  --kp-color-primary-ghost-fg-loading: var(--kp-color-blue-400);
148
+ --kp-color-primary-ghost-border-rest: rgba(0, 0, 0, 0);
149
+ --kp-color-primary-ghost-border-hover: rgba(0, 0, 0, 0);
150
+ --kp-color-primary-ghost-border-active: rgba(0, 0, 0, 0);
305
151
  --kp-color-primary-ghost-border-focus: var(--kp-color-blue-600);
152
+ --kp-color-primary-ghost-border-disabled: rgba(0, 0, 0, 0);
153
+ --kp-color-primary-ghost-border-loading: rgba(0, 0, 0, 0);
306
154
  --kp-color-danger-default-bg-rest: var(--kp-color-red-600);
307
155
  --kp-color-danger-default-bg-hover: var(--kp-color-red-700);
308
156
  --kp-color-danger-default-bg-active: var(--kp-color-red-800);
309
157
  --kp-color-danger-default-bg-focus: var(--kp-color-red-600);
310
158
  --kp-color-danger-default-bg-disabled: var(--kp-color-gray-200);
311
159
  --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);
160
+ --kp-color-danger-default-fg-rest: var(--kp-color-foreground-on-saturated);
161
+ --kp-color-danger-default-fg-hover: var(--kp-color-foreground-on-saturated);
162
+ --kp-color-danger-default-fg-active: var(--kp-color-foreground-on-saturated);
163
+ --kp-color-danger-default-fg-focus: var(--kp-color-foreground-on-saturated);
316
164
  --kp-color-danger-default-fg-disabled: var(--kp-color-gray-400);
317
- --kp-color-danger-default-fg-loading: var(--kp-color-white);
165
+ --kp-color-danger-default-fg-loading: var(--kp-color-foreground-on-saturated);
318
166
  --kp-color-danger-default-border-rest: var(--kp-color-red-600);
319
167
  --kp-color-danger-default-border-hover: var(--kp-color-red-700);
320
168
  --kp-color-danger-default-border-active: var(--kp-color-red-800);
@@ -333,9 +181,18 @@
333
181
  --kp-color-danger-subtle-fg-focus: var(--kp-color-red-700);
334
182
  --kp-color-danger-subtle-fg-disabled: var(--kp-color-gray-400);
335
183
  --kp-color-danger-subtle-fg-loading: var(--kp-color-red-500);
184
+ --kp-color-danger-subtle-border-rest: rgba(0, 0, 0, 0);
185
+ --kp-color-danger-subtle-border-hover: rgba(0, 0, 0, 0);
186
+ --kp-color-danger-subtle-border-active: rgba(0, 0, 0, 0);
336
187
  --kp-color-danger-subtle-border-focus: var(--kp-color-red-600);
188
+ --kp-color-danger-subtle-border-disabled: rgba(0, 0, 0, 0);
189
+ --kp-color-danger-subtle-border-loading: rgba(0, 0, 0, 0);
190
+ --kp-color-danger-outline-bg-rest: rgba(0, 0, 0, 0);
337
191
  --kp-color-danger-outline-bg-hover: var(--kp-color-red-50);
338
192
  --kp-color-danger-outline-bg-active: var(--kp-color-red-100);
193
+ --kp-color-danger-outline-bg-focus: rgba(0, 0, 0, 0);
194
+ --kp-color-danger-outline-bg-disabled: rgba(0, 0, 0, 0);
195
+ --kp-color-danger-outline-bg-loading: rgba(0, 0, 0, 0);
339
196
  --kp-color-danger-outline-fg-rest: var(--kp-color-red-600);
340
197
  --kp-color-danger-outline-fg-hover: var(--kp-color-red-700);
341
198
  --kp-color-danger-outline-fg-active: var(--kp-color-red-800);
@@ -348,15 +205,24 @@
348
205
  --kp-color-danger-outline-border-focus: var(--kp-color-red-600);
349
206
  --kp-color-danger-outline-border-disabled: var(--kp-color-gray-200);
350
207
  --kp-color-danger-outline-border-loading: var(--kp-color-red-200);
208
+ --kp-color-danger-ghost-bg-rest: rgba(0, 0, 0, 0);
351
209
  --kp-color-danger-ghost-bg-hover: var(--kp-color-red-50);
352
210
  --kp-color-danger-ghost-bg-active: var(--kp-color-red-100);
211
+ --kp-color-danger-ghost-bg-focus: rgba(0, 0, 0, 0);
212
+ --kp-color-danger-ghost-bg-disabled: rgba(0, 0, 0, 0);
213
+ --kp-color-danger-ghost-bg-loading: rgba(0, 0, 0, 0);
353
214
  --kp-color-danger-ghost-fg-rest: var(--kp-color-red-600);
354
215
  --kp-color-danger-ghost-fg-hover: var(--kp-color-red-700);
355
216
  --kp-color-danger-ghost-fg-active: var(--kp-color-red-800);
356
217
  --kp-color-danger-ghost-fg-focus: var(--kp-color-red-600);
357
218
  --kp-color-danger-ghost-fg-disabled: var(--kp-color-gray-400);
358
219
  --kp-color-danger-ghost-fg-loading: var(--kp-color-red-400);
220
+ --kp-color-danger-ghost-border-rest: rgba(0, 0, 0, 0);
221
+ --kp-color-danger-ghost-border-hover: rgba(0, 0, 0, 0);
222
+ --kp-color-danger-ghost-border-active: rgba(0, 0, 0, 0);
359
223
  --kp-color-danger-ghost-border-focus: var(--kp-color-red-600);
224
+ --kp-color-danger-ghost-border-disabled: rgba(0, 0, 0, 0);
225
+ --kp-color-danger-ghost-border-loading: rgba(0, 0, 0, 0);
360
226
  --kp-color-neutral-default-bg-rest: var(--kp-color-gray-900);
361
227
  --kp-color-neutral-default-bg-hover: var(--kp-color-gray-800);
362
228
  --kp-color-neutral-default-bg-active: var(--kp-color-gray-700);
@@ -387,9 +253,18 @@
387
253
  --kp-color-neutral-subtle-fg-focus: var(--kp-color-gray-700);
388
254
  --kp-color-neutral-subtle-fg-disabled: var(--kp-color-gray-400);
389
255
  --kp-color-neutral-subtle-fg-loading: var(--kp-color-gray-500);
256
+ --kp-color-neutral-subtle-border-rest: rgba(0, 0, 0, 0);
257
+ --kp-color-neutral-subtle-border-hover: rgba(0, 0, 0, 0);
258
+ --kp-color-neutral-subtle-border-active: rgba(0, 0, 0, 0);
390
259
  --kp-color-neutral-subtle-border-focus: var(--kp-color-gray-600);
260
+ --kp-color-neutral-subtle-border-disabled: rgba(0, 0, 0, 0);
261
+ --kp-color-neutral-subtle-border-loading: rgba(0, 0, 0, 0);
262
+ --kp-color-neutral-outline-bg-rest: rgba(0, 0, 0, 0);
391
263
  --kp-color-neutral-outline-bg-hover: var(--kp-color-gray-50);
392
264
  --kp-color-neutral-outline-bg-active: var(--kp-color-gray-100);
265
+ --kp-color-neutral-outline-bg-focus: rgba(0, 0, 0, 0);
266
+ --kp-color-neutral-outline-bg-disabled: rgba(0, 0, 0, 0);
267
+ --kp-color-neutral-outline-bg-loading: rgba(0, 0, 0, 0);
393
268
  --kp-color-neutral-outline-fg-rest: var(--kp-color-gray-700);
394
269
  --kp-color-neutral-outline-fg-hover: var(--kp-color-gray-800);
395
270
  --kp-color-neutral-outline-fg-active: var(--kp-color-gray-900);
@@ -402,16 +277,41 @@
402
277
  --kp-color-neutral-outline-border-focus: var(--kp-color-gray-600);
403
278
  --kp-color-neutral-outline-border-disabled: var(--kp-color-gray-200);
404
279
  --kp-color-neutral-outline-border-loading: var(--kp-color-gray-200);
280
+ --kp-color-neutral-ghost-bg-rest: rgba(0, 0, 0, 0);
405
281
  --kp-color-neutral-ghost-bg-hover: var(--kp-color-gray-100);
406
282
  --kp-color-neutral-ghost-bg-active: var(--kp-color-gray-200);
283
+ --kp-color-neutral-ghost-bg-focus: rgba(0, 0, 0, 0);
284
+ --kp-color-neutral-ghost-bg-disabled: rgba(0, 0, 0, 0);
285
+ --kp-color-neutral-ghost-bg-loading: rgba(0, 0, 0, 0);
407
286
  --kp-color-neutral-ghost-fg-rest: var(--kp-color-gray-700);
408
287
  --kp-color-neutral-ghost-fg-hover: var(--kp-color-gray-800);
409
288
  --kp-color-neutral-ghost-fg-active: var(--kp-color-gray-900);
410
289
  --kp-color-neutral-ghost-fg-focus: var(--kp-color-gray-700);
411
290
  --kp-color-neutral-ghost-fg-disabled: var(--kp-color-gray-400);
412
291
  --kp-color-neutral-ghost-fg-loading: var(--kp-color-gray-400);
292
+ --kp-color-neutral-ghost-border-rest: rgba(0, 0, 0, 0);
293
+ --kp-color-neutral-ghost-border-hover: rgba(0, 0, 0, 0);
294
+ --kp-color-neutral-ghost-border-active: rgba(0, 0, 0, 0);
413
295
  --kp-color-neutral-ghost-border-focus: var(--kp-color-gray-600);
296
+ --kp-color-neutral-ghost-border-disabled: rgba(0, 0, 0, 0);
297
+ --kp-color-neutral-ghost-border-loading: rgba(0, 0, 0, 0);
414
298
  --kp-color-focus-ring: var(--kp-color-blue-400); /** Focus ring — 2px offset outline for all focusable elements */
299
+ --kp-color-text-strong: var(--kp-color-gray-900); /** Headings and primary emphasized text */
300
+ --kp-color-text-default: var(--kp-color-gray-700); /** Default body text */
301
+ --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-400); /** Disabled labels, placeholders. Dark override → gray.500 to stay visibly less prominent than `muted`. */
303
+ --kp-color-surface-base: var(--kp-color-white); /** Top elevated surface — cards, dialogs, dropdowns. Inverts to gray-900 dark = #18181B */
304
+ --kp-color-surface-subtle: var(--kp-color-gray-50); /** Page background behind cards, recessed regions. Inverts to gray-950 dark = #09090B */
305
+ --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) */
306
+ --kp-color-surface-strong: var(--kp-color-gray-200); /** Active row, pressed state, more prominent muted bg. Dark override → gray.300 */
307
+ --kp-color-surface-on-dark-base: #18181b; /** Always-dark elevated surface (e.g. .kp-header--dark, .kp-sidebar--dark). No dark override — value is fixed across themes. */
308
+ --kp-color-surface-on-dark-muted: #27272a; /** Always-dark hover/muted surface */
309
+ --kp-color-surface-on-dark-strong: #3f3f46; /** Always-dark active/pressed surface */
310
+ --kp-color-border-subtle: var(--kp-color-gray-100); /** Faint internal dividers */
311
+ --kp-color-border-default: var(--kp-color-gray-200); /** Standard control and card borders */
312
+ --kp-color-border-strong: var(--kp-color-gray-300); /** Emphasized borders — focused panels, table headers */
313
+ --kp-color-border-on-dark-subtle: #27272a; /** Faint divider on always-dark surfaces */
314
+ --kp-color-border-on-dark-default: #3f3f46; /** Standard border on always-dark surfaces */
415
315
  --kp-color-icon-primary: var(--kp-color-gray-700); /** Default icon color on light backgrounds — navigation, lists, labels */
416
316
  --kp-color-icon-secondary: var(--kp-color-gray-400); /** Decorative icons, placeholders, hints */
417
317
  --kp-color-icon-disabled: var(--kp-color-gray-300); /** Disabled/inactive icons */
@@ -463,6 +363,8 @@
463
363
  --kp-color-input-border-error: var(--kp-color-red-500);
464
364
  --kp-color-input-placeholder-default: var(--kp-color-gray-400);
465
365
  --kp-color-input-placeholder-disabled: var(--kp-color-gray-300);
366
+ --kp-color-checkbox-border-rest: var(--kp-color-gray-300);
367
+ --kp-color-checkbox-border-hover: var(--kp-color-gray-400);
466
368
  --kp-color-select-chevron-rest: var(--kp-color-gray-500);
467
369
  --kp-color-select-chevron-hover: var(--kp-color-gray-700);
468
370
  --kp-color-select-chevron-open: var(--kp-color-blue-600);
@@ -477,9 +379,9 @@
477
379
  --kp-color-stepper-indicator-border-completed: var(--kp-color-blue-600);
478
380
  --kp-color-stepper-indicator-border-error: var(--kp-color-red-600);
479
381
  --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);
382
+ --kp-color-stepper-indicator-fg-active: var(--kp-color-foreground-on-saturated);
383
+ --kp-color-stepper-indicator-fg-completed: var(--kp-color-foreground-on-saturated);
384
+ --kp-color-stepper-indicator-fg-error: var(--kp-color-foreground-on-saturated);
483
385
  --kp-color-stepper-label-pending: var(--kp-color-gray-500);
484
386
  --kp-color-stepper-label-active: var(--kp-color-gray-900);
485
387
  --kp-color-stepper-label-completed: var(--kp-color-gray-700);
@@ -492,46 +394,60 @@
492
394
  --kp-color-stepper-connector-completed: var(--kp-color-blue-600);
493
395
  --kp-color-segmented-track-bg: var(--kp-color-gray-100); /** Outer container background */
494
396
  --kp-color-segmented-segment-bg-selected: var(--kp-color-white);
397
+ --kp-color-segmented-segment-bg-unselected-rest: rgba(0, 0, 0, 0);
495
398
  --kp-color-segmented-segment-bg-unselected-hover: var(--kp-color-gray-200);
399
+ --kp-color-segmented-segment-bg-disabled: rgba(0, 0, 0, 0);
496
400
  --kp-color-segmented-segment-fg-selected: var(--kp-color-gray-900);
497
401
  --kp-color-segmented-segment-fg-unselected-rest: var(--kp-color-gray-600);
498
402
  --kp-color-segmented-segment-fg-unselected-hover: var(--kp-color-gray-900);
499
403
  --kp-color-segmented-segment-fg-disabled: var(--kp-color-gray-400);
500
404
  --kp-color-badge-primary-filled-bg: var(--kp-color-blue-600);
501
- --kp-color-badge-primary-filled-fg: var(--kp-color-white);
405
+ --kp-color-badge-primary-filled-fg: var(--kp-color-foreground-on-saturated);
502
406
  --kp-color-badge-primary-filled-border: var(--kp-color-blue-600);
503
- --kp-color-badge-primary-filled-dot: var(--kp-color-white);
407
+ --kp-color-badge-primary-filled-dot: var(--kp-color-foreground-on-saturated);
504
408
  --kp-color-badge-primary-subtle-bg: var(--kp-color-blue-50);
505
409
  --kp-color-badge-primary-subtle-fg: var(--kp-color-blue-700);
410
+ --kp-color-badge-primary-subtle-border: rgba(0, 0, 0, 0);
506
411
  --kp-color-badge-primary-subtle-dot: var(--kp-color-blue-600);
412
+ --kp-color-badge-primary-outline-bg: rgba(0, 0, 0, 0);
507
413
  --kp-color-badge-primary-outline-fg: var(--kp-color-blue-700);
508
414
  --kp-color-badge-primary-outline-border: var(--kp-color-blue-300);
509
415
  --kp-color-badge-primary-outline-dot: var(--kp-color-blue-600);
416
+ --kp-color-badge-primary-dot-bg: rgba(0, 0, 0, 0);
510
417
  --kp-color-badge-primary-dot-fg: var(--kp-color-gray-700);
418
+ --kp-color-badge-primary-dot-border: rgba(0, 0, 0, 0);
511
419
  --kp-color-badge-primary-dot-dot: var(--kp-color-blue-600);
512
420
  --kp-color-badge-danger-filled-bg: var(--kp-color-red-600);
513
- --kp-color-badge-danger-filled-fg: var(--kp-color-white);
421
+ --kp-color-badge-danger-filled-fg: var(--kp-color-foreground-on-saturated);
514
422
  --kp-color-badge-danger-filled-border: var(--kp-color-red-600);
515
- --kp-color-badge-danger-filled-dot: var(--kp-color-white);
423
+ --kp-color-badge-danger-filled-dot: var(--kp-color-foreground-on-saturated);
516
424
  --kp-color-badge-danger-subtle-bg: var(--kp-color-red-50);
517
425
  --kp-color-badge-danger-subtle-fg: var(--kp-color-red-700);
426
+ --kp-color-badge-danger-subtle-border: rgba(0, 0, 0, 0);
518
427
  --kp-color-badge-danger-subtle-dot: var(--kp-color-red-600);
428
+ --kp-color-badge-danger-outline-bg: rgba(0, 0, 0, 0);
519
429
  --kp-color-badge-danger-outline-fg: var(--kp-color-red-700);
520
430
  --kp-color-badge-danger-outline-border: var(--kp-color-red-300);
521
431
  --kp-color-badge-danger-outline-dot: var(--kp-color-red-600);
432
+ --kp-color-badge-danger-dot-bg: rgba(0, 0, 0, 0);
522
433
  --kp-color-badge-danger-dot-fg: var(--kp-color-gray-700);
434
+ --kp-color-badge-danger-dot-border: rgba(0, 0, 0, 0);
523
435
  --kp-color-badge-danger-dot-dot: var(--kp-color-red-600);
524
436
  --kp-color-badge-success-filled-bg: var(--kp-color-green-600);
525
- --kp-color-badge-success-filled-fg: var(--kp-color-white);
437
+ --kp-color-badge-success-filled-fg: var(--kp-color-foreground-on-saturated);
526
438
  --kp-color-badge-success-filled-border: var(--kp-color-green-600);
527
- --kp-color-badge-success-filled-dot: var(--kp-color-white);
439
+ --kp-color-badge-success-filled-dot: var(--kp-color-foreground-on-saturated);
528
440
  --kp-color-badge-success-subtle-bg: var(--kp-color-green-50);
529
441
  --kp-color-badge-success-subtle-fg: var(--kp-color-green-700);
442
+ --kp-color-badge-success-subtle-border: rgba(0, 0, 0, 0);
530
443
  --kp-color-badge-success-subtle-dot: var(--kp-color-green-600);
444
+ --kp-color-badge-success-outline-bg: rgba(0, 0, 0, 0);
531
445
  --kp-color-badge-success-outline-fg: var(--kp-color-green-700);
532
446
  --kp-color-badge-success-outline-border: var(--kp-color-green-300);
533
447
  --kp-color-badge-success-outline-dot: var(--kp-color-green-600);
448
+ --kp-color-badge-success-dot-bg: rgba(0, 0, 0, 0);
534
449
  --kp-color-badge-success-dot-fg: var(--kp-color-gray-700);
450
+ --kp-color-badge-success-dot-border: rgba(0, 0, 0, 0);
535
451
  --kp-color-badge-success-dot-dot: var(--kp-color-green-600);
536
452
  --kp-color-badge-warning-filled-bg: var(--kp-color-amber-500);
537
453
  --kp-color-badge-warning-filled-fg: var(--kp-color-gray-900);
@@ -539,23 +455,31 @@
539
455
  --kp-color-badge-warning-filled-dot: var(--kp-color-gray-900);
540
456
  --kp-color-badge-warning-subtle-bg: var(--kp-color-amber-50);
541
457
  --kp-color-badge-warning-subtle-fg: var(--kp-color-amber-700);
458
+ --kp-color-badge-warning-subtle-border: rgba(0, 0, 0, 0);
542
459
  --kp-color-badge-warning-subtle-dot: var(--kp-color-amber-500);
460
+ --kp-color-badge-warning-outline-bg: rgba(0, 0, 0, 0);
543
461
  --kp-color-badge-warning-outline-fg: var(--kp-color-amber-700);
544
462
  --kp-color-badge-warning-outline-border: var(--kp-color-amber-400);
545
463
  --kp-color-badge-warning-outline-dot: var(--kp-color-amber-500);
464
+ --kp-color-badge-warning-dot-bg: rgba(0, 0, 0, 0);
546
465
  --kp-color-badge-warning-dot-fg: var(--kp-color-gray-700);
466
+ --kp-color-badge-warning-dot-border: rgba(0, 0, 0, 0);
547
467
  --kp-color-badge-warning-dot-dot: var(--kp-color-amber-500);
548
468
  --kp-color-badge-info-filled-bg: var(--kp-color-cyan-600);
549
- --kp-color-badge-info-filled-fg: var(--kp-color-white);
469
+ --kp-color-badge-info-filled-fg: var(--kp-color-foreground-on-saturated);
550
470
  --kp-color-badge-info-filled-border: var(--kp-color-cyan-600);
551
- --kp-color-badge-info-filled-dot: var(--kp-color-white);
471
+ --kp-color-badge-info-filled-dot: var(--kp-color-foreground-on-saturated);
552
472
  --kp-color-badge-info-subtle-bg: var(--kp-color-cyan-50);
553
473
  --kp-color-badge-info-subtle-fg: var(--kp-color-cyan-700);
474
+ --kp-color-badge-info-subtle-border: rgba(0, 0, 0, 0);
554
475
  --kp-color-badge-info-subtle-dot: var(--kp-color-cyan-600);
476
+ --kp-color-badge-info-outline-bg: rgba(0, 0, 0, 0);
555
477
  --kp-color-badge-info-outline-fg: var(--kp-color-cyan-700);
556
478
  --kp-color-badge-info-outline-border: var(--kp-color-cyan-300);
557
479
  --kp-color-badge-info-outline-dot: var(--kp-color-cyan-600);
480
+ --kp-color-badge-info-dot-bg: rgba(0, 0, 0, 0);
558
481
  --kp-color-badge-info-dot-fg: var(--kp-color-gray-700);
482
+ --kp-color-badge-info-dot-border: rgba(0, 0, 0, 0);
559
483
  --kp-color-badge-info-dot-dot: var(--kp-color-cyan-600);
560
484
  --kp-color-badge-neutral-filled-bg: var(--kp-color-gray-900);
561
485
  --kp-color-badge-neutral-filled-fg: var(--kp-color-white);
@@ -563,11 +487,15 @@
563
487
  --kp-color-badge-neutral-filled-dot: var(--kp-color-white);
564
488
  --kp-color-badge-neutral-subtle-bg: var(--kp-color-gray-100);
565
489
  --kp-color-badge-neutral-subtle-fg: var(--kp-color-gray-700);
490
+ --kp-color-badge-neutral-subtle-border: rgba(0, 0, 0, 0);
566
491
  --kp-color-badge-neutral-subtle-dot: var(--kp-color-gray-500);
492
+ --kp-color-badge-neutral-outline-bg: rgba(0, 0, 0, 0);
567
493
  --kp-color-badge-neutral-outline-fg: var(--kp-color-gray-700);
568
494
  --kp-color-badge-neutral-outline-border: var(--kp-color-gray-300);
569
495
  --kp-color-badge-neutral-outline-dot: var(--kp-color-gray-500);
496
+ --kp-color-badge-neutral-dot-bg: rgba(0, 0, 0, 0);
570
497
  --kp-color-badge-neutral-dot-fg: var(--kp-color-gray-700);
498
+ --kp-color-badge-neutral-dot-border: rgba(0, 0, 0, 0);
571
499
  --kp-color-badge-neutral-dot-dot: var(--kp-color-gray-500);
572
500
  --kp-color-alert-primary-subtle-bg: var(--kp-color-blue-50);
573
501
  --kp-color-alert-primary-subtle-fg-title: var(--kp-color-blue-900);
@@ -576,11 +504,11 @@
576
504
  --kp-color-alert-primary-subtle-icon: var(--kp-color-blue-600);
577
505
  --kp-color-alert-primary-subtle-accent: var(--kp-color-blue-600);
578
506
  --kp-color-alert-primary-solid-bg: var(--kp-color-blue-600);
579
- --kp-color-alert-primary-solid-fg-title: var(--kp-color-white);
507
+ --kp-color-alert-primary-solid-fg-title: var(--kp-color-foreground-on-saturated);
580
508
  --kp-color-alert-primary-solid-fg-desc: var(--kp-color-blue-50);
581
509
  --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);
510
+ --kp-color-alert-primary-solid-icon: var(--kp-color-foreground-on-saturated);
511
+ --kp-color-alert-primary-solid-accent: var(--kp-color-foreground-on-saturated);
584
512
  --kp-color-alert-primary-outline-bg: var(--kp-color-white);
585
513
  --kp-color-alert-primary-outline-fg-title: var(--kp-color-blue-900);
586
514
  --kp-color-alert-primary-outline-fg-desc: var(--kp-color-gray-700);
@@ -600,11 +528,11 @@
600
528
  --kp-color-alert-danger-subtle-icon: var(--kp-color-red-600);
601
529
  --kp-color-alert-danger-subtle-accent: var(--kp-color-red-600);
602
530
  --kp-color-alert-danger-solid-bg: var(--kp-color-red-600);
603
- --kp-color-alert-danger-solid-fg-title: var(--kp-color-white);
531
+ --kp-color-alert-danger-solid-fg-title: var(--kp-color-foreground-on-saturated);
604
532
  --kp-color-alert-danger-solid-fg-desc: var(--kp-color-red-50);
605
533
  --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);
534
+ --kp-color-alert-danger-solid-icon: var(--kp-color-foreground-on-saturated);
535
+ --kp-color-alert-danger-solid-accent: var(--kp-color-foreground-on-saturated);
608
536
  --kp-color-alert-danger-outline-bg: var(--kp-color-white);
609
537
  --kp-color-alert-danger-outline-fg-title: var(--kp-color-red-900);
610
538
  --kp-color-alert-danger-outline-fg-desc: var(--kp-color-gray-700);
@@ -624,11 +552,11 @@
624
552
  --kp-color-alert-success-subtle-icon: var(--kp-color-green-600);
625
553
  --kp-color-alert-success-subtle-accent: var(--kp-color-green-600);
626
554
  --kp-color-alert-success-solid-bg: var(--kp-color-green-600);
627
- --kp-color-alert-success-solid-fg-title: var(--kp-color-white);
555
+ --kp-color-alert-success-solid-fg-title: var(--kp-color-foreground-on-saturated);
628
556
  --kp-color-alert-success-solid-fg-desc: var(--kp-color-green-50);
629
557
  --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);
558
+ --kp-color-alert-success-solid-icon: var(--kp-color-foreground-on-saturated);
559
+ --kp-color-alert-success-solid-accent: var(--kp-color-foreground-on-saturated);
632
560
  --kp-color-alert-success-outline-bg: var(--kp-color-white);
633
561
  --kp-color-alert-success-outline-fg-title: var(--kp-color-green-900);
634
562
  --kp-color-alert-success-outline-fg-desc: var(--kp-color-gray-700);
@@ -672,11 +600,11 @@
672
600
  --kp-color-alert-info-subtle-icon: var(--kp-color-cyan-600);
673
601
  --kp-color-alert-info-subtle-accent: var(--kp-color-cyan-600);
674
602
  --kp-color-alert-info-solid-bg: var(--kp-color-cyan-600);
675
- --kp-color-alert-info-solid-fg-title: var(--kp-color-white);
603
+ --kp-color-alert-info-solid-fg-title: var(--kp-color-foreground-on-saturated);
676
604
  --kp-color-alert-info-solid-fg-desc: var(--kp-color-cyan-50);
677
605
  --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);
606
+ --kp-color-alert-info-solid-icon: var(--kp-color-foreground-on-saturated);
607
+ --kp-color-alert-info-solid-accent: var(--kp-color-foreground-on-saturated);
680
608
  --kp-color-alert-info-outline-bg: var(--kp-color-white);
681
609
  --kp-color-alert-info-outline-fg-title: var(--kp-color-cyan-900);
682
610
  --kp-color-alert-info-outline-fg-desc: var(--kp-color-gray-700);
@@ -735,8 +663,10 @@
735
663
  --kp-color-tabs-tab-fg-hover: var(--kp-color-gray-900);
736
664
  --kp-color-tabs-tab-fg-selected: var(--kp-color-blue-600);
737
665
  --kp-color-tabs-tab-fg-disabled: var(--kp-color-gray-300);
666
+ --kp-color-tabs-tab-underline-rest: rgba(0, 0, 0, 0);
738
667
  --kp-color-tabs-tab-underline-hover: var(--kp-color-gray-300);
739
668
  --kp-color-tabs-tab-underline-selected: var(--kp-color-blue-600);
669
+ --kp-color-tabs-tab-underline-disabled: rgba(0, 0, 0, 0);
740
670
  --kp-color-tabs-tab-icon-rest: var(--kp-color-gray-500);
741
671
  --kp-color-tabs-tab-icon-hover: var(--kp-color-gray-700);
742
672
  --kp-color-tabs-tab-icon-selected: var(--kp-color-blue-600);
@@ -772,6 +702,7 @@
772
702
  --kp-color-sidebar-bg-dark: var(--kp-color-gray-900);
773
703
  --kp-color-sidebar-border: var(--kp-color-gray-200);
774
704
  --kp-color-sidebar-section-label: var(--kp-color-gray-500);
705
+ --kp-color-nav-item-bg-rest: rgba(0, 0, 0, 0);
775
706
  --kp-color-nav-item-bg-hover: var(--kp-color-gray-100);
776
707
  --kp-color-nav-item-bg-active: var(--kp-color-blue-50);
777
708
  --kp-color-nav-item-fg-rest: var(--kp-color-gray-700);
@@ -803,18 +734,20 @@
803
734
  --kp-color-breadcrumbs-separator: var(--kp-color-gray-400); /** Separator between items (chevron/slash) */
804
735
  --kp-color-breadcrumbs-separator-dot: var(--kp-color-blue-600); /** Dot separator — accent color, used as a 3×3 shape instead of the middot glyph */
805
736
  --kp-color-breadcrumbs-ellipsis: var(--kp-color-gray-600); /** Ellipsis (…) color for collapsed middle levels */
737
+ --kp-color-pagination-item-bg-rest: rgba(0, 0, 0, 0);
806
738
  --kp-color-pagination-item-bg-hover: var(--kp-color-blue-50);
807
739
  --kp-color-pagination-item-bg-active: var(--kp-color-blue-100);
808
740
  --kp-color-pagination-item-bg-selected: var(--kp-color-blue-600);
741
+ --kp-color-pagination-item-bg-disabled: rgba(0, 0, 0, 0);
809
742
  --kp-color-pagination-item-fg-rest: var(--kp-color-gray-700);
810
743
  --kp-color-pagination-item-fg-hover: var(--kp-color-blue-700);
811
744
  --kp-color-pagination-item-fg-active: var(--kp-color-blue-700);
812
- --kp-color-pagination-item-fg-selected: var(--kp-color-white);
745
+ --kp-color-pagination-item-fg-selected: var(--kp-color-foreground-on-saturated);
813
746
  --kp-color-pagination-item-fg-disabled: var(--kp-color-gray-300);
814
747
  --kp-color-pagination-item-icon-rest: var(--kp-color-gray-600);
815
748
  --kp-color-pagination-item-icon-hover: var(--kp-color-blue-700);
816
749
  --kp-color-pagination-item-icon-active: var(--kp-color-blue-700);
817
- --kp-color-pagination-item-icon-selected: var(--kp-color-white);
750
+ --kp-color-pagination-item-icon-selected: var(--kp-color-foreground-on-saturated);
818
751
  --kp-color-pagination-item-icon-disabled: var(--kp-color-gray-300);
819
752
  --kp-color-pagination-ellipsis: var(--kp-color-gray-500); /** Ellipsis (…) color between page ranges */
820
753
  --kp-color-pagination-info: var(--kp-color-gray-600); /** 'Showing X of Y' info text + 'Per page' label */
@@ -837,8 +770,10 @@
837
770
  --kp-color-datepicker-header-fg: var(--kp-color-gray-900);
838
771
  --kp-color-datepicker-header-nav-fg: var(--kp-color-gray-600);
839
772
  --kp-color-datepicker-weekday: var(--kp-color-gray-500);
773
+ --kp-color-datepicker-day-bg-rest: rgba(0, 0, 0, 0);
840
774
  --kp-color-datepicker-day-bg-hover: var(--kp-color-gray-100);
841
775
  --kp-color-datepicker-day-bg-selected: var(--kp-color-blue-600);
776
+ --kp-color-datepicker-day-bg-today: rgba(0, 0, 0, 0);
842
777
  --kp-color-datepicker-day-bg-in-range: var(--kp-color-blue-50);
843
778
  --kp-color-datepicker-day-bg-range-edge: var(--kp-color-blue-600);
844
779
  --kp-color-datepicker-day-fg-rest: var(--kp-color-gray-900);
@@ -861,6 +796,7 @@
861
796
  --kp-color-table-row-fg: var(--kp-color-gray-900);
862
797
  --kp-color-table-border: var(--kp-color-gray-200);
863
798
  --kp-color-table-border-soft: var(--kp-color-gray-100);
799
+ --kp-color-tree-node-bg-rest: rgba(0, 0, 0, 0);
864
800
  --kp-color-tree-node-bg-hover: var(--kp-color-gray-50);
865
801
  --kp-color-tree-node-bg-selected: var(--kp-color-blue-50);
866
802
  --kp-color-tree-node-fg-rest: var(--kp-color-gray-900);
@@ -870,7 +806,9 @@
870
806
  --kp-color-tree-node-icon-selected: var(--kp-color-blue-600);
871
807
  --kp-color-tree-node-chevron: var(--kp-color-gray-500);
872
808
  --kp-color-tree-indent-line: var(--kp-color-gray-200); /** Vertical line showing nesting level */
809
+ --kp-color-accordion-trigger-bg-rest: rgba(0, 0, 0, 0);
873
810
  --kp-color-accordion-trigger-bg-hover: var(--kp-color-gray-50);
811
+ --kp-color-accordion-trigger-bg-expanded: rgba(0, 0, 0, 0);
874
812
  --kp-color-accordion-trigger-fg-rest: var(--kp-color-gray-900);
875
813
  --kp-color-accordion-trigger-fg-expanded: var(--kp-color-gray-900);
876
814
  --kp-color-accordion-trigger-fg-disabled: var(--kp-color-gray-400);
@@ -885,22 +823,106 @@
885
823
  --kp-color-empty-state-fg-description: var(--kp-color-gray-600);
886
824
  --kp-color-card-bg: var(--kp-color-white);
887
825
  --kp-color-card-bg-muted: var(--kp-color-gray-50); /** Alternative muted background */
826
+ --kp-color-card-bg-elevated: var(--kp-color-white); /** Same as bg in light. Dark override (#1F1F22) lifts the elevated card one step above default so the elevation reads against the dark page bg. */
888
827
  --kp-color-card-border: var(--kp-color-gray-200);
889
828
  --kp-color-card-fg-title: var(--kp-color-gray-900);
890
829
  --kp-color-card-fg-desc: var(--kp-color-gray-600);
891
830
  --kp-color-card-fg-body: var(--kp-color-gray-700);
892
831
  --kp-color-card-divider: var(--kp-color-gray-100);
832
+ --kp-color-dialog-backdrop: rgba(0, 0, 0, 0.5); /** Semi-transparent overlay behind dialog */
893
833
  --kp-color-dialog-panel-bg: var(--kp-color-white);
894
834
  --kp-color-dialog-panel-border: var(--kp-color-gray-200);
895
835
  --kp-color-dialog-fg-title: var(--kp-color-gray-900); /** Dialog title */
896
836
  --kp-color-dialog-fg-desc: var(--kp-color-gray-600); /** Dialog description (under title) + close icon */
897
837
  --kp-color-dialog-fg-body: var(--kp-color-gray-700); /** Dialog body copy */
898
838
  --kp-color-dialog-divider: var(--kp-color-gray-100); /** Optional divider between header/body/footer */
899
- --kp-text-2xs: var(--kp-font-weight-medium) var(--kp-font-size-2xs)/var(--kp-font-line-height-2xs) var(--kp-font-family-sans); /** Micro text — badges, captions, legal */
900
- --kp-text-xs: var(--kp-font-weight-regular) var(--kp-font-size-xs)/var(--kp-font-line-height-xs) var(--kp-font-family-sans); /** Small body — helper text, metadata */
901
- --kp-text-sm: var(--kp-font-weight-regular) var(--kp-font-size-sm)/var(--kp-font-line-height-sm) var(--kp-font-family-sans); /** Default UI body */
902
- --kp-text-md: var(--kp-font-weight-regular) var(--kp-font-size-md)/var(--kp-font-line-height-md) var(--kp-font-family-sans); /** Comfortable body — reading content */
903
- --kp-text-lg: var(--kp-font-weight-medium) var(--kp-font-size-lg)/var(--kp-font-line-height-lg) var(--kp-font-family-sans); /** Section label, small heading */
904
- --kp-text-xl: var(--kp-font-weight-semibold) var(--kp-font-size-xl)/var(--kp-font-line-height-xl) var(--kp-font-family-sans); /** Heading */
905
- --kp-text-2xl: var(--kp-font-weight-semibold) var(--kp-font-size-2xl)/var(--kp-font-line-height-2xl) var(--kp-font-family-sans); /** Large heading, hero */
839
+ --kp-color-overlay-hover-subtle: rgba(0, 0, 0, 0.04); /** Faintest hover bg — close-button on Alert / Badge / Popover surfaces. */
840
+ --kp-color-overlay-hover-light: rgba(0, 0, 0, 0.06); /** Light hover bg — subtle interactive emphasis on light surfaces. */
841
+ --kp-color-overlay-hover-medium: rgba(0, 0, 0, 0.08); /** Standard hover bg on light surfaces. */
842
+ --kp-color-overlay-primary-hover: rgba(37, 99, 235, 0.08); /** Translucent primary tint — Toast action button hover. */
843
+ --kp-color-overlay-focus-ring: rgba(59, 130, 246, 0.12); /** Soft glow around the focused control (3px ring on SearchBar). */
844
+ --kp-color-fg-on-dark-strong: rgba(255, 255, 255, 0.92); /** Primary text on dark backgrounds — Sidebar item label. */
845
+ --kp-color-fg-on-dark-default: rgba(255, 255, 255, 0.8); /** Default text on dark backgrounds — Header nav item / icon button. */
846
+ --kp-color-fg-on-dark-muted: rgba(255, 255, 255, 0.7); /** Secondary text on dark — Sidebar toggle. */
847
+ --kp-color-fg-on-dark-subtle: rgba(255, 255, 255, 0.6); /** Lowest-emphasis text on dark — Header user role / chevron. */
848
+ --kp-elevation-none: 0px 0px 0px 0px rgba(0,0,0,0);
849
+ --kp-elevation-raised: 0px 1px 2px 0px rgba(9,9,11,0.08), 0px 1px 3px -1px rgba(9,9,11,0.05), 0px 0px 4px -1px rgba(9,9,11,0.03);
850
+ --kp-elevation-overlay: 0px 4px 6px -2px rgba(9,9,11,0.10), 0px 2px 10px -2px rgba(9,9,11,0.06), 0px 0px 16px -4px rgba(9,9,11,0.04);
851
+ --kp-elevation-floating: 0px 8px 16px -4px rgba(9,9,11,0.12), 0px 4px 24px -4px rgba(9,9,11,0.08), 0px 0px 40px -8px rgba(9,9,11,0.05);
852
+ --kp-icon-size-xs: 14px; /** Icon for XS components (24px button) */
853
+ --kp-icon-size-sm: 16px; /** Icon for SM components (28px button) */
854
+ --kp-icon-size-md: 18px; /** Icon for MD components (36px button) */
855
+ --kp-icon-size-lg: 22px; /** Icon for LG components (44px button) */
856
+ --kp-icon-size-xl: 24px; /** Icon for XL components (52px button) */
857
+ --kp-icon-stroke-xs: 1.25px; /** Stroke width for 14px icons — optical compensation */
858
+ --kp-icon-stroke-sm: 1.35px; /** Stroke width for 16px icons */
859
+ --kp-icon-stroke-md: 1.5px; /** Stroke width for 18px icons */
860
+ --kp-icon-stroke-lg: 1.75px; /** Stroke width for 22px icons */
861
+ --kp-icon-stroke-xl: 2px; /** Stroke width for 24px icons — standard Tabler default */
862
+ --kp-motion-duration-fast: 120ms; /** Hover, focus, color/border state changes. */
863
+ --kp-motion-duration-normal: 200ms; /** Overlay enter/exit, accordion expand, larger transitions. */
864
+ --kp-motion-duration-slow: 300ms; /** Page-level changes; rare. */
865
+ --kp-motion-duration-spin: 1000ms; /** Infinite spinner loop — button loading, progress-circular indeterminate. */
866
+ --kp-motion-duration-shimmer: 1400ms; /** Infinite shimmer loop — skeleton placeholder, progress-linear indeterminate slide. */
867
+ --kp-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
868
+ --kp-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
869
+ --kp-motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
870
+ --kp-radius-none: 0px;
871
+ --kp-radius-comp-xs: 8px;
872
+ --kp-radius-comp-sm: 10px;
873
+ --kp-radius-comp-md: 12px;
874
+ --kp-radius-comp-lg: 14px;
875
+ --kp-radius-comp-xl: 16px;
876
+ --kp-radius-full: 9999px;
877
+ --kp-size-xs: 24px;
878
+ --kp-size-sm: 28px;
879
+ --kp-size-md: 36px;
880
+ --kp-size-lg: 44px;
881
+ --kp-size-xl: 52px;
882
+ --kp-spacing-4xs: 2px;
883
+ --kp-spacing-3xs: 4px;
884
+ --kp-spacing-2xs: 8px;
885
+ --kp-spacing-xs: 12px;
886
+ --kp-spacing-sm: 16px;
887
+ --kp-spacing-md: 20px;
888
+ --kp-spacing-lg: 24px;
889
+ --kp-spacing-xl: 32px;
890
+ --kp-spacing-2xl: 40px;
891
+ --kp-spacing-3xl: 48px;
892
+ --kp-spacing-4xl: 64px;
893
+ --kp-font-family-sans: Onest, system-ui, sans-serif; /** Primary UI font */
894
+ --kp-font-family-mono: 'SF Mono', Monaco, Consolas, monospace; /** Monospace for code */
895
+ --kp-font-weight-regular: 400; /** Body text */
896
+ --kp-font-weight-medium: 500; /** Emphasis, small text, section labels */
897
+ --kp-font-weight-semibold: 600; /** Headings */
898
+ --kp-font-weight-bold: 700; /** Strong emphasis */
899
+ --kp-font-size-2xs: 11px; /** Micro labels, captions */
900
+ --kp-font-size-xs: 12px; /** Small body, hints */
901
+ --kp-font-size-sm: 14px; /** Default body text, UI */
902
+ --kp-font-size-md: 16px; /** Comfortable body, large UI */
903
+ --kp-font-size-lg: 20px; /** Section labels, small headings */
904
+ --kp-font-size-xl: 24px; /** Headings */
905
+ --kp-font-size-2xl: 32px; /** Large headings, hero text */
906
+ --kp-font-lineHeight-2xs: 16px; /** Pairs with size 2xs (11px) — 4px grid */
907
+ --kp-font-lineHeight-xs: 16px; /** Pairs with size xs (12px) */
908
+ --kp-font-lineHeight-sm: 20px; /** Pairs with size sm (14px) */
909
+ --kp-font-lineHeight-md: 24px; /** Pairs with size md (16px) */
910
+ --kp-font-lineHeight-lg: 28px; /** Pairs with size lg (20px) */
911
+ --kp-font-lineHeight-xl: 32px; /** Pairs with size xl (24px) */
912
+ --kp-font-lineHeight-2xl: 40px; /** Pairs with size 2xl (32px) */
913
+ --kp-layout-container-max-width-narrow: 640px;
914
+ --kp-layout-container-max-width-medium: 960px;
915
+ --kp-layout-container-max-width-wide: 1280px;
916
+ --kp-layout-container-max-width-full: 100%;
917
+ --kp-layout-container-padding-none: 0;
918
+ --kp-layout-container-padding-sm: 16px;
919
+ --kp-layout-container-padding-md: 24px;
920
+ --kp-layout-container-padding-lg: 32px;
921
+ --kp-text-2xs: 500 11px/16px Onest, system-ui, sans-serif; /** Micro text — badges, captions, legal */
922
+ --kp-text-xs: 400 12px/16px Onest, system-ui, sans-serif; /** Small body — helper text, metadata */
923
+ --kp-text-sm: 400 14px/20px Onest, system-ui, sans-serif; /** Default UI body */
924
+ --kp-text-md: 400 16px/24px Onest, system-ui, sans-serif; /** Comfortable body — reading content */
925
+ --kp-text-lg: 500 20px/28px Onest, system-ui, sans-serif; /** Section label, small heading */
926
+ --kp-text-xl: 600 24px/32px Onest, system-ui, sans-serif; /** Heading */
927
+ --kp-text-2xl: 600 32px/40px Onest, system-ui, sans-serif; /** Large heading, hero */
906
928
  }