alice.pds.demo.boltless.dev / core
This repository has no description
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

web/components: stop ButtonGroup doubling its selected segment's edge

a joined group's segments each drew their own 1px top/bottom border in the same
token as the group's own, and the two lines landed adjacent rather than
overlapping, so the selected tab read as a 2px edge with the ::before inset
shadow stacking a third band under it. the -my-px meant to pull them together
never applied: items-center left the segments at their natural height instead of
stretching, so the margins only shrank the flex line the group had already
outgrown.

follows the appview's .btn-group instead — the group is the only thing drawing a
horizontal border, its segments take border-y-0 and stretch to fill the inner
box. the x seams are unchanged, still one divider each via -ml-px.

the recessed surface also needed dark:bg-background-canvas: subtle sits below
default in light (#f9fafb vs #fff) but above it in dark (#374151 vs #1f2937), so
an unselected segment came out lighter than the selected one. canvas (#111827)
is the appview's gray-900.

Signed-off-by: eti <eti@eti.tf>

author
eti committer
dawn date (Jul 31, 2026, 10:57 PM +0300) commit bc9e9118 parent 439afdca change-id ywlwvxoo
+15 -6
+15 -6
web/src/lib/components/ui/ButtonGroup.svelte
··· 5 5 export const buttonGroup = tv({ 6 6 base: "inline-flex items-center", 7 7 variants: { 8 - // joined groups are the segmented control from Figma: the group draws the outer 9 - // border and the recessed surface, and each segment's own 1px border is pulled 10 - // onto it (-m-px) so an unselected segment shows the group's surface while a 11 - // selected one covers it and reads as a raised card. 8 + // joined groups are the segmented control from Figma, built the way the appview's 9 + // .btn-group is: the group alone draws the outer border and the recessed surface, 10 + // its segments drop their own top/bottom border entirely (border-y-0) and stretch 11 + // to fill the inner box. that matters because a segment's y-border is the same 12 + // token as the group's, so keeping both stacks two 1px lines into one 2px-looking 13 + // edge above and below the selected segment. horizontally the segments keep their 14 + // border and it's pulled onto the neighbour's (-ml-px) so each seam collapses to a 15 + // single divider, and the outer ones onto the group's own edge. 16 + // 17 + // the recessed surface has to stay darker than the selected segment's 18 + // bg-background-default, and no single token does that in both modes — subtle is 19 + // below default in light (#f9fafb vs #fff) but above it in dark (#374151 vs 20 + // #1f2937) — so dark falls back to canvas (#111827), i.e. the appview's gray-900. 12 21 spaced: { 13 22 true: "gap-2", 14 23 false: [ 15 - "gap-0 rounded border border-border-default bg-background-subtle", 16 - "*:relative *:-my-px", 24 + "items-stretch gap-0 rounded border border-border-default bg-background-subtle dark:bg-background-canvas", 25 + "*:relative [&>*]:border-y-0", 17 26 "[&>*:first-child]:-ml-px [&>*:last-child]:-mr-px", 18 27 "[&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:[--btn-radius-l:0px]", 19 28 "[&>*:not(:last-child)]:[--btn-radius-r:0px]",