@sbugallo/pokecode 0.3.0 → 0.3.1

package/dist/tui.js

@@ -770,24 +770,82 @@ import { insert as _$insert } from "@opentui/solid";
 import { setProp as _$setProp } from "@opentui/solid";
 import { createElement as _$createElement } from "@opentui/solid";
 import { createTextAttributes } from "@opentui/core";
+
+// src/adapters/opencode/tui/theme.ts
+import { RGBA } from "@opentui/core";
+var hovered = (color) => color.state({ hovered: true }) ?? color.base;
+var toActionColors = (background, label) => ({
+  background: background.base,
+  backgroundHovered: hovered(background),
+  label: label.base,
+  labelHovered: hovered(label)
+});
+var toSurface = (theme) => ({
+  text: theme.text.base,
+  muted: theme.text.muted,
+  accent: theme.hue.accent[200] ?? theme.text.action.primary.base,
+  success: theme.text.feedback.success.base,
+  error: theme.text.feedback.error.base,
+  info: theme.text.feedback.info.base,
+  background: theme.background.base,
+  raised: theme.background.raised.base,
+  highlight: theme.background.raised.max,
+  border: theme.border.base,
+  primary: toActionColors(theme.background.action.primary, theme.text.action.primary),
+  secondary: toActionColors(theme.background.action.secondary, theme.text.action.secondary)
+});
+var toPokecodeTheme = (theme) => ({
+  current: toSurface(theme),
+  dialog: toSurface(theme.surface("dialog"))
+});
+var transparent = RGBA.fromInts(0, 0, 0, 0);
+var flat = (color) => ({ base: color, state: () => color });
+var fallbackResolvedTheme = (() => {
+  const text = RGBA.fromHex("#d4d4d4");
+  const muted = RGBA.fromHex("#808080");
+  const theme = {
+    hue: { accent: { 200: RGBA.fromHex("#a78bfa") } },
+    text: {
+      base: text,
+      muted,
+      action: {
+        primary: flat(text),
+        secondary: flat(muted)
+      },
+      feedback: {
+        error: { base: RGBA.fromHex("#ef4444") },
+        success: { base: RGBA.fromHex("#22c55e") },
+        info: { base: RGBA.fromHex("#3b82f6") }
+      }
+    },
+    background: {
+      base: RGBA.fromHex("#111827"),
+      raised: { base: RGBA.fromHex("#1f2937"), max: RGBA.fromHex("#374151") },
+      action: {
+        primary: flat(transparent),
+        secondary: flat(transparent)
+      }
+    },
+    border: { base: RGBA.fromHex("#4b5563") },
+    surface: () => theme
+  };
+  return theme;
+})();
+var fallbackPokecodeTheme = toPokecodeTheme(fallbackResolvedTheme);
+
+// src/adapters/opencode/tui/components/action-button.tsx
 var bold = createTextAttributes({
   bold: true
 });
 function PokecodeActionButton(properties) {
-  const colors = {
-    primary: {
-      base: "#2563eb",
-      hovered: "#1d4ed8"
-    },
-    secondary: {
-      base: "#6b7280",
-      hovered: "#4b5563"
-    },
-    success: {
-      base: "#16a34a",
-      hovered: "#15803d"
-    }
-  }[properties.tone];
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
+  const colors = () => {
+    const action = properties.tone === "secondary" ? surface().secondary : surface().primary;
+    return {
+      background: properties.hovered() ? action.backgroundHovered : action.background,
+      label: properties.tone === "success" ? surface().success : properties.hovered() ? action.labelHovered : action.label
+    };
+  };
   return (() => {
     var _el$ = _$createElement("button"), _el$2 = _$createElement("text");
     _$insertNode(_el$, _el$2);
@@ -798,22 +856,23 @@ function PokecodeActionButton(properties) {
     _$setProp(_el$, "paddingRight", 2);
     _$setProp(_el$, "type", "button");
     _$setProp(_el$, "onMouseUp", () => void properties.onActivate());
-    _$setProp(_el$2, "fg", "#ffffff");
     _$insert(_el$2, () => properties.label);
     _$effect((_p$) => {
-      var _v$ = properties.hovered() ? colors.hovered : colors.base, _v$2 = properties.onLeave, _v$3 = properties.onHover, _v$4 = properties.onLeave, _v$5 = properties.onHover;
+      var _v$ = colors().background, _v$2 = properties.onLeave, _v$3 = properties.onHover, _v$4 = properties.onLeave, _v$5 = properties.onHover, _v$6 = colors().label;
       _v$ !== _p$.e && (_p$.e = _$setProp(_el$, "backgroundColor", _v$, _p$.e));
       _v$2 !== _p$.t && (_p$.t = _$setProp(_el$, "onBlur", _v$2, _p$.t));
       _v$3 !== _p$.a && (_p$.a = _$setProp(_el$, "onFocus", _v$3, _p$.a));
       _v$4 !== _p$.o && (_p$.o = _$setProp(_el$, "onMouseOut", _v$4, _p$.o));
       _v$5 !== _p$.i && (_p$.i = _$setProp(_el$, "onMouseOver", _v$5, _p$.i));
+      _v$6 !== _p$.n && (_p$.n = _$setProp(_el$2, "fg", _v$6, _p$.n));
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
       o: undefined,
-      i: undefined
+      i: undefined,
+      n: undefined
     });
     return _el$;
   })();
@@ -845,6 +904,7 @@ function isDexCloseKey(key) {
 }
 function PokemonDexDialog(properties) {
   const context = usePlugin();
+  const surface = () => toPokecodeTheme(context.theme).dialog;
   const dimensions = useTerminalDimensions();
   const height = () => Math.max(10, Math.floor(dimensions().height / 2) - 1);
   const width = () => dexModalWidth(dimensions().width);
@@ -923,24 +983,34 @@ function PokemonDexDialog(properties) {
         _$insertNode2(_el$9, _el$1);
         _$insert2(_el$9, () => pokemon.number.toString().padStart(4, "0"), _el$1);
         _$insert2(_el$9, () => dexDisplayName(pokemon.name, pokemon.status), null);
-        _$effect2((_$p) => _$setProp2(_el$8, "fg", pokemon.status === "caught" ? "#22c55e" : context.theme.text.muted, _$p));
+        _$effect2((_p$) => {
+          var _v$6 = pokemon.status === "caught" ? surface().success : surface().muted, _v$7 = pokemon.status === "unknown" ? surface().muted : surface().text;
+          _v$6 !== _p$.e && (_p$.e = _$setProp2(_el$8, "fg", _v$6, _p$.e));
+          _v$7 !== _p$.t && (_p$.t = _$setProp2(_el$9, "fg", _v$7, _p$.t));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
         return _el$7;
       })()
     }));
     _$insertNode2(_el$5, _$createTextNode(`\u2191\u2193: 1 item \xB7 \u2190\u2192: 10 items \xB7 Esc: Close`));
     _$setProp2(_el$5, "flexShrink", 0);
     _$effect2((_p$) => {
-      var _v$ = height(), _v$2 = width(), _v$3 = context.theme.text.base, _v$4 = height() - 2;
+      var _v$ = height(), _v$2 = width(), _v$3 = surface().text, _v$4 = height() - 2, _v$5 = surface().muted;
       _v$ !== _p$.e && (_p$.e = _$setProp2(_el$, "height", _v$, _p$.e));
       _v$2 !== _p$.t && (_p$.t = _$setProp2(_el$, "width", _v$2, _p$.t));
       _v$3 !== _p$.a && (_p$.a = _$setProp2(_el$2, "fg", _v$3, _p$.a));
       _v$4 !== _p$.o && (_p$.o = _$setProp2(_el$3, "height", _v$4, _p$.o));
+      _v$5 !== _p$.i && (_p$.i = _$setProp2(_el$5, "fg", _v$5, _p$.i));
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
-      o: undefined
+      o: undefined,
+      i: undefined
     });
     return _el$;
   })();
