@kahitsan/ksui 0.33.0 → 0.34.1

package/src/components/composite/FlowRunner.tsx

@@ -25,35 +25,28 @@ import {
   type FlowNode,
   type FlowState,
 } from "../../utils/flow";
+import { injectCSS } from "../../utils/inject-css";
 
 const STYLE_ID = "ksui-flow-runner-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-fr{display:flex;flex-direction:column;gap:0.875rem;color:var(--ksui-fr-fg,inherit);}
 .ksui-fr-title{font-size:0.95rem;font-weight:600;margin:0;}
 .ksui-fr-prompt,.ksui-fr-body{font-size:0.85rem;opacity:0.85;margin:0;}
 .ksui-fr-field{display:flex;flex-direction:column;gap:0.25rem;}
 .ksui-fr-label{font-size:0.78rem;font-weight:500;}
-.ksui-fr-input{padding:0.5rem 0.625rem;border-radius:0.5rem;border:1px solid var(--ksui-fr-border,rgba(255,255,255,0.15));background:var(--ksui-fr-input-bg,rgba(255,255,255,0.04));color:inherit;font-size:0.85rem;}
+.ksui-fr-input{padding:0.5rem 0.625rem;border-radius:0.5rem;border:1px solid var(--ksui-fr-border,var(--ks-input-border,#3f3f46));background:var(--ksui-fr-input-bg,var(--ks-input-bg,#18181b));color:inherit;font-size:0.85rem;}
 .ksui-fr-actions{display:flex;gap:0.5rem;flex-wrap:wrap;}
-.ksui-fr-btn{padding:0.5rem 0.875rem;border-radius:0.5rem;border:1px solid var(--ksui-fr-border,rgba(255,255,255,0.15));background:var(--ksui-fr-btn-bg,rgba(255,255,255,0.06));color:inherit;font-size:0.82rem;cursor:pointer;}
+.ksui-fr-btn{padding:0.5rem 0.875rem;border-radius:0.5rem;border:1px solid var(--ksui-fr-border,var(--ks-input-border,#3f3f46));background:var(--ksui-fr-btn-bg,var(--ks-surface-raised,#1a1a1a));color:inherit;font-size:0.82rem;cursor:pointer;}
 .ksui-fr-btn:disabled{opacity:0.5;cursor:not-allowed;}
-.ksui-fr-btn.primary{background:var(--ksui-fr-primary,#c9a961);color:var(--ksui-fr-primary-fg,#18181b);border-color:transparent;}
-.ksui-fr-btn.danger{background:var(--ksui-fr-danger,#ef4444);color:#fff;border-color:transparent;}
+.ksui-fr-btn.primary{background:var(--ksui-fr-primary,var(--ks-primary,#c9a961));color:var(--ksui-fr-primary-fg,#18181b);border-color:transparent;}
+.ksui-fr-btn.danger{background:var(--ksui-fr-danger,var(--ks-danger,#ef4444));color:var(--ks-fg,#ffffff);border-color:transparent;}
 .ksui-fr-msg{padding:0.625rem 0.75rem;border-radius:0.5rem;font-size:0.85rem;}
-.ksui-fr-msg.info{background:rgba(59,130,246,0.1);}
-.ksui-fr-msg.success{background:rgba(34,197,94,0.12);}
-.ksui-fr-msg.error{background:rgba(239,68,68,0.12);}
-.ksui-fr-error{padding:0.625rem 0.75rem;border-radius:0.5rem;font-size:0.82rem;background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.3);}
+.ksui-fr-msg.info{background:var(--ks-info-bg,rgba(56,189,248,0.12));}
+.ksui-fr-msg.success{background:var(--ks-success-bg,rgba(16,185,129,0.12));}
+.ksui-fr-msg.error{background:var(--ks-danger-bg,rgba(239,68,68,0.12));}
+.ksui-fr-error{padding:0.625rem 0.75rem;border-radius:0.5rem;font-size:0.82rem;background:var(--ks-danger-bg,rgba(239,68,68,0.12));border:1px solid color-mix(in srgb, var(--ks-danger, #ef4444) 30%, transparent);}
 .ksui-fr-loading{font-size:0.82rem;opacity:0.7;}
 `;
-  document.head.appendChild(style);
-}
 
 export interface FlowRunnerProps {
   /** The first node the server handed the client (the flow entry). */
@@ -77,7 +70,7 @@ export interface FlowRunnerProps {
 }
 
 export const FlowRunner: Component<FlowRunnerProps> = (props) => {
-  ensureStyle();
+  injectCSS(STYLE_ID, STYLE_CSS);
   const [node, setNode] = createSignal<FlowNode>(props.initialNode);
   const [busy, setBusy] = createSignal(false);
   const [error, setError] = createSignal<string | null>(null);

package/src/components/composite/FormAdvancedSection.tsx

@@ -36,13 +36,13 @@ export default function FormAdvancedSection(props: FormAdvancedSectionProps) {
   return (
     <div
       data-testid="advanced-fields-container"
-      class="rounded-lg border border-zinc-700/60 bg-zinc-900/40 p-3 space-y-3"
+      class="rounded-lg border border-[color-mix(in_srgb,var(--ks-border-strong,#3f3f46)_60%,transparent)] bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_40%,transparent)] p-3 space-y-3"
     >
-      <div class="flex items-center gap-2 text-[10px] uppercase tracking-widest text-zinc-400 font-semibold">
+      <div class="flex items-center gap-2 text-[10px] uppercase tracking-widest text-[var(--ks-fg-muted,#a1a1aa)] font-semibold">
         <span>Advanced</span>
       </div>
 
-      <div class="rounded-lg border border-zinc-800/50 bg-zinc-950/40 p-3">
+      <div class="rounded-lg border border-[color-mix(in_srgb,var(--ks-border-strong,#3f3f46)_50%,transparent)] bg-[color-mix(in_srgb,var(--ks-bg,#0a0a0a)_40%,transparent)] p-3">
         <FormField label="Tax">
           <SegmentedFilter
             options={[
@@ -75,7 +75,7 @@ export default function FormAdvancedSection(props: FormAdvancedSectionProps) {
                 : Math.round(amt * 0.12 * 100) / 100;
             const total = props.taxType === "vat_exclusive" ? sub + vat : amt;
             return (
-              <div class="mt-2 text-xs text-zinc-500 space-y-0.5 border-t border-zinc-800/50 pt-2">
+              <div class="mt-2 text-xs text-[var(--ks-fg-subtle,#71717a)] space-y-0.5 border-t border-[var(--ks-border,rgba(39,39,42,0.5))] pt-2">
                 <div class="flex justify-between">
                   <span>VATtable Sales</span>
                   <span>{formatPHP(sub)}</span>
@@ -84,7 +84,7 @@ export default function FormAdvancedSection(props: FormAdvancedSectionProps) {
                   <span>VAT (12%)</span>
                   <span>{formatPHP(vat)}</span>
                 </div>
-                <div class="flex justify-between font-medium text-zinc-300">
+                <div class="flex justify-between font-medium text-[var(--ks-fg-muted,#a1a1aa)]">
                   <span>Total</span>
                   <span>{formatPHP(total)}</span>
                 </div>
@@ -96,13 +96,13 @@ export default function FormAdvancedSection(props: FormAdvancedSectionProps) {
         <Show
           when={props.category === "expense" || props.category === "payable"}
         >
-          <div class="mt-3 border-t border-zinc-800/50 pt-3">
-            <label class="flex items-center gap-2 text-xs text-zinc-300 cursor-pointer select-none">
+          <div class="mt-3 border-t border-[color-mix(in_srgb,var(--ks-border-strong,#3f3f46)_50%,transparent)] pt-3">
+            <label class="flex items-center gap-2 text-xs text-[var(--ks-fg-muted,#a1a1aa)] cursor-pointer select-none">
               <input
                 type="checkbox"
                 checked={props.hasEwt}
                 onChange={(e) => props.setHasEwt(e.currentTarget.checked)}
-                class="h-4 w-4 accent-amber-500 cursor-pointer"
+                class="h-4 w-4 accent-[var(--ks-primary,#c9a961)] cursor-pointer"
               />
               <span>Has Expanded Withholding Tax</span>
             </label>
@@ -116,7 +116,7 @@ export default function FormAdvancedSection(props: FormAdvancedSectionProps) {
                     max="100"
                     value={props.ewtRate}
                     onInput={(e) => props.setEwtRate(e.currentTarget.value)}
-                    class="w-full px-3 py-2 bg-zinc-900/50 border border-zinc-800 text-zinc-100 text-sm rounded-md focus:outline-none focus:border-amber-500/50"
+                    class="w-full px-3 py-2 bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_50%,transparent)] border border-[var(--ks-border-strong,#3f3f46)] text-[var(--ks-fg,#ffffff)] text-sm rounded-md focus:outline-none focus:border-[color-mix(in_srgb,var(--ks-primary,#c9a961)_50%,transparent)]"
                     placeholder="e.g. 1, 2, 5, 10, 15"
                   />
                 </FormField>
@@ -133,7 +133,7 @@ export default function FormAdvancedSection(props: FormAdvancedSectionProps) {
                     const rate = parseFloat(props.ewtRate);
                     const ewt = Math.round(amt * rate) / 100;
                     return (
-                      <div class="text-xs text-zinc-500 border-t border-zinc-800/50 pt-2">
+                      <div class="text-xs text-[var(--ks-fg-subtle,#71717a)] border-t border-[color-mix(in_srgb,var(--ks-border-strong,#3f3f46)_50%,transparent)] pt-2">
                         <div class="flex justify-between">
                           <span>EWT ({rate}%)</span>
                           <span>{formatPHP(ewt)}</span>
@@ -149,7 +149,7 @@ export default function FormAdvancedSection(props: FormAdvancedSectionProps) {
       </div>
 
       <div
-        class="rounded-lg border border-zinc-800/50 bg-zinc-950/40 p-4 relative"
+        class="rounded-lg border border-[color-mix(in_srgb,var(--ks-border-strong,#3f3f46)_50%,transparent)] bg-[color-mix(in_srgb,var(--ks-bg,#0a0a0a)_40%,transparent)] p-4 relative"
         classList={{ "opacity-60": !props.canShare }}
         title={
           props.canShare
@@ -159,10 +159,10 @@ export default function FormAdvancedSection(props: FormAdvancedSectionProps) {
       >
         <div class="flex items-center justify-between min-h-[44px]">
           <div class="flex items-center gap-2">
-            <Lock size={14} class="text-zinc-500" />
+            <Lock size={14} class="text-[var(--ks-fg-subtle,#71717a)]" />
             <div>
-              <span class="text-sm text-zinc-300">Private transaction</span>
-              <p class="text-[10px] text-zinc-600">
+              <span class="text-sm text-[var(--ks-fg-muted,#a1a1aa)]">Private transaction</span>
+              <p class="text-[10px] text-[var(--ks-fg-subtle,#71717a)]">
                 {props.canShare
                   ? "Hidden from others unless shared"
                   : "Locked — needs members.list_basic permission"}
@@ -195,15 +195,15 @@ export default function FormAdvancedSection(props: FormAdvancedSectionProps) {
         </div>
 
         <Show when={props.isPrivate && props.canShare}>
-          <div class="mt-4 pt-3 border-t border-zinc-800/50">
-            <p class="text-[10px] text-zinc-500 mb-3">
+          <div class="mt-4 pt-3 border-t border-[color-mix(in_srgb,var(--ks-border-strong,#3f3f46)_50%,transparent)]">
+            <p class="text-[10px] text-[var(--ks-fg-subtle,#71717a)] mb-3">
               Always visible to:{" "}
-              <span class="text-zinc-400">
+              <span class="text-[var(--ks-fg-muted,#a1a1aa)]">
                 you (creator), org admins, superusers
               </span>
             </p>
 
-            <span class="text-xs text-zinc-500 block mb-2">
+            <span class="text-xs text-[var(--ks-fg-subtle,#71717a)] block mb-2">
               Share with role
             </span>
             <div class="flex gap-2 mb-3 flex-wrap">
@@ -240,15 +240,15 @@ export default function FormAdvancedSection(props: FormAdvancedSectionProps) {
                       }}
                       class="px-3 py-2 text-xs rounded-lg border cursor-pointer min-h-[36px] capitalize transition-colors active:opacity-80"
                       classList={{
-                        "border-amber-500/40 bg-amber-500/10 text-amber-400":
+                        "border-[color-mix(in_srgb,var(--ks-primary,#c9a961)_40%,transparent)] bg-[color-mix(in_srgb,var(--ks-primary,#c9a961)_10%,transparent)] text-[var(--ks-accent,#fbbf24)]":
                           selected(),
-                        "border-zinc-700 bg-zinc-800/50 text-zinc-400 hover:border-zinc-600":
+                        "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)]":
                           !selected(),
                       }}
                     >
                       All {role.label}s
                       <Show when={membersInRole().length > 0}>
-                        <span class="text-zinc-600 ml-1">
+                        <span class="text-[var(--ks-fg-subtle,#71717a)] ml-1">
                           ({membersInRole().length})
                         </span>
                       </Show>
@@ -258,7 +258,7 @@ export default function FormAdvancedSection(props: FormAdvancedSectionProps) {
               </For>
             </div>
 
-            <span class="text-xs text-zinc-500 block mb-2">
+            <span class="text-xs text-[var(--ks-fg-subtle,#71717a)] block mb-2">
               Or select people
             </span>
             <div class="space-y-0.5 max-h-[150px] overflow-y-auto">
@@ -281,25 +281,25 @@ export default function FormAdvancedSection(props: FormAdvancedSectionProps) {
                     <label
                       class="flex items-center gap-3 text-sm py-2 px-2 rounded-lg min-h-[40px] transition-colors"
                       classList={{
-                        "text-zinc-300 cursor-pointer hover:bg-zinc-800/30 active:bg-zinc-800/50":
+                        "text-[var(--ks-fg-muted,#a1a1aa)] cursor-pointer hover:bg-[color-mix(in_srgb,var(--ks-surface-raised,#1a1a1a)_30%,transparent)] active:bg-[color-mix(in_srgb,var(--ks-surface-raised,#1a1a1a)_50%,transparent)]":
                           !coveringRole(),
-                        "text-zinc-500 cursor-not-allowed bg-zinc-900/40":
+                        "text-[var(--ks-fg-subtle,#71717a)] cursor-not-allowed bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_40%,transparent)]":
                           !!coveringRole(),
                       }}
                     >
                       <div
                         class="w-5 h-5 rounded border-2 flex items-center justify-center shrink-0 transition-colors"
                         classList={{
-                          "border-amber-500 bg-amber-500":
+                          "border-[var(--ks-primary,#c9a961)] bg-[var(--ks-primary,#c9a961)]":
                             checked() && !coveringRole(),
-                          "border-amber-500/40 bg-amber-500/40":
+                          "border-[color-mix(in_srgb,var(--ks-primary,#c9a961)_40%,transparent)] bg-[color-mix(in_srgb,var(--ks-primary,#c9a961)_40%,transparent)]":
                             checked() && !!coveringRole(),
-                          "border-zinc-600 bg-transparent": !checked(),
+                          "border-[var(--ks-border-strong,#3f3f46)] bg-transparent": !checked(),
                         }}
                       >
                         <Show when={checked()}>
                           <svg
-                            class="w-3 h-3 text-zinc-900"
+                            class="w-3 h-3 text-[var(--ks-fg-on-primary,#0a0a0a)]"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke="currentColor"
@@ -336,12 +336,12 @@ export default function FormAdvancedSection(props: FormAdvancedSectionProps) {
                       <Show
                         when={coveringRole()}
                         fallback={
-                          <span class="text-[10px] text-zinc-600 capitalize">
+                          <span class="text-[10px] text-[var(--ks-fg-subtle,#71717a)] capitalize">
                             {m.role}
                           </span>
                         }
                       >
-                        <span class="text-[10px] text-amber-500/70">
+                        <span class="text-[10px] text-[color-mix(in_srgb,var(--ks-primary,#c9a961)_70%,transparent)]">
                           via All {coveringRole()!.label}s
                         </span>
                       </Show>
@@ -355,7 +355,7 @@ export default function FormAdvancedSection(props: FormAdvancedSectionProps) {
                   props.orgMembers.length === 0
                 }
               >
-                <p class="text-xs text-zinc-600 py-2">Loading members...</p>
+                <p class="text-xs text-[var(--ks-fg-subtle,#71717a)] py-2">Loading members...</p>
               </Show>
             </div>
           </div>

package/src/components/composite/LiveTimer.tsx

@@ -223,7 +223,7 @@ const SCENARIO_CONFIGS: Record<Scenario, ScenarioConfig> = {
   },
   [SCENARIO_COMPLETED]: {
     position: "left",
-    colorClass: "border border-zinc-600/60 text-zinc-400 hover:border-zinc-500",
+    colorClass: "border border-[color-mix(in_srgb,var(--ks-border-strong,#3f3f46)_60%,transparent)] text-[var(--ks-fg-muted,#a1a1aa)] hover:border-[var(--ks-fg-subtle,#71717a)]",
     label: "Completed",
     hidePercentage: false,
     shimmer: false,
@@ -238,8 +238,8 @@ const SCENARIO_CONFIGS: Record<Scenario, ScenarioConfig> = {
 };
 
 const COLOR_GREEN = "border border-green-600/60 text-green-400 hover:border-green-500";
-const COLOR_AMBER = "border border-amber-600/60 text-amber-400 hover:border-amber-500";
-const COLOR_RED = "border border-red-600/60 text-red-400 hover:border-red-500";
+const COLOR_AMBER = "border border-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_60%,transparent)] text-[var(--ks-accent,#fbbf24)] hover:border-[var(--ks-accent-hover,#fcd34d)]";
+const COLOR_RED = "border border-red-600/60 text-[var(--ks-danger-fg,#f87171)] hover:border-[var(--ks-danger,#ef4444)]";
 
 const LiveTimer: Component<LiveTimerProps> = (props) => {
   const [local, others] = splitProps(props, [

package/src/components/composite/MarkdownNotes.tsx

@@ -288,7 +288,7 @@ function MentionHoverCard(props: { clientId: number; name: string }): JSX.Elemen
     <span class="relative inline-block" onMouseEnter={handleEnter} onMouseLeave={handleLeave}>
       <a
         href={`/clients/${props.clientId}`}
-        class="inline-flex items-center rounded bg-zinc-800/50 px-1.5 py-0.5 text-[0.85em] text-emerald-400 hover:text-emerald-300 hover:bg-zinc-800/70 transition-colors"
+        class="inline-flex items-center rounded bg-[color-mix(in_srgb,var(--ks-surface-raised,#1a1a1a)_50%,transparent)] px-1.5 py-0.5 text-[0.85em] text-[var(--ks-success-fg,#34d399)] hover:text-[var(--ks-success,#10b981)] hover:bg-[color-mix(in_srgb,var(--ks-surface-raised,#1a1a1a)_70%,transparent)] transition-colors"
         data-testid="mention-chip"
         aria-describedby={open() && data() !== null ? hoverCardId : undefined}
         onFocus={handleFocus}
@@ -301,26 +301,26 @@ function MentionHoverCard(props: { clientId: number; name: string }): JSX.Elemen
           id={hoverCardId}
           role="tooltip"
           data-testid="mention-hover-card"
-          class="absolute left-0 top-full z-50 mt-1 inline-block min-w-[14rem] max-w-xs rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-xs text-zinc-100 shadow-lg"
+          class="absolute left-0 top-full z-50 mt-1 inline-block min-w-[14rem] max-w-xs rounded-md border border-[var(--ks-border-strong,#3f3f46)] bg-[var(--ks-overlay-surface,#18181b)] px-3 py-2 text-xs text-[var(--ks-fg,#ffffff)] shadow-lg"
           onMouseEnter={() => clearTimers()}
           onMouseLeave={handleLeave}
         >
-          <Show when={!loading() && data()} fallback={<span class="text-zinc-400">Loading…</span>}>
+          <Show when={!loading() && data()} fallback={<span class="text-[var(--ks-fg-muted,#a1a1aa)]">Loading…</span>}>
             {(c) => (
               <span class="block">
-                <span class="block font-medium text-zinc-100">{c().name_raw}</span>
+                <span class="block font-medium text-[var(--ks-fg,#ffffff)]">{c().name_raw}</span>
                 <Show when={c().email}>
-                  <span class="mt-1 block text-zinc-400" data-testid="mention-hover-email">
+                  <span class="mt-1 block text-[var(--ks-fg-muted,#a1a1aa)]" data-testid="mention-hover-email">
                     {c().email}
                   </span>
                 </Show>
                 <Show when={c().phone}>
-                  <span class="block text-zinc-400" data-testid="mention-hover-phone">
+                  <span class="block text-[var(--ks-fg-muted,#a1a1aa)]" data-testid="mention-hover-phone">
                     {c().phone}
                   </span>
                 </Show>
                 <Show when={!c().email && !c().phone}>
-                  <span class="mt-1 block text-zinc-500">No contact details on file.</span>
+                  <span class="mt-1 block text-[var(--ks-fg-subtle,#71717a)]">No contact details on file.</span>
                 </Show>
               </span>
             )}
@@ -339,7 +339,7 @@ function MentionChip(props: { name: string; clientId: number | null }): JSX.Elem
       when={props.clientId !== null}
       fallback={
         <span
-          class="inline-flex items-center rounded bg-zinc-800/40 px-1.5 py-0.5 text-[0.85em] text-zinc-500"
+          class="inline-flex items-center rounded bg-[color-mix(in_srgb,var(--ks-surface-raised,#1a1a1a)_40%,transparent)] px-1.5 py-0.5 text-[0.85em] text-[var(--ks-fg-subtle,#71717a)]"
           data-testid="mention-chip-unresolved"
         >
           @{props.name}
@@ -351,7 +351,7 @@ function MentionChip(props: { name: string; clientId: number | null }): JSX.Elem
         fallback={
           <a
             href={`/clients/${props.clientId}`}
-            class="inline-flex items-center rounded bg-zinc-800/50 px-1.5 py-0.5 text-[0.85em] text-emerald-400 hover:text-emerald-300 hover:bg-zinc-800/70 transition-colors"
+            class="inline-flex items-center rounded bg-[color-mix(in_srgb,var(--ks-surface-raised,#1a1a1a)_50%,transparent)] px-1.5 py-0.5 text-[0.85em] text-[var(--ks-success-fg,#34d399)] hover:text-[var(--ks-success,#10b981)] hover:bg-[color-mix(in_srgb,var(--ks-surface-raised,#1a1a1a)_70%,transparent)] transition-colors"
             data-testid="mention-chip"
           >
             @{props.name}
@@ -384,7 +384,7 @@ function RenderInline(props: { tokens: InlineToken[]; searchQuery?: string }): J
           );
         if (t.kind === "code")
           return (
-            <code class="px-1 py-0.5 rounded bg-zinc-800/60 text-[0.9em] text-zinc-200">
+            <code class="px-1 py-0.5 rounded bg-[color-mix(in_srgb,var(--ks-surface-raised,#1a1a1a)_60%,transparent)] text-[0.9em] text-[var(--ks-fg-muted,#a1a1aa)]">
               {props.searchQuery ? highlightMatch(t.value, props.searchQuery) : t.value}
             </code>
           );
@@ -394,7 +394,7 @@ function RenderInline(props: { tokens: InlineToken[]; searchQuery?: string }): J
               href={t.href}
               target="_blank"
               rel="noopener noreferrer"
-              class="text-emerald-400 hover:text-emerald-300 underline"
+              class="text-[var(--ks-success-fg,#34d399)] hover:text-[var(--ks-success,#10b981)] underline"
             >
               <RenderInline tokens={t.children} searchQuery={props.searchQuery} />
             </a>

package/src/components/composite/MentionTextarea.tsx

@@ -35,9 +35,9 @@ export interface MentionTextareaProps {
 }
 
 const CHIP_BASE_CLASSES =
-  "inline-flex items-baseline align-baseline rounded bg-amber-500/15 text-amber-300 px-1.5 py-px text-[0.9em] mx-px";
+  "inline-flex items-baseline align-baseline rounded bg-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_15%,transparent)] text-[var(--ks-accent-hover,#fcd34d)] px-1.5 py-px text-[0.9em] mx-px";
 const CHIP_UNRESOLVED_CLASSES =
-  "inline-flex items-baseline align-baseline rounded bg-zinc-700/40 text-zinc-400 px-1.5 py-px text-[0.9em] mx-px";
+  "inline-flex items-baseline align-baseline rounded bg-[color-mix(in_srgb,var(--ks-input-border,#3f3f46)_40%,transparent)] text-[var(--ks-fg-muted,#a1a1aa)] px-1.5 py-px text-[0.9em] mx-px";
 
 function buildMentionChip(name: string, idStr: string): HTMLSpanElement {
   const span = document.createElement("span");
@@ -418,7 +418,7 @@ export default function MentionTextarea(props: MentionTextareaProps): JSX.Elemen
         <Show when={isEmpty() && props.placeholder}>
           <div
             aria-hidden="true"
-            class={`${props.class ?? ""} pointer-events-none absolute inset-0 text-sm !text-zinc-500`}
+            class={`${props.class ?? ""} pointer-events-none absolute inset-0 text-sm !text-[var(--ks-fg-subtle,#71717a)]`}
           >
             {props.placeholder}
           </div>
@@ -430,17 +430,17 @@ export default function MentionTextarea(props: MentionTextareaProps): JSX.Elemen
           <div
             ref={popupRef}
             data-testid="mention-popup"
-            class="z-[120] rounded-md border border-zinc-700 bg-zinc-900/95 backdrop-blur shadow-xl overflow-hidden flex flex-col"
+            class="z-[120] 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={popupStyle()}
           >
             <Show when={loading() && results().length === 0}>
-              <div class="px-3 py-3 text-xs text-zinc-500 flex items-center gap-2">
+              <div class="px-3 py-3 text-xs text-[var(--ks-fg-subtle,#71717a)] flex items-center gap-2">
                 <Loader2 size={12} class="animate-spin" />
                 Searching clients…
               </div>
             </Show>
             <Show when={!loading() && results().length === 0}>
-              <div class="px-3 py-3 text-xs text-zinc-500" data-testid="mention-popup-empty">
+              <div class="px-3 py-3 text-xs text-[var(--ks-fg-subtle,#71717a)]" data-testid="mention-popup-empty">
                 {query() ? `No clients match "${query()}"` : "Type to search clients…"}
               </div>
             </Show>
@@ -464,14 +464,14 @@ export default function MentionTextarea(props: MentionTextareaProps): JSX.Elemen
                         onMouseEnter={() => setActiveIdx(idx())}
                         onClick={() => insertSelected(c)}
                         class={`w-full text-left px-3 py-2 transition-colors flex items-start gap-2 cursor-pointer ${
-                          idx() === activeIdx() ? "bg-amber-500/15" : "hover:bg-amber-500/10"
+                          idx() === activeIdx() ? "bg-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_15%,transparent)]" : "hover:bg-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_10%,transparent)]"
                         }`}
                       >
-                        <UserRound size={14} class="text-zinc-500 shrink-0 mt-0.5" />
+                        <UserRound 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">{c.name_raw}</span>
+                          <span class="block text-sm text-[var(--ks-fg,#ffffff)] truncate">{c.name_raw}</span>
                           <Show when={c.email || c.phone}>
-                            <span class="block text-[11px] text-zinc-500 truncate">
+                            <span class="block text-[11px] text-[var(--ks-fg-subtle,#71717a)] truncate">
                               {[c.email, c.phone].filter(Boolean).join(" · ")}
                             </span>
                           </Show>

package/src/components/composite/NotFound.tsx

@@ -63,10 +63,10 @@ export default function NotFound(props: NotFoundProps): JSX.Element {
   const showTitle = () => local.title !== "";
   const buttonClass =
     "inline-flex items-center justify-center gap-2 rounded-md border " +
-    "border-amber-600/60 bg-amber-600/20 px-5 py-2.5 text-sm font-semibold " +
-    "text-amber-400 transition-colors hover:border-amber-500 " +
-    "hover:bg-amber-600/30 focus:outline-none focus-visible:ring-2 " +
-    "focus-visible:ring-amber-500/60";
+    "border-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_60%,transparent)] bg-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_20%,transparent)] px-5 py-2.5 text-sm font-semibold " +
+    "text-[var(--ks-accent,#fbbf24)] transition-colors hover:border-[var(--ks-accent,#fbbf24)] " +
+    "hover:bg-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_30%,transparent)] focus:outline-none focus-visible:ring-2 " +
+    "focus-visible:ring-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_60%,transparent)]";
 
   return (
     <div
@@ -83,16 +83,16 @@ export default function NotFound(props: NotFoundProps): JSX.Element {
         </Show>
 
         <Show when={showTitle()}>
-          <h1 class="text-4xl md:text-6xl font-bold text-amber-500 mb-4">
+          <h1 class="text-4xl md:text-6xl font-bold text-[var(--ks-accent,#fbbf24)] mb-4">
             {local.title || "404"}
           </h1>
         </Show>
 
-        <h2 class="text-xl md:text-2xl font-bold text-white mb-3">
+        <h2 class="text-xl md:text-2xl font-bold text-[var(--ks-fg,#ffffff)] mb-3">
           {local.heading || "Page Not Found"}
         </h2>
 
-        <p class="text-sm text-zinc-400 max-w-md mb-8">
+        <p class="text-sm text-[var(--ks-fg-muted,#a1a1aa)] max-w-md mb-8">
           {local.message ||
             "The page you're looking for doesn't exist or has been moved."}
         </p>

package/src/components/composite/PaymentAccountPicker.tsx

@@ -197,12 +197,12 @@ export default function PaymentAccountPicker(props: PaymentAccountPickerProps):
             ? "Ask an admin to grant access to a financial account before charging."
             : undefined
         }
-        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-accent,#fbbf24)_40%,transparent)] hover:bg-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_5%,transparent)] transition-colors text-sm text-left cursor-pointer disabled:cursor-not-allowed disabled:opacity-60"
         aria-haspopup="listbox"
         aria-expanded={open()}
       >
         <Show when={loading()} fallback={null}>
-          <Loader2 size={14} class="animate-spin text-zinc-500 shrink-0" aria-hidden="true" />
+          <Loader2 size={14} class="animate-spin text-[var(--ks-fg-subtle,#71717a)] shrink-0" aria-hidden="true" />
         </Show>
         <Show when={!loading()}>
           <Show
@@ -212,13 +212,13 @@ export default function PaymentAccountPicker(props: PaymentAccountPickerProps):
                 when={noAccounts()}
                 fallback={
                   <>
-                    <Banknote size={16} class="shrink-0 text-zinc-400" aria-hidden="true" />
-                    <span class="text-zinc-500 italic">Choose payment account</span>
+                    <Banknote size={16} class="shrink-0 text-[var(--ks-fg-muted,#a1a1aa)]" aria-hidden="true" />
+                    <span class="text-[var(--ks-fg-subtle,#71717a)] italic">Choose payment account</span>
                   </>
                 }
               >
-                <Banknote size={16} class="shrink-0 text-zinc-500" aria-hidden="true" />
-                <span class="text-zinc-500 italic">No accessible accounts</span>
+                <Banknote size={16} class="shrink-0 text-[var(--ks-fg-subtle,#71717a)]" aria-hidden="true" />
+                <span class="text-[var(--ks-fg-subtle,#71717a)] italic">No accessible accounts</span>
               </Show>
             }
           >
@@ -226,8 +226,8 @@ export default function PaymentAccountPicker(props: PaymentAccountPickerProps):
               <>
                 <AccountAvatar account={acct()} size={28} />
                 <span class="flex-1 min-w-0">
-                  <span class="block truncate text-zinc-100 font-medium">{acct().name}</span>
-                  <span class="block truncate text-[11px] text-zinc-500">
+                  <span class="block truncate text-[var(--ks-fg,#ffffff)] font-medium">{acct().name}</span>
+                  <span class="block truncate text-[11px] text-[var(--ks-fg-subtle,#71717a)]">
                     {TYPE_LABELS[acct().type] ?? acct().type}
                   </span>
                 </span>
@@ -242,33 +242,33 @@ export default function PaymentAccountPicker(props: PaymentAccountPickerProps):
           <div
             ref={popupRef}
             data-testid="payment-account-picker-popup"
-            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()}
           >
-            <div class="px-3 py-2 border-b border-zinc-800 flex items-center gap-2">
-              <Banknote size={14} class="text-zinc-500 shrink-0" aria-hidden="true" />
-              <span class="text-xs uppercase tracking-widest text-zinc-500 font-bold">
+            <div class="px-3 py-2 border-b border-[var(--ks-border,rgba(39,39,42,0.5))] flex items-center gap-2">
+              <Banknote size={14} class="text-[var(--ks-fg-subtle,#71717a)] shrink-0" aria-hidden="true" />
+              <span class="text-xs uppercase tracking-widest text-[var(--ks-fg-subtle,#71717a)] font-bold">
                 Payment account
               </span>
               <Show when={loading()}>
-                <Loader2 size={14} class="animate-spin text-zinc-500 ml-auto shrink-0" />
+                <Loader2 size={14} class="animate-spin text-[var(--ks-fg-subtle,#71717a)] ml-auto shrink-0" />
               </Show>
             </div>
             <div class="flex-1 overflow-y-auto">
               <Show when={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)]">
                   {error()}
                 </div>
               </Show>
               <Show when={!loading() && !error() && accounts().length === 0}>
-                <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">
                   No accessible accounts. Ask an admin to grant access.
                 </div>
               </Show>
               <For each={sections()}>
                 {([type, list]) => (
                   <div>
-                    <div class="px-3 pt-3 pb-1 text-[10px] uppercase tracking-widest text-zinc-600 font-semibold">
+                    <div class="px-3 pt-3 pb-1 text-[10px] uppercase tracking-widest text-[var(--ks-fg-subtle,#71717a)] font-semibold">
                       {TYPE_LABELS[type] ?? type}
                     </div>
                     <ul
@@ -285,14 +285,14 @@ export default function PaymentAccountPicker(props: PaymentAccountPickerProps):
                                 type="button"
                                 data-testid={`payment-account-picker-result-${a.id}`}
                                 onClick={() => select(a)}
-                                class="w-full text-left px-3 py-2 hover:bg-amber-500/10 transition-colors flex items-center gap-2 cursor-pointer"
+                                class="w-full text-left px-3 py-2 hover:bg-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_10%,transparent)] transition-colors flex items-center gap-2 cursor-pointer"
                               >
                                 <AccountAvatar account={a} size={28} />
-                                <span class="flex-1 min-w-0 text-sm text-zinc-100 truncate">
+                                <span class="flex-1 min-w-0 text-sm text-[var(--ks-fg,#ffffff)] truncate">
                                   {a.name}
                                 </span>
                                 <Show when={selected()}>
-                                  <span class="text-amber-400 shrink-0">✓</span>
+                                  <span class="text-[var(--ks-accent,#fbbf24)] shrink-0">✓</span>
                                 </Show>
                               </button>
                             </li>