From 6bbcd43b4c2a0fe42ab6976cad2dc9993084efc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Tue, 20 Apr 2021 17:10:05 +0200
Subject: [PATCH] Switch: Another design update (#33170)

---
 packages/grafana-ui/src/components/Switch/Switch.tsx | 12 ++++++++----
 .../src/components/ThemeDemos/ThemeDemo.tsx          |  4 ++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx
index 735cb844555..b03659c53d6 100644
--- a/packages/grafana-ui/src/components/Switch/Switch.tsx
+++ b/packages/grafana-ui/src/components/Switch/Switch.tsx
@@ -12,7 +12,7 @@ export interface Props extends Omit<HTMLProps<HTMLInputElement>, 'value'> {
 }
 
 export const Switch = React.forwardRef<HTMLInputElement, Props>(
-  ({ value, checked, disabled = false, onChange, id, ...inputProps }, ref) => {
+  ({ value, checked, disabled, onChange, id, ...inputProps }, ref) => {
     if (checked) {
       deprecationWarning('Switch', 'checked prop', 'value');
     }
@@ -75,6 +75,7 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme, transparent?: boolea
 
         &:checked + label {
           background: ${theme.v2.palette.primary.main};
+          border-color: ${theme.v2.palette.primary.main};
 
           &:hover {
             background: ${theme.v2.palette.primary.shade};
@@ -82,6 +83,7 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme, transparent?: boolea
 
           &::after {
             transform: translate3d(18px, -50%, 0);
+            background: ${theme.v2.palette.primary.contrastText};
           }
         }
 
@@ -101,11 +103,12 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme, transparent?: boolea
         cursor: pointer;
         border: none;
         border-radius: 50px;
-        background: ${theme.v2.palette.secondary.main};
+        background: ${theme.v2.components.input.background};
+        border: 1px solid ${theme.v2.components.input.border};
         transition: all 0.3s ease;
 
         &:hover {
-          background: ${theme.v2.palette.secondary.shade};
+          border-color: ${theme.v2.components.input.borderHover};
         }
 
         &::after {
@@ -115,7 +118,8 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme, transparent?: boolea
           width: 12px;
           height: 12px;
           border-radius: 6px;
-          background: ${theme.v2.palette.text.primary};
+          background: ${theme.v2.palette.text.secondary};
+          box-shadow: ${theme.v2.shadows.z1};
           top: 50%;
           transform: translate3d(2px, -50%, 0);
           transition: transform 0.2s cubic-bezier(0.19, 1, 0.22, 1);
diff --git a/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx b/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
index ecd8139907a..0616ced36b0 100644
--- a/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
+++ b/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
@@ -148,8 +148,8 @@ export const ThemeDemo = () => {
               <Field label="Switch true">
                 <Switch value={true} />
               </Field>
-              <Field label="Switch false disabled">
-                <Switch value={false} disabled />
+              <Field label="Switch false disabled" disabled={true}>
+                <Switch value={false} />
               </Field>
             </HorizontalGroup>
             <VerticalGroup>