From 682403160deca36c27111d43f28771f7465e7d55 Mon Sep 17 00:00:00 2001 From: usrnk1 <7547651+usrnk1@users.noreply.github.com> Date: Thu, 22 Oct 2026 13:17:44 +0200 Subject: [PATCH] fix(ui): migrate remaining border uses to v2 tokens (#58100) --- .../app/src/runtime/extension/side-region.tsx | 2 +- packages/app/src/servers/registry/row.tsx | 2 +- packages/app/src/session/story-model.tsx | 4 ++-- packages/app/src/settings/keybinds/keybinds.tsx | 2 +- .../gui-extensions/src/context/indicator.tsx | 2 +- packages/gui-extensions/src/context/tab.tsx | 2 +- packages/gui-extensions/src/debug/bar.tsx | 6 +++--- packages/gui-extensions/src/file/drag.ts | 2 +- .../src/microsoft-office/document.tsx | 2 +- packages/gui-extensions/src/pairing/page.tsx | 2 +- packages/gui-extensions/src/terminal/panel.tsx | 4 ++-- .../session-ui/src/components/basic-tool.css | 4 ++-- .../session-ui/src/components/file-media.tsx | 4 ++-- .../session-ui/src/components/file-search.tsx | 2 +- .../src/components/line-comment-styles.ts | 6 +++--- .../session-ui/src/components/message-nav.css | 2 +- .../session-ui/src/components/session-review.tsx | 2 +- packages/session-ui/src/pierre/file-find.ts | 2 +- .../src/v2/components/session-review-v2.css | 12 ++++++------ packages/ui/src/components/context-menu.css | 2 +- packages/ui/src/components/dock-surface.css | 2 +- packages/ui/src/components/hover-card.css | 2 +- packages/ui/src/components/list.css | 2 +- packages/ui/src/components/popover.css | 2 +- packages/ui/src/components/progress.css | 4 ++-- packages/ui/src/components/scroll-view.css | 10 +++++----- packages/ui/src/components/text-field.css | 8 ++++---- packages/ui/src/data-display/badge/badge.css | 2 +- .../feedback/progress-circle/progress-circle.css | 4 ++-- packages/ui/src/forms/checkbox/checkbox.css | 14 +++++++------- .../ui/src/forms/inline-input/inline-input.css | 2 +- packages/ui/src/forms/switch/switch.css | 14 +++++++------- packages/ui/src/navigation/menu/menu.css | 4 ++-- packages/ui/src/navigation/tabs/tabs.css | 16 ++++++++-------- packages/ui/src/overlays/tooltip/tooltip.css | 2 +- 35 files changed, 77 insertions(+), 77 deletions(-) diff --git a/packages/app/src/runtime/extension/side-region.tsx b/packages/app/src/runtime/extension/side-region.tsx index fe89a040d56..b15fbb7f533 100644 --- a/packages/app/src/runtime/extension/side-region.tsx +++ b/packages/app/src/runtime/extension/side-region.tsx @@ -139,7 +139,7 @@ export function SideRegion(props: { class="relative min-h-0 min-w-0 bg-v2-background-bg-base" classList={{ "flex-1": panes().length === 1 || index() === 0, - "shrink-0 border-t border-border-weaker-base": index() > 0, + "shrink-0 border-t border-v2-border-border-base": index() > 0, }} style={index() > 0 ? { height: `${lowerHeight()}px` } : undefined} > diff --git a/packages/app/src/servers/registry/row.tsx b/packages/app/src/servers/registry/row.tsx index 4a79171c3d6..013d8eb3ae6 100644 --- a/packages/app/src/servers/registry/row.tsx +++ b/packages/app/src/servers/registry/row.tsx @@ -126,7 +126,7 @@ export function ServerHealthIndicator(props: { "size-1.5 rounded-full shrink-0 my-[3.5px]": true, "bg-icon-success-base": props.health?.healthy === true, "bg-icon-critical-base": props.health?.healthy === false, - "bg-border-weak-base": props.health === undefined, + "bg-v2-icon-icon-faint": props.health === undefined, }} /> } diff --git a/packages/app/src/session/story-model.tsx b/packages/app/src/session/story-model.tsx index 722cd8174a8..0724c6fc0f2 100644 --- a/packages/app/src/session/story-model.tsx +++ b/packages/app/src/session/story-model.tsx @@ -319,7 +319,7 @@ function SessionSurfaceState(props: SessionPreviewProps & { onReset: () => void @@ -347,7 +347,7 @@ function SessionSurfaceHeader(props: { const language = useLanguage() return ( -
+
diff --git a/packages/app/src/settings/keybinds/keybinds.tsx b/packages/app/src/settings/keybinds/keybinds.tsx index 4352962c541..740bb7258fa 100644 --- a/packages/app/src/settings/keybinds/keybinds.tsx +++ b/packages/app/src/settings/keybinds/keybinds.tsx @@ -474,7 +474,7 @@ function SettingsKeybindsView(props: { const binding = () => props.keybind(id) return ( -
+
{props.title(id)} -
+
-
+
{(title) => (
@@ -310,7 +310,7 @@ export default function TerminalPanel(props: { model: TerminalModel; session: Mo handleTerminalDragEnd() }} > -
+
JSX {cfg()?.path}
@@ -315,7 +315,7 @@ export function FileMedia(props: { media?: FileMediaOptions; fallback: () => JSX {cfg()?.path}
diff --git a/packages/session-ui/src/components/file-search.tsx b/packages/session-ui/src/components/file-search.tsx index 384ae8e216b..786b349c89a 100644 --- a/packages/session-ui/src/components/file-search.tsx +++ b/packages/session-ui/src/components/file-search.tsx @@ -19,7 +19,7 @@ export function FileSearchBar(props: { return (
{
diff --git a/packages/session-ui/src/pierre/file-find.ts b/packages/session-ui/src/pierre/file-find.ts index 142e02d0242..ba57476221f 100644 --- a/packages/session-ui/src/pierre/file-find.ts +++ b/packages/session-ui/src/pierre/file-find.ts @@ -199,7 +199,7 @@ export function createFileFind(opts: CreateFileFindOptions) { mark.style.backgroundColor = active ? "var(--surface-warning-strong)" : "var(--surface-warning-base)" mark.style.opacity = active ? "0.55" : "0.35" - if (active) mark.style.boxShadow = "inset 0 0 0 1px var(--border-warning-base)" + if (active) mark.style.boxShadow = "inset 0 0 0 1px var(--v2-state-border-warning)" frag.appendChild(mark) } } diff --git a/packages/session-ui/src/v2/components/session-review-v2.css b/packages/session-ui/src/v2/components/session-review-v2.css index bfa3d80723b..9bbdc02b084 100644 --- a/packages/session-ui/src/v2/components/session-review-v2.css +++ b/packages/session-ui/src/v2/components/session-review-v2.css @@ -38,7 +38,7 @@ flex-shrink: 0; min-height: 0; overflow: hidden; - border-inline-end: 1px solid var(--border-weaker-base, var(--v2-border-border-weak)); + border-inline-end: 1px solid var(--v2-border-border-base); background: var(--v2-background-bg-base); } @@ -63,7 +63,7 @@ } [data-component="session-review-v2-sidebar-root"] [data-component="resize-handle"]::after { - background: var(--v2-border-border-muted, var(--border-weak-base)); + background: var(--v2-border-border-muted); } [data-component="session-review-v2-sidebar-root"] [data-slot="session-review-v2-sidebar-header"] { @@ -224,7 +224,7 @@ [data-slot="session-review-v2-sidebar-tree"] .scroll-view__thumb::after { width: 6px; - background-color: var(--v2-border-border-muted, var(--border-weak-base)); + background-color: var(--v2-border-border-muted); } [data-component="session-review-v2-sidebar-root"] @@ -247,7 +247,7 @@ [data-component="session-review-v2-sidebar-root"] [data-slot="session-review-v2-sidebar-tree"] .scroll-view__thumb[data-dragging="true"]::after { - background-color: var(--v2-border-border-strong, var(--border-strong-base)); + background-color: var(--v2-border-border-strong); } [data-component="session-review-v2"] [data-slot="session-review-v2-preview"] { @@ -269,7 +269,7 @@ padding-block: 0; padding-inline: 8px 12px; flex-shrink: 0; - border-bottom: 1px solid var(--border-weaker-base, var(--v2-border-border-weak)); + border-bottom: 1px solid var(--v2-border-border-base); } [data-component="session-review-v2"][data-sidebar-toggle][data-sidebar-collapsed] @@ -381,7 +381,7 @@ gap: 8px; padding: 8px 16px; flex-shrink: 0; - border-bottom: 1px solid var(--border-weaker-base, var(--v2-border-border-weak)); + border-bottom: 1px solid var(--v2-border-border-base); } [data-component="session-review-v2"] [data-slot="session-review-v2-file-title"] { diff --git a/packages/ui/src/components/context-menu.css b/packages/ui/src/components/context-menu.css index 1e366dccd42..92c17a7a682 100644 --- a/packages/ui/src/components/context-menu.css +++ b/packages/ui/src/components/context-menu.css @@ -93,7 +93,7 @@ [data-slot="context-menu-separator"] { height: 1px; margin: 4px -4px; - border-top-color: var(--border-weak-base); + border-top-color: var(--v2-border-border-muted); } [data-slot="context-menu-group-label"] { diff --git a/packages/ui/src/components/dock-surface.css b/packages/ui/src/components/dock-surface.css index 5d0b2db1b68..cd8519b13d9 100644 --- a/packages/ui/src/components/dock-surface.css +++ b/packages/ui/src/components/dock-surface.css @@ -16,7 +16,7 @@ [data-dock-surface="tray"] { background-color: var(--background-base); - border: 1px solid var(--border-weak-base); + border: 1px solid var(--v2-border-border-base); position: relative; z-index: 0; border-radius: 12px; diff --git a/packages/ui/src/components/hover-card.css b/packages/ui/src/components/hover-card.css index 02d1f10ad1d..ac2893da8ed 100644 --- a/packages/ui/src/components/hover-card.css +++ b/packages/ui/src/components/hover-card.css @@ -13,7 +13,7 @@ background-color: var(--surface-raised-stronger-non-alpha); pointer-events: auto; - border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent); + border: 1px solid var(--v2-border-border-muted); background-clip: padding-box; box-shadow: var(--shadow-md); diff --git a/packages/ui/src/components/list.css b/packages/ui/src/components/list.css index fe9b404d6a9..d0d203e11ff 100644 --- a/packages/ui/src/components/list.css +++ b/packages/ui/src/components/list.css @@ -278,7 +278,7 @@ left: var(--list-divider-inset, 16px); right: var(--list-divider-inset, 16px); height: 1px; - background: var(--border-weak-base); + background: var(--v2-border-border-muted); pointer-events: none; } diff --git a/packages/ui/src/components/popover.css b/packages/ui/src/components/popover.css index b49542afd9b..4d50c4cb620 100644 --- a/packages/ui/src/components/popover.css +++ b/packages/ui/src/components/popover.css @@ -9,7 +9,7 @@ border-radius: var(--radius-md); background-color: var(--surface-raised-stronger-non-alpha); - border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent); + border: 1px solid var(--v2-border-border-muted); background-clip: padding-box; box-shadow: var(--shadow-md); diff --git a/packages/ui/src/components/progress.css b/packages/ui/src/components/progress.css index c728912f76d..361169fb419 100644 --- a/packages/ui/src/components/progress.css +++ b/packages/ui/src/components/progress.css @@ -34,7 +34,7 @@ height: 8px; overflow: hidden; border-radius: 999px; - border: 1px solid var(--border-weak-base); + border: 1px solid var(--v2-border-border-base); background-color: var(--surface-base); } @@ -42,7 +42,7 @@ height: 100%; width: var(--kb-progress-fill-width); border-radius: inherit; - background-color: var(--border-active); + background-color: var(--v2-icon-icon-base); transition: width 200ms ease; } diff --git a/packages/ui/src/components/scroll-view.css b/packages/ui/src/components/scroll-view.css index 80ba17c7988..6cbbc47ede4 100644 --- a/packages/ui/src/components/scroll-view.css +++ b/packages/ui/src/components/scroll-view.css @@ -58,7 +58,7 @@ bottom: 0; width: 4px; border-radius: 9999px; - background-color: var(--border-weak-base); + background-color: var(--v2-border-border-muted); backdrop-filter: blur(4px); transition: background-color 150ms ease; } @@ -72,26 +72,26 @@ height: 4px; transform: translateY(-50%); border-radius: 9999px; - background-color: var(--border-weak-base); + background-color: var(--v2-border-border-muted); backdrop-filter: blur(4px); transition: background-color 150ms ease; } .scroll-view__thumb:hover::after, .scroll-view__thumb[data-dragging="true"]::after { - background-color: var(--border-strong-base); + background-color: var(--v2-border-border-strong); } .dark .scroll-view__thumb::after, [data-theme="dark"] .scroll-view__thumb::after { - background-color: var(--border-weak-base); + background-color: var(--v2-border-border-muted); } .dark .scroll-view__thumb:hover::after, [data-theme="dark"] .scroll-view__thumb:hover::after, .dark .scroll-view__thumb[data-dragging="true"]::after, [data-theme="dark"] .scroll-view__thumb[data-dragging="true"]::after { - background-color: var(--border-strong-base); + background-color: var(--v2-border-border-strong); } .scroll-view__thumb[data-visible="true"] { diff --git a/packages/ui/src/components/text-field.css b/packages/ui/src/components/text-field.css index 47c7f9f94dc..922c0ccb5a9 100644 --- a/packages/ui/src/components/text-field.css +++ b/packages/ui/src/components/text-field.css @@ -48,15 +48,15 @@ padding-inline-end: 4px; border-radius: var(--radius-md); - border: 1px solid var(--border-weak-base); + border: 1px solid var(--v2-border-border-base); background: var(--input-base); &:focus-within:not(:has([data-readonly])) { border-color: transparent; /* border/shadow-xs/select */ box-shadow: - 0 0 0 3px var(--border-weak-selected), - 0 0 0 1px var(--border-selected), + 0 0 0 3px color-mix(in srgb, var(--v2-border-border-focus) 25%, transparent), + 0 0 0 1px var(--v2-border-border-focus), 0 1px 2px -1px rgba(19, 16, 16, 0.25), 0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12); @@ -64,7 +64,7 @@ &:has([data-invalid]) { background: var(--surface-critical-weak); - border: 1px solid var(--border-critical-selected); + border: 1px solid var(--v2-state-border-danger); } &:not(:has([data-slot="input-copy-button"])) { diff --git a/packages/ui/src/data-display/badge/badge.css b/packages/ui/src/data-display/badge/badge.css index dbdc62793a2..7df4c04f59b 100644 --- a/packages/ui/src/data-display/badge/badge.css +++ b/packages/ui/src/data-display/badge/badge.css @@ -51,7 +51,7 @@ } [data-component="tag"][data-appearance="standard"][data-variant="neutral"] { - border: 0.5px solid var(--border-weak-base); + border: 0.5px solid var(--v2-border-border-base); background: var(--surface-raised-base); color: var(--text-base); } diff --git a/packages/ui/src/feedback/progress-circle/progress-circle.css b/packages/ui/src/feedback/progress-circle/progress-circle.css index 7616c7e6379..4c97f58cf7d 100644 --- a/packages/ui/src/feedback/progress-circle/progress-circle.css +++ b/packages/ui/src/feedback/progress-circle/progress-circle.css @@ -12,7 +12,7 @@ } [data-component="progress-circle"][data-appearance="indicator"] [data-slot="progress-circle-background"] { - stroke: var(--progress-circle-background, var(--border-weak-base)); + stroke: var(--progress-circle-background, var(--v2-background-bg-layer-04)); } [data-component="progress-circle"][data-appearance="indicator"] [data-slot="progress-circle-background-overlay"] { @@ -20,7 +20,7 @@ } [data-component="progress-circle"][data-appearance="indicator"] [data-slot="progress-circle-progress"] { - stroke: var(--progress-circle-progress, var(--border-active)); + stroke: var(--progress-circle-progress, var(--v2-icon-icon-base)); } [data-component="progress-circle"] [data-slot="progress-circle-progress"] { diff --git a/packages/ui/src/forms/checkbox/checkbox.css b/packages/ui/src/forms/checkbox/checkbox.css index 751560e5521..172bc6a0b64 100644 --- a/packages/ui/src/forms/checkbox/checkbox.css +++ b/packages/ui/src/forms/checkbox/checkbox.css @@ -27,7 +27,7 @@ aspect-ratio: 1; flex-shrink: 0; border-radius: var(--radius-sm); - border: 1px solid var(--border-weak-base); + border: 1px solid var(--v2-border-border-base); transition: border-color 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)), background-color 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)), @@ -78,24 +78,24 @@ } &:hover:not([data-disabled], [data-readonly]) [data-slot="checkbox-checkbox-control"] { - border-color: var(--border-hover); + border-color: var(--v2-border-border-strong); background-color: var(--surface-hover); } &:not([data-readonly]) [data-slot="checkbox-checkbox-input"]:focus-visible + [data-slot="checkbox-checkbox-control"] { - border-color: var(--border-focus); + border-color: var(--v2-border-border-focus); box-shadow: var(--shadow-xs-border-focus); } &[data-checked] [data-slot="checkbox-checkbox-control"], &[data-indeterminate] [data-slot="checkbox-checkbox-control"] { - border-color: var(--border-base); + border-color: var(--v2-border-border-strong); background-color: var(--surface-weak); } &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="checkbox-checkbox-control"], &[data-indeterminate]:hover:not([data-disabled]) [data-slot="checkbox-checkbox-control"] { - border-color: var(--border-hover); + border-color: var(--v2-border-border-strong); background-color: var(--surface-hover); } @@ -110,12 +110,12 @@ } &[data-disabled] [data-slot="checkbox-checkbox-control"] { - border-color: var(--border-disabled); + border-color: var(--v2-border-border-muted); background-color: var(--surface-disabled); } &[data-invalid] [data-slot="checkbox-checkbox-control"] { - border-color: var(--border-error); + border-color: var(--v2-state-border-danger); } &[data-readonly] { diff --git a/packages/ui/src/forms/inline-input/inline-input.css b/packages/ui/src/forms/inline-input/inline-input.css index 503dfe2863c..3a7c2d64ad2 100644 --- a/packages/ui/src/forms/inline-input/inline-input.css +++ b/packages/ui/src/forms/inline-input/inline-input.css @@ -12,6 +12,6 @@ &:focus { outline: none; - box-shadow: var(--inline-input-shadow, 0 0 0 1px var(--border-interactive-focus)); + box-shadow: var(--inline-input-shadow, 0 0 0 1px var(--v2-border-border-focus)); } } diff --git a/packages/ui/src/forms/switch/switch.css b/packages/ui/src/forms/switch/switch.css index 2b73627243c..e95504df141 100644 --- a/packages/ui/src/forms/switch/switch.css +++ b/packages/ui/src/forms/switch/switch.css @@ -167,7 +167,7 @@ width: 28px; height: 16px; border-radius: 3px; - border: 1px solid var(--border-weak-base); + border: 1px solid var(--v2-border-border-base); background: var(--surface-base); box-shadow: none; transition: @@ -180,7 +180,7 @@ width: 14px; height: 14px; border-radius: 2px; - border: 1px solid var(--border-base); + border: 1px solid var(--v2-border-border-strong); background: var(--icon-invert-base); box-shadow: 0 1px 2px -1px rgba(19, 16, 16, 0.04), @@ -216,7 +216,7 @@ } &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] { - border-color: var(--border-hover); + border-color: var(--v2-border-border-strong); background: var(--surface-hover); } @@ -226,7 +226,7 @@ } &:not([data-readonly]) [data-slot="switch-input"]:focus-visible ~ [data-slot="switch-control"] { - border-color: var(--border-focus); + border-color: var(--v2-border-border-focus); outline: none; box-shadow: var(--shadow-xs-border-focus); } @@ -252,12 +252,12 @@ } &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] { - border-color: var(--border-hover); + border-color: var(--v2-border-border-strong); background: var(--surface-hover); } &[data-disabled] [data-slot="switch-control"] { - border-color: var(--border-disabled); + border-color: var(--v2-border-border-muted); background: var(--surface-disabled); opacity: 1; } @@ -267,6 +267,6 @@ } &[data-invalid] [data-slot="switch-control"] { - border-color: var(--border-error); + border-color: var(--v2-state-border-danger); } } diff --git a/packages/ui/src/navigation/menu/menu.css b/packages/ui/src/navigation/menu/menu.css index 971b1a75ab7..85e6c174dc1 100644 --- a/packages/ui/src/navigation/menu/menu.css +++ b/packages/ui/src/navigation/menu/menu.css @@ -190,7 +190,7 @@ min-width: 8rem; padding: 4px; overflow: hidden; - border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent); + border: 1px solid var(--v2-border-border-muted); border-radius: var(--radius-md); background: var(--surface-raised-stronger-non-alpha); background-clip: padding-box; @@ -269,7 +269,7 @@ width: calc(100% + 8px); height: 1px; margin: 4px -4px; - background: var(--border-weak-base); + background: var(--v2-border-border-muted); } [data-slot="menu-v2-group-label"] { diff --git a/packages/ui/src/navigation/tabs/tabs.css b/packages/ui/src/navigation/tabs/tabs.css index 7d6f4f8d8f2..c462128dfc6 100644 --- a/packages/ui/src/navigation/tabs/tabs.css +++ b/packages/ui/src/navigation/tabs/tabs.css @@ -30,7 +30,7 @@ display: block; flex-grow: 1; height: 100%; - border-bottom: 1px solid var(--border-weak-base); + border-bottom: 1px solid var(--v2-border-border-base); background-color: var(--background-base); } @@ -55,8 +55,8 @@ white-space: nowrap; flex-shrink: 0; max-width: 280px; - border-bottom: 1px solid var(--border-weak-base); - border-inline-end: 1px solid var(--border-weak-base); + border-bottom: 1px solid var(--v2-border-border-base); + border-inline-end: 1px solid var(--v2-border-border-base); background-color: var(--background-base); [data-slot="tabs-trigger"] { @@ -153,7 +153,7 @@ --tabs-review-fade: 16px; gap: var(--tabs-review-gap); background-color: var(--background-stronger); - border-bottom: 1px solid var(--border-weaker-base); + border-bottom: 1px solid var(--v2-border-border-base); &::after { display: none; @@ -228,7 +228,7 @@ &:has([data-selected]) { color: var(--text-strong); background-color: var(--surface-base-active); - border-color: var(--border-weak-base); + border-color: var(--v2-border-border-base); &::after { opacity: 1; @@ -319,7 +319,7 @@ padding-left: 24px; padding-right: 24px; gap: 12px; - border-bottom: 1px solid var(--border-weak-base); + border-bottom: 1px solid var(--v2-border-border-base); background-color: transparent; &::after { @@ -441,7 +441,7 @@ right: 0; top: calc((var(--tabs-bar-height, 48px) - var(--tabs-compact-pill-height, 24px)) / 2); height: var(--tabs-compact-pill-height, 24px); - border: 1px solid var(--border-weak-base); + border: 1px solid var(--v2-border-border-base); border-radius: var(--tabs-compact-pill-radius, 6px); background-color: var(--surface-base-active); } @@ -570,7 +570,7 @@ min-width: 0; gap: 8px; box-sizing: border-box; - border-bottom: 1px solid var(--border-weaker-base, var(--v2-border-border-weak)); + border-bottom: 0.5px solid var(--v2-border-border-base); background-color: var(--v2-background-bg-base); } diff --git a/packages/ui/src/overlays/tooltip/tooltip.css b/packages/ui/src/overlays/tooltip/tooltip.css index cdd8a0b98f9..9f85acdf63f 100644 --- a/packages/ui/src/overlays/tooltip/tooltip.css +++ b/packages/ui/src/overlays/tooltip/tooltip.css @@ -43,7 +43,7 @@ display: block; max-width: 320px; padding: 2px 8px; - border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07)); + border: 1px solid var(--v2-border-border-muted); border-radius: var(--radius-sm); background: var(--surface-float-base); color: var(--text-invert-strong);