adjust the Switch size

mui · Sep 7, 2023 · a634103 · a634103
1 parent 7e51c31
commit a634103
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/packages/mui-joy/src/Switch/Switch.tsx b/packages/mui-joy/src/Switch/Switch.tsx
@@ -66,22 +66,22 @@ const SwitchRoot = styled('div', {
       ownerState.variant === 'soft' ? 'none' : '0 0 0 1px var(--Switch-trackBackground)', // create border-like if the thumb is bigger than the track
     ...(ownerState.size === 'sm' && {
       '--Switch-trackWidth': '32px',
-      '--Switch-trackHeight': '16px',
-      '--Switch-thumbSize': '8px',
+      '--Switch-trackHeight': '20px',
+      '--Switch-thumbSize': '16px',
       '--Switch-gap': '6px',
       fontSize: theme.vars.fontSize.sm,
     }),
     ...(ownerState.size === 'md' && {
       '--Switch-trackWidth': '40px',
-      '--Switch-trackHeight': '20px',
-      '--Switch-thumbSize': '12px',
+      '--Switch-trackHeight': '24px',
+      '--Switch-thumbSize': '20px',
       '--Switch-gap': '8px',
       fontSize: theme.vars.fontSize.md,
     }),
     ...(ownerState.size === 'lg' && {
       '--Switch-trackWidth': '48px',
-      '--Switch-trackHeight': '24px',
-      '--Switch-thumbSize': '16px',
+      '--Switch-trackHeight': '28px',
+      '--Switch-thumbSize': '24px',
       '--Switch-gap': '12px',
     }),
     '--unstable_paddingBlock': `max((var(--Switch-trackHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Switch-thumbSize)) / 2, 0px)`,