Apply new theme (#449)

* Apply new theme

* Fix storybook

* Fixes

* Fix regressions

front/src/modules/ui/layout/DefaultLayout.tsx

@@ -5,12 +5,13 @@ import { currentUserState } from '@/auth/states/currentUserState';
 import { CommandMenu } from '@/command-menu/components/CommandMenu';
 import { AppNavbar } from '~/AppNavbar';
 
+import { MOBILE_VIEWPORT } from '../themes/themes';
+
 import { NavbarContainer } from './navbar/NavbarContainer';
 import { isNavbarOpenedState } from './states/isNavbarOpenedState';
-import { MOBILE_VIEWPORT } from './styles/themes';
 
 const StyledLayout = styled.div`
-  background: ${(props) => props.theme.noisyBackground};
+  background: ${({ theme }) => theme.background.noisy};
   display: flex;
   flex-direction: row;
   height: 100vh;

front/src/modules/ui/layout/Panel.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import styled from '@emotion/styled';
 
 const StyledPanel = styled.div`
-  background: ${(props) => props.theme.primaryBackground};
-  border: 1px solid ${(props) => props.theme.primaryBorder};
+  background: ${({ theme }) => theme.background.primary};
+  border: 1px solid ${({ theme }) => theme.border.color.light};
   border-radius: 8px;
   display: flex;
   flex-direction: row;

front/src/modules/ui/layout/containers/ContentContainer.tsx

@@ -11,16 +11,16 @@ type OwnProps = {
 };
 
 const MainContainer = styled.div<{ topMargin: number }>`
-  background: ${(props) => props.theme.noisyBackground};
+  background: ${({ theme }) => theme.background.noisy};
   display: flex;
 
   flex-direction: row;
-  gap: ${(props) => props.theme.spacing(2)};
+  gap: ${({ theme }) => theme.spacing(2)};
   height: calc(100% - ${(props) => props.topMargin}px);
 
-  padding-bottom: ${(props) => props.theme.spacing(3)};
-  padding-right: ${(props) => props.theme.spacing(3)};
-  width: calc(100% - ${(props) => props.theme.spacing(3)});
+  padding-bottom: ${({ theme }) => theme.spacing(3)};
+  padding-right: ${({ theme }) => theme.spacing(3)};
+  width: calc(100% - ${({ theme }) => theme.spacing(3)});
 `;
 
 type LeftContainerProps = {

front/src/modules/ui/layout/containers/NoTopBarContainer.tsx

@@ -8,7 +8,7 @@ type OwnProps = {
 
 const StyledContainer = styled.div`
   display: flex;
-  padding-top: ${(props) => props.theme.spacing(4)};
+  padding-top: ${({ theme }) => theme.spacing(4)};
   width: 100%;
 `;
 

front/src/modules/ui/layout/navbar/NavCollapseButton.tsx

@@ -5,16 +5,16 @@ import {
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarRightCollapse,
 } from '@/ui/icons';
+import { MOBILE_VIEWPORT } from '@/ui/themes/themes';
 
 import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
-import { MOBILE_VIEWPORT } from '../styles/themes';
 
 const CollapseButton = styled.button<{ hideOnDesktop: boolean | undefined }>`
   align-items: center;
   background: inherit;
   border: 0;
 
-  color: ${(props) => props.theme.text30};
+  color: ${({ theme }) => theme.font.color.light};
   cursor: pointer;
 
   display: flex;

front/src/modules/ui/layout/navbar/NavItem.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 
-import { MOBILE_VIEWPORT } from '../styles/themes';
+import { MOBILE_VIEWPORT } from '@/ui/themes/themes';
 
 type OwnProps = {
   label: string;
@@ -23,44 +23,45 @@ type StyledItemProps = {
 const StyledItem = styled.button<StyledItemProps>`
   align-items: center;
   background: ${(props) =>
-    props.active ? props.theme.lightBackgroundTransparent : 'inherit'};
+    props.active ? props.theme.background.transparent.light : 'inherit'};
   border: none;
   border-radius: 4px;
   color: ${(props) => {
     if (props.active) {
-      return props.theme.text80;
+      return props.theme.font.color.primary;
     }
     if (props.danger) {
-      return props.theme.red;
+      return props.theme.color.red;
     }
     if (props.soon) {
-      return props.theme.text20;
+      return props.theme.font.color.extraLight;
     }
-    return props.theme.text60;
+    return props.theme.font.color.secondary;
   }};
   cursor: ${(props) => (props.soon ? 'default' : 'pointer')};
   display: flex;
   font-family: 'Inter';
-  font-size: ${(props) => props.theme.fontSizeMedium};
-  margin-bottom: calc(${(props) => props.theme.spacing(1)} / 2);
-  padding-bottom: ${(props) => props.theme.spacing(1)};
-  padding-left: ${(props) => props.theme.spacing(1)};
-  padding-top: ${(props) => props.theme.spacing(1)};
+  font-size: ${({ theme }) => theme.font.size.md};
+  margin-bottom: calc(${({ theme }) => theme.spacing(1)} / 2);
+  padding-bottom: ${({ theme }) => theme.spacing(1)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
+  padding-top: ${({ theme }) => theme.spacing(1)};
   pointer-events: ${(props) => (props.soon ? 'none' : 'auto')};
   :hover {
-    background: ${(props) => props.theme.lightBackgroundTransparent};
-    color: ${(props) => (props.danger ? props.theme.red : props.theme.text80)};
+    background: ${({ theme }) => theme.background.transparent.light};
+    color: ${(props) =>
+      props.danger ? props.theme.color.red : props.theme.font.color.primary};
   }
   user-select: none;
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
-    font-size: ${(props) => props.theme.fontSizeLarge};
+    font-size: ${({ theme }) => theme.font.size.lg};
   }
 `;
 
 const StyledItemLabel = styled.div`
   display: flex;
-  margin-left: ${(props) => props.theme.spacing(2)};
+  margin-left: ${({ theme }) => theme.spacing(2)};
 `;
 
 const StyledSoonPill = styled.div`
@@ -68,11 +69,10 @@ const StyledSoonPill = styled.div`
   justify-content: center;
   align-items: center;
   border-radius: 50px;
-  background-color: ${(props) => props.theme.lightBackgroundTransparent};
-  font-size: ${(props) => props.theme.fontSizeExtraSmall};
-  padding: ${(props) => props.theme.spacing(1)}
-    ${(props) => props.theme.spacing(2)} ${(props) => props.theme.spacing(1)}
-    ${(props) => props.theme.spacing(2)};
+  background-color: ${({ theme }) => theme.background.transparent.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)}
+    ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
   margin-left: auto; // this aligns the pill to the right
 `;
 

front/src/modules/ui/layout/navbar/NavTitle.tsx

@@ -5,13 +5,13 @@ type OwnProps = {
 };
 
 const StyledTitle = styled.div`
-  color: ${(props) => props.theme.text30};
+  color: ${({ theme }) => theme.font.color.light};
   display: flex;
-  font-size: ${(props) => props.theme.fontSizeExtraSmall};
+  font-size: ${({ theme }) => theme.font.size.xs};
   font-weight: 600;
-  padding-bottom: ${(props) => props.theme.spacing(2)};
-  padding-left: ${(props) => props.theme.spacing(1)};
-  padding-top: ${(props) => props.theme.spacing(8)};
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
+  padding-top: ${({ theme }) => theme.spacing(8)};
   text-transform: uppercase;
 `;
 

front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx

@@ -13,9 +13,9 @@ const StyledContainer = styled.div`
   display: flex;
   height: 34px;
   justify-content: space-between;
-  margin-left: ${(props) => props.theme.spacing(1)};
-  padding: ${(props) => props.theme.spacing(2)};
-  padding-top: ${(props) => props.theme.spacing(1)};
+  margin-left: ${({ theme }) => theme.spacing(1)};
+  padding: ${({ theme }) => theme.spacing(2)};
+  padding-top: ${({ theme }) => theme.spacing(1)};
   user-select: none;
   width: 100%;
 `;
@@ -39,11 +39,11 @@ const StyledLogo = styled.div<StyledLogoProps>`
 `;
 
 const StyledName = styled.div`
-  color: ${(props) => props.theme.text80};
+  color: ${({ theme }) => theme.font.color.primary};
   font-family: 'Inter';
-  font-size: ${(props) => props.theme.fontSizeMedium};
+  font-size: ${({ theme }) => theme.font.size.md};
   font-weight: 500;
-  margin-left: ${(props) => props.theme.spacing(1)};
+  margin-left: ${({ theme }) => theme.spacing(1)};
 `;
 
 function NavWorkspaceButton() {

front/src/modules/ui/layout/navbar/NavbarContainer.tsx

@@ -1,13 +1,14 @@
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
+import { MOBILE_VIEWPORT } from '@/ui/themes/themes';
+
 import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
-import { MOBILE_VIEWPORT } from '../styles/themes';
 
 const StyledNavbarContainer = styled.div`
   flex-direction: column;
   width: ${(props) => (useRecoilValue(isNavbarOpenedState) ? 'auto' : '0')};
-  padding: ${(props) => props.theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(2)};
   flex-shrink: 0;
   overflow: hidden;
 

front/src/modules/ui/layout/navbar/sub-navbar/NavBackButton.tsx

@@ -13,14 +13,14 @@ const IconAndButtonContainer = styled.button`
   align-items: center;
   background: inherit;
   border: none;
-  color: ${(props) => props.theme.text60};
+  color: ${({ theme }) => theme.font.color.secondary};
   cursor: pointer;
   display: flex;
   flex-direction: row;
-  font-size: ${(props) => props.theme.fontSizeLarge};
-  font-weight: ${(props) => props.theme.fontWeightSemibold};
-  gap: ${(props) => props.theme.spacing(1)};
-  padding: ${(props) => props.theme.spacing(1)};
+  font-size: ${({ theme }) => theme.font.size.lg};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  gap: ${({ theme }) => theme.spacing(1)};
+  padding: ${({ theme }) => theme.spacing(1)};
   width: 100%;
 `;
 

front/src/modules/ui/layout/navbar/sub-navbar/SubNavBarContainer.tsx

@@ -11,7 +11,7 @@ const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
   padding-left: 300px;
-  padding-top: ${(props) => props.theme.spacing(6)};
+  padding-top: ${({ theme }) => theme.spacing(6)};
 `;
 
 const StyledNavItemsContainer = styled.div`

front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx

@@ -12,7 +12,7 @@ import { RightDrawerRouter } from './RightDrawerRouter';
 const StyledRightDrawer = styled.div`
   display: flex;
   flex-direction: row;
-  width: ${(props) => props.theme.rightDrawerWidth};
+  width: ${({ theme }) => theme.rightDrawerWidth};
 `;
 
 export function RightDrawer() {

front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx

@@ -4,8 +4,8 @@ import { RightDrawerTopBarCloseButton } from './RightDrawerTopBarCloseButton';
 
 const StyledRightDrawerTopBar = styled.div`
   align-items: center;
-  border-bottom: 1px solid ${(props) => props.theme.lightBorder};
-  color: ${(props) => props.theme.text60};
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  color: ${({ theme }) => theme.font.color.secondary};
   display: flex;
   flex-direction: row;
   font-size: 13px;
@@ -18,7 +18,7 @@ const StyledRightDrawerTopBar = styled.div`
 const StyledTopBarTitle = styled.div`
   align-items: center;
   font-weight: 500;
-  margin-right: ${(props) => props.theme.spacing(1)};
+  margin-right: ${({ theme }) => theme.spacing(1)};
 `;
 
 export function RightDrawerTopBar({

front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx

@@ -8,7 +8,7 @@ import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
 const StyledButton = styled.button`
   align-items: center;
   background: none;
-  border: 1px solid ${(props) => props.theme.lightBorder};
+  border: 1px solid ${({ theme }) => theme.border.color.light};
   border-radius: 4px;
   cursor: pointer;
   display: flex;
@@ -16,14 +16,14 @@ const StyledButton = styled.button`
   height: 24px;
   padding: 3px;
 
-  transition: ${(props) => props.theme.clickableElementBackgroundTransition};
+  transition: ${({ theme }) => theme.clickableElementBackgroundTransition};
 
   width: 24px;
   &:hover {
-    background: ${(props) => props.theme.lightBackgroundTransparent};
+    background: ${({ theme }) => theme.background.transparent.light};
   }
   svg {
-    color: ${(props) => props.theme.text40};
+    color: ${({ theme }) => theme.font.color.tertiary};
     transform: rotate(45deg);
   }
 `;

front/src/modules/ui/layout/states/isNavbarOpenedState.ts

@@ -1,6 +1,6 @@
 import { atom } from 'recoil';
 
-import { MOBILE_VIEWPORT } from '../styles/themes';
+import { MOBILE_VIEWPORT } from '@/ui/themes/themes';
 
 const isMobile = window.innerWidth <= MOBILE_VIEWPORT;
 

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

@@ -1,18 +0,0 @@
-import DarkNoise from '../assets/dark-noise.jpg';
-import LightNoise from '../assets/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

@@ -1,11 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

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

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

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

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

@@ -1,19 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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)',
-  modalBackgroundTransparent: 'rgba(23, 23, 23, 0.8)',
-};
-
-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)',
-  modalBackgroundTransparent: 'rgba(23, 23, 23, 0.8)',
-};

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

