From 3bfeef7c973a43e881ae366de936f1aca50e98d5 Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Sat, 18 Jul 2026 09:56:47 +0300
Subject: [PATCH] fix(ui): segmented control track no longer reads as a filled
 bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The segmented-control root used the field recipe, so text-alignment and
vertical-alignment toggles rendered as one heavy dark bar. The root is now
transparent at idle with a hover wash, and only the active segment carries
the subtle fill — matching Figma's segmented-toggle appearance.
---
 src/theme/segmented-control.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/theme/segmented-control.ts b/src/theme/segmented-control.ts
index 118642281..a47fb411a 100644
--- a/src/theme/segmented-control.ts
+++ b/src/theme/segmented-control.ts
@@ -1,8 +1,6 @@
-import { panelFieldBase } from './panel/field'
-
 const segmentedControlTheme = {
   slots: {
-    root: [panelFieldBase, 'inline-flex items-center gap-0.5 p-0.5'],
+    root: 'inline-flex items-center gap-0.5 rounded bg-panel-field p-0.5 hover:bg-panel-field-hover',
     item: 'flex h-[22px] min-w-0 flex-1 cursor-pointer items-center justify-center gap-1 rounded-sm text-muted outline-none hover:bg-hover hover:text-surface focus-visible:ring-1 focus-visible:ring-panel-focus data-[state=on]:bg-hover data-[state=on]:text-surface data-[state=on]:hover:bg-hover disabled:cursor-not-allowed disabled:opacity-50'
   },
   variants: {