Update color palette (#1226)

front/src/modules/ui/button/components/Button.tsx

@@ -104,7 +104,7 @@ const StyledButton = styled.button<
     if (disabled) {
       switch (variant) {
         case 'primary':
-          return theme.color.gray0;
+          return theme.grayScale.gray0;
         case 'danger':
           return theme.border.color.danger;
         default:
@@ -114,7 +114,7 @@ const StyledButton = styled.button<
 
     switch (variant) {
       case 'primary':
-        return theme.color.gray0;
+        return theme.grayScale.gray0;
       case 'tertiaryLight':
         return theme.font.color.tertiary;
       case 'danger':

front/src/modules/ui/checkmark/components/Checkmark.tsx

@@ -21,7 +21,7 @@ export function Checkmark(props: CheckmarkProps) {
 
   return (
     <StyledContainer {...props}>
-      <IconCheck color={theme.color.gray0} size={14} />
+      <IconCheck color={theme.grayScale.gray0} size={14} />
     </StyledContainer>
   );
 }

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

@@ -10,7 +10,6 @@ import {
 import { Checkmark } from '@/ui/checkmark/components/Checkmark';
 import DarkNoise from '@/ui/theme/assets/dark-noise.jpg';
 import LightNoise from '@/ui/theme/assets/light-noise.png';
-import { grayScale } from '@/ui/theme/constants/colors';
 import { ColorScheme } from '~/generated/graphql';
 
 const StyledColorSchemeBackground = styled.div<
@@ -26,13 +25,13 @@ const StyledColorSchemeBackground = styled.div<
         return `url(${LightNoise.toString()});`;
     }
   }};
-  border: ${({ variant }) => {
+  border: ${({ variant, theme }) => {
     switch (variant) {
       case 'dark':
-        return `1px solid ${grayScale.gray70};`;
+        return `1px solid ${theme.grayScale.gray70};`;
       case 'light':
       default:
-        return `1px solid ${grayScale.gray20};`;
+        return `1px solid ${theme.grayScale.gray20};`;
     }
   }};
   border-radius: ${({ theme }) => theme.border.radius.md};
@@ -53,39 +52,39 @@ const StyledColorSchemeContent = styled(motion.div)<
   background: ${({ theme, variant }) => {
     switch (variant) {
       case 'dark':
-        return grayScale.gray75;
+        return theme.grayScale.gray75;
       case 'light':
-        return theme.color.gray0;
+        return theme.grayScale.gray0;
     }
   }};
 
-  border-left: ${({ variant }) => {
+  border-left: ${({ variant, theme }) => {
     switch (variant) {
       case 'dark':
-        return `1px solid ${grayScale.gray60};`;
+        return `1px solid ${theme.grayScale.gray60};`;
       case 'light':
       default:
-        return `1px solid ${grayScale.gray20};`;
+        return `1px solid ${theme.grayScale.gray20};`;
     }
   }};
   border-radius: ${({ theme }) => theme.border.radius.md} 0px 0px 0px;
-  border-top: ${({ variant }) => {
+  border-top: ${({ variant, theme }) => {
     switch (variant) {
       case 'dark':
-        return `1px solid ${grayScale.gray60};`;
+        return `1px solid ${theme.grayScale.gray60};`;
       case 'light':
       default:
-        return `1px solid ${grayScale.gray20};`;
+        return `1px solid ${theme.grayScale.gray20};`;
     }
   }};
   box-sizing: border-box;
-  color: ${({ variant }) => {
+  color: ${({ variant, theme }) => {
     switch (variant) {
       case 'dark':
-        return grayScale.gray30;
+        return theme.grayScale.gray30;
       case 'light':
       default:
-        return grayScale.gray60;
+        return theme.grayScale.gray60;
     }
   }};
   display: flex;

front/src/modules/ui/input/radio/components/Radio.tsx

@@ -57,7 +57,7 @@ const RadioInput = styled(motion.input)<RadioInputProps>`
     background-color: ${({ theme }) => theme.color.blue};
     border: none;
     &::after {
-      background-color: ${({ theme }) => theme.color.gray0};
+      background-color: ${({ theme }) => theme.grayScale.gray0};
       border-radius: 50%;
       content: '';
       height: ${({ radioSize }) =>

front/src/modules/ui/snack-bar/components/SnackBar.tsx

@@ -34,7 +34,7 @@ const StyledMotionContainer = styled.div<Pick<SnackbarProps, 'variant'>>`
         return theme.snackBar.success.color;
       case 'info':
       default:
-        return theme.color.gray0;
+        return theme.grayScale.gray0;
     }
   }};
   cursor: pointer;
@@ -72,7 +72,7 @@ const CloseButton = styled.button<Pick<SnackbarProps, 'variant'>>`
         return theme.color.turquoise20;
       case 'info':
       default:
-        return theme.color.gray0;
+        return theme.grayScale.gray0;
     }
   }};
   cursor: pointer;
@@ -85,7 +85,7 @@ const CloseButton = styled.button<Pick<SnackbarProps, 'variant'>>`
   width: 24px;
 
   &:hover {
-    background-color: ${({ theme }) => rgba(theme.color.gray0, 0.1)};
+    background-color: ${({ theme }) => rgba(theme.grayScale.gray0, 0.1)};
   }
 `;
 
@@ -166,7 +166,7 @@ export function SnackBar({
         <ProgressBar
           ref={progressBarRef}
           barHeight={5}
-          barColor={rgba(theme.color.gray0, 0.3)}
+          barColor={rgba(theme.grayScale.gray0, 0.3)}
           duration={duration}
         />
       </ProgressBarContainer>

front/src/modules/ui/step-bar/components/Step.tsx

@@ -97,7 +97,10 @@ export const Step = ({
         animate={isActive ? 'active' : 'inactive'}
       >
         {isActive && (
-          <AnimatedCheckmark isAnimating={isActive} color={theme.color.gray0} />
+          <AnimatedCheckmark
+            isAnimating={isActive}
+            color={theme.grayScale.gray0}
+          />
         )}
         {!isActive && <StepIndex>{index + 1}</StepIndex>}
       </StepCircle>

front/src/modules/ui/theme/constants/background.ts

@@ -9,6 +9,7 @@ export const backgroundLight = {
   secondary: grayScale.gray10,
   tertiary: grayScale.gray15,
   quaternary: grayScale.gray20,
+  danger: color.red10,
   transparent: {
     primary: rgba(grayScale.gray0, 0.8),
     secondary: rgba(grayScale.gray10, 0.8),
@@ -27,6 +28,7 @@ export const backgroundDark = {
   secondary: grayScale.gray80,
   tertiary: grayScale.gray75,
   quaternary: grayScale.gray70,
+  danger: color.red80,
   transparent: {
     primary: rgba(grayScale.gray85, 0.8),
     secondary: rgba(grayScale.gray80, 0.8),

front/src/modules/ui/theme/constants/border.ts

@@ -1,4 +1,4 @@
-import { color, grayScale, rgba } from './colors';
+import { color, grayScale } from './colors';
 
 const common = {
   radius: {
@@ -16,7 +16,7 @@ export const borderLight = {
     light: grayScale.gray15,
     secondaryInverted: grayScale.gray50,
     inverted: grayScale.gray60,
-    danger: rgba(color.red, 0.14),
+    danger: color.red20,
   },
   ...common,
 };
@@ -28,7 +28,7 @@ export const borderDark = {
     light: grayScale.gray70,
     secondaryInverted: grayScale.gray35,
     inverted: grayScale.gray20,
-    danger: rgba(color.red, 0.14),
+    danger: color.red70,
   },
   ...common,
 };

front/src/modules/ui/theme/constants/colors.ts

@@ -36,75 +36,74 @@ export const color = {
   green80: '#1d2d1b',
   green70: '#23421e',
   green60: '#2a5822',
-  green50: '#3f7d2e',
-  green40: '#7edc6a',
-  green30: '#b9f5a3',
-  green20: '#e0fbd1',
-  green10: '#f3fde9',
+  green50: '#42ae31',
+  green40: '#88f477',
+  green30: '#ccfac5',
+  green20: '#ddfcd8',
+  green10: '#eefdec',
   turquoise: '#15de8f',
-  turquoise80: '#1b2d26',
-  turquoise70: '#1f3f2b',
-  turquoise60: '#244f30',
-  turquoise50: '#2e6d3d',
-  turquoise40: '#5cbf7a',
-  turquoise30: '#9af0b0',
-  turquoise20: '#c9fbd9',
-  turquoise10: '#e8fde9',
+  turquoise80: '#172b23',
+  turquoise70: '#173f2f',
+  turquoise60: '#166747',
+  turquoise50: '#16a26b',
+  turquoise40: '#5be8b1',
+  turquoise30: '#a1f2d2',
+  turquoise20: '#d0f8e9',
+  turquoise10: '#e8fcf4',
   sky: '#00e0ff',
-  sky80: '#1a2d2e',
-  sky70: '#1e3f40',
-  sky60: '#224f50',
-  sky50: '#2d6d6d',
-  sky40: '#5ac0c0',
-  sky30: '#97f0f0',
-  sky20: '#c5fbfb',
-  sky10: '#e4fdfd',
+  sky80: '#152b2e',
+  sky70: '#123f45',
+  sky60: '#0e6874',
+  sky50: '#07a4b9',
+  sky40: '#4de9ff',
+  sky30: '#99f3ff',
+  sky20: '#ccf9ff',
+  sky10: '#e5fcff',
   blue: '#1961ed',
-  blue80: '#1a1d2d',
-  blue70: '#1e203f',
-  blue60: '#22244f',
-  blue50: '#2d2e6d',
-  blue40: '#5a5ac0',
-  blue30: '#9797f0',
-  blue20: '#c5c5fb',
-  blue10: '#e4e4fd',
+  blue80: '#171e2c',
+  blue70: '#172642',
+  blue60: '#18356d',
+  blue50: '#184bad',
+  blue40: '#5e90f2',
+  blue30: '#a3c0f8',
+  blue20: '#d1dffb',
+  blue10: '#e8effd',
   purple: '#915ffd',
-  purple80: '#2d1d2d',
-  purple70: '#3f203f',
-  purple60: '#502250',
-  purple50: '#6d2e6d',
-  purple40: '#bf5ac0',
-  purple30: '#f097f0',
-  purple20: '#fbc5fb',
-  purple10: '#fde4fd',
+  purple80: '#231e2e',
+  purple70: '#2f2545',
+  purple60: '#483473',
+  purple50: '#6c49b8',
+  purple40: '#b28ffe',
+  purple30: '#d3bffe',
+  purple20: '#e9dfff',
+  purple10: '#f4efff',
   pink: '#f54bd0',
-  pink80: '#2d1a2d',
-  pink70: '#3f1e3f',
-  pink60: '#50224f',
-  pink50: '#6d2d6d',
-  pink40: '#bf5ac0',
-  pink30: '#f097f0',
-  pink20: '#fbc5fb',
-  pink10: '#fde4fd',
+  pink80: '#2d1c29',
+  pink70: '#43213c',
+  pink60: '#702c61',
+  pink50: '#b23b98',
+  pink40: '#f881de',
+  pink30: '#fbb7ec',
+  pink20: '#fddbf6',
+  pink10: '#feedfa',
   red: '#f83e3e',
-  red80: '#2d1a1a',
-  red70: '#3f1e1e',
-  red60: '#502222',
-  red50: '#6d2d2d',
-  red40: '#bf5a5a',
-  red30: '#f09797',
-  red20: '#fbc5c5',
-  red10: '#fde4e4',
+  red80: '#2d1b1b',
+  red70: '#441f1f',
+  red60: '#712727',
+  red50: '#b43232',
+  red40: '#fa7878',
+  red30: '#fcb2b2',
+  red20: '#fed8d8',
+  red10: '#feecec',
   orange: '#ff7222',
-  orange80: '#2d1a16',
-  orange70: '#3f1e19',
-  orange60: '#50221c',
-  orange50: '#6d2d2d',
-  orange40: '#bf5a5a',
-  orange30: '#f09797',
-  orange20: '#fbc5c5',
-  orange10: '#fde4e4',
-  // TODO: Why color are not matching with design?
+  orange80: '#2e2018',
+  orange70: '#452919',
+  orange60: '#743b1b',
+  orange50: '#b9571f',
+  orange40: '#ff9c64',
+  orange30: '#ffc7a7',
+  orange20: '#ffe3d3',
+  orange10: '#fff1e9',
   gray: grayScale.gray30,
   gray80: grayScale.gray70,
   gray70: grayScale.gray65,
@@ -114,7 +113,6 @@ export const color = {
   gray30: grayScale.gray20,
   gray20: grayScale.gray15,
   gray10: grayScale.gray10,
-  gray0: grayScale.gray0,
   blueAccent90: '#141a25',
   blueAccent85: '#151D2E',
   blueAccent80: '#152037',

front/src/modules/ui/theme/constants/font.ts

@@ -1,4 +1,4 @@
-import { grayScale } from './colors';
+import { color, grayScale } from './colors';
 
 const common = {
   size: {
@@ -26,6 +26,7 @@ export const fontLight = {
     light: grayScale.gray35,
     extraLight: grayScale.gray30,
     inverted: grayScale.gray0,
+    danger: color.red,
   },
   ...common,
 };
@@ -38,6 +39,7 @@ export const fontDark = {
     light: grayScale.gray50,
     extraLight: grayScale.gray55,
     inverted: grayScale.gray100,
+    danger: color.red,
   },
   ...common,
 };

front/src/modules/ui/theme/constants/theme.ts

@@ -28,7 +28,7 @@ const common = {
     },
     info: {
       background: color.gray80,
-      color: color.gray0,
+      color: grayScale.gray0,
     },
   },
   spacing: (multiplicator: number) => `${multiplicator * 4}px`,

front/src/modules/ui/tooltip/AppTooltip.tsx

@@ -16,7 +16,7 @@ export const AppTooltip = styled(Tooltip)`
   border-radius: ${({ theme }) => theme.border.radius.sm};
 
   box-shadow: ${({ theme }) => theme.boxShadow.light};
-  color: ${({ theme }) => theme.color.gray0};
+  color: ${({ theme }) => theme.grayScale.gray0};
 
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.regular};