Small Switch off state color change (#416)

equinor · Jul 6, 2020 · a89c089 · a89c089
1 parent ddc154b
commit a89c089
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/libraries/core-react/src/SelectionControls/Switch/Input.jsx b/libraries/core-react/src/SelectionControls/Switch/Input.jsx
@@ -31,6 +31,15 @@ const SmallInput = styled(BaseInput)`
   &[data-focus-visible-added]:focus + span :first-child {
     outline-offset: ${enabled.outlineOffsetSmall};
   }
+  /*  Track */
+  &:checked + span > span {
+    background-color: ${({ disabled }) =>
+      disabled ? _disabled.background : enabled.track.small.background};
+  }
+  /* Handle */
+  &:checked + span > span:last-child {
+    background-color: ${enabled.handle.small.background};
+  }
 `
 const DefaultInput = styled(BaseInput)`
   /*  Track */

diff --git a/libraries/core-react/src/SelectionControls/Switch/Switch.tokens.js b/libraries/core-react/src/SelectionControls/Switch/Switch.tokens.js
@@ -41,6 +41,7 @@ export const switchControl = {
         width: '20px',
         height: '10px',
         background: primaryResting,
+        offBackground: handleColor,
       },
     },
     handle: {

diff --git a/libraries/core-react/src/SelectionControls/Switch/SwitchSmall.jsx b/libraries/core-react/src/SelectionControls/Switch/SwitchSmall.jsx
@@ -13,7 +13,7 @@ const Track = styled.span`
   border-radius: 10px;
   border: none;
   background-color: ${({ isDisabled }) =>
-    isDisabled ? _disabled.background : enabled.track.small.background};
+    isDisabled ? _disabled.background : enabled.track.small.offBackground};
   position: absolute;
   left: 50%;
   top: 50%;