@kahitsan/ksui 0.33.0 → 0.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "description": "ksui is a standalone set of SolidJS UI components for KahitSan/Hilinga and any SolidJS app. Published to the public npm registry and consumed as a normal dependency. Ships source under a `solid` export condition so the consumer's vite-plugin-solid compiles it with only solid-js externalized; it depends on nothing but solid-js + lucide-solid and injects its own CSS.",
   "type": "module",
   "main": "./src/index.ts",
@@ -32,6 +32,9 @@
   ],
   "scripts": {
     "typecheck": "tsc --noEmit",
+    "check:tokens": "node scripts/check-token-fallbacks.mjs",
+    "check:coverage": "node scripts/check-token-fallbacks.mjs --coverage",
+    "check:palette": "node scripts/check-palette-drift.mjs",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:e2e": "playwright test",

package/src/components/base/AccountAvatar.tsx

@@ -117,7 +117,7 @@ export default function AccountAvatar(props: AccountAvatarProps) {
     <Dynamic
       component={getAccountIcon(props.account)}
       size={iconSize()}
-      class={props.iconClass ?? "text-zinc-300"}
+      class={props.iconClass ?? "text-[var(--ks-fg-muted,#a1a1aa)]"}
       style={iconStyle()}
     />
   );

package/src/components/base/AddAttachmentTile.tsx

@@ -53,7 +53,7 @@ export default function AddAttachmentTile(props: Props) {
           setOpen(!open());
         }}
         disabled={props.uploading}
