Monorepo for Tangled

web/components: make the button group match the figma segmented control master

a joined group is a tab switcher, but the selected segment was the plain default variant, which reads as the hovered state of an unselected one, and the group itself drew nothing. per figma (design system 605:3859): the group owns the outer border and a recessed background-subtle surface, the selected segment is default + its inset shadow so it reads as a raised card, and unselected segments are ghost with the default foreground rather than ghost's muted one. each segment's own border is pulled onto the group's (-m-px) so the selected segment's edge doubles as the divider and unselected segments show no divider at all. segmentProps() carries the recipe so the call sites stop repeating the variant ternary. verified pixel for pixel against the figma render: 36px tall, #e5e7eb border on all four edges, #ffffff on the selected segment against #f9fafb on the unselected, a 1px divider at the selected segment's edge, and the inset shadow two rows above the bottom border. ghost's own foreground is still muted where it's used outside a group, which figma disagrees with; that's a wider change, left alone here. Signed-off-by: eti <eti@eti.tf>


Author eti Committer dawn Date Commit e7d46737 Parent 3da8f325 Change ID uuoqkxpn