@@ -1015,8 +1085,8 @@ import { createSignal as createSignal5 } from "solid-js";
 
 // src/adapters/opencode/tui/pc/dialog.tsx
 import { memo as _$memo5 } from "@opentui/solid";
-import { effect as _$effect6 } from "@opentui/solid";
 import { insertNode as _$insertNode6 } from "@opentui/solid";
+import { effect as _$effect6 } from "@opentui/solid";
 import { createComponent as _$createComponent6 } from "@opentui/solid";
 import { use as _$use3 } from "@opentui/solid";
 import { insert as _$insert6 } from "@opentui/solid";
@@ -182262,8 +182332,9 @@ extend({ button: StarterButtonRenderable });
 
 // src/adapters/opencode/tui/components/move-list.tsx
 function MoveList(properties) {
-  const [hovered, setHovered] = createSignal2(null);
+  const [hovered2, setHovered] = createSignal2(null);
   const [inspected, setInspected] = createSignal2(null);
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
   const moves = () => properties.moves.map((move) => presentMove(move, properties.language));
   const description = () => moves().find((move) => move.id === inspected())?.description;
   let list;
@@ -182293,6 +182364,8 @@ function MoveList(properties) {
         }
       };
       const secondary = () => move.id === properties.offeredMoveId;
+      const action = () => secondary() ? surface().secondary : surface().primary;
+      const hoveredRow = () => hovered2() === move.id;
       return (() => {
         var _el$ = _$createElement3("box"), _el$2 = _$createElement3("button"), _el$3 = _$createElement3("text"), _el$4 = _$createElement3("text"), _el$5 = _$createElement3("text");
         _$insertNode3(_el$, _el$2);
@@ -182329,7 +182402,6 @@ function MoveList(properties) {
           event.stopPropagation();
           properties.onActivate(move.id);
         });
-        _$setProp3(_el$3, "fg", "#ffffff");
         _$setProp3(_el$3, "wrapMode", "word");
         _$insert3(_el$3, () => move.name);
         _$setProp3(_el$4, "maxWidth", "100%");
@@ -182339,13 +182411,16 @@ function MoveList(properties) {
         _$setProp3(_el$5, "wrapMode", "word");
         _$insert3(_el$5, () => move.stats);
         _$effect3((_p$) => {
-          var _v$ = properties.leftAlignMoves ? "flex-start" : "center", _v$2 = `move-${move.id}`, _v$3 = secondary() ? hovered() === move.id ? "#4b5563" : "#6b7280" : hovered() === move.id ? "#1d4ed8" : "#2563eb", _v$4 = properties.centered && !properties.leftAlignMoves ? "center" : "left", _v$5 = properties.centered && !properties.leftAlignMoves ? "center" : "left", _v$6 = properties.centered && !properties.leftAlignMoves ? "center" : "left";
+          var _v$ = properties.leftAlignMoves ? "flex-start" : "center", _v$2 = `move-${move.id}`, _v$3 = hoveredRow() ? action().backgroundHovered : action().background, _v$4 = hoveredRow() ? action().labelHovered : action().label, _v$5 = properties.centered && !properties.leftAlignMoves ? "center" : "left", _v$6 = surface().muted, _v$7 = properties.centered && !properties.leftAlignMoves ? "center" : "left", _v$8 = surface().muted, _v$9 = properties.centered && !properties.leftAlignMoves ? "center" : "left";
           _v$ !== _p$.e && (_p$.e = _$setProp3(_el$, "alignItems", _v$, _p$.e));
           _v$2 !== _p$.t && (_p$.t = _$setProp3(_el$2, "id", _v$2, _p$.t));
           _v$3 !== _p$.a && (_p$.a = _$setProp3(_el$2, "backgroundColor", _v$3, _p$.a));
-          _v$4 !== _p$.o && (_p$.o = _$setProp3(_el$3, "textAlign", _v$4, _p$.o));
-          _v$5 !== _p$.i && (_p$.i = _$setProp3(_el$4, "textAlign", _v$5, _p$.i));
-          _v$6 !== _p$.n && (_p$.n = _$setProp3(_el$5, "textAlign", _v$6, _p$.n));
+          _v$4 !== _p$.o && (_p$.o = _$setProp3(_el$3, "fg", _v$4, _p$.o));
+          _v$5 !== _p$.i && (_p$.i = _$setProp3(_el$3, "textAlign", _v$5, _p$.i));
+          _v$6 !== _p$.n && (_p$.n = _$setProp3(_el$4, "fg", _v$6, _p$.n));
+          _v$7 !== _p$.s && (_p$.s = _$setProp3(_el$4, "textAlign", _v$7, _p$.s));
+          _v$8 !== _p$.h && (_p$.h = _$setProp3(_el$5, "fg", _v$8, _p$.h));
+          _v$9 !== _p$.r && (_p$.r = _$setProp3(_el$5, "textAlign", _v$9, _p$.r));
           return _p$;
         }, {
           e: undefined,
@@ -182353,7 +182428,10 @@ function MoveList(properties) {
           a: undefined,
           o: undefined,
           i: undefined,
-          n: undefined
+          n: undefined,
+          s: undefined,
+          h: undefined,
+          r: undefined
         });
         return _el$;
       })();
@@ -182421,15 +182499,17 @@ function MoveList(properties) {
     _$setProp3(_el$9, "wrapMode", "word");
     _$insert3(_el$9, () => description() || moveInspectionHint(properties.language));
     _$effect3((_p$) => {
-      var _v$7 = properties.height ?? "auto", _v$8 = properties.height === undefined ? 6 : Math.min(6, Math.max(2, Math.floor(properties.height / 4))), _v$9 = properties.centered ? "center" : "left";
-      _v$7 !== _p$.e && (_p$.e = _$setProp3(_el$6, "height", _v$7, _p$.e));
-      _v$8 !== _p$.t && (_p$.t = _$setProp3(_el$8, "height", _v$8, _p$.t));
-      _v$9 !== _p$.a && (_p$.a = _$setProp3(_el$9, "textAlign", _v$9, _p$.a));
+      var _v$0 = properties.height ?? "auto", _v$1 = properties.height === undefined ? 6 : Math.min(6, Math.max(2, Math.floor(properties.height / 4))), _v$10 = surface().text, _v$11 = properties.centered ? "center" : "left";
+      _v$0 !== _p$.e && (_p$.e = _$setProp3(_el$6, "height", _v$0, _p$.e));
+      _v$1 !== _p$.t && (_p$.t = _$setProp3(_el$8, "height", _v$1, _p$.t));
+      _v$10 !== _p$.a && (_p$.a = _$setProp3(_el$9, "fg", _v$10, _p$.a));
+      _v$11 !== _p$.o && (_p$.o = _$setProp3(_el$9, "textAlign", _v$11, _p$.o));
       return _p$;
     }, {
       e: undefined,
       t: undefined,
-      a: undefined
+      a: undefined,
+      o: undefined
     });
     return _el$6;
   })();
