@brimveyn/aimux 1.9.3 → 1.9.6

package/src/ui/components/git/git-panel.tsx

@@ -18,7 +18,7 @@ import {
   type GitTreeFileRow,
   type GitTreeFolderRow,
 } from '../../../state/git-tree'
-import { getCurrentTokens, getTransparent, useTokens, useTransparent } from '../../theme'
+import { getCurrentTheme, getTransparent, useTheme, useTransparent } from '../../theme'
 
 interface GitPanelProps {
   collapsedFolders?: Record<string, true>
@@ -49,19 +49,20 @@ const BASE_SECTION_ORDER: GitFileSection[] = ['staged', 'unstaged', 'untracked']
 const HISTORICAL_SECTION_ORDER: GitFileSection[] = ['historical', 'untracked']
 
 function statusColor(status: GitFileEntry['status']): string {
-  const t = getCurrentTokens()
+  const t = getCurrentTheme()
   switch (status) {
     case '?':
+      return t.text
     case 'A':
-      return t.palette.success
+      return t.diffAdded
     case 'C':
     case 'R':
-      return t.palette.primary
+      return t.text
     case 'D':
     case 'U':
-      return t.palette.error
+      return t.diffRemoved
     case 'M':
-      return t.palette.warning
+      return t.warning
   }
 }
 
@@ -99,7 +100,7 @@ function renderFileLabel(
   pathConfig: GitPanePathConfig,
   fileListMode: GitFileListMode
 ): ReactNode {
-  const t = getCurrentTokens()
+  const t = getCurrentTheme()
   const transform = pathConfig.enabled ? pathConfig.pathFn : undefined
   const displayPath = transform ? transform(file.path) : file.path
   const { basename, prefix } = splitPath(displayPath)
@@ -108,8 +109,8 @@ function renderFileLabel(
   if (!file.renamedFrom) {
     return (
       <text wrapMode="none">
-        <span fg={t.palette.ink}>{basename}</span>
-        {showDir ? <span fg={t.muted}> {dir}</span> : null}
+        <span fg={t.text}>{basename}</span>
+        {showDir ? <span fg={t.textMuted}> {dir}</span> : null}
       </text>
     )
   }
@@ -118,11 +119,11 @@ function renderFileLabel(
   const renamedDir = stripTrailingSlash(renamed.prefix)
   return (
     <text wrapMode="none">
-      <span fg={t.muted}>{renamed.basename}</span>
-      {showDir && renamedDir ? <span fg={t.muted}> {renamedDir}</span> : null}
-      <span fg={t.muted}> → </span>
-      <span fg={t.palette.ink}>{basename}</span>
-      {showDir ? <span fg={t.muted}> {dir}</span> : null}
+      <span fg={t.textMuted}>{renamed.basename}</span>
+      {showDir && renamedDir ? <span fg={t.textMuted}> {renamedDir}</span> : null}
+      <span fg={t.textMuted}> → </span>
+      <span fg={t.text}>{basename}</span>
+      {showDir ? <span fg={t.textMuted}> {dir}</span> : null}
     </text>
   )
 }
@@ -136,28 +137,31 @@ function renderDiffCount(
   hasNumstat: boolean
 ): ReactNode {
   if (!diffCountConfig.enabled) return null
-  const t = getCurrentTokens()
+  const t = getCurrentTheme()
   if (!hasNumstat) {
     return (
-      <text fg={t.muted} bg={bg} flexShrink={0}>
+      <text fg={t.textMuted} bg={bg} flexShrink={0}>
         —
       </text>
     )
   }
   return (
     <box flexDirection="row" flexShrink={0}>
-      <text fg={t.palette.success} bg={bg}>{`+${padRight(file.added, addedW)}`}</text>
-      <text fg={t.hover} bg={bg}>
+      <text fg={getCurrentTheme().diffAdded} bg={bg}>{`+${padRight(file.added, addedW)}`}</text>
+      <text fg={t.textMuted} bg={bg}>
         {' '}
       </text>
-      <text fg={t.palette.error} bg={bg}>{`−${padRight(file.removed, removedW)}`}</text>
+      <text
+        fg={getCurrentTheme().diffRemoved}
+        bg={bg}
+      >{`−${padRight(file.removed, removedW)}`}</text>
     </box>
   )
 }
 
 function renderFolderRow(row: GitTreeFolderRow, isSelected: boolean): ReactNode {
-  const t = getCurrentTokens()
-  const bg = isSelected && !getTransparent() ? t.selected : undefined
+  const t = getCurrentTheme()
+  const bg = isSelected && !getTransparent() ? t.backgroundElement : undefined
   const onSelect = (): void => {
     dispatchGlobal({ key: row.key, type: 'git-mode-select-entry-by-key' })
   }
@@ -168,13 +172,13 @@ function renderFolderRow(row: GitTreeFolderRow, isSelected: boolean): ReactNode
     <box key={row.key} flexDirection="row" gap={1} backgroundColor={bg} onMouseDown={onSelect}>
       <box flexGrow={1} overflow="hidden" paddingLeft={row.depth * 2}>
         <box flexDirection="row" gap={1} onMouseDown={onToggle}>
-          <text fg={t.muted} bg={bg}>
+          <text fg={t.textMuted} bg={bg}>
             {row.isCollapsed ? '▸' : '▾'}
           </text>
-          <text fg={t.palette.primary} bg={bg}>
+          <text fg={getCurrentTheme().textMuted} bg={bg}>
             {row.isCollapsed ? '\uf07b' : '\uf07c'}
           </text>
-          <text fg={t.palette.primary} bg={bg} wrapMode="none">
+          <text fg={t.textMuted} bg={bg} wrapMode="none">
             {row.name}
           </text>
         </box>
@@ -193,10 +197,9 @@ function renderFileRow(
   diffCountConfig: GitPaneDiffCountConfig,
   repoPrefixes: Record<string, string>
 ): ReactNode {
-  const t = getCurrentTokens()
   const file = row.file
   const hasNumstat = file.added !== null || file.removed !== null
-  const bg = isSelected && !getTransparent() ? t.selected : undefined
+  const bg = isSelected && !getTransparent() ? getCurrentTheme().backgroundElement : undefined
   const onSelect = (): void => {
     dispatchGlobal({ key: row.key, type: 'git-mode-select-entry-by-key' })
   }
@@ -213,7 +216,7 @@ function renderFileRow(
       </box>
       {repoTag ? (
         <box flexShrink={0}>
-          <text fg={t.palette.primary} bg={bg}>
+          <text fg={getCurrentTheme().primary} bg={bg}>
             <strong>{repoTag}</strong>
           </text>
         </box>
@@ -242,7 +245,7 @@ function renderTreeSection(
   repoPrefixes: Record<string, string>
 ): ReactNode {
   if (files.length === 0) return null
-  const t = getCurrentTokens()
+  const t2 = getCurrentTheme()
   const nextFileListMode = fileListMode === 'tree' ? 'flat' : 'tree'
   const toggleListMode = (): void => {
     dispatchGlobal({ type: 'git-mode-toggle-file-list-mode' })
@@ -251,16 +254,16 @@ function renderTreeSection(
   return (
     <box key={section} flexDirection="column" marginTop={marginTop}>
       <box flexDirection="row" justifyContent="space-between">
-        <text fg={t.accent}>
+        <text fg={t2.text}>
           <strong>
             {title} ({files.length})
           </strong>
         </text>
         {showListModeToggle ? (
           <box flexDirection="row" gap={1} onMouseDown={toggleListMode}>
-            <text fg={fileListMode === 'tree' ? t.palette.primary : t.muted}>tree</text>
-            <text fg={t.muted}>|</text>
-            <text fg={fileListMode === 'flat' ? t.palette.primary : t.muted}>flat</text>
+            <text fg={fileListMode === 'tree' ? t2.primary : t2.textMuted}>tree</text>
+            <text fg={t2.textMuted}>|</text>
+            <text fg={fileListMode === 'flat' ? t2.primary : t2.textMuted}>flat</text>
           </box>
         ) : null}
       </box>
@@ -301,18 +304,18 @@ function computeStatusPlaceholder(
   gitPanel: GitPanelState,
   hasProjectPath: boolean
 ): StatusPlaceholder | null {
-  const t = getCurrentTokens()
+  const t = getCurrentTheme()
   if (!hasProjectPath) {
-    return { label: 'No active session', labelColor: t.muted }
+    return { label: 'No active session', labelColor: t.textMuted }
   }
   if (gitPanel.error === 'not-a-repo') {
-    return { label: 'Not a git repository', labelColor: t.muted }
+    return { label: 'Not a git repository', labelColor: t.textMuted }
   }
   if (gitPanel.error === 'unknown') {
-    return { label: 'Git error', labelColor: t.palette.error }
+    return { label: 'Git error', labelColor: t.error }
   }
   if (gitPanel.files.length === 0) {
-    return { label: 'Working tree clean', labelColor: t.muted }
+    return { label: 'Working tree clean', labelColor: t.textMuted }
   }
   return null
 }
@@ -331,7 +334,7 @@ export const GitPanel = memo(function GitPanel({
   projectPath,
   selectedEntryKey,
 }: GitPanelProps) {
-  const t = useTokens()
+  const t = useTheme()
   useTransparent()
   const repoPrefixes = useAppStore((s) => s.multiRepo.prefixes)
   const sectionOrder = headOffset > 0 ? HISTORICAL_SECTION_ORDER : BASE_SECTION_ORDER
@@ -367,7 +370,7 @@ export const GitPanel = memo(function GitPanel({
   return (
     <box flexDirection="column" flexGrow={1} flexShrink={1} flexBasis={0} overflow="hidden" gap={0}>
       {hasRemoteTracking ? (
-        <text fg={t.muted}>
+        <text fg={t.textMuted}>
           ↑{gitPanel.ahead} ↓{gitPanel.behind}
         </text>
       ) : null}

package/src/ui/components/git/git-view.tsx

@@ -12,7 +12,7 @@ import { useAppStore } from '../../../state/app-store'
 import { dispatchGlobal } from '../../../state/dispatch-ref'
 import { getSelectedGitFile, gitFileKey } from '../../../state/git-tree'
 import { setGitDiffScroller } from '../../git-view-controls'
-import { useBg, useTokens } from '../../theme'
+import { useTheme } from '../../theme'
 import { PierreDiff, type PierreDiffHandle } from './diff-renderer'
 import { useDiffPrefetch } from './diff-renderer/use-diff-prefetch'
 import { GitPanel } from './git-panel'
@@ -48,25 +48,25 @@ const DiffStage = memo(function DiffStage({
   themeId,
   view,
 }: DiffStageProps) {
-  const t = useTokens()
+  const t = useTheme()
   if (loading && !diff) {
     return (
       <box flexGrow={1} padding={1}>
-        <text fg={t.muted}>Loading diff…</text>
+        <text fg={t.textMuted}>Loading diff…</text>
       </box>
     )
   }
   if (!diff) {
     return (
       <box flexGrow={1} padding={1}>
-        <text fg={t.muted}>Select a file.</text>
+        <text fg={t.textMuted}>Select a file.</text>
       </box>
     )
   }
   if (diff.errorMessage) {
     return (
       <box flexGrow={1} padding={1}>
-        <text fg={t.palette.error}>{diff.errorMessage}</text>
+        <text fg={t.error}>{diff.errorMessage}</text>
       </box>
     )
   }
@@ -75,7 +75,7 @@ const DiffStage = memo(function DiffStage({
   if (placeholder) {
     return (
       <box flexGrow={1} padding={1}>
-        <text fg={t.muted}>{placeholder}</text>
+        <text fg={t.textMuted}>{placeholder}</text>
       </box>
     )
   }
@@ -84,7 +84,7 @@ const DiffStage = memo(function DiffStage({
     <box flexDirection="column" flexGrow={1} overflow="hidden">
       {diff.oldPath ? (
         <box paddingLeft={1} paddingRight={1}>
-          <text fg={t.muted}>
+          <text fg={t.textMuted}>
             renamed: {diff.oldPath} → {diff.path}
           </text>
         </box>
@@ -106,9 +106,9 @@ interface GitViewProps {
 }
 
 export const GitView = memo(function GitView({ themeId }: GitViewProps) {
-  const t = useTokens()
-  const sidebarBg = useBg('elevated')
-  const actionBg = useBg('selected')
+  const t = useTheme()
+  const sidebarBg = t.background
+  const actionBg = t.backgroundElement
   const dimensions = useTerminalDimensions()
   const gitPane = useAppStore((s) => s.gitPane)
   const gitPanel = useAppStore((s) => s.gitPanel)
@@ -196,13 +196,13 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
   let footerNode: React.ReactNode = null
   if (pendingHint) {
     footerNode = (
-      <text fg={t.palette.warning}>
+      <text fg={t.warning}>
         <strong>{pendingHint}</strong>
       </text>
     )
   } else if (actionMessage) {
     footerNode = actionMessage.split('\n').map((line, idx) => (
-      <text key={idx} fg={t.palette.primary}>
+      <text key={idx} fg={t.primary}>
         {line}
       </text>
     ))
@@ -220,24 +220,24 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
           overflow="hidden"
         >
           <box flexDirection="column" flexShrink={0}>
-            <text fg={t.palette.primary}>
+            <text fg={t.text}>
               <strong>aimux · git</strong>
             </text>
             {gitPanel.branch ? (
               <box flexDirection="row">
-                <text fg={t.palette.primary}>{'\u{e702}'} </text>
-                <text fg={t.muted}>{gitPanel.branch}</text>
+                <text fg={t.text}>{'\u{e702}'} </text>
+                <text fg={t.text}>{gitPanel.branch}</text>
               </box>
             ) : null}
             {gitMode.headOffset > 0 ? (
               <box flexDirection="row" gap={1}>
-                <text fg={t.palette.warning}>
+                <text fg={t.warning}>
                   <strong>HEAD~{gitMode.headOffset}</strong>
                 </text>
-                <text fg={t.muted}>[ newer · ] older</text>
+                <text fg={t.textMuted}>[ newer · ] older</text>
               </box>
             ) : null}
-            <text fg={t.hover}>{'·'.repeat(Math.max(0, fileBarWidth - 2))}</text>
+            <text fg={t.textMuted}>{'·'.repeat(Math.max(0, fileBarWidth - 2))}</text>
           </box>
           <GitPanel
             collapsedFolders={gitMode.collapsedFolders}
@@ -258,7 +258,7 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
             backgroundColor={sidebarBg}
           >
             <box flexGrow={1}>
-              <text fg={selectedFile ? t.palette.ink : t.muted}>
+              <text fg={selectedFile ? t.text : t.textMuted}>
                 {selectedFile ? selectedFile.path : 'Diff'}
               </text>
             </box>
@@ -272,7 +272,7 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
                 dispatchGlobal({ type: 'exit-git-mode' })
               }}
             >
-              <text fg={t.palette.ink}>
+              <text fg={t.text}>
                 <strong>Exit diff</strong>
               </text>
             </box>

package/src/ui/components/layout/session-bar.tsx

@@ -10,7 +10,7 @@ import { dispatchGlobal, runSideEffectGlobal } from '../../../state/dispatch-ref
 import { IDLE_SESSION_STATUS } from '../../../state/types'
 import { useBusySpinner } from '../../hooks/use-busy-spinner'
 import { moveIdToIdPosition, orderSessionsForDisplay } from '../../session-ordering'
-import { useBg, useTokens } from '../../theme'
+import { useTheme } from '../../theme'
 import { ContextMenuBox } from '../overlays/context-menu/context-menu-box'
 
 interface SessionBarProps {
@@ -18,8 +18,8 @@ interface SessionBarProps {
 }
 
 export function SessionBar({ forceVisible = false }: SessionBarProps) {
-  const t = useTokens()
-  const headerBg = useBg('elevated')
+  const t = useTheme()
+  const headerBg = t.backgroundPanel
   const sessions = useAppStore((s) => s.sessions)
   const currentId = useAppStore((s) => s.currentSessionId)
   const bar = useAppStore((s) => s.sessionBar)
@@ -151,13 +151,13 @@ export function SessionBar({ forceVisible = false }: SessionBarProps) {
         flexDirection="row"
         paddingLeft={1}
         paddingRight={1}
-        backgroundColor={t.selected}
+        backgroundColor={t.backgroundElement}
         onMouseDown={(e) => {
           e.stopPropagation()
           dispatchGlobal({ returnToSessionPicker: false, type: 'open-create-session-modal' })
         }}
       >
-        <text fg={t.palette.ink} selectable={false}>
+        <text fg={t.text} selectable={false}>
           + New
         </text>
       </box>
@@ -200,16 +200,16 @@ function SessionChip({
   session,
   status,
 }: SessionChipProps) {
-  const t = useTokens()
-  const selectionBg = useBg('selected')
+  const t = useTheme()
+  const selectionBg = t.backgroundElement
   const showSpinner = status.working
   const showWaiting = status.waiting
   const spinner = useBusySpinner(showSpinner)
-  const labelColor = active ? t.palette.ink : t.muted
+  const labelColor = active ? t.text : t.textMuted
   const bgColor = dragging || active ? selectionBg : undefined
-  const idleColor = t.palette.success
-  const workingColor = t.palette.primary
-  const waitingColor = t.palette.warning
+  const idleColor = t.success
+  const workingColor = t.primary
+  const waitingColor = t.warning
   const [hovered, setHovered] = useState(false)
 
   return (
@@ -264,12 +264,12 @@ function SessionChip({
             runSideEffectGlobal({ sessionId: session.id, type: 'delete-session' })
           }}
         >
-          <text fg={t.muted} selectable={false}>
+          <text fg={t.textMuted} selectable={false}>
             ×
           </text>
         </box>
       ) : (
-        <text fg={t.hover} selectable={false}>
+        <text fg={t.textMuted} selectable={false}>
           {' '}
         </text>
       )}

package/src/ui/components/layout/sidebar/sidebar.tsx

@@ -7,7 +7,7 @@ import { memo, useMemo, useRef } from 'react'
 
 import { useAppStore } from '../../../../state/app-store'
 import { dispatchGlobal } from '../../../../state/dispatch-ref'
-import { getCurrentTokens, type ThemeTokens, useBg, useTokens } from '../../../theme'
+import { getCurrentTheme, type ResolvedTuiTheme, useTheme } from '../../../theme'
 import { buildGitPaneContextMenu } from '../../git/pane/git-pane-context-menu'
 import { GitPaneWidget } from '../../git/pane/git-pane-widget'
 import { ContextMenuBox } from '../../overlays/context-menu/context-menu-box'
@@ -37,19 +37,19 @@ const RESIZE_HANDLE = '│'
 function getRowBackground({
   alternate,
   isActive,
-  tokens,
+  t,
 }: {
   isActive: boolean
   alternate: boolean
-  tokens: ThemeTokens
+  t: ResolvedTuiTheme
 }): string | undefined {
-  if (isActive) return tokens.selected
-  if (alternate) return tokens.hover
-  return undefined
+  if (isActive) return t.backgroundElement
+  if (alternate) return t.backgroundPanel
+  return t.backgroundPanel
 }
 
 const SidebarTop = memo(function SidebarTop({ contentWidth }: { contentWidth: number }) {
-  const tokens = useTokens()
+  const t = useTheme()
   const currentSessionId = useAppStore((s) => s.currentSessionId)
   const sessions = useAppStore((s) => s.sessions)
   const currentSession = currentSessionId
@@ -60,22 +60,20 @@ const SidebarTop = memo(function SidebarTop({ contentWidth }: { contentWidth: nu
 
   return (
     <box flexDirection="column" flexShrink={0} gap={0}>
-      <text fg={tokens.palette.primary}>
+      <text fg={t.text}>
         <strong>aimux</strong>
       </text>
-      <text fg={tokens.accent}>
-        {currentSession ? currentSession.name : 'No workspace selected'}
-      </text>
+      <text fg={t.text}>{currentSession ? currentSession.name : 'No workspace selected'}</text>
       {branch ? (
         <box flexDirection="row">
-          <text fg={tokens.palette.primary}>{'\u{e702}'} </text>
-          <text fg={tokens.muted}>{branch}</text>
+          <text fg={t.text}>{'\u{e702}'} </text>
+          <text fg={t.text}>{branch}</text>
         </box>
       ) : null}
       <box
         flexDirection="row"
         paddingY={1}
-        backgroundColor={tokens.selected}
+        backgroundColor={t.backgroundPanel}
         justifyContent="center"
         marginTop={1}
         onMouseDown={(e) => {
@@ -83,22 +81,22 @@ const SidebarTop = memo(function SidebarTop({ contentWidth }: { contentWidth: nu
           dispatchGlobal({ type: 'open-new-tab-modal' })
         }}
       >
-        <text fg={tokens.palette.ink}>+ New assistant</text>
+        <text fg={t.text}>+ New assistant</text>
       </box>
-      <text fg={tokens.hover}>{'·'.repeat(Math.max(0, contentWidth - 2))}</text>
+      <text fg={t.textMuted}>{'·'.repeat(Math.max(0, contentWidth - 2))}</text>
     </box>
   )
 })
 
 function renderGroupGutter(isGroupStart: boolean, isGroupMiddle: boolean, isGroupEnd: boolean) {
-  const t = getCurrentTokens()
+  const t = getCurrentTheme()
   return (
     <box flexDirection="column" width={1} overflow="hidden">
-      <text fg={t.accent}>
+      <text fg={t.border}>
         {/* oxlint-disable-next-line no-nested-ternary */}
         {isGroupStart ? GUTTER_START : isGroupMiddle ? GUTTER_MIDDLE : GUTTER_PAD}
       </text>
-      <text fg={t.accent}>{isGroupEnd ? GUTTER_END : GUTTER_PAD}</text>
+      <text fg={t.border}>{isGroupEnd ? GUTTER_END : GUTTER_PAD}</text>
     </box>
   )
 }
@@ -108,7 +106,7 @@ interface TabsBodyProps {
 }
 
 const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
-  const tokens = useTokens()
+  const t = useTheme()
   const tabs = useAppStore((s) => s.tabs)
   const activeTabId = useAppStore((s) => s.activeTabId)
   const focusMode = useAppStore((s) => s.focusMode)
@@ -138,7 +136,7 @@ const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
     >
       {tabs.length === 0 ? (
         <box paddingTop={1}>
-          <text fg={tokens.muted}>No tabs yet. Press Ctrl+n.</text>
+          <text fg={t.textMuted}>No tabs yet. Press Ctrl+n.</text>
         </box>
       ) : (
         tabs.map((tab, index) => {
@@ -154,7 +152,7 @@ const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
           return (
             <box
               key={tab.id}
-              backgroundColor={getRowBackground({ alternate, isActive, tokens })}
+              backgroundColor={getRowBackground({ alternate, isActive, t })}
               flexDirection="row"
               onMouseDown={(event) => {
                 event.stopPropagation()
@@ -186,8 +184,8 @@ export function Sidebar({
   onSidebarResizeStart,
   onTabActivate,
 }: SidebarProps) {
-  const tokens = useTokens()
-  const sidebarBg = useBg('elevated')
+  const t = useTheme()
+  const sidebarBg = t.background
   const sidebarVisible = useAppStore((s) => s.sidebar.visible)
   const sidebarWidth = useAppStore((s) => s.sidebar.width)
   const gitPane = useAppStore((s) => s.gitPane)
@@ -215,7 +213,7 @@ export function Sidebar({
   const tabsGrow = gitEmbedded ? Math.max(1, Math.round((1 - gitPane.embeddedRatio) * 100)) : 1
   const gitGrow = gitEmbedded ? Math.max(1, Math.round(gitPane.embeddedRatio * 100)) : 0
 
-  const separator = <text fg={tokens.hover}>{'·'.repeat(Math.max(0, contentWidth - 2))}</text>
+  const separator = <text fg={t.textMuted}>{'·'.repeat(Math.max(0, contentWidth - 2))}</text>
   const gitBody = gitEmbedded ? (
     <ContextMenuBox
       flexDirection="column"
@@ -232,7 +230,7 @@ export function Sidebar({
     <box
       minHeight={1}
       flexShrink={0}
-      backgroundColor={tokens.border}
+      backgroundColor={t.border}
       onMouseDown={(event) => {
         const body = bodyRef.current
         if (!body) return
@@ -245,7 +243,7 @@ export function Sidebar({
         })
       }}
     >
-      <text fg={tokens.border}>{RESIZE_HANDLE.repeat(Math.max(1, contentWidth))}</text>
+      <text fg={t.border}>{RESIZE_HANDLE.repeat(Math.max(1, contentWidth))}</text>
     </box>
   ) : null
 
@@ -315,7 +313,7 @@ export function Sidebar({
           height="100%"
           width={1}
           flexShrink={0}
-          backgroundColor={tokens.border}
+          backgroundColor={t.border}
           onMouseDown={(event) => {
             event.preventDefault()
             event.stopPropagation()