@kahitsan/ksui 0.32.0 → 0.34.0

package/src/components/base/KpiCard.tsx

@@ -9,10 +9,10 @@ export type KpiTone = "success" | "danger" | "info" | "warning";
 // Domain-free tone record. Each tone supplies a Tailwind text class for the
 // label icon + value and a literal SVG stroke color for the sparkline.
 const TONE: Record<KpiTone, { text: string; stroke: string }> = {
-  success: { text: "text-emerald-400", stroke: "#34d399" },
-  danger: { text: "text-red-400", stroke: "#f87171" },
-  info: { text: "text-blue-400", stroke: "#60a5fa" },
-  warning: { text: "text-amber-400", stroke: "#fbbf24" },
+  success: { text: "text-[var(--ks-success-fg,#34d399)]", stroke: "var(--ks-success-fg, #34d399)" },
+  danger: { text: "text-[var(--ks-danger-fg,#f87171)]", stroke: "var(--ks-danger-fg, #f87171)" },
+  info: { text: "text-[var(--ks-info-fg,#7dd3fc)]", stroke: "var(--ks-info-fg, #7dd3fc)" },
+  warning: { text: "text-[var(--ks-warning-fg,#fbbf24)]", stroke: "var(--ks-warning-fg, #fbbf24)" },
 };
 
 // Module-private counter so each card's sparkline gradient gets a unique id,