@@ -1,32 +0,0 @@
-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;
-    padding: ${props.theme.spacing(0)} ${props.theme.spacing(2)};
-
-    &::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

@@ -1,21 +0,0 @@
-export const commonText = {
-  fontSizeExtraSmall: '0.85rem',
-  fontSizeSmall: '0.92rem',
-  fontSizeMedium: '1rem',
-  fontSizeLarge: '1.23rem',
-  fontSizeExtraLarge: '1.54rem',
-
-  fontWeightMedium: 500,
-  fontWeightSemibold: 600,
-  fontWeightBold: 700,
-  fontFamily: 'Inter, sans-serif',
-
-  lineHeight: 1.5,
-
-  iconSizeMedium: 16,
-  iconSizeSmall: 14,
-
-  iconStrikeLight: 1.6,
-  iconStrikeMedium: 2,
-  iconStrikeBold: 2.5,
-};

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

@@ -1,67 +0,0 @@
-import { commonColors, darkThemeColors, lightThemeColors } from './colors';
-import { commonText } from './texts';
-export { hoverBackground, overlayBackground, textInputStyle } from './effects';
-
-const commonTheme = {
-  ...commonText,
-  ...commonColors,
-
-  spacing: (multiplicator: number) => `${multiplicator * 4}px`,
-
-  table: {
-    horizontalCellMargin: '8px',
-    checkboxColumnWidth: '32px',
-  },
-  clickableElementBackgroundTransition: 'background 0.1s ease',
-  borderRadius: '4px',
-  rightDrawerWidth: '300px',
-  lastLayerZIndex: 2147483647,
-};
-
-const lightThemeSpecific = {
-  ...lightThemeColors,
-
-  blue: '#1961ed',
-  pink: '#cc0078',
-  green: '#1e7e50',
-  purple: '#1111b7',
-  yellow: '#cc660a',
-  red: '#ff2e3f',
-
-  blueHighTransparency: 'rgba(25, 97, 237, 0.03)',
-  blueLowTransparency: 'rgba(25, 97, 237, 0.32)',
-  boxShadow: '0px 2px 4px 0px #0F0F0F0A',
-  modalBoxShadow:
-    '2px 4px 16px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.04)',
-  lightBoxShadow:
-    '0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 0px 4px 0px rgba(0, 0, 0, 0.08)',
-  heavyBoxShadow:
-    '0px 16px 40px 0px rgba(0, 0, 0, 0.24), 0px 0px 12px 0px rgba(0, 0, 0, 0.24)',
-};
-
-const darkThemeSpecific: typeof lightThemeSpecific = {
-  ...darkThemeColors,
-
-  blue: '#6895ec',
-  pink: '#ffe5f4',
-  green: '#e6fff2',
-  purple: '#e0e0ff',
-  yellow: '#fff2e7',
-  red: '#ff2e3f',
-
-  blueHighTransparency: 'rgba(104, 149, 236, 0.03)',
-  blueLowTransparency: 'rgba(104, 149, 236, 0.32)',
-  boxShadow: '0px 2px 4px 0px #0F0F0F0A', // TODO change color for dark theme
-  modalBoxShadow: '0px 3px 12px rgba(0, 0, 0, 0.09)', // TODO change color for dark theme
-  lightBoxShadow:
-    '0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 0px 4px 0px rgba(0, 0, 0, 0.08)',
-  heavyBoxShadow:
-    'box-shadow: 0px 16px 40px 0px rgba(0, 0, 0, 0.24), 0px 0px 12px 0px rgba(0, 0, 0, 0.24)',
-};
-
-export const lightTheme = { ...commonTheme, ...lightThemeSpecific };
-export const darkTheme = { ...commonTheme, ...darkThemeSpecific };
-
-export const MOBILE_VIEWPORT = 768;
-
-export type ThemeType = typeof lightTheme;

