Updates ToggleSwitch to look less dimensional and more minimal (#2843)

* updates ToggleSwitch to look less dimensional and more minimal

* adds changeset

* updates @primer/primitives to canary version

* updates @primer/primitives to latest canary version

* bumps canary primitives and rm dead tokens

* bumps primitives to latest canary release

* installs dependencies using --legacy-peer-deps flag to test Primitives changes

* updates to primitives and styles based on new design feedback

* updates segmentedcontrol styles

* adjusts outline-offset to be more visible when switch is on

* test lock file after npm install on local

* update snapshots

* updates snapshots (note: these are out of date on main too)

* updates theme-preval snapshot

* Update src/theme-preval.js

Co-authored-by: Armağan <broccolinisoup@github.com>

* update themepreval again with correct cache-busting timestamp

---------

Co-authored-by: Armagan Ersoz <broccolinisoup@github.com>

.changeset/large-guests-sip.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Updates the ToggleSwitch styles to be more minimal and less dimensional

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",

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

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;

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,

src/ToggleSwitch.tsx

@@ -94,7 +94,7 @@ const SwitchButton = styled.button<SwitchButtonProps>`
   display: block;
   height: 32px;
   width: 64px;
-  outline-offset: 2px;
+  outline-offset: 3px;
   position: relative;
   overflow: hidden;
 
@@ -118,11 +118,21 @@ const SwitchButton = styled.button<SwitchButtonProps>`
     }
   }
 
+  &: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<SwitchButtonProps>`
     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<SwitchButtonProps>`
     } 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,39 +168,37 @@ const SwitchButton = styled.button<SwitchButtonProps>`
   ${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) {
     transition: none;
   }
 
   ${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<React.PropsWithChildren<SwitchProps>> = ({
             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<React.PropsWithChildren<SwitchProps>> = ({
             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<React.PropsWithChildren<SwitchProps>> = ({
             <CircleIcon size={size} />
           </Box>
         </Box>
-        <ToggleKnob aria-hidden="true" className="Toggle-knob" disabled={!acceptsInteraction} checked={isOn} />
+        <ToggleKnob aria-hidden="true" disabled={!acceptsInteraction} checked={isOn} />
       </SwitchButton>
     </Box>
   )

src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap

@@ -63,7 +63,6 @@ exports[`AnchoredOverlay renders consistently 1`] = `
 
 .c1:active {
   background-color: hsla(220,14%,94%,1);
-  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
 }
 
 .c1:disabled {
@@ -154,7 +153,6 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
 
 .c1:active {
   background-color: hsla(220,14%,94%,1);
-  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
 }
 
 .c1:disabled {

src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap

@@ -63,7 +63,6 @@ exports[`ConfirmationDialog renders consistently 1`] = `
 
 .c1:active {
   background-color: hsla(220,14%,94%,1);
-  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
 }
 
 .c1:disabled {

src/__tests__/__snapshots__/Dropdown.test.tsx.snap

@@ -79,7 +79,6 @@ exports[`Dropdown.Button renders consistently 1`] = `
 
 .c0:active {
   background-color: hsla(220,14%,94%,1);
-  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
 }
 
 .c0:disabled {

src/__tests__/__snapshots__/SelectMenu.test.tsx.snap

@@ -57,7 +57,6 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
 
 .c1:active {
   background-color: hsla(220,14%,94%,1);
-  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
 }
 
 .c1:disabled {

src/__tests__/__snapshots__/SelectPanel.test.tsx.snap

@@ -63,7 +63,6 @@ exports[`SelectPanel renders consistently 1`] = `
 
 .c1:active {
   background-color: hsla(220,14%,94%,1);
-  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
 }
 
 .c1:disabled {

src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap

@@ -26,7 +26,7 @@ exports[`renders consistently 1`] = `
 }
 
 .c7 {
-  color: #0969da;
+  color: #ffffff;
   line-height: 0;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
@@ -49,7 +49,7 @@ exports[`renders consistently 1`] = `
 }
 
 .c8 {
-  color: #24292f;
+  color: #57606a;
   line-height: 0;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
@@ -131,44 +131,47 @@ exports[`renders consistently 1`] = `
   display: block;
   height: 32px;
   width: 64px;
-  outline-offset: 2px;
+  outline-offset: 3px;
   position: relative;
   overflow: hidden;
   background-color: #eaeef2;
-  border-color: #afb8c1;
+  border-color: transparent;
+}
+
+.c4:hover,
+.c4:focus:focus-visible {
+  background-color: hsla(210,24%,90%,1);
 }
 
-.c4:hover .Toggle-knob,
-.c4:focus:focus-visible .Toggle-knob {
-  background-color: #f3f4f6;
+.c4:active,
+.c4:active:focus-visible {
+  background-color: hsla(210,24%,88%,1);
 }
 
-.c4:active .Toggle-knob,
-.c4:active:focus-visible .Toggle-knob {
-  background-color: hsla(220,14%,93%,1);
+.c4:active {
+  background-color: hsla(210,24%,88%,1);
 }
 
 .c9 {
-  background-color: #f6f8fa;
+  background-color: #ffffff;
   border-width: 1px;
   border-style: solid;
-  border-color: #afb8c1;
+  border-color: #858F99;
   border-radius: calc(6px - 1px);
-  box-shadow: 0 3px 6px rgba(140,149,159,0.15),inset 0 1px 0 rgba(255,255,255,0.25);
   width: 50%;
   position: absolute;
-  top: -1px;
-  bottom: -1px;
+  top: 0;
+  bottom: 0;
   -webkit-transition-property: -webkit-transform;
   -webkit-transition-property: transform;
   transition-property: transform;
   -webkit-transition-duration: 80ms;
   transition-duration: 80ms;
   -webkit-transition-timing-function: cubic-bezier(0.5,1,0.89,1);
   transition-timing-function: cubic-bezier(0.5,1,0.89,1);
-  -webkit-transform: translateX(-1px);
-  -ms-transform: translateX(-1px);
-  transform: translateX(-1px);
+  -webkit-transform: translateX(0px);
+  -ms-transform: translateX(0px);
+  transform: translateX(0px);
   z-index: 1;
 }
 
@@ -251,7 +254,7 @@ exports[`renders consistently 1`] = `
     >
       <div
         className="c7"
-        color="accent.fg"
+        color="switchTrack.checked.fg"
       >
         <svg
           fill="currentColor"
@@ -268,7 +271,7 @@ exports[`renders consistently 1`] = `
       </div>
       <div
         className="c8"
-        color="fg.default"
+        color="switchTrack.fg"
       >
         <svg
           fill="currentColor"
@@ -287,7 +290,7 @@ exports[`renders consistently 1`] = `
     <div
       aria-hidden="true"
       checked={false}
-      className="c9 Toggle-knob"
+      className="c9"
       disabled={false}
     />
   </button>