@kahitsan/ksui 0.32.0 → 0.34.0

package/src/components/base/ThemeToggle.tsx

@@ -13,33 +13,25 @@ import type { JSX } from "solid-js";
 import { splitProps } from "solid-js";
 import Sun from "lucide-solid/icons/sun";
 import Moon from "lucide-solid/icons/moon";
+import { injectCSS } from "../../utils/inject-css";
 
 const THEME_TOGGLE_STYLE_ID = "ks-theme-toggle-inline-style";
 const THEME_TOGGLE_CSS = `
 .ks-theme-toggle { background: none; border: none; padding: 2px; cursor: pointer; display: flex; align-items: center; }
-.ks-theme-toggle-track { position: relative; display: flex; align-items: center; justify-content: space-between; width: 52px; height: 28px; border-radius: 14px; background-color: #3f3f46; padding: 0 2px; transition: background-color 0.3s ease; }
-.ks-theme-toggle-track[data-active] { background-color: #d3c5ac; }
+.ks-theme-toggle-track { position: relative; display: flex; align-items: center; justify-content: space-between; width: 52px; height: 28px; border-radius: 14px; background-color: var(--ks-border-strong, #3f3f46); padding: 0 2px; transition: background-color 0.3s ease; }
+.ks-theme-toggle-track[data-active] { background-color: var(--ks-primary-hover, #d4b876); }
 .ks-theme-toggle-icon { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; pointer-events: none; transition: color 0.3s ease; }
-.ks-theme-toggle-track::after { content: ''; position: absolute; left: 2px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background-color: #52525b; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease, background-color 0.3s ease; z-index: 1; }
-.ks-theme-toggle-track[data-active]::after { transform: translateX(24px); background-color: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
-.ks-theme-toggle-icon-moon { color: #fbbf24; }
-.ks-theme-toggle-icon-sun { color: rgba(255, 255, 255, 0.3); }
-.ks-theme-toggle-track[data-active] .ks-theme-toggle-icon-moon { color: rgba(120, 90, 0, 0.3); }
-.ks-theme-toggle-track[data-active] .ks-theme-toggle-icon-sun { color: #785a00; }
-.ks-theme-toggle:hover .ks-theme-toggle-track { background-color: #52525b; }
-.ks-theme-toggle:hover .ks-theme-toggle-track[data-active] { background-color: #c9b99a; }
+.ks-theme-toggle-track::after { content: ''; position: absolute; left: 2px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background-color: var(--ks-border-strong, #3f3f46); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease, background-color 0.3s ease; z-index: 1; }
+.ks-theme-toggle-track[data-active]::after { transform: translateX(24px); background-color: var(--ks-fg, #ffffff); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
+.ks-theme-toggle-icon-moon { color: var(--ks-accent, #fbbf24); }
+.ks-theme-toggle-icon-sun { color: color-mix(in srgb, var(--ks-fg, #ffffff) 30%, transparent); }
+.ks-theme-toggle-track[data-active] .ks-theme-toggle-icon-moon { color: color-mix(in srgb, var(--ks-accent, #fbbf24) 30%, transparent); }
+.ks-theme-toggle-track[data-active] .ks-theme-toggle-icon-sun { color: var(--ks-accent, #fbbf24); }
+.ks-theme-toggle:hover .ks-theme-toggle-track { background-color: var(--ks-border-strong, #3f3f46); }
+.ks-theme-toggle:hover .ks-theme-toggle-track[data-active] { background-color: var(--ks-primary-hover, #d4b876); }
 @media (prefers-reduced-motion: reduce) { .ks-theme-toggle-track, .ks-theme-toggle-track::after, .ks-theme-toggle-icon { transition: none; } }
 `;
 
-function ensureThemeToggleStyle(): void {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(THEME_TOGGLE_STYLE_ID)) return;
-  const el = document.createElement("style");
-  el.id = THEME_TOGGLE_STYLE_ID;
-  el.textContent = THEME_TOGGLE_CSS;
-  document.head.appendChild(el);
-}
-
 export type ThemeToggleValue = "dark" | "light";
 
 export interface ThemeToggleProps
