From 5921c7f11d6c551e784743875425d64846171e0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Fri, 16 Jun 2023 08:50:48 +0200 Subject: [PATCH] Split theme into files (#313) --- .../ui/layout/styles/colors/background.ts | 18 +++ .../modules/ui/layout/styles/colors/border.ts | 11 ++ .../modules/ui/layout/styles/colors/index.ts | 25 ++++ .../modules/ui/layout/styles/colors/modal.ts | 3 + .../ui/layout/styles/colors/palette.ts | 1 + .../modules/ui/layout/styles/colors/text.ts | 19 +++ .../ui/layout/styles/colors/transparent.ts | 17 +++ front/src/modules/ui/layout/styles/effects.ts | 31 +++++ front/src/modules/ui/layout/styles/texts.ts | 16 +++ front/src/modules/ui/layout/styles/themes.ts | 124 ++---------------- 10 files changed, 149 insertions(+), 116 deletions(-) create mode 100644 front/src/modules/ui/layout/styles/colors/background.ts create mode 100644 front/src/modules/ui/layout/styles/colors/border.ts create mode 100644 front/src/modules/ui/layout/styles/colors/index.ts create mode 100644 front/src/modules/ui/layout/styles/colors/modal.ts create mode 100644 front/src/modules/ui/layout/styles/colors/palette.ts create mode 100644 front/src/modules/ui/layout/styles/colors/text.ts create mode 100644 front/src/modules/ui/layout/styles/colors/transparent.ts create mode 100644 front/src/modules/ui/layout/styles/effects.ts create mode 100644 front/src/modules/ui/layout/styles/texts.ts diff --git a/front/src/modules/ui/layout/styles/colors/background.ts b/front/src/modules/ui/layout/styles/colors/background.ts new file mode 100644 index 0000000000..3c76520b07 --- /dev/null +++ b/front/src/modules/ui/layout/styles/colors/background.ts @@ -0,0 +1,18 @@ +import DarkNoise from './../dark-noise.jpg'; +import LightNoise from './../light-noise.jpg'; + +export const backgroundColorsLight = { + noisyBackground: `url(${LightNoise.toString()});`, + primaryBackground: '#fff', + secondaryBackground: '#fcfcfc', + tertiaryBackground: '#f5f5f5', + quaternaryBackground: '#ebebeb', +}; + +export const backgroundColorsDark = { + noisyBackground: `url(${DarkNoise.toString()});`, + primaryBackground: '#141414', + secondaryBackground: '#171717', + tertiaryBackground: '#1B1B1B', + quaternaryBackground: '#1D1D1D', +}; diff --git a/front/src/modules/ui/layout/styles/colors/border.ts b/front/src/modules/ui/layout/styles/colors/border.ts new file mode 100644 index 0000000000..8c65df11da --- /dev/null +++ b/front/src/modules/ui/layout/styles/colors/border.ts @@ -0,0 +1,11 @@ +export const borderColorsLight = { + primaryBorder: 'rgba(0, 0, 0, 0.08)', + lightBorder: 'rgba(245, 245, 245, 1)', + mediumBorder: '#ebebeb', +}; + +export const borderColorsDark = { + primaryBorder: 'rgba(255, 255, 255, 0.08)', + lightBorder: '#222222', + mediumBorder: '#141414', +}; diff --git a/front/src/modules/ui/layout/styles/colors/index.ts b/front/src/modules/ui/layout/styles/colors/index.ts new file mode 100644 index 0000000000..c7e44c4711 --- /dev/null +++ b/front/src/modules/ui/layout/styles/colors/index.ts @@ -0,0 +1,25 @@ +import { backgroundColorsDark, backgroundColorsLight } from './background'; +import { borderColorsDark, borderColorsLight } from './border'; +import { modalColorsDark, modalColorsLight } from './modal'; +import { textColorsDark, textColorsLight } from './text'; +import { transparentColorsDark, transparentColorsLight } from './transparent'; + +export const commonColors = { + ...backgroundColorsDark, +}; + +export const lightThemeColors = { + ...backgroundColorsLight, + ...borderColorsLight, + ...modalColorsLight, + ...textColorsLight, + ...transparentColorsLight, +}; + +export const darkThemeColors = { + ...backgroundColorsDark, + ...borderColorsDark, + ...modalColorsDark, + ...textColorsDark, + ...transparentColorsDark, +}; diff --git a/front/src/modules/ui/layout/styles/colors/modal.ts b/front/src/modules/ui/layout/styles/colors/modal.ts new file mode 100644 index 0000000000..9b5ceadac9 --- /dev/null +++ b/front/src/modules/ui/layout/styles/colors/modal.ts @@ -0,0 +1,3 @@ +export const modalColorsLight = {}; + +export const modalColorsDark = {}; diff --git a/front/src/modules/ui/layout/styles/colors/palette.ts b/front/src/modules/ui/layout/styles/colors/palette.ts new file mode 100644 index 0000000000..52aa092135 --- /dev/null +++ b/front/src/modules/ui/layout/styles/colors/palette.ts @@ -0,0 +1 @@ +export const paletteColors = {}; diff --git a/front/src/modules/ui/layout/styles/colors/text.ts b/front/src/modules/ui/layout/styles/colors/text.ts new file mode 100644 index 0000000000..4feaa88130 --- /dev/null +++ b/front/src/modules/ui/layout/styles/colors/text.ts @@ -0,0 +1,19 @@ +export const textColorsLight = { + text100: '#000', + text80: '#333333', + text60: '#666', + text40: '#999999', + text30: '#b3b3b3', + text20: '#cccccc', + text0: '#fff', +}; + +export const textColorsDark = { + text100: '#ffffff', + text80: '#cccccc', + text60: '#999', + text40: '#666', + text30: '#4c4c4c', + text20: '#333333', + text0: '#000', +}; diff --git a/front/src/modules/ui/layout/styles/colors/transparent.ts b/front/src/modules/ui/layout/styles/colors/transparent.ts new file mode 100644 index 0000000000..44d79060c5 --- /dev/null +++ b/front/src/modules/ui/layout/styles/colors/transparent.ts @@ -0,0 +1,17 @@ +export const transparentColorsLight = { + primaryBackgroundTransparent: 'rgba(255, 255, 255, 0.8)', + secondaryBackgroundTransparent: 'rgba(252, 252, 252, 0.8)', + strongBackgroundTransparent: 'rgba(0, 0, 0, 0.16)', + mediumBackgroundTransparent: 'rgba(0, 0, 0, 0.08)', + lightBackgroundTransparent: 'rgba(0, 0, 0, 0.04)', + lighterBackgroundTransparent: 'rgba(0, 0, 0, 0.02)', +}; + +export const transparentColorsDark = { + primaryBackgroundTransparent: 'rgba(20, 20, 20, 0.8)', + secondaryBackgroundTransparent: 'rgba(23, 23, 23, 0.8)', + strongBackgroundTransparent: 'rgba(255, 255, 255, 0.09)', + mediumBackgroundTransparent: 'rgba(255, 255, 255, 0.06)', + lightBackgroundTransparent: 'rgba(255, 255, 255, 0.03)', + lighterBackgroundTransparent: 'rgba(255, 255, 255, 0.02)', +}; diff --git a/front/src/modules/ui/layout/styles/effects.ts b/front/src/modules/ui/layout/styles/effects.ts new file mode 100644 index 0000000000..5b22136848 --- /dev/null +++ b/front/src/modules/ui/layout/styles/effects.ts @@ -0,0 +1,31 @@ +import { css } from '@emotion/react'; + +export const overlayBackground = (props: any) => + css` + backdrop-filter: blur(8px); + background: ${props.theme.secondaryBackgroundTransparent}; + box-shadow: ${props.theme.modalBoxShadow}; + `; + +export const textInputStyle = (props: any) => + css` + background-color: transparent; + border: none; + color: ${props.theme.text80}; + outline: none; + + &::placeholder, + &::-webkit-input-placeholder { + color: ${props.theme.text30}; + font-family: ${props.theme.fontFamily}; + font-weight: ${props.theme.fontWeightMedium}; + } + `; + +export const hoverBackground = (props: any) => + css` + transition: background 0.1s ease; + &:hover { + background: ${props.theme.lightBackgroundTransparent}; + } + `; diff --git a/front/src/modules/ui/layout/styles/texts.ts b/front/src/modules/ui/layout/styles/texts.ts new file mode 100644 index 0000000000..70da66cc58 --- /dev/null +++ b/front/src/modules/ui/layout/styles/texts.ts @@ -0,0 +1,16 @@ +export const commonText = { + fontSizeExtraSmall: '0.85rem', + fontSizeSmall: '0.92rem', + fontSizeMedium: '1rem', + fontSizeLarge: '1.08rem', + + iconSizeSmall: '0.92rem', + iconSizeMedium: '1.08rem', + iconSizeLarge: '1.23rem', + + fontWeightMedium: 500, + fontWeightSemibold: 600, + fontWeightBold: 700, + fontFamily: 'Inter, sans-serif', + lineHeight: '150%', +}; diff --git a/front/src/modules/ui/layout/styles/themes.ts b/front/src/modules/ui/layout/styles/themes.ts index 9f1c3ae00d..8b52c7ece7 100644 --- a/front/src/modules/ui/layout/styles/themes.ts +++ b/front/src/modules/ui/layout/styles/themes.ts @@ -1,23 +1,10 @@ -import { css } from '@emotion/react'; - -import DarkNoise from './dark-noise.jpg'; -import LightNoise from './light-noise.jpg'; +import { commonColors, darkThemeColors, lightThemeColors } from './colors'; +import { commonText } from './texts'; +export { hoverBackground, overlayBackground, textInputStyle } from './effects'; const commonTheme = { - fontSizeExtraSmall: '0.85rem', - fontSizeSmall: '0.92rem', - fontSizeMedium: '1rem', - fontSizeLarge: '1.08rem', - - iconSizeSmall: '0.92rem', - iconSizeMedium: '1.08rem', - iconSizeLarge: '1.23rem', - - fontWeightMedium: 500, - fontWeightSemibold: 600, - fontWeightBold: 700, - fontFamily: 'Inter, sans-serif', - lineHeight: '150%', + ...commonText, + ...commonColors, spacing: (multiplicator: number) => `${multiplicator * 4}px`, @@ -25,47 +12,14 @@ const commonTheme = { horizontalCellMargin: '8px', checkboxColumnWidth: '32px', }, - + clickableElementBackgroundTransition: 'background 0.1s ease', borderRadius: '4px', - rightDrawerWidth: '300px', - lastLayerZIndex: 2147483647, }; const lightThemeSpecific = { - noisyBackground: `url(${LightNoise.toString()});`, - - primaryBackground: '#fff', - secondaryBackground: '#fcfcfc', - tertiaryBackground: '#f5f5f5', - quaternaryBackground: '#ebebeb', - - pinkBackground: '#ffe5f4', - greenBackground: '#e6fff2', - purpleBackground: '#e0e0ff', - yellowBackground: '#fff2e7', - - primaryBackgroundTransparent: 'rgba(255, 255, 255, 0.8)', - secondaryBackgroundTransparent: 'rgba(252, 252, 252, 0.8)', - strongBackgroundTransparent: 'rgba(0, 0, 0, 0.16)', - mediumBackgroundTransparent: 'rgba(0, 0, 0, 0.08)', - lightBackgroundTransparent: 'rgba(0, 0, 0, 0.04)', - lighterBackgroundTransparent: 'rgba(0, 0, 0, 0.02)', - - primaryBorder: 'rgba(0, 0, 0, 0.08)', - lightBorder: 'rgba(245, 245, 245, 1)', - mediumBorder: '#ebebeb', - - clickableElementBackgroundTransition: 'background 0.1s ease', - - text100: '#000', - text80: '#333333', - text60: '#666', - text40: '#999999', - text30: '#b3b3b3', - text20: '#cccccc', - text0: '#fff', + ...lightThemeColors, blue: '#1961ed', pink: '#cc0078', @@ -76,44 +30,12 @@ const lightThemeSpecific = { blueHighTransparency: 'rgba(25, 97, 237, 0.03)', blueLowTransparency: 'rgba(25, 97, 237, 0.32)', - boxShadow: '0px 2px 4px 0px #0F0F0F0A', - modalBoxShadow: '0px 3px 12px rgba(0, 0, 0, 0.09)', }; const darkThemeSpecific: typeof lightThemeSpecific = { - noisyBackground: `url(${DarkNoise.toString()});`, - primaryBackground: '#141414', - secondaryBackground: '#171717', - tertiaryBackground: '#1B1B1B', - quaternaryBackground: '#1D1D1D', - - pinkBackground: '#cc0078', - greenBackground: '#1e7e50', - purpleBackground: '#1111b7', - yellowBackground: '#cc660a', - - primaryBackgroundTransparent: 'rgba(20, 20, 20, 0.8)', - secondaryBackgroundTransparent: 'rgba(23, 23, 23, 0.8)', - strongBackgroundTransparent: 'rgba(255, 255, 255, 0.09)', - mediumBackgroundTransparent: 'rgba(255, 255, 255, 0.06)', - lightBackgroundTransparent: 'rgba(255, 255, 255, 0.03)', - lighterBackgroundTransparent: 'rgba(255, 255, 255, 0.02)', - - clickableElementBackgroundTransition: 'background 0.1s ease', - - primaryBorder: 'rgba(255, 255, 255, 0.08)', - lightBorder: '#222222', - mediumBorder: '#141414', - - text100: '#ffffff', - text80: '#cccccc', - text60: '#999', - text40: '#666', - text30: '#4c4c4c', - text20: '#333333', - text0: '#000', + ...darkThemeColors, blue: '#6895ec', pink: '#ffe5f4', @@ -128,36 +50,6 @@ const darkThemeSpecific: typeof lightThemeSpecific = { modalBoxShadow: '0px 3px 12px rgba(0, 0, 0, 0.09)', // TODO change color for dark theme }; -export const overlayBackground = (props: any) => - css` - backdrop-filter: blur(8px); - background: ${props.theme.secondaryBackgroundTransparent}; - box-shadow: ${props.theme.modalBoxShadow}; - `; - -export const textInputStyle = (props: any) => - css` - background-color: transparent; - border: none; - color: ${props.theme.text80}; - outline: none; - - &::placeholder, - &::-webkit-input-placeholder { - color: ${props.theme.text30}; - font-family: ${props.theme.fontFamily}; - font-weight: ${props.theme.fontWeightMedium}; - } - `; - -export const hoverBackground = (props: any) => - css` - transition: background 0.1s ease; - &:hover { - background: ${props.theme.lightBackgroundTransparent}; - } - `; - export const lightTheme = { ...commonTheme, ...lightThemeSpecific }; export const darkTheme = { ...commonTheme, ...darkThemeSpecific };