mirrors/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-11-13 19:46:16 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(session-ui): migrate timeline text colors to v2 (#58115)

Browse Source
This commit is contained in:
usrnk1
2026-10-22 14:27:58 +02:00
committed by GitHub
Unverified
parent 86e0e38e31
commit 5bfeb82f04
11 changed files with 52 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/session-ui/src/components/basic-tool.css
+8 -8
View File
@@ -127,22 +127,22 @@
}
&.subagent-link {
color: var(--text-interactive-base);
color: var(--v2-text-text-accent);
text-decoration: none;
text-underline-offset: 2px;
font-weight: var(--font-weight-regular);
&:visited {
color: var(--v2-text-text-accent);
}
&:hover {
color: var(--text-interactive-base);
color: var(--v2-text-text-accent-hover);
text-decoration: underline;
}
&:active {
color: var(--text-interactive-base);
}
&:visited {
color: var(--text-interactive-base);
color: var(--v2-text-text-accent);
}
}
}
@@ -327,7 +327,7 @@
line-height: var(--line-height-compact);
letter-spacing: var(--letter-spacing-normal);
text-transform: capitalize;
color: var(--text-strong);
color: var(--v2-text-text-base);
}
[data-slot="basic-tool-tool-subtitle"] {
packages/session-ui/src/components/file-media.tsx
+6 -6
View File
@@ -245,7 +245,7 @@ export function FileMedia(props: { media?: FileMediaOptions; fallback: () => JSX
if (deleted()) {
return (
<div class="flex min-h-40 items-center justify-center px-6 py-4 text-center text-text-weak">
<div class="flex min-h-40 items-center justify-center px-6 py-4 text-center text-v2-text-text-faint">
{i18n.t("ui.fileMedia.state.removed", { kind: label })}
</div>
)
@@ -253,7 +253,7 @@ export function FileMedia(props: { media?: FileMediaOptions; fallback: () => JSX
if (status() === "loading") {
return (
<div class="flex min-h-40 items-center justify-center px-6 py-4 text-center text-text-weak">
<div class="flex min-h-40 items-center justify-center px-6 py-4 text-center text-v2-text-text-faint">
{i18n.t("ui.fileMedia.state.loading", { kind: label })}
</div>
)
@@ -261,14 +261,14 @@ export function FileMedia(props: { media?: FileMediaOptions; fallback: () => JSX
if (status() === "error") {
return (
<div class="flex min-h-40 items-center justify-center px-6 py-4 text-center text-text-weak">
<div class="flex min-h-40 items-center justify-center px-6 py-4 text-center text-v2-text-text-faint">
{i18n.t("ui.fileMedia.state.error", { kind: label })}
</div>
)
}
return (
<div class="flex min-h-40 items-center justify-center px-6 py-4 text-center text-text-weak">
<div class="flex min-h-40 items-center justify-center px-6 py-4 text-center text-v2-text-text-faint">
{i18n.t("ui.fileMedia.state.unavailable", { kind: label })}
</div>
)
@@ -327,10 +327,10 @@ export function FileMedia(props: { media?: FileMediaOptions; fallback: () => JSX
</Match>
<Match when={isBinary()}>
<div class="flex min-h-56 flex-col items-center justify-center gap-2 px-6 py-10 text-center">
<div class="text-14-semibold text-text-strong">
<div class="text-14-semibold text-v2-text-text-base">
{cfg()?.path?.split("/").pop() ?? i18n.t("ui.fileMedia.binary.title")}
</div>
<div class="text-14-regular text-text-weak">
<div class="text-14-regular text-v2-text-text-faint">
{(() => {
const path = cfg()?.path
packages/session-ui/src/components/file-search.tsx
+6 -6
View File
@@ -26,22 +26,22 @@ export function FileSearchBar(props: {
}}
onPointerDown={(e) => e.stopPropagation()}
>
<Icon name="magnifying-glass" size="small" class="text-text-weak shrink-0" />
<Icon name="magnifying-glass" size="small" class="text-v2-icon-icon-muted shrink-0" />
<input
ref={props.setInput}
placeholder={i18n.t("ui.fileSearch.placeholder")}
value={props.query}
class="w-40 bg-transparent outline-none text-14-regular text-text-strong placeholder:text-text-weak"
class="w-40 bg-transparent outline-none text-14-regular text-v2-text-text-base placeholder:text-v2-text-text-faint"
onInput={(e) => props.onInput(e.currentTarget.value)}
onKeyDown={(e) => props.onKeyDown(e as KeyboardEvent)}
/>
<div class="shrink-0 text-12-regular text-text-weak tabular-nums text-right" style={{ width: "10ch" }}>
<div class="shrink-0 text-12-regular text-v2-text-text-faint tabular-nums text-right" style={{ width: "10ch" }}>
{props.count ? `${props.index + 1}/${props.count}` : "0/0"}
</div>
<div class="flex items-center">
<button
type="button"
class="size-6 grid place-items-center rounded text-text-weak hover:bg-surface-base-hover hover:text-text-strong disabled:opacity-40 disabled:pointer-events-none"
class="size-6 grid place-items-center rounded text-v2-icon-icon-muted hover:bg-surface-base-hover hover:text-v2-icon-icon-base disabled:opacity-40 disabled:pointer-events-none"
disabled={props.count === 0}
aria-label={i18n.t("ui.fileSearch.previousMatch")}
onClick={props.onPrev}
@@ -50,7 +50,7 @@ export function FileSearchBar(props: {
</button>
<button
type="button"
class="size-6 grid place-items-center rounded text-text-weak hover:bg-surface-base-hover hover:text-text-strong disabled:opacity-40 disabled:pointer-events-none"
class="size-6 grid place-items-center rounded text-v2-icon-icon-muted hover:bg-surface-base-hover hover:text-v2-icon-icon-base disabled:opacity-40 disabled:pointer-events-none"
disabled={props.count === 0}
aria-label={i18n.t("ui.fileSearch.nextMatch")}
onClick={props.onNext}
@@ -60,7 +60,7 @@ export function FileSearchBar(props: {
</div>
<button
type="button"
class="size-6 grid place-items-center rounded text-text-weak hover:bg-surface-base-hover hover:text-text-strong"
class="size-6 grid place-items-center rounded text-v2-icon-icon-muted hover:bg-surface-base-hover hover:text-v2-icon-icon-base"
aria-label={i18n.t("ui.fileSearch.close")}
onClick={props.onClose}
>
packages/session-ui/src/components/file.css
+1 -1
View File
@@ -31,7 +31,7 @@
[data-slot="diff-hunk-separator-content"] {
position: sticky;
background-color: var(--surface-diff-hidden-base);
color: var(--text-base);
color: var(--v2-text-text-muted);
width: var(--diffs-column-content-width);
left: var(--diffs-column-number-width);
padding-left: 8px;
packages/session-ui/src/components/line-comment-styles.ts
+10 -10
View File
@@ -121,7 +121,7 @@ export const lineCommentStyles = `
font-weight: var(--font-weight-regular);
line-height: var(--line-height-x-large);
letter-spacing: var(--letter-spacing-normal);
color: var(--text-strong);
color: var(--v2-text-text-base);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
@@ -141,7 +141,7 @@ export const lineCommentStyles = `
font-weight: var(--font-weight-medium);
line-height: var(--line-height-large);
letter-spacing: var(--letter-spacing-normal);
color: var(--text-weak);
color: var(--v2-text-text-faint);
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
@@ -163,7 +163,7 @@ export const lineCommentStyles = `
border-radius: var(--radius-md);
background: var(--surface-base);
border: 1px solid var(--v2-border-border-base);
color: var(--text-strong);
color: var(--v2-text-text-base);
font-family: var(--font-family-sans);
font-size: var(--font-size-small);
line-height: var(--line-height-large);
@@ -196,7 +196,7 @@ export const lineCommentStyles = `
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-strong);
color: var(--v2-text-text-base);
text-align: left;
}
@@ -215,14 +215,14 @@ export const lineCommentStyles = `
[data-component="line-comment"] [data-slot="line-comment-mention-dir"] {
min-width: 0;
color: var(--text-weak);
color: var(--v2-text-text-faint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-component="line-comment"] [data-slot="line-comment-mention-file"] {
color: var(--text-strong);
color: var(--v2-text-text-base);
white-space: nowrap;
}
@@ -243,7 +243,7 @@ export const lineCommentStyles = `
[data-component="line-comment"] [data-slot="line-comment-action"] {
border: 1px solid var(--v2-border-border-base);
background: var(--surface-base);
color: var(--text-strong);
color: var(--v2-text-text-base);
border-radius: var(--radius-md);
height: 28px;
padding: 0 10px;
@@ -257,9 +257,9 @@ export const lineCommentStyles = `
}
[data-component="line-comment"] [data-slot="line-comment-action"][data-variant="primary"] {
background: var(--text-strong);
border-color: var(--text-strong);
color: var(--background-base);
background: var(--v2-background-bg-contrast);
border-color: var(--v2-background-bg-contrast);
color: var(--v2-text-text-contrast);
}
[data-component="line-comment"] [data-slot="line-comment-action"]:disabled {
packages/session-ui/src/components/markdown.css
+5 -3
View File
@@ -5,7 +5,7 @@
border-radius: 4px;
background: var(--v2-background-bg-layer-02);
box-shadow: inset 0 0 0 1px var(--v2-border-border-base);
color: var(--text-interactive-base);
color: var(--v2-text-text-accent);
font: inherit;
cursor: pointer;
box-decoration-break: clone;
@@ -13,6 +13,7 @@
}
.markdown-session-link:hover {
color: var(--v2-text-text-accent-hover);
text-decoration: underline;
text-underline-offset: 2px;
}
@@ -133,12 +134,13 @@
/* Links */
a {
color: var(--text-interactive-base);
color: var(--v2-text-text-accent);
text-decoration: none;
font-weight: inherit;
}
a:hover {
color: var(--v2-text-text-accent-hover);
text-decoration: underline;
text-underline-offset: 2px;
}
@@ -275,7 +277,7 @@
.highlights {
background: var(--color-background-stronger);
color: var(--text-base);
color: var(--v2-text-text-muted);
font-size: 13px;
line-height: 20px;
padding: 12px;
packages/session-ui/src/components/message-nav.css
+3 -3
View File
@@ -80,7 +80,7 @@
[data-slot="message-nav-title-preview"] {
font-size: 14px; /* text-14-regular */
color: var(--text-base);
color: var(--v2-text-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -88,7 +88,7 @@
text-align: left;
&[data-active] {
color: var(--text-strong);
color: var(--v2-text-text-base);
font-weight: 500;
}
}
@@ -106,7 +106,7 @@
}
[data-slot="message-nav-item"]:active [data-slot="message-nav-title-preview"] {
color: var(--text-base);
color: var(--v2-text-text-muted);
}
[data-slot="message-nav-hovercard-content"] {
packages/session-ui/src/components/session-turn.css
+8 -8
View File
@@ -54,7 +54,7 @@
gap: 8px;
width: 100%;
min-width: 0;
color: var(--text-weak);
color: var(--v2-text-text-faint);
font-family: var(--font-family-sans);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
@@ -70,7 +70,7 @@
[data-component="text-reveal"].session-turn-thinking-heading {
flex: 1 1 auto;
min-width: 0;
color: var(--text-weaker);
color: var(--v2-text-text-faint);
font-weight: var(--font-weight-regular);
}
@@ -154,7 +154,7 @@
[data-slot="session-turn-diffs-label"] {
font-variant-numeric: tabular-nums;
color: var(--text-strong);
color: var(--v2-text-text-base);
font-family: var(--font-family-sans);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
@@ -162,7 +162,7 @@
}
[data-slot="session-turn-diffs-toggle"] {
color: var(--text-interactive-base);
color: var(--v2-text-text-accent);
font-family: var(--font-family-sans);
font-size: var(--font-size-base);
font-weight: var(--font-weight-regular);
@@ -185,7 +185,7 @@
}
[data-slot="session-turn-diffs-more"] {
color: var(--text-weak);
color: var(--v2-text-text-faint);
font-family: var(--font-family-sans);
font-size: var(--font-size-small);
line-height: var(--line-height-large);
@@ -195,7 +195,7 @@
transition: color 0.15s ease;
&:hover {
color: var(--text-link-base);
color: var(--v2-text-text-accent-hover);
}
}
@@ -227,7 +227,7 @@
}
[data-slot="session-turn-diff-directory"] {
color: var(--text-base);
color: var(--v2-text-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -237,7 +237,7 @@
[data-slot="session-turn-diff-filename"] {
min-width: 0;
color: var(--text-strong);
color: var(--v2-text-text-base);
font-weight: var(--font-weight-medium);
overflow: hidden;
text-overflow: ellipsis;
packages/session-ui/src/components/tool-status-title.css
+1 -1
View File
@@ -55,7 +55,7 @@
}
[data-slot="tool-status-done"] {
color: var(--text-strong);
color: var(--v2-text-text-base);
opacity: 1;
filter: blur(0);
transform: translateY(0);
packages/session-ui/src/timeline/session-timeline-row.tsx
+3 -3
View File
@@ -653,7 +653,7 @@ export function createSessionTimelineRowRenderer(input: {
component={href() ? "a" : "div"}
data-slot="session-timeline-notice"
data-outcome={content().outcome}
class={`block w-full truncate ${props.grouped ? "py-1" : "pt-3 pb-1"} text-13-regular leading-text-compact text-text-weak ${inset()}`}
class={`block w-full truncate ${props.grouped ? "py-1" : "pt-3 pb-1"} text-13-regular leading-text-compact text-v2-text-text-faint ${inset()}`}
classList={{ "cursor-pointer hover:text-v2-text-text-base": clickable() }}
href={href()}
role={clickable() && !href() ? "link" : undefined}
@@ -787,14 +787,14 @@ export function createSessionTimelineRowRenderer(input: {
<Show when={data.turnDiff && paths().length > 0}>
<div data-slot="session-turn-diffs" class="flex flex-col gap-2 pt-4">
<div class="flex h-6 min-w-0 items-center gap-2">
<span class="text-14-medium text-text-strong tabular-nums">
<span class="text-14-medium text-v2-text-text-base tabular-nums">
{i18n.plural("ui.sessionTurn.diffs.changed", paths().length)}
</span>
<DiffChanges changes={[...(diffs() ?? [])]} />
<Show when={overflow()}>
<button
type="button"
class="ml-auto text-14-regular text-text-interactive-base"
class="ml-auto text-14-regular text-v2-text-text-accent"
onClick={() => input.disclosure.set(showAllKey(), !showAll())}
>
{showAll() ? i18n.t("ui.sessionTurn.diffs.showLess") : i18n.t("ui.sessionTurn.diffs.showAll")}
packages/session-ui/src/tools/tool-renderer.tsx
+1 -1
View File
@@ -1322,7 +1322,7 @@ export function ToolDisplay(
if (props.tool === "question" && cleaned.includes("dismissed this question")) {
return (
<div style="width: 100%; display: flex; justify-content: flex-end;">
<span class="text-13-regular text-text-weak cursor-default">
<span class="text-13-regular text-v2-text-text-faint cursor-default">
{i18n.t("ui.messagePart.questions.dismissed")}
</span>
</div>