@@ -182454,6 +182534,7 @@ function Sprite(properties) {
     const resolved = sprite();
     return resolved?.kind === "cached" ? resolved.source : null;
   };
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
   return _$createComponent4(Show2, {
     get when() {
       return source();
@@ -182470,6 +182551,7 @@ function Sprite(properties) {
           var _c$ = _$memo3(() => properties.compactFallback === true);
           return () => _c$() ? sprite() === null ? "\u2026" : "?" : _$memo3(() => sprite() === null)() ? uiCopy(properties.language?.() ?? "en").loadingSprite : uiCopy(properties.language?.() ?? "en").spriteUnavailable;
         })());
+        _$effect4((_$p) => _$setProp4(_el$2, "fg", surface().muted, _$p));
         return _el$;
       })();
     },
@@ -182496,6 +182578,7 @@ function Sprite(properties) {
 var stats = ["hp", "attack", "defense", "specialAttack", "specialDefense", "speed"];
 function PcDetails(properties) {
   const copy = () => pcCopy(properties.language);
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
   const values = () => pokemonStats(properties.pokemon);
   const nature = () => pokemonNatureModifiers(properties.pokemon.nature);
   const gender = () => properties.pokemon.gender;
@@ -182523,6 +182606,7 @@ function PcDetails(properties) {
       get protocol() {
         return properties.imageProtocol;
       },
+      theme: surface,
       get shiny() {
         return properties.pokemon.shiny;
       },
@@ -182551,7 +182635,7 @@ function PcDetails(properties) {
         return (() => {
           var _el$1 = _$createElement5("text");
           _$insert5(_el$1, () => statLine([name(), String(values()[stat]), String(properties.pokemon.evs[stat]), String(properties.pokemon.ivs[stat])], stat === nature().increased ? "\u2191" : stat === nature().decreased ? "\u2193" : " "));
-          _$effect5((_$p) => _$setProp5(_el$1, "fg", stat === nature().increased ? "#ef4444" : stat === nature().decreased ? "#3b82f6" : properties.textColor, _$p));
+          _$effect5((_$p) => _$setProp5(_el$1, "fg", stat === nature().increased ? surface().error : stat === nature().decreased ? surface().info : surface().text, _$p));
           return _el$1;
         })();
       }
@@ -182567,6 +182651,7 @@ function PcDetails(properties) {
       return () => _c$() ? (() => {
         var _el$10 = _$createElement5("text");
         _$insertNode5(_el$10, _$createTextNode2(`\u2014`));
+        _$effect5((_$p) => _$setProp5(_el$10, "fg", surface().muted, _$p));
         return _el$10;
       })() : _$createComponent5(MoveList, {
         get moves() {
@@ -182574,9 +182659,25 @@ function PcDetails(properties) {
         },
         get language() {
           return properties.language;
-        }
+        },
+        theme: surface
       });
     })(), null);
+    _$effect5((_p$) => {
+      var _v$ = surface().text, _v$2 = surface().text, _v$3 = surface().text, _v$4 = surface().muted, _v$5 = surface().muted;
+      _v$ !== _p$.e && (_p$.e = _$setProp5(_el$3, "fg", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp5(_el$5, "fg", _v$2, _p$.t));
+      _v$3 !== _p$.a && (_p$.a = _$setProp5(_el$6, "fg", _v$3, _p$.a));
+      _v$4 !== _p$.o && (_p$.o = _$setProp5(_el$8, "fg", _v$4, _p$.o));
+      _v$5 !== _p$.i && (_p$.i = _$setProp5(_el$0, "fg", _v$5, _p$.i));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined
+    });
     return _el$;
   })();
 }
@@ -182596,8 +182697,7 @@ function PokemonPcDialog(properties) {
   const [name, setName] = createSignal4("");
   const isOwned = createOwnerGuard();
   const copy = () => pcCopy(properties.language);
-  const textColor = () => typeof properties.textColor === "function" ? properties.textColor() : properties.textColor;
-  const mutedColor = () => typeof properties.mutedColor === "function" ? properties.mutedColor() : properties.mutedColor;
+  const surface = () => properties.theme?.().dialog ?? fallbackPokecodeTheme.dialog;
   const inspected = () => properties.pokemon[index()];
   let list;
   let details;
@@ -182809,7 +182909,7 @@ function PokemonPcDialog(properties) {
         });
         _$insert6(_el$21, () => `${pokemon.name} Lv.${pokemon.level}`);
         _$effect6((_p$) => {
-          var _v$7 = selected().includes(pokemon.id) ? "#22c55e" : mutedColor(), _v$8 = index() === row() ? "#2563eb" : undefined, _v$9 = index() === row() ? "#ffffff" : textColor();
+          var _v$7 = selected().includes(pokemon.id) ? surface().success : surface().muted, _v$8 = index() === row() ? surface().highlight : undefined, _v$9 = surface().text;
           _v$7 !== _p$.e && (_p$.e = _$setProp6(_el$19, "fg", _v$7, _p$.e));
           _v$8 !== _p$.t && (_p$.t = _$setProp6(_el$20, "backgroundColor", _v$8, _p$.t));
           _v$9 !== _p$.a && (_p$.a = _$setProp6(_el$21, "fg", _v$9, _p$.a));
@@ -182829,6 +182929,7 @@ function PokemonPcDialog(properties) {
       get children() {
         var _el$6 = _$createElement6("text");
         _$insert6(_el$6, () => copy().empty);
+        _$effect6((_$p) => _$setProp6(_el$6, "fg", surface().muted, _$p));
         return _el$6;
       }
     }), null);
@@ -182859,9 +182960,7 @@ function PokemonPcDialog(properties) {
         get language() {
           return properties.language;
         },
-        get textColor() {
-          return textColor();
-        },
+        theme: surface,
         get resolveSprite() {
           return properties.resolveSprite;
         },
@@ -182879,7 +182978,7 @@ function PokemonPcDialog(properties) {
           var _el$8 = _$createElement6("text");
           _$setProp6(_el$8, "flexShrink", 0);
           _$insert6(_el$8, () => copy().renamePrompt);
-          _$effect6((_$p) => _$setProp6(_el$8, "fg", textColor(), _$p));
+          _$effect6((_$p) => _$setProp6(_el$8, "fg", surface().text, _$p));
           return _el$8;
         })(), (() => {
           var _el$9 = _$createElement6("input");
@@ -182908,7 +183007,7 @@ function PokemonPcDialog(properties) {
         var _el$0 = _$createElement6("text");
         _$setProp6(_el$0, "flexShrink", 0);
         _$insert6(_el$0, () => `${inspected()?.name ?? ""}: ${copy().releasePrompt}`);
-        _$effect6((_$p) => _$setProp6(_el$0, "fg", textColor(), _$p));
+        _$effect6((_$p) => _$setProp6(_el$0, "fg", surface().text, _$p));
         return _el$0;
       }
     }), null);
