From c8f16de76884304d76730ad72a970d567b9371c1 Mon Sep 17 00:00:00 2001
From: Julie Wongbandue <juliewongbandue@gmail.com>
Date: Tue, 8 Aug 2023 15:19:35 -0400
Subject: [PATCH] Add hover and disabled styles to background of toggle
 component

---
 src/components/inputs/Input/Input.style.ts | 28 +++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/inputs/Input/Input.style.ts b/src/components/inputs/Input/Input.style.ts
index 27b43f6f..936d52bc 100755
--- a/src/components/inputs/Input/Input.style.ts
+++ b/src/components/inputs/Input/Input.style.ts
@@ -1,5 +1,6 @@
 import styled, { css, StyledComponent } from 'styled-components';
-import { rgba } from 'polished';
+import { rgba, darken } from 'polished';
+import { grayscale, slate } from '../../../color';
 
 import {
   FauxMark,
@@ -84,12 +85,20 @@ export const ToggleIcon = styled.div`
 `;
 
 function fauxToggleChecked({ toggle, theme }) {
+  const unCheckedColor =
+    theme.name === 'light' ? slate(300) : grayscale(300);
+  const checkedColor = theme.formats.primary;
+
   return (
     toggle &&
     css`
+      ~ ${Faux} {
+        background: ${unCheckedColor};
+        border: 1px solid ${unCheckedColor};
+      }
       &:checked ~ ${Faux} {
-        background: ${theme.formats.primary};
-        border: 1px solid ${theme.formats.primary};
+        background: ${checkedColor};
+        border: 1px solid ${checkedColor};
         ${ToggleIcon} {
           transform: scale(1) translateX(calc(100% + 4px));
         }
@@ -97,6 +106,19 @@ function fauxToggleChecked({ toggle, theme }) {
           transform: scale(1) translateX(calc(100% + 4px));
         }
       }
+
+      :hover:checked ~ ${Faux} {
+        background: ${darken(0.1, checkedColor)};
+        border-color: ${darken(0.1, checkedColor)};
+      }
+      :hover ~ ${Faux} {
+        background: ${darken(0.1, unCheckedColor)};
+        border-color: transparent;
+      }
+
+      :disabled ~ ${Faux} {
+        opacity: 50%;
+      }
     `
   );
 }