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

fix(ui): migrate remaining border uses to v2 tokens (#58100)

Browse Source
This commit is contained in:
usrnk1
2026-10-22 13:17:44 +02:00
committed by GitHub
Unverified
parent 2f96b1720e
commit 682403160d
35 changed files with 77 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/runtime/extension/side-region.tsx
+1 -1
View File
@@ -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}
>
packages/app/src/servers/registry/row.tsx
+1 -1
View File
@@ -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,
}}
/>
}
packages/app/src/session/story-model.tsx
+2 -2
View File
@@ -319,7 +319,7 @@ function SessionSurfaceState(props: SessionPreviewProps & { onReset: () => void
<Show when={state.reviewOpened}>
<aside
id="review-panel"
class="min-w-0 flex-1 flex flex-col gap-2 border-l border-border-weak-base md:max-w-[52%]"
class="min-w-0 flex-1 flex flex-col gap-2 border-l border-v2-border-border-base md:max-w-[52%]"
>
<div class="min-h-0 flex-1" />
</aside>
@@ -347,7 +347,7 @@ function SessionSurfaceHeader(props: {
const language = useLanguage()
return (
<header class="flex min-h-14 shrink-0 items-center justify-between gap-4 border-b border-border-weak-base px-4 py-2">
<header class="flex min-h-14 shrink-0 items-center justify-between gap-4 border-b border-v2-border-border-base px-4 py-2">
<div class="flex min-w-0 items-center gap-3">
<span class="flex size-8 shrink-0 items-center justify-center rounded-md bg-background-stronger text-icon-base">
<Icon name="folder" />
packages/app/src/settings/keybinds/keybinds.tsx
+1 -1
View File
@@ -474,7 +474,7 @@ function SettingsKeybindsView(props: {
const binding = () => props.keybind(id)
return (
<div class="flex items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none">
<div class="flex items-center justify-between gap-4 py-3 border-b border-v2-border-border-base last:border-none">
<span>{props.title(id)}</span>
<Button
type="button"
packages/gui-extensions/src/context/indicator.tsx
+1 -1
View File
@@ -99,7 +99,7 @@ export function SessionContextUsage(props: {
strokeWidth={2}
percentage={context()?.usage ?? 0}
style={{
"--progress-circle-background": "var(--v2-background-bg-layer-04, var(--border-weak-base))",
"--progress-circle-background": "var(--v2-background-bg-layer-04)",
"--progress-circle-background-overlay": "var(--v2-overlay-simple-overlay-pressed, transparent)",
"--progress-circle-progress": "var(--v2-icon-icon-base, var(--icon-base))",
}}
packages/gui-extensions/src/context/tab.tsx
+1 -1
View File
@@ -299,7 +299,7 @@ export default function SessionContextTab(props: { session: MountedSession }) {
{(prompt) => (
<div class="flex flex-col gap-2">
<div class="text-12-regular text-text-weak">{ctx.t("systemPrompt.title")}</div>
<div class="border border-border-base rounded-md bg-surface-base px-3 py-2">
<div class="border border-v2-border-border-base rounded-md bg-surface-base px-3 py-2">
<Markdown text={prompt()} class="text-12-regular" />
</div>
</div>
packages/gui-extensions/src/debug/bar.tsx
+3 -3
View File
@@ -150,7 +150,7 @@ function ToggleCell(props: {
aria-label={`${props.label}: ${props.value}`}
aria-pressed={props.active}
classList={{
"flex min-w-0 items-center font-mono uppercase hover:bg-surface-raised-base focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-border-focus": true,
"flex min-w-0 items-center font-mono uppercase hover:bg-surface-raised-base focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-v2-border-border-focus": true,
"min-h-[20px] w-fit justify-start rounded px-1.5 py-0.5 text-left": !!props.inline,
"min-h-[42px] w-full flex-col justify-center rounded-[8px] px-0.5 py-1 text-center": !props.inline,
"bg-surface-raised-base text-text-strong": props.active,
@@ -582,7 +582,7 @@ export default function DebugBar(props: {
classList={{
"pointer-events-auto hidden overflow-hidden text-text-strong md:block": true,
"mt-[-6px] w-full shrink-0 px-3 py-1": !!props.inline,
"fixed bottom-3 right-3 z-50 w-[308px] max-w-[calc(100vw-1.5rem)] rounded-xl border border-border-base bg-surface-raised-stronger-non-alpha p-0.5 shadow-[var(--shadow-lg-border-base)] sm:bottom-4 sm:right-4 sm:w-[324px]":
"fixed bottom-3 right-3 z-50 w-[308px] max-w-[calc(100vw-1.5rem)] rounded-xl border border-v2-border-border-base bg-surface-raised-stronger-non-alpha p-0.5 shadow-[var(--shadow-lg-border-base)] sm:bottom-4 sm:right-4 sm:w-[324px]":
!props.inline,
}}
>
@@ -729,7 +729,7 @@ export default function DebugBar(props: {
<a
href="/components"
classList={{
"flex min-h-[20px] w-fit items-center rounded px-1.5 py-0.5 font-mono uppercase hover:bg-surface-raised-base focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-border-focus": true,
"flex min-h-[20px] w-fit items-center rounded px-1.5 py-0.5 font-mono uppercase hover:bg-surface-raised-base focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-v2-border-border-focus": true,
"bg-surface-raised-base text-text-strong": router.path().startsWith("/components"),
}}
>
packages/gui-extensions/src/file/drag.ts
+1 -1
View File
@@ -8,7 +8,7 @@ const buildDragImage = (target: HTMLElement) => {
const image = document.createElement("div")
image.className =
"flex items-center gap-x-2 px-2 py-1 bg-surface-raised-base rounded-md border border-border-base text-12-regular text-text-strong"
"flex items-center gap-x-2 px-2 py-1 bg-surface-raised-base rounded-md border border-v2-border-border-base text-12-regular text-text-strong"
image.style.position = "absolute"
image.style.top = "-1000px"
image.innerHTML = (icon as SVGElement).outerHTML + (text as HTMLSpanElement).outerHTML
packages/gui-extensions/src/microsoft-office/document.tsx
+1 -1
View File
@@ -184,7 +184,7 @@ function WordTextLayer(props: {
tabIndex={0}
title={span.title}
dir={span.dir}
class="absolute origin-top-left cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-border-focus"
class="absolute origin-top-left cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-v2-border-border-focus"
style={place(span)}
onClick={(event) => {
// A drag that ends on the link selects text instead of following it.
packages/gui-extensions/src/pairing/page.tsx
+1 -1
View File
@@ -163,7 +163,7 @@ export default function PairingPage(props: {
</Button>
</Row>
<Show when={main()}>
<div data-action="settings-remote-access">
<div data-action="settings-remote-access" class="border-b-[0.5px] border-v2-border-border-base">
<Row title={ctx.t("remote.title")} description={ctx.t("remote.description")}>
<Switch
hideLabel
packages/gui-extensions/src/terminal/panel.tsx
+2 -2
View File
@@ -270,7 +270,7 @@ export default function TerminalPanel(props: { model: TerminalModel; session: Mo
fallback={
<div class="flex flex-col h-full pointer-events-none">
<Show when={mobile()}>
<div class="h-10 flex items-center gap-2 px-2 border-b border-border-weaker-base bg-v2-background-bg-base overflow-hidden">
<div class="h-10 flex items-center gap-2 px-2 border-b border-v2-border-border-base bg-v2-background-bg-base overflow-hidden">
<For each={handoff()}>
{(title) => (
<div class="px-2 py-1 rounded-md bg-surface-base text-14-regular text-text-weak truncate max-w-40">
@@ -310,7 +310,7 @@ export default function TerminalPanel(props: { model: TerminalModel; session: Mo
handleTerminalDragEnd()
}}
>
<div class="h-[49px] shrink-0 flex border-b border-border-weaker-base">
<div class="h-[49px] shrink-0 flex border-b border-v2-border-border-base">
<Tabs
variant="panel"
value={terminal().active()}
packages/session-ui/src/components/basic-tool.css
+2 -2
View File
@@ -257,7 +257,7 @@
gap: 8px;
padding: 8px 12px;
border-radius: 6px;
border: 0.5px solid var(--border-weak-base, rgba(255, 255, 255, 0.08));
border: 0.5px solid var(--v2-border-border-base);
background: color-mix(in srgb, var(--background-base) 92%, transparent);
transition:
border-color 0.15s ease,
@@ -336,7 +336,7 @@
&:hover,
&:focus-visible {
border-color: var(--border-weak-base, rgba(255, 255, 255, 0.08));
border-color: var(--v2-border-border-strong);
background: color-mix(in srgb, var(--background-stronger) 88%, transparent);
[data-component="task-tool-action"] {
packages/session-ui/src/components/file-media.tsx
+2 -2
View File
@@ -285,7 +285,7 @@ export function FileMedia(props: { media?: FileMediaOptions; fallback: () => JSX
<img
src={value()}
alt={cfg()?.path}
class="max-h-[60vh] max-w-full rounded border border-border-weak-base bg-background-base object-contain"
class="max-h-[60vh] max-w-full rounded border border-v2-border-border-base bg-background-base object-contain"
onLoad={onLoad}
/>
</div>
@@ -315,7 +315,7 @@ export function FileMedia(props: { media?: FileMediaOptions; fallback: () => JSX
<img
src={value()}
alt={cfg()?.path}
class="max-h-[60vh] max-w-full rounded border border-border-weak-base bg-background-base object-contain"
class="max-h-[60vh] max-w-full rounded border border-v2-border-border-base bg-background-base object-contain"
onLoad={onLoad}
/>
</div>
packages/session-ui/src/components/file-search.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export function FileSearchBar(props: {
return (
<Portal>
<div
class="fixed z-50 flex h-8 items-center gap-2 rounded-md border border-border-base bg-background-base px-3 shadow-md"
class="fixed z-50 flex h-8 items-center gap-2 rounded-md border border-v2-border-border-base bg-background-base px-3 shadow-md"
style={{
top: `${props.pos.top}px`,
right: `${props.pos.right}px`,
packages/session-ui/src/components/line-comment-styles.ts
+3 -3
View File
@@ -162,7 +162,7 @@ export const lineCommentStyles = `
padding: 8px;
border-radius: var(--radius-md);
background: var(--surface-base);
border: 1px solid var(--border-base);
border: 1px solid var(--v2-border-border-base);
color: var(--text-strong);
font-family: var(--font-family-sans);
font-size: var(--font-size-small);
@@ -181,7 +181,7 @@ export const lineCommentStyles = `
max-height: 180px;
overflow: auto;
padding: 4px;
border: 1px solid var(--border-base);
border: 1px solid var(--v2-border-border-base);
border-radius: var(--radius-md);
background: var(--surface-base);
}
@@ -241,7 +241,7 @@ export const lineCommentStyles = `
}
[data-component="line-comment"] [data-slot="line-comment-action"] {
border: 1px solid var(--border-base);
border: 1px solid var(--v2-border-border-base);
background: var(--surface-base);
color: var(--text-strong);
border-radius: var(--radius-md);
packages/session-ui/src/components/message-nav.css
+1 -1
View File
@@ -123,7 +123,7 @@
/* border/shadow-xs/base */
box-shadow:
0 0 0 1px var(--border-weak-base, rgba(17, 0, 0, 0.12)),
0 0 0 1px var(--v2-border-border-base),
0 1px 2px -1px rgba(19, 16, 16, 0.04),
0 1px 2px 0 rgba(19, 16, 16, 0.06),
0 1px 3px 0 rgba(19, 16, 16, 0.08);
packages/session-ui/src/components/session-review.tsx
+1 -1
View File
@@ -646,7 +646,7 @@ export const SessionReview = (props: SessionReviewProps) => {
<Match when={!mounted() && !tooLarge()}>
<div
data-slot="session-review-diff-placeholder"
class="rounded-lg border border-border-weak-base bg-background-stronger/40"
class="rounded-lg border border-v2-border-border-muted bg-background-stronger/40"
style={{ height: "160px" }}
/>
</Match>
packages/session-ui/src/pierre/file-find.ts
+1 -1
View File
@@ -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)
}
}
packages/session-ui/src/v2/components/session-review-v2.css
+6 -6
View File
@@ -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"] {
packages/ui/src/components/context-menu.css
+1 -1
View File
@@ -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"] {
packages/ui/src/components/dock-surface.css
+1 -1
View File
@@ -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;
packages/ui/src/components/hover-card.css
+1 -1
View File
@@ -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);
packages/ui/src/components/list.css
+1 -1
View File
@@ -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;
}
packages/ui/src/components/popover.css
+1 -1
View File
@@ -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);
packages/ui/src/components/progress.css
+2 -2
View File
@@ -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;
}
packages/ui/src/components/scroll-view.css
+5 -5
View File
@@ -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"] {
packages/ui/src/components/text-field.css
+4 -4
View File
@@ -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"])) {
packages/ui/src/data-display/badge/badge.css
+1 -1
View File
@@ -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);
}
packages/ui/src/feedback/progress-circle/progress-circle.css
+2 -2
View File
@@ -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"] {
packages/ui/src/forms/checkbox/checkbox.css
+7 -7
View File
@@ -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] {
packages/ui/src/forms/inline-input/inline-input.css
+1 -1
View File
@@ -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));
}
}
packages/ui/src/forms/switch/switch.css
+7 -7
View File
@@ -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);
}
}
packages/ui/src/navigation/menu/menu.css
+2 -2
View File
@@ -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"] {
packages/ui/src/navigation/tabs/tabs.css
+8 -8
View File
@@ -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);
}
packages/ui/src/overlays/tooltip/tooltip.css
+1 -1
View File
@@ -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);