ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(tui): expose theme colors as properties (#37995)

Browse source
This commit is contained in:
James Long 2026-07-20 16:17:09 -04:00 • committed by GitHub
commit c0ba62b972
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
46 changed files with 740 additions and 749 deletions
Download patch file Download diff file Expand all files Collapse all files

14
packages/tui/src/feature-plugins/home/footer.tsx
View file

@ -17,7 +17,7 @@ function Directory(props: { context: Plugin.Context; maxWidth: number }) {
return (
<Show when={directory()}>
{(value) => <FilePath value={value()} maxWidth={props.maxWidth} fg={themeV2.text.subdued()} />}
{(value) => <FilePath value={value()} maxWidth={props.maxWidth} fg={themeV2.text.subdued} />}
</Show>
)
}
@ -31,20 +31,18 @@ function Mcp(props: { context: Plugin.Context }) {
return (
<Show when={list().length}>
<box gap={1} flexDirection="row" flexShrink={0}>
<text fg={themeV2.text()}>
<text fg={themeV2.text.default}>
<Switch>
<Match when={failed()}>
<span style={{ fg: themeV2.text.feedback.error() }}>⊙ </span>
<span style={{ fg: themeV2.text.feedback.error.default }}>⊙ </span>
</Match>
<Match when={true}>
<span style={{ fg: count() > 0 ? themeV2.text.feedback.success() : themeV2.text.subdued() }}>
⊙{" "}
</span>
<span style={{ fg: count() > 0 ? themeV2.text.feedback.success.default : themeV2.text.subdued }}>⊙ </span>
</Match>
</Switch>
{count()} MCP
</text>
<text fg={themeV2.text.subdued()}>/status</text>
<text fg={themeV2.text.subdued}>/status</text>
</box>
</Show>
)
@ -78,7 +76,7 @@ function View(props: { context: Plugin.Context }) {
<Mcp context={props.context} />
<box flexGrow={1} />
<box flexShrink={0}>
<text fg={themeV2.text.subdued()}>{InstallationVersion}</text>
<text fg={themeV2.text.subdued}>{InstallationVersion}</text>
</box>
</box>
)

10
packages/tui/src/feature-plugins/sidebar/context.tsx
View file

@ -20,20 +20,20 @@ function View(props: { context: Plugin.Context; sessionID: string }) {
return (
<box>
<text fg={themeV2.text()}>
<text fg={themeV2.text.default}>
<b>Context</b>
</text>
<Show when={state()} fallback={<text fg={themeV2.text.subdued()}>Not measured</text>}>
<Show when={state()} fallback={<text fg={themeV2.text.subdued}>Not measured</text>}>
{(value) => (
<>
<text fg={themeV2.text.subdued()}>{value().tokens.toLocaleString()} tokens</text>
<text fg={themeV2.text.subdued}>{value().tokens.toLocaleString()} tokens</text>
<Show when={value().percent !== undefined}>
<text fg={themeV2.text.subdued()}>{value().percent}% used</text>
<text fg={themeV2.text.subdued}>{value().percent}% used</text>
</Show>
</>
)}
</Show>
<text fg={themeV2.text.subdued()}>{money.format(cost())} spent</text>
<text fg={themeV2.text.subdued}>{money.format(cost())} spent</text>
</box>
)
}

2
packages/tui/src/feature-plugins/sidebar/footer.tsx
View file

@ -12,7 +12,7 @@ function View(props: { context: Plugin.Context }) {
props.context.location ? abbreviateHome(props.context.location.directory, paths.home) : undefined,
)
return (
<Show when={directory()}>{(value) => <FilePath value={value()} maxWidth={38} fg={themeV2.text.subdued()} />}</Show>
<Show when={directory()}>{(value) => <FilePath value={value()} maxWidth={38} fg={themeV2.text.subdued} />}</Show>
)
}

4
packages/tui/src/feature-plugins/sidebar/lsp.tsx
View file

@ -5,10 +5,10 @@ function View() {
const { themeV2 } = useTheme()
return (
<box>
<text fg={themeV2.text()}>
<text fg={themeV2.text.default}>
<b>LSP</b>
</text>
<text fg={themeV2.text.subdued()}>LSP status unavailable</text>
<text fg={themeV2.text.subdued}>LSP status unavailable</text>
</box>
)
}

22
packages/tui/src/feature-plugins/sidebar/mcp.tsx
View file

@ -19,12 +19,12 @@ function View(props: { context: Plugin.Context; sessionID: string }) {
)
const dot = (status: string) => {
if (status === "connected") return themeV2.text.feedback.success()
if (status === "failed") return themeV2.text.feedback.error()
if (status === "disabled") return themeV2.text.subdued()
if (status === "needs_auth") return themeV2.text.feedback.warning()
if (status === "needs_client_registration") return themeV2.text.feedback.error()
return themeV2.text.subdued()
if (status === "connected") return themeV2.text.feedback.success.default
if (status === "failed") return themeV2.text.feedback.error.default
if (status === "disabled") return themeV2.text.subdued
if (status === "needs_auth") return themeV2.text.feedback.warning.default
if (status === "needs_client_registration") return themeV2.text.feedback.error.default
return themeV2.text.subdued
}
return (
@ -32,12 +32,12 @@ function View(props: { context: Plugin.Context; sessionID: string }) {
<box>
<box flexDirection="row" gap={1} onMouseDown={() => list().length > 2 && setOpen((x) => !x)}>
<Show when={list().length > 2}>
<text fg={themeV2.text()}>{open() ? "▼" : "▶"}</text>
<text fg={themeV2.text.default}>{open() ? "▼" : "▶"}</text>
</Show>
<text fg={themeV2.text()}>
<text fg={themeV2.text.default}>
<b>MCP</b>
<Show when={!open()}>
<span style={{ fg: themeV2.text.subdued() }}>
<span style={{ fg: themeV2.text.subdued }}>
{" "}
({on()} active{bad() > 0 ? `, ${bad()} error${bad() > 1 ? "s" : ""}` : ""})
</span>
@ -56,9 +56,9 @@ function View(props: { context: Plugin.Context; sessionID: string }) {
>
•
</text>
<text fg={themeV2.text()} wrapMode="word">
<text fg={themeV2.text.default} wrapMode="word">
{item.name}{" "}
<span style={{ fg: themeV2.text.subdued() }}>
<span style={{ fg: themeV2.text.subdued }}>
<Switch fallback={item.status.status}>
<Match when={item.status.status === "connected"}>Connected</Match>
<Match when={item.status.status === "failed"}>

4
packages/tui/src/feature-plugins/system/diff-viewer-ui.tsx
View file

@ -38,7 +38,7 @@ export function Panel(props: Omit<JSX.IntrinsicElements["box"], "border"> & { bo
? {}
: {
border: panelBorderSides(group?.axis ?? "y", border),
borderColor: themeV2.border(),
borderColor: themeV2.border.default,
}
return (
@ -60,7 +60,7 @@ function panelBorderSides(axis: Axis, border: Exclude<PanelBorder, "none">): Bor
export function Separator(props: { axis?: Axis; color?: ColorInput; start?: SeparatorEdge; end?: SeparatorEdge }) {
const group = usePanelGroup()
const { themeV2 } = useTheme()
const color = () => props.color ?? themeV2.border()
const color = () => props.color ?? themeV2.border.default
const axis = () => props.axis ?? crossAxis(group?.axis ?? "y")
if (axis() === "y") {
return (

8
packages/tui/src/feature-plugins/system/scrap.tsx
View file

@ -43,19 +43,19 @@ function Scrap(props: { context: Plugin.Context }) {
}))
return (
<box width={dimensions().width} height={dimensions().height} backgroundColor={themeV2.background()}>
<box width={dimensions().width} height={dimensions().height} backgroundColor={themeV2.background.default}>
<box flexGrow={1} />
<box
height={1}
flexShrink={0}
backgroundColor={elevatedTheme.background()}
backgroundColor={elevatedTheme.background.default}
paddingLeft={1}
paddingRight={1}
flexDirection="row"
>
<text fg={elevatedTheme.text.subdued()}>~/code/anomalyco/opencode</text>
<text fg={elevatedTheme.text.subdued}>~/code/anomalyco/opencode</text>
<box flexGrow={1} />
<text fg={elevatedTheme.text.subdued()}>esc home</text>
<text fg={elevatedTheme.text.subdued}>esc home</text>
</box>
</box>
)