[v14] Update Toggle component styles

web/packages/design/src/Alert/Alert.jsx

@@ -40,7 +40,7 @@ const kind = props => {
       };
     case 'success':
       return {
-        background: theme.colors.success,
+        background: theme.colors.success.main,
         color: theme.colors.text.primaryInverse,
       };
     default:

web/packages/design/src/Alert/Alert.test.jsx

@@ -52,7 +52,7 @@ describe('design/Alert', () => {
   test('"kind" success renders bg == theme.colors.success', () => {
     const { container } = render(<Success />);
     expect(container.firstChild).toHaveStyle({
-      background: theme.colors.success,
+      background: theme.colors.success.main,
     });
   });
 });

web/packages/design/src/CardSuccess/__snapshots__/CardSuccess.test.jsx.snap

@@ -19,10 +19,15 @@ exports[`rendering of CardSuccess components 1`] = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: #00BFA5;
   margin-bottom: 16px;
 }
 
+.c1 color {
+  main: #00BFA6;
+  hover: #33CCB8;
+  active: #66D9CA;
+}
+
 <div
   class="c0"
   width="540px"

web/packages/design/src/Label/Label.jsx

@@ -46,7 +46,7 @@ const kind = ({ kind, theme }) => {
 
   if (kind === 'success') {
     return {
-      backgroundColor: theme.colors.success,
+      backgroundColor: theme.colors.success.main,
       color: theme.colors.text.primaryInverse,
     };
   }

web/packages/design/src/LabelState/LabelState.jsx

@@ -43,7 +43,7 @@ const kinds = ({ theme, kind, shadow }) => {
   }
 
   if (kind === 'success') {
-    styles.background = theme.colors.success;
+    styles.background = theme.colors.success.main;
     styles.color = theme.colors.text.primaryInverse;
   }
 

web/packages/design/src/LabelState/LabelState.test.jsx

@@ -30,7 +30,7 @@ const colors = {
   info: theme.colors.spotBackground[0],
   warning: theme.colors.warning.main,
   danger: theme.colors.error.main,
-  success: theme.colors.success,
+  success: theme.colors.success.main,
 };
 
 describe('design/LabelState', () => {

web/packages/design/src/Toggle/Toggle.story.tsx

@@ -26,7 +26,16 @@ export default {
 };
 
 export const Default = () => {
-  const [toggled, setToggled] = useState(false);
+  return (
+    <Flex flexDirection="column" gap={4}>
+      <ToggleRow initialToggled={false} />
+      <ToggleRow initialToggled={true} />
+    </Flex>
+  );
+};
+
+const ToggleRow = (props: { initialToggled: boolean }) => {
+  const [toggled, setToggled] = useState(props.initialToggled);
 
   function toggle(): void {
     setToggled(wasToggled => !wasToggled);
@@ -42,6 +51,19 @@ export const Default = () => {
         <Text>Disabled</Text>
         <Toggle disabled={true} onToggle={toggle} isToggled={toggled} />
       </div>
+      <div>
+        <Text>Enabled (large)</Text>
+        <Toggle onToggle={toggle} isToggled={toggled} size="large" />
+      </div>
+      <div>
+        <Text>Disabled (large)</Text>
+        <Toggle
+          disabled={true}
+          onToggle={toggle}
+          isToggled={toggled}
+          size="large"
+        />
+      </div>
     </Flex>
   );
 };

web/packages/design/src/Toggle/Toggle.tsx

@@ -1,18 +1,20 @@
-/*
-Copyright 2022 Gravitational, Inc.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
+/**
+ * Teleport
+ * Copyright (C) 2023  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
 
 import React, { ReactNode } from 'react';
 import styled from 'styled-components';
@@ -23,21 +25,24 @@ export function Toggle({
   children,
   disabled,
   className,
+  size = 'small',
 }: {
   isToggled: boolean;
   onToggle: () => void;
   children?: ReactNode;
   disabled?: boolean;
   className?: string;
+  size?: 'small' | 'large';
 }) {
   return (
     <StyledWrapper disabled={disabled} className={className}>
       <StyledInput
         checked={isToggled}
         onChange={onToggle}
         disabled={disabled}
+        size={size}
       />
-      <StyledSlider />
+      <StyledSlider size={size} />
       {children}
     </StyledWrapper>
   );
@@ -54,44 +59,102 @@ const StyledWrapper = styled.label`
   }
 `;
 
+const size = props => {
+  switch (props.size) {
+    case 'large':
+      return {
+        track: {
+          width: 40,
+          height: 20,
+        },
+        circle: {
+          width: 14,
+          height: 14,
+          transform: 'translate(3px, -50%)',
+        },
+        translate: 'translate(23px, -50%)',
+      };
+    default:
+      // small
+      return {
+        track: {
+          width: 32,
+          height: 16,
+        },
+        circle: {
+          width: 12,
+          height: 12,
+          transform: 'translate(2px, -50%)',
+        },
+        translate: 'translate(18px, -50%)',
+      };
+  }
+};
+
 const StyledSlider = styled.div`
-  width: 32px;
-  height: 12px;
-  border-radius: 12px;
-  background: ${props => props.theme.colors.levels.surface};
+  // the slider 'track'
+  ${props => size(props).track};
+  border-radius: 10px;
   cursor: inherit;
   flex-shrink: 0;
+  background: ${props => props.theme.colors.buttons.secondary.default};
+  transition: background 0.15s ease-in-out;
+
+  &:hover {
+    background: ${props => props.theme.colors.buttons.secondary.hover};
+  }
+
+  &:active {
+    background: ${props => props.theme.colors.buttons.secondary.active};
+  }
 
+  // the slider 'circle'
   &:before {
     content: '';
     position: absolute;
     top: 50%;
-    transform: translate(0, -50%);
-    width: 16px;
-    height: 16px;
-    border-radius: 16px;
-    background: ${props => props.theme.colors.brand};
+    ${props => size(props).circle};
+    border-radius: 14px;
+    background: ${props => props.theme.colors.interactionHandle};
+    box-shadow: ${props => props.theme.boxShadow[0]};
+    transition: transform 0.05s ease-in;
   }
 `;
 
 const StyledInput = styled.input.attrs({ type: 'checkbox' })`
   opacity: 0;
   position: absolute;
   cursor: inherit;
+  z-index: -1;
 
   &:checked + ${StyledSlider} {
-    background: ${props => props.theme.colors.spotBackground[1]};
-
     &:before {
-      transform: translate(16px, -50%);
+      transform: ${props => size(props).translate};
+    }
+  }
+
+  &:enabled:checked + ${StyledSlider} {
+    background: ${props => props.theme.colors.success.main};
+
+    &:hover {
+      background: ${props => props.theme.colors.success.hover};
+    }
+
+    &:active {
+      background: ${props => props.theme.colors.success.active};
     }
   }
 
   &:disabled + ${StyledSlider} {
-    background: ${props => props.theme.colors.levels.surface};
+    background: ${props => props.theme.colors.spotBackground[0]};
 
     &:before {
-      background: ${props => props.theme.colors.grey[700]};
+      opacity: 0.36;
+      box-shadow: none;
     }
   }
+
+  &:disabled:checked + ${StyledSlider} {
+    background: ${props => props.theme.colors.interactive.tonal.success[2]};
+  }
 `;

web/packages/design/src/theme/themes/bblpTheme.ts

@@ -93,6 +93,11 @@ const colors: ThemeColors = {
         'rgba(255,160,40, 0.18)',
         'rgba(255,160,40, 0.25)',
       ],
+      success: [
+        'rgba(0, 162, 35, 0.1)',
+        'rgba(0, 162, 35, 0.18)',
+        'rgba(0, 162, 35, 0.25)',
+      ],
     },
   },
 
@@ -429,7 +434,11 @@ const colors: ThemeColors = {
   },
 
   link: '#66ABFF',
-  success: '#00BFA5',
+  success: {
+    main: '#00A223',
+    hover: '#35D655',
+    active: '#00851C',
+  },
 
   dataVisualisation: dataVisualisationColors,
 };

web/packages/design/src/theme/themes/darkTheme.ts

@@ -93,6 +93,11 @@ const colors: ThemeColors = {
         'rgba(159,133,255, 0.18)',
         'rgba(159,133,255, 0.25)',
       ],
+      success: [
+        'rgba(0, 191, 166, 0.1)',
+        'rgba(0, 191, 166, 0.18)',
+        'rgba(0, 191, 166, 0.25)',
+      ],
     },
   },
 
@@ -166,6 +171,12 @@ const colors: ThemeColors = {
     active: '#FFCD66',
   },
 
+  success: {
+    main: '#00BFA6',
+    hover: '#33CCB8',
+    active: '#66D9CA',
+  },
+
   notice: {
     background: '#344179', // elevated
   },
@@ -429,7 +440,6 @@ const colors: ThemeColors = {
   },
 
   link: '#009EFF',
-  success: '#00BFA5',
 
   dataVisualisation: dataVisualisationColors,
 };

web/packages/design/src/theme/themes/lightTheme.ts

@@ -88,6 +88,11 @@ const colors: ThemeColors = {
         'rgba(81,47,201, 0.18)',
         'rgba(81,47,201, 0.25)',
       ],
+      success: [
+        'rgba(0, 125, 107, 0.1)',
+        'rgba(0, 125, 107, 0.18)',
+        'rgba(0, 125, 107, 0.25)',
+      ],
     },
   },
 
@@ -424,7 +429,12 @@ const colors: ThemeColors = {
   },
 
   link: '#0073BA',
-  success: '#007D6B',
+
+  success: {
+    main: '#007D6B',
+    hover: '#006456',
+    active: '#004B40',
+  },
 
   dataVisualisation: dataVisualisationColors,
 };

web/packages/design/src/theme/themes/sharedStyles.ts

@@ -60,6 +60,7 @@ export const sharedStyles: SharedStyles = {
 
 // Colors that are shared between all themes, these should be added to the theme.colors object.
 export const sharedColors: SharedColors = {
+  interactionHandle: '#FFFFFF',
   dark: '#000000',
   light: '#FFFFFF',
   grey: {