@@ -182920,7 +183019,7 @@ function PokemonPcDialog(properties) {
         var _el$1 = _$createElement6("text");
         _$setProp6(_el$1, "flexShrink", 0);
         _$insert6(_el$1, feedback);
-        _$effect6((_$p) => _$setProp6(_el$1, "fg", mutedColor(), _$p));
+        _$effect6((_$p) => _$setProp6(_el$1, "fg", surface().muted, _$p));
         return _el$1;
       }
     }), null);
@@ -182933,7 +183032,7 @@ function PokemonPcDialog(properties) {
           var _el$22 = _$createElement6("text");
           _$setProp6(_el$22, "flexShrink", 0);
           _$insert6(_el$22, () => copy().editActions);
-          _$effect6((_$p) => _$setProp6(_el$22, "fg", mutedColor(), _$p));
+          _$effect6((_$p) => _$setProp6(_el$22, "fg", surface().muted, _$p));
           return _el$22;
         })();
       },
@@ -182960,7 +183059,7 @@ function PokemonPcDialog(properties) {
           });
           _$insert6(_el$14, () => `F: ${copy().release}`);
           _$effect6((_p$) => {
-            var _v$3 = mutedColor(), _v$4 = mutedColor();
+            var _v$3 = surface().muted, _v$4 = surface().muted;
             _v$3 !== _p$.e && (_p$.e = _$setProp6(_el$12, "fg", _v$3, _p$.e));
             _v$4 !== _p$.t && (_p$.t = _$setProp6(_el$14, "fg", _v$4, _p$.t));
             return _p$;
@@ -182973,19 +183072,19 @@ function PokemonPcDialog(properties) {
           var _el$15 = _$createElement6("text");
           _$setProp6(_el$15, "flexShrink", 0);
           _$insert6(_el$15, () => copy().navigation);
-          _$effect6((_$p) => _$setProp6(_el$15, "fg", mutedColor(), _$p));
+          _$effect6((_$p) => _$setProp6(_el$15, "fg", surface().muted, _$p));
           return _el$15;
         })(), (() => {
           var _el$16 = _$createElement6("text");
           _$setProp6(_el$16, "flexShrink", 0);
           _$insert6(_el$16, () => copy().actions);
-          _$effect6((_$p) => _$setProp6(_el$16, "fg", mutedColor(), _$p));
+          _$effect6((_$p) => _$setProp6(_el$16, "fg", surface().muted, _$p));
           return _el$16;
         })()];
       }
     }), null);
     _$effect6((_p$) => {
-      var _v$5 = height(), _v$6 = textColor();
+      var _v$5 = height(), _v$6 = surface().text;
       _v$5 !== _p$.e && (_p$.e = _$setProp6(_el$, "height", _v$5, _p$.e));
       _v$6 !== _p$.t && (_p$.t = _$setProp6(_el$2, "fg", _v$6, _p$.t));
       return _p$;
@@ -183039,11 +183138,8 @@ function createPcAction(dependencies) {
       get language() {
         return dependencies.state.state().locale;
       },
-      get textColor() {
-        return dependencies.theme.base;
-      },
-      get mutedColor() {
-        return dependencies.theme.muted;
+      get theme() {
+        return dependencies.theme;
       },
       get resolveSprite() {
         return dependencies.resolveSprite;
@@ -183368,11 +183464,11 @@ function ExportCommand(properties) {
 }
 
 // src/adapters/opencode/tui/sidebar/view.tsx
-import { effect as _$effect9 } from "@opentui/solid";
 import { mergeProps as _$mergeProps } from "@opentui/solid";
 import { insertNode as _$insertNode9 } from "@opentui/solid";
 import { memo as _$memo6 } from "@opentui/solid";
 import { createComponent as _$createComponent10 } from "@opentui/solid";
+import { effect as _$effect9 } from "@opentui/solid";
 import { insert as _$insert9 } from "@opentui/solid";
 import { setProp as _$setProp9 } from "@opentui/solid";
 import { createElement as _$createElement9 } from "@opentui/solid";
@@ -183468,6 +183564,9 @@ function PendingChoiceCard(properties) {
               },
               get language() {
                 return properties.language;
+              },
+              get theme() {
+                return properties.theme;
               }
             });
           }
@@ -183491,6 +183590,9 @@ function PendingChoiceCard(properties) {
               },
               get onResolve() {
                 return properties.onResolveEvolution;
+              },
+              get theme() {
+                return properties.theme;
               }
             });
           }
