Split theme into files (#313)

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',
+};

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',
+};

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,
+};

front/src/modules/ui/layout/styles/colors/modal.ts

@@ -0,0 +1,3 @@
+export const modalColorsLight = {};
+
+export const modalColorsDark = {};

front/src/modules/ui/layout/styles/colors/palette.ts

@@ -0,0 +1 @@
+export const paletteColors = {};

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',
+};

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)',
+};

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};
+    }
+  `;

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%',
+};

front/src/modules/ui/layout/styles/themes.ts

@@ -1,23 +1,10 @@
-import { css } from '@emotion/react';
+import { commonColors, darkThemeColors, lightThemeColors } from './colors';
-
+import { commonText } from './texts';
-import DarkNoise from './dark-noise.jpg';
+export { hoverBackground, overlayBackground, textInputStyle } from './effects';
-import LightNoise from './light-noise.jpg';
 
 const commonTheme = {
-  fontSizeExtraSmall: '0.85rem',
+  ...commonText,
-  fontSizeSmall: '0.92rem',
+  ...commonColors,
-  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%',
 
   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()});`,
+  ...lightThemeColors,
-
-  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',
 
   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()});`,
+  ...darkThemeColors,
-  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',
 
   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 };