@@ -69,7 +61,7 @@ const defaultAriaLabel = (next: ThemeToggleValue): string => `Switch to ${next}
  * next value through `onToggle`. The parent owns the theme source of truth.
  */
 export default function ThemeToggle(props: ThemeToggleProps): JSX.Element {
-  ensureThemeToggleStyle();
+  injectCSS(THEME_TOGGLE_STYLE_ID, THEME_TOGGLE_CSS);
 
   const [local, rest] = splitProps(props, [
     "value",

package/src/components/base/Tooltip.tsx

@@ -46,7 +46,7 @@ interface TooltipProps {
 //     prefers describedby on the focusable trigger itself; since the
 //     trigger is `props.children` (any element) and Solid has no
 //     cloneElement, the trigger-level wiring lives with the caller in
-//     specific cases that need it. See #627 for the broader sweep that
+//     specific cases that need it. See issue 627 for the broader sweep that
 //     introduces a directive-based wiring API.
 export default function Tooltip(props: TooltipProps): JSX.Element {
   const tooltipId = props.id ?? createUniqueId();
@@ -62,7 +62,7 @@ export default function Tooltip(props: TooltipProps): JSX.Element {
       <span
         role="tooltip"
         id={tooltipId}
-        class={`pointer-events-none absolute px-2 py-1 rounded-md bg-zinc-900 border border-zinc-700/80 text-[11px] text-zinc-100 opacity-0 group-hover/tt:opacity-100 group-focus-within/tt:opacity-100 transition-opacity duration-150 delay-150 z-50 shadow-lg ${
+        class={`pointer-events-none absolute px-2 py-1 rounded-md bg-[var(--ks-overlay-surface,#18181b)] border border-[color-mix(in_srgb,var(--ks-border-strong,#3f3f46)_80%,transparent)] text-[11px] text-[var(--ks-fg,#ffffff)] opacity-0 group-hover/tt:opacity-100 group-focus-within/tt:opacity-100 transition-opacity duration-150 delay-150 z-50 shadow-lg ${
           align() === "start" ? "left-0" : "left-1/2 -translate-x-1/2"
         } ${props.wrap ? "whitespace-normal w-max max-w-[260px]" : "whitespace-nowrap"} ${
           placement() === "bottom" ? "top-full mt-1" : "bottom-full mb-1"

package/src/components/composite/AccountRadioPicker.tsx

@@ -73,7 +73,7 @@ export default function AccountRadioPicker(props: AccountRadioPickerProps) {
           onInput={(e) => props.onChange(e.currentTarget.value)}
           aria-label={props.ariaLabel}
           placeholder="Account ID (financial-accounts module unavailable)"
-          class="w-full bg-zinc-900/60 border border-zinc-800/60 px-3 py-3 text-sm text-zinc-200 ks-hud-clip-button focus:outline-none focus:border-amber-500/50"
+          class="w-full bg-[color-mix(in_srgb,var(--ks-surface,#0f0f0f)_60%,transparent)] border border-[color-mix(in_srgb,var(--ks-border,rgba(39,39,42,0.5))_60%,transparent)] px-3 py-3 text-sm text-[var(--ks-fg,#ffffff)] ks-hud-clip-button focus:outline-none focus:border-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_50%,transparent)]"
         />
       }
     >
@@ -98,16 +98,20 @@ export default function AccountRadioPicker(props: AccountRadioPickerProps) {
                 onClick={() => props.onChange(a.id.toString())}
                 class="group flex items-center gap-2 rounded-lg border px-3 py-3 text-left text-sm transition-colors cursor-pointer ks-hud-clip-top-left-bottom-right"
                 classList={{
-                  "border-amber-500/50 bg-amber-600/10 text-amber-300":
+                  "border-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_50%,transparent)] bg-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_10%,transparent)] text-[var(--ks-accent-hover,#fcd34d)]":
                     selected(),
-                  "border-zinc-700 bg-zinc-800/50 text-zinc-300 hover:border-zinc-600 hover:bg-zinc-800":
+                  "border-[var(--ks-border-strong,#3f3f46)] bg-[color-mix(in_srgb,var(--ks-surface-raised,#1a1a1a)_50%,transparent)] text-[var(--ks-fg-muted,#a1a1aa)] hover:border-[var(--ks-border-strong,#3f3f46)] hover:bg-[var(--ks-surface-raised,#1a1a1a)]":
                     !selected(),
                 }}
               >
                 <AccountAvatar
                   account={a}
                   size={24}
-                  iconClass={selected() ? "text-amber-300" : "text-zinc-400"}
+                  iconClass={
+                    selected()
+                      ? "text-[var(--ks-accent-hover,#fcd34d)]"
+                      : "text-[var(--ks-fg-muted,#a1a1aa)]"
+                  }
                 />
                 <span class="truncate">{a.name}</span>
               </button>

package/src/components/composite/ComboBox.tsx

@@ -178,20 +178,20 @@ function SingleComboBox<T>(props: ComboBoxSingleProps<T>): JSX.Element {
         data-testid={tid("trigger")}
         disabled={props.disabled}
         onClick={() => !props.disabled && eng.setOpen((o) => !o)}
-        class="w-full flex items-center gap-2 px-3 py-2.5 rounded-lg bg-zinc-800/30 border border-zinc-700/50 hover:border-amber-500/40 hover:bg-amber-500/5 transition-colors text-sm text-left cursor-pointer disabled:cursor-not-allowed disabled:opacity-60"
+        class="w-full flex items-center gap-2 px-3 py-2.5 rounded-lg bg-[color-mix(in_srgb,var(--ks-surface-raised,#1a1a1a)_30%,transparent)] border border-[color-mix(in_srgb,var(--ks-border-strong,#3f3f46)_50%,transparent)] hover:border-[color-mix(in_srgb,var(--ks-primary,#c9a961)_40%,transparent)] hover:bg-[color-mix(in_srgb,var(--ks-primary,#c9a961)_5%,transparent)] transition-colors text-sm text-left cursor-pointer disabled:cursor-not-allowed disabled:opacity-60"
         aria-haspopup="listbox"
         aria-expanded={eng.open()}
       >
-        <Icon size={16} class="shrink-0 text-zinc-400" />
-        <Show when={triggerLabel()} fallback={<span class="text-zinc-500 italic">{placeholder()}</span>}>
+        <Icon size={16} class="shrink-0 text-[var(--ks-fg-muted,#a1a1aa)]" />
+        <Show when={triggerLabel()} fallback={<span class="text-[var(--ks-fg-subtle,#71717a)] italic">{placeholder()}</span>}>
           <span class="flex-1 min-w-0">
-            <span class="block truncate text-zinc-100 font-medium">{triggerLabel()}</span>
+            <span class="block truncate text-[var(--ks-fg,#ffffff)] font-medium">{triggerLabel()}</span>
           </span>
           <button
             type="button"
             data-testid={tid("clear")}
             onClick={clear}
-            class="shrink-0 p-1 rounded text-zinc-500 hover:text-red-400 hover:bg-red-500/10 transition-colors cursor-pointer"
+            class="shrink-0 p-1 rounded text-[var(--ks-fg-subtle,#71717a)] hover:text-[var(--ks-danger-fg,#f87171)] hover:bg-[color-mix(in_srgb,var(--ks-danger,#ef4444)_10%,transparent)] transition-colors cursor-pointer"
             title="Clear"
             aria-label={`Clear ${props.noun}`}
           >
@@ -205,11 +205,11 @@ function SingleComboBox<T>(props: ComboBoxSingleProps<T>): JSX.Element {
           <div
             ref={popupRef}
             data-testid={tid("popup")}
-            class="z-[10000] rounded-md border border-zinc-700 bg-zinc-900/95 backdrop-blur shadow-xl overflow-hidden flex flex-col"
+            class="z-[10000] rounded-md border border-[var(--ks-border-strong,#3f3f46)] bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_95%,transparent)] backdrop-blur shadow-xl overflow-hidden flex flex-col"
             style={eng.popupStyle()}
           >
-            <div class="px-2 py-2 border-b border-zinc-800 flex items-center gap-2">
-              <Search size={14} class="text-zinc-500 shrink-0 ml-1" />
+            <div class="px-2 py-2 border-b border-[var(--ks-border-subtle,rgba(39,39,42,0.25))] flex items-center gap-2">
+              <Search size={14} class="text-[var(--ks-fg-subtle,#71717a)] shrink-0 ml-1" />
               <input
                 ref={inputRef}
                 type="text"
@@ -222,20 +222,20 @@ function SingleComboBox<T>(props: ComboBoxSingleProps<T>): JSX.Element {
                 value={eng.query()}
                 onInput={(e) => eng.setQuery(e.currentTarget.value)}
                 placeholder={props.onCreate ? `Search or add a new ${props.noun}…` : `Search ${props.noun}s…`}
-                class="w-full px-1 py-1 text-sm bg-transparent text-zinc-200 placeholder:text-zinc-600 focus:outline-none"
+                class="w-full px-1 py-1 text-sm bg-transparent text-[var(--ks-fg,#ffffff)] placeholder:text-[var(--ks-input-placeholder,#71717a)] focus:outline-none"
               />
               <Show when={eng.loading()}>
-                <Loader2 size={14} class="animate-spin text-zinc-500 mr-1 shrink-0" />
+                <Loader2 size={14} class="animate-spin text-[var(--ks-fg-subtle,#71717a)] mr-1 shrink-0" />
               </Show>
             </div>
             <div class="flex-1 overflow-y-auto">
               <Show when={eng.error()}>
-                <div role="status" class="px-3 py-2 text-xs text-red-400">
+                <div role="status" class="px-3 py-2 text-xs text-[var(--ks-danger-fg,#f87171)]">
                   {eng.error()}
                 </div>
               </Show>
               <Show when={!eng.loading() && eng.results().length === 0 && !showCreateOption() && !eng.error()}>
-                <div role="status" class="px-3 py-4 text-xs text-zinc-500 text-center">
+                <div role="status" class="px-3 py-4 text-xs text-[var(--ks-fg-subtle,#71717a)] text-center">
                   {eng.trimmedQuery() ? "No matches" : "Start typing or pick from your list…"}
                 </div>
               </Show>
@@ -258,21 +258,21 @@ function SingleComboBox<T>(props: ComboBoxSingleProps<T>): JSX.Element {
                             type="button"
                             data-testid={`${tid("result")}-${props.idOf(item)}`}
                             onClick={() => select(item)}
-                            class="w-full text-left px-3 py-2 hover:bg-amber-500/10 transition-colors flex items-start gap-2 cursor-pointer"
+                            class="w-full text-left px-3 py-2 hover:bg-[color-mix(in_srgb,var(--ks-primary,#c9a961)_10%,transparent)] transition-colors flex items-start gap-2 cursor-pointer"
                           >
-                            <Icon size={14} class="text-zinc-500 shrink-0 mt-0.5" />
+                            <Icon size={14} class="text-[var(--ks-fg-subtle,#71717a)] shrink-0 mt-0.5" />
                             <span class="flex-1 min-w-0">
-                              <span class="block text-sm text-zinc-100 truncate">
+                              <span class="block text-sm text-[var(--ks-fg,#ffffff)] truncate">
                                 {highlightMatch(props.labelOf(item), eng.debouncedQuery().trim())}
                               </span>
                               <Show when={secondary}>
-                                <span class="block text-[11px] text-zinc-500 truncate">
+                                <span class="block text-[11px] text-[var(--ks-fg-subtle,#71717a)] truncate">
                                   {highlightMatch(secondary!, eng.debouncedQuery().trim())}
                                 </span>
                               </Show>
                             </span>
                             <Show when={isSel()}>
-                              <span class="text-amber-400 text-xs shrink-0 mt-0.5">✓</span>
+                              <span class="text-[var(--ks-accent,#fbbf24)] text-xs shrink-0 mt-0.5">✓</span>
                             </Show>
                           </button>
                         </li>
@@ -282,21 +282,21 @@ function SingleComboBox<T>(props: ComboBoxSingleProps<T>): JSX.Element {
                 </ul>
               </Show>
               <Show when={showCreateOption()}>
-                <div class="border-t border-zinc-800">
+                <div class="border-t border-[var(--ks-border-subtle,rgba(39,39,42,0.25))]">
                   <button
                     type="button"
                     data-testid={tid("create")}
                     onClick={createAndSelect}
                     disabled={eng.creating()}
-                    class="w-full text-left px-3 py-2.5 hover:bg-emerald-500/10 transition-colors flex items-center gap-2 cursor-pointer disabled:cursor-wait disabled:opacity-60"
+                    class="w-full text-left px-3 py-2.5 hover:bg-[color-mix(in_srgb,var(--ks-success,#10b981)_10%,transparent)] transition-colors flex items-center gap-2 cursor-pointer disabled:cursor-wait disabled:opacity-60"
                   >
                     <Show
                       when={!eng.creating()}
-                      fallback={<Loader2 size={14} class="animate-spin text-emerald-400 shrink-0" />}
+                      fallback={<Loader2 size={14} class="animate-spin text-[var(--ks-success-fg,#34d399)] shrink-0" />}
                     >
-                      <UserPlus size={14} class="text-emerald-400 shrink-0" />
+                      <UserPlus size={14} class="text-[var(--ks-success-fg,#34d399)] shrink-0" />
                     </Show>
-                    <span class="text-sm text-emerald-300">
+                    <span class="text-sm text-[var(--ks-success-fg,#34d399)]">
                       New {props.noun} "<span class="font-medium">{eng.trimmedQuery()}</span>"
                     </span>
                   </button>
@@ -435,10 +435,11 @@ function MultiComboBox<T>(props: ComboBoxMultiProps<T>): JSX.Element {
   const isEmpty = () => props.value.length === 0;
 
   const wrapperTone = () => {
-    if (props.disabled) return "opacity-60 cursor-not-allowed bg-zinc-800/30 border-zinc-700/50";
+    if (props.disabled)
+      return "opacity-60 cursor-not-allowed bg-[color-mix(in_srgb,var(--ks-surface-raised,#1a1a1a)_30%,transparent)] border-[color-mix(in_srgb,var(--ks-border-strong,#3f3f46)_50%,transparent)]";
     if (props.invalid)
-      return "bg-red-500/5 border-red-500/40 hover:bg-red-500/10 hover:border-red-500/60";
-    return "bg-zinc-800/30 border-zinc-700/50 hover:border-amber-500/40 focus-within:border-amber-500/60";
+      return "bg-[color-mix(in_srgb,var(--ks-danger,#ef4444)_5%,transparent)] border-[color-mix(in_srgb,var(--ks-danger,#ef4444)_40%,transparent)] hover:bg-[color-mix(in_srgb,var(--ks-danger,#ef4444)_10%,transparent)] hover:border-[color-mix(in_srgb,var(--ks-danger,#ef4444)_60%,transparent)]";
+    return "bg-[color-mix(in_srgb,var(--ks-surface-raised,#1a1a1a)_30%,transparent)] border-[color-mix(in_srgb,var(--ks-border-strong,#3f3f46)_50%,transparent)] hover:border-[color-mix(in_srgb,var(--ks-primary,#c9a961)_40%,transparent)] focus-within:border-[color-mix(in_srgb,var(--ks-primary,#c9a961)_60%,transparent)]";
   };
 
   return (
@@ -469,12 +470,12 @@ function MultiComboBox<T>(props: ComboBoxMultiProps<T>): JSX.Element {
                 data-testid={`${tid("chip")}-${idOf(item)}`}
                 class={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs ${
                   primary()
-                    ? "border-amber-500/50 bg-amber-500/10 text-amber-200"
-                    : "border-zinc-700 bg-zinc-800/40 text-zinc-200"
+                    ? "border-[color-mix(in_srgb,var(--ks-primary,#c9a961)_50%,transparent)] bg-[color-mix(in_srgb,var(--ks-primary,#c9a961)_10%,transparent)] text-[var(--ks-accent,#fbbf24)]"
+                    : "border-[var(--ks-border-strong,#3f3f46)] bg-[color-mix(in_srgb,var(--ks-surface-raised,#1a1a1a)_40%,transparent)] text-[var(--ks-fg,#ffffff)]"
                 }`}
               >
                 <Show when={primary()}>
-                  <Star size={10} class="text-amber-400 shrink-0" aria-label="Primary" />
+                  <Star size={10} class="text-[var(--ks-accent,#fbbf24)] shrink-0" aria-label="Primary" />
                 </Show>
                 <Show
                   when={props.primaryStar}
@@ -510,7 +511,7 @@ function MultiComboBox<T>(props: ComboBoxMultiProps<T>): JSX.Element {
                       removeFromPool(item);
                     }}
                     aria-label={`Remove ${props.labelOf(item)}`}