@@ -183511,6 +183613,7 @@ function MoveChoiceCard(properties) {
     return null;
   const dimensions = useTerminalDimensions3();
   const language = () => properties.language?.() ?? "en";
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
   const moves = [...pokemon.moves, payload.move];
   const copy = () => uiCopy(language());
   return (() => {
@@ -183539,6 +183642,7 @@ function MoveChoiceCard(properties) {
       get protocol() {
         return properties.imageProtocol;
       },
+      theme: surface,
       get shiny() {
         return pokemon.shiny;
       },
@@ -183566,8 +183670,20 @@ function MoveChoiceCard(properties) {
       get height() {
         return Math.min(28, Math.max(6, dimensions().height - 19));
       },
-      onActivate: (moveId) => properties.onResolve(choice.id, moveId)
+      onActivate: (moveId) => properties.onResolve(choice.id, moveId),
+      get theme() {
+        return properties.theme;
+      }
     }), null);
+    _$effect7((_p$) => {
+      var _v$ = surface().text, _v$2 = surface().muted;
+      _v$ !== _p$.e && (_p$.e = _$setProp7(_el$2, "fg", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp7(_el$3, "fg", _v$2, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     return _el$;
   })();
 }
@@ -183581,6 +183697,7 @@ function EvolutionChoiceCard(properties) {
   const pokemon = properties.party().find((slot) => slot.pokemon?.id === payload.pokemonId)?.pokemon ?? properties.choicePokemon().find((instance) => instance.id === payload.pokemonId);
   if (pokemon === undefined || pokemon === null)
     return null;
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
   const [hoveredOption, setHoveredOption] = createSignal7(null);
   return (() => {
     var _el$4 = _$createElement7("box"), _el$5 = _$createElement7("text"), _el$6 = _$createElement7("text"), _el$7 = _$createElement7("box");
@@ -183604,6 +183721,7 @@ function EvolutionChoiceCard(properties) {
       get protocol() {
         return properties.imageProtocol;
       },
+      theme: surface,
       get shiny() {
         return pokemon.shiny;
       },
@@ -183635,12 +183753,23 @@ function EvolutionChoiceCard(properties) {
       },
       get language() {
         return properties.language;
-      }
+      },
+      theme: surface
     })));
+    _$effect7((_p$) => {
+      var _v$3 = surface().text, _v$4 = surface().muted;
+      _v$3 !== _p$.e && (_p$.e = _$setProp7(_el$5, "fg", _v$3, _p$.e));
+      _v$4 !== _p$.t && (_p$.t = _$setProp7(_el$6, "fg", _v$4, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     return _el$4;
   })();
 }
 function EvolutionOptionCard(properties) {
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
   return (() => {
     var _el$8 = _$createElement7("button"), _el$9 = _$createElement7("box"), _el$0 = _$createElement7("box"), _el$1 = _$createElement7("text");
     _$insertNode7(_el$8, _el$9);
@@ -183676,6 +183805,7 @@ function EvolutionOptionCard(properties) {
       get protocol() {
         return properties.imageProtocol;
       },
+      theme: surface,
       get shiny() {
         return properties.pokemon.shiny;
       },
@@ -183692,19 +183822,21 @@ function EvolutionOptionCard(properties) {
     _$setProp7(_el$0, "width", "100%");
     _$insert7(_el$1, () => properties.option.name);
     _$effect7((_p$) => {
-      var _v$ = properties.hovered() ? "#404040" : undefined, _v$2 = properties.onHover, _v$3 = properties.onLeave, _v$4 = properties.onHover, _v$5 = properties.onLeave;
-      _v$ !== _p$.e && (_p$.e = _$setProp7(_el$8, "backgroundColor", _v$, _p$.e));
-      _v$2 !== _p$.t && (_p$.t = _$setProp7(_el$8, "onMouseOver", _v$2, _p$.t));
-      _v$3 !== _p$.a && (_p$.a = _$setProp7(_el$8, "onMouseOut", _v$3, _p$.a));
-      _v$4 !== _p$.o && (_p$.o = _$setProp7(_el$8, "onFocus", _v$4, _p$.o));
-      _v$5 !== _p$.i && (_p$.i = _$setProp7(_el$8, "onBlur", _v$5, _p$.i));
+      var _v$5 = properties.hovered() ? surface().highlight : undefined, _v$6 = properties.onHover, _v$7 = properties.onLeave, _v$8 = properties.onHover, _v$9 = properties.onLeave, _v$0 = surface().text;
+      _v$5 !== _p$.e && (_p$.e = _$setProp7(_el$8, "backgroundColor", _v$5, _p$.e));
+      _v$6 !== _p$.t && (_p$.t = _$setProp7(_el$8, "onMouseOver", _v$6, _p$.t));
+      _v$7 !== _p$.a && (_p$.a = _$setProp7(_el$8, "onMouseOut", _v$7, _p$.a));
+      _v$8 !== _p$.o && (_p$.o = _$setProp7(_el$8, "onFocus", _v$8, _p$.o));
+      _v$9 !== _p$.i && (_p$.i = _$setProp7(_el$8, "onBlur", _v$9, _p$.i));
+      _v$0 !== _p$.n && (_p$.n = _$setProp7(_el$1, "fg", _v$0, _p$.n));
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
       o: undefined,
-      i: undefined
+      i: undefined,
+      n: undefined
     });
     return _el$8;
   })();
@@ -183716,6 +183848,7 @@ function RegionChoiceCard(properties) {
   const payload = decodeRegionChoiceProjection(choice.payload);
   if (payload === null)
     return null;
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
   const [hoveredRegion, setHoveredRegion] = createSignal7(null);
   const availableRegions = () => regions(properties.language?.() ?? "en");
   const completedRegionName = () => availableRegions().find((region) => region.id === payload.region)?.name ?? payload.region;
@@ -183762,9 +183895,26 @@ function RegionChoiceCard(properties) {
         }
       });
       _$insert7(_el$15, () => region.name);
-      _$effect7((_$p) => _$setProp7(_el$14, "backgroundColor", hoveredRegion() === region.id ? "#404040" : undefined, _$p));
+      _$effect7((_p$) => {
+        var _v$11 = hoveredRegion() === region.id ? surface().highlight : undefined, _v$12 = surface().text;
+        _v$11 !== _p$.e && (_p$.e = _$setProp7(_el$14, "backgroundColor", _v$11, _p$.e));
+        _v$12 !== _p$.t && (_p$.t = _$setProp7(_el$15, "fg", _v$12, _p$.t));
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
       return _el$14;
     })()));
+    _$effect7((_p$) => {
+      var _v$1 = surface().text, _v$10 = surface().muted;
+      _v$1 !== _p$.e && (_p$.e = _$setProp7(_el$11, "fg", _v$1, _p$.e));
+      _v$10 !== _p$.t && (_p$.t = _$setProp7(_el$12, "fg", _v$10, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     return _el$10;
   })();
 }
@@ -183781,6 +183931,7 @@ function EncounterCard(properties) {
   const encounter = properties.encounter();
   if (encounter === null)
     return null;
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
   const genderSymbol = encounter.gender === "male" ? "\u2642" : encounter.gender === "female" ? "\u2640" : "\u2014";
   const copy = uiCopy(properties.language?.() ?? "en");
   return (() => {
@@ -183814,6 +183965,7 @@ function EncounterCard(properties) {
       get protocol() {
         return properties.imageProtocol;
       },
+      theme: surface,
       get shiny() {
         return encounter.shiny;
       },
@@ -183835,6 +183987,7 @@ function EncounterCard(properties) {
       onActivate: () => properties.onResolve(encounter.id, encounter, true),
       onHover: () => properties.onHover("catch"),
       onLeave: () => properties.onHover(null),
+      theme: surface,
       tone: "primary"
     }), null);
     _$insert8(_el$6, _$createComponent9(PokecodeActionButton, {
@@ -183845,9 +183998,18 @@ function EncounterCard(properties) {
       onActivate: () => properties.onResolve(encounter.id, encounter, false),
       onHover: () => properties.onHover("run"),
       onLeave: () => properties.onHover(null),
+      theme: surface,
       tone: "secondary"
     }), null);
-    _$effect8((_$p) => _$setProp8(_el$3, "fg", properties.encounter()?.caught ? "#22c55e" : properties.mutedColor(), _$p));
+    _$effect8((_p$) => {
+      var _v$ = properties.encounter()?.caught ? surface().success : surface().muted, _v$2 = surface().text;
+      _v$ !== _p$.e && (_p$.e = _$setProp8(_el$3, "fg", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp8(_el$5, "fg", _v$2, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     return _el$;
   })();
 }
@@ -183870,6 +184032,7 @@ function sidebarViewFor(state) {
   return "team";
 }
 function SidebarView(properties) {
+  const surface = () => properties.theme().current;
   const view = () => sidebarViewFor(properties.state());
   const decisionCount = () => properties.state().pendingChoices.filter((choice) => choice.kind !== "catch").length;
   const encounterCount = () => properties.state().pendingEncounterCount;
@@ -183884,6 +184047,7 @@ function SidebarView(properties) {
       get children() {
         var _el$2 = _$createElement9("text");
         _$insert9(_el$2, () => uiCopy(properties.state().locale).queueCounts(decisionCount(), encounterCount()));
+        _$effect9((_$p) => _$setProp9(_el$2, "fg", surface().text, _$p));
         return _el$2;
       }
     }), null);
@@ -183898,9 +184062,6 @@ function SidebarView(properties) {
               get hovered() {
                 return properties.hoveredStarter;
               },
-              get hoverBackground() {
-                return properties.starterHoverBackground;
-              },
               language: () => properties.state().locale,
               regionId: () => {
                 const choice = properties.state().pendingChoices[0];
@@ -183917,7 +184078,8 @@ function SidebarView(properties) {
               },
               get imageProtocol() {
                 return properties.imageProtocol;
-              }
+              },
+              theme: surface
             });
           }
         }), _$createComponent10(Match2, {
@@ -183941,7 +184103,8 @@ function SidebarView(properties) {
               get imageProtocol() {
                 return properties.imageProtocol;
               },
-              language: () => properties.state().locale
+              language: () => properties.state().locale,
+              theme: surface
             });
           }
         }), _$createComponent10(Match2, {
@@ -183955,7 +184118,8 @@ function SidebarView(properties) {
               visitedRegionIds: () => properties.state().exploration?.regions.filter((region) => region.visited).map((region) => region.id) ?? [],
               get onTravel() {
                 return properties.onTravelRegion;
-              }
+              },
+              theme: surface
             });
           }
         }), _$createComponent10(Match2, {
@@ -183970,9 +184134,6 @@ function SidebarView(properties) {
               keyed: true,
               children: (encounter) => _$createComponent10(EncounterCard, {
                 encounter: () => encounter,
-                get mutedColor() {
-                  return properties.mutedColor;
-                },
                 get hoveredAction() {
                   return properties.hoveredEncounterAction;
                 },
@@ -183988,7 +184149,8 @@ function SidebarView(properties) {
                 get imageProtocol() {
                   return properties.imageProtocol;
                 },
-                language: () => properties.state().locale
+                language: () => properties.state().locale,
+                theme: surface
               })
             });
           }
@@ -184003,7 +184165,8 @@ function SidebarView(properties) {
               },
               get onTravel() {
                 return properties.onTravelLocation;
-              }
+              },
+              theme: surface
             }), _$createComponent10(PartyGrid, {
               language: () => properties.state().locale,
               party: () => properties.state().party,
@@ -184012,7 +184175,8 @@ function SidebarView(properties) {
               },
               get imageProtocol() {
                 return properties.imageProtocol;
-              }
+              },
+              theme: surface
             })];
           }
         })];
