From 5bfeb82f0457d12c658c1158c7e49773b73e183c Mon Sep 17 00:00:00 2001
From: usrnk1 <7547651+usrnk1@users.noreply.github.com>
Date: Thu, 22 Oct 2026 14:27:58 +0200
Subject: [PATCH] fix(session-ui): migrate timeline text colors to v2 (#58115)

---
 .../session-ui/src/components/basic-tool.css  | 16 +++++++--------
 .../session-ui/src/components/file-media.tsx  | 12 +++++------
 .../session-ui/src/components/file-search.tsx | 12 +++++------
 packages/session-ui/src/components/file.css   |  2 +-
 .../src/components/line-comment-styles.ts     | 20 +++++++++----------
 .../session-ui/src/components/markdown.css    |  8 +++++---
 .../session-ui/src/components/message-nav.css |  6 +++---
 .../src/components/session-turn.css           | 16 +++++++--------
 .../src/components/tool-status-title.css      |  2 +-
 .../src/timeline/session-timeline-row.tsx     |  6 +++---
 .../session-ui/src/tools/tool-renderer.tsx    |  2 +-
 11 files changed, 52 insertions(+), 50 deletions(-)

diff --git a/packages/session-ui/src/components/basic-tool.css b/packages/session-ui/src/components/basic-tool.css
index 99b95cec7a7..478c980e2ec 100644
--- a/packages/session-ui/src/components/basic-tool.css
+++ b/packages/session-ui/src/components/basic-tool.css
@@ -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"] {
diff --git a/packages/session-ui/src/components/file-media.tsx b/packages/session-ui/src/components/file-media.tsx
index 84364f568c2..4283398e411 100644
--- a/packages/session-ui/src/components/file-media.tsx
+++ b/packages/session-ui/src/components/file-media.tsx
@@ -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
 
diff --git a/packages/session-ui/src/components/file-search.tsx b/packages/session-ui/src/components/file-search.tsx
index 786b349c89a..723c011bbaa 100644
--- a/packages/session-ui/src/components/file-search.tsx
+++ b/packages/session-ui/src/components/file-search.tsx
@@ -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}
         >
diff --git a/packages/session-ui/src/components/file.css b/packages/session-ui/src/components/file.css
index a17732f6145..b273f2a3791 100644
--- a/packages/session-ui/src/components/file.css
+++ b/packages/session-ui/src/components/file.css
@@ -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;
diff --git a/packages/session-ui/src/components/line-comment-styles.ts b/packages/session-ui/src/components/line-comment-styles.ts
index 6bf2a062902..7a3eff77277 100644
--- a/packages/session-ui/src/components/line-comment-styles.ts
+++ b/packages/session-ui/src/components/line-comment-styles.ts
@@ -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 {
diff --git a/packages/session-ui/src/components/markdown.css b/packages/session-ui/src/components/markdown.css
index a9afd8197c4..c2bb351fd6f 100644
--- a/packages/session-ui/src/components/markdown.css
+++ b/packages/session-ui/src/components/markdown.css
@@ -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;
diff --git a/packages/session-ui/src/components/message-nav.css b/packages/session-ui/src/components/message-nav.css
index 8e4d906a3f7..e070f60d30a 100644
--- a/packages/session-ui/src/components/message-nav.css
+++ b/packages/session-ui/src/components/message-nav.css
@@ -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"] {
diff --git a/packages/session-ui/src/components/session-turn.css b/packages/session-ui/src/components/session-turn.css
index 64140e661b6..09a5f2143dd 100644
--- a/packages/session-ui/src/components/session-turn.css
+++ b/packages/session-ui/src/components/session-turn.css
@@ -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;
diff --git a/packages/session-ui/src/components/tool-status-title.css b/packages/session-ui/src/components/tool-status-title.css
index 6e6daa484d9..2c3ad48a741 100644
--- a/packages/session-ui/src/components/tool-status-title.css
+++ b/packages/session-ui/src/components/tool-status-title.css
@@ -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);
diff --git a/packages/session-ui/src/timeline/session-timeline-row.tsx b/packages/session-ui/src/timeline/session-timeline-row.tsx
index 12f74aef9da..2debc4e4b15 100644
--- a/packages/session-ui/src/timeline/session-timeline-row.tsx
+++ b/packages/session-ui/src/timeline/session-timeline-row.tsx
@@ -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")}
diff --git a/packages/session-ui/src/tools/tool-renderer.tsx b/packages/session-ui/src/tools/tool-renderer.tsx
index b940486c24a..1acd5b5c8a5 100644
--- a/packages/session-ui/src/tools/tool-renderer.tsx
+++ b/packages/session-ui/src/tools/tool-renderer.tsx
@@ -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>