Switch: Another design update (#33170)

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);

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>