@@ -184022,6 +184186,7 @@ function SidebarView(properties) {
   })();
 }
 function StarterButtons(properties) {
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
   return (() => {
     var _el$3 = _$createElement9("box"), _el$4 = _$createElement9("text");
     _$insertNode9(_el$3, _el$4);
@@ -184031,6 +184196,7 @@ function StarterButtons(properties) {
     _$insert9(_el$3, () => regions(properties.language?.() ?? "en").filter((region) => properties.regionId?.() === undefined || region.id === properties.regionId()).map((region) => _$createComponent10(StarterRegionCard, _$mergeProps(properties, {
       region
     }))), null);
+    _$effect9((_$p) => _$setProp9(_el$4, "fg", surface().accent, _$p));
     return _el$3;
   })();
 }
@@ -184042,7 +184208,8 @@ function StarterRegionCard(properties) {
   };
   const columnGap = () => Math.min(3, Math.max(1, Math.floor((rowWidth() - cellWidth() * 3) / 2)));
   const gridInset = () => Math.max(0, Math.floor((rowWidth() - (cellWidth() * 3 + columnGap() * 2)) / 2));
-  const hoverBackground = () => typeof properties.hoverBackground === "function" ? properties.hoverBackground() : properties.hoverBackground;
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
+  const hoverBackground = () => surface().highlight;
   const starters = () => startersForRegion(properties.region.id, properties.language?.() ?? "en");
   return (() => {
     var _el$5 = _$createElement9("box"), _el$6 = _$createElement9("text"), _el$7 = _$createElement9("box"), _el$8 = _$createElement9("box");
@@ -184109,6 +184276,7 @@ function StarterRegionCard(properties) {
         get protocol() {
           return properties.imageProtocol;
         },
+        theme: surface,
         shiny: false,
         gender: "male",
         get speciesId() {
@@ -184116,11 +184284,11 @@ function StarterRegionCard(properties) {
         }
       }));
       _$effect9((_p$) => {
-        var _v$3 = properties.hovered() === starter.speciesId ? hoverBackground() : undefined, _v$4 = cellWidth(), _v$5 = cellWidth() + 2, _v$6 = properties.hovered() === starter.speciesId ? hoverBackground() : "transparent";
-        _v$3 !== _p$.e && (_p$.e = _$setProp9(_el$9, "backgroundColor", _v$3, _p$.e));
-        _v$4 !== _p$.t && (_p$.t = _$setProp9(_el$9, "width", _v$4, _p$.t));
-        _v$5 !== _p$.a && (_p$.a = _$setProp9(_el$0, "width", _v$5, _p$.a));
-        _v$6 !== _p$.o && (_p$.o = _$setProp9(_el$0, "backgroundColor", _v$6, _p$.o));
+        var _v$4 = properties.hovered() === starter.speciesId ? hoverBackground() : undefined, _v$5 = cellWidth(), _v$6 = cellWidth() + 2, _v$7 = properties.hovered() === starter.speciesId ? hoverBackground() : "transparent";
+        _v$4 !== _p$.e && (_p$.e = _$setProp9(_el$9, "backgroundColor", _v$4, _p$.e));
+        _v$5 !== _p$.t && (_p$.t = _$setProp9(_el$9, "width", _v$5, _p$.t));
+        _v$6 !== _p$.a && (_p$.a = _$setProp9(_el$0, "width", _v$6, _p$.a));
+        _v$7 !== _p$.o && (_p$.o = _$setProp9(_el$0, "backgroundColor", _v$7, _p$.o));
         return _p$;
       }, {
         e: undefined,
@@ -184131,19 +184299,22 @@ function StarterRegionCard(properties) {
       return _el$9;
     })()));
     _$effect9((_p$) => {
-      var _v$ = columnGap(), _v$2 = gridInset();
-      _v$ !== _p$.e && (_p$.e = _$setProp9(_el$8, "gap", _v$, _p$.e));
-      _v$2 !== _p$.t && (_p$.t = _$setProp9(_el$8, "marginLeft", _v$2, _p$.t));
+      var _v$ = surface().accent, _v$2 = columnGap(), _v$3 = gridInset();
+      _v$ !== _p$.e && (_p$.e = _$setProp9(_el$6, "fg", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp9(_el$8, "gap", _v$2, _p$.t));
+      _v$3 !== _p$.a && (_p$.a = _$setProp9(_el$8, "marginLeft", _v$3, _p$.a));
       return _p$;
     }, {
       e: undefined,
-      t: undefined
+      t: undefined,
+      a: undefined
     });
     return _el$5;
   })();
 }
 function LocationProgress(properties) {
   const state = properties.state;
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
   const [hoveredTravel, setHoveredTravel] = createSignal8(false);
   const currentLocation = () => state().exploration?.locations.find((location) => location.id === state().location)?.name ?? uiCopy(state().locale).unknown;
   const currentRegion = () => regions(state().locale).find((region) => region.id === state().region)?.name ?? uiCopy(state().locale).unknown;
@@ -184179,6 +184350,7 @@ function LocationProgress(properties) {
       return () => _c$() ? (() => {
         var _el$14 = _$createElement9("text");
         _$insert9(_el$14, () => `${percentage().toFixed(2)}%`);
+        _$effect9((_$p) => _$setProp9(_el$14, "fg", surface().muted, _$p));
         return _el$14;
       })() : _$createComponent10(PokecodeActionButton, {
         hovered: hoveredTravel,
@@ -184188,9 +184360,21 @@ function LocationProgress(properties) {
         onActivate: travelToUnlockedLocation,
         onHover: () => setHoveredTravel(true),
         onLeave: () => setHoveredTravel(false),
+        get theme() {
+          return properties.theme;
+        },
         tone: "success"
       });
     })(), null);