-                    class="shrink-0 rounded-full p-0.5 text-zinc-400 hover:text-red-400 hover:bg-red-500/10 transition-colors cursor-pointer"
+                    class="shrink-0 rounded-full p-0.5 text-[var(--ks-fg-muted,#a1a1aa)] hover:text-[var(--ks-danger-fg,#f87171)] hover:bg-red-500/10 transition-colors cursor-pointer"
                   >
                     <X size={11} />
                   </button>
@@ -520,7 +521,7 @@ function MultiComboBox<T>(props: ComboBoxMultiProps<T>): JSX.Element {
           }}
         </For>
         <Show when={isEmpty()}>
-          <Icon size={14} class={`shrink-0 ml-1 ${props.invalid ? "text-red-300" : "text-zinc-400"}`} />
+          <Icon size={14} class={`shrink-0 ml-1 ${props.invalid ? "text-[var(--ks-danger-fg,#f87171)]" : "text-[var(--ks-fg-muted,#a1a1aa)]"}`} />
         </Show>
         <input
           ref={inputRef}
@@ -535,8 +536,10 @@ function MultiComboBox<T>(props: ComboBoxMultiProps<T>): JSX.Element {
             if (!eng.open()) eng.setOpen(true);
           }}
           onKeyDown={onKeyDown}
