Merge pull request #87 from reaviz/feature/toggle-disabled-colors

Add ability to customize colors for disabled toggle
reaviz · Dec 8, 2023 · 696fc9e · 696fc9e
2 parents 99652d6 + 17caadc
commit 696fc9e
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 20 deletions.
diff --git a/docs/components/form/Toggle.mdx b/docs/components/form/Toggle.mdx
@@ -19,12 +19,20 @@ It's commonly used for settings, preferences, and quick mode changes.
 ## Design Tokens
 This component uses the following design tokens:
 
+- `toggle-width`
+- `toggle-height`
+- `ttoggle-handle-size`
 - `toggle-background`
 - `toggle-border-radius`
 - `toggle-spacing`
 - `toggle-handle-background`
 - `toggle-handle-checked-background`
 - `toggle-handle-border-radius`
+- `toggle-disabled-background`
+- `toggle-handle-disabled-background`
+- `toggle-checked-disabled-background`
+- `toggle-handle-checked-disabled-background`
+- `toggle-disabled-opacity`
 
 Learn more about design tokens in the [design tokens documentation](?path=/story/docs-design-tokens-getting-started--page).
 

diff --git a/docs/theme/ThemeExample.mdx b/docs/theme/ThemeExample.mdx
@@ -386,6 +386,9 @@ export const darkTheme: Theme = {
       'select-chip-icon-color': darkColors.slate['50']
     },
     toggle: {
+      'toggle-width': '55px',
+      'toggle-height': '35px',
+      'toggle-handle-size': '25px',
       'toggle-background': darkColors.gray['100'],
       'toggle-background-checked': darkColors.blue['50'],
       'toggle-border': 'none',
@@ -394,7 +397,12 @@ export const darkTheme: Theme = {
       'toggle-spacing': spacings.sm,
       'toggle-handle-background': darkColors.gray['300'],
       'toggle-handle-checked-background': darkColors.gray['300'],
-      'toggle-handle-border-radius': borders.radius.lg
+      'toggle-handle-border-radius': borders.radius.lg,
+      'toggle-disabled-background': darkColors.gray['100'],
+      'toggle-handle-disabled-background': darkColors.gray['300'],
+      'toggle-checked-disabled-background': darkColors.blue['50'],
+      'toggle-handle-checked-disabled-background': darkColors.gray['300'],
+      'toggle-disabled-opacity': '0.8'
     },
     tooltip: {
       'tooltip-background': darkColors.slate['500'],

diff --git a/src/form/Toggle/Toggle.module.css b/src/form/Toggle/Toggle.module.css
@@ -1,9 +1,4 @@
 .switch {
-  /** TODO: Improve this sizing logic */
-  --toggle-width: 55px;
-  --toggle-height: 35px;
-  --toggle-handle-size: 25px;
-
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -15,39 +10,52 @@
 
   &.disabled {
     cursor: not-allowed;
-    opacity: 0.8;
+    opacity: var(--toggle-disabled-opacity, 0.8);
+    background-color: var(--toggle-disabled-background);
+
+    .handle {
+      background-color: var(--toggle-handle-disabled-background);
+    }
+
+    &.checked {
+      background-color: var(--toggle-checked-disabled-background);
+
+      .handle {
+        background-color: var(--toggle-handle-checked-disabled-background);
+      }
+    }
   }
 
   &.small {
-    height: calc(var(--toggle-height) / 2);
-    width: calc(var(--toggle-width) / 2);
+    height: calc(var(--toggle-width, 35px) / 2);
+    width: calc(var(--toggle-width, 55px) / 2);
     padding: calc(var(--toggle-spacing) / 2);
 
     .handle {
-      height: calc(var(--toggle-handle-size) / 2);
-      width: calc(var(--toggle-handle-size) / 2);
+      height: calc(var(--toggle-width, 25px) / 2);
+      width: calc(var(--toggle-width, 25px) / 2);
     }
   }
 
   &.medium {
-    height: calc(var(--toggle-height) / 1.5);
-    width: calc(var(--toggle-width) / 1.5);
+    height: calc(var(--toggle-width, 35px) / 1.5);
+    width: calc(var(--toggle-width, 55px) / 1.5);
     padding: calc(var(--toggle-spacing) / 1.5);
 
     .handle {
-      height: calc(var(--toggle-handle-size) / 1.5);
-      width: calc(var(--toggle-handle-size) / 1.5);
+      height: calc(var(--toggle-width, 25px) / 1.5);
+      width: calc(var(--toggle-width, 25px) / 1.5);
     }
   }
 
   &.large {
-    height: var(--toggle-height);
-    width: var(--toggle-width);
+    height: var(--toggle-width, 35px);
+    width: var(--toggle-width, 55px);
     padding: var(--toggle-spacing);
 
     .handle {
-      height: var(--toggle-handle-size);
-      width: var(--toggle-handle-size);
+      height: var(--toggle-width, 25px);
+      width: var(--toggle-width, 25px);
     }
   }
 

diff --git a/src/utils/Theme/themes/dark.ts b/src/utils/Theme/themes/dark.ts
@@ -350,6 +350,9 @@ export const darkTheme: Theme = {
       'select-chip-icon-color': darkColors.slate['50']
     },
     toggle: {
+      'toggle-width': '55px',
+      'toggle-height': '35px',
+      'toggle-handle-size': '25px',
       'toggle-background': darkColors.gray['100'],
       'toggle-background-checked': darkColors.blue['50'],
       'toggle-border': 'none',
@@ -358,7 +361,12 @@ export const darkTheme: Theme = {
       'toggle-spacing': spacings.sm,
       'toggle-handle-background': darkColors.gray['300'],
       'toggle-handle-checked-background': darkColors.gray['300'],
-      'toggle-handle-border-radius': borders.radius.lg
+      'toggle-handle-border-radius': borders.radius.lg,
+      'toggle-disabled-background': darkColors.gray['100'],
+      'toggle-handle-disabled-background': darkColors.gray['300'],
+      'toggle-checked-disabled-background': darkColors.blue['50'],
+      'toggle-handle-checked-disabled-background': darkColors.gray['300'],
+      'toggle-disabled-opacity': '0.8'
     },
     tooltip: {
       'tooltip-background': darkColors.slate['500'],