Apply new theme (#449)

* Apply new theme

* Fix storybook

* Fixes

* Fix regressions

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

@@ -0,0 +1,37 @@
+import DarkNoise from './assets/dark-noise.png';
+import LightNoise from './assets/light-noise.jpg';
+import { grayScale, rgba } from './colors';
+
+export const backgroundLight = {
+  noisy: `url(${LightNoise.toString()});`,
+  primary: grayScale.gray0,
+  secondary: grayScale.gray10,
+  tertiary: grayScale.gray15,
+  quaternary: grayScale.gray20,
+  transparent: {
+    primary: rgba(grayScale.gray0, 0.8),
+    secondary: rgba(grayScale.gray10, 0.8),
+    strong: rgba(grayScale.gray100, 0.16),
+    medium: rgba(grayScale.gray100, 0.08),
+    light: rgba(grayScale.gray100, 0.04),
+    lighter: rgba(grayScale.gray100, 0.02),
+  },
+  overlay: rgba(grayScale.gray80, 0.8),
+};
+
+export const backgroundDark = {
+  noisy: `url(${DarkNoise.toString()});`,
+  primary: grayScale.gray85,
+  secondary: grayScale.gray80,
+  tertiary: grayScale.gray75,
+  quaternary: grayScale.gray70,
+  transparent: {
+    primary: rgba(grayScale.gray85, 0.8),
+    secondary: rgba(grayScale.gray80, 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),
+};

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

@@ -0,0 +1,4 @@
+export const blur = {
+  light: 'blur(6px)',
+  strong: 'blur(20px)',
+};

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

@@ -0,0 +1,28 @@
+import { grayScale } from './colors';
+
+const common = {
+  radius: {
+    xs: '2px',
+    sm: '4px',
+    md: '8px',
+    rounded: '100%',
+  },
+};
+
+export const borderLight = {
+  color: {
+    strong: grayScale.gray25,
+    medium: grayScale.gray20,
+    light: grayScale.gray15,
+  },
+  ...common,
+};
+
+export const borderDark = {
+  color: {
+    strong: grayScale.gray60,
+    medium: grayScale.gray65,
+    light: grayScale.gray70,
+  },
+  ...common,
+};

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

@@ -0,0 +1,23 @@
+import { grayScale, rgba } from './colors';
+
+export const boxShadowLight = {
+  light: `0px 2px 4px 0px ${rgba(
+    grayScale.gray100,
+    0.04,
+  )}, 0px 0px 4px 0px ${rgba(grayScale.gray100, 0.08)}`,
+  strong: `2px 4px 16px 0px ${rgba(
+    grayScale.gray100,
+    0.12,
+  )}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.04)}`,
+};
+
+export const boxShadowDark = {
+  light: `0px 2px 4px 0px ${rgba(
+    grayScale.gray100,
+    0.04,
+  )}, 0px 0px 4px 0px ${rgba(grayScale.gray100, 0.08)}`,
+  strong: `2px 4px 16px 0px ${rgba(
+    grayScale.gray100,
+    0.16,
+  )}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.08)}`,
+};

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

@@ -0,0 +1,121 @@
+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',
+  gray40: '#999999',
+  gray35: '#b3b3b3',
+  gray30: '#cccccc',
+  gray25: '#d6d6d6',
+  gray20: '#ebebeb',
+  gray15: '#f5f5f5',
+  gray10: '#fcfcfc',
+  gray0: '#ffffff',
+};
+
+export const color = {
+  yellow: '#ffd338',
+  yellow80: '#2e2a1a',
+  yellow70: '#453d1e',
+  yellow60: '#746224',
+  yellow50: '#b99b2e',
+  yellow40: '#ffe074',
+  yellow30: '#ffedaf',
+  yellow20: '#fff6d7',
+  yellow10: '#fffbeb',
+  green: '#55ef3c',
+  green80: '#1d2d1b',
+  green70: '#23421e',
+  green60: '#2a5822',
+  green50: '#3f7d2e',
+  green40: '#7edc6a',
+  green30: '#b9f5a3',
+  green20: '#e0fbd1',
+  green10: '#f3fde9',
+  turquoise: '#15de8f',
+  turquoise80: '#1b2d26',
+  turquoise70: '#1f3f2b',
+  turquoise60: '#244f30',
+  turquoise50: '#2e6d3d',
+  turquoise40: '#5cbf7a',
+  turquoise30: '#9af0b0',
+  turquoise20: '#c9fbd9',
+  turquoise10: '#e8fde9',
+  sskyky: '#00e0ff',
+  sky80: '#1a2d2e',
+  sky70: '#1e3f40',
+  sky60: '#224f50',
+  sky50: '#2d6d6d',
+  sky40: '#5ac0c0',
+  sky30: '#97f0f0',
+  sky20: '#c5fbfb',
+  sky10: '#e4fdfd',
+  blue: '#1961ed',
+  blue80: '#1a1d2d',
+  blue70: '#1e203f',
+  blue60: '#22244f',
+  blue50: '#2d2e6d',
+  blue40: '#5a5ac0',
+  blue30: '#9797f0',
+  blue20: '#c5c5fb',
+  blue10: '#e4e4fd',
+  purple: '#915ffd',
+  purple80: '#2d1d2d',
+  purple70: '#3f203f',
+  purple60: '#502250',
+  purple50: '#6d2e6d',
+  purple40: '#bf5ac0',
+  purple30: '#f097f0',
+  purple20: '#fbc5fb',
+  purple10: '#fde4fd',
+  pink: '#f54bd0',
+  pink80: '#2d1a2d',
+  pink70: '#3f1e3f',
+  pink60: '#50224f',
+  pink50: '#6d2d6d',
+  pink40: '#bf5ac0',
+  pink30: '#f097f0',
+  pink20: '#fbc5fb',
+  pink10: '#fde4fd',
+  red: '#f83e3e',
+  red80: '#2d1a1a',
+  red70: '#3f1e1e',
+  red60: '#502222',
+  red50: '#6d2d2d',
+  red40: '#bf5a5a',
+  red30: '#f09797',
+  red20: '#fbc5c5',
+  red10: '#fde4e4',
+  orange: '#ff7222',
+  orange80: '#2d1a16',
+  orange70: '#3f1e19',
+  orange60: '#50221c',
+  orange50: '#6d2d2d',
+  orange40: '#bf5a5a',
+  orange30: '#f09797',
+  orange20: '#fbc5c5',
+  orange10: '#fde4e4',
+  gray: grayScale.gray30,
+  gray80: grayScale.gray65,
+  gray70: grayScale.gray60,
+  gray60: grayScale.gray50,
+  gray50: grayScale.gray40,
+  gray40: grayScale.gray25,
+  gray30: grayScale.gray20,
+  gray20: grayScale.gray15,
+  gray10: grayScale.gray10,
+};
+
+export function rgba(hex: string, alpha: number) {
+  const rgb = hexRgb(hex, { format: 'array' }).slice(0, -1).join(',');
+  return `rgba(${rgb},${alpha})`;
+}

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

@@ -0,0 +1,34 @@
+import { css } from '@emotion/react';
+
+import { ThemeType } from './themes';
+
+export const overlayBackground = (props: { theme: ThemeType }) =>
+  css`
+    backdrop-filter: blur(8px);
+    background: ${props.theme.background.transparent.secondary};
+    box-shadow: ${props.theme.boxShadow.strong};
+  `;
+
+export const textInputStyle = (props: any) =>
+  css`
+    background-color: transparent;
+    border: none;
+    color: ${props.theme.font.color.primary};
+    outline: none;
+    padding: ${props.theme.spacing(0)} ${props.theme.spacing(2)};
+
+    &::placeholder,
+    &::-webkit-input-placeholder {
+      color: ${props.theme.font.color.light};
+      font-family: ${props.theme.font.family};
+      font-weight: ${props.theme.font.weight.medium};
+    }
+  `;
+
+export const hoverBackground = (props: any) =>
+  css`
+    transition: background 0.1s ease;
+    &:hover {
+      background: ${props.theme.background.transparent.light};
+    }
+  `;

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

@@ -0,0 +1,42 @@
+import { grayScale } from './colors';
+
+const common = {
+  size: {
+    xs: '0.85rem',
+    sm: '0.92rem',
+    md: '1rem',
+    lg: '1.23rem',
+    xl: '1.54rem',
+    xxl: '1.85rem',
+  },
+  weight: {
+    regular: 400,
+    medium: 500,
+    semiBold: 600,
+  },
+  family: 'Inter, sans-serif',
+};
+
+export const fontLight = {
+  color: {
+    primary: grayScale.gray55,
+    secondary: grayScale.gray45,
+    tertiary: grayScale.gray40,
+    light: grayScale.gray35,
+    extraLight: grayScale.gray30,
+    inverted: grayScale.gray0,
+  },
+  ...common,
+};
+
+export const fontDark = {
+  color: {
+    primary: grayScale.gray30,
+    secondary: grayScale.gray40,
+    tertiary: grayScale.gray45,
+    light: grayScale.gray50,
+    extraLight: grayScale.gray55,
+    inverted: grayScale.gray100,
+  },
+  ...common,
+};

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

@@ -0,0 +1,12 @@
+export const icon = {
+  size: {
+    sm: 14,
+    md: 16,
+    lg: 20,
+  },
+  stroke: {
+    sm: 1.6,
+    md: 2,
+    lg: 2.5,
+  },
+};

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

@@ -0,0 +1,13 @@
+export const text = {
+  lineHeight: {
+    lg: 1.5,
+    md: 1.2,
+  },
+
+  iconSizeMedium: 16,
+  iconSizeSmall: 14,
+
+  iconStrikeLight: 1.6,
+  iconStrikeMedium: 2,
+  iconStrikeBold: 2.5,
+};

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

@@ -0,0 +1,47 @@
+import { backgroundDark, backgroundLight } from './background';
+import { blur } from './blur';
+import { borderDark, borderLight } from './border';
+import { boxShadowDark, boxShadowLight } from './boxShadow';
+import { color, grayScale } from './colors';
+import { fontDark, fontLight } from './font';
+import { icon } from './icon';
+import { text } from './text';
+
+const common = {
+  color: color,
+  grayScale: grayScale,
+  icon: icon,
+  text: text,
+  blur: blur,
+  spacing: (multiplicator: number) => `${multiplicator * 4}px`,
+  table: {
+    horizontalCellMargin: '8px',
+    checkboxColumnWidth: '32px',
+  },
+  rightDrawerWidth: '300px',
+  clickableElementBackgroundTransition: 'background 0.1s ease',
+  lastLayerZIndex: 2147483647,
+};
+
+export const lightTheme = {
+  ...common,
+  ...{
+    background: backgroundLight,
+    border: borderLight,
+    boxShadow: boxShadowLight,
+    font: fontLight,
+  },
+};
+export type ThemeType = typeof lightTheme;
+
+export const darkTheme: ThemeType = {
+  ...common,
+  ...{
+    background: backgroundDark,
+    border: borderDark,
+    boxShadow: boxShadowDark,
+    font: fontDark,
+  },
+};
+
+export const MOBILE_VIEWPORT = 768;