diff --git a/front/.storybook/preview.ts b/front/.storybook/preview.ts index 80b20ded8..0a39fad8a 100644 --- a/front/.storybook/preview.ts +++ b/front/.storybook/preview.ts @@ -2,7 +2,7 @@ import { initialize, mswDecorator } from 'msw-storybook-addon'; import { Preview } from '@storybook/react'; import { ThemeProvider } from '@emotion/react'; import { withThemeFromJSXProvider } from "@storybook/addon-styling"; -import { lightTheme, darkTheme } from '../src/modules/ui/layout/styles/themes'; +import { lightTheme, darkTheme } from '../src/modules/ui/themes/themes'; initialize(); diff --git a/front/package.json b/front/package.json index 818067298..a7c7e5359 100644 --- a/front/package.json +++ b/front/package.json @@ -19,6 +19,7 @@ "cmdk": "^0.2.0", "date-fns": "^2.30.0", "graphql": "^16.6.0", + "hex-rgb": "^5.0.0", "js-cookie": "^3.0.5", "jwt-decode": "^3.1.2", "libphonenumber-js": "^1.10.26", diff --git a/front/src/AppNavbar.tsx b/front/src/AppNavbar.tsx index 206ce3a2b..eae338d8c 100644 --- a/front/src/AppNavbar.tsx +++ b/front/src/AppNavbar.tsx @@ -31,37 +31,37 @@ export function AppNavbar() { } + icon={} soon={true} /> } + icon={} soon={true} /> } + icon={} /> } + icon={} active={currentPath === '/people'} /> } + icon={} active={currentPath === '/companies'} /> } + icon={} active={currentPath === '/opportunities'} /> diff --git a/front/src/__stories__/shared.tsx b/front/src/__stories__/shared.tsx index 679667744..9b3093ec9 100644 --- a/front/src/__stories__/shared.tsx +++ b/front/src/__stories__/shared.tsx @@ -5,7 +5,7 @@ import { RecoilRoot, useRecoilState } from 'recoil'; import { currentUserState } from '@/auth/states/currentUserState'; import { isAuthenticatingState } from '@/auth/states/isAuthenticatingState'; -import { darkTheme } from '@/ui/layout/styles/themes'; +import { darkTheme } from '@/ui/themes/themes'; import { App } from '~/App'; import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout'; import { mockedUsersData } from '~/testing/mock-data/users'; diff --git a/front/src/index.tsx b/front/src/index.tsx index 7f180162f..70090c80f 100644 --- a/front/src/index.tsx +++ b/front/src/index.tsx @@ -2,9 +2,10 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import { RecoilRoot } from 'recoil'; +import { ThemeType } from '@/ui/themes/themes'; + import '@emotion/react'; -import { ThemeType } from './modules/ui/layout/styles/themes'; import { AppWrapper } from './AppWrapper'; import './index.css'; diff --git a/front/src/modules/auth/components/ui/FooterNote.tsx b/front/src/modules/auth/components/ui/FooterNote.tsx index d95015b96..026ed6695 100644 --- a/front/src/modules/auth/components/ui/FooterNote.tsx +++ b/front/src/modules/auth/components/ui/FooterNote.tsx @@ -7,9 +7,9 @@ type OwnProps = { const StyledContainer = styled.div` align-items: center; - color: ${({ theme }) => theme.text40}; + color: ${({ theme }) => theme.font.color.tertiary}; display: flex; - font-size: ${({ theme }) => theme.fontSizeSmall}px; + font-size: ${({ theme }) => theme.font.size.sm}px; padding-left: ${({ theme }) => theme.spacing(14)}; padding-right: ${({ theme }) => theme.spacing(14)}; text-align: center; diff --git a/front/src/modules/auth/components/ui/HorizontalSeparator.tsx b/front/src/modules/auth/components/ui/HorizontalSeparator.tsx index 1e0463029..d86c656fb 100644 --- a/front/src/modules/auth/components/ui/HorizontalSeparator.tsx +++ b/front/src/modules/auth/components/ui/HorizontalSeparator.tsx @@ -1,10 +1,10 @@ import styled from '@emotion/styled'; const Separator = styled.div` - background-color: ${(props) => props.theme.mediumBorder}; + background-color: ${({ theme }) => theme.border.color.medium}; height: 1px; - margin-bottom: ${(props) => props.theme.spacing(3)}; - margin-top: ${(props) => props.theme.spacing(3)}; + margin-bottom: ${({ theme }) => theme.spacing(3)}; + margin-top: ${({ theme }) => theme.spacing(3)}; width: 100%; `; diff --git a/front/src/modules/auth/components/ui/InputLabel.tsx b/front/src/modules/auth/components/ui/InputLabel.tsx index b03f0a921..39d8a0b70 100644 --- a/front/src/modules/auth/components/ui/InputLabel.tsx +++ b/front/src/modules/auth/components/ui/InputLabel.tsx @@ -6,7 +6,7 @@ type OwnProps = { }; const StyledContainer = styled.div` - font-weight: ${({ theme }) => theme.fontWeightMedium}; + font-weight: ${({ theme }) => theme.font.weight.medium}; margin-bottom: ${({ theme }) => theme.spacing(4)}; margin-top: ${({ theme }) => theme.spacing(4)}; `; diff --git a/front/src/modules/auth/components/ui/SubTitle.tsx b/front/src/modules/auth/components/ui/SubTitle.tsx index 4d52a2baf..013a40b54 100644 --- a/front/src/modules/auth/components/ui/SubTitle.tsx +++ b/front/src/modules/auth/components/ui/SubTitle.tsx @@ -6,7 +6,7 @@ type OwnProps = { }; const StyledSubTitle = styled.div` - color: ${({ theme }) => theme.text60}; + color: ${({ theme }) => theme.font.color.secondary}; margin-top: ${({ theme }) => theme.spacing(2)}; `; diff --git a/front/src/modules/auth/components/ui/Title.tsx b/front/src/modules/auth/components/ui/Title.tsx index 097af7b18..b32861632 100644 --- a/front/src/modules/auth/components/ui/Title.tsx +++ b/front/src/modules/auth/components/ui/Title.tsx @@ -6,8 +6,8 @@ type OwnProps = { }; const StyledTitle = styled.div` - font-size: ${({ theme }) => theme.fontSizeExtraLarge}; - font-weight: ${({ theme }) => theme.fontWeightSemibold}; + font-size: ${({ theme }) => theme.font.size.xl}; + font-weight: ${({ theme }) => theme.font.weight.semiBold}; margin-top: ${({ theme }) => theme.spacing(10)}; `; diff --git a/front/src/modules/command-menu/components/CommandMenuStyles.tsx b/front/src/modules/command-menu/components/CommandMenuStyles.tsx index 88909f42c..35a525536 100644 --- a/front/src/modules/command-menu/components/CommandMenuStyles.tsx +++ b/front/src/modules/command-menu/components/CommandMenuStyles.tsx @@ -2,10 +2,10 @@ import styled from '@emotion/styled'; import { Command } from 'cmdk'; export const StyledDialog = styled(Command.Dialog)` - background: ${(props) => props.theme.primaryBackground}; - border-radius: ${(props) => props.theme.borderRadius}; - box-shadow: ${(props) => props.theme.heavyBoxShadow}; - font-family: ${(props) => props.theme.fontFamily}; + background: ${({ theme }) => theme.background.primary}; + border-radius: ${({ theme }) => theme.border.radius.md}; + box-shadow: ${({ theme }) => theme.boxShadow.strong}; + font-family: ${({ theme }) => theme.font.family}; left: 50%; max-width: 640px; overflow: hidden; @@ -17,51 +17,51 @@ export const StyledDialog = styled(Command.Dialog)` `; export const StyledInput = styled(Command.Input)` - background: ${(props) => props.theme.primaryBackground}; + background: ${({ theme }) => theme.background.primary}; border: none; - border-bottom: 1px solid ${(props) => props.theme.primaryBorder}; + border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; border-radius: 0; - color: ${(props) => props.theme.text100}; - font-size: ${(props) => props.theme.fontSizeLarge}; + color: ${({ theme }) => theme.font.color.primary}; + font-size: ${({ theme }) => theme.font.size.lg}; margin: 0; outline: none; - padding: ${(props) => props.theme.spacing(5)}; + padding: ${({ theme }) => theme.spacing(5)}; width: 100%; `; export const StyledMenuItem = styled(Command.Item)` align-items: center; - color: ${(props) => props.theme.text80}; + color: ${({ theme }) => theme.font.color.primary}; cursor: pointer; display: flex; - font-size: ${(props) => props.theme.fontSizeMedium}; - gap: ${(props) => props.theme.spacing(3)}; + font-size: ${({ theme }) => theme.font.size.md}; + gap: ${({ theme }) => theme.spacing(3)}; height: 40px; justify-content: space-between; - padding: 0 ${(props) => props.theme.spacing(4)}; + padding: 0 ${({ theme }) => theme.spacing(4)}; position: relative; transition: all 150ms ease; transition-property: none; user-select: none; &:hover { - background: ${(props) => props.theme.lightBackgroundTransparent}; + background: ${({ theme }) => theme.background.transparent.light}; } &[data-selected='true'] { - background: ${(props) => props.theme.tertiaryBackground}; + background: ${({ theme }) => theme.background.tertiary}; /* Could be nice to add a caret like this for better accessibility in the future But it needs to be consistend with other picker dropdown (e.g. company) &:after { - background: ${(props) => props.theme.quaternaryBackground}; + background: ${({ theme }) => theme.background.quaternary}; content: ''; height: 100%; left: 0; position: absolute; width: 3px; - z-index: ${(props) => props.theme.lastLayerZIndex}; + z-index: ${({ theme }) => theme.lastLayerZIndex}; } */ } &[data-disabled='true'] { - color: ${(props) => props.theme.text30}; + color: ${({ theme }) => theme.font.color.light}; cursor: not-allowed; } svg { @@ -71,7 +71,7 @@ export const StyledMenuItem = styled(Command.Item)` `; export const StyledList = styled(Command.List)` - background: ${(props) => props.theme.secondaryBackground}; + background: ${({ theme }) => theme.background.secondary}; height: min(300px, var(--cmdk-list-height)); max-height: 400px; overflow: auto; @@ -83,14 +83,14 @@ export const StyledList = styled(Command.List)` export const StyledGroup = styled(Command.Group)` [cmdk-group-heading] { align-items: center; - color: ${(props) => props.theme.text30}; + color: ${({ theme }) => theme.font.color.light}; display: flex; - font-size: ${(props) => props.theme.fontSizeExtraSmall}; - font-weight: ${(props) => props.theme.fontWeightBold}; - padding-bottom: ${(props) => props.theme.spacing(2)}; - padding-left: ${(props) => props.theme.spacing(4)}; - padding-right: ${(props) => props.theme.spacing(4)}; - padding-top: ${(props) => props.theme.spacing(2)}; + font-size: ${({ theme }) => theme.font.size.xs}; + font-weight: ${({ theme }) => theme.font.weight.semiBold}; + padding-bottom: ${({ theme }) => theme.spacing(2)}; + padding-left: ${({ theme }) => theme.spacing(4)}; + padding-right: ${({ theme }) => theme.spacing(4)}; + padding-top: ${({ theme }) => theme.spacing(2)}; text-transform: uppercase; user-select: none; } @@ -98,9 +98,9 @@ export const StyledGroup = styled(Command.Group)` export const StyledEmpty = styled(Command.Empty)` align-items: center; - color: ${(props) => props.theme.text30}; + color: ${({ theme }) => theme.font.color.light}; display: flex; - font-size: ${(props) => props.theme.fontSizeMedium}; + font-size: ${({ theme }) => theme.font.size.md}; height: 64px; justify-content: center; white-space: pre-wrap; @@ -111,28 +111,28 @@ export const StyledSeparator = styled(Command.Separator)``; export const StyledIconAndLabelContainer = styled.div` align-items: center; display: flex; - gap: ${(props) => props.theme.spacing(2)}; + gap: ${({ theme }) => theme.spacing(2)}; `; export const StyledIconContainer = styled.div` align-items: center; - background: ${(props) => props.theme.lightBackgroundTransparent}; + background: ${({ theme }) => theme.background.transparent.light}; border-radius: 4px; - color: ${(props) => props.theme.text60}; + color: ${({ theme }) => theme.font.color.secondary}; display: flex; - padding: ${(props) => props.theme.spacing(1)}; + padding: ${({ theme }) => theme.spacing(1)}; `; export const StyledShortCut = styled.div` - background-color: ${(props) => props.theme.lightBackgroundTransparent}; + background-color: ${({ theme }) => theme.background.transparent.light}; border-radius: 4px; - color: ${(props) => props.theme.text30}; - margin-left: ${(props) => props.theme.spacing(1)}; - margin-right: ${(props) => props.theme.spacing(1)}; - padding: ${(props) => props.theme.spacing(1)}; + color: ${({ theme }) => theme.font.color.light}; + margin-left: ${({ theme }) => theme.spacing(1)}; + margin-right: ${({ theme }) => theme.spacing(1)}; + padding: ${({ theme }) => theme.spacing(1)}; `; export const StyledShortcutsContainer = styled.div` align-items: center; - color: ${(props) => props.theme.text30}; + color: ${({ theme }) => theme.font.color.light}; display: flex; - font-size: ${(props) => props.theme.fontSizeSmall}; + font-size: ${({ theme }) => theme.font.size.sm}; `; diff --git a/front/src/modules/comments/components/CommentChip.tsx b/front/src/modules/comments/components/CommentChip.tsx index 3b5dd6029..d40e01c34 100644 --- a/front/src/modules/comments/components/CommentChip.tsx +++ b/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 ( {formattedCount} - + ); } diff --git a/front/src/modules/comments/components/CommentHeader.tsx b/front/src/modules/comments/components/CommentHeader.tsx index c2690390a..bdbfba74b 100644 --- a/front/src/modules/comments/components/CommentHeader.tsx +++ b/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) { {authorName} diff --git a/front/src/modules/comments/components/CommentThread.tsx b/front/src/modules/comments/components/CommentThread.tsx index 328391e9e..1a0de664b 100644 --- a/front/src/modules/comments/components/CommentThread.tsx +++ b/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; diff --git a/front/src/modules/comments/components/CommentThreadCreateMode.tsx b/front/src/modules/comments/components/CommentThreadCreateMode.tsx index f5d82665c..98ba4c611 100644 --- a/front/src/modules/comments/components/CommentThreadCreateMode.tsx +++ b/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; diff --git a/front/src/modules/comments/components/CommentThreadItem.tsx b/front/src/modules/comments/components/CommentThreadItem.tsx index 67f423e8a..f4c40d27f 100644 --- a/front/src/modules/comments/components/CommentThreadItem.tsx +++ b/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; diff --git a/front/src/modules/comments/components/CommentThreadRelationPicker.tsx b/front/src/modules/comments/components/CommentThreadRelationPicker.tsx index 71bafc81f..475d4903a 100644 --- a/front/src/modules/comments/components/CommentThreadRelationPicker.tsx +++ b/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 ( - + Relations ; const TestCellContainer = styled.div` align-items: center; - background: ${(props) => props.theme.primaryBackground}; + background: ${({ theme }) => theme.background.primary}; display: flex; height: fit-content; diff --git a/front/src/modules/companies/components/CompanyChip.tsx b/front/src/modules/companies/components/CompanyChip.tsx index fc8ff3a6a..6bcf45f69 100644 --- a/front/src/modules/companies/components/CompanyChip.tsx +++ b/front/src/modules/companies/components/CompanyChip.tsx @@ -9,14 +9,14 @@ export type CompanyChipPropsType = { const StyledContainer = styled.span` align-items: center; - background-color: ${(props) => props.theme.tertiaryBackground}; - border-radius: ${(props) => props.theme.spacing(1)}; - color: ${(props) => props.theme.text80}; + background-color: ${({ theme }) => theme.background.tertiary}; + border-radius: ${({ theme }) => theme.spacing(1)}; + color: ${({ theme }) => theme.font.color.primary}; display: inline-flex; - gap: ${(props) => props.theme.spacing(1)}; - height: calc(20px - 2 * ${(props) => props.theme.spacing(1)}); + gap: ${({ theme }) => theme.spacing(1)}; + height: calc(20px - 2 * ${({ theme }) => theme.spacing(1)}); - padding: ${(props) => props.theme.spacing(1)}; + padding: ${({ theme }) => theme.spacing(1)}; user-select: none; diff --git a/front/src/modules/opportunities/components/CompanyBoardCard.tsx b/front/src/modules/opportunities/components/CompanyBoardCard.tsx index 0ce27c162..ac779a4a5 100644 --- a/front/src/modules/opportunities/components/CompanyBoardCard.tsx +++ b/front/src/modules/opportunities/components/CompanyBoardCard.tsx @@ -7,46 +7,46 @@ import { IconCalendarEvent, IconUser, IconUsers } from '../../ui/icons'; import { getLogoUrlFromDomainName, humanReadableDate } from '../../utils/utils'; const StyledBoardCard = styled.div` - background: ${({ theme }) => theme.secondaryBackground}; - border: 1px solid ${({ theme }) => theme.mediumBorder}; + background: ${({ theme }) => theme.background.secondary}; + border: 1px solid ${({ theme }) => theme.border.color.medium}; border-radius: 4px; - box-shadow: ${({ theme }) => theme.lightBoxShadow}; - color: ${({ theme }) => theme.text80}; + box-shadow: ${({ theme }) => theme.boxShadow.light}; + color: ${({ theme }) => theme.font.color.primary}; cursor: pointer; `; const StyledBoardCardWrapper = styled.div` - padding-bottom: ${(props) => props.theme.spacing(2)}; + padding-bottom: ${({ theme }) => theme.spacing(2)}; `; const StyledBoardCardHeader = styled.div` align-items: center; display: flex; flex-direction: row; - font-weight: ${(props) => props.theme.fontWeightBold}; + font-weight: ${({ theme }) => theme.font.weight.semiBold}; height: 24px; - padding-left: ${(props) => props.theme.spacing(2)}; - padding-right: ${(props) => props.theme.spacing(2)}; - padding-top: ${(props) => props.theme.spacing(2)}; + padding-left: ${({ theme }) => theme.spacing(2)}; + padding-right: ${({ theme }) => theme.spacing(2)}; + padding-top: ${({ theme }) => theme.spacing(2)}; img { - height: ${(props) => props.theme.iconSizeMedium}px; - margin-right: ${(props) => props.theme.spacing(2)}; + height: ${({ theme }) => theme.icon.size.md}px; + margin-right: ${({ theme }) => theme.spacing(2)}; object-fit: cover; - width: ${(props) => props.theme.iconSizeMedium}px; + width: ${({ theme }) => theme.icon.size.md}px; } `; const StyledBoardCardBody = styled.div` display: flex; flex-direction: column; - gap: ${(props) => props.theme.spacing(2)}; - padding: ${(props) => props.theme.spacing(2)}; + gap: ${({ theme }) => theme.spacing(2)}; + padding: ${({ theme }) => theme.spacing(2)}; span { align-items: center; display: flex; flex-direction: row; svg { - color: ${(props) => props.theme.text40}; - margin-right: ${(props) => props.theme.spacing(2)}; + color: ${({ theme }) => theme.font.color.tertiary}; + margin-right: ${({ theme }) => theme.spacing(2)}; } } `; @@ -70,14 +70,14 @@ export function CompanyBoardCard({ company }: { company: CompanyProp }) { - + - {company.employees} + {company.employees} - + {humanReadableDate(new Date(company.createdAt as string))} diff --git a/front/src/modules/people/components/PersonChip.tsx b/front/src/modules/people/components/PersonChip.tsx index 558e9d331..f4fb80f21 100644 --- a/front/src/modules/people/components/PersonChip.tsx +++ b/front/src/modules/people/components/PersonChip.tsx @@ -10,15 +10,15 @@ export type PersonChipPropsType = { const StyledContainer = styled.span` align-items: center; - background-color: ${(props) => props.theme.tertiaryBackground}; - border-radius: ${(props) => props.theme.spacing(1)}; - color: ${(props) => props.theme.text80}; + background-color: ${({ theme }) => theme.background.tertiary}; + border-radius: ${({ theme }) => theme.spacing(1)}; + color: ${({ theme }) => theme.font.color.primary}; display: inline-flex; - gap: ${(props) => props.theme.spacing(1)}; + gap: ${({ theme }) => theme.spacing(1)}; height: 12px; overflow: hidden; - padding: ${(props) => props.theme.spacing(1)}; + padding: ${({ theme }) => theme.spacing(1)}; :hover { filter: brightness(95%); diff --git a/front/src/modules/pipelines/components/PipelineChip.tsx b/front/src/modules/pipelines/components/PipelineChip.tsx index 47bfdd777..630f46e42 100644 --- a/front/src/modules/pipelines/components/PipelineChip.tsx +++ b/front/src/modules/pipelines/components/PipelineChip.tsx @@ -9,12 +9,12 @@ type OwnProps = { const StyledContainer = styled.span` align-items: center; - background-color: ${(props) => props.theme.tertiaryBackground}; - border-radius: ${(props) => props.theme.spacing(1)}; - color: ${(props) => props.theme.text80}; + background-color: ${({ theme }) => theme.background.tertiary}; + border-radius: ${({ theme }) => theme.spacing(1)}; + color: ${({ theme }) => theme.font.color.primary}; display: inline-flex; - gap: ${(props) => props.theme.spacing(1)}; - padding: ${(props) => props.theme.spacing(1)}; + gap: ${({ theme }) => theme.spacing(1)}; + padding: ${({ theme }) => theme.spacing(1)}; :hover { filter: brightness(95%); diff --git a/front/src/modules/relation-picker/components/SingleEntitySelect.tsx b/front/src/modules/relation-picker/components/SingleEntitySelect.tsx index 2b76f7a79..c4e39bff6 100644 --- a/front/src/modules/relation-picker/components/SingleEntitySelect.tsx +++ b/front/src/modules/relation-picker/components/SingleEntitySelect.tsx @@ -72,7 +72,7 @@ export function SingleEntitySelect< <> - + Create new diff --git a/front/src/modules/settings/components/SettingsNavbar.tsx b/front/src/modules/settings/components/SettingsNavbar.tsx index e67961aa5..a0ff6b609 100644 --- a/front/src/modules/settings/components/SettingsNavbar.tsx +++ b/front/src/modules/settings/components/SettingsNavbar.tsx @@ -31,7 +31,7 @@ export function SettingsNavbar() { } + icon={} active={ !!useMatch({ path: useResolvedPath('/people').pathname, @@ -42,7 +42,7 @@ export function SettingsNavbar() { } + icon={} soon={true} active={ !!useMatch({ @@ -55,7 +55,7 @@ export function SettingsNavbar() { } + icon={} soon={true} active={ !!useMatch({ @@ -68,7 +68,7 @@ export function SettingsNavbar() { } + icon={} danger={true} /> diff --git a/front/src/modules/ui/components/board/BoardColumn.tsx b/front/src/modules/ui/components/board/BoardColumn.tsx index 37f81f345..63ce17e9d 100644 --- a/front/src/modules/ui/components/board/BoardColumn.tsx +++ b/front/src/modules/ui/components/board/BoardColumn.tsx @@ -2,7 +2,7 @@ import React from 'react'; import styled from '@emotion/styled'; export const StyledColumn = styled.div` - background-color: ${({ theme }) => theme.primaryBackground}; + background-color: ${({ theme }) => theme.background.primary}; display: flex; flex-direction: column; min-width: 200px; @@ -12,10 +12,10 @@ export const StyledColumn = styled.div` export const StyledColumnTitle = styled.h3` color: ${({ color }) => color}; font-family: 'Inter'; - font-size: ${({ theme }) => theme.fontSizeMedium}; + font-size: ${({ theme }) => theme.font.size.md}; font-style: normal; - font-weight: ${({ theme }) => theme.fontWeightMedium}; - line-height: ${({ theme }) => theme.lineHeight}; + font-weight: ${({ theme }) => theme.font.weight.medium}; + line-height: ${({ theme }) => theme.text.lineHeight}; margin: 0; margin-bottom: ${({ theme }) => theme.spacing(2)}; `; diff --git a/front/src/modules/ui/components/board/NewButton.tsx b/front/src/modules/ui/components/board/NewButton.tsx index a7d0a79b2..21abc911f 100644 --- a/front/src/modules/ui/components/board/NewButton.tsx +++ b/front/src/modules/ui/components/board/NewButton.tsx @@ -6,18 +6,18 @@ import { IconPlus } from '@/ui/icons/index'; const StyledButton = styled.button` align-items: center; align-self: baseline; - background-color: ${({ theme }) => theme.primaryBackground}; + background-color: ${({ theme }) => theme.background.primary}; border: none; - border-radius: ${({ theme }) => theme.borderRadius}; - color: ${({ theme }) => theme.text40}; + border-radius: ${({ theme }) => theme.border.radius.md}; + color: ${({ theme }) => theme.font.color.tertiary}; cursor: pointer; display: flex; gap: ${({ theme }) => theme.spacing(1)}; justify-content: center; - padding: ${(props) => props.theme.spacing(1)}; + padding: ${({ theme }) => theme.spacing(1)}; &:hover { - background-color: ${({ theme }) => theme.secondaryBackground}; + background-color: ${({ theme }) => theme.background.secondary}; } `; @@ -30,7 +30,7 @@ export function NewButton({ onClick }: OwnProps) { return ( - + New ); diff --git a/front/src/modules/ui/components/buttons/IconButton.tsx b/front/src/modules/ui/components/buttons/IconButton.tsx index 75daa114c..70b79c90d 100644 --- a/front/src/modules/ui/components/buttons/IconButton.tsx +++ b/front/src/modules/ui/components/buttons/IconButton.tsx @@ -2,11 +2,11 @@ import styled from '@emotion/styled'; const StyledIconButton = styled.button` align-items: center; - background: ${(props) => props.theme.blue}; + background: ${({ theme }) => theme.color.blue}; border: none; border-radius: 50%; - color: ${(props) => props.theme.text0}; + color: ${({ theme }) => theme.font.color.inverted}; cursor: pointer; display: flex; @@ -19,8 +19,8 @@ const StyledIconButton = styled.button` width: 20px; &:disabled { - background: ${(props) => props.theme.quaternaryBackground}; - color: ${(props) => props.theme.text40}; + background: ${({ theme }) => theme.background.quaternary}; + color: ${({ theme }) => theme.font.color.tertiary}; cursor: default; } `; diff --git a/front/src/modules/ui/components/buttons/PrimaryButton.tsx b/front/src/modules/ui/components/buttons/PrimaryButton.tsx index 58922fb9b..beabf0b57 100644 --- a/front/src/modules/ui/components/buttons/PrimaryButton.tsx +++ b/front/src/modules/ui/components/buttons/PrimaryButton.tsx @@ -10,18 +10,19 @@ const StyledButton = styled.button<{ fullWidth: boolean }>` align-items: center; background: radial-gradient( 50% 62.62% at 50% 0%, - ${({ theme }) => theme.text60} 0%, - ${({ theme }) => theme.text80} 100% + ${({ theme }) => theme.font.color.secondary} 0%, + ${({ theme }) => theme.font.color.primary} 100% ); - border: 1px solid ${({ theme }) => theme.primaryBorder}; + border: 1px solid ${({ theme }) => theme.border.color.light}; border-radius: 8px; - box-shadow: 0px 0px 4px ${({ theme }) => theme.mediumBackgroundTransparent} 0%, - 0px 2px 4px ${({ theme }) => theme.lightBackgroundTransparent} 0%; - color: ${(props) => props.theme.text0}; + box-shadow: 0px 0px 4px ${({ theme }) => theme.background.transparent.medium} + 0%, + 0px 2px 4px ${({ theme }) => theme.background.transparent.light} 0%; + color: ${({ theme }) => theme.font.color.inverted}; cursor: pointer; display: flex; flex-direction: row; - font-weight: ${({ theme }) => theme.fontWeightBold}; + font-weight: ${({ theme }) => theme.font.weight.semiBold}; gap: ${({ theme }) => theme.spacing(2)}; justify-content: center; padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)}; diff --git a/front/src/modules/ui/components/buttons/SecondaryButton.tsx b/front/src/modules/ui/components/buttons/SecondaryButton.tsx index 9c7caf000..45cdb7fb8 100644 --- a/front/src/modules/ui/components/buttons/SecondaryButton.tsx +++ b/front/src/modules/ui/components/buttons/SecondaryButton.tsx @@ -8,16 +8,17 @@ type OwnProps = { const StyledButton = styled.button<{ fullWidth: boolean }>` align-items: center; - background: ${({ theme }) => theme.primaryBackground}; - border: 1px solid ${({ theme }) => theme.primaryBorder}; + background: ${({ theme }) => theme.background.primary}; + border: 1px solid ${({ theme }) => theme.border.color.light}; border-radius: 8px; - box-shadow: 0px 0px 4px ${({ theme }) => theme.mediumBackgroundTransparent} 0%, - 0px 2px 4px ${({ theme }) => theme.lightBackgroundTransparent} 0%; - color: ${(props) => props.theme.text80}; + box-shadow: 0px 0px 4px ${({ theme }) => theme.background.transparent.medium} + 0%, + 0px 2px 4px ${({ theme }) => theme.background.transparent.light} 0%; + color: ${({ theme }) => theme.font.color.primary}; cursor: pointer; display: flex; flex-direction: row; - font-weight: ${({ theme }) => theme.fontWeightBold}; + font-weight: ${({ theme }) => theme.font.weight.semiBold}; gap: 8px; justify-content: center; padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)}; @@ -25,7 +26,7 @@ const StyledButton = styled.button<{ fullWidth: boolean }>` width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')}; &:hover { - background: ${({ theme }) => theme.tertiaryBackground}; + background: ${({ theme }) => theme.background.tertiary}; } `; diff --git a/front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx b/front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx index c802f07ba..12879e791 100644 --- a/front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx +++ b/front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx @@ -6,19 +6,21 @@ export const EditableCellNormalModeOuterContainer = styled.div` display: flex; height: 100%; overflow: hidden; - padding-left: ${(props) => props.theme.spacing(2)}; + padding-left: ${({ theme }) => theme.spacing(2)}; - padding-right: ${(props) => props.theme.spacing(1)}; + padding-right: ${({ theme }) => theme.spacing(1)}; width: 100%; &:hover { - -moz-box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20}; + -moz-box-shadow: inset 0 0 0 1px + ${({ theme }) => theme.font.color.extraLight}; - -webkit-box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20}; - background: ${(props) => props.theme.secondaryBackgroundTransparent}; - border-radius: ${(props) => props.theme.borderRadius}; + -webkit-box-shadow: inset 0 0 0 1px + ${({ theme }) => theme.font.color.extraLight}; + background: ${({ theme }) => theme.background.transparent.secondary}; + border-radius: ${({ theme }) => theme.border.radius.md}; - box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20}; + box-shadow: inset 0 0 0 1px ${({ theme }) => theme.font.color.extraLight}; } `; diff --git a/front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx b/front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx index 496327ee9..13d781726 100644 --- a/front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx +++ b/front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx @@ -3,16 +3,16 @@ import { useHotkeys } from 'react-hotkeys-hook'; import styled from '@emotion/styled'; import { useRecoilState } from 'recoil'; +import { overlayBackground } from '@/ui/themes/effects'; import { debounce } from '@/utils/debounce'; import { useListenClickOutsideArrayOfRef } from '../../hooks/useListenClickOutsideArrayOfRef'; -import { overlayBackground } from '../../layout/styles/themes'; import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState'; export const EditableCellEditModeContainer = styled.div` align-items: center; - border: 1px solid ${(props) => props.theme.primaryBorder}; - border-radius: 4px; + border: 1px solid ${({ theme }) => theme.border.color.light}; + border-radius: ${({ theme }) => theme.border.radius.sm}; display: flex; left: ${(props) => props.editModeHorizontalAlign === 'right' ? 'auto' : '0'}; diff --git a/front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx b/front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx index 7e3207fc9..b753f80d8 100644 --- a/front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx +++ b/front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; export const HoverableMenuItem = styled.div` align-items: center; - background: ${(props) => props.theme.primaryBackground}; + background: ${({ theme }) => theme.background.primary}; border-radius: 4px; box-sizing: border-box; cursor: pointer; @@ -14,6 +14,6 @@ export const HoverableMenuItem = styled.div` width: 100%; &:hover { - background: ${(props) => props.theme.lightBackgroundTransparent}; + background: ${({ theme }) => theme.background.transparent.light}; } `; diff --git a/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx b/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx index 19febec63..f37ebcbe8 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx @@ -1,7 +1,7 @@ import { ChangeEvent, ComponentType, ReactNode, useRef, useState } from 'react'; import styled from '@emotion/styled'; -import { textInputStyle } from '@/ui/layout/styles/themes'; +import { textInputStyle } from '@/ui/themes/effects'; import { EditableCell } from '../EditableCell'; diff --git a/front/src/modules/ui/components/editable-cell/types/EditableDate.tsx b/front/src/modules/ui/components/editable-cell/types/EditableDate.tsx index 8e659d991..be2de36f5 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableDate.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableDate.tsx @@ -15,7 +15,7 @@ export type EditableDateProps = { const StyledContainer = styled.div` align-items: center; display: flex; - margin: 0px ${(props) => props.theme.spacing(2)}; + margin: 0px ${({ theme }) => theme.spacing(2)}; `; export type StyledCalendarContainerProps = { @@ -23,10 +23,10 @@ export type StyledCalendarContainerProps = { }; const StyledCalendarContainer = styled.div` - background: ${(props) => props.theme.secondaryBackground}; - border: 1px solid ${(props) => props.theme.primaryBorder}; + background: ${({ theme }) => theme.background.secondary}; + border: 1px solid ${({ theme }) => theme.border.color.light}; border-radius: 8px; - box-shadow: ${(props) => props.theme.modalBoxShadow}; + box-shadow: ${({ theme }) => theme.boxShadow.strong}; left: -10px; position: absolute; top: 10px; diff --git a/front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx b/front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx index 12e821f08..42d47ceab 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx @@ -1,7 +1,7 @@ import { ChangeEvent, ReactElement, useRef, useState } from 'react'; import styled from '@emotion/styled'; -import { textInputStyle } from '@/ui/layout/styles/themes'; +import { textInputStyle } from '@/ui/themes/effects'; import { EditableCell } from '../EditableCell'; @@ -20,8 +20,8 @@ const StyledContainer = styled.div` justify-content: space-between; & > input:last-child { - border-left: 1px solid ${(props) => props.theme.primaryBorder}; - padding-left: ${(props) => props.theme.spacing(2)}; + border-left: 1px solid ${({ theme }) => theme.border.color.medium}; + padding-left: ${({ theme }) => theme.spacing(2)}; } `; diff --git a/front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx b/front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx index 9d3a7c7dc..7772bfda1 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx @@ -2,7 +2,7 @@ import { ChangeEvent, MouseEvent, useRef, useState } from 'react'; import styled from '@emotion/styled'; import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js'; -import { textInputStyle } from '@/ui/layout/styles/themes'; +import { textInputStyle } from '@/ui/themes/effects'; import { RawLink } from '../../links/RawLink'; import { EditableCell } from '../EditableCell'; diff --git a/front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx b/front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx index 0954e6a69..f1ce9a4bd 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx @@ -8,12 +8,12 @@ export const EditableRelationCreateButton = styled.button` cursor: pointer; display: flex; font-family: 'Inter'; - font-size: ${(props) => props.theme.fontSizeMedium}; - gap: ${(props) => props.theme.spacing(2)}; + font-size: ${({ theme }) => theme.font.size.md}; + gap: ${({ theme }) => theme.spacing(2)}; height: 31px; - padding-bottom: ${(props) => props.theme.spacing(1)}; - padding-left: ${(props) => props.theme.spacing(1)}; - padding-top: ${(props) => props.theme.spacing(1)}; + padding-bottom: ${({ theme }) => theme.spacing(1)}; + padding-left: ${({ theme }) => theme.spacing(1)}; + padding-top: ${({ theme }) => theme.spacing(1)}; user-select: none; width: 100%; `; diff --git a/front/src/modules/ui/components/editable-cell/types/EditableText.tsx b/front/src/modules/ui/components/editable-cell/types/EditableText.tsx index 38a6e3c9b..a287240fe 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableText.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableText.tsx @@ -1,7 +1,7 @@ import { ChangeEvent, useRef, useState } from 'react'; import styled from '@emotion/styled'; -import { textInputStyle } from '@/ui/layout/styles/themes'; +import { textInputStyle } from '@/ui/themes/effects'; import { EditableCell } from '../EditableCell'; diff --git a/front/src/modules/ui/components/form/Checkbox.tsx b/front/src/modules/ui/components/form/Checkbox.tsx index 955792755..04bcf4a5d 100644 --- a/front/src/modules/ui/components/form/Checkbox.tsx +++ b/front/src/modules/ui/components/form/Checkbox.tsx @@ -15,7 +15,7 @@ const StyledContainer = styled.div` justify-content: center; input[type='checkbox'] { - accent-color: ${(props) => props.theme.blue}; + accent-color: ${({ theme }) => theme.color.blue}; cursor: pointer; height: 14px; margin: 2px; @@ -24,7 +24,7 @@ const StyledContainer = styled.div` } input[type='checkbox']::before { - border: 1px solid ${(props) => props.theme.text40}; + border: 1px solid ${({ theme }) => theme.font.color.tertiary}; border-radius: 2px; content: ''; display: block; @@ -33,11 +33,11 @@ const StyledContainer = styled.div` } input[type='checkbox']:hover::before { - border: 1px solid ${(props) => props.theme.text80}; + border: 1px solid ${({ theme }) => theme.font.color.primary}; } input[type='checkbox']:checked::before { - border: 1px solid ${(props) => props.theme.blue}; + border: 1px solid ${({ theme }) => theme.color.blue}; } `; diff --git a/front/src/modules/ui/components/form/DatePicker.tsx b/front/src/modules/ui/components/form/DatePicker.tsx index b36b6cf2b..a9cbf801b 100644 --- a/front/src/modules/ui/components/form/DatePicker.tsx +++ b/front/src/modules/ui/components/form/DatePicker.tsx @@ -2,7 +2,7 @@ import React, { forwardRef, ReactElement, useState } from 'react'; import ReactDatePicker, { CalendarContainerProps } from 'react-datepicker'; import styled from '@emotion/styled'; -import { overlayBackground } from '../../layout/styles/themes'; +import { overlayBackground } from '@/ui/themes/effects'; import 'react-datepicker/dist/react-datepicker.css'; @@ -16,10 +16,10 @@ export type DatePickerProps = { const StyledContainer = styled.div` & .react-datepicker { - border-color: ${(props) => props.theme.primaryBorder}; + border-color: ${({ theme }) => theme.border.color.light}; background: transparent; font-family: 'Inter'; - font-size: ${(props) => props.theme.fontSizeMedium}; + font-size: ${({ theme }) => theme.font.size.md}; border: none; display: block; font-weight: 400; @@ -49,19 +49,19 @@ const StyledContainer = styled.div` & .react-datepicker__header__dropdown { display: flex; - margin-left: ${(props) => props.theme.spacing(1)}; - margin-bottom: ${(props) => props.theme.spacing(1)}; + margin-left: ${({ theme }) => theme.spacing(1)}; + margin-bottom: ${({ theme }) => theme.spacing(1)}; } & .react-datepicker__month-dropdown-container, & .react-datepicker__year-dropdown-container { text-align: left; border-radius: 4px; - margin-left: ${(props) => props.theme.spacing(1)}; + margin-left: ${({ theme }) => theme.spacing(1)}; margin-right: 0; - padding: ${(props) => props.theme.spacing(2)}; - padding-right: ${(props) => props.theme.spacing(4)}; - background-color: ${(props) => props.theme.tertiaryBackground}; + padding: ${({ theme }) => theme.spacing(2)}; + padding-right: ${({ theme }) => theme.spacing(4)}; + background-color: ${({ theme }) => theme.background.tertiary}; } & .react-datepicker__month-read-view--down-arrow, @@ -69,14 +69,14 @@ const StyledContainer = styled.div` height: 5px; width: 5px; border-width: 1px 1px 0 0; - border-color: ${(props) => props.theme.text40}; + border-color: ${({ theme }) => theme.border.color.light}; top: 3px; right: -6px; } & .react-datepicker__year-read-view, & .react-datepicker__month-read-view { - padding-right: ${(props) => props.theme.spacing(2)}; + padding-right: ${({ theme }) => theme.spacing(2)}; } & .react-datepicker__month-dropdown-container { @@ -89,19 +89,19 @@ const StyledContainer = styled.div` & .react-datepicker__month-dropdown, & .react-datepicker__year-dropdown { - border: ${(props) => props.theme.primaryBorder}; + border: ${({ theme }) => theme.border.color.light}; ${overlayBackground} overflow-y: scroll; - top: ${(props) => props.theme.spacing(2)}; + top: ${({ theme }) => theme.spacing(2)}; } & .react-datepicker__month-dropdown { - left: ${(props) => props.theme.spacing(2)}; + left: ${({ theme }) => theme.spacing(2)}; width: 160px; height: 260px; } & .react-datepicker__year-dropdown { - left: calc(${(props) => props.theme.spacing(9)} + 80px); + left: calc(${({ theme }) => theme.spacing(9)} + 80px); width: 100px; height: 260px; } @@ -118,16 +118,16 @@ const StyledContainer = styled.div` & .react-datepicker__year-option, & .react-datepicker__month-option { text-align: left; - padding: ${(props) => props.theme.spacing(2)} - calc(${(props) => props.theme.spacing(2)} - 2px); - width: calc(100% - ${(props) => props.theme.spacing(4)}); + padding: ${({ theme }) => theme.spacing(2)} + calc(${({ theme }) => theme.spacing(2)} - 2px); + width: calc(100% - ${({ theme }) => theme.spacing(4)}); border-radius: 2px; - color: ${(props) => props.theme.text60}; + color: ${({ theme }) => theme.font.color.secondary}; cursor: pointer; margin: 2px; &:hover { - background: ${(props) => props.theme.lightBackgroundTransparent}; + background: ${({ theme }) => theme.background.transparent.light}; } &:first-of-type { @@ -144,7 +144,7 @@ const StyledContainer = styled.div` } & .react-datepicker__day-name { - color: ${(props) => props.theme.text60}; + color: ${({ theme }) => theme.font.color.secondary}; width: 34px; height: 40px; line-height: 40px; @@ -172,7 +172,7 @@ const StyledContainer = styled.div` border-radius: 4px; padding-top: 6px; &:hover { - background: ${(props) => props.theme.lightBackgroundTransparent}; + background: ${({ theme }) => theme.background.transparent.light}; } } & .react-datepicker__navigation--previous { @@ -198,7 +198,7 @@ const StyledContainer = styled.div` height: 7px; width: 7px; border-width: 1px 1px 0 0; - border-color: ${(props) => props.theme.text40}; + border-color: ${({ theme }) => theme.font.color.tertiary}; } & .react-datepicker__day--keyboard-selected { @@ -207,20 +207,20 @@ const StyledContainer = styled.div` & .react-datepicker__day, .react-datepicker__time-name { - color: ${(props) => props.theme.text80}; + color: ${({ theme }) => theme.font.color.primary}; } & .react-datepicker__day--selected { - background-color: ${(props) => props.theme.blue}; - color: ${(props) => props.theme.text0}; + background-color: ${({ theme }) => theme.color.blue}; + color: ${({ theme }) => theme.font.color.inverted}; } & .react-datepicker__day--outside-month { - color: ${(props) => props.theme.text40}; + color: ${({ theme }) => theme.font.color.tertiary}; } & .react-datepicker__day:hover { - color: ${(props) => props.theme.text40}; + color: ${({ theme }) => theme.font.color.tertiary}; } `; diff --git a/front/src/modules/ui/components/inputs/AutosizeTextInput.tsx b/front/src/modules/ui/components/inputs/AutosizeTextInput.tsx index 12864cb49..546f260bc 100644 --- a/front/src/modules/ui/components/inputs/AutosizeTextInput.tsx +++ b/front/src/modules/ui/components/inputs/AutosizeTextInput.tsx @@ -22,10 +22,10 @@ const StyledContainer = styled.div` `; const StyledTextArea = styled(TextareaAutosize)` - background: ${(props) => props.theme.tertiaryBackground}; + background: ${({ theme }) => theme.background.tertiary}; border: none; border-radius: 5px; - color: ${(props) => props.theme.text80}; + color: ${({ theme }) => theme.font.color.primary}; font-family: inherit; font-size: 13px; font-weight: 400; @@ -41,7 +41,7 @@ const StyledTextArea = styled(TextareaAutosize)` } &::placeholder { - color: ${(props) => props.theme.text30}; + color: ${({ theme }) => theme.font.color.light}; font-weight: 400; } `; diff --git a/front/src/modules/ui/components/inputs/DoubleTextInput.tsx b/front/src/modules/ui/components/inputs/DoubleTextInput.tsx index 9dfedab0d..995e190a7 100644 --- a/front/src/modules/ui/components/inputs/DoubleTextInput.tsx +++ b/front/src/modules/ui/components/inputs/DoubleTextInput.tsx @@ -1,8 +1,6 @@ import { ChangeEvent, useRef } from 'react'; import styled from '@emotion/styled'; -import { textInputStyle } from '../../layout/styles/themes'; - type OwnProps = { leftValue: string; rightValue: string; @@ -17,16 +15,14 @@ const StyledContainer = styled.div` justify-content: space-between; & > input:last-child { - border-left: 1px solid ${(props) => props.theme.primaryBorder}; - padding-left: ${(props) => props.theme.spacing(2)}; + border-left: 1px solid ${({ theme }) => theme.border.color.light}; + padding-left: ${({ theme }) => theme.spacing(2)}; } `; const StyledEditInplaceInput = styled.input` height: 18px; width: 45%; - - ${textInputStyle} `; export function DoubleTextInput({ diff --git a/front/src/modules/ui/components/inputs/TextInput.tsx b/front/src/modules/ui/components/inputs/TextInput.tsx index 30a259824..c1c4e9a59 100644 --- a/front/src/modules/ui/components/inputs/TextInput.tsx +++ b/front/src/modules/ui/components/inputs/TextInput.tsx @@ -10,22 +10,22 @@ type OwnProps = Omit< }; const StyledInput = styled.input<{ fullWidth: boolean }>` - background-color: ${({ theme }) => theme.lighterBackgroundTransparent}; - border: 1px solid ${({ theme }) => theme.lightBorder}; + background-color: ${({ theme }) => theme.background.transparent.lighter}; + border: 1px solid ${({ theme }) => theme.border.color.light}; border-radius: 4px; padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)}; - color: ${({ theme }) => theme.text80}; + color: ${({ theme }) => theme.font.color.primary}; outline: none; width: ${({ fullWidth, theme }) => fullWidth ? `calc(100% - ${theme.spacing(6)})` : 'auto'}; &::placeholder, &::-webkit-input-placeholder { - color: ${({ theme }) => theme.text30} - font-family: ${({ theme }) => theme.fontFamily};; - font-weight: ${({ theme }) => theme.fontWeightMedium}; + color: ${({ theme }) => theme.font.color.light} + font-family: ${({ theme }) => theme.font.family};; + font-weight: ${({ theme }) => theme.font.weight.medium}; } margin-bottom: ${({ theme }) => theme.spacing(3)}; `; diff --git a/front/src/modules/ui/components/links/PrimaryLink.tsx b/front/src/modules/ui/components/links/PrimaryLink.tsx index da65cdea6..4a8e3ee65 100644 --- a/front/src/modules/ui/components/links/PrimaryLink.tsx +++ b/front/src/modules/ui/components/links/PrimaryLink.tsx @@ -12,8 +12,8 @@ type OwnProps = { const StyledClickable = styled.div` display: flex; a { - color: ${({ theme }) => theme.text40}; - font-size: ${({ theme }) => theme.fontSizeSmall}; + color: ${({ theme }) => theme.font.color.tertiary}; + font-size: ${({ theme }) => theme.font.size.sm}; text-decoration: none; } `; diff --git a/front/src/modules/ui/components/menu/DropdownMenu.tsx b/front/src/modules/ui/components/menu/DropdownMenu.tsx index 1b83a562e..b76405196 100644 --- a/front/src/modules/ui/components/menu/DropdownMenu.tsx +++ b/front/src/modules/ui/components/menu/DropdownMenu.tsx @@ -4,11 +4,11 @@ export const DropdownMenu = styled.div` align-items: center; backdrop-filter: blur(20px); - background: ${(props) => props.theme.secondaryBackgroundTransparent}; - border: 1px solid ${(props) => props.theme.lightBorder}; - border-radius: calc(${(props) => props.theme.borderRadius} * 2); + background: ${({ theme }) => theme.background.transparent.secondary}; + border: 1px solid ${({ theme }) => theme.border.color.light}; + border-radius: ${({ theme }) => theme.border.radius.md}; - box-shadow: ${(props) => props.theme.modalBoxShadow}; + box-shadow: ${({ theme }) => theme.boxShadow.strong}; display: flex; diff --git a/front/src/modules/ui/components/menu/DropdownMenuButton.tsx b/front/src/modules/ui/components/menu/DropdownMenuButton.tsx index 382bd8cc4..3da1a16e3 100644 --- a/front/src/modules/ui/components/menu/DropdownMenuButton.tsx +++ b/front/src/modules/ui/components/menu/DropdownMenuButton.tsx @@ -1,23 +1,23 @@ import styled from '@emotion/styled'; -import { hoverBackground } from '@/ui/layout/styles/themes'; +import { hoverBackground } from '@/ui/themes/effects'; export const DropdownMenuButton = styled.div` - --horizontal-padding: ${(props) => props.theme.spacing(1.5)}; - --vertical-padding: ${(props) => props.theme.spacing(2)}; + --horizontal-padding: ${({ theme }) => theme.spacing(1.5)}; + --vertical-padding: ${({ theme }) => theme.spacing(2)}; align-items: center; - border-radius: ${(props) => props.theme.borderRadius}; - color: ${(props) => props.theme.text60}; + border-radius: ${({ theme }) => theme.border.radius.md}; + color: ${({ theme }) => theme.font.color.secondary}; cursor: pointer; display: flex; flex-direction: row; - font-size: ${(props) => props.theme.fontSizeSmall}; + font-size: ${({ theme }) => theme.font.size.sm}; - gap: ${(props) => props.theme.spacing(2)}; + gap: ${({ theme }) => theme.spacing(2)}; height: calc(32px - 2 * var(--vertical-padding)); diff --git a/front/src/modules/ui/components/menu/DropdownMenuCheckableItem.tsx b/front/src/modules/ui/components/menu/DropdownMenuCheckableItem.tsx index 03fbfaaf2..75b68588e 100644 --- a/front/src/modules/ui/components/menu/DropdownMenuCheckableItem.tsx +++ b/front/src/modules/ui/components/menu/DropdownMenuCheckableItem.tsx @@ -21,15 +21,15 @@ const StyledLeftContainer = styled.div` align-items: center; display: flex; - gap: ${(props) => props.theme.spacing(2)}; + gap: ${({ theme }) => theme.spacing(2)}; `; const StyledChildrenContainer = styled.div` align-items: center; display: flex; - font-size: ${(props) => props.theme.fontSizeSmall}; - gap: ${(props) => props.theme.spacing(2)}; + font-size: ${({ theme }) => theme.font.size.sm}; + gap: ${({ theme }) => theme.spacing(2)}; `; export function DropdownMenuCheckableItem({ diff --git a/front/src/modules/ui/components/menu/DropdownMenuItem.tsx b/front/src/modules/ui/components/menu/DropdownMenuItem.tsx index 5d28a421a..5ac1dbf56 100644 --- a/front/src/modules/ui/components/menu/DropdownMenuItem.tsx +++ b/front/src/modules/ui/components/menu/DropdownMenuItem.tsx @@ -1,19 +1,19 @@ import styled from '@emotion/styled'; export const DropdownMenuItem = styled.div` - --horizontal-padding: ${(props) => props.theme.spacing(1.5)}; - --vertical-padding: ${(props) => props.theme.spacing(2)}; + --horizontal-padding: ${({ theme }) => theme.spacing(1.5)}; + --vertical-padding: ${({ theme }) => theme.spacing(2)}; align-items: center; - border-radius: ${(props) => props.theme.borderRadius}; - color: ${(props) => props.theme.text60}; + border-radius: ${({ theme }) => theme.border.radius.sm}; + color: ${({ theme }) => theme.font.color.secondary}; display: flex; flex-direction: row; - font-size: ${(props) => props.theme.fontSizeSmall}; + font-size: ${({ theme }) => theme.font.size.sm}; - gap: ${(props) => props.theme.spacing(2)}; + gap: ${({ theme }) => theme.spacing(2)}; height: calc(32px - 2 * var(--vertical-padding)); diff --git a/front/src/modules/ui/components/menu/DropdownMenuItemContainer.tsx b/front/src/modules/ui/components/menu/DropdownMenuItemContainer.tsx index c923c868c..d3644127c 100644 --- a/front/src/modules/ui/components/menu/DropdownMenuItemContainer.tsx +++ b/front/src/modules/ui/components/menu/DropdownMenuItemContainer.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; export const DropdownMenuItemContainer = styled.div` - --padding: ${(props) => props.theme.spacing(1 / 2)}; + --padding: ${({ theme }) => theme.spacing(1 / 2)}; align-items: flex-start; display: flex; diff --git a/front/src/modules/ui/components/menu/DropdownMenuSearch.tsx b/front/src/modules/ui/components/menu/DropdownMenuSearch.tsx index cbe65b125..31c46801f 100644 --- a/front/src/modules/ui/components/menu/DropdownMenuSearch.tsx +++ b/front/src/modules/ui/components/menu/DropdownMenuSearch.tsx @@ -1,13 +1,13 @@ import { InputHTMLAttributes } from 'react'; import styled from '@emotion/styled'; -import { textInputStyle } from '@/ui/layout/styles/themes'; +import { textInputStyle } from '@/ui/themes/effects'; export const DropdownMenuSearchContainer = styled.div` - --vertical-padding: ${(props) => props.theme.spacing(1)}; + --vertical-padding: ${({ theme }) => theme.spacing(1)}; align-items: center; - border-bottom: 1px solid ${(props) => props.theme.lightBorder}; + border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; display: flex; flex-direction: row; @@ -18,7 +18,7 @@ export const DropdownMenuSearchContainer = styled.div` `; const StyledEditModeSearchInput = styled.input` - font-size: ${(props) => props.theme.fontSizeSmall}; + font-size: ${({ theme }) => theme.font.size.sm}; ${textInputStyle} diff --git a/front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx b/front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx index b94637323..836fd2782 100644 --- a/front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx +++ b/front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx @@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { IconCheck } from '@/ui/icons/index'; -import { hoverBackground } from '@/ui/layout/styles/themes'; +import { hoverBackground } from '@/ui/themes/effects'; import { DropdownMenuButton } from './DropdownMenuButton'; @@ -19,7 +19,7 @@ const DropdownMenuSelectableItemContainer = styled(DropdownMenuButton)` align-items: center; background: ${(props) => - props.hovered ? props.theme.lightBackgroundTransparent : 'transparent'}; + props.hovered ? props.theme.background.transparent.light : 'transparent'}; display: flex; justify-content: space-between; @@ -29,7 +29,7 @@ const StyledLeftContainer = styled.div` align-items: center; display: flex; - gap: ${(props) => props.theme.spacing(2)}; + gap: ${({ theme }) => theme.spacing(2)}; `; const StyledRightIcon = styled.div` @@ -61,7 +61,7 @@ export function DropdownMenuSelectableItem({ > {children} - {selected && } + {selected && } ); diff --git a/front/src/modules/ui/components/menu/DropdownMenuSeparator.tsx b/front/src/modules/ui/components/menu/DropdownMenuSeparator.tsx index 7f8695d4e..3a31294b0 100644 --- a/front/src/modules/ui/components/menu/DropdownMenuSeparator.tsx +++ b/front/src/modules/ui/components/menu/DropdownMenuSeparator.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; export const DropdownMenuSeparator = styled.div` - background-color: ${(props) => props.theme.lightBorder}; + background-color: ${({ theme }) => theme.border.color.light}; height: 1px; width: 100%; diff --git a/front/src/modules/ui/components/modal/Modal.tsx b/front/src/modules/ui/components/modal/Modal.tsx index 925f11a59..caa5826a2 100644 --- a/front/src/modules/ui/components/modal/Modal.tsx +++ b/front/src/modules/ui/components/modal/Modal.tsx @@ -10,7 +10,7 @@ export function Modal({ children }: { children: React.ReactNode }) { ariaHideApp={false} style={{ overlay: { - backgroundColor: theme.modalBackgroundTransparent, + backgroundColor: theme.background.overlay, zIndex: 2, display: 'flex', justifyContent: 'center', diff --git a/front/src/modules/ui/components/section-titles/MainSectionTitle.tsx b/front/src/modules/ui/components/section-titles/MainSectionTitle.tsx index 78a357654..1065cd368 100644 --- a/front/src/modules/ui/components/section-titles/MainSectionTitle.tsx +++ b/front/src/modules/ui/components/section-titles/MainSectionTitle.tsx @@ -6,9 +6,9 @@ type OwnProps = { }; const StyledMainSectionTitle = styled.h2` - color: ${({ theme }) => theme.text80}; - font-size: ${({ theme }) => theme.fontSizeExtraLarge}; - font-weight: ${({ theme }) => theme.fontWeightBold}; + color: ${({ theme }) => theme.font.color.primary}; + font-size: ${({ theme }) => theme.font.size.xl}; + font-weight: ${({ theme }) => theme.font.weight.semiBold}; line-height: 1.5; `; diff --git a/front/src/modules/ui/components/section-titles/SubSectionTitle.tsx b/front/src/modules/ui/components/section-titles/SubSectionTitle.tsx index d850f3b25..18a194057 100644 --- a/front/src/modules/ui/components/section-titles/SubSectionTitle.tsx +++ b/front/src/modules/ui/components/section-titles/SubSectionTitle.tsx @@ -6,9 +6,9 @@ type OwnProps = { }; const StyledSubSectionTitle = styled.h2` - color: ${({ theme }) => theme.text80}; - font-size: ${({ theme }) => theme.fontSizeMedium}; - font-weight: ${({ theme }) => theme.fontWeightBold}; + color: ${({ theme }) => theme.font.color.primary}; + font-size: ${({ theme }) => theme.font.size.md}; + font-weight: ${({ theme }) => theme.font.weight.semiBold}; line-height: 1.5; `; diff --git a/front/src/modules/ui/components/table/ColumnHead.tsx b/front/src/modules/ui/components/table/ColumnHead.tsx index ed8fd0e07..667e6f605 100644 --- a/front/src/modules/ui/components/table/ColumnHead.tsx +++ b/front/src/modules/ui/components/table/ColumnHead.tsx @@ -11,13 +11,13 @@ const StyledTitle = styled.div` display: flex; flex-direction: row; font-weight: 500; - height: ${(props) => props.theme.spacing(8)}; - padding-left: ${(props) => props.theme.spacing(2)}; + height: ${({ theme }) => theme.spacing(8)}; + padding-left: ${({ theme }) => theme.spacing(2)}; `; const StyledIcon = styled.div` display: flex; - margin-right: ${(props) => props.theme.spacing(1)}; + margin-right: ${({ theme }) => theme.spacing(1)}; `; export function ColumnHead({ viewName, viewIcon }: OwnProps) { diff --git a/front/src/modules/ui/components/table/EntityTable.tsx b/front/src/modules/ui/components/table/EntityTable.tsx index 324d9da53..fc4ca3a24 100644 --- a/front/src/modules/ui/components/table/EntityTable.tsx +++ b/front/src/modules/ui/components/table/EntityTable.tsx @@ -40,15 +40,15 @@ const StyledTable = styled.table` border-radius: 4px; border-spacing: 0; - margin-left: ${(props) => props.theme.table.horizontalCellMargin}; - margin-right: ${(props) => props.theme.table.horizontalCellMargin}; + margin-left: ${({ theme }) => theme.table.horizontalCellMargin}; + margin-right: ${({ theme }) => theme.table.horizontalCellMargin}; table-layout: fixed; - width: calc(100% - ${(props) => props.theme.table.horizontalCellMargin} * 2); + width: calc(100% - ${({ theme }) => theme.table.horizontalCellMargin} * 2); th { - border: 1px solid ${(props) => props.theme.tertiaryBackground}; + border: 1px solid ${({ theme }) => theme.background.tertiary}; border-collapse: collapse; - color: ${(props) => props.theme.text40}; + color: ${({ theme }) => theme.font.color.tertiary}; padding: 0; text-align: left; @@ -66,9 +66,9 @@ const StyledTable = styled.table` } td { - border: 1px solid ${(props) => props.theme.tertiaryBackground}; + border: 1px solid ${({ theme }) => theme.background.tertiary}; border-collapse: collapse; - color: ${(props) => props.theme.text80}; + color: ${({ theme }) => theme.font.color.primary}; padding: 0; text-align: left; @@ -102,7 +102,7 @@ const StyledTableScrollableContainer = styled.div` const StyledRow = styled.tr<{ selected: boolean }>` background: ${(props) => - props.selected ? props.theme.secondaryBackground : 'none'}; + props.selected ? props.theme.background.secondary : 'none'}; `; export function EntityTable({ diff --git a/front/src/modules/ui/components/table/action-bar/EntityTableActionBar.tsx b/front/src/modules/ui/components/table/action-bar/EntityTableActionBar.tsx index 42cab9add..a51725ce3 100644 --- a/front/src/modules/ui/components/table/action-bar/EntityTableActionBar.tsx +++ b/front/src/modules/ui/components/table/action-bar/EntityTableActionBar.tsx @@ -16,17 +16,17 @@ type StyledContainerProps = { const StyledContainer = styled.div` align-items: center; - background: ${(props) => props.theme.secondaryBackground}; - border: 1px solid ${(props) => props.theme.primaryBorder}; + background: ${({ theme }) => theme.background.secondary}; + border: 1px solid ${({ theme }) => theme.border.color.light}; border-radius: 8px; bottom: ${(props) => (props.position.x ? 'auto' : '38px')}; - box-shadow: ${(props) => props.theme.modalBoxShadow}; + box-shadow: ${({ theme }) => theme.boxShadow.strong}; display: flex; height: 48px; left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')}; - padding-left: ${(props) => props.theme.spacing(2)}; - padding-right: ${(props) => props.theme.spacing(2)}; + padding-left: ${({ theme }) => theme.spacing(2)}; + padding-right: ${({ theme }) => theme.spacing(2)}; position: ${(props) => (props.position.x ? 'fixed' : 'absolute')}; top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')}; diff --git a/front/src/modules/ui/components/table/action-bar/EntityTableActionBarButton.tsx b/front/src/modules/ui/components/table/action-bar/EntityTableActionBarButton.tsx index 1d44108c6..98b8e9cbc 100644 --- a/front/src/modules/ui/components/table/action-bar/EntityTableActionBarButton.tsx +++ b/front/src/modules/ui/components/table/action-bar/EntityTableActionBarButton.tsx @@ -15,23 +15,25 @@ type StyledButtonProps = { const StyledButton = styled.div` border-radius: 4px; color: ${(props) => - props.type === 'warning' ? props.theme.red : props.theme.text60}; + props.type === 'warning' + ? props.theme.color.red + : props.theme.font.color.secondary}; cursor: pointer; display: flex; justify-content: center; - padding: ${(props) => props.theme.spacing(2)}; + padding: ${({ theme }) => theme.spacing(2)}; transition: background 0.1s ease; user-select: none; &:hover { - background: ${(props) => props.theme.tertiaryBackground}; + background: ${({ theme }) => theme.background.tertiary}; } `; const StyledButtonLabel = styled.div` font-weight: 500; - margin-left: ${(props) => props.theme.spacing(2)}; + margin-left: ${({ theme }) => theme.spacing(2)}; `; export function EntityTableActionBarButton({ diff --git a/front/src/modules/ui/components/table/table-header/DropdownButton.tsx b/front/src/modules/ui/components/table/table-header/DropdownButton.tsx index d5d373b47..517277469 100644 --- a/front/src/modules/ui/components/table/table-header/DropdownButton.tsx +++ b/front/src/modules/ui/components/table/table-header/DropdownButton.tsx @@ -2,12 +2,9 @@ import { ReactNode, useRef } from 'react'; import styled from '@emotion/styled'; import { IconChevronDown } from '@/ui/icons/index'; +import { overlayBackground, textInputStyle } from '@/ui/themes/effects'; import { useOutsideAlerter } from '../../../hooks/useOutsideAlerter'; -import { - overlayBackground, - textInputStyle, -} from '../../../layout/styles/themes'; type OwnProps = { label: string; @@ -31,17 +28,17 @@ type StyledDropdownButtonProps = { }; const StyledDropdownButton = styled.div` - background: ${(props) => props.theme.primaryBackground}; + background: ${({ theme }) => theme.background.primary}; border-radius: 4px; - color: ${(props) => (props.isActive ? props.theme.blue : 'none')}; + color: ${(props) => (props.isActive ? props.theme.color.blue : 'none')}; cursor: pointer; display: flex; filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')}; - padding: ${(props) => props.theme.spacing(1)}; - padding-left: ${(props) => props.theme.spacing(2)}; + padding: ${({ theme }) => theme.spacing(1)}; + padding-left: ${({ theme }) => theme.spacing(2)}; - padding-right: ${(props) => props.theme.spacing(2)}; + padding-right: ${({ theme }) => theme.spacing(2)}; user-select: none; &:hover { @@ -54,7 +51,7 @@ const StyledDropdown = styled.ul` --wraper-border: 1px; --wraper-border-radius: 8px; - border: var(--wraper-border) solid ${(props) => props.theme.primaryBorder}; + border: var(--wraper-border) solid ${({ theme }) => theme.border.color.light}; border-radius: var(--wraper-border-radius); display: flex; flex-direction: column; @@ -80,17 +77,17 @@ const StyledDropdown = styled.ul` const StyledDropdownItem = styled.li` align-items: center; border-radius: 2px; - color: ${(props) => props.theme.text60}; + color: ${({ theme }) => theme.font.color.secondary}; cursor: pointer; display: flex; margin: 2px; - padding: ${(props) => props.theme.spacing(2)} - calc(${(props) => props.theme.spacing(2)} - 2px); + padding: ${({ theme }) => theme.spacing(2)} + calc(${({ theme }) => theme.spacing(2)} - 2px); user-select: none; - width: calc(160px - ${(props) => props.theme.spacing(4)}); + width: calc(160px - ${({ theme }) => theme.spacing(4)}); &:hover { - background: ${(props) => props.theme.lightBackgroundTransparent}; + background: ${({ theme }) => theme.background.transparent.light}; } `; @@ -102,18 +99,18 @@ const StyledDropdownItemClipped = styled.span` const StyledDropdownTopOption = styled.li` align-items: center; - border-bottom: 1px solid ${(props) => props.theme.lightBorder}; - color: ${(props) => props.theme.text80}; + border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; + color: ${({ theme }) => theme.font.color.primary}; cursor: pointer; display: flex; - font-size: ${(props) => props.theme.fontSizeSmall}; - font-weight: ${(props) => props.theme.fontWeightMedium}; + font-size: ${({ theme }) => theme.font.size.sm}; + font-weight: ${({ theme }) => theme.font.weight.medium}; justify-content: space-between; - padding: calc(${(props) => props.theme.spacing(2)}) - calc(${(props) => props.theme.spacing(2)}); + padding: calc(${({ theme }) => theme.spacing(2)}) + calc(${({ theme }) => theme.spacing(2)}); &:hover { - background: ${(props) => props.theme.lightBackgroundTransparent}; + background: ${({ theme }) => theme.background.transparent.light}; } user-select: none; `; @@ -121,19 +118,19 @@ const StyledDropdownTopOption = styled.li` const StyledIcon = styled.div` display: flex; justify-content: center; - margin-right: ${(props) => props.theme.spacing(1)}; - min-width: ${(props) => props.theme.spacing(4)}; + margin-right: ${({ theme }) => theme.spacing(1)}; + min-width: ${({ theme }) => theme.spacing(4)}; `; const StyledSearchField = styled.li` align-items: center; border-bottom: var(--wraper-border) solid - ${(props) => props.theme.primaryBorder}; - color: ${(props) => props.theme.text60}; + ${({ theme }) => theme.border.color.light}; + color: ${({ theme }) => theme.font.color.secondary}; cursor: pointer; display: flex; - font-weight: ${(props) => props.theme.fontWeightMedium}; + font-weight: ${({ theme }) => theme.font.weight.medium}; justify-content: space-between; overflow: hidden; @@ -141,7 +138,7 @@ const StyledSearchField = styled.li` input { border-radius: 8px; box-sizing: border-box; - font-family: ${(props) => props.theme.fontFamily}; + font-family: ${({ theme }) => theme.font.family}; height: 36px; padding: 8px; width: 100%; @@ -192,7 +189,7 @@ function DropdownButton({ } const StyleAngleDownContainer = styled.div` - color: ${(props) => props.theme.text40}; + color: ${({ theme }) => theme.font.color.tertiary}; display: flex; height: 100%; justify-content: center; diff --git a/front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx b/front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx index cd5cddd5c..347c4b527 100644 --- a/front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx +++ b/front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx @@ -20,7 +20,7 @@ type OwnProps = { const StyledBar = styled.div` align-items: center; - border-top: 1px solid ${(props) => props.theme.primaryBorder}; + border-top: 1px solid ${({ theme }) => theme.border.color.light}; display: flex; flex-direction: row; height: 40px; @@ -31,21 +31,21 @@ const StyledChipcontainer = styled.div` align-items: center; display: flex; flex-direction: row; - gap: ${(props) => props.theme.spacing(1)}; + gap: ${({ theme }) => theme.spacing(1)}; height: 40px; justify-content: space-between; - margin-left: ${(props) => props.theme.spacing(2)}; + margin-left: ${({ theme }) => theme.spacing(2)}; overflow-x: auto; `; const StyledCancelButton = styled.button` background-color: inherit; border: none; - color: ${(props) => props.theme.text60}; + color: ${({ theme }) => theme.font.color.secondary}; cursor: pointer; font-weight: 500; margin-left: auto; - margin-right: ${(props) => props.theme.spacing(2)}; + margin-right: ${({ theme }) => theme.spacing(2)}; padding: ${(props) => { const horiz = props.theme.spacing(2); const vert = props.theme.spacing(1); @@ -54,8 +54,8 @@ const StyledCancelButton = styled.button` user-select: none; &:hover { - background-color: ${(props) => props.theme.tertiaryBackground}; - border-radius: ${(props) => props.theme.spacing(1)}; + background-color: ${({ theme }) => theme.background.tertiary}; + border-radius: ${({ theme }) => theme.spacing(1)}; } `; @@ -78,9 +78,9 @@ function SortAndFilterBar({ id={sort.key} icon={ sort.order === 'desc' ? ( - + ) : ( - + ) } onRemove={() => onRemoveSort(sort.key)} diff --git a/front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx b/front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx index df7c248be..2ad247624 100644 --- a/front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx +++ b/front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx @@ -14,30 +14,34 @@ type OwnProps = { const StyledChip = styled.div` align-items: center; - background-color: ${(props) => props.theme.blueHighTransparency}; - border: 1px solid ${(props) => props.theme.blueLowTransparency}; + background-color: ${({ theme }) => theme.background.secondary}; + border: 1px solid ${({ theme }) => theme.border.color.medium}; border-radius: 50px; - color: ${(props) => props.theme.blue}; + color: ${({ theme }) => theme.color.blue}; display: flex; flex-direction: row; flex-shrink: 0; - font-size: ${(props) => props.theme.fontSizeSmall}; - padding: ${(props) => props.theme.spacing(1) + ' ' + props.theme.spacing(2)}; + font-size: ${({ theme }) => theme.font.size.sm}; + padding: ${({ theme }) => theme.spacing(1) + ' ' + theme.spacing(2)}; `; const StyledIcon = styled.div` align-items: center; display: flex; - margin-right: ${(props) => props.theme.spacing(1)}; + margin-right: ${({ theme }) => theme.spacing(1)}; `; const StyledDelete = styled.div` align-items: center; cursor: pointer; display: flex; - font-size: ${(props) => props.theme.fontSizeSmall}; - margin-left: ${(props) => props.theme.spacing(2)}; + font-size: ${({ theme }) => theme.font.size.sm}; + margin-left: ${({ theme }) => theme.spacing(2)}; margin-top: 1px; user-select: none; + &:hover { + background-color: ${({ theme }) => theme.background.tertiary}; + border-radius: ${({ theme }) => theme.border.radius.sm}; + } `; const StyledLabelKey = styled.div` @@ -58,7 +62,7 @@ function SortOrFilterChip({ {labelKey && {labelKey}: } {labelValue} - + ); diff --git a/front/src/modules/ui/components/table/table-header/TableHeader.tsx b/front/src/modules/ui/components/table/table-header/TableHeader.tsx index bc60e9653..ff3d7974f 100644 --- a/front/src/modules/ui/components/table/table-header/TableHeader.tsx +++ b/front/src/modules/ui/components/table/table-header/TableHeader.tsx @@ -31,22 +31,22 @@ const StyledContainer = styled.div` const StyledTableHeader = styled.div` align-items: center; - color: ${(props) => props.theme.text60}; + color: ${({ theme }) => theme.font.color.secondary}; display: flex; flex-direction: row; font-weight: 500; height: 40px; justify-content: space-between; - padding-left: ${(props) => props.theme.spacing(3)}; - padding-right: ${(props) => props.theme.spacing(2)}; + padding-left: ${({ theme }) => theme.spacing(3)}; + padding-right: ${({ theme }) => theme.spacing(2)}; `; const StyledIcon = styled.div` display: flex; - margin-right: ${(props) => props.theme.spacing(2)}; + margin-right: ${({ theme }) => theme.spacing(2)}; & > svg { - font-size: ${(props) => props.theme.iconSizeSmall}; + font-size: ${({ theme }) => theme.icon.size.sm}; } `; diff --git a/front/src/modules/ui/layout/DefaultLayout.tsx b/front/src/modules/ui/layout/DefaultLayout.tsx index 20b4b7078..db490dca8 100644 --- a/front/src/modules/ui/layout/DefaultLayout.tsx +++ b/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; diff --git a/front/src/modules/ui/layout/Panel.tsx b/front/src/modules/ui/layout/Panel.tsx index d953d2fcf..27947b09c 100644 --- a/front/src/modules/ui/layout/Panel.tsx +++ b/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; diff --git a/front/src/modules/ui/layout/containers/ContentContainer.tsx b/front/src/modules/ui/layout/containers/ContentContainer.tsx index df7adac7f..4cbb3a0f0 100644 --- a/front/src/modules/ui/layout/containers/ContentContainer.tsx +++ b/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 = { diff --git a/front/src/modules/ui/layout/containers/NoTopBarContainer.tsx b/front/src/modules/ui/layout/containers/NoTopBarContainer.tsx index 4cabe87cc..aa9b55ee8 100644 --- a/front/src/modules/ui/layout/containers/NoTopBarContainer.tsx +++ b/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%; `; diff --git a/front/src/modules/ui/layout/navbar/NavCollapseButton.tsx b/front/src/modules/ui/layout/navbar/NavCollapseButton.tsx index 5b04d64b6..e2ee8828b 100644 --- a/front/src/modules/ui/layout/navbar/NavCollapseButton.tsx +++ b/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; diff --git a/front/src/modules/ui/layout/navbar/NavItem.tsx b/front/src/modules/ui/layout/navbar/NavItem.tsx index 21d9ae0d5..7df6dde21 100644 --- a/front/src/modules/ui/layout/navbar/NavItem.tsx +++ b/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` 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 `; diff --git a/front/src/modules/ui/layout/navbar/NavTitle.tsx b/front/src/modules/ui/layout/navbar/NavTitle.tsx index e7128e97c..0f327f7ff 100644 --- a/front/src/modules/ui/layout/navbar/NavTitle.tsx +++ b/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; `; diff --git a/front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx b/front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx index e074dd818..a5d661ac2 100644 --- a/front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx +++ b/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` `; 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() { diff --git a/front/src/modules/ui/layout/navbar/NavbarContainer.tsx b/front/src/modules/ui/layout/navbar/NavbarContainer.tsx index e38de7f1f..88f8f27b8 100644 --- a/front/src/modules/ui/layout/navbar/NavbarContainer.tsx +++ b/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; diff --git a/front/src/modules/ui/layout/navbar/sub-navbar/NavBackButton.tsx b/front/src/modules/ui/layout/navbar/sub-navbar/NavBackButton.tsx index d540564b7..da97abcbb 100644 --- a/front/src/modules/ui/layout/navbar/sub-navbar/NavBackButton.tsx +++ b/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%; `; diff --git a/front/src/modules/ui/layout/navbar/sub-navbar/SubNavBarContainer.tsx b/front/src/modules/ui/layout/navbar/sub-navbar/SubNavBarContainer.tsx index 9357f1998..9f7e19e94 100644 --- a/front/src/modules/ui/layout/navbar/sub-navbar/SubNavBarContainer.tsx +++ b/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` diff --git a/front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx b/front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx index fd8ca21bb..4589e9d3d 100644 --- a/front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx +++ b/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() { diff --git a/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx b/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx index a6e56628a..2eb4ea650 100644 --- a/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx +++ b/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({ diff --git a/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx b/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx index 3614323bc..68e063892 100644 --- a/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx +++ b/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); } `; diff --git a/front/src/modules/ui/layout/states/isNavbarOpenedState.ts b/front/src/modules/ui/layout/states/isNavbarOpenedState.ts index ed211773c..0c71d0ebb 100644 --- a/front/src/modules/ui/layout/states/isNavbarOpenedState.ts +++ b/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; diff --git a/front/src/modules/ui/layout/styles/assets/dark-noise.jpg b/front/src/modules/ui/layout/styles/assets/dark-noise.jpg deleted file mode 100644 index e78819ea5..000000000 Binary files a/front/src/modules/ui/layout/styles/assets/dark-noise.jpg and /dev/null differ diff --git a/front/src/modules/ui/layout/styles/colors/background.ts b/front/src/modules/ui/layout/styles/colors/background.ts deleted file mode 100644 index 79e805988..000000000 --- a/front/src/modules/ui/layout/styles/colors/background.ts +++ /dev/null @@ -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', -}; diff --git a/front/src/modules/ui/layout/styles/colors/border.ts b/front/src/modules/ui/layout/styles/colors/border.ts deleted file mode 100644 index 8c65df11d..000000000 --- a/front/src/modules/ui/layout/styles/colors/border.ts +++ /dev/null @@ -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', -}; diff --git a/front/src/modules/ui/layout/styles/colors/index.ts b/front/src/modules/ui/layout/styles/colors/index.ts deleted file mode 100644 index c7e44c471..000000000 --- a/front/src/modules/ui/layout/styles/colors/index.ts +++ /dev/null @@ -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, -}; diff --git a/front/src/modules/ui/layout/styles/colors/modal.ts b/front/src/modules/ui/layout/styles/colors/modal.ts deleted file mode 100644 index 9b5ceadac..000000000 --- a/front/src/modules/ui/layout/styles/colors/modal.ts +++ /dev/null @@ -1,3 +0,0 @@ -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 deleted file mode 100644 index 52aa09213..000000000 --- a/front/src/modules/ui/layout/styles/colors/palette.ts +++ /dev/null @@ -1 +0,0 @@ -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 deleted file mode 100644 index 4feaa8813..000000000 --- a/front/src/modules/ui/layout/styles/colors/text.ts +++ /dev/null @@ -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', -}; diff --git a/front/src/modules/ui/layout/styles/colors/transparent.ts b/front/src/modules/ui/layout/styles/colors/transparent.ts deleted file mode 100644 index 405bfc5da..000000000 --- a/front/src/modules/ui/layout/styles/colors/transparent.ts +++ /dev/null @@ -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)', -}; diff --git a/front/src/modules/ui/layout/styles/effects.ts b/front/src/modules/ui/layout/styles/effects.ts deleted file mode 100644 index 72b3eb1ed..000000000 --- a/front/src/modules/ui/layout/styles/effects.ts +++ /dev/null @@ -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}; - } - `; diff --git a/front/src/modules/ui/layout/styles/texts.ts b/front/src/modules/ui/layout/styles/texts.ts deleted file mode 100644 index 4dc8f3b74..000000000 --- a/front/src/modules/ui/layout/styles/texts.ts +++ /dev/null @@ -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, -}; diff --git a/front/src/modules/ui/layout/styles/themes.ts b/front/src/modules/ui/layout/styles/themes.ts deleted file mode 100644 index fb2b1caf6..000000000 --- a/front/src/modules/ui/layout/styles/themes.ts +++ /dev/null @@ -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; diff --git a/front/src/modules/ui/layout/top-bar/TopBar.tsx b/front/src/modules/ui/layout/top-bar/TopBar.tsx index f5c434098..3601b19a6 100644 --- a/front/src/modules/ui/layout/top-bar/TopBar.tsx +++ b/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; `; diff --git a/front/src/modules/ui/layout/top-bar/TopTitle.tsx b/front/src/modules/ui/layout/top-bar/TopTitle.tsx index a72c87dbd..59e7e0827 100644 --- a/front/src/modules/ui/layout/top-bar/TopTitle.tsx +++ b/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%; `; diff --git a/front/src/modules/ui/themes/assets/dark-noise.png b/front/src/modules/ui/themes/assets/dark-noise.png new file mode 100644 index 000000000..e20f9e601 Binary files /dev/null and b/front/src/modules/ui/themes/assets/dark-noise.png differ diff --git a/front/src/modules/ui/layout/styles/assets/light-noise.jpg b/front/src/modules/ui/themes/assets/light-noise.jpg similarity index 100% rename from front/src/modules/ui/layout/styles/assets/light-noise.jpg rename to front/src/modules/ui/themes/assets/light-noise.jpg diff --git a/front/src/modules/ui/themes/background.ts b/front/src/modules/ui/themes/background.ts new file mode 100644 index 000000000..872686cb2 --- /dev/null +++ b/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), +}; diff --git a/front/src/modules/ui/themes/blur.ts b/front/src/modules/ui/themes/blur.ts new file mode 100644 index 000000000..902834390 --- /dev/null +++ b/front/src/modules/ui/themes/blur.ts @@ -0,0 +1,4 @@ +export const blur = { + light: 'blur(6px)', + strong: 'blur(20px)', +}; diff --git a/front/src/modules/ui/themes/border.ts b/front/src/modules/ui/themes/border.ts new file mode 100644 index 000000000..3b39817a1 --- /dev/null +++ b/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, +}; diff --git a/front/src/modules/ui/themes/boxShadow.ts b/front/src/modules/ui/themes/boxShadow.ts new file mode 100644 index 000000000..6862c253d --- /dev/null +++ b/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)}`, +}; diff --git a/front/src/modules/ui/themes/colors.ts b/front/src/modules/ui/themes/colors.ts new file mode 100644 index 000000000..213f06768 --- /dev/null +++ b/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})`; +} diff --git a/front/src/modules/ui/themes/effects.ts b/front/src/modules/ui/themes/effects.ts new file mode 100644 index 000000000..3f5575127 --- /dev/null +++ b/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}; + } + `; diff --git a/front/src/modules/ui/themes/font.ts b/front/src/modules/ui/themes/font.ts new file mode 100644 index 000000000..fbd9418a4 --- /dev/null +++ b/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, +}; diff --git a/front/src/modules/ui/themes/icon.ts b/front/src/modules/ui/themes/icon.ts new file mode 100644 index 000000000..b547c1c6c --- /dev/null +++ b/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, + }, +}; diff --git a/front/src/modules/ui/themes/text.ts b/front/src/modules/ui/themes/text.ts new file mode 100644 index 000000000..0f571de7c --- /dev/null +++ b/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, +}; diff --git a/front/src/modules/ui/themes/themes.ts b/front/src/modules/ui/themes/themes.ts new file mode 100644 index 000000000..2392d6e8e --- /dev/null +++ b/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; diff --git a/front/src/modules/users/components/Avatar.tsx b/front/src/modules/users/components/Avatar.tsx index f92d0d5e9..f821382d3 100644 --- a/front/src/modules/users/components/Avatar.tsx +++ b/front/src/modules/users/components/Avatar.tsx @@ -14,17 +14,17 @@ type OwnProps = { export const StyledAvatar = styled.div>` background-color: ${(props) => !isNonEmptyString(props.avatarUrl) - ? props.theme.tertiaryBackground + ? props.theme.background.tertiary : 'none'}; background-image: url(${(props) => isNonEmptyString(props.avatarUrl) ? props.avatarUrl : 'none'}); background-size: cover; border-radius: ${(props) => (props.type === 'rounded' ? '50%' : '2px')}; - color: ${(props) => props.theme.text80}; + color: ${({ theme }) => theme.font.color.primary}; display: flex; - font-size: ${(props) => props.theme.fontSizeSmall}; - font-weight: ${(props) => props.theme.fontWeightMedium}; + font-size: ${({ theme }) => theme.font.size.sm}; + font-weight: ${({ theme }) => theme.font.weight.medium}; height: ${(props) => props.size}px; justify-content: center; diff --git a/front/src/pages/auth/Index.tsx b/front/src/pages/auth/Index.tsx index 535fd0bd3..43b5de6ed 100644 --- a/front/src/pages/auth/Index.tsx +++ b/front/src/pages/auth/Index.tsx @@ -65,7 +65,7 @@ export function Index() { Welcome to Twenty - + Continue With Google diff --git a/front/src/pages/auth/PasswordLogin.tsx b/front/src/pages/auth/PasswordLogin.tsx index 0ba5ff550..ac6504c23 100644 --- a/front/src/pages/auth/PasswordLogin.tsx +++ b/front/src/pages/auth/PasswordLogin.tsx @@ -31,7 +31,7 @@ const StyledButtonContainer = styled.div` `; const StyledErrorContainer = styled.div` - color: ${({ theme }) => theme.red}; + color: ${({ theme }) => theme.color.red}; `; export function PasswordLogin() { diff --git a/front/src/pages/companies/Companies.tsx b/front/src/pages/companies/Companies.tsx index ce7006bc1..8fc6dcf2e 100644 --- a/front/src/pages/companies/Companies.tsx +++ b/front/src/pages/companies/Companies.tsx @@ -80,7 +80,7 @@ export function Companies() { return ( } + icon={} onAddButtonClick={handleAddButtonClick} > <> diff --git a/front/src/pages/companies/companies-filters.tsx b/front/src/pages/companies/companies-filters.tsx index bfe8724ce..2609edb8e 100644 --- a/front/src/pages/companies/companies-filters.tsx +++ b/front/src/pages/companies/companies-filters.tsx @@ -8,18 +8,13 @@ import { IconUser, IconUsers, } from '@/ui/icons/index'; -import { commonText } from '@/ui/layout/styles/texts'; +import { icon } from '@/ui/themes/icon'; import { QueryMode, User } from '~/generated/graphql'; export const nameFilter = { key: 'name', label: 'Name', - icon: ( - - ), + icon: , type: 'text', operands: [ { @@ -49,12 +44,7 @@ export const nameFilter = { export const employeesFilter = { key: 'employees', label: 'Employees', - icon: ( - - ), + icon: , type: 'text', operands: [ { @@ -81,12 +71,7 @@ export const employeesFilter = { export const urlFilter = { key: 'domainName', label: 'Url', - icon: ( - - ), + icon: , type: 'text', operands: [ { @@ -119,12 +104,7 @@ export const urlFilter = { export const addressFilter = { key: 'address', label: 'Address', - icon: ( - - ), + icon: , type: 'text', operands: [ { @@ -154,12 +134,7 @@ export const addressFilter = { export const ccreatedAtFilter = { key: 'createdAt', label: 'Created At', - icon: ( - - ), + icon: , type: 'date', operands: [ { @@ -186,12 +161,7 @@ export const ccreatedAtFilter = { export const accountOwnerFilter = { key: 'accountOwner', label: 'Account Owner', - icon: ( - - ), + icon: , type: 'relation', searchConfig: { query: SEARCH_USER_QUERY, diff --git a/front/src/pages/opportunities/Opportunities.tsx b/front/src/pages/opportunities/Opportunities.tsx index ddf1181d8..5cbb81b9d 100644 --- a/front/src/pages/opportunities/Opportunities.tsx +++ b/front/src/pages/opportunities/Opportunities.tsx @@ -46,7 +46,7 @@ export function Opportunities() { return ( } + icon={} > {items && pipelineId ? ( } + icon={} onAddButtonClick={handleAddButtonClick} > <> @@ -88,7 +88,7 @@ export function People() { data={people} columns={peopleColumns} viewName="All People" - viewIcon={} + viewIcon={} availableSorts={availableSorts} availableFilters={availableFilters} onSortsUpdate={updateSorts} diff --git a/front/src/pages/people/people-filters.tsx b/front/src/pages/people/people-filters.tsx index 502c0ae53..d73dab1c9 100644 --- a/front/src/pages/people/people-filters.tsx +++ b/front/src/pages/people/people-filters.tsx @@ -8,18 +8,13 @@ import { IconPhone, IconUser, } from '@/ui/icons/index'; -import { commonText } from '@/ui/layout/styles/texts'; +import { icon } from '@/ui/themes/icon'; import { Company, QueryMode } from '~/generated/graphql'; export const fullnameFilter = { key: 'fullname', label: 'People', - icon: ( - - ), + icon: , type: 'text', operands: [ { @@ -72,12 +67,7 @@ export const fullnameFilter = { export const emailFilter = { key: 'email', label: 'Email', - icon: ( - - ), + icon: , type: 'text', operands: [ { @@ -107,12 +97,7 @@ export const emailFilter = { export const companyFilter = { key: 'company_name', label: 'Company', - icon: ( - - ), + icon: , type: 'relation', searchConfig: { query: SEARCH_COMPANY_QUERY, @@ -156,12 +141,7 @@ export const companyFilter = { export const phoneFilter = { key: 'phone', label: 'Phone', - icon: ( - - ), + icon: , type: 'text', operands: [ { @@ -191,12 +171,7 @@ export const phoneFilter = { export const createdAtFilter = { key: 'createdAt', label: 'Created At', - icon: ( - - ), + icon: , type: 'date', operands: [ { @@ -223,12 +198,7 @@ export const createdAtFilter = { export const cityFilter = { key: 'city', label: 'City', - icon: ( - - ), + icon: , type: 'text', operands: [ { diff --git a/front/src/pages/settings/SettingsProfile.tsx b/front/src/pages/settings/SettingsProfile.tsx index dc1f4823f..6f1919524 100644 --- a/front/src/pages/settings/SettingsProfile.tsx +++ b/front/src/pages/settings/SettingsProfile.tsx @@ -10,7 +10,7 @@ import { NoTopBarContainer } from '@/ui/layout/containers/NoTopBarContainer'; const StyledContainer = styled.div` display: flex; flex-direction: column; - padding: ${(props) => props.theme.spacing(8)}; + padding: ${({ theme }) => theme.spacing(8)}; width: 490px; `; export function SettingsProfile() { diff --git a/front/src/providers/theme/AppThemeProvider.tsx b/front/src/providers/theme/AppThemeProvider.tsx index 6efaf1601..dbe6fcea8 100644 --- a/front/src/providers/theme/AppThemeProvider.tsx +++ b/front/src/providers/theme/AppThemeProvider.tsx @@ -1,6 +1,6 @@ import { ThemeProvider } from '@emotion/react'; -import { darkTheme, lightTheme } from '@/ui/layout/styles/themes'; +import { darkTheme, lightTheme } from '@/ui/themes/themes'; import { browserPrefersDarkMode } from '@/utils/utils'; type OwnProps = { diff --git a/front/src/testing/ComponentStorybookLayout.tsx b/front/src/testing/ComponentStorybookLayout.tsx index 0ac897dc7..4ad309339 100644 --- a/front/src/testing/ComponentStorybookLayout.tsx +++ b/front/src/testing/ComponentStorybookLayout.tsx @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; const StyledLayout = styled.div` - background: ${(props) => props.theme.primaryBackground}; - border: 1px solid ${(props) => props.theme.lightBorder}; + background: ${({ theme }) => theme.background.primary}; + border: 1px solid ${({ theme }) => theme.border.color.light}; border-radius: 5px; display: flex; diff --git a/front/yarn.lock b/front/yarn.lock index dc3d5e5b5..730e7fb8e 100644 --- a/front/yarn.lock +++ b/front/yarn.lock @@ -10150,6 +10150,11 @@ headers-polyfill@^3.1.0, headers-polyfill@^3.1.2: resolved "https://registry.yarnpkg.com/headers-polyfill/-/headers-polyfill-3.1.2.tgz#9a4dcb545c5b95d9569592ef7ec0708aab763fbe" integrity sha512-tWCK4biJ6hcLqTviLXVR9DTRfYGQMXEIUj3gwJ2rZ5wO/at3XtkI4g8mCvFdUF9l1KMBNCfmNAdnahm1cgavQA== +hex-rgb@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/hex-rgb/-/hex-rgb-5.0.0.tgz#e2c9eb6a37498d66c5a350a221ed4c2c7d1a92d6" + integrity sha512-NQO+lgVUCtHxZ792FodgW0zflK+ozS9X9dwGp9XvvmPlH7pyxd588cn24TD3rmPm/N0AIRXF10Otah8yKqGw4w== + hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"