-          class={`flex-1 min-w-[120px] bg-transparent outline-none text-sm text-zinc-100 ${
-            props.invalid && isEmpty() ? "placeholder-red-300/80 italic" : "placeholder-zinc-500"
+          class={`flex-1 min-w-[120px] bg-transparent outline-none text-sm text-[var(--ks-fg,#ffffff)] ${
+            props.invalid && isEmpty()
+              ? "placeholder-[color-mix(in_srgb,var(--ks-danger-fg,#f87171)_80%,transparent)] italic"
+              : "placeholder-[var(--ks-input-placeholder,#71717a)]"
           }`}
         />
       </div>
@@ -548,20 +551,20 @@ function MultiComboBox<T>(props: ComboBoxMultiProps<T>): JSX.Element {
             data-testid={tid("popup")}
             role="listbox"
             aria-label={`${props.noun} search results`}
-            class="z-[110] rounded-md border border-zinc-700 bg-zinc-900/95 backdrop-blur shadow-xl overflow-hidden flex flex-col"
+            class="z-[110] rounded-md border border-[var(--ks-border-strong,#3f3f46)] bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_95%,transparent)] backdrop-blur shadow-xl overflow-hidden flex flex-col"
             style={eng.popupStyle()}
           >
             <Show when={eng.error()}>
-              <div role="status" class="px-3 py-2 text-xs text-red-400 border-b border-zinc-800">
+              <div role="status" class="px-3 py-2 text-xs text-[var(--ks-danger-fg,#f87171)] border-b border-[var(--ks-border-subtle,rgba(39,39,42,0.25))]">
                 {eng.error()}
               </div>
             </Show>
             <div class="flex-1 overflow-y-auto">
               <Show when={eng.loading() && eng.results().length === 0}>
-                <div role="status" class="px-3 py-3 text-xs text-zinc-500 italic">Searching…</div>
+                <div role="status" class="px-3 py-3 text-xs text-[var(--ks-fg-subtle,#71717a)] italic">Searching…</div>
               </Show>
               <Show when={displayOptions().length === 0 && !eng.loading()}>
-                <div role="status" class="px-3 py-3 text-xs text-zinc-500 italic">
+                <div role="status" class="px-3 py-3 text-xs text-[var(--ks-fg-subtle,#71717a)] italic">
                   {eng.trimmedQuery() ? `No matching ${props.noun}s.` : `Start typing to find a ${props.noun}…`}
                 </div>
               </Show>
@@ -580,17 +583,19 @@ function MultiComboBox<T>(props: ComboBoxMultiProps<T>): JSX.Element {
                   onMouseEnter={() => setFocusedIdx(0)}
                   onClick={() => void createAndAdd()}
                   disabled={eng.creating()}
-                  class={`w-full flex items-start gap-2 px-3 py-2 text-left text-sm transition-colors border-b border-zinc-800 ${
-                    focusedIdx() === 0 ? "bg-amber-500/15 text-amber-200" : "text-zinc-100 hover:bg-zinc-800"
+                  class={`w-full flex items-start gap-2 px-3 py-2 text-left text-sm transition-colors border-b border-[var(--ks-border-subtle,rgba(39,39,42,0.25))] ${
+                    focusedIdx() === 0
+                      ? "bg-[color-mix(in_srgb,var(--ks-primary,#c9a961)_15%,transparent)] text-[var(--ks-accent,#fbbf24)]"
+                      : "text-[var(--ks-fg,#ffffff)] hover:bg-[var(--ks-surface-raised,#1a1a1a)]"
                   }`}
                 >
                   <Show
                     when={!eng.creating()}
-                    fallback={<Loader2 size={14} class="animate-spin text-emerald-400 shrink-0 mt-0.5" />}
+                    fallback={<Loader2 size={14} class="animate-spin text-[var(--ks-success-fg,#34d399)] shrink-0 mt-0.5" />}
                   >
-                    <UserPlus size={14} class="text-emerald-400 shrink-0 mt-0.5" />
+                    <UserPlus size={14} class="text-[var(--ks-success-fg,#34d399)] shrink-0 mt-0.5" />
                   </Show>
-                  <span class="flex-1 text-emerald-300">
+                  <span class="flex-1 text-[var(--ks-success-fg,#34d399)]">
                     New {props.noun} "<span class="font-medium">{eng.trimmedQuery()}</span>"
                   </span>
                 </button>
@@ -609,16 +614,18 @@ function MultiComboBox<T>(props: ComboBoxMultiProps<T>): JSX.Element {
                       onMouseEnter={() => setFocusedIdx(displayIdx())}
                       onClick={() => addToPool(item)}
                       class={`w-full flex items-start gap-2 px-3 py-2 text-left text-sm transition-colors ${
-                        isFocused() ? "bg-amber-500/15 text-amber-200" : "text-zinc-100 hover:bg-zinc-800"
+                        isFocused()
+                          ? "bg-[color-mix(in_srgb,var(--ks-primary,#c9a961)_15%,transparent)] text-[var(--ks-accent,#fbbf24)]"
+                          : "text-[var(--ks-fg,#ffffff)] hover:bg-[var(--ks-surface-raised,#1a1a1a)]"
                       }`}
                     >
-                      <Icon size={14} class="text-zinc-500 shrink-0 mt-0.5" />
+                      <Icon size={14} class="text-[var(--ks-fg-subtle,#71717a)] shrink-0 mt-0.5" />
                       <span class="flex-1 min-w-0">
                         <span class="block truncate font-medium">
                           {highlightMatch(props.labelOf(item), eng.debouncedQuery().trim())}
                         </span>
                         <Show when={secondary()}>
-                          <span class="block truncate text-[11px] text-zinc-500">
+                          <span class="block truncate text-[11px] text-[var(--ks-fg-subtle,#71717a)]">
                             {highlightMatch(secondary()!, eng.debouncedQuery().trim())}
                           </span>
                         </Show>

package/src/components/composite/CustomRenderer.tsx

@@ -16,22 +16,15 @@ import {
   validateConsumes,
   type RendererProps,
 } from "../../utils/renderers";
+import { injectCSS } from "../../utils/inject-css";
 
 const STYLE_ID = "ksui-custom-renderer-style";
-
-function ensureStyle(): void {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID)) return;
-  const style = document.createElement("style");
-  style.id = STYLE_ID;
-  // Unscoped ksui-* classes + CSS custom properties so a host can retint without
-  // forking; no Tailwind, no host-brand classes (standalone-library rule).
-  style.textContent = `
-.ksui-cr-fallback{display:flex;align-items:center;gap:0.5rem;padding:0.625rem 0.75rem;border-radius:0.5rem;font-size:0.8125rem;background:var(--ksui-cr-fallback-bg,rgba(245,158,11,0.08));border:1px solid var(--ksui-cr-fallback-border,rgba(245,158,11,0.25));color:var(--ksui-cr-fallback-fg,#fbbf24);}
+// Unscoped ksui-* classes + CSS custom properties so a host can retint without
+// forking; no Tailwind, no host-brand classes (standalone-library rule).
+const STYLE_CSS = `
+.ksui-cr-fallback{display:flex;align-items:center;gap:0.5rem;padding:0.625rem 0.75rem;border-radius:0.5rem;font-size:0.8125rem;background:var(--ksui-cr-fallback-bg,rgba(245,158,11,0.08));border:1px solid var(--ksui-cr-fallback-border,rgba(245,158,11,0.25));color:var(--ksui-cr-fallback-fg,var(--ks-warning-fg,#fbbf24));}
 .ksui-cr-fallback svg{flex:0 0 auto;}
 `;
-  document.head.appendChild(style);
-}
 
 export interface CustomRendererProps {
   /** Registered renderer id to look up (§8). */
@@ -52,7 +45,7 @@ export interface CustomRendererProps {
 }
 
 const DefaultFallback: Component<{ id: string; reason: string }> = (props) => {
-  ensureStyle();
+  injectCSS(STYLE_ID, STYLE_CSS);
   return (
     <div class="ksui-cr-fallback" role="status" data-testid="ksui-cr-fallback">
       <AlertTriangle size={14} />

package/src/components/composite/FileField.tsx

@@ -19,6 +19,7 @@ import UploadCloud from "lucide-solid/icons/cloud-upload";
 import FileIcon from "lucide-solid/icons/file";
 import ImageOff from "lucide-solid/icons/image-off";
 import X from "lucide-solid/icons/x";
+import { injectCSS } from "../../utils/inject-css";
 
 /** The opaque asset handle the field stores as its value (§11). */
 export interface AssetHandle {
@@ -32,29 +33,21 @@ export interface AssetHandle {
 export type FileFieldStatus = "empty" | "uploading" | "done" | "failed";
 
 const STYLE_ID = "ksui-file-field-style";
-
-function ensureStyle(): void {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID)) return;
-  const style = document.createElement("style");
-  style.id = STYLE_ID;
-  style.textContent = `
+const STYLE_CSS = `
 .ksui-ff{display:flex;flex-direction:column;gap:0.5rem;}
-.ksui-ff-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.375rem;padding:1.25rem;border-radius:0.625rem;border:1.5px dashed var(--ksui-ff-border,rgba(255,255,255,0.2));background:var(--ksui-ff-bg,rgba(255,255,255,0.03));color:var(--ksui-ff-fg,inherit);cursor:pointer;text-align:center;font-size:0.82rem;transition:border-color .15s,background .15s;}
-.ksui-ff-drop.dragging{border-color:var(--ksui-ff-accent,#c9a961);background:var(--ksui-ff-accent-bg,rgba(201,169,97,0.08));}
+.ksui-ff-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.375rem;padding:1.25rem;border-radius:0.625rem;border:1.5px dashed var(--ksui-ff-border,var(--ks-input-border,#3f3f46));background:var(--ksui-ff-bg,var(--ks-input-bg,#18181b));color:var(--ksui-ff-fg,inherit);cursor:pointer;text-align:center;font-size:0.82rem;transition:border-color .15s,background .15s;}
+.ksui-ff-drop.dragging{border-color:var(--ksui-ff-accent,var(--ks-primary,#c9a961));background:var(--ksui-ff-accent-bg,color-mix(in srgb, var(--ks-primary, #c9a961) 8%, transparent));}
 .ksui-ff-drop:disabled{opacity:0.5;cursor:not-allowed;}
 .ksui-ff-hint{font-size:0.72rem;opacity:0.6;}
-.ksui-ff-card{display:flex;align-items:center;gap:0.625rem;padding:0.5rem 0.625rem;border-radius:0.5rem;border:1px solid var(--ksui-ff-border,rgba(255,255,255,0.15));background:var(--ksui-ff-bg,rgba(255,255,255,0.03));}
-.ksui-ff-thumb{width:2.5rem;height:2.5rem;border-radius:0.375rem;object-fit:cover;flex:0 0 auto;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;}
+.ksui-ff-card{display:flex;align-items:center;gap:0.625rem;padding:0.5rem 0.625rem;border-radius:0.5rem;border:1px solid var(--ksui-ff-border,var(--ks-input-border,#3f3f46));background:var(--ksui-ff-bg,var(--ks-input-bg,#18181b));}
+.ksui-ff-thumb{width:2.5rem;height:2.5rem;border-radius:0.375rem;object-fit:cover;flex:0 0 auto;background:var(--ks-surface-sunken,#141414);display:flex;align-items:center;justify-content:center;}
 .ksui-ff-meta{display:flex;flex-direction:column;min-width:0;flex:1;}
 .ksui-ff-name{font-size:0.82rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 .ksui-ff-sub{font-size:0.72rem;opacity:0.6;}
-.ksui-ff-sub.failed{color:var(--ksui-ff-danger,#f87171);}
-.ksui-ff-remove{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:0.375rem;border:1px solid var(--ksui-ff-border,rgba(255,255,255,0.15));background:transparent;color:inherit;cursor:pointer;}
-.ksui-ff-retry{font-size:0.72rem;text-decoration:underline;cursor:pointer;color:var(--ksui-ff-accent,#c9a961);background:none;border:none;padding:0;}
+.ksui-ff-sub.failed{color:var(--ksui-ff-danger,var(--ks-danger-fg,#f87171));}
+.ksui-ff-remove{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:0.375rem;border:1px solid var(--ksui-ff-border,var(--ks-input-border,#3f3f46));background:transparent;color:inherit;cursor:pointer;}
+.ksui-ff-retry{font-size:0.72rem;text-decoration:underline;cursor:pointer;color:var(--ksui-ff-accent,var(--ks-primary,#c9a961));background:none;border:none;padding:0;}
 `;
-  document.head.appendChild(style);
-}
 
 export interface FileFieldProps {
   /** Field label. */
@@ -89,7 +82,7 @@ function formatSize(bytes: number): string {
 }
 
 export const FileField: Component<FileFieldProps> = (props) => {
-  ensureStyle();
+  injectCSS(STYLE_ID, STYLE_CSS);
   const [status, setStatus] = createSignal<FileFieldStatus>(props.value ? "done" : "empty");
   // The handle currently shown. Seeded from props.value, and updated locally on a
   // fresh upload so the done card shows even when the parent doesn't echo onChange

package/src/components/composite/FlowGraph.tsx

@@ -35,6 +35,7 @@ import {
   type GraphNode,
   type PositionedNode,
 } from "../../utils/graph";
+import { injectCSS } from "../../utils/inject-css";
 
 type IconComp = Component<{ size?: number; class?: string }>;
 
@@ -62,58 +63,50 @@ const ZOOM_MIN = 0.3;
 const ZOOM_MAX = 3;
 
 const STYLE_ID = "ksui-flow-graph-style";
-
-function ensureStyle(): void {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID)) return;
-  const style = document.createElement("style");
-  style.id = STYLE_ID;
-  style.textContent = `
+const STYLE_CSS = `
 .ksui-fg-wrap{width:100%;overflow:auto;position:relative;user-select:none;-webkit-user-select:none;}
 .ksui-fg-card,.ksui-fg-title,.ksui-fg-kind,.ksui-fg-elabel{user-select:none;-webkit-user-select:none;}
-.ksui-fg-wrap.interactive{overflow:hidden;border:1px solid var(--ksui-fg-node-border,rgba(255,255,255,0.12));border-radius:10px;background:var(--ksui-fg-canvas,#101014);background-image:radial-gradient(var(--ksui-fg-dot,rgba(255,255,255,0.05)) 1px,transparent 1px);background-size:20px 20px;cursor:grab;touch-action:none;}
+.ksui-fg-wrap.interactive{overflow:hidden;border:1px solid var(--ksui-fg-node-border,color-mix(in srgb, var(--ks-fg, #ffffff) 12%, transparent));border-radius:10px;background:var(--ksui-fg-canvas,var(--ks-bg,#0a0a0a));background-image:radial-gradient(var(--ksui-fg-dot,color-mix(in srgb, var(--ks-fg, #ffffff) 5%, transparent)) 1px,transparent 1px);background-size:20px 20px;cursor:grab;touch-action:none;}
 .ksui-fg-wrap.interactive.grabbing{cursor:grabbing;}
-.ksui-fg-wrap.scroll{overflow:auto;border:1px solid var(--ksui-fg-node-border,rgba(255,255,255,0.12));border-radius:10px;background:var(--ksui-fg-canvas,#101014);background-image:radial-gradient(var(--ksui-fg-dot,rgba(255,255,255,0.05)) 1px,transparent 1px);background-size:20px 20px;}
+.ksui-fg-wrap.scroll{overflow:auto;border:1px solid var(--ksui-fg-node-border,color-mix(in srgb, var(--ks-fg, #ffffff) 12%, transparent));border-radius:10px;background:var(--ksui-fg-canvas,var(--ks-bg,#0a0a0a));background-image:radial-gradient(var(--ksui-fg-dot,color-mix(in srgb, var(--ks-fg, #ffffff) 5%, transparent)) 1px,transparent 1px);background-size:20px 20px;}
 .ksui-fg-svg{display:block;max-width:100%;height:auto;font-family:inherit;}
 .ksui-fg-wrap.scroll .ksui-fg-svg{margin:0 auto;}
 .ksui-fg-wrap.interactive .ksui-fg-svg{max-width:none;width:100%;height:100%;}
-.ksui-fg-edge{fill:none;stroke:var(--ksui-fg-edge,rgba(255,255,255,0.28));stroke-width:1.75;}
+.ksui-fg-edge{fill:none;stroke:var(--ksui-fg-edge,color-mix(in srgb, var(--ks-fg, #ffffff) 28%, transparent));stroke-width:1.75;}
 .ksui-fg-edge.dashed{stroke-dasharray:5 4;}
-.ksui-fg-edge.primary{stroke:var(--ksui-fg-primary,#c9a961);}
-.ksui-fg-edge.info{stroke:#5b9bf0;}
-.ksui-fg-edge.success{stroke:#43c478;}
-.ksui-fg-edge.danger{stroke:#ef6a6a;}
-.ksui-fg-edge.muted{stroke:rgba(255,255,255,0.2);}
+.ksui-fg-edge.primary{stroke:var(--ksui-fg-primary,var(--ks-primary,#c9a961));}
+.ksui-fg-edge.info{stroke:var(--ks-info,#38bdf8);}
+.ksui-fg-edge.success{stroke:var(--ks-success,#10b981);}
+.ksui-fg-edge.danger{stroke:var(--ks-danger,#ef4444);}
+.ksui-fg-edge.muted{stroke:color-mix(in srgb, var(--ks-fg, #ffffff) 20%, transparent);}
 .ksui-fg-edge.flow{stroke-dasharray:6 5;animation:ksui-fg-march .8s linear infinite;}
 @keyframes ksui-fg-march{to{stroke-dashoffset:-11;}}
 @media (prefers-reduced-motion:reduce){.ksui-fg-edge.flow{animation:none;}}
-.ksui-fg-handle{fill:var(--ksui-fg-canvas,#101014);stroke:var(--ksui-fg-edge,rgba(255,255,255,0.4));stroke-width:1.5;}
+.ksui-fg-handle{fill:var(--ksui-fg-canvas,var(--ks-bg,#0a0a0a));stroke:var(--ksui-fg-edge,color-mix(in srgb, var(--ks-fg, #ffffff) 40%, transparent));stroke-width:1.5;}
 .ksui-fg-node,.ksui-fg-edge,.ksui-fg-elabel,.ksui-fg-elabel-bg,.ksui-fg-handle{transition:opacity .12s ease;}
 .ksui-fg-dim{opacity:0.14;}
-.ksui-fg-elabel{fill:var(--ksui-fg-muted,rgba(255,255,255,0.78));font-size:9.5px;}
-.ksui-fg-elabel-bg{fill:var(--ksui-fg-canvas,#101014);opacity:0.92;}
-.ksui-fg-card{box-sizing:border-box;height:100%;display:flex;align-items:center;gap:9px;padding:0 11px;border-radius:9px;background:var(--ksui-fg-card,#1c1c22);border:1px solid var(--ksui-fg-node-border,rgba(255,255,255,0.14));border-left-width:3px;overflow:hidden;}
+.ksui-fg-elabel{fill:var(--ksui-fg-muted,color-mix(in srgb, var(--ks-fg, #ffffff) 78%, transparent));font-size:9.5px;}
+.ksui-fg-elabel-bg{fill:var(--ksui-fg-canvas,var(--ks-bg,#0a0a0a));opacity:0.92;}
+.ksui-fg-card{box-sizing:border-box;height:100%;display:flex;align-items:center;gap:9px;padding:0 11px;border-radius:9px;background:var(--ksui-fg-card,var(--ks-surface-raised,#1a1a1a));border:1px solid var(--ksui-fg-node-border,rgba(255,255,255,0.14));border-left-width:3px;overflow:hidden;}
 .ksui-fg-node.clickable .ksui-fg-card{cursor:pointer;}
-.ksui-fg-node.clickable .ksui-fg-card:hover{background:#23232b;}
+.ksui-fg-node.clickable .ksui-fg-card:hover{background:var(--ks-surface-raised,#1a1a1a);}
 .ksui-fg-node:focus{outline:none;}
-.ksui-fg-node:focus-visible .ksui-fg-card{border-color:var(--ksui-fg-primary,#c9a961);}
-.ksui-fg-chip{flex:none;width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;}
+.ksui-fg-node:focus-visible .ksui-fg-card{border-color:var(--ksui-fg-primary,var(--ks-primary,#c9a961));}
+.ksui-fg-chip{flex:none;width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--ks-fg,#ffffff);}
 .ksui-fg-txt{min-width:0;display:flex;flex-direction:column;line-height:1.15;}
-.ksui-fg-title{font-size:12px;font-weight:600;color:var(--ksui-fg-fg,#ececef);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
-.ksui-fg-kind{font-size:9px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ksui-fg-muted,rgba(255,255,255,0.45));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
-.ksui-fg-card.primary{border-left-color:#c9a961;} .ksui-fg-card.primary .ksui-fg-chip{background:#c9a961;color:#18181b;}
-.ksui-fg-card.info{border-left-color:#5b9bf0;} .ksui-fg-card.info .ksui-fg-chip{background:#3f6fb0;}
-.ksui-fg-card.success{border-left-color:#43c478;} .ksui-fg-card.success .ksui-fg-chip{background:#2f8e57;}
-.ksui-fg-card.danger{border-left-color:#ef6a6a;} .ksui-fg-card.danger .ksui-fg-chip{background:#b04545;}
-.ksui-fg-card.muted{border-left-color:rgba(255,255,255,0.3);} .ksui-fg-card.muted .ksui-fg-chip{background:#3a3a42;}
-.ksui-fg-empty{padding:1.75rem 1rem;text-align:center;font-size:0.82rem;color:var(--ksui-fg-muted,rgba(255,255,255,0.55));}
+.ksui-fg-title{font-size:12px;font-weight:600;color:var(--ksui-fg-fg,var(--ks-fg,#ffffff));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.ksui-fg-kind{font-size:9px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ksui-fg-muted,color-mix(in srgb, var(--ks-fg, #ffffff) 45%, transparent));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.ksui-fg-card.primary{border-left-color:var(--ks-primary,#c9a961);} .ksui-fg-card.primary .ksui-fg-chip{background:var(--ks-primary,#c9a961);color:var(--ks-fg-on-primary,#0a0a0a);}
+.ksui-fg-card.info{border-left-color:var(--ks-info,#38bdf8);} .ksui-fg-card.info .ksui-fg-chip{background:var(--ks-info-bg,rgba(56,189,248,0.12));}
+.ksui-fg-card.success{border-left-color:var(--ks-success,#10b981);} .ksui-fg-card.success .ksui-fg-chip{background:var(--ks-success-bg,rgba(16,185,129,0.12));}
+.ksui-fg-card.danger{border-left-color:var(--ks-danger,#ef4444);} .ksui-fg-card.danger .ksui-fg-chip{background:var(--ks-danger-bg,rgba(239,68,68,0.12));}
+.ksui-fg-card.muted{border-left-color:color-mix(in srgb, var(--ks-fg, #ffffff) 30%, transparent);} .ksui-fg-card.muted .ksui-fg-chip{background:var(--ks-border-strong,#3f3f46);}
+.ksui-fg-empty{padding:1.75rem 1rem;text-align:center;font-size:0.82rem;color:var(--ksui-fg-muted,color-mix(in srgb, var(--ks-fg, #ffffff) 55%, transparent));}
 .ksui-fg-controls{position:absolute;right:8px;bottom:8px;display:flex;gap:4px;z-index:1;}
-.ksui-fg-ctrl{width:24px;height:24px;display:grid;place-items:center;border-radius:5px;border:1px solid var(--ksui-fg-node-border,rgba(255,255,255,0.18));background:var(--ksui-fg-card,#1c1c22);color:var(--ksui-fg-fg,#ececef);font-size:14px;line-height:1;cursor:pointer;user-select:none;}
-.ksui-fg-ctrl:hover{background:#23232b;}
-.ksui-fg-hint{position:absolute;left:8px;bottom:8px;font-size:9.5px;color:var(--ksui-fg-muted,rgba(255,255,255,0.4));pointer-events:none;}
+.ksui-fg-ctrl{width:24px;height:24px;display:grid;place-items:center;border-radius:5px;border:1px solid var(--ksui-fg-node-border,color-mix(in srgb, var(--ks-fg, #ffffff) 18%, transparent));background:var(--ksui-fg-card,var(--ks-surface-raised,#1a1a1a));color:var(--ksui-fg-fg,var(--ks-fg,#ffffff));font-size:14px;line-height:1;cursor:pointer;user-select:none;}
+.ksui-fg-ctrl:hover{background:var(--ks-surface-raised,#1a1a1a);}
+.ksui-fg-hint{position:absolute;left:8px;bottom:8px;font-size:9.5px;color:var(--ksui-fg-muted,color-mix(in srgb, var(--ks-fg, #ffffff) 40%, transparent));pointer-events:none;}
 `;
-  document.head.appendChild(style);
-}
 
 export interface FlowGraphProps {
   nodes: GraphNode[];
@@ -146,7 +139,7 @@ function clip(text: string, max: number): string {
 }
 
 export const FlowGraph: Component<FlowGraphProps> = (props) => {
-  ensureStyle();
+  injectCSS(STYLE_ID, STYLE_CSS);
   const tid = (s: string) => (props.testId ? `${props.testId}-${s}` : undefined);
 
   const vertical = () => props.direction === "vertical";