@@ -71,12 +71,12 @@ export default function KpiCard(props: KpiCardProps): JSX.Element {
 
   return (
     <div
-      class={`rounded-lg border border-zinc-800/50 bg-zinc-900/50 p-4 relative overflow-hidden ${
+      class={`rounded-lg border border-[var(--ks-border,rgba(39,39,42,0.5))] bg-[var(--ks-surface,#0f0f0f)]/50 p-4 relative overflow-hidden ${
         props.clipClass ?? ""
       } ${props.class ?? ""}`}
     >
       <div class="flex items-start justify-between mb-3">
-        <span class="text-[10px] text-zinc-500 uppercase tracking-[0.25em] font-semibold">
+        <span class="text-[10px] text-[var(--ks-fg-subtle,#71717a)] uppercase tracking-[0.25em] font-semibold">
           {props.label}
         </span>
         <div class={`flex items-center justify-center ${t().text}`}>
@@ -91,7 +91,7 @@ export default function KpiCard(props: KpiCardProps): JSX.Element {
             {props.value}
           </div>
           <Show when={props.hint}>
-            <div class="text-[11px] text-zinc-600 mt-1">{props.hint}</div>
+            <div class="text-[11px] text-[var(--ks-fg-subtle,#71717a)] mt-1">{props.hint}</div>
           </Show>
         </div>
         <Show when={sparkPath()}>

package/src/components/base/Modal.tsx

@@ -17,6 +17,7 @@
 
 import { JSX, onCleanup, onMount, splitProps } from "solid-js";
 import { autoFocusOnMount, lockPullToRefresh, unlockPullToRefresh, useFocusTrap } from "../../utils/dom";
+import { injectCSS } from "../../utils/inject-css";
 
 export type ModalSize = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "5xl" | "7xl";
 export type ModalTone = "default" | "danger";
@@ -33,27 +34,22 @@ const SIZE_MAX_WIDTH: Record<ModalSize, string> = {
 };
 
 const STYLE_ID = "ksui-modal-style";
-
-function ensureModalStyle(): void {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID)) return;
-  const style = document.createElement("style");
-  style.id = STYLE_ID;
-  style.textContent = `
+// Backdrops read --ks-overlay (§6a named exception); card surface/border keep
+// the old --ksui-modal-* name as the live read-point, per §1.4's direction,
+// now falling through to the new token before the dark literal.
+const STYLE_CSS = `
 .ksui-modal-dialog{position:fixed;inset:0;z-index:50;background:transparent;padding:0;margin:0;max-width:none;max-height:none;width:100vw;height:100vh;border:0;}
 .ksui-modal-dialog[open]{display:flex;align-items:center;justify-content:center;padding:1rem;}
-.ksui-modal-dialog::backdrop{background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);}
+.ksui-modal-dialog::backdrop{background:var(--ks-overlay, rgba(0,0,0,0.7));backdrop-filter:blur(4px);}
 .ksui-modal-sheet-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;}
 @media (min-width:640px){.ksui-modal-sheet-overlay{align-items:center;padding:1rem;}}
-.ksui-modal-sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);}
-.ksui-modal-card{position:relative;z-index:10;width:100%;background:var(--ksui-modal-bg,#18181b);color:var(--ksui-modal-fg,inherit);border:1px solid var(--ksui-modal-border,rgba(245,158,11,0.3));border-radius:0.75rem;padding:1.5rem;box-shadow:0 25px 50px -12px rgba(0,0,0,0.6);max-height:90vh;overflow-x:hidden;overflow-y:auto;}
+.ksui-modal-sheet-backdrop{position:absolute;inset:0;background:var(--ks-overlay, rgba(0,0,0,0.7));backdrop-filter:blur(6px);}
+.ksui-modal-card{position:relative;z-index:10;width:100%;background:var(--ksui-modal-bg,var(--ks-overlay-surface,#18181b));color:var(--ksui-modal-fg,inherit);border:1px solid var(--ksui-modal-border,rgba(245,158,11,0.3));border-radius:0.75rem;padding:1.5rem;box-shadow:0 25px 50px -12px rgba(0,0,0,0.6);max-height:90vh;overflow-x:hidden;overflow-y:auto;}
 .ksui-modal-card.danger{border-color:var(--ksui-modal-border-danger,rgba(239,68,68,0.3));}
-.ksui-modal-sheet-card{position:relative;z-index:10;width:100%;background:var(--ksui-modal-bg,#18181b);color:var(--ksui-modal-fg,inherit);border:1px solid var(--ksui-modal-border,rgba(245,158,11,0.3));box-shadow:0 25px 50px -12px rgba(0,0,0,0.6);max-height:92vh;overflow:hidden;overscroll-behavior:contain;}
+.ksui-modal-sheet-card{position:relative;z-index:10;width:100%;background:var(--ksui-modal-bg,var(--ks-overlay-surface,#18181b));color:var(--ksui-modal-fg,inherit);border:1px solid var(--ksui-modal-border,rgba(245,158,11,0.3));box-shadow:0 25px 50px -12px rgba(0,0,0,0.6);max-height:92vh;overflow:hidden;overscroll-behavior:contain;}
 .ksui-modal-sheet-card.danger{border-color:var(--ksui-modal-border-danger,rgba(239,68,68,0.3));}
 @media (min-width:640px){.ksui-modal-sheet-card{width:auto;border-radius:0.75rem;max-height:88vh;}}
 `;
-  document.head.appendChild(style);
-}
 
 export interface ModalProps {
   /** Fired on Escape, backdrop click, or any other dismissal trigger. */
@@ -74,7 +70,7 @@ export interface ModalProps {
 type LocalProps = Omit<ModalProps, "variant">;
 
 export function Modal(props: ModalProps): JSX.Element {
-  ensureModalStyle();
+  injectCSS(STYLE_ID, STYLE_CSS);
   const [local] = splitProps(props, [
     "onClose",
     "dismissable",

package/src/components/base/ProgressBar.tsx

@@ -6,6 +6,7 @@
 import type { Component, JSX } from "solid-js";
 import { createMemo, splitProps, Show } from "solid-js";
 import { Dynamic } from "solid-js/web";
+import { injectCSS } from "../../utils/inject-css";
 
 // The monolith ships these as a CSS module (ProgressBar.module.css). The
 // plugin remote builds to a single IIFE that the host serves as one script —
@@ -14,22 +15,16 @@ import { Dynamic } from "solid-js/web";
 // the keyframes + helper classes once per page via a <style> tag and reference
 // them with plain (unscoped) class names so the bundle stays self-contained.
 const PROGRESS_STYLE_ID = "ks-progress-bar-inline-style";
+// Shimmer stops per THEME-SPEC §6a named exception: primary through
+// surface-raised reads as a brand-tinted sheen instead of a flat white one.
 const PROGRESS_CSS = `
 .ks-progress-fill { position: relative; border-radius: 0; transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; }
 .ks-progress-indicator { border-radius: 0; box-shadow: 0 0 2px currentColor; }
 .ks-progress-overflow { position: relative; }
 @keyframes ksLiveTimerShimmer { 0% { transform: translateX(-100%) skewX(-25deg); } 100% { transform: translateX(100%) skewX(-25deg); } }
-.ks-progress-shimmer { animation: ksLiveTimerShimmer 2s infinite; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); background-size: 200% 100%; height: 100%; width: 100%; position: absolute; top: 0; left: 0; opacity: 0.7; }
+.ks-progress-shimmer { animation: ksLiveTimerShimmer 2s infinite; background: linear-gradient(90deg, transparent, var(--ks-primary, #c9a961), transparent); background-size: 200% 100%; height: 100%; width: 100%; position: absolute; top: 0; left: 0; opacity: 0.7; }
 @media (prefers-reduced-motion: reduce) { .ks-progress-fill { transition: width 0.3s ease; } }
 `;
-function ensureProgressStyle() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(PROGRESS_STYLE_ID)) return;
-  const el = document.createElement("style");
-  el.id = PROGRESS_STYLE_ID;
-  el.textContent = PROGRESS_CSS;
-  document.head.appendChild(el);
-}
 const styles: Record<string, string> = {
   "ks-progress-fill": "ks-progress-fill",
   "ks-progress-indicator": "ks-progress-indicator",
@@ -65,69 +60,78 @@ interface ColorInfo {
   shimmer: string;
 }
 
+// Caller picks a color by name (e.g. class="text-red-400"); each name maps to
+// the closest §1.2 token by role — the 4 semantic tokens for their matching
+// hue, the neutral fg-muted token for the 3 near-identical grays, and the
+// nearest chart-series hue for the two colors with no semantic/neutral token
+// (orange, purple) since ksui has no dedicated token for those hues. Every
+// effect string below is written out literally (not built from a template at
+// runtime) because the theming rollout's check-token-fallbacks.mjs gate
+// statically greps source text for the color-mix CSS function with a literal
+// --ks-* var name.
 const COLOR_MAP: Record<string, ColorInfo> = {
   red: {
-    fill: "rgba(255, 68, 68, 0.2)",
-    indicator: "#FF4444",
-    stripe: "rgba(255, 68, 68, 0.4)",
-    overflow: "rgba(255, 68, 68, 0.4)",
-    shimmer: "rgba(255, 68, 68, 0.3)",
+    fill: "color-mix(in srgb, var(--ks-danger, #ef4444) 20%, transparent)",
+    indicator: "var(--ks-danger, #ef4444)",
+    stripe: "color-mix(in srgb, var(--ks-danger, #ef4444) 40%, transparent)",
+    overflow: "color-mix(in srgb, var(--ks-danger, #ef4444) 40%, transparent)",
+    shimmer: "color-mix(in srgb, var(--ks-danger, #ef4444) 30%, transparent)",
   },
   green: {
-    fill: "rgba(0, 204, 136, 0.2)",
-    indicator: "#00CC88",
-    stripe: "rgba(0, 204, 136, 0.4)",
-    overflow: "rgba(0, 204, 136, 0.4)",
-    shimmer: "rgba(0, 204, 136, 0.3)",
+    fill: "color-mix(in srgb, var(--ks-success, #10b981) 20%, transparent)",
+    indicator: "var(--ks-success, #10b981)",
+    stripe: "color-mix(in srgb, var(--ks-success, #10b981) 40%, transparent)",
+    overflow: "color-mix(in srgb, var(--ks-success, #10b981) 40%, transparent)",
+    shimmer: "color-mix(in srgb, var(--ks-success, #10b981) 30%, transparent)",
   },
   blue: {
-    fill: "rgba(74, 158, 255, 0.2)",
-    indicator: "#4A9EFF",
-    stripe: "rgba(74, 158, 255, 0.4)",
-    overflow: "rgba(74, 158, 255, 0.4)",
-    shimmer: "rgba(74, 158, 255, 0.3)",
+    fill: "color-mix(in srgb, var(--ks-info, #38bdf8) 20%, transparent)",
+    indicator: "var(--ks-info, #38bdf8)",
+    stripe: "color-mix(in srgb, var(--ks-info, #38bdf8) 40%, transparent)",
+    overflow: "color-mix(in srgb, var(--ks-info, #38bdf8) 40%, transparent)",
+    shimmer: "color-mix(in srgb, var(--ks-info, #38bdf8) 30%, transparent)",
   },
   amber: {
-    fill: "rgba(245, 158, 11, 0.2)",
-    indicator: "#F59E0B",
-    stripe: "rgba(245, 158, 11, 0.4)",
-    overflow: "rgba(245, 158, 11, 0.4)",
-    shimmer: "rgba(245, 158, 11, 0.3)",
+    fill: "color-mix(in srgb, var(--ks-warning, #f59e0b) 20%, transparent)",
+    indicator: "var(--ks-warning, #f59e0b)",
+    stripe: "color-mix(in srgb, var(--ks-warning, #f59e0b) 40%, transparent)",
+    overflow: "color-mix(in srgb, var(--ks-warning, #f59e0b) 40%, transparent)",
+    shimmer: "color-mix(in srgb, var(--ks-warning, #f59e0b) 30%, transparent)",
   },
   orange: {
-    fill: "rgba(255, 136, 51, 0.2)",
-    indicator: "#FF8833",
-    stripe: "rgba(255, 136, 51, 0.4)",
-    overflow: "rgba(255, 136, 51, 0.4)",
-    shimmer: "rgba(255, 136, 51, 0.3)",
+    fill: "color-mix(in srgb, var(--ks-chart-4, #f59e0b) 20%, transparent)",
+    indicator: "var(--ks-chart-4, #f59e0b)",
+    stripe: "color-mix(in srgb, var(--ks-chart-4, #f59e0b) 40%, transparent)",
+    overflow: "color-mix(in srgb, var(--ks-chart-4, #f59e0b) 40%, transparent)",
+    shimmer: "color-mix(in srgb, var(--ks-chart-4, #f59e0b) 30%, transparent)",
   },
   purple: {
-    fill: "rgba(168, 85, 247, 0.2)",
-    indicator: "#A855F7",
-    stripe: "rgba(168, 85, 247, 0.4)",
-    overflow: "rgba(168, 85, 247, 0.4)",
-    shimmer: "rgba(168, 85, 247, 0.3)",
+    fill: "color-mix(in srgb, var(--ks-chart-6, #a78bfa) 20%, transparent)",
+    indicator: "var(--ks-chart-6, #a78bfa)",
+    stripe: "color-mix(in srgb, var(--ks-chart-6, #a78bfa) 40%, transparent)",
+    overflow: "color-mix(in srgb, var(--ks-chart-6, #a78bfa) 40%, transparent)",
+    shimmer: "color-mix(in srgb, var(--ks-chart-6, #a78bfa) 30%, transparent)",
   },
   slate: {
-    fill: "rgba(148, 163, 184, 0.2)",
-    indicator: "#94A3B8",
-    stripe: "rgba(148, 163, 184, 0.4)",
-    overflow: "rgba(148, 163, 184, 0.4)",
-    shimmer: "rgba(148, 163, 184, 0.3)",
+    fill: "color-mix(in srgb, var(--ks-fg-muted, #a1a1aa) 20%, transparent)",
+    indicator: "var(--ks-fg-muted, #a1a1aa)",
+    stripe: "color-mix(in srgb, var(--ks-fg-muted, #a1a1aa) 40%, transparent)",
+    overflow: "color-mix(in srgb, var(--ks-fg-muted, #a1a1aa) 40%, transparent)",
+    shimmer: "color-mix(in srgb, var(--ks-fg-muted, #a1a1aa) 30%, transparent)",
   },
   gray: {
-    fill: "rgba(156, 163, 175, 0.2)",
-    indicator: "#9CA3AF",
-    stripe: "rgba(156, 163, 175, 0.4)",
-    overflow: "rgba(156, 163, 175, 0.4)",
-    shimmer: "rgba(156, 163, 175, 0.3)",
+    fill: "color-mix(in srgb, var(--ks-fg-muted, #a1a1aa) 20%, transparent)",
+    indicator: "var(--ks-fg-muted, #a1a1aa)",
+    stripe: "color-mix(in srgb, var(--ks-fg-muted, #a1a1aa) 40%, transparent)",
+    overflow: "color-mix(in srgb, var(--ks-fg-muted, #a1a1aa) 40%, transparent)",
+    shimmer: "color-mix(in srgb, var(--ks-fg-muted, #a1a1aa) 30%, transparent)",
   },
   zinc: {
-    fill: "rgba(161, 161, 170, 0.2)",
-    indicator: "#A1A1AA",
-    stripe: "rgba(161, 161, 170, 0.4)",
-    overflow: "rgba(161, 161, 170, 0.4)",
-    shimmer: "rgba(161, 161, 170, 0.3)",
+    fill: "color-mix(in srgb, var(--ks-fg-muted, #a1a1aa) 20%, transparent)",
+    indicator: "var(--ks-fg-muted, #a1a1aa)",
+    stripe: "color-mix(in srgb, var(--ks-fg-muted, #a1a1aa) 40%, transparent)",
+    overflow: "color-mix(in srgb, var(--ks-fg-muted, #a1a1aa) 40%, transparent)",
+    shimmer: "color-mix(in srgb, var(--ks-fg-muted, #a1a1aa) 30%, transparent)",
   },
 };
 
@@ -149,7 +153,7 @@ function extractTextSize(className: string): number {
 }
 
 const ProgressBar: Component<ProgressBarProps> = (props) => {
-  ensureProgressStyle();
+  injectCSS(PROGRESS_STYLE_ID, PROGRESS_CSS);
   const [local, others] = splitProps(props, [
     "progress",
     "icon",
@@ -185,7 +189,7 @@ const ProgressBar: Component<ProgressBarProps> = (props) => {
 
   const containerClasses = createMemo(() =>
     cn(
-      "select-none relative overflow-hidden rounded bg-black/20 border border-zinc-700/40",
+      "select-none relative overflow-hidden rounded bg-[var(--ks-surface,#0f0f0f)]/20 border border-[var(--ks-border-strong,#3f3f46)]/40",
       "h-8",
       !classProp()?.includes("w-") ? "w-full" : "",
       classProp(),
@@ -302,9 +306,9 @@ const ProgressBar: Component<ProgressBarProps> = (props) => {
           )}
           {label() && (
             <>
-              {(Icon() || statusLabel()) && <span class="text-zinc-500 mx-1">·</span>}
+              {(Icon() || statusLabel()) && <span class="text-[var(--ks-fg-subtle,#71717a)] mx-1">·</span>}
               <span class="flex-1 min-w-0">
-                <span class="text-zinc-400 block overflow-hidden text-ellipsis whitespace-nowrap">
+                <span class="text-[var(--ks-fg-muted,#a1a1aa)] block overflow-hidden text-ellipsis whitespace-nowrap">
                   {label()}
                 </span>
               </span>
@@ -317,7 +321,7 @@ const ProgressBar: Component<ProgressBarProps> = (props) => {
           </div>
         ) : !hidePercentage() ? (
           <div class="flex-shrink-0 ml-2 text-right">
-            <span class="font-mono font-medium text-zinc-400">{Math.round(progressVal())}%</span>
+            <span class="font-mono font-medium text-[var(--ks-fg-muted,#a1a1aa)]">{Math.round(progressVal())}%</span>
           </div>
         ) : null}
       </div>

package/src/components/base/RadioCardGroup.tsx

@@ -34,6 +34,8 @@ interface RadioCardGroupProps<T> {
    * default amber-active styling per call site.
    */
   itemClass?: string;
+  /** Disables the whole group: no tab stop, clicks suppressed, aria-disabled. */
+  disabled?: boolean;
 }
 
 // A controlled, keyboard-navigable group of radio cards. The reusable part is
@@ -57,6 +59,7 @@ export default function RadioCardGroup<T>(props: RadioCardGroupProps<T>): JSX.El
   };
 
   const selectByIndex = (idx: number) => {
+    if (props.disabled) return;
     const list = props.options;
     if (list.length === 0) return;
     const wrapped = ((idx % list.length) + list.length) % list.length;
@@ -100,8 +103,8 @@ export default function RadioCardGroup<T>(props: RadioCardGroupProps<T>): JSX.El
       <span
         class="h-2 w-2 rounded-full shrink-0"
         classList={{
-          "bg-amber-400": selected,
-          "bg-zinc-600 group-hover:bg-zinc-500": !selected,
+          "bg-[var(--ks-accent,#fbbf24)]": selected,
+          "bg-[var(--ks-fg-subtle,#71717a)] group-hover:bg-[var(--ks-fg-muted,#a1a1aa)]": !selected,
         }}
       />
       <span class="truncate">{label(option)}</span>
@@ -112,6 +115,7 @@ export default function RadioCardGroup<T>(props: RadioCardGroupProps<T>): JSX.El
     <div
       role="radiogroup"
       aria-label={props.ariaLabel}
+      aria-disabled={props.disabled}
       tabIndex={-1}
       class={`${gridClass()} ${props.class ?? ""}`}
       onKeyDown={onKeyDown}
@@ -120,19 +124,22 @@ export default function RadioCardGroup<T>(props: RadioCardGroupProps<T>): JSX.El
         {(option, i) => {
           const k = keyAt(option);
           const selected = () => props.value === k;
-          const isTabStop = () => selected() || (!props.value && i() === 0);
+          const isTabStop = () => !props.disabled && (selected() || (!props.value && i() === 0));
           return (
             <button
               ref={(el) => (buttonRefs[i()] = el)}
               type="button"
               role="radio"
               aria-checked={selected()}
+              aria-disabled={props.disabled}
               tabIndex={isTabStop() ? 0 : -1}
-              onClick={() => props.onChange(k)}
+              onClick={() => !props.disabled && props.onChange(k)}
               class={`group flex items-center gap-2 rounded-lg border px-3 py-3 text-left text-sm transition-colors cursor-pointer ${props.itemClass ?? ""}`}
               classList={{
-                "border-amber-500/50 bg-amber-600/10 text-amber-300": selected(),
-                "border-zinc-700 bg-zinc-800/50 text-zinc-300 hover:border-zinc-600 hover:bg-zinc-800":
+                "opacity-50 pointer-events-none cursor-not-allowed": !!props.disabled,
+                "border-[var(--ks-accent,#fbbf24)]/50 bg-[var(--ks-accent,#fbbf24)]/10 text-[var(--ks-accent,#fbbf24)]":
+                  selected(),
+                "border-[var(--ks-border-strong,#3f3f46)] bg-[var(--ks-surface-raised,#1a1a1a)] text-[var(--ks-fg-muted,#a1a1aa)] hover:border-[var(--ks-fg-subtle,#71717a)] hover:bg-[var(--ks-surface-sunken,#141414)]":
                   !selected(),
               }}
             >

package/src/components/base/SectionHeading.tsx

@@ -75,23 +75,23 @@ export default function SectionHeading(props: SectionHeadingProps): JSX.Element
       <Show when={props.kicker}>
         <div
           class={`text-xs font-bold tracking-[0.3em] uppercase mb-2 ${
-            props.kickerClass ?? "text-amber-500"
+            props.kickerClass ?? "text-[var(--ks-accent,#fbbf24)]"
           }`}
         >
           {props.kicker}
         </div>
       </Show>
 
-      <Title class={`${TITLE_SIZE[level()]} ${props.titleClass ?? "text-white"}`}>
+      <Title class={`${TITLE_SIZE[level()]} ${props.titleClass ?? "text-[var(--ks-fg,#ffffff)]"}`}>
         {props.title}
       </Title>
 
       <Show when={props.accent}>
-        <div class={`w-20 h-1 mt-4 rounded-full ${props.accentClass ?? "bg-amber-500"}`} />
+        <div class={`w-20 h-1 mt-4 rounded-full ${props.accentClass ?? "bg-[var(--ks-accent,#fbbf24)]"}`} />
       </Show>
 
       <Show when={props.subtitle}>
-        <p class={`mt-4 text-base md:text-lg max-w-2xl ${props.subtitleClass ?? "text-zinc-400"}`}>
+        <p class={`mt-4 text-base md:text-lg max-w-2xl ${props.subtitleClass ?? "text-[var(--ks-fg-muted,#a1a1aa)]"}`}>
           {props.subtitle}
         </p>
       </Show>

package/src/components/base/SegmentedFilter.tsx

@@ -16,28 +16,84 @@ interface SegmentedFilterProps {
   testIdPrefix?: string;
   /** Extra classes on the outer bordered row. */
   class?: string;
+  /** Accessible label for the radiogroup wrapper (WAI-ARIA radiogroup pattern). */
+  ariaLabel?: string;
 }
 
 // A rounded bordered row of segment buttons with one active at a time.
 // Presentational only and domain free: the caller passes the segment values
 // and the active value, so there are no status literals baked in here.
+// Semantics follow the WAI-ARIA radiogroup pattern (role="radiogroup" +
+// role="radio"/aria-checked per segment + roving tabindex + arrow-key nav) so
+// this reads as a single control, not a strip of unrelated buttons.
 export default function SegmentedFilter(props: SegmentedFilterProps): JSX.Element {
+  const buttonRefs: (HTMLButtonElement | undefined)[] = [];
   const optionOf = (o: SegmentedFilterOption) =>
     typeof o === "string" ? { value: o, label: o, capitalize: true } : { ...o, capitalize: false };
+
+  const currentIndex = () => {
+    const i = props.options.findIndex((o) => optionOf(o).value === props.value);
+    return i >= 0 ? i : 0;
+  };
+
+  const selectByIndex = (idx: number) => {
+    const list = props.options;
+    if (list.length === 0) return;
+    const wrapped = ((idx % list.length) + list.length) % list.length;
+    props.onChange(optionOf(list[wrapped]).value);
+    buttonRefs[wrapped]?.focus();
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        e.preventDefault();
+        selectByIndex(currentIndex() + 1);
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        e.preventDefault();
+        selectByIndex(currentIndex() - 1);
+        break;
+      case "Home":
+        e.preventDefault();
+        selectByIndex(0);
+        break;
+      case "End":
+        e.preventDefault();
+        selectByIndex(props.options.length - 1);
+        break;
+    }
+  };
+
   return (
-    <div class={`flex rounded-lg border border-zinc-800/50 overflow-hidden ${props.class ?? ""}`}>
+    <div
+      role="radiogroup"
+      aria-label={props.ariaLabel}
+      class={`flex rounded-lg border border-[var(--ks-border,rgba(39,39,42,0.5))] overflow-hidden ${props.class ?? ""}`}
+      onKeyDown={onKeyDown}
+    >
       <For each={props.options}>
-        {(o) => {
+        {(o, i) => {
           const opt = optionOf(o);
+          const selected = () => props.value === opt.value;
+          const isTabStop = () => selected() || (!props.value && i() === 0);
           return (
             <button
+              ref={(el) => (buttonRefs[i()] = el)}
+              type="button"
+              role="radio"
+              aria-checked={selected()}
+              tabIndex={isTabStop() ? 0 : -1}
               data-testid={props.testIdPrefix ? `${props.testIdPrefix}-${opt.value}` : undefined}
               onClick={() => props.onChange(opt.value)}
               class="px-3 py-1.5 text-xs transition-colors cursor-pointer"
               classList={{
                 capitalize: opt.capitalize,
-                "bg-amber-500/20 text-amber-400": props.value === opt.value,
-                "text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/50": props.value !== opt.value,
+                "bg-[var(--ks-accent,#fbbf24)]/20 text-[var(--ks-accent,#fbbf24)]": selected(),
+                "text-[var(--ks-fg-muted,#a1a1aa)] hover:text-[var(--ks-fg,#ffffff)] hover:bg-[var(--ks-surface-raised,#1a1a1a)]":
+                  !selected(),
               }}
             >
               {opt.label}

package/src/components/base/SocialLinksBar.tsx

@@ -1,4 +1,5 @@
 import { For, type Component, type JSX } from "solid-js";
+import { injectCSS } from "../../utils/inject-css";
 
 /** Icon component shape: any component that accepts a numeric `size`
  *  (lucide-solid icons satisfy this, as does any custom SVG component). */
@@ -38,19 +39,6 @@ export interface SocialLinksBarProps {
 const CLIP_STYLE_ID = "ksui-social-clip-style";
 const CLIP_STYLE = `.ksui-social-clip{clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);}`;
 
-// Inject the clip-path rule once per document, matching the SSR-safe
-// getElementById-dedupe pattern used by Button/ThemeToggle. A module-level
-// boolean would be non-reentrant across SSR requests (the worker reuses the
-// module), so the style must be keyed off the document, not module state.
-function ensureSocialClipStyle(): void {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(CLIP_STYLE_ID)) return;
-  const el = document.createElement("style");
-  el.id = CLIP_STYLE_ID;
-  el.textContent = CLIP_STYLE;
-  document.head.appendChild(el);
-}
-
 /**
  * A horizontal row of accessible, round (or clip-cornered) icon buttons that
  * link out to external profiles. Each button opens its href in a new tab with
@@ -59,7 +47,7 @@ function ensureSocialClipStyle(): void {
  * Domain-free: the specific URLs, icons, and labels all come from `links`.
  */
 export default function SocialLinksBar(props: SocialLinksBarProps): JSX.Element {
-  ensureSocialClipStyle();
+  injectCSS(CLIP_STYLE_ID, CLIP_STYLE);
   const shape = () => props.shape ?? "round";
   const btn = () => props.buttonSize ?? (shape() === "clip" ? 48 : 40);
   const icon = () => props.iconSize ?? Math.round(btn() * 0.45);
@@ -80,7 +68,7 @@ export default function SocialLinksBar(props: SocialLinksBarProps): JSX.Element
             rel="noopener noreferrer"
             title={link.label}
             aria-label={link.label}
-            class={`flex items-center justify-center bg-zinc-800 text-zinc-400 transition-all hover:bg-amber-500 hover:text-black ${shapeClass()}`}
+            class={`flex items-center justify-center bg-[var(--ks-surface-raised,#1a1a1a)] text-[var(--ks-fg-muted,#a1a1aa)] transition-all hover:bg-[var(--ks-accent,#fbbf24)] hover:text-[var(--ks-fg-on-accent,#0a0a0a)] ${shapeClass()}`}
             style={{ width: `${btn()}px`, height: `${btn()}px` }}
           >
             {link.icon({ size: icon() })}

package/src/components/base/StatusIndicator.tsx

@@ -16,28 +16,28 @@ interface ToneClass {
 // passes a plain label; nothing domain-specific leaks into this atom.
 const TONE_CLASS: Record<StatusIndicatorTone, ToneClass> = {
   success: {
-    dot: "bg-emerald-400",
-    text: "text-white",
+    dot: "bg-[var(--ks-success,#10b981)]",
+    text: "text-[var(--ks-fg,#ffffff)]",
     glow: "shadow-[0_0_10px_rgba(52,211,153,0.6)]",
   },
   neutral: {
-    dot: "bg-zinc-400",
-    text: "text-zinc-400",
+    dot: "bg-[var(--ks-fg-muted,#a1a1aa)]",
+    text: "text-[var(--ks-fg-muted,#a1a1aa)]",
     glow: "shadow-[0_0_10px_rgba(161,161,170,0.5)]",
   },
   warning: {
-    dot: "bg-amber-400",
-    text: "text-amber-300",
+    dot: "bg-[var(--ks-warning,#f59e0b)]",
+    text: "text-[var(--ks-warning-fg,#fbbf24)]",
     glow: "shadow-[0_0_10px_rgba(251,191,36,0.6)]",
   },
   danger: {
-    dot: "bg-red-400",
-    text: "text-red-300",
+    dot: "bg-[var(--ks-danger,#ef4444)]",
+    text: "text-[var(--ks-danger-fg,#f87171)]",
     glow: "shadow-[0_0_10px_rgba(248,113,113,0.6)]",
   },
   info: {
-    dot: "bg-blue-400",
-    text: "text-blue-300",
+    dot: "bg-[var(--ks-info,#38bdf8)]",
+    text: "text-[var(--ks-info-fg,#7dd3fc)]",
     glow: "shadow-[0_0_10px_rgba(96,165,250,0.6)]",
   },
 };
@@ -89,7 +89,7 @@ export default function StatusIndicator(props: StatusIndicatorProps): JSX.Elemen
         <Show when={props.caption}>
           <div
             class={`text-xs font-bold uppercase tracking-widest ${
-              props.captionClass ?? "text-amber-400"
+              props.captionClass ?? "text-[var(--ks-accent,#fbbf24)]"
             }`}
           >
             {props.caption}

package/src/components/base/StatusPill.tsx

@@ -18,29 +18,29 @@ interface ToneClass {
 // compact sizes tables now use than the previous bordered pill did.
 const TONE_CLASS: Record<StatusTone, ToneClass> = {
   success: {
-    text: "text-emerald-400",
-    bg: "bg-emerald-500/10",
-    bgSolid: "bg-emerald-500/20",
+    text: "text-[var(--ks-success-fg,#34d399)]",
+    bg: "bg-[var(--ks-success-bg,rgba(16,185,129,0.12))]",
+    bgSolid: "bg-[var(--ks-success,#10b981)]/20",
   },
   neutral: {
-    text: "text-zinc-400",
-    bg: "bg-zinc-800/60",
-    bgSolid: "bg-zinc-700/40",
+    text: "text-[var(--ks-fg-muted,#a1a1aa)]",
+    bg: "bg-[var(--ks-surface-raised,#1a1a1a)]",
+    bgSolid: "bg-[var(--ks-surface-sunken,#141414)]",
   },
   warning: {
-    text: "text-amber-400",
-    bg: "bg-amber-500/10",
-    bgSolid: "bg-amber-500/20",
+    text: "text-[var(--ks-warning-fg,#fbbf24)]",
+    bg: "bg-[var(--ks-warning-bg,rgba(245,158,11,0.12))]",
+    bgSolid: "bg-[var(--ks-warning,#f59e0b)]/20",
   },
   danger: {
-    text: "text-red-400",
-    bg: "bg-red-500/10",
-    bgSolid: "bg-red-500/20",
+    text: "text-[var(--ks-danger-fg,#f87171)]",
+    bg: "bg-[var(--ks-danger-bg,rgba(239,68,68,0.12))]",
+    bgSolid: "bg-[var(--ks-danger,#ef4444)]/20",
   },
   info: {
-    text: "text-blue-400",
-    bg: "bg-blue-500/10",
-    bgSolid: "bg-blue-500/20",
+    text: "text-[var(--ks-info-fg,#7dd3fc)]",
+    bg: "bg-[var(--ks-info-bg,rgba(56,189,248,0.12))]",
+    bgSolid: "bg-[var(--ks-info,#38bdf8)]/20",
   },
 };
 

package/src/components/base/TagPill.tsx

@@ -14,7 +14,7 @@ interface TagPillProps {
 export default function TagPill(props: TagPillProps): JSX.Element {
   return (
     <span
-      class={`inline-block rounded-full border border-zinc-700 bg-zinc-800/50 px-2 py-0.5 text-[10px] text-zinc-400 ${
+      class={`inline-block rounded-full border border-[var(--ks-border-strong,#3f3f46)] bg-[var(--ks-surface-raised,#1a1a1a)] px-2 py-0.5 text-[10px] text-[var(--ks-fg-muted,#a1a1aa)] ${
         props.class ?? ""
       }`}
     >