Rework gray scale (#768)

* Rework gray scale

* Change grayscale AGAIN

* Change grayscale AGAIN

* Change grayscale AGAIN

front/src/modules/ui/color-scheme/components/ColorSchemeCard.tsx

@@ -29,7 +29,7 @@ const StyledColorSchemeBackground = styled.div<
   border: ${({ variant }) => {
     switch (variant) {
       case 'dark':
-        return `1px solid ${grayScale.gray65};`;
+        return `1px solid ${grayScale.gray70};`;
       case 'light':
       default:
         return `1px solid ${grayScale.gray20};`;
@@ -53,7 +53,7 @@ const StyledColorSchemeContent = styled(motion.div)<
   background: ${({ theme, variant }) => {
     switch (variant) {
       case 'dark':
-        return grayScale.gray70;
+        return grayScale.gray75;
       case 'light':
         return theme.color.gray0;
     }
@@ -62,7 +62,7 @@ const StyledColorSchemeContent = styled(motion.div)<
   border-left: ${({ variant }) => {
     switch (variant) {
       case 'dark':
-        return `1px solid ${grayScale.gray55};`;
+        return `1px solid ${grayScale.gray60};`;
       case 'light':
       default:
         return `1px solid ${grayScale.gray20};`;
@@ -72,7 +72,7 @@ const StyledColorSchemeContent = styled(motion.div)<
   border-top: ${({ variant }) => {
     switch (variant) {
       case 'dark':
-        return `1px solid ${grayScale.gray55};`;
+        return `1px solid ${grayScale.gray60};`;
       case 'light':
       default:
         return `1px solid ${grayScale.gray20};`;
@@ -85,7 +85,7 @@ const StyledColorSchemeContent = styled(motion.div)<
         return grayScale.gray30;
       case 'light':
       default:
-        return grayScale.gray55;
+        return grayScale.gray60;
     }
   }};
   display: flex;

front/src/modules/ui/themes/background.ts

@@ -16,22 +16,22 @@ export const backgroundLight = {
     light: rgba(grayScale.gray100, 0.04),
     lighter: rgba(grayScale.gray100, 0.02),
   },
-  overlay: rgba(grayScale.gray80, 0.8),
+  overlay: rgba(grayScale.gray85, 0.8),
 };
 
 export const backgroundDark = {
   noisy: `url(${DarkNoise.toString()});`,
-  primary: grayScale.gray85,
-  secondary: grayScale.gray80,
-  tertiary: grayScale.gray75,
-  quaternary: grayScale.gray70,
+  primary: grayScale.gray90,
+  secondary: grayScale.gray85,
+  tertiary: grayScale.gray80,
+  quaternary: grayScale.gray75,
   transparent: {
-    primary: rgba(grayScale.gray85, 0.8),
-    secondary: rgba(grayScale.gray80, 0.8),
+    primary: rgba(grayScale.gray90, 0.8),
+    secondary: rgba(grayScale.gray85, 0.8),
     strong: rgba(grayScale.gray0, 0.09),
     medium: rgba(grayScale.gray0, 0.06),
     light: rgba(grayScale.gray0, 0.03),
     lighter: rgba(grayScale.gray0, 0.02),
   },
-  overlay: rgba(grayScale.gray80, 0.8),
+  overlay: rgba(grayScale.gray85, 0.8),
 };

front/src/modules/ui/themes/border.ts

@@ -14,16 +14,16 @@ export const borderLight = {
     strong: grayScale.gray25,
     medium: grayScale.gray20,
     light: grayScale.gray15,
-    inverted: grayScale.gray55,
+    inverted: grayScale.gray60,
   },
   ...common,
 };
 
 export const borderDark = {
   color: {
-    strong: grayScale.gray60,
-    medium: grayScale.gray65,
-    light: grayScale.gray70,
+    strong: grayScale.gray65,
+    medium: grayScale.gray70,
+    light: grayScale.gray75,
     inverted: grayScale.gray30,
   },
   ...common,

front/src/modules/ui/themes/colors.ts

@@ -2,16 +2,17 @@ import hexRgb from 'hex-rgb';
 
 export const grayScale = {
   gray100: '#000000',
-  gray90: '#0f0f0f',
-  gray85: '#141414',
-  gray80: '#171717',
-  gray75: '#1b1b1b',
-  gray70: '#1d1d1d',
-  gray65: '#222222',
-  gray60: '#292929',
-  gray55: '#333333',
-  gray50: '#4c4c4c',
-  gray45: '#666666',
+  gray95: '#0f0f0f',
+  gray90: '#141414',
+  gray85: '#171717',
+  gray80: '#1b1b1b',
+  gray75: '#1d1d1d',
+  gray70: '#222222',
+  gray65: '#292929',
+  gray60: '#333333',
+  gray55: '#4c4c4c',
+  gray50: '#666666',
+  gray45: '#818181',
   gray40: '#999999',
   gray35: '#b3b3b3',
   gray30: '#cccccc',
@@ -106,9 +107,9 @@ export const color = {
   orange10: '#fde4e4',
   // TODO: Why color are not matching with design?
   gray: grayScale.gray30,
-  gray80: grayScale.gray65,
-  gray70: grayScale.gray60,
-  gray60: grayScale.gray50,
+  gray80: grayScale.gray70,
+  gray70: grayScale.gray65,
+  gray60: grayScale.gray55,
   gray50: grayScale.gray40,
   gray40: grayScale.gray25,
   gray30: grayScale.gray20,

front/src/modules/ui/themes/font.ts

@@ -20,8 +20,8 @@ const common = {
 
 export const fontLight = {
   color: {
-    primary: grayScale.gray55,
-    secondary: grayScale.gray45,
+    primary: grayScale.gray60,
+    secondary: grayScale.gray50,
     tertiary: grayScale.gray40,
     light: grayScale.gray35,
     extraLight: grayScale.gray30,
@@ -34,9 +34,9 @@ export const fontDark = {
   color: {
     primary: grayScale.gray30,
     secondary: grayScale.gray40,
-    tertiary: grayScale.gray45,
-    light: grayScale.gray50,
-    extraLight: grayScale.gray55,
+    tertiary: grayScale.gray50,
+    light: grayScale.gray55,
+    extraLight: grayScale.gray60,
     inverted: grayScale.gray100,
   },
   ...common,