From 3336e6960d271935b1caae790d443d562d5262cf Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Wed, 19 Jul 2023 14:56:06 -0700 Subject: [PATCH] Rework gray scale (#768) * Rework gray scale * Change grayscale AGAIN * Change grayscale AGAIN * Change grayscale AGAIN --- .../components/ColorSchemeCard.tsx | 10 +++---- front/src/modules/ui/themes/background.ts | 16 +++++------ front/src/modules/ui/themes/border.ts | 8 +++--- front/src/modules/ui/themes/colors.ts | 27 ++++++++++--------- front/src/modules/ui/themes/font.ts | 10 +++---- 5 files changed, 36 insertions(+), 35 deletions(-) diff --git a/front/src/modules/ui/color-scheme/components/ColorSchemeCard.tsx b/front/src/modules/ui/color-scheme/components/ColorSchemeCard.tsx index 42d96e2e8..9e0127476 100644 --- a/front/src/modules/ui/color-scheme/components/ColorSchemeCard.tsx +++ b/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; diff --git a/front/src/modules/ui/themes/background.ts b/front/src/modules/ui/themes/background.ts index 3a21e30f3..10b7e5571 100644 --- a/front/src/modules/ui/themes/background.ts +++ b/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), }; diff --git a/front/src/modules/ui/themes/border.ts b/front/src/modules/ui/themes/border.ts index 22aa9ac95..97011a7ee 100644 --- a/front/src/modules/ui/themes/border.ts +++ b/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, diff --git a/front/src/modules/ui/themes/colors.ts b/front/src/modules/ui/themes/colors.ts index f5ba2eb27..b07b1af92 100644 --- a/front/src/modules/ui/themes/colors.ts +++ b/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, diff --git a/front/src/modules/ui/themes/font.ts b/front/src/modules/ui/themes/font.ts index 932b90484..b5bc16a17 100644 --- a/front/src/modules/ui/themes/font.ts +++ b/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,