feat(toggle): migrate to semantic colors

Author: nlopin

src/components/Toggle/Slide.tsx

@@ -1,30 +1,30 @@
 import styled from 'styled-components';
-import { SemanticColors } from '../../essentials';
+import { getSemanticValue } from '../../utils/cssVariables';
 
 const determineBackground = (props: SlideProps) => {
     if (props.disabled) {
-        return SemanticColors.background.secondary;
+        return getSemanticValue('background-secondary-default');
     }
 
     if (props.error) {
-        return SemanticColors.background.dangerEmphasized;
+        return getSemanticValue('background-danger-emphasized');
     }
 
-    return SemanticColors.background.infoEmphasized;
+    return getSemanticValue('background-highlight');
 };
 
 interface SlideProps {
     disabled?: boolean;
     error?: boolean;
 }
 
-// TODO use SemanticColors.forms once https://github.com/freenowtech/wave/issues/286 is done
 const Slide = styled.div<SlideProps>`
     width: 2.25rem;
     height: 1rem;
 
     cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
-    background: ${props => (props.disabled ? SemanticColors.background.secondary : SemanticColors.border.primary)};
+    background: ${props =>
+        getSemanticValue(props.disabled ? 'background-tertiary-disabled' : 'background-tertiary-default')};
     display: inline-block;
     border-radius: 0.5rem;
     position: relative;
@@ -38,7 +38,7 @@ const Slide = styled.div<SlideProps>`
         width: 1.25rem;
         height: 1.25rem;
         background: ${props =>
-            props.disabled ? SemanticColors.background.secondary : SemanticColors.background.primary};
+            getSemanticValue(props.disabled ? 'background-tertiary-disabled' : 'background-primary-default')};
         border-radius: 50%;
         box-shadow: 0 0 0.0625rem 0 rgba(0, 0, 0, 0.05), 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.4);
         transform: translateX(0);

src/components/Toggle/docs/Toggle.stories.tsx

@@ -39,3 +39,9 @@ export const WithLabel: Story = {
         label: 'Turn on the light'
     }
 };
+
+export const Disabled: Story = {
+    args: {
+        disabled: true
+    }
+}

src/essentials/Colors/Colors.ts

@@ -87,6 +87,10 @@ export const SemanticColors = {
             default: Colors.blue.primary[50],
             emphasized: Colors.blue.primary[550],
         },
+        tertiary: {
+            default:Colors.blue.primary[200],
+            disabled: Colors.blue.primary[50],
+        },
         danger: {
             default: Colors.orange[50],
             emphasized: Colors.orange[900],
@@ -105,6 +109,7 @@ export const SemanticColors = {
             default: Colors.yellow[50],
             emphasized: Colors.yellow[900],
         },
+        highlight: Colors.blue.secondary[900],
         transparent: Colors.transparent,
     },
     icon: {

src/essentials/Colors/RedesignedColors.ts

@@ -85,6 +85,10 @@ export const SemanticColors = {
             default: Colors.blue.primary[50],
             emphasized: Colors.blue.primary[550],
         },
+        tertiary: {
+            default:Colors.blue.primary[200],
+            disabled: Colors.blue.primary[50],
+        },
         danger: {
             default: Colors.orange[50],
             emphasized: Colors.orange[900],
@@ -103,6 +107,7 @@ export const SemanticColors = {
             default: Colors.yellow[50],
             emphasized: Colors.yellow[900],
         },
+        highlight: Colors.red[900],
         transparent: Colors.transparent,
     },
     icon: {
@@ -167,7 +172,7 @@ export const SemanticColors = {
         },
         danger: {
             default: Colors.orange[350],
-            emphasized: Colors.orange[900],
+            emphasized: Colors.red[900],
             disabled: Colors.orange[350],
         },
         transparent: Colors.transparent,

src/essentials/Colors/types.ts

@@ -37,6 +37,10 @@ export interface SemanticColorsSchema {
             default: Color,
             emphasized: Color,
         },
+        tertiary: {
+            default:Color,
+            disabled: Color,
+        },
         danger: {
             default: Color,
             emphasized: Color,
@@ -55,6 +59,7 @@ export interface SemanticColorsSchema {
             default: Color,
             emphasized: Color,
         },
+        highlight: Color,
         transparent: 'transparent',
     },
     icon: {