diff --git a/.changeset/large-guests-sip.md b/.changeset/large-guests-sip.md new file mode 100644 index 00000000000..7a89f682332 --- /dev/null +++ b/.changeset/large-guests-sip.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Updates the ToggleSwitch styles to be more minimal and less dimensional diff --git a/package-lock.json b/package-lock.json index 1773013db52..8d0ce05fdd0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ "@lit-labs/react": "1.1.1", "@primer/behaviors": "1.3.3", "@primer/octicons-react": "^17.7.0", - "@primer/primitives": "7.10.0", + "@primer/primitives": "7.11.1", "@react-aria/ssr": "^3.1.0", "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5", @@ -6408,9 +6408,9 @@ } }, "node_modules/@primer/primitives": { - "version": "7.10.0", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.10.0.tgz", - "integrity": "sha512-DdLHq21e93R9qDHyRuRpytBLY0Up9IwNWMOUgPNW6lRSng4N4+IdUlLS3Ekbasmxfs8Z8vKS8aezeYovQ5qsxQ==" + "version": "7.11.1", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.1.tgz", + "integrity": "sha512-Sdss4XG96nqBqrTAyg+RuFOj+U5wkICK8n2hafcyT+lpSlZoIwcbmhyFjmDy9f88FkhHe2q0uCpQ8PjKd8ILTQ==" }, "node_modules/@react-aria/ssr": { "version": "3.3.0", @@ -60235,9 +60235,9 @@ "requires": {} }, "@primer/primitives": { - "version": "7.10.0", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.10.0.tgz", - "integrity": "sha512-DdLHq21e93R9qDHyRuRpytBLY0Up9IwNWMOUgPNW6lRSng4N4+IdUlLS3Ekbasmxfs8Z8vKS8aezeYovQ5qsxQ==" + "version": "7.11.1", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.1.tgz", + "integrity": "sha512-Sdss4XG96nqBqrTAyg+RuFOj+U5wkICK8n2hafcyT+lpSlZoIwcbmhyFjmDy9f88FkhHe2q0uCpQ8PjKd8ILTQ==" }, "@react-aria/ssr": { "version": "3.3.0", diff --git a/package.json b/package.json index ea51537b832..a2ff972df5a 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,7 @@ "@lit-labs/react": "1.1.1", "@primer/behaviors": "1.3.3", "@primer/octicons-react": "^17.7.0", - "@primer/primitives": "7.10.0", + "@primer/primitives": "7.11.1", "@react-aria/ssr": "^3.1.0", "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5", diff --git a/src/SegmentedControl/SegmentedControl.tsx b/src/SegmentedControl/SegmentedControl.tsx index 1bac47b3d1d..47e67cbd786 100644 --- a/src/SegmentedControl/SegmentedControl.tsx +++ b/src/SegmentedControl/SegmentedControl.tsx @@ -33,10 +33,7 @@ type SegmentedControlProps = { const getSegmentedControlStyles = (props: {isFullWidth?: boolean; size?: SegmentedControlProps['size']}) => ({ backgroundColor: 'segmentedControl.bg', - borderColor: 'border.default', borderRadius: 2, - borderStyle: 'solid', - borderWidth: 1, display: props.isFullWidth ? 'flex' : 'inline-flex', fontSize: props.size === 'small' ? 0 : 1, height: props.size === 'small' ? '28px' : '32px', // TODO: use primitive `control.{small|medium}.size` when it is available diff --git a/src/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap b/src/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap index c0bb18bff45..6556fd291a7 100644 --- a/src/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap +++ b/src/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap @@ -100,8 +100,8 @@ exports[`SegmentedControl renders consistently 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - background-color: #f6f8fa; - border-color: #6e7781; + background-color: #ffffff; + border-color: #8c959f; border-style: solid; border-width: 1px; border-radius: var(--segmented-control-outer-radius); @@ -284,10 +284,7 @@ exports[`SegmentedControl renders consistently 1`] = ` .c0 { background-color: #eaeef2; - border-color: #d0d7de; border-radius: 6px; - border-style: solid; - border-width: 1px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; diff --git a/src/SegmentedControl/getSegmentedControlStyles.ts b/src/SegmentedControl/getSegmentedControlStyles.ts index 95c7a19bf6e..42bd5606fc6 100644 --- a/src/SegmentedControl/getSegmentedControlStyles.ts +++ b/src/SegmentedControl/getSegmentedControlStyles.ts @@ -45,7 +45,7 @@ export const getSegmentedControlButtonStyles = ( '.segmentedControl-content': { alignItems: 'center', - backgroundColor: props?.selected ? 'btn.bg' : 'transparent', + backgroundColor: props?.selected ? 'segmentedControl.button.bg' : 'transparent', borderColor: props?.selected ? 'segmentedControl.button.selected.border' : 'transparent', borderStyle: 'solid', borderWidth: 1, diff --git a/src/ToggleSwitch.tsx b/src/ToggleSwitch.tsx index 51b84878408..e676fef1222 100644 --- a/src/ToggleSwitch.tsx +++ b/src/ToggleSwitch.tsx @@ -94,7 +94,7 @@ const SwitchButton = styled.button` display: block; height: 32px; width: 64px; - outline-offset: 2px; + outline-offset: 3px; position: relative; overflow: hidden; @@ -118,11 +118,21 @@ const SwitchButton = styled.button` } } + &:hover, + &:focus:focus-visible { + background-color: ${get('colors.switchTrack.hoverBg')}; + } + + &:active, + &:active:focus-visible { + background-color: ${get('colors.switchTrack.activeBg')}; + } + ${props => { if (props.disabled) { return css` - background-color: ${get('colors.canvas.subtle')}; - border-color: ${get('colors.border.subtle')}; + background-color: ${get('colors.switchTrack.disabledBg')}; + border-color: transparent; cursor: not-allowed; transition-property: none; ` @@ -131,7 +141,7 @@ const SwitchButton = styled.button` if (props.checked) { return css` background-color: ${get('colors.switchTrack.checked.bg')}; - border-color: ${get('colors.switchTrack.checked.border')}; + border-color: transparent; &:hover, &:focus:focus-visible { @@ -146,20 +156,10 @@ const SwitchButton = styled.button` } else { return css` background-color: ${get('colors.switchTrack.bg')}; - border-color: ${get('colors.switchTrack.border')}; - - &:hover, - &:focus:focus-visible { - .Toggle-knob { - background-color: ${get('colors.btn.hoverBg')}; - } - } + border-color: transparent; - &:active, - &:active:focus-visible { - .Toggle-knob { - background-color: ${get('colors.btn.activeBg')}; - } + &:active { + background-color: ${get('colors.switchTrack.activeBg')}; } ` } @@ -168,23 +168,20 @@ const SwitchButton = styled.button` ${sx} ${sizeVariants} ` - const ToggleKnob = styled.div<{checked?: boolean; disabled?: boolean}>` - background-color: ${get('colors.btn.bg')}; + background-color: ${get('colors.switchKnob.bg')}; border-width: 1px; border-style: solid; - border-color: ${props => (props.disabled ? get('colors.border.default') : get('colors.switchTrack.border'))}; + border-color: ${props => (props.disabled ? get('colors.switchTrack.disabledBg') : get('colors.switchKnob.border'))}; border-radius: calc(${get('radii.2')} - 1px); /* -1px to account for 1px border around the control */ - box-shadow: ${props => - props.disabled ? 'none' : `${props.theme?.shadows?.shadow.medium}, ${props.theme?.shadows?.btn.insetShadow}`}; width: 50%; position: absolute; - top: -1px; - bottom: -1px; + top: 0; + bottom: 0; transition-property: transform; transition-duration: ${TRANSITION_DURATION}; transition-timing-function: ${EASE_OUT_QUAD_CURVE}; - transform: ${props => `translateX(${props.checked ? 'calc(100% + 1px)' : '-1px'})`}; + transform: ${props => `translateX(${props.checked ? '100%' : '0px'})`}; z-index: 1; @media (prefers-reduced-motion) { @@ -192,15 +189,16 @@ const ToggleKnob = styled.div<{checked?: boolean; disabled?: boolean}>` } ${props => { + if (props.disabled) { + return css` + border-color: ${get('colors.switchTrack.disabledBg')}; + }; + ` + } + if (props.checked) { return css` - background-color: ${props.disabled - ? get('colors.switchKnob.checked.disabledBg') - : get('colors.switchKnob.checked.bg')}; - border-color: ${props.disabled - ? get('colors.switchKnob.checked.disabledBg') - : get('colors.switchKnob.checked.bg')}; - box-shadow: ${get('shadows.shadow.small')}; + border-color: ${get('colors.switchKnob.checked.border')}; ` } }} @@ -282,7 +280,7 @@ const Switch: React.FC> = ({ flexGrow={1} flexShrink={0} flexBasis="50%" - color={acceptsInteraction ? 'accent.fg' : 'fg.subtle'} + color={acceptsInteraction ? 'switchTrack.checked.fg' : 'switchTrack.checked.disabledFg'} lineHeight="0" sx={{ transform: `translateX(${isOn ? '0' : '-100%'})`, @@ -296,7 +294,7 @@ const Switch: React.FC> = ({ flexGrow={1} flexShrink={0} flexBasis="50%" - color={acceptsInteraction ? 'fg.default' : 'fg.subtle'} + color={acceptsInteraction ? 'switchTrack.fg' : 'switchTrack.disabledFg'} lineHeight="0" sx={{ transform: `translateX(${isOn ? '100%' : '0'})`, @@ -307,7 +305,7 @@ const Switch: React.FC> = ({ -