Apply new theme (#449)

* Apply new theme

* Fix storybook

* Fixes

* Fix regressions

front/src/modules/comments/components/CommentChip.tsx

@@ -12,10 +12,10 @@ const StyledChip = styled.div`
   align-items: center;
   backdrop-filter: blur(6px);
 
-  background: ${(props) => props.theme.primaryBackgroundTransparent};
-  border-radius: ${(props) => props.theme.borderRadius};
+  background: ${({ theme }) => theme.background.transparent.primary};
+  border-radius: ${({ theme }) => theme.border.radius.md};
 
-  color: ${(props) => props.theme.text30};
+  color: ${({ theme }) => theme.font.color.light};
   cursor: pointer;
   display: flex;
   flex-direction: row;
@@ -31,8 +31,8 @@ const StyledChip = styled.div`
   padding-right: 4px;
 
   &:hover {
-    background: ${(props) => props.theme.tertiaryBackground};
-    color: ${(props) => props.theme.text40};
+    background: ${({ theme }) => theme.background.tertiary};
+    color: ${({ theme }) => theme.font.color.tertiary};
   }
 
   user-select: none;
@@ -56,7 +56,7 @@ export function CommentChip({ count, onClick }: CommentChipProps) {
   return (
     <StyledChip data-testid="comment-chip" onClick={onClick}>
       <StyledCount>{formattedCount}</StyledCount>
-      <IconComment size={theme.iconSizeMedium} />
+      <IconComment size={theme.icon.size.md} />
     </StyledChip>
   );
 }

front/src/modules/comments/components/CommentHeader.tsx

@@ -20,15 +20,15 @@ const StyledContainer = styled.div`
 
   flex-direction: row;
 
-  gap: ${(props) => props.theme.spacing(1)};
+  gap: ${({ theme }) => theme.spacing(1)};
 
   justify-content: flex-start;
 
-  padding: ${(props) => props.theme.spacing(1)};
+  padding: ${({ theme }) => theme.spacing(1)};
 `;
 
 const StyledName = styled.div`
-  color: ${(props) => props.theme.text80};
+  color: ${({ theme }) => theme.font.color.primary};
   font-size: 13px;
   font-weight: 400;
   max-width: 160px;
@@ -38,25 +38,25 @@ const StyledName = styled.div`
 `;
 
 const StyledDate = styled.div`
-  color: ${(props) => props.theme.text30};
+  color: ${({ theme }) => theme.font.color.light};
   font-size: 12px;
   font-weight: 400;
 
-  margin-left: ${(props) => props.theme.spacing(1)};
+  margin-left: ${({ theme }) => theme.spacing(1)};
 
   padding-top: 1.5px;
 `;
 
 const StyledTooltip = styled(Tooltip)`
-  background-color: ${(props) => props.theme.primaryBackground};
+  background-color: ${({ theme }) => theme.background.primary};
 
   box-shadow: 0px 2px 4px 3px
-    ${(props) => props.theme.lightBackgroundTransparent};
+    ${({ theme }) => theme.background.transparent.light};
 
   box-shadow: 2px 4px 16px 6px
-    ${(props) => props.theme.lightBackgroundTransparent};
+    ${({ theme }) => theme.background.transparent.light};
 
-  color: ${(props) => props.theme.text80};
+  color: ${({ theme }) => theme.font.color.primary};
 
   opacity: 1;
   padding: 8px;
@@ -81,7 +81,7 @@ export function CommentHeader({ comment }: OwnProps) {
     <StyledContainer>
       <Avatar
         avatarUrl={avatarUrl}
-        size={theme.iconSizeMedium}
+        size={theme.icon.size.md}
         placeholder={capitalizedFirstUsernameLetter}
       />
       <StyledName>{authorName}</StyledName>

front/src/modules/comments/components/CommentThread.tsx

@@ -28,10 +28,10 @@ const StyledContainer = styled.div`
 
   flex-direction: column;
 
-  gap: ${(props) => props.theme.spacing(4)};
+  gap: ${({ theme }) => theme.spacing(4)};
 
   justify-content: flex-start;
-  padding: ${(props) => props.theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(2)};
 `;
 
 const StyledThreadItemListContainer = styled.div`
@@ -39,7 +39,7 @@ const StyledThreadItemListContainer = styled.div`
   display: flex;
 
   flex-direction: column-reverse;
-  gap: ${(props) => props.theme.spacing(4)};
+  gap: ${({ theme }) => theme.spacing(4)};
 
   justify-content: flex-start;
 

front/src/modules/comments/components/CommentThreadCreateMode.tsx

@@ -27,12 +27,12 @@ const StyledContainer = styled.div`
   align-items: flex-start;
   display: flex;
   flex-direction: column;
-  gap: ${(props) => props.theme.spacing(4)};
+  gap: ${({ theme }) => theme.spacing(4)};
 
   justify-content: flex-start;
 
   max-height: calc(100% - 16px);
-  padding: ${(props) => props.theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(2)};
 `;
 
 const StyledThreadItemListContainer = styled.div`
@@ -40,7 +40,7 @@ const StyledThreadItemListContainer = styled.div`
   display: flex;
 
   flex-direction: column-reverse;
-  gap: ${(props) => props.theme.spacing(4)};
+  gap: ${({ theme }) => theme.spacing(4)};
 
   justify-content: flex-start;
   overflow: auto;

front/src/modules/comments/components/CommentThreadItem.tsx

@@ -12,15 +12,15 @@ const StyledContainer = styled.div`
   align-items: flex-start;
   display: flex;
   flex-direction: column;
-  gap: ${(props) => props.theme.spacing(1)};
+  gap: ${({ theme }) => theme.spacing(1)};
   justify-content: flex-start;
 `;
 
 const StyledCommentBody = styled.div`
-  color: ${(props) => props.theme.text60};
-  font-size: ${(props) => props.theme.fontSizeMedium};
+  color: ${({ theme }) => theme.font.color.secondary};
+  font-size: ${({ theme }) => theme.font.size.md};
 
-  line-height: ${(props) => props.theme.lineHeight};
+  line-height: ${({ theme }) => theme.text.lineHeight};
   overflow-wrap: anywhere;
 
   padding-left: 24px;

front/src/modules/comments/components/CommentThreadRelationPicker.tsx

@@ -36,7 +36,7 @@ const StyledContainer = styled.div`
   align-items: flex-start;
   display: flex;
   flex-direction: row;
-  gap: ${(props) => props.theme.spacing(2)};
+  gap: ${({ theme }) => theme.spacing(2)};
   justify-content: flex-start;
 
   width: 100%;
@@ -47,14 +47,14 @@ const StyledLabelContainer = styled.div`
   display: flex;
   flex-direction: row;
 
-  gap: ${(props) => props.theme.spacing(2)};
+  gap: ${({ theme }) => theme.spacing(2)};
 
-  padding-bottom: ${(props) => props.theme.spacing(2)};
-  padding-top: ${(props) => props.theme.spacing(2)};
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
+  padding-top: ${({ theme }) => theme.spacing(2)};
 `;
 
 const StyledRelationLabel = styled.div`
-  color: ${(props) => props.theme.text60};
+  color: ${({ theme }) => theme.font.color.secondary};
   display: flex;
   flex-direction: row;
 
@@ -62,8 +62,8 @@ const StyledRelationLabel = styled.div`
 `;
 
 const StyledRelationContainer = styled.div`
-  --horizontal-padding: ${(props) => props.theme.spacing(1)};
-  --vertical-padding: ${(props) => props.theme.spacing(1.5)};
+  --horizontal-padding: ${({ theme }) => theme.spacing(1)};
+  --vertical-padding: ${({ theme }) => theme.spacing(1.5)};
 
   border: 1px solid transparent;
 
@@ -72,11 +72,11 @@ const StyledRelationContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
 
-  gap: ${(props) => props.theme.spacing(2)};
+  gap: ${({ theme }) => theme.spacing(2)};
 
   &:hover {
-    background-color: ${(props) => props.theme.secondaryBackground};
-    border: 1px solid ${(props) => props.theme.lightBorder};
+    background-color: ${({ theme }) => theme.background.secondary};
+    border: 1px solid ${({ theme }) => theme.border.color.light};
   }
 
   min-height: calc(32px - 2 * var(--vertical-padding));
@@ -88,7 +88,7 @@ const StyledRelationContainer = styled.div`
 `;
 
 const StyledMenuWrapper = styled.div`
-  z-index: ${(props) => props.theme.lastLayerZIndex};
+  z-index: ${({ theme }) => theme.lastLayerZIndex};
 `;
 
 export function CommentThreadRelationPicker({ commentThread }: OwnProps) {
@@ -205,7 +205,7 @@ export function CommentThreadRelationPicker({ commentThread }: OwnProps) {
   return (
     <StyledContainer>
       <StyledLabelContainer>
-        <IconArrowUpRight size={16} color={theme.text40} />
+        <IconArrowUpRight size={16} color={theme.font.color.tertiary} />
         <StyledRelationLabel>Relations</StyledRelationLabel>
       </StyledLabelContainer>
       <StyledRelationContainer

front/src/modules/comments/components/__stories__/CommentChip.stories.tsx

@@ -16,7 +16,7 @@ type Story = StoryObj<typeof CellCommentChip>;
 
 const TestCellContainer = styled.div`
   align-items: center;
-  background: ${(props) => props.theme.primaryBackground};
+  background: ${({ theme }) => theme.background.primary};
   display: flex;
 
   height: fit-content;