front/src/modules/ui/layout/top-bar/TopBar.tsx

@@ -10,13 +10,13 @@ export const TOP_BAR_MIN_HEIGHT = 40;
 
 const TopBarContainer = styled.div`
   align-items: center;
-  background: ${(props) => props.theme.noisyBackground};
-  color: ${(props) => props.theme.text80};
+  background: ${({ theme }) => theme.background.noisy};
+  color: ${({ theme }) => theme.font.color.primary};
   display: flex;
   flex-direction: row;
   font-size: 14px;
   min-height: ${TOP_BAR_MIN_HEIGHT}px;
-  padding: ${(props) => props.theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(2)};
 `;
 
 const TitleContainer = styled.div`
@@ -29,16 +29,16 @@ const TitleContainer = styled.div`
 
 const AddButtonContainer = styled.div`
   align-items: center;
-  border: 1px solid ${(props) => props.theme.primaryBorder};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: 4px;
-  color: ${(props) => props.theme.text40};
+  color: ${({ theme }) => theme.font.color.tertiary};
   cursor: pointer;
   display: flex;
   flex-shrink: 0;
   height: 28px;
   justify-content: center;
   justify-self: flex-end;
-  margin-right: ${(props) => props.theme.spacing(1)};
+  margin-right: ${({ theme }) => theme.spacing(1)};
   user-select: none;
   width: 28px;
 `;

front/src/modules/ui/layout/top-bar/TopTitle.tsx

@@ -10,8 +10,8 @@ const TitleAndCollapseContainer = styled.div`
 
 const TitleContainer = styled.div`
   display: flex;
-  font-size: ${(props) => props.theme.fontSizeLarge};
-  font-weight: ${(props) => props.theme.fontWeightSemibold};
+  font-size: ${({ theme }) => theme.font.size.lg};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
   width: 100%;
 `;