From 3a27259eb24d1bcd66376c8055a1eab02ebf96ff Mon Sep 17 00:00:00 2001
From: Stephanie Yang <steph@goodcode.us>
Date: Fri, 17 May 2024 00:56:32 -0500
Subject: [PATCH 1/2] add ability to style states of disabled toggle

---
 src/form/Toggle/Toggle.story.tsx | 11 +++++++----
 src/form/Toggle/Toggle.tsx       |  3 ++-
 src/form/Toggle/ToggleTheme.ts   | 15 +++++++++------
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/form/Toggle/Toggle.story.tsx b/src/form/Toggle/Toggle.story.tsx
index 253ea5d3..1a2be79e 100644
--- a/src/form/Toggle/Toggle.story.tsx
+++ b/src/form/Toggle/Toggle.story.tsx
@@ -11,10 +11,13 @@ export const Simple = () => {
   return <Toggle checked={state} onChange={setState} />;
 };
 
-export const Disabled = () => {
-  const [state, setState] = useState(true);
-  return <Toggle disabled checked={state} onChange={setState} />;
-};
+export const Disabled = () => (
+  <>
+    <Toggle disabled checked={false} />
+    <br />
+    <Toggle disabled checked />
+  </>
+);
 
 export const Sizes = () => {
   const [stateSmall, setStateSmall] = useState(true);
diff --git a/src/form/Toggle/Toggle.tsx b/src/form/Toggle/Toggle.tsx
index 00f8fdb0..c3cd6ba0 100644
--- a/src/form/Toggle/Toggle.tsx
+++ b/src/form/Toggle/Toggle.tsx
@@ -74,7 +74,8 @@ export const Toggle: FC<ToggleProps & ToggleRef> = forwardRef<
         tabIndex={0}
         className={twMerge(
           theme.base,
-          disabled && theme.disabled,
+          disabled && theme.disabled.base,
+          disabled && checked && theme.disabled.checked,
           checked && theme.checked,
           theme.sizes[size],
           className
diff --git a/src/form/Toggle/ToggleTheme.ts b/src/form/Toggle/ToggleTheme.ts
index 6f477eca..2083baf8 100644
--- a/src/form/Toggle/ToggleTheme.ts
+++ b/src/form/Toggle/ToggleTheme.ts
@@ -1,6 +1,6 @@
 export interface ToggleTheme {
   base: string;
-  disabled: string;
+  disabled: { base: string; checked: string };
   checked: string;
   handle: {
     base: string;
@@ -19,7 +19,7 @@ export interface ToggleTheme {
 
 const baseTheme: ToggleTheme = {
   base: 'flex items-center justify-start cursor-pointer bg-surface box-border border border-panel-accent rounded-full',
-  disabled: 'cursor-not-allowed opacity-60',
+  disabled: { base: 'cursor-not-allowed opacity-60', checked: '' },
   checked: 'justify-end bg-primary',
   handle: {
     base: 'rounded-full bg-panel',
@@ -44,10 +44,13 @@ export const legacyToggleTheme: ToggleTheme = {
     baseTheme.base,
     'bg-[var(--toggle-background)] rounded-[var(--toggle-border-radius)] [border:_var(--toggle-border)]'
   ].join(' '),
-  disabled: [
-    baseTheme.disabled,
-    'opacity-[var(--toggle-disabled-opacity,0.8)] bg-[var(--toggle-disabled-background)]'
-  ].join(' '),
+  disabled: {
+    base: [
+      baseTheme.disabled,
+      'opacity-[var(--toggle-disabled-opacity,0.8)] bg-[var(--toggle-disabled-background)]'
+    ].join(' '),
+    checked: ''
+  },
   checked: [
     baseTheme.checked,
     'bg-[var(--toggle-background-checked)] [border:_var(--toggle-border-checked)]'

From 45c2607772e4bb41fd57cb9b2ff11deb37b5471e Mon Sep 17 00:00:00 2001
From: Stephanie Yang <steph@goodcode.us>
Date: Fri, 17 May 2024 12:10:04 -0500
Subject: [PATCH 2/2] tweaks to toggle disabled theme

---
 src/form/Toggle/Toggle.story.tsx |  2 +-
 src/form/Toggle/Toggle.tsx       | 10 +++++++---
 src/form/Toggle/ToggleTheme.ts   | 23 +++++++++++++----------
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/form/Toggle/Toggle.story.tsx b/src/form/Toggle/Toggle.story.tsx
index 1a2be79e..31a82995 100644
--- a/src/form/Toggle/Toggle.story.tsx
+++ b/src/form/Toggle/Toggle.story.tsx
@@ -1,5 +1,5 @@
-import { Toggle } from './Toggle';
 import React, { useState } from 'react';
+import { Toggle } from './Toggle';
 
 export default {
   title: 'Components/Form/Toggle',
diff --git a/src/form/Toggle/Toggle.tsx b/src/form/Toggle/Toggle.tsx
index c3cd6ba0..5931aca0 100644
--- a/src/form/Toggle/Toggle.tsx
+++ b/src/form/Toggle/Toggle.tsx
@@ -74,8 +74,7 @@ export const Toggle: FC<ToggleProps & ToggleRef> = forwardRef<
         tabIndex={0}
         className={twMerge(
           theme.base,
-          disabled && theme.disabled.base,
-          disabled && checked && theme.disabled.checked,
+          disabled && theme.disabled,
           checked && theme.checked,
           theme.sizes[size],
           className
@@ -93,7 +92,12 @@ export const Toggle: FC<ToggleProps & ToggleRef> = forwardRef<
         }}
       >
         <motion.div
-          className={twMerge(theme.handle.base, theme.handle.sizes[size])}
+          className={twMerge(
+            theme.handle.base,
+            theme.handle.sizes[size],
+            disabled && theme.handle.disabled,
+            checked && theme.handle.checked
+          )}
           layout
           transition={{
             type: 'spring',
diff --git a/src/form/Toggle/ToggleTheme.ts b/src/form/Toggle/ToggleTheme.ts
index 2083baf8..73f08b34 100644
--- a/src/form/Toggle/ToggleTheme.ts
+++ b/src/form/Toggle/ToggleTheme.ts
@@ -1,9 +1,11 @@
 export interface ToggleTheme {
   base: string;
-  disabled: { base: string; checked: string };
+  disabled: string;
   checked: string;
   handle: {
     base: string;
+    disabled: string;
+    checked: string;
     sizes: {
       small: string;
       medium: string;
@@ -19,10 +21,12 @@ export interface ToggleTheme {
 
 const baseTheme: ToggleTheme = {
   base: 'flex items-center justify-start cursor-pointer bg-surface box-border border border-panel-accent rounded-full',
-  disabled: { base: 'cursor-not-allowed opacity-60', checked: '' },
-  checked: 'justify-end bg-primary',
+  disabled: 'cursor-not-allowed opacity-60',
+  checked: 'checked justify-end bg-primary',
   handle: {
     base: 'rounded-full bg-panel',
+    disabled: '',
+    checked: 'checked',
     sizes: {
       small: 'w-3 h-full',
       medium: 'w-5 h-full',
@@ -44,13 +48,10 @@ export const legacyToggleTheme: ToggleTheme = {
     baseTheme.base,
     'bg-[var(--toggle-background)] rounded-[var(--toggle-border-radius)] [border:_var(--toggle-border)]'
   ].join(' '),
-  disabled: {
-    base: [
-      baseTheme.disabled,
-      'opacity-[var(--toggle-disabled-opacity,0.8)] bg-[var(--toggle-disabled-background)]'
-    ].join(' '),
-    checked: ''
-  },
+  disabled: [
+    baseTheme.disabled,
+    'opacity-[var(--toggle-disabled-opacity,0.8)] bg-[var(--toggle-disabled-background)]'
+  ].join(' '),
   checked: [
     baseTheme.checked,
     'bg-[var(--toggle-background-checked)] [border:_var(--toggle-border-checked)]'
@@ -69,6 +70,8 @@ export const legacyToggleTheme: ToggleTheme = {
       baseTheme.handle.base,
       'bg-[var(--toggle-handle-background)] rounded-[var(--toggle-handle-border-radius)]'
     ].join(' '),
+    disabled: '',
+    checked: '',
     sizes: {
       small:
         'h-[calc(var(--toggle-handle-size,25px)_/_2)] w-[calc(var(--toggle-handle-size,25px)_/_2)]',