From 9c0a53fcddd7b82be8b4a1c74ae44d9e529e47b3 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Fri, 24 Nov 2023 06:23:01 +0530
Subject: [PATCH 1/2] chore(react): update `Switch` default styles

---
 .../src/components/Switch/Switch.stories.mdx  | 11 +++
 .../react/src/components/Switch/switch.scss   | 78 ++++++++++++++++++-
 2 files changed, 86 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/Switch/Switch.stories.mdx b/packages/react/src/components/Switch/Switch.stories.mdx
index c0e3a7f8..745165c8 100644
--- a/packages/react/src/components/Switch/Switch.stories.mdx
+++ b/packages/react/src/components/Switch/Switch.stories.mdx
@@ -54,3 +54,14 @@ function Demo() {
   return <FormControlLabel control={<Switch />} label="Off" />;
 }`}
 />
+
+## Variants
+
+### Size
+
+Use the `size` prop to change the size of the switch.
+
+<Canvas>
+  <Story name="Small" args={{defaultChecked: true, size: 'small'}} />
+  <Story name="Medium" args={{defaultChecked: true, size: 'medium'}} />
+</Canvas>
diff --git a/packages/react/src/components/Switch/switch.scss b/packages/react/src/components/Switch/switch.scss
index aff1897d..c02ccf11 100644
--- a/packages/react/src/components/Switch/switch.scss
+++ b/packages/react/src/components/Switch/switch.scss
@@ -16,15 +16,87 @@
  * under the License.
  */
 
+:root {
+  --oxygen-switch-width: 3.9rem;
+  --oxygen-switch-height: 2.5rem;
+  --oxygen-switch-track-height: 1rem;
+  --oxygen-switch-track-width: 2rem;
+  --oxygen-switch-thumb-height: 1.5rem;
+  --oxygen-switch-thumb-width: 1.5rem;
+  --oxygen-switch-small-width: 2.8rem;
+  --oxygen-switch-small-height: 1.8rem;
+  --oxygen-switch-small-track-height: 0.8rem;
+  --oxygen-switch-small-track-width: 1.5rem;
+  --oxygen-switch-small-thumb-height: 1.2rem;
+  --oxygen-switch-small-thumb-width: 1.2rem;
+}
+
 .oxygen-switch {
-  /* Add styles */
+  width: var(--oxygen-switch-width);
+  height: var(--oxygen-switch-height);
+
   .MuiSwitch-thumb {
-    color: lightgray;
+    background: var(--oxygen-palette-common-white);
+    transition-property: transform;
+    transition-duration: 200ms;
+    border-radius: inherit;
+    width: var(--oxygen-switch-thumb-width);
+    height: var(--oxygen-switch-thumb-width);
+    border-width: 0.125rem;
+    border-style: solid;
+    border-image: initial;
+    border-color: var(--oxygen-palette-divider);
+  }
+
+  .MuiSwitch-track {
+    height: var(--oxygen-switch-track-height);
+    width: var(--oxygen-switch-track-width);
+    opacity: 0.25;
+    margin-top: 1px;
   }
 
   .Mui-checked {
+    &.MuiSwitch-switchBase {
+      --transform-x-thumb-offset: calc(var(--oxygen-switch-thumb-width)/2);
+      --transform-x-offset: calc(var(--oxygen-switch-track-width) + var(--transform-x-thumb-offset));
+
+      transform: translateX(calc(var(--oxygen-switch-width) - var(--transform-x-offset)));
+    }
+
     .MuiSwitch-thumb {
-      color: var(--oxygen-palette-primary-main);
+      box-shadow: var(--oxygen-shadows-3);
+      background: var(--oxygen-palette-primary-main);
+      border-color: var(--oxygen-palette-common-white);
+    }
+  }
+
+  &.MuiSwitch-sizeSmall {
+    width: var(--oxygen-switch-small-width);
+    height: var(--oxygen-switch-small-height);
+
+    .MuiSwitch-thumb {
+      width: var(--oxygen-switch-small-thumb-width);
+      height: var(--oxygen-switch-small-thumb-height);
+    }
+
+    .MuiSwitch-track {
+      height: var(--oxygen-switch-small-track-height);
+      width: var(--oxygen-switch-small-track-width);
+    }
+
+    .Mui-checked {
+      &.MuiSwitch-switchBase {
+        --transform-x-thumb-offset: calc(var(--oxygen-switch-small-thumb-width)/2);
+        --transform-x-offset: calc(var(--oxygen-switch-small-track-width) + var(--transform-x-thumb-offset));
+
+        transform: translateX(calc(var(--oxygen-switch-small-width) - var(--transform-x-offset)));
+      }
+    }
+  }
+
+  :not(.Mui-checked) {
+    .MuiSwitch-track {
+      opacity: 0.08;
     }
   }
 }

From 8576ada518ec85d28fcf6ffc559847391b2ba138 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Fri, 24 Nov 2023 06:23:50 +0530
Subject: [PATCH 2/2] chore(react): update `Switch` stories

---
 packages/react/src/components/Switch/Switch.stories.mdx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react/src/components/Switch/Switch.stories.mdx b/packages/react/src/components/Switch/Switch.stories.mdx
index 745165c8..8ca728a9 100644
--- a/packages/react/src/components/Switch/Switch.stories.mdx
+++ b/packages/react/src/components/Switch/Switch.stories.mdx
@@ -22,6 +22,8 @@ export const Template = (args) => {
 - [Overview](#overview)
 - [Props](#props)
 - [Usage](#usage)
+- [Variants](#variants)
+ - [Size](#size)
 
 ## Overview