-        class="w-24 h-24 flex flex-col items-center justify-center gap-1 border border-dashed border-zinc-700 bg-zinc-800/30 text-zinc-400 hover:bg-zinc-800/60 hover:border-amber-500/40 hover:text-amber-400 active:bg-zinc-800/80 transition-colors ks-hud-clip-top-left-bottom-right cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+        class="w-24 h-24 flex flex-col items-center justify-center gap-1 border border-dashed border-[var(--ks-border-strong,#3f3f46)] bg-[color-mix(in_srgb,var(--ks-surface-raised,#1a1a1a)_30%,transparent)] text-[var(--ks-fg-muted,#a1a1aa)] hover:bg-[color-mix(in_srgb,var(--ks-surface-raised,#1a1a1a)_60%,transparent)] hover:border-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_40%,transparent)] hover:text-[var(--ks-accent,#fbbf24)] active:bg-[color-mix(in_srgb,var(--ks-surface-raised,#1a1a1a)_80%,transparent)] transition-colors ks-hud-clip-top-left-bottom-right cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
         aria-label="Add attachment"
       >
         <Plus size={22} />
@@ -64,11 +64,11 @@ export default function AddAttachmentTile(props: Props) {
           <div
             ref={menu}
             style={{ top: `${pos().top}px`, left: `${pos().left}px` }}
-            class="fixed z-[60] min-w-[160px] rounded-lg border border-zinc-600 bg-zinc-800 shadow-2xl p-1 ks-hud-clip-top-left-bottom-right"
+            class="fixed z-[60] min-w-[160px] rounded-lg border border-[var(--ks-border-strong,#3f3f46)] bg-[var(--ks-surface-raised,#1a1a1a)] shadow-2xl p-1 ks-hud-clip-top-left-bottom-right"
           >
             <button
               type="button"
-              class="w-full flex items-center gap-2 px-3 py-2 text-sm text-zinc-200 hover:bg-zinc-800 rounded cursor-pointer"
+              class="w-full flex items-center gap-2 px-3 py-2 text-sm text-[var(--ks-fg,#ffffff)] hover:bg-[var(--ks-surface-sunken,#141414)] rounded cursor-pointer"
               onClick={() => {
                 setOpen(false);
                 props.onPickCamera();
@@ -79,7 +79,7 @@ export default function AddAttachmentTile(props: Props) {
             </button>
             <button
               type="button"
-              class="w-full flex items-center gap-2 px-3 py-2 text-sm text-zinc-200 hover:bg-zinc-800 rounded cursor-pointer"
+              class="w-full flex items-center gap-2 px-3 py-2 text-sm text-[var(--ks-fg,#ffffff)] hover:bg-[var(--ks-surface-sunken,#141414)] rounded cursor-pointer"
               onClick={() => {
                 setOpen(false);
                 props.onPickFile();

package/src/components/base/BadgeSelect.tsx

@@ -76,7 +76,7 @@ export default function BadgeSelect(props: BadgeSelectProps): JSX.Element {
     );
   });
 
-  const defaultBadge = () => "bg-zinc-800 text-zinc-400 border border-transparent";
+  const defaultBadge = () => "bg-[var(--ks-surface-raised,#1a1a1a)] text-[var(--ks-fg-muted,#a1a1aa)] border border-transparent";
   const badgeClass = () => props.badgeClass?.(props.value) ?? defaultBadge();
 
   const emptyStateMessage = () => {
@@ -164,7 +164,7 @@ export default function BadgeSelect(props: BadgeSelectProps): JSX.Element {
         aria-expanded={open()}
         disabled={props.disabled || busy()}
         onClick={() => !props.disabled && setOpen((o) => !o)}
-        class={`text-xs font-medium px-1.5 py-0.5 rounded cursor-pointer transition-colors hover:ring-1 hover:ring-amber-500/40 ${badgeClass()} ${
+        class={`text-xs font-medium px-1.5 py-0.5 rounded cursor-pointer transition-colors hover:ring-1 hover:ring-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_40%,transparent)] ${badgeClass()} ${
           props.disabled ? "cursor-not-allowed opacity-60" : ""
         }`}
         title={props.disabled ? "" : (props.title ?? "Click to change")}
@@ -176,25 +176,25 @@ export default function BadgeSelect(props: BadgeSelectProps): JSX.Element {
           <div
             ref={popupRef}
             role="listbox"
-            class="z-[100] rounded-md border border-zinc-700 bg-zinc-900/95 backdrop-blur shadow-xl overflow-hidden flex flex-col"
+            class="z-[100] rounded-md border border-[var(--ks-border-strong,#3f3f46)] bg-[color-mix(in_srgb,var(--ks-surface-raised,#1a1a1a)_95%,transparent)] backdrop-blur shadow-xl overflow-hidden flex flex-col"
             style={popupStyle()}
           >
             <Show when={showSearch()}>
-              <div class="px-2 py-1.5 border-b border-zinc-800">
+              <div class="px-2 py-1.5 border-b border-[var(--ks-border,rgba(39,39,42,0.5))]">
                 <input
                   ref={searchRef}
                   type="text"
                   value={query()}
                   onInput={(e) => setQuery(e.currentTarget.value)}
                   placeholder={props.searchPlaceholder ?? "Search…"}
-                  class="w-full px-2 py-1 text-xs bg-zinc-950 border border-zinc-800 rounded text-zinc-200 placeholder:text-zinc-600 focus:outline-none focus:border-amber-500/50"
+                  class="w-full px-2 py-1 text-xs bg-[var(--ks-surface-sunken,#141414)] border border-[var(--ks-border,rgba(39,39,42,0.5))] rounded text-[var(--ks-fg,#ffffff)] placeholder:text-[var(--ks-input-placeholder,#71717a)] focus:outline-none focus:border-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_50%,transparent)]"
                 />
               </div>
             </Show>
             <div class="flex-1 overflow-y-auto">
               <Show
                 when={!props.loading && filtered().length > 0}
-                fallback={<div class="px-3 py-2 text-xs text-zinc-500">{emptyStateMessage()}</div>}
+                fallback={<div class="px-3 py-2 text-xs text-[var(--ks-fg-subtle,#71717a)]">{emptyStateMessage()}</div>}
               >
                 <For each={filtered()}>
                   {(opt) => (
@@ -203,18 +203,18 @@ export default function BadgeSelect(props: BadgeSelectProps): JSX.Element {
                       role="option"
                       aria-selected={opt.value === props.value}
                       onClick={() => handleSelect(opt.value)}
-                      class={`w-full text-left px-3 py-2 text-xs hover:bg-amber-500/10 transition-colors flex items-center justify-between gap-2 ${
-                        opt.value === props.value ? "text-amber-400" : "text-zinc-200"
+                      class={`w-full text-left px-3 py-2 text-xs hover:bg-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_10%,transparent)] transition-colors flex items-center justify-between gap-2 ${
+                        opt.value === props.value ? "text-[var(--ks-accent,#fbbf24)]" : "text-[var(--ks-fg,#ffffff)]"
                       }`}
                     >
                       <span class="flex flex-col">
                         <span class="font-medium">{opt.label}</span>
                         <Show when={opt.description}>
-                          <span class="text-[10px] text-zinc-500">{opt.description}</span>
+                          <span class="text-[10px] text-[var(--ks-fg-subtle,#71717a)]">{opt.description}</span>
                         </Show>
                       </span>
                       <Show when={opt.value === props.value}>
-                        <span class="text-amber-400" aria-hidden="true">✓</span>
+                        <span class="text-[var(--ks-accent,#fbbf24)]" aria-hidden="true">✓</span>
                       </Show>
                     </button>
                   )}

package/src/components/base/Button.tsx

@@ -23,6 +23,7 @@ import {
   type Component,
 } from "solid-js";
 import { Dynamic } from "solid-js/web";
+import { injectCSS } from "../../utils/inject-css";
 
 const BUTTON_STYLE_ID = "ks-button-inline-style";
 const BUTTON_CSS = `
@@ -49,12 +50,7 @@ const BUTTON_CSS = `
 `;
 
 function ensureButtonStyle() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(BUTTON_STYLE_ID)) return;
-  const el = document.createElement("style");
-  el.id = BUTTON_STYLE_ID;
-  el.textContent = BUTTON_CSS;
-  document.head.appendChild(el);
+  injectCSS(BUTTON_STYLE_ID, BUTTON_CSS);
 }
 
 const styles: Record<string, string> = {
@@ -106,12 +102,24 @@ function cn(...classes: Array<string | undefined | null | false>): string {
   return classes.filter(Boolean).join(" ");
 }
 
+// Intent → design token: the button's fill/border/glow effects are all
+// derived from a single base token per intent. 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 — an
+// interpolated `${token.name}` would read as malformed to that gate even
+// though the runtime output is correct.
 interface IntentColors {
   ripple: string;
-  effect: string;
+  effectColor: string;
   effectBg: string;
   effectBorder: string;
+  effectBgHover: string;
+  effectBorderHover: string;
   effectGlow: string;
+  effectGlowHover: string;
+  effectPulseBgMid: string;
+  effectPulseGlow: string;
 }
 
 interface IntentConfig {
@@ -121,41 +129,64 @@ interface IntentConfig {
   colors: IntentColors;
 }
 
+const RIPPLE = "color-mix(in srgb, var(--ks-fg, #ffffff) 30%, transparent)";
+
 const buttonIntentConfig: Record<ButtonIntent, IntentConfig> = {
   primary: {
-    textColor: "text-amber-400",
-    background: "bg-amber-600/20 border-amber-600/60",
-    hover: "hover:bg-amber-600/30 hover:border-amber-500",
+    textColor: "text-[var(--ks-accent,#fbbf24)]",
+    background:
+      "bg-[color-mix(in_srgb,var(--ks-primary,#c9a961)_20%,transparent)] border-[color-mix(in_srgb,var(--ks-primary,#c9a961)_60%,transparent)]",
+    hover:
+      "hover:bg-[color-mix(in_srgb,var(--ks-primary-hover,#d4b876)_30%,transparent)] hover:border-[var(--ks-primary-hover,#d4b876)]",
     colors: {
-      ripple: "rgba(255, 255, 255, 0.3)",
-      effect: "rgba(201, 169, 97, 0.4)",
-      effectBg: "rgba(201, 169, 97, 0.1)",
-      effectBorder: "rgba(201, 169, 97, 0.4)",
-      effectGlow: "rgba(201, 169, 97, 0.3)",
+      ripple: RIPPLE,
+      effectColor: "color-mix(in srgb, var(--ks-primary, #c9a961) 40%, transparent)",
+      effectBg: "color-mix(in srgb, var(--ks-primary, #c9a961) 10%, transparent)",
+      effectBorder: "color-mix(in srgb, var(--ks-primary, #c9a961) 40%, transparent)",
+      effectBgHover: "color-mix(in srgb, var(--ks-primary, #c9a961) 20%, transparent)",
+      effectBorderHover: "color-mix(in srgb, var(--ks-primary, #c9a961) 60%, transparent)",
+      effectGlow: "color-mix(in srgb, var(--ks-primary, #c9a961) 30%, transparent)",
+      effectGlowHover: "color-mix(in srgb, var(--ks-primary, #c9a961) 50%, transparent)",
+      effectPulseBgMid: "color-mix(in srgb, var(--ks-primary, #c9a961) 20%, transparent)",
+      effectPulseGlow: "color-mix(in srgb, var(--ks-primary, #c9a961) 20%, transparent)",
     },
   },
   danger: {
-    textColor: "text-red-400",
-    background: "bg-red-600/20 border-red-600/60",
-    hover: "hover:bg-red-600/30 hover:border-red-500",
+    textColor: "text-[var(--ks-danger-fg,#f87171)]",
+    background:
+      "bg-[color-mix(in_srgb,var(--ks-danger,#ef4444)_20%,transparent)] border-[color-mix(in_srgb,var(--ks-danger,#ef4444)_60%,transparent)]",
+    hover:
+      "hover:bg-[color-mix(in_srgb,var(--ks-danger,#ef4444)_30%,transparent)] hover:border-[var(--ks-danger,#ef4444)]",
     colors: {
-      ripple: "rgba(255, 255, 255, 0.3)",
-      effect: "rgba(255, 68, 68, 0.4)",
-      effectBg: "rgba(255, 68, 68, 0.1)",
-      effectBorder: "rgba(255, 68, 68, 0.4)",
-      effectGlow: "rgba(255, 68, 68, 0.3)",
+      ripple: RIPPLE,
+      effectColor: "color-mix(in srgb, var(--ks-danger, #ef4444) 40%, transparent)",
+      effectBg: "color-mix(in srgb, var(--ks-danger, #ef4444) 10%, transparent)",
+      effectBorder: "color-mix(in srgb, var(--ks-danger, #ef4444) 40%, transparent)",
+      effectBgHover: "color-mix(in srgb, var(--ks-danger, #ef4444) 20%, transparent)",
+      effectBorderHover: "color-mix(in srgb, var(--ks-danger, #ef4444) 60%, transparent)",
+      effectGlow: "color-mix(in srgb, var(--ks-danger, #ef4444) 30%, transparent)",
+      effectGlowHover: "color-mix(in srgb, var(--ks-danger, #ef4444) 50%, transparent)",
+      effectPulseBgMid: "color-mix(in srgb, var(--ks-danger, #ef4444) 20%, transparent)",
+      effectPulseGlow: "color-mix(in srgb, var(--ks-danger, #ef4444) 20%, transparent)",
     },
   },
   secondary: {
-    textColor: "text-slate-400",
-    background: "bg-slate-600/20 border-slate-600/60",
-    hover: "hover:bg-slate-600/30 hover:border-slate-500",
+    textColor: "text-[var(--ks-fg-muted,#a1a1aa)]",
+    background:
+      "bg-[color-mix(in_srgb,var(--ks-border-strong,#3f3f46)_20%,transparent)] border-[color-mix(in_srgb,var(--ks-border-strong,#3f3f46)_60%,transparent)]",
+    hover:
+      "hover:bg-[color-mix(in_srgb,var(--ks-border-strong,#3f3f46)_30%,transparent)] hover:border-[var(--ks-fg-muted,#a1a1aa)]",
     colors: {
-      ripple: "rgba(255, 255, 255, 0.3)",
-      effect: "rgba(148, 163, 184, 0.4)",
-      effectBg: "rgba(148, 163, 184, 0.1)",
-      effectBorder: "rgba(148, 163, 184, 0.4)",
-      effectGlow: "rgba(148, 163, 184, 0.3)",
+      ripple: RIPPLE,
+      effectColor: "color-mix(in srgb, var(--ks-border-strong, #3f3f46) 40%, transparent)",
+      effectBg: "color-mix(in srgb, var(--ks-border-strong, #3f3f46) 10%, transparent)",
+      effectBorder: "color-mix(in srgb, var(--ks-border-strong, #3f3f46) 40%, transparent)",
+      effectBgHover: "color-mix(in srgb, var(--ks-border-strong, #3f3f46) 20%, transparent)",
+      effectBorderHover: "color-mix(in srgb, var(--ks-border-strong, #3f3f46) 60%, transparent)",
+      effectGlow: "color-mix(in srgb, var(--ks-border-strong, #3f3f46) 30%, transparent)",
+      effectGlowHover: "color-mix(in srgb, var(--ks-border-strong, #3f3f46) 50%, transparent)",
+      effectPulseBgMid: "color-mix(in srgb, var(--ks-border-strong, #3f3f46) 20%, transparent)",
+      effectPulseGlow: "color-mix(in srgb, var(--ks-border-strong, #3f3f46) 20%, transparent)",
     },
   },
 };
@@ -289,16 +320,16 @@ const Button = (props: ButtonProps): JSX.Element => {
   const customProperties = createMemo(() => {
     const colors = intentConfig().colors;
     return {
-      "--ks-effect-color": colors.effect,
+      "--ks-effect-color": colors.effectColor,
       "--ks-effect-bg": colors.effectBg,
       "--ks-effect-border": colors.effectBorder,
-      "--ks-effect-bg-hover": colors.effect.replace("0.1", "0.2"),
-      "--ks-effect-border-hover": colors.effect.replace("0.4", "0.6"),
+      "--ks-effect-bg-hover": colors.effectBgHover,
+      "--ks-effect-border-hover": colors.effectBorderHover,
       "--ks-effect-glow": colors.effectGlow,
-      "--ks-effect-glow-hover": colors.effectGlow.replace("0.3", "0.5"),
+      "--ks-effect-glow-hover": colors.effectGlowHover,
       "--ks-effect-pulse-bg": colors.effectBg,
-      "--ks-effect-pulse-bg-mid": colors.effect.replace("0.4", "0.2"),
-      "--ks-effect-pulse-glow": colors.effectGlow.replace("0.3", "0.2"),
+      "--ks-effect-pulse-bg-mid": colors.effectPulseBgMid,
+      "--ks-effect-pulse-glow": colors.effectPulseGlow,
       "--ks-effect-pulse-glow-mid": colors.effectGlow,
       "--ks-ripple-color": colors.ripple,
     } as JSX.CSSProperties;
@@ -416,7 +447,8 @@ const Button = (props: ButtonProps): JSX.Element => {
                 top: `${ripple.y - ripple.size / 2}px`,
                 width: `${ripple.size}px`,
                 height: `${ripple.size}px`,
-                "background-color": "var(--ks-ripple-color, rgba(255, 255, 255, 0.3))",
+                "background-color":
+                  "var(--ks-ripple-color, color-mix(in srgb, var(--ks-fg, #ffffff) 30%, transparent))",
               }}
             />
           )}

package/src/components/base/CameraCapture.tsx

@@ -75,19 +75,19 @@ export default function CameraCapture(props: Props) {
   return (
     <div
       data-testid="camera-capture-modal"
-      class="fixed inset-0 z-[60] flex items-center justify-center bg-black/80 backdrop-blur-sm p-4"
+      class="fixed inset-0 z-[60] flex items-center justify-center bg-[var(--ks-overlay,rgba(0,0,0,0.7))] backdrop-blur-sm p-4"
     >
-      <div class="card-bg rounded-xl border border-amber-500/30 overflow-hidden max-w-lg w-full shadow-2xl">
-        <div class="flex items-center justify-between p-3 border-b border-zinc-800/50">
+      <div class="card-bg rounded-xl border border-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_30%,transparent)] overflow-hidden max-w-lg w-full shadow-2xl">
+        <div class="flex items-center justify-between p-3 border-b border-[var(--ks-border,rgba(39,39,42,0.5))]">
           <span
-            class="text-sm text-zinc-200 font-medium flex items-center gap-2"
+            class="text-sm text-[var(--ks-fg,#ffffff)] font-medium flex items-center gap-2"
             data-testid="camera-capture-title"
           >
             <Camera size={16} /> Camera
           </span>
           <button
             onClick={() => props.onClose()}
-            class="text-zinc-500 hover:text-zinc-300 cursor-pointer"
+            class="text-[var(--ks-fg-subtle,#71717a)] hover:text-[var(--ks-fg-muted,#a1a1aa)] cursor-pointer"
             aria-label="Close camera"
           >
             <X size={18} />
@@ -96,7 +96,7 @@ export default function CameraCapture(props: Props) {
 
         <Show when={error()}>
           <div class="p-6 text-center">
-            <p class="text-sm text-red-400 mb-3">{error()}</p>
+            <p class="text-sm text-[var(--ks-danger-fg,#f87171)] mb-3">{error()}</p>
             <Button intent="secondary" variant="ghost" onClick={() => props.onClose()}>
               Close
             </Button>
@@ -104,7 +104,7 @@ export default function CameraCapture(props: Props) {
         </Show>
 
         <Show when={!error()}>
-          <div class="relative bg-black aspect-video">
+          <div class="relative bg-[var(--ks-surface,#0f0f0f)] aspect-video">
             <Show when={!captured()}>
               <video ref={videoRef} autoplay playsinline muted class="w-full h-full object-cover" />
             </Show>
@@ -131,7 +131,7 @@ export default function CameraCapture(props: Props) {
               <button
                 type="button"
                 onClick={takePhoto}
-                class="w-14 h-14 rounded-full border-4 border-zinc-400 bg-zinc-200 hover:bg-white active:scale-95 transition-all cursor-pointer"
+                class="w-14 h-14 rounded-full border-4 border-[var(--ks-border-strong,#3f3f46)] bg-[var(--ks-fg,#ffffff)] hover:bg-[var(--ks-fg,#ffffff)] active:scale-95 transition-all cursor-pointer"
                 title="Take photo"
                 aria-label="Take photo"
               />

package/src/components/base/ChartLegend.tsx

@@ -11,7 +11,7 @@ interface ChartLegendProps {
   label: string;
   /** Pre-formatted value string (e.g. a currency string). */
   value: string;
-  /** Optional Tailwind text color class for the value. Defaults to text-zinc-100. */
+  /** Optional Tailwind text color class for the value. Defaults to var(--ks-fg). */
   valueColor?: string;
 }
 
@@ -20,11 +20,11 @@ export default function ChartLegend(props: ChartLegendProps) {
     <div class="flex items-center gap-2">
       <span class={`w-2 h-2 rounded-sm ${props.dot}`} />
       <div class="flex flex-col">
-        <span class="text-[9px] uppercase tracking-widest text-zinc-500 font-medium leading-tight">
+        <span class="text-[9px] uppercase tracking-widest text-[var(--ks-fg-subtle,#71717a)] font-medium leading-tight">
           {props.label}
         </span>
         <span
-          class={`text-xs font-bold tabular-nums leading-tight ${props.valueColor || "text-zinc-100"}`}
+          class={`text-xs font-bold tabular-nums leading-tight ${props.valueColor || "text-[var(--ks-fg,#ffffff)]"}`}
         >
           {props.value}
         </span>

package/src/components/base/CopyButton.tsx

@@ -44,7 +44,7 @@ export default function CopyButton(props: CopyButtonProps): JSX.Element {
       type="button"
       onClick={handleClick}
       aria-label={props.ariaLabel ?? "Copy"}
-      class={`ks-interactive px-2 py-1.5 rounded bg-zinc-800 border border-zinc-700 text-zinc-300 hover:text-white text-xs flex items-center gap-1 ${props.class ?? ""}`}
+      class={`ks-interactive px-2 py-1.5 rounded bg-[var(--ks-surface-raised,#1a1a1a)] border border-[var(--ks-border-strong,#3f3f46)] text-[var(--ks-fg-muted,#a1a1aa)] hover:text-[var(--ks-fg,#ffffff)] text-xs flex items-center gap-1 ${props.class ?? ""}`}
     >
       {copied() ? <Check size={props.size ?? 12} /> : <Copy size={props.size ?? 12} />}
       {copied() ? (props.copiedLabel ?? "Copied") : (props.label ?? "Copy")}

package/src/components/base/DataTable.tsx

@@ -46,6 +46,7 @@ import ChevronDown from "lucide-solid/icons/chevron-down";
 import ChevronUp from "lucide-solid/icons/chevron-up";
 import ChevronsUpDown from "lucide-solid/icons/chevrons-up-down";
 import DatePicker from "./DatePicker";
+import { injectCSS } from "../../utils/inject-css";
 
 // ---------------------------------------------------------------------------
 // Injected CSS
@@ -58,37 +59,37 @@ const STYLE_ID = "ksui-datatable-style";
 // ---------------------------------------------------------------------------
 //
 // Every color in the injected stylesheet is driven by a `--ksui-dt-*` CSS
-// custom property; the fallback after each `var(...)` is the host
-// DataTable's exact value (resolved from its Tailwind classes — zinc/amber
-// dark theme). To retint, wrap the table in a container that sets the vars,
-// e.g. `<div style={{ "--ksui-dt-card-bg": "#000", "--ksui-dt-accent": "#0af" }}>`.
+// custom property; each one now falls through to a `--ks-*` design token
+// (THEME-SPEC §1.2) before the literal dark-theme fallback, so a themed host
+// restyles the table without any ksui code change. To retint further, wrap
+// the table in a container that sets the `--ksui-dt-*` vars directly — they
+// still win over the token layer per the old-name-stays-the-read-point rule.
 //
-// Full list of overridable vars (default = host value):
-//   --ksui-dt-card-bg      outer card background
-//                          (host `.card-bg`: linear-gradient(135deg,#0f0f0f,#1a1a1a))
-//   --ksui-dt-radius       outer card / control corner radius   (0.625rem)
-//   --ksui-dt-border       card / header / footer / control border (zinc-800/50, rgba(39,39,42,0.5))
-//   --ksui-dt-row-border   row divider + expansion-row top border (zinc-800/30, rgba(39,39,42,0.3))
-//   --ksui-dt-control-bg   filter button / menu / select / search / show-more bg (zinc-900, #18181b)
+// Full list of overridable vars (role -> token):
+//   --ksui-dt-card-bg      outer card background -> --ks-surface / --ks-surface-raised gradient
+//   --ksui-dt-radius       outer card / control corner radius (0.625rem, not a color)
+//   --ksui-dt-border       card / header / footer / control border -> --ks-border
+//   --ksui-dt-row-border   row divider + expansion-row top border -> --ks-border-subtle
+//   --ksui-dt-control-bg   filter button / menu / select / search / show-more bg -> --ks-input-bg
 //                          (the date filter is the ksui DatePicker; it reads the same vars)
-//   --ksui-dt-fg           primary text: row/search text (zinc-200, #e4e4e7)
-//   --ksui-dt-fg-strong    hover-to-full-contrast text on controls/pager (white, #ffffff)
-//   --ksui-dt-text         secondary text: filter btn / select / pager nums+arrows (zinc-400, #a1a1aa)
-//   --ksui-dt-text-strong  show-more label + sortable-header hover (zinc-300, #d4d4d8)
-//   --ksui-dt-muted        header th / search icon+placeholder / empty / info text (zinc-500, #71717a)
-//   --ksui-dt-faint        sort caret / per-row date separator / pager ellipsis (zinc-600, #52525b)
-//   --ksui-dt-row-hover    row hover + pager hover bg (zinc-800/50, rgba(39,39,42,0.5))
-//   --ksui-dt-row-active   row :active bg (zinc-800/70, rgba(39,39,42,0.7))
-//   --ksui-dt-expansion-bg per-row expansion panel bg (zinc-950/40, rgba(9,9,11,0.4))
-//   --ksui-dt-skeleton     loading skeleton shimmer bg (zinc-800/50, rgba(39,39,42,0.5))
-//   --ksui-dt-accent       active accent text: active pager num / show-more hover (amber-400, #fbbf24)
-//   --ksui-dt-accent-bg    active pager num bg (amber-600/20, rgba(217,119,6,0.2))
-//   --ksui-dt-accent-border focus/hover accent border: search focus, show-more hover (amber-500/40, rgba(245,158,11,0.4))
-//   --ksui-dt-good         positive-status badge text, e.g. "Active" (emerald-400, #34d399)
-//   --ksui-dt-good-bg      positive-status badge bg (emerald-400/14, rgba(52,211,153,0.14))
-//   --ksui-dt-danger       negative-status badge text, e.g. "Overdue"/"Expired" (red-400, #f87171)
-//   --ksui-dt-danger-bg    negative-status badge bg (red-400/14, rgba(248,113,113,0.14))
-//   --ksui-dt-thead-bg     header-row tint, layered over card-bg to set it apart from data rows (white/3%, rgba(255,255,255,0.03))
+//   --ksui-dt-fg           primary text: row/search text -> --ks-fg
+//   --ksui-dt-fg-strong    hover-to-full-contrast text on controls/pager -> --ks-fg
+//   --ksui-dt-text         secondary text: filter btn / select / pager nums+arrows -> --ks-fg-muted
+//   --ksui-dt-text-strong  show-more label + sortable-header hover -> --ks-fg
+//   --ksui-dt-muted        header th / search icon+placeholder / empty / info text -> --ks-fg-subtle
+//   --ksui-dt-faint        sort caret / per-row date separator / pager ellipsis -> --ks-fg-subtle
+//   --ksui-dt-row-hover    row hover + pager hover bg -> --ks-border
+//   --ksui-dt-row-active   row :active bg -> --ks-border-strong (color-mix)
+//   --ksui-dt-expansion-bg per-row expansion panel bg -> --ks-bg (color-mix)
+//   --ksui-dt-skeleton     loading skeleton shimmer bg -> --ks-border
+//   --ksui-dt-accent       active accent text: active pager num / show-more hover -> --ks-accent
+//   --ksui-dt-accent-bg    active pager num bg -> --ks-accent (color-mix)
+//   --ksui-dt-accent-border focus/hover accent border: search focus, show-more hover -> --ks-focus-ring (color-mix)
+//   --ksui-dt-good         positive-status badge text, e.g. "Active" -> --ks-success-fg
+//   --ksui-dt-good-bg      positive-status badge bg -> --ks-success-fg (color-mix)
+//   --ksui-dt-danger       negative-status badge text, e.g. "Overdue"/"Expired" -> --ks-danger-fg
+//   --ksui-dt-danger-bg    negative-status badge bg -> --ks-danger-fg (color-mix)
+//   --ksui-dt-thead-bg     header-row tint, layered over card-bg to set it apart from data rows -> --ks-fg (color-mix)
 //
 // `.ksui-datatable-td-num` / `.ksui-datatable-th-num` (mono, tabular-nums,
 // right-aligned, nowrap) and `.ksui-datatable-badge` (+ `-ok` / `-warn` /
@@ -97,72 +98,67 @@ const STYLE_ID = "ksui-datatable-style";
 // infers column semantics from data.
 //
 const DATATABLE_CSS = `
-.ksui-datatable{background:var(--ksui-dt-card-bg,linear-gradient(135deg,#0f0f0f 0%,#1a1a1a 100%));border:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));border-radius:var(--ksui-dt-radius,0.625rem);color:var(--ksui-dt-fg,#e4e4e7);box-shadow:0 1px 2px rgba(0,0,0,0.3),0 8px 20px -10px rgba(0,0,0,0.5);}
-.ksui-datatable-header{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem;border-bottom:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));padding:0.75rem 0.875rem;}
+.ksui-datatable{background:var(--ksui-dt-card-bg,linear-gradient(135deg,var(--ks-surface,#0f0f0f) 0%,var(--ks-surface-raised,#1a1a1a) 100%));border:1px solid var(--ksui-dt-border,var(--ks-border,rgba(39,39,42,0.5)));border-radius:var(--ksui-dt-radius,0.625rem);color:var(--ksui-dt-fg,var(--ks-fg,#ffffff));box-shadow:0 1px 2px rgba(0,0,0,0.3),0 8px 20px -10px rgba(0,0,0,0.5);}
+.ksui-datatable-header{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem;border-bottom:1px solid var(--ksui-dt-border,var(--ks-border,rgba(39,39,42,0.5)));padding:0.75rem 0.875rem;}
 .ksui-datatable-filters-inline{display:none;flex:1 1 0%;}
 .ksui-datatable-filters-mobile{display:block;flex:1 1 0%;}
 @media (min-width:768px){.ksui-datatable-filters-inline{display:block;}.ksui-datatable-filters-mobile{display:none;}}
 .ksui-datatable-spacer{flex:1 1 0%;}
 .ksui-datatable-controls{display:flex;align-items:center;gap:0.5rem;}
 .ksui-datatable-filter-toggle-wrap{position:relative;}
-.ksui-datatable-filter-toggle{display:inline-flex;cursor:pointer;align-items:center;gap:0.5rem;border-radius:0.5rem;border:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));background:var(--ksui-dt-control-bg,#18181b);padding:0.5rem 0.75rem;font-size:0.75rem;line-height:1rem;color:var(--ksui-dt-text,#a1a1aa);transition:color 0.15s ease;}
-.ksui-datatable-filter-toggle:hover{color:var(--ksui-dt-fg-strong,#ffffff);}
-.ksui-datatable-filter-menu{position:absolute;left:0;top:100%;z-index:50;margin-top:0.5rem;border-radius:0.5rem;border:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));background:var(--ksui-dt-control-bg,#18181b);padding:0.75rem;box-shadow:0 20px 25px -5px rgba(0,0,0,0.4),0 8px 10px -6px rgba(0,0,0,0.4);}
-.ksui-datatable-select{border-radius:0.375rem;border:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));background:var(--ksui-dt-control-bg,#18181b);padding:0.5rem;font-size:0.75rem;line-height:1rem;color:var(--ksui-dt-text,#a1a1aa);}
+.ksui-datatable-filter-toggle{display:inline-flex;cursor:pointer;align-items:center;gap:0.5rem;border-radius:0.5rem;border:1px solid var(--ksui-dt-border,var(--ks-border,rgba(39,39,42,0.5)));background:var(--ksui-dt-control-bg,var(--ks-input-bg,#18181b));padding:0.5rem 0.75rem;font-size:0.75rem;line-height:1rem;color:var(--ksui-dt-text,var(--ks-fg-muted,#a1a1aa));transition:color 0.15s ease;}
+.ksui-datatable-filter-toggle:hover{color:var(--ksui-dt-fg-strong,var(--ks-fg,#ffffff));}
+.ksui-datatable-filter-menu{position:absolute;left:0;top:100%;z-index:50;margin-top:0.5rem;border-radius:0.5rem;border:1px solid var(--ksui-dt-border,var(--ks-border,rgba(39,39,42,0.5)));background:var(--ksui-dt-control-bg,var(--ks-input-bg,#18181b));padding:0.75rem;box-shadow:0 20px 25px -5px rgba(0,0,0,0.4),0 8px 10px -6px rgba(0,0,0,0.4);}
+.ksui-datatable-select{border-radius:0.375rem;border:1px solid var(--ksui-dt-border,var(--ks-border,rgba(39,39,42,0.5)));background:var(--ksui-dt-control-bg,var(--ks-input-bg,#18181b));padding:0.5rem;font-size:0.75rem;line-height:1rem;color:var(--ksui-dt-text,var(--ks-fg-muted,#a1a1aa));}
 .ksui-datatable-search-wrap{position:relative;}
-.ksui-datatable-search-icon{position:absolute;left:0.75rem;top:50%;transform:translateY(-50%);color:var(--ksui-dt-muted,#71717a);pointer-events:none;}
-.ksui-datatable-search-input{width:100%;border-radius:0.5rem;border:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));background:var(--ksui-dt-control-bg,#18181b);padding:0.5rem 1rem 0.5rem 2.25rem;font-size:0.875rem;line-height:1.25rem;color:var(--ksui-dt-fg,#e4e4e7);outline:none;transition:border-color 0.15s ease;}
-.ksui-datatable-search-input::placeholder{color:var(--ksui-dt-muted,#71717a);}
-.ksui-datatable-search-input:focus{border-color:var(--ksui-dt-accent-border,rgba(245,158,11,0.4));}
+.ksui-datatable-search-icon{position:absolute;left:0.75rem;top:50%;transform:translateY(-50%);color:var(--ksui-dt-muted,var(--ks-fg-subtle,#71717a));pointer-events:none;}
+.ksui-datatable-search-input{width:100%;border-radius:0.5rem;border:1px solid var(--ksui-dt-border,var(--ks-border,rgba(39,39,42,0.5)));background:var(--ksui-dt-control-bg,var(--ks-input-bg,#18181b));padding:0.5rem 1rem 0.5rem 2.25rem;font-size:0.875rem;line-height:1.25rem;color:var(--ksui-dt-fg,var(--ks-fg,#ffffff));outline:none;transition:border-color 0.15s ease;}
+.ksui-datatable-search-input::placeholder{color:var(--ksui-dt-muted,var(--ks-fg-subtle,#71717a));}
+.ksui-datatable-search-input:focus{border-color:var(--ksui-dt-accent-border,color-mix(in srgb, var(--ks-focus-ring, #c9a961) 40%, transparent));}
 @media (min-width:640px){.ksui-datatable-search-input{width:18rem;}}
 .ksui-datatable-scroll{overflow-x:auto;transition:opacity 0.15s ease;}
 .ksui-datatable-table{width:100%;text-align:left;font-size:0.78125rem;line-height:1.3;border-collapse:collapse;}
-.ksui-datatable-thead{border-bottom:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));background:var(--ksui-dt-thead-bg,rgba(255,255,255,0.03));font-family:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;font-size:0.65625rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--ksui-dt-muted,#71717a);}
-.ksui-datatable-th{padding:0.5625rem 0.875rem;background:var(--ksui-dt-thead-bg,rgba(255,255,255,0.03));white-space:nowrap;}
+.ksui-datatable-thead{border-bottom:1px solid var(--ksui-dt-border,var(--ks-border,rgba(39,39,42,0.5)));background:var(--ksui-dt-thead-bg,color-mix(in srgb, var(--ks-fg, #ffffff) 3%, transparent));font-family:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;font-size:0.65625rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--ksui-dt-muted,var(--ks-fg-subtle,#71717a));}
+.ksui-datatable-th{padding:0.5625rem 0.875rem;background:var(--ksui-dt-thead-bg,color-mix(in srgb, var(--ks-fg, #ffffff) 3%, transparent));white-space:nowrap;}
 .ksui-datatable-th-num{text-align:right;}
 .ksui-datatable-th-sortable{cursor:pointer;transition:color 0.15s ease;}
-.ksui-datatable-th-sortable:hover{color:var(--ksui-dt-text-strong,#d4d4d8);}
+.ksui-datatable-th-sortable:hover{color:var(--ksui-dt-text-strong,var(--ks-fg,#ffffff));}
 .ksui-datatable-th-inner{display:inline-flex;align-items:center;}
-.ksui-datatable-sort-icon{margin-left:0.25rem;display:inline-flex;color:var(--ksui-dt-faint,#52525b);}
-.ksui-datatable-row{border-top:1px solid var(--ksui-dt-row-border,rgba(39,39,42,0.3));transition:background-color 0.15s ease;}
-.ksui-datatable-row:hover{background-color:var(--ksui-dt-row-hover,rgba(39,39,42,0.5));}
+.ksui-datatable-sort-icon{margin-left:0.25rem;display:inline-flex;color:var(--ksui-dt-faint,var(--ks-fg-subtle,#71717a));}
+.ksui-datatable-row{border-top:1px solid var(--ksui-dt-row-border,var(--ks-border-subtle,rgba(39,39,42,0.25)));transition:background-color 0.15s ease;}
+.ksui-datatable-row:hover{background-color:var(--ksui-dt-row-hover,var(--ks-border,rgba(39,39,42,0.5)));}
 .ksui-datatable-row-clickable{cursor:pointer;}
-.ksui-datatable-row-clickable:active{background-color:var(--ksui-dt-row-active,rgba(39,39,42,0.7));}
+.ksui-datatable-row-clickable:active{background-color:var(--ksui-dt-row-active,color-mix(in srgb, var(--ks-border-strong, #3f3f46) 70%, transparent));}
 .ksui-datatable-td{padding:0.5rem 0.875rem;vertical-align:middle;white-space:nowrap;}
-.ksui-datatable-td-num{font-family:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:var(--ksui-dt-text-strong,#d4d4d8);}
-.ksui-datatable-code{display:block;font-family:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;font-size:0.71875rem;color:var(--ksui-dt-fg,#e4e4e7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch;}
-.ksui-datatable-badge{display:inline-block;font-family:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;font-size:0.625rem;padding:0.125rem 0.4375rem;border-radius:0.3125rem;letter-spacing:0.02em;background:var(--ksui-dt-control-bg,#18181b);color:var(--ksui-dt-text,#a1a1aa);}
-.ksui-datatable-badge-ok{background:var(--ksui-dt-good-bg,rgba(52,211,153,0.14));color:var(--ksui-dt-good,#34d399);}
-.ksui-datatable-badge-warn{background:var(--ksui-dt-accent-bg,rgba(217,119,6,0.2));color:var(--ksui-dt-accent,#fbbf24);}
-.ksui-datatable-badge-danger{background:var(--ksui-dt-danger-bg,rgba(248,113,113,0.14));color:var(--ksui-dt-danger,#f87171);}
-.ksui-datatable-expansion-row{border-top:1px solid var(--ksui-dt-row-border,rgba(39,39,42,0.3));background-color:var(--ksui-dt-expansion-bg,rgba(9,9,11,0.4));}
+.ksui-datatable-td-num{font-family:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:var(--ksui-dt-text-strong,var(--ks-fg,#ffffff));}
+.ksui-datatable-code{display:block;font-family:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;font-size:0.71875rem;color:var(--ksui-dt-fg,var(--ks-fg,#ffffff));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch;}
+.ksui-datatable-badge{display:inline-block;font-family:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;font-size:0.625rem;padding:0.125rem 0.4375rem;border-radius:0.3125rem;letter-spacing:0.02em;background:var(--ksui-dt-control-bg,var(--ks-input-bg,#18181b));color:var(--ksui-dt-text,var(--ks-fg-muted,#a1a1aa));}
+.ksui-datatable-badge-ok{background:var(--ksui-dt-good-bg,color-mix(in srgb, var(--ks-success-fg, #34d399) 14%, transparent));color:var(--ksui-dt-good,var(--ks-success-fg,#34d399));}
+.ksui-datatable-badge-warn{background:var(--ksui-dt-accent-bg,color-mix(in srgb, var(--ks-accent, #fbbf24) 20%, transparent));color:var(--ksui-dt-accent,var(--ks-accent,#fbbf24));}
+.ksui-datatable-badge-danger{background:var(--ksui-dt-danger-bg,color-mix(in srgb, var(--ks-danger-fg, #f87171) 14%, transparent));color:var(--ksui-dt-danger,var(--ks-danger-fg,#f87171));}
+.ksui-datatable-expansion-row{border-top:1px solid var(--ksui-dt-row-border,var(--ks-border-subtle,rgba(39,39,42,0.25)));background-color:var(--ksui-dt-expansion-bg,color-mix(in srgb, var(--ks-bg, #0a0a0a) 40%, transparent));}
 .ksui-datatable-expansion-td{padding:0;}
-.ksui-datatable-skeleton{height:1rem;width:100%;border-radius:0.25rem;background:var(--ksui-dt-skeleton,rgba(39,39,42,0.5));animation:ksuiDatatablePulse 1.5s cubic-bezier(0.4,0,0.6,1) infinite;}
+.ksui-datatable-skeleton{height:1rem;width:100%;border-radius:0.25rem;background:var(--ksui-dt-skeleton,var(--ks-border,rgba(39,39,42,0.5)));animation:ksuiDatatablePulse 1.5s cubic-bezier(0.4,0,0.6,1) infinite;}
 @keyframes ksuiDatatablePulse{0%,100%{opacity:1;}50%{opacity:0.5;}}
-.ksui-datatable-empty{padding:3rem 1rem;text-align:center;color:var(--ksui-dt-muted,#71717a);}
-.ksui-datatable-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));padding:0.625rem 0.875rem;}
-.ksui-datatable-info{font-size:0.75rem;color:var(--ksui-dt-muted,#71717a);}
-.ksui-datatable-showmore{border-radius:0.5rem;border:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));background:var(--ksui-dt-control-bg,#18181b);padding:0.5rem 1rem;font-size:0.75rem;font-weight:500;color:var(--ksui-dt-text-strong,#d4d4d8);transition:border-color 0.15s ease,color 0.15s ease;cursor:pointer;}
-.ksui-datatable-showmore:hover:not(:disabled){border-color:var(--ksui-dt-accent-border,rgba(245,158,11,0.4));color:var(--ksui-dt-accent,#fbbf24);}
+.ksui-datatable-empty{padding:3rem 1rem;text-align:center;color:var(--ksui-dt-muted,var(--ks-fg-subtle,#71717a));}
+.ksui-datatable-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--ksui-dt-border,var(--ks-border,rgba(39,39,42,0.5)));padding:0.625rem 0.875rem;}
+.ksui-datatable-info{font-size:0.75rem;color:var(--ksui-dt-muted,var(--ks-fg-subtle,#71717a));}
+.ksui-datatable-showmore{border-radius:0.5rem;border:1px solid var(--ksui-dt-border,var(--ks-border,rgba(39,39,42,0.5)));background:var(--ksui-dt-control-bg,var(--ks-input-bg,#18181b));padding:0.5rem 1rem;font-size:0.75rem;font-weight:500;color:var(--ksui-dt-text-strong,var(--ks-fg,#ffffff));transition:border-color 0.15s ease,color 0.15s ease;cursor:pointer;}
+.ksui-datatable-showmore:hover:not(:disabled){border-color:var(--ksui-dt-accent-border,color-mix(in srgb, var(--ks-focus-ring, #c9a961) 40%, transparent));color:var(--ksui-dt-accent,var(--ks-accent,#fbbf24));}
 .ksui-datatable-showmore:disabled{cursor:not-allowed;opacity:0.5;}
 .ksui-datatable-pager{display:flex;align-items:center;gap:0.25rem;}
-.ksui-datatable-pager-arrow{border-radius:0.25rem;padding:0.375rem;color:var(--ksui-dt-text,#a1a1aa);transition:background-color 0.15s ease,color 0.15s ease;background:transparent;border:0;cursor:pointer;display:inline-flex;}
-.ksui-datatable-pager-arrow:hover:not(:disabled){background-color:var(--ksui-dt-row-hover,rgba(39,39,42,0.5));color:var(--ksui-dt-fg-strong,#ffffff);}
+.ksui-datatable-pager-arrow{border-radius:0.25rem;padding:0.375rem;color:var(--ksui-dt-text,var(--ks-fg-muted,#a1a1aa));transition:background-color 0.15s ease,color 0.15s ease;background:transparent;border:0;cursor:pointer;display:inline-flex;}
+.ksui-datatable-pager-arrow:hover:not(:disabled){background-color:var(--ksui-dt-row-hover,var(--ks-border,rgba(39,39,42,0.5)));color:var(--ksui-dt-fg-strong,var(--ks-fg,#ffffff));}
 .ksui-datatable-pager-arrow:disabled{cursor:not-allowed;opacity:0.3;}
-.ksui-datatable-pager-num{border-radius:0.25rem;padding:0.25rem 0.625rem;font-size:0.75rem;color:var(--ksui-dt-text,#a1a1aa);transition:background-color 0.15s ease,color 0.15s ease;background:transparent;border:0;cursor:pointer;}
-.ksui-datatable-pager-num:hover{background-color:var(--ksui-dt-row-hover,rgba(39,39,42,0.5));color:var(--ksui-dt-fg-strong,#ffffff);}
-.ksui-datatable-pager-num-active{background-color:var(--ksui-dt-accent-bg,rgba(217,119,6,0.2));font-weight:500;color:var(--ksui-dt-accent,#fbbf24);}
-.ksui-datatable-pager-num-active:hover{background-color:var(--ksui-dt-accent-bg,rgba(217,119,6,0.2));color:var(--ksui-dt-accent,#fbbf24);}
-.ksui-datatable-pager-ellipsis{padding:0 0.375rem;font-size:0.75rem;color:var(--ksui-dt-faint,#52525b);}
+.ksui-datatable-pager-num{border-radius:0.25rem;padding:0.25rem 0.625rem;font-size:0.75rem;color:var(--ksui-dt-text,var(--ks-fg-muted,#a1a1aa));transition:background-color 0.15s ease,color 0.15s ease;background:transparent;border:0;cursor:pointer;}
+.ksui-datatable-pager-num:hover{background-color:var(--ksui-dt-row-hover,var(--ks-border,rgba(39,39,42,0.5)));color:var(--ksui-dt-fg-strong,var(--ks-fg,#ffffff));}
+.ksui-datatable-pager-num-active{background-color:var(--ksui-dt-accent-bg,color-mix(in srgb, var(--ks-accent, #fbbf24) 20%, transparent));font-weight:500;color:var(--ksui-dt-accent,var(--ks-accent,#fbbf24));}
+.ksui-datatable-pager-num-active:hover{background-color:var(--ksui-dt-accent-bg,color-mix(in srgb, var(--ks-accent, #fbbf24) 20%, transparent));color:var(--ksui-dt-accent,var(--ks-accent,#fbbf24));}
+.ksui-datatable-pager-ellipsis{padding:0 0.375rem;font-size:0.75rem;color:var(--ksui-dt-faint,var(--ks-fg-subtle,#71717a));}
 `;
 
 function ensureDataTableStyle(): void {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID)) return;
-  const el = document.createElement("style");
-  el.id = STYLE_ID;
-  el.textContent = DATATABLE_CSS;
-  document.head.appendChild(el);
+  injectCSS(STYLE_ID, DATATABLE_CSS);
 }
 
 // ---------------------------------------------------------------------------