feat: add missing colors to match Figma file (#289)

* feat: add missing colors to match Figma file

* refactor: use semantic colors in Dimming

* test: update snapshots to use the color in rgba format

Co-authored-by: Martí Malek <[email protected]>

Author: martimalek

src/components/Dimming/Dimming.tsx

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 
-import { Colors, Elevation } from '../../essentials';
+import { Elevation, SemanticColors } from '../../essentials';
 
 const Dimming = styled.div`
-    background-color: ${Colors.AUTHENTIC_BLUE_1100};
+    background-color: ${SemanticColors.dialog.dimming};
     height: 100%;
     left: 0;
     opacity: 0.6;

src/components/Modal/__snapshots__/Modal.spec.tsx.snap

@@ -55,7 +55,7 @@ exports[`Modal renders the default props 1`] = `
 }
 
 .c0 {
-  background-color: #000F1F;
+  background-color: rgba(0,15,31,0.6);
   height: 100%;
   left: 0;
   opacity: 0.6;
@@ -184,7 +184,7 @@ exports[`Modal renders the fullscreen variation 1`] = `
 }
 
 .c0 {
-  background-color: #000F1F;
+  background-color: rgba(0,15,31,0.6);
   height: 100%;
   left: 0;
   opacity: 0.6;

src/components/Offcanvas/__snapshots__/Offcanvas.spec.tsx.snap

@@ -59,7 +59,7 @@ exports[`Offcanvas renders the bottom side variation 1`] = `
 }
 
 .c0 {
-  background-color: #000F1F;
+  background-color: rgba(0,15,31,0.6);
   height: 100%;
   left: 0;
   opacity: 0.6;
@@ -192,7 +192,7 @@ exports[`Offcanvas renders the default props 1`] = `
 }
 
 .c0 {
-  background-color: #000F1F;
+  background-color: rgba(0,15,31,0.6);
   height: 100%;
   left: 0;
   opacity: 0.6;
@@ -325,7 +325,7 @@ exports[`Offcanvas renders the left side variation 1`] = `
 }
 
 .c0 {
-  background-color: #000F1F;
+  background-color: rgba(0,15,31,0.6);
   height: 100%;
   left: 0;
   opacity: 0.6;
@@ -458,7 +458,7 @@ exports[`Offcanvas renders the right side variation 1`] = `
 }
 
 .c0 {
-  background-color: #000F1F;
+  background-color: rgba(0,15,31,0.6);
   height: 100%;
   left: 0;
   opacity: 0.6;
@@ -591,7 +591,7 @@ exports[`Offcanvas renders the top side variation 1`] = `
 }
 
 .c0 {
-  background-color: #000F1F;
+  background-color: rgba(0,15,31,0.6);
   height: 100%;
   left: 0;
   opacity: 0.6;

src/essentials/Colors/Colors.ts

@@ -216,5 +216,64 @@ export const SemanticColors = {
             textDisabledInverted: Colors.AUTHENTIC_BLUE_550,
             iconDisabledInverted: Colors.AUTHENTIC_BLUE_550
         }
+    },
+    forms: {
+        toggle: {
+            default: {
+                slideOff: Colors.WHITE,
+                slideOn: Colors.WHITE,
+                frameOff: Colors.AUTHENTIC_BLUE_200,
+                frameOn: Colors.ACTION_BLUE_900
+            },
+            error: {
+                slideOff: Colors.WHITE,
+                slideOn: Colors.WHITE,
+                frameOff: Colors.AUTHENTIC_BLUE_200,
+                frameOn: Colors.NEGATIVE_ORANGE_900
+            },
+            disabled: {
+                slideOff: Colors.AUTHENTIC_BLUE_50,
+                slideOn: Colors.AUTHENTIC_BLUE_50,
+                frameOff: Colors.AUTHENTIC_BLUE_50,
+                frameOn: Colors.AUTHENTIC_BLUE_50
+            }
+        },
+        datePicker: {
+            calendar: {
+                border: Colors.AUTHENTIC_BLUE_200,
+                borderHover: Colors.AUTHENTIC_BLUE_200,
+                borderRange: Colors.ACTION_BLUE_350,
+                borderSelected: Colors.ACTION_BLUE_1000,
+                borderRangeHover: Colors.ACTION_BLUE_350,
+                background: Colors.WHITE,
+                backgroundHover: Colors.AUTHENTIC_BLUE_50,
+                backgroundRange: Colors.ACTION_BLUE_50,
+                backgroundSelected: Colors.ACTION_BLUE_900,
+                backgroundRangeHover: Colors.ACTION_BLUE_350
+            }
+        }
+    },
+    table: {
+        skeleton: Colors.AUTHENTIC_BLUE_50,
+        zebraStyles: {
+            backgroundSecondary: 'rgba(241, 242, 244, 0.4)',
+            backgroundHover: Colors.ACTION_BLUE_100,
+            backgroundActive: Colors.ACTION_BLUE_150
+        },
+        linesStyles: {
+            backgroundHover: Colors.ACTION_BLUE_50,
+            backgroundActive: Colors.ACTION_BLUE_100,
+            border: Colors.AUTHENTIC_BLUE_200
+        },
+        blank: {
+            backgroundHover: Colors.ACTION_BLUE_50,
+            backgroundActive: Colors.ACTION_BLUE_100
+        },
+        header: {
+            border: Colors.AUTHENTIC_BLUE_550
+        }
+    },
+    dialog: {
+        dimming: 'rgba(0, 15, 31, 0.6)'
     }
 };