SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

fix(ui): segmented control track no longer reads as a filled bar

Browse source 
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.
This commit is contained in:
Danila Poyarkov 2026-07-18 09:56:47 +03:00
parent 5d9645fead
commit 3bfeef7c97
1 changed files with 1 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/theme/segmented-control.ts
View file

@ -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: {