@kahitsan/ksui 0.33.0 → 0.34.1

package/src/components/composite/TransferAccountsPicker.tsx

@@ -40,11 +40,11 @@ function AccountTile(p: AccountTileProps): JSX.Element {
       onClick={p.onEditRequest}
       class={`group flex flex-1 min-w-0 items-center gap-3 border px-4 py-3 text-left transition-colors cursor-pointer ${p.clipClass}`}
       classList={{
-        "border-blue-500/40 bg-blue-500/5 hover:bg-blue-500/10":
+        "border-[color-mix(in_srgb,var(--ks-info,#38bdf8)_40%,transparent)] bg-[color-mix(in_srgb,var(--ks-info,#38bdf8)_5%,transparent)] hover:bg-[color-mix(in_srgb,var(--ks-info,#38bdf8)_10%,transparent)]":
           isFilled() && isFrom(),
-        "border-amber-500/40 bg-amber-500/5 hover:bg-amber-500/10":
+        "border-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_40%,transparent)] bg-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_5%,transparent)] hover:bg-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_10%,transparent)]":
           isFilled() && !isFrom(),
-        "border-dashed border-zinc-700 bg-zinc-900/40 hover:border-amber-500/50 hover:bg-zinc-900/60":
+        "border-dashed border-[var(--ks-input-border,#3f3f46)] bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_40%,transparent)] hover:border-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_50%,transparent)] hover:bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_60%,transparent)]":
           !isFilled(),
       }}
       aria-label={
@@ -57,7 +57,7 @@ function AccountTile(p: AccountTileProps): JSX.Element {
         when={p.account}
         keyed
         fallback={
-          <span class="flex h-8 w-8 items-center justify-center text-zinc-500">
+          <span class="flex h-8 w-8 items-center justify-center text-[var(--ks-fg-subtle,#71717a)]">
             <Plus size={18} />
           </span>
         }
@@ -66,7 +66,7 @@ function AccountTile(p: AccountTileProps): JSX.Element {
           <AccountAvatar
             account={a}
             size={28}
-            iconClass={isFrom() ? "text-blue-300" : "text-amber-300"}
+            iconClass={isFrom() ? "text-[var(--ks-info,#38bdf8)]" : "text-[var(--ks-accent-hover,#fcd34d)]"}
           />
         )}
       </Show>
@@ -74,9 +74,9 @@ function AccountTile(p: AccountTileProps): JSX.Element {
         <span
           class="text-[10px] font-semibold uppercase tracking-widest"
           classList={{
-            "text-blue-300": isFilled() && isFrom(),
-            "text-amber-300": isFilled() && !isFrom(),
-            "text-zinc-500": !isFilled(),
+            "text-[var(--ks-info,#38bdf8)]": isFilled() && isFrom(),
+            "text-[var(--ks-accent-hover,#fcd34d)]": isFilled() && !isFrom(),
+            "text-[var(--ks-fg-subtle,#71717a)]": !isFilled(),
           }}
         >
           {isFrom() ? "From" : "To"}
@@ -85,23 +85,23 @@ function AccountTile(p: AccountTileProps): JSX.Element {
           when={p.account}
           keyed
           fallback={
-            <span class="text-sm text-zinc-500">{p.emptyHint}</span>
+            <span class="text-sm text-[var(--ks-fg-subtle,#71717a)]">{p.emptyHint}</span>
           }
         >
           {(a) => (
             <>
-              <span class="truncate text-sm font-semibold text-zinc-100">
+              <span class="truncate text-sm font-semibold text-[var(--ks-fg,#ffffff)]">
                 {a.name}
               </span>
               <Show when={a.balance != null}>
-                <span class="flex items-baseline gap-1 text-[11px] tabular-nums text-zinc-400">
+                <span class="flex items-baseline gap-1 text-[11px] tabular-nums text-[var(--ks-fg-muted,#a1a1aa)]">
                   <span class="truncate">{formatPHP(a.balance!)}</span>
                   <Show when={p.delta !== 0}>
                     <span
                       class="whitespace-nowrap font-semibold"
                       classList={{
-                        "text-red-400": p.delta < 0,
-                        "text-emerald-400": p.delta > 0,
+                        "text-[var(--ks-danger-fg,#f87171)]": p.delta < 0,
+                        "text-[var(--ks-success-fg,#34d399)]": p.delta > 0,
                       }}
                       data-testid={`transactions-form-transfer-delta-${p.role}`}
                     >
@@ -168,7 +168,7 @@ export default function TransferAccountsPicker(
               type="button"
               data-testid="transactions-form-transfer-swap"
               onClick={swap}
-              class="flex h-9 w-9 shrink-0 items-center justify-center self-center border border-zinc-700 bg-zinc-900 text-zinc-300 transition-colors hover:border-amber-500/60 hover:text-amber-300 cursor-pointer ks-hud-clip-button max-sm:rotate-90"
+              class="flex h-9 w-9 shrink-0 items-center justify-center self-center border border-[var(--ks-input-border,#3f3f46)] bg-[var(--ks-input-bg,#18181b)] text-[var(--ks-fg,#ffffff)] transition-colors hover:border-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_60%,transparent)] hover:text-[var(--ks-accent-hover,#fcd34d)] cursor-pointer ks-hud-clip-button max-sm:rotate-90"
               aria-label="Swap source and destination"
               title="Swap source and destination"
             >
@@ -193,8 +193,8 @@ export default function TransferAccountsPicker(
                   x2="56"
                   y2="7"
                 >
-                  <stop offset="0" stop-color="#3b82f6" />
-                  <stop offset="1" stop-color="#f59e0b" />
+                  <stop offset="0" style={{ "stop-color": "var(--ks-info, #38bdf8)" }} />
+                  <stop offset="1" style={{ "stop-color": "var(--ks-warning, #f59e0b)" }} />
                 </linearGradient>
               </defs>
               <line
@@ -206,7 +206,7 @@ export default function TransferAccountsPicker(
                 stroke-width="2"
                 class="fin-flow-dash"
               />
-              <path d="M44 1 L56 7 L44 13 Z" fill="#f59e0b" />
+              <path d="M44 1 L56 7 L44 13 Z" style={{ fill: "var(--ks-warning, #f59e0b)" }} />
             </svg>
             <svg
               viewBox="0 0 14 40"
@@ -221,8 +221,8 @@ export default function TransferAccountsPicker(
                   x2="7"
                   y2="40"
                 >
-                  <stop offset="0" stop-color="#3b82f6" />
-                  <stop offset="1" stop-color="#f59e0b" />
+                  <stop offset="0" style={{ "stop-color": "var(--ks-info, #38bdf8)" }} />
+                  <stop offset="1" style={{ "stop-color": "var(--ks-warning, #f59e0b)" }} />
                 </linearGradient>
               </defs>
               <line
@@ -234,7 +234,7 @@ export default function TransferAccountsPicker(
                 stroke-width="2"
                 class="fin-flow-dash"
               />
-              <path d="M1 30 L13 30 L7 40 Z" fill="#f59e0b" />
+              <path d="M1 30 L13 30 L7 40 Z" style={{ fill: "var(--ks-warning, #f59e0b)" }} />
             </svg>
           </div>
         </Show>

package/src/components/composite/TransferFeeChip.tsx

@@ -13,9 +13,9 @@ export default function TransferFeeChip(props: TransferFeeChipProps) {
       onClick={props.onToggle}
       class="flex items-center gap-1.5 self-center rounded-md border px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wider transition-colors cursor-pointer"
       classList={{
-        "border-blue-500/50 bg-blue-500/15 text-blue-300 hover:bg-blue-500/25":
+        "border-[color-mix(in_srgb,var(--ks-info,#38bdf8)_50%,transparent)] bg-[color-mix(in_srgb,var(--ks-info,#38bdf8)_15%,transparent)] text-[var(--ks-info-fg,#7dd3fc)] hover:bg-[color-mix(in_srgb,var(--ks-info,#38bdf8)_25%,transparent)]":
           props.enabled,
-        "border-zinc-700 bg-zinc-950/60 text-zinc-400 hover:border-blue-500/40 hover:text-blue-300":
+        "border-[var(--ks-input-border,#3f3f46)] bg-[color-mix(in_srgb,var(--ks-surface,#0f0f0f)_60%,transparent)] text-[var(--ks-fg-muted,#a1a1aa)] hover:border-[color-mix(in_srgb,var(--ks-info,#38bdf8)_40%,transparent)] hover:text-[var(--ks-info-fg,#7dd3fc)]":
           !props.enabled,
       }}
       aria-pressed={props.enabled}

package/src/components/composite/VoucherPicker.tsx

@@ -229,15 +229,15 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
         onClick={() => !props.disabled && setOpen((o) => !o)}
         class={`${props.compact ? "inline-flex" : "w-full flex"} items-center gap-2 ${
           props.compact ? "px-2.5 py-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`}
+        } rounded-lg bg-[color-mix(in_srgb,var(--ks-border,rgba(39,39,42,0.5))_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={open()}
       >
-        <Ticket size={16} class="shrink-0 text-zinc-400" />
-        <Show when={props.selected} fallback={<span class="text-zinc-500 italic">No voucher</span>}>
+        <Ticket size={16} class="shrink-0 text-[var(--ks-fg-muted,#a1a1aa)]" />
+        <Show when={props.selected} fallback={<span class="text-[var(--ks-fg-subtle,#71717a)] italic">No voucher</span>}>
           <span class="flex-1 min-w-0">
-            <span class="block truncate text-zinc-100 font-medium">{props.selected!.code}</span>
-            <span class="block truncate text-[11px] text-emerald-400">
+            <span class="block truncate text-[var(--ks-fg,#ffffff)] font-medium">{props.selected!.code}</span>
+            <span class="block truncate text-[11px] text-[var(--ks-success-fg,#34d399)]">
               {formatVoucherDescription(props.selected!)}
               <Show when={previewDiscount() > 0}> · {formatCurrency(previewDiscount())} off</Show>
             </span>
@@ -246,7 +246,7 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
             type="button"
             data-testid="voucher-picker-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="Remove voucher"
             aria-label="Remove voucher"
           >
@@ -260,14 +260,14 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
           <div
             ref={popupRef}
             data-testid="voucher-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-input-border,#3f3f46)] bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_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">
-              <Ticket size={14} class="text-zinc-500 shrink-0" />
-              <span class="text-xs uppercase tracking-widest text-zinc-500 font-bold">Vouchers</span>
+            <div class="px-3 py-2 border-b border-[var(--ks-border-strong,#3f3f46)] flex items-center gap-2">
+              <Ticket size={14} class="text-[var(--ks-fg-subtle,#71717a)] shrink-0" />
+              <span class="text-xs uppercase tracking-widest text-[var(--ks-fg-subtle,#71717a)] font-bold">Vouchers</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>
             <ul
@@ -277,7 +277,7 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
             >
               <Show when={error()}>
                 <li>
-                  <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>
                 </li>
@@ -286,7 +286,7 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
                 when={!loading() && !error() && applicable().length === 0 && inapplicable().length === 0}
               >
                 <li>
-                  <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 vouchers available.
                   </div>
                 </li>
@@ -301,20 +301,20 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
                         type="button"
                         data-testid={`voucher-picker-result-${v.id}`}
                         onClick={() => select(v)}
-                        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"
                       >
-                        <Ticket size={14} class="shrink-0 mt-0.5 text-emerald-400" aria-hidden="true" />
+                        <Ticket size={14} class="shrink-0 mt-0.5 text-[var(--ks-success-fg,#34d399)]" aria-hidden="true" />
                         <span class="flex-1 min-w-0">
-                          <span class="block text-sm text-zinc-100 truncate">{v.code}</span>
-                          <span class="block text-[11px] text-zinc-500 truncate">
+                          <span class="block text-sm text-[var(--ks-fg,#ffffff)] truncate">{v.code}</span>
+                          <span class="block text-[11px] text-[var(--ks-fg-subtle,#71717a)] truncate">
                             {formatVoucherDescription(v)}
                           </span>
                         </span>
-                        <span class="text-xs text-emerald-300 shrink-0 mt-0.5 font-mono">
+                        <span class="text-xs text-[var(--ks-success-fg,#34d399)] shrink-0 mt-0.5 font-mono">
                           {formatCurrency(discount())}
                         </span>
                         <Show when={selected()}>
-                          <span class="text-amber-400 shrink-0 mt-0.5">✓</span>
+                          <span class="text-[var(--ks-accent,#fbbf24)] shrink-0 mt-0.5">✓</span>
                         </Show>
                       </button>
                     </li>
@@ -323,7 +323,7 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
               </For>
               <Show when={inapplicable().length > 0}>
                 <li>
-                  <div class="px-3 pt-3 pb-1 text-[10px] uppercase tracking-widest text-zinc-600 font-semibold border-t border-zinc-800 mt-1">
+                  <div class="px-3 pt-3 pb-1 text-[10px] uppercase tracking-widest text-[var(--ks-fg-subtle,#71717a)] font-semibold border-t border-[var(--ks-border-strong,#3f3f46)] mt-1">
                     Not applicable to this cart
                   </div>
                 </li>
@@ -335,10 +335,10 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
                         class="w-full text-left px-3 py-2 flex items-start gap-2 opacity-50 cursor-not-allowed"
                         aria-disabled="true"
                       >
-                        <Ticket size={14} class="shrink-0 mt-0.5 text-zinc-500" aria-hidden="true" />
+                        <Ticket size={14} class="shrink-0 mt-0.5 text-[var(--ks-fg-subtle,#71717a)]" aria-hidden="true" />
                         <span class="flex-1 min-w-0">
-                          <span class="block text-sm text-zinc-300 truncate">{v.code}</span>
-                          <span class="block text-[11px] text-zinc-500 truncate">
+                          <span class="block text-sm text-[var(--ks-fg,#ffffff)] truncate">{v.code}</span>
+                          <span class="block text-[11px] text-[var(--ks-fg-subtle,#71717a)] truncate">
                             {formatVoucherDescription(v)}
                           </span>
                         </span>
@@ -349,12 +349,12 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
               </Show>
             </ul>
             <Show when={props.selected}>
-              <div class="border-t border-zinc-800">
+              <div class="border-t border-[var(--ks-border-strong,#3f3f46)]">
                 <button
                   type="button"
                   data-testid="voucher-picker-clear-from-list"
                   onClick={() => select(null)}
-                  class="w-full text-left px-3 py-2 text-xs text-red-400 hover:bg-red-500/10 transition-colors flex items-center gap-2 cursor-pointer"
+                  class="w-full text-left px-3 py-2 text-xs text-[var(--ks-danger-fg,#f87171)] hover:bg-[color-mix(in_srgb,var(--ks-danger,#ef4444)_10%,transparent)] transition-colors flex items-center gap-2 cursor-pointer"
                 >
                   <X size={12} />
                   <span>Remove voucher</span>

package/src/components/composite/resource/ResourceForm.tsx

@@ -76,7 +76,7 @@ export function ResourceForm(props: ResourceFormProps) {
       <Show when={props.error}>
         <div
           data-testid={`${props.spec.testIdPrefix}-form-error`}
-          class="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-400"
+          class="rounded-lg border border-[color-mix(in_srgb,var(--ks-danger,#ef4444)_30%,transparent)] bg-[color-mix(in_srgb,var(--ks-danger,#ef4444)_10%,transparent)] px-3 py-2 text-sm text-[var(--ks-danger-fg,#f87171)]"
         >
           {props.error}
         </div>

package/src/components/composite/resource/ResourcePage.tsx

@@ -316,7 +316,7 @@ export function ResourcePage<T extends ResourceRow>(
                       onChange={(e) =>
                         setFilterState(f.param, e.currentTarget.value)
                       }
-                      class="rounded-lg border border-zinc-800/50 bg-zinc-900 px-3 py-1.5 text-xs text-zinc-400 cursor-pointer"
+                      class="rounded-lg border border-[var(--ks-border,rgba(39,39,42,0.5))] bg-[var(--ks-input-bg,#18181b)] px-3 py-1.5 text-xs text-[var(--ks-fg-muted,#a1a1aa)] cursor-pointer"
                     >
                       <For each={f.options}>
                         {(o) => <option value={o.value}>{o.label}</option>}
@@ -344,7 +344,7 @@ export function ResourcePage<T extends ResourceRow>(
         >
           <div data-testid={`${spec.testIdPrefix}-create-modal`}>
             <div class="flex items-center justify-between mb-6">
-              <h2 class="text-lg font-semibold text-zinc-100">
+              <h2 class="text-lg font-semibold text-[var(--ks-fg,#ffffff)]">
                 {spec.labels.createTitle}
               </h2>
               <button
@@ -352,7 +352,7 @@ export function ResourcePage<T extends ResourceRow>(
                   setCreateOpen(false);
                   resetForm();
                 }}
-                class="text-zinc-500 hover:text-zinc-300 cursor-pointer"
+                class="text-[var(--ks-fg-subtle,#71717a)] hover:text-[var(--ks-fg,#ffffff)] cursor-pointer"
                 aria-label="Close"
               >
                 <X size={20} />
@@ -387,7 +387,7 @@ export function ResourcePage<T extends ResourceRow>(
           >
             <div data-testid={`${spec.testIdPrefix}-detail-modal`}>
               <div class="flex items-center justify-between mb-6">
-                <h2 class="text-lg font-semibold text-zinc-100">
+                <h2 class="text-lg font-semibold text-[var(--ks-fg,#ffffff)]">
                   {editing()
                     ? spec.labels.editTitle
                     : String(row()[spec.labels.titleField] ?? "")}
@@ -396,7 +396,7 @@ export function ResourcePage<T extends ResourceRow>(
                   <Show when={!editing() && canEdit()}>
                     <button
                       onClick={startEdit}
-                      class="text-zinc-500 hover:text-amber-400 cursor-pointer p-1"
+                      class="text-[var(--ks-fg-subtle,#71717a)] hover:text-[var(--ks-accent,#fbbf24)] cursor-pointer p-1"
                       title="Edit"
                       aria-label="Edit"
                     >
@@ -407,7 +407,7 @@ export function ResourcePage<T extends ResourceRow>(
                     {row()[spec.softDeleteField] ? (
                       <button
                         onClick={() => handleArchive(row().id)}
-                        class="text-zinc-500 hover:text-red-400 cursor-pointer p-1"
+                        class="text-[var(--ks-fg-subtle,#71717a)] hover:text-[var(--ks-danger-fg,#f87171)] cursor-pointer p-1"
                         title="Archive"
                         aria-label="Archive"
                       >
@@ -416,7 +416,7 @@ export function ResourcePage<T extends ResourceRow>(
                     ) : (
                       <button
                         onClick={() => handleRestore(row().id)}
-                        class="text-zinc-500 hover:text-emerald-400 cursor-pointer p-1"
+                        class="text-[var(--ks-fg-subtle,#71717a)] hover:text-[var(--ks-success-fg,#34d399)] cursor-pointer p-1"
                         title="Restore"
                         aria-label="Restore"
                       >
@@ -429,7 +429,7 @@ export function ResourcePage<T extends ResourceRow>(
                       setDetailRow(null);
                       setEditing(false);
                     }}
-                    class="text-zinc-500 hover:text-zinc-300 cursor-pointer p-1"
+                    class="text-[var(--ks-fg-subtle,#71717a)] hover:text-[var(--ks-fg,#ffffff)] cursor-pointer p-1"
                     aria-label="Close"
                   >
                     <X size={20} />

package/src/components/composite/resource/cells.tsx

@@ -18,7 +18,7 @@ export function renderCell(
       return (
         <button
           data-testid={`${spec.testIdPrefix}-row-${row.id}`}
-          class="text-left text-zinc-200 hover:text-amber-400 transition-colors cursor-pointer"
+          class="text-left text-[var(--ks-fg,#ffffff)] hover:text-[var(--ks-accent,#fbbf24)] transition-colors cursor-pointer"
           onClick={() => onTitleClick(row.id)}
         >
           {String(raw ?? "")}
@@ -26,7 +26,7 @@ export function renderCell(
       );
     case "enum": {
       const key = String(raw ?? "");
-      return <span class="text-zinc-400 text-sm capitalize">{r.labels[key] || key}</span>;
+      return <span class="text-[var(--ks-fg-muted,#a1a1aa)] text-sm capitalize">{r.labels[key] || key}</span>;
     }
     case "status": {
       const active = Boolean(raw);
@@ -35,7 +35,10 @@ export function renderCell(
     }
     case "text":
     default: {
-      const cls = (r.type === "text" && r.muted) ? "text-zinc-500 text-sm" : "text-zinc-400 text-sm";
+      const cls =
+        r.type === "text" && r.muted
+          ? "text-[var(--ks-fg-subtle,#71717a)] text-sm"
+          : "text-[var(--ks-fg-muted,#a1a1aa)] text-sm";
       const text = raw === null || raw === undefined || raw === "" ? "—" : String(raw);
       return <span class={cls}>{text}</span>;
     }

package/src/utils/INPUT_CLASS.ts

@@ -1,7 +1,10 @@
 // Shared Tailwind class string for text inputs across plugin forms: a
-// full-width rounded input with the dark zinc surface and the amber focus
+// full-width rounded input with the themed input surface and the amber focus
 // ring. Copied verbatim from the packages remote UI atoms so the shared kit
 // owns the single source of truth. Pure string constant, no dependencies.
-
+//
+// bg reads --ks-input-bg (not --ks-border, THEME-SPEC §1.2's dedicated input
+// surface token) — the border token happens to be a plausible dark literal so
+// this silently looked right in the `dark` theme and only broke elsewhere.
 export const INPUT_CLASS =
-  "w-full rounded-lg border border-zinc-700 bg-zinc-800/50 px-3 py-2 text-sm text-zinc-200 focus:border-amber-500/50 focus:outline-none";
+  "w-full rounded-lg border border-[var(--ks-input-border,#3f3f46)] bg-[var(--ks-input-bg,#18181b)] px-3 py-2 text-sm text-[var(--ks-fg,#ffffff)] focus:border-[color-mix(in_srgb,var(--ks-focus-ring,#c9a961)_50%,transparent)] focus:outline-none";

package/src/utils/account-icons.ts

@@ -74,17 +74,39 @@ export function getAccountIcon(account: { icon?: string | null; type: string }):
   return DEFAULT_BY_TYPE[account.type] ?? Banknote;
 }
 
+// bank has no exact-hue token (blue-400/500 family isn't in §1.2), so it
+// drifts to the nearest semantic bucket (--ks-info, sky). e_wallet/capital's
+// bg (amber-500) and border (amber-400) are each an EXACT hex match to
+// --ks-warning and --ks-accent respectively, so those keep zero-regression
+// color-mix rather than sharing one base. Same for cash: bg is an exact
+// --ks-success match, border an exact --ks-success-fg match.
 const DEFAULT_TONE_BY_TYPE: Record<string, { text: string; bg: string; border: string }> = {
-  bank: { text: "text-blue-400", bg: "bg-blue-500/10", border: "border-blue-400/40" },
-  e_wallet: { text: "text-amber-400", bg: "bg-amber-500/10", border: "border-amber-400/40" },
-  cash: { text: "text-emerald-400", bg: "bg-emerald-500/10", border: "border-emerald-400/40" },
-  capital: { text: "text-amber-400", bg: "bg-amber-500/10", border: "border-amber-400/40" },
+  bank: {
+    text: "text-[var(--ks-info,#38bdf8)]",
+    bg: "bg-[color-mix(in_srgb,var(--ks-info,#38bdf8)_10%,transparent)]",
+    border: "border-[color-mix(in_srgb,var(--ks-info,#38bdf8)_40%,transparent)]",
+  },
+  e_wallet: {
+    text: "text-[var(--ks-accent,#fbbf24)]",
+    bg: "bg-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_10%,transparent)]",
+    border: "border-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_40%,transparent)]",
+  },
+  cash: {
+    text: "text-[var(--ks-success-fg,#34d399)]",
+    bg: "bg-[color-mix(in_srgb,var(--ks-success,#10b981)_10%,transparent)]",
+    border: "border-[color-mix(in_srgb,var(--ks-success-fg,#34d399)_40%,transparent)]",
+  },
+  capital: {
+    text: "text-[var(--ks-accent,#fbbf24)]",
+    bg: "bg-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_10%,transparent)]",
+    border: "border-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_40%,transparent)]",
+  },
 };
 
 const FALLBACK_TONE = {
-  text: "text-zinc-300",
-  bg: "bg-zinc-700/30",
-  border: "border-zinc-700/60",
+  text: "text-[var(--ks-fg-muted,#a1a1aa)]",
+  bg: "bg-[color-mix(in_srgb,var(--ks-border-strong,#3f3f46)_30%,transparent)]",
+  border: "border-[color-mix(in_srgb,var(--ks-border-strong,#3f3f46)_60%,transparent)]",
 };
 
 // Per-type accent tone for an account chip, or the account's own custom color.

package/src/utils/highlight.tsx

@@ -9,16 +9,15 @@
 // still pass their own `markClass` to override.
 
 import { type JSX } from "solid-js";
+import { injectCSS } from "./inject-css";
 
 const MARK_STYLE_ID = "ksui-mark-style";
 
 function ensureMarkStyle(): void {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(MARK_STYLE_ID)) return;
-  const style = document.createElement("style");
-  style.id = MARK_STYLE_ID;
-  style.textContent = `.ksui-mark{background-color:rgba(245,158,11,0.3);color:inherit;border-radius:2px;}`;
-  document.head.appendChild(style);
+  injectCSS(
+    MARK_STYLE_ID,
+    `.ksui-mark{background-color:color-mix(in srgb, var(--ks-warning, #f59e0b) 30%, transparent);color:inherit;border-radius:2px;}`,
+  );
 }
 
 /** Case-insensitive substring test. Empty query matches everything. */

package/src/utils/inject-css.ts

@@ -0,0 +1,13 @@
+// Shared dedup so a component's CSS-in-JS string is appended to <head> once
+// per id, no matter how many instances mount — replaces the copy-pasted
+// createElement('style') pattern across ~14 components.
+const injected = new Set<string>();
+
+export function injectCSS(id: string, css: string): void {
+  if (injected.has(id) || typeof document === "undefined") return;
+  injected.add(id);
+  const style = document.createElement("style");
+  style.id = id;
+  style.textContent = css;
+  document.head.appendChild(style);
+}

package/tailwind.js

@@ -19,6 +19,10 @@
 /** @type {import('tailwindcss').Plugin} */
 export default function ksuiTailwindPlugin({ addUtilities, addComponents }) {
   // ─── Button intents ────────────────────────────────────────────────
+  // Amber/red/slate intent palette mirrors Button.tsx's own documented
+  // exception (component-authored tone system, not a 1:1 §1.2 surface/
+  // text/border mapping) — none of these rgba alpha values byte-match a
+  // §1.2 dark default, so left literal rather than guessed.
   // Primary (amber)
   addUtilities({
     ".ks-btn-primary": {
@@ -134,7 +138,7 @@ export default function ksuiTailwindPlugin({ addUtilities, addComponents }) {
       "align-items": "center",
       gap: "0.5rem",
       padding: "0.375rem 0.75rem",
-      "background-color": "rgb(24 24 27)",
+      "background-color": "var(--ks-input-bg, rgb(24 24 27))",
       border: "1px solid rgb(63 63 70 / 0.6)",
       "border-radius": "0.25rem",
       color: "rgb(228 228 231)",
@@ -152,7 +156,7 @@ export default function ksuiTailwindPlugin({ addUtilities, addComponents }) {
       padding: "0.5rem 1rem",
       "text-align": "left",
       "font-weight": 500,
-      color: "rgb(161 161 170)",
+      color: "var(--ks-fg-muted, rgb(161 161 170))",
       "font-size": "0.75rem",
       "text-transform": "uppercase",
       "letter-spacing": "0.05em",
@@ -168,7 +172,7 @@ export default function ksuiTailwindPlugin({ addUtilities, addComponents }) {
     ".ks-dt-empty": {
       padding: "2rem",
       "text-align": "center",
-      color: "rgb(113 113 122)",
+      color: "var(--ks-fg-subtle, rgb(113 113 122))",
     },
     ".ks-dt-pager": {
       display: "flex",
@@ -177,7 +181,7 @@ export default function ksuiTailwindPlugin({ addUtilities, addComponents }) {
       padding: "0.75rem 1rem",
       "border-top": "1px solid rgb(39 39 42 / 0.6)",
       "font-size": "0.8125rem",
-      color: "rgb(161 161 170)",
+      color: "var(--ks-fg-muted, rgb(161 161 170))",
     },
   });
 
@@ -194,7 +198,7 @@ export default function ksuiTailwindPlugin({ addUtilities, addComponents }) {
       padding: "1rem",
     },
     ".ks-modal-card": {
-      "background-color": "rgb(24 24 27)",
+      "background-color": "var(--ks-overlay-surface, rgb(24 24 27))",
       border: "1px solid rgb(63 63 70 / 0.6)",
       "max-height": "calc(100vh - 2rem)",
       overflow: "auto",
@@ -246,7 +250,7 @@ export default function ksuiTailwindPlugin({ addUtilities, addComponents }) {
       "background-color": "rgba(59 130 246 / 0.1)",
     },
     ".ks-pill-neutral": {
-      color: "rgb(161 161 170)",
+      color: "var(--ks-fg-muted, rgb(161 161 170))",
       "background-color": "rgb(63 63 70 / 0.3)",
     },
   });
@@ -259,7 +263,7 @@ export default function ksuiTailwindPlugin({ addUtilities, addComponents }) {
       gap: "0.25rem",
       padding: "0.25rem 0.5rem",
       "font-size": "0.75rem",
-      color: "rgb(161 161 170)",
+      color: "var(--ks-fg-muted, rgb(161 161 170))",
       "background-color": "transparent",
       border: "1px solid rgb(63 63 70 / 0.6)",
       "border-radius": "0.25rem",