diff --git a/.changeset/subtle-segmented-hover.md b/.changeset/subtle-segmented-hover.md new file mode 100644 index 00000000000..0de8ae95134 --- /dev/null +++ b/.changeset/subtle-segmented-hover.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +SegmentedControl: Match unselected hover backgrounds in the subtle variant to invisible buttons. diff --git a/packages/react/src/SegmentedControl/SegmentedControl.module.css b/packages/react/src/SegmentedControl/SegmentedControl.module.css index aa7c5703d87..50c96fa59e1 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.module.css +++ b/packages/react/src/SegmentedControl/SegmentedControl.module.css @@ -1,6 +1,7 @@ @define-mixin subtleVariant { --segmented-control-outer-radius: var(--borderRadius-large); --segmented-control-button-bg-inset: 0px; + --segmented-control-button-bgColor-hover: var(--button-invisible-bgColor-hover); background-color: transparent; border: 0; @@ -37,16 +38,12 @@ background-color: var(--bgColor-muted); } } - - .Button:where(:not([aria-pressed='true'], [aria-disabled='true'])):hover .Content { - background-color: var(--bgColor-muted); - background-color: color-mix(in srgb, var(--bgColor-muted) 50%, transparent); - } } @define-mixin defaultVariant { --segmented-control-outer-radius: var(--borderRadius-medium); --segmented-control-button-bg-inset: 4px; + --segmented-control-button-bgColor-hover: var(--controlTrack-bgColor-hover); background-color: var(--controlTrack-bgColor-rest); border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent); @@ -89,10 +86,6 @@ background-color: transparent; } } - - .Button:where(:not([aria-pressed='true'], [aria-disabled='true'])):hover .Content { - background-color: var(--controlTrack-bgColor-hover); - } } .SegmentedControl { @@ -591,7 +584,8 @@ .Button:not([aria-pressed='true'], [aria-disabled='true']) { &:hover .Content { - background-color: var(--controlTrack-bgColor-hover); + /* stylelint-disable-next-line primer/colors -- each variant supplies a semantic background token */ + background-color: var(--segmented-control-button-bgColor-hover, var(--controlTrack-bgColor-hover)); } &:active .Content {