+    _$effect9((_p$) => {
+      var _v$8 = surface().text, _v$9 = surface().muted;
+      _v$8 !== _p$.e && (_p$.e = _$setProp9(_el$11, "fg", _v$8, _p$.e));
+      _v$9 !== _p$.t && (_p$.t = _$setProp9(_el$13, "fg", _v$9, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     return _el$10;
   })();
 }
@@ -184210,6 +184394,9 @@ function PartyGrid(properties) {
       get imageProtocol() {
         return properties.imageProtocol;
       },
+      get theme() {
+        return properties.theme;
+      },
       slots: () => occupiedSlots().slice(0, 2)
     }), null);
     _$insert9(_el$15, _$createComponent10(PartyRow, {
@@ -184222,6 +184409,9 @@ function PartyGrid(properties) {
       get imageProtocol() {
         return properties.imageProtocol;
       },
+      get theme() {
+        return properties.theme;
+      },
       slots: () => occupiedSlots().slice(2, 4)
     }), null);
     _$insert9(_el$15, _$createComponent10(PartyRow, {
@@ -184234,12 +184424,16 @@ function PartyGrid(properties) {
       get imageProtocol() {
         return properties.imageProtocol;
       },
+      get theme() {
+        return properties.theme;
+      },
       slots: () => occupiedSlots().slice(4, 6)
     }), null);
     return _el$15;
   })();
 }
 function PartyRow(properties) {
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
   return (() => {
     var _el$16 = _$createElement9("box");
     _$setProp9(_el$16, "flexDirection", "row");
@@ -184262,6 +184456,7 @@ function PartyRow(properties) {
           get protocol() {
             return properties.imageProtocol;
           },
+          theme: surface,
           get shiny() {
             return slot.pokemon.shiny;
           },
@@ -184274,10 +184469,12 @@ function PartyRow(properties) {
         }), (() => {
           var _el$18 = _$createElement9("text");
           _$insert9(_el$18, () => `${slot.pokemon.name} ${slot.pokemon.gender === "male" ? "\u2642" : slot.pokemon.gender === "female" ? "\u2640" : "\u2014"}`);
+          _$effect9((_$p) => _$setProp9(_el$18, "fg", surface().text, _$p));
           return _el$18;
         })(), (() => {
           var _el$19 = _$createElement9("text");
           _$insert9(_el$19, () => `Lv.${slot.pokemon.level}`);
+          _$effect9((_$p) => _$setProp9(_el$19, "fg", surface().muted, _$p));
           return _el$19;
         })()];
       })());
@@ -184298,9 +184495,7 @@ function registerPokemonSidebar(dependencies) {
       _$setProp10(_el$, "paddingTop", 1);
       _$setProp10(_el$, "gap", 1);
       _$insert10(_el$, _$createComponent11(SidebarTitle, {
-        get color() {
-          return dependencies.theme.base;
-        },
+        color: () => dependencies.theme().current.text,
         get title() {
           return copy().title;
         }
@@ -184342,9 +184537,6 @@ function registerPokemonSidebar(dependencies) {
         get hoverStarter() {
           return dependencies.setHoveredStarter;
         },
-        get mutedColor() {
-          return dependencies.theme.muted;
-        },
         get onChooseStarter() {
           return dependencies.actions.chooseStarter;
         },
@@ -184372,8 +184564,8 @@ function registerPokemonSidebar(dependencies) {
         get setHoveredEncounterAction() {
           return dependencies.setHoveredEncounterAction;
         },
-        get starterHoverBackground() {
-          return dependencies.theme.muted;
+        get theme() {
+          return dependencies.theme;
         },
         get state() {
           return dependencies.state;
@@ -184521,6 +184713,7 @@ import { createElement as _$createElement11 } from "@opentui/solid";
 import { useKeyboard as useKeyboard3 } from "@opentui/solid";
 import { createSignal as createSignal10, For as For5, Show as Show6 } from "solid-js";
 function LocationTravelDialog(properties) {
+  const surface = () => properties.theme?.().dialog ?? fallbackPokecodeTheme.dialog;
   const copy = () => uiCopy(properties.language);
   const initialLocationId = properties.locations.some((location) => location.id === properties.currentLocationId) ? properties.currentLocationId : properties.locations[0]?.id ?? "";
   const [selectedLocationId, setSelectedLocationId] = createSignal10(initialLocationId);
@@ -184587,9 +184780,7 @@ function LocationTravelDialog(properties) {
     _$insertNode10(_el$, _el$2);
     _$insertNode10(_el$, _el$3);
     _$insertNode10(_el$, _el$8);
-    _$setProp11(_el$, "backgroundColor", "#111827");
     _$setProp11(_el$, "border", true);
-    _$setProp11(_el$, "borderColor", "#4b5563");
     _$setProp11(_el$, "borderStyle", "rounded");
     _$setProp11(_el$, "flexDirection", "column");
     _$setProp11(_el$, "gap", 1);
@@ -184601,7 +184792,6 @@ function LocationTravelDialog(properties) {
     _$insert11(_el$2, () => copy().locationsDialog);
     _$insertNode10(_el$3, _el$4);
     _$insertNode10(_el$3, _el$5);
-    _$setProp11(_el$3, "backgroundColor", "#111827");
     _$setProp11(_el$3, "flexDirection", "row");
     _$setProp11(_el$3, "flexGrow", 1);
     _$setProp11(_el$3, "gap", 1);
@@ -184610,7 +184800,6 @@ function LocationTravelDialog(properties) {
     _$use4((renderable) => {
       locationsScrollbox = renderable;
     }, _el$4);
-    _$setProp11(_el$4, "backgroundColor", "#111827");
     _$setProp11(_el$4, "contentOptions", {
       flexDirection: "column"
     });
@@ -184638,6 +184827,7 @@ function LocationTravelDialog(properties) {
             var _el$0 = _$createElement11("text");
             _$setProp11(_el$0, "attributes", bold);
             _$insert11(_el$0, () => region.name);
+            _$effect11((_$p) => _$setProp11(_el$0, "fg", surface().accent, _$p));
             return _el$0;
           }
         }), null);
@@ -184655,9 +184845,9 @@ function LocationTravelDialog(properties) {
             _$setProp11(_el$1, "onMouseUp", () => selectLocation(location.id));
             _$insert11(_el$10, () => `${selectedLocationId() === location.id ? "\u203A " : "  "}${location.name}`);
             _$effect11((_p$) => {
-              var _v$ = `travel-location-${location.id}`, _v$2 = selectedLocationId() === location.id ? "#22c55e" : "#d1d5db";
-              _v$ !== _p$.e && (_p$.e = _$setProp11(_el$1, "id", _v$, _p$.e));
-              _v$2 !== _p$.t && (_p$.t = _$setProp11(_el$10, "fg", _v$2, _p$.t));
+              var _v$9 = `travel-location-${location.id}`, _v$0 = selectedLocationId() === location.id ? surface().accent : surface().text;
+              _v$9 !== _p$.e && (_p$.e = _$setProp11(_el$1, "id", _v$9, _p$.e));
+              _v$0 !== _p$.t && (_p$.t = _$setProp11(_el$10, "fg", _v$0, _p$.t));
               return _p$;
             }, {
               e: undefined,
@@ -184671,7 +184861,6 @@ function LocationTravelDialog(properties) {
     }));
     _$insertNode10(_el$5, _el$6);
     _$insertNode10(_el$5, _el$7);
-    _$setProp11(_el$5, "backgroundColor", "#111827");
     _$setProp11(_el$5, "flexDirection", "column");
     _$setProp11(_el$5, "flexGrow", 1);
     _$setProp11(_el$5, "minWidth", 0);
@@ -184682,7 +184871,6 @@ function LocationTravelDialog(properties) {
     _$use4((renderable) => {
       pokemonScrollbox = renderable;
     }, _el$7);
-    _$setProp11(_el$7, "backgroundColor", "#111827");
     _$setProp11(_el$7, "contentOptions", {
       flexDirection: "column"
     });
@@ -184703,6 +184891,7 @@ function LocationTravelDialog(properties) {
         return (() => {
           var _el$11 = _$createElement11("text");
           _$insert11(_el$11, () => copy().noLocationPokemon);
+          _$effect11((_$p) => _$setProp11(_el$11, "fg", surface().muted, _$p));
           return _el$11;
         })();
       },
@@ -184723,7 +184912,6 @@ function LocationTravelDialog(properties) {
                 _$insertNode10(_el$13, _el$14);
                 _$insertNode10(_el$13, _el$15);
                 _$setProp11(_el$13, "alignItems", "center");
-                _$setProp11(_el$13, "backgroundColor", "#111827");
                 _$setProp11(_el$13, "flexBasis", 0);
                 _$setProp11(_el$13, "flexDirection", "column");
                 _$setProp11(_el$13, "flexGrow", 1);
@@ -184746,6 +184934,7 @@ function LocationTravelDialog(properties) {
                   get protocol() {
                     return properties.imageProtocol;
                   },
+                  theme: surface,
                   shiny: false,
                   gender: "genderless",
                   get speciesId() {
@@ -184765,7 +184954,17 @@ function LocationTravelDialog(properties) {
                   var _c$ = _$memo7(() => pokemon.status === "unknown");
                   return () => _c$() ? "???" : pokemon.name;
                 })());
-                _$effect11((_$p) => _$setProp11(_el$16, "fg", pokemon.status === "caught" ? "#22c55e" : pokemon.status === "seen" ? "#9ca3af" : "#ffffff", _$p));
+                _$effect11((_p$) => {
+                  var _v$1 = surface().background, _v$10 = pokemon.status === "caught" ? surface().success : pokemon.status === "seen" ? surface().muted : surface().text, _v$11 = pokemon.status === "unknown" ? surface().muted : surface().text;
+                  _v$1 !== _p$.e && (_p$.e = _$setProp11(_el$13, "backgroundColor", _v$1, _p$.e));
+                  _v$10 !== _p$.t && (_p$.t = _$setProp11(_el$16, "fg", _v$10, _p$.t));
+                  _v$11 !== _p$.a && (_p$.a = _$setProp11(_el$17, "fg", _v$11, _p$.a));
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined
+                });
                 return _el$13;
               })()
             }));
@@ -184785,6 +184984,7 @@ function LocationTravelDialog(properties) {
       onActivate: async () => properties.onClose(),
       onHover: () => {},
       onLeave: () => {},
+      theme: surface,
       tone: "secondary"
     }), null);
     _$insert11(_el$8, _$createComponent12(PokecodeActionButton, {
@@ -184795,8 +184995,30 @@ function LocationTravelDialog(properties) {
       onActivate: async () => travel(),
       onHover: () => {},
       onLeave: () => {},
+      theme: surface,
       tone: "success"
     }), null);
+    _$effect11((_p$) => {
+      var _v$ = surface().background, _v$2 = surface().border, _v$3 = surface().accent, _v$4 = surface().background, _v$5 = surface().background, _v$6 = surface().background, _v$7 = surface().accent, _v$8 = surface().background;
+      _v$ !== _p$.e && (_p$.e = _$setProp11(_el$, "backgroundColor", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp11(_el$, "borderColor", _v$2, _p$.t));
+      _v$3 !== _p$.a && (_p$.a = _$setProp11(_el$2, "fg", _v$3, _p$.a));
+      _v$4 !== _p$.o && (_p$.o = _$setProp11(_el$3, "backgroundColor", _v$4, _p$.o));
+      _v$5 !== _p$.i && (_p$.i = _$setProp11(_el$4, "backgroundColor", _v$5, _p$.i));
+      _v$6 !== _p$.n && (_p$.n = _$setProp11(_el$5, "backgroundColor", _v$6, _p$.n));
+      _v$7 !== _p$.s && (_p$.s = _$setProp11(_el$6, "fg", _v$7, _p$.s));
+      _v$8 !== _p$.h && (_p$.h = _$setProp11(_el$7, "backgroundColor", _v$8, _p$.h));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined
+    });
     return _el$;
   })();
 }
@@ -184871,6 +185093,9 @@ function createLocationTravelAction(dependencies) {
       },
       get imageProtocol() {
         return dependencies.imageProtocol;
+      },
+      get theme() {
+        return dependencies.theme;
       }
     })));
     dependencies.dialog.set({
@@ -184925,12 +185150,14 @@ function createPokemonTuiPlugin(dependencies = defaultDependencies) {
           state,
           toast: (options) => context.ui.toast.show(options)
         });
+        const theme = () => toPokecodeTheme(context.theme);
         const chooseLocation = createLocationTravelAction({
           rpc,
           state,
           dialog: context.ui.dialog,
           resolveSprite,
           imageProtocol: imageProtocol.protocol,
+          theme,
           travelToLocation: sidebarActions.travelToLocation
         });
         const showDex = createDexAction({
@@ -184942,10 +185169,7 @@ function createPokemonTuiPlugin(dependencies = defaultDependencies) {
           rpc,
           state,
           dialog: context.ui.dialog,
-          theme: {
-            base: () => context.theme.text.base,
-            muted: () => context.theme.text.muted
-          },
+          theme,
           resolveSprite,
           imageProtocol: imageProtocol.protocol
         });
@@ -184958,10 +185182,7 @@ function createPokemonTuiPlugin(dependencies = defaultDependencies) {
         unregisterSlot = (dependencies.registerSidebar ?? registerPokemonSidebar)({
           slot: context.ui.slot,
           state: state.state,
-          theme: {
-            base: () => context.theme.text.base,
-            muted: () => context.theme.text.muted
-          },
+          theme,
           hoveredStarter,
           setHoveredStarter,
           hoveredEncounterAction,