admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Apply new theme (#449)

Browse Source 
* Apply new theme

* Fix storybook

* Fixes

* Fix regressions
This commit is contained in:
Charles Bochet
2023-06-26 19:13:04 -07:00
committed by GitHub
parent 2a42ebb70d
commit d6364a9fdd
115 changed files with 818 additions and 721 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/.storybook/preview.ts
View File

@ -2,7 +2,7 @@ import { initialize, mswDecorator } from 'msw-storybook-addon';
import { Preview } from '@storybook/react'; import { Preview } from '@storybook/react';
import { ThemeProvider } from '@emotion/react'; import { ThemeProvider } from '@emotion/react';
import { withThemeFromJSXProvider } from "@storybook/addon-styling"; 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(); initialize();

1
front/package.json
View File

@ -19,6 +19,7 @@
"cmdk": "^0.2.0", "cmdk": "^0.2.0",
"date-fns": "^2.30.0", "date-fns": "^2.30.0",
"graphql": "^16.6.0", "graphql": "^16.6.0",
"hex-rgb": "^5.0.0",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
"jwt-decode": "^3.1.2", "jwt-decode": "^3.1.2",
"libphonenumber-js": "^1.10.26", "libphonenumber-js": "^1.10.26",

12
front/src/AppNavbar.tsx
View File

@ -31,37 +31,37 @@ export function AppNavbar() {
<NavItem <NavItem
label="Search" label="Search"
to="/search" to="/search"
icon={<IconSearch size={theme.iconSizeMedium} />} icon={<IconSearch size={theme.icon.size.md} />}
soon={true} soon={true}
/> />
<NavItem <NavItem
label="Inbox" label="Inbox"
to="/inbox" to="/inbox"
icon={<IconInbox size={theme.iconSizeMedium} />} icon={<IconInbox size={theme.icon.size.md} />}
soon={true} soon={true}
/> />
<NavItem <NavItem
label="Settings" label="Settings"
to="/settings/profile" to="/settings/profile"
icon={<IconSettings size={theme.iconSizeMedium} />} icon={<IconSettings size={theme.icon.size.md} />}
/> />
<NavTitle label="Workspace" /> <NavTitle label="Workspace" />
<NavItem <NavItem
label="People" label="People"
to="/people" to="/people"
icon={<IconUser size={theme.iconSizeMedium} />} icon={<IconUser size={theme.icon.size.md} />}
active={currentPath === '/people'} active={currentPath === '/people'}
/> />
<NavItem <NavItem
label="Companies" label="Companies"
to="/companies" to="/companies"
icon={<IconBuildingSkyscraper size={theme.iconSizeMedium} />} icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
active={currentPath === '/companies'} active={currentPath === '/companies'}
/> />
<NavItem <NavItem
label="Opportunities" label="Opportunities"
to="/opportunities" to="/opportunities"
icon={<IconTargetArrow size={theme.iconSizeMedium} />} icon={<IconTargetArrow size={theme.icon.size.md} />}
active={currentPath === '/opportunities'} active={currentPath === '/opportunities'}
/> />
</NavItemsContainer> </NavItemsContainer>

2
front/src/__stories__/shared.tsx
View File

@ -5,7 +5,7 @@ import { RecoilRoot, useRecoilState } from 'recoil';
import { currentUserState } from '@/auth/states/currentUserState'; import { currentUserState } from '@/auth/states/currentUserState';
import { isAuthenticatingState } from '@/auth/states/isAuthenticatingState'; import { isAuthenticatingState } from '@/auth/states/isAuthenticatingState';
import { darkTheme } from '@/ui/layout/styles/themes'; import { darkTheme } from '@/ui/themes/themes';
import { App } from '~/App'; import { App } from '~/App';
import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout'; import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
import { mockedUsersData } from '~/testing/mock-data/users'; import { mockedUsersData } from '~/testing/mock-data/users';

3
front/src/index.tsx
View File

@ -2,9 +2,10 @@ import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import { RecoilRoot } from 'recoil'; import { RecoilRoot } from 'recoil';
import { ThemeType } from '@/ui/themes/themes';
import '@emotion/react'; import '@emotion/react';
import { ThemeType } from './modules/ui/layout/styles/themes';
import { AppWrapper } from './AppWrapper'; import { AppWrapper } from './AppWrapper';
import './index.css'; import './index.css';

4
front/src/modules/auth/components/ui/FooterNote.tsx
View File

@ -7,9 +7,9 @@ type OwnProps = {
const StyledContainer = styled.div` const StyledContainer = styled.div`
align-items: center; align-items: center;
color: ${({ theme }) => theme.text40}; color: ${({ theme }) => theme.font.color.tertiary};
display: flex; display: flex;
font-size: ${({ theme }) => theme.fontSizeSmall}px; font-size: ${({ theme }) => theme.font.size.sm}px;
padding-left: ${({ theme }) => theme.spacing(14)}; padding-left: ${({ theme }) => theme.spacing(14)};
padding-right: ${({ theme }) => theme.spacing(14)}; padding-right: ${({ theme }) => theme.spacing(14)};
text-align: center; text-align: center;

6
front/src/modules/auth/components/ui/HorizontalSeparator.tsx
View File

@ -1,10 +1,10 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
const Separator = styled.div` const Separator = styled.div`
background-color: ${(props) => props.theme.mediumBorder}; background-color: ${({ theme }) => theme.border.color.medium};
height: 1px; height: 1px;
margin-bottom: ${(props) => props.theme.spacing(3)}; margin-bottom: ${({ theme }) => theme.spacing(3)};
margin-top: ${(props) => props.theme.spacing(3)}; margin-top: ${({ theme }) => theme.spacing(3)};
width: 100%; width: 100%;
`; `;

2
front/src/modules/auth/components/ui/InputLabel.tsx
View File

@ -6,7 +6,7 @@ type OwnProps = {
}; };
const StyledContainer = styled.div` const StyledContainer = styled.div`
font-weight: ${({ theme }) => theme.fontWeightMedium}; font-weight: ${({ theme }) => theme.font.weight.medium};
margin-bottom: ${({ theme }) => theme.spacing(4)}; margin-bottom: ${({ theme }) => theme.spacing(4)};
margin-top: ${({ theme }) => theme.spacing(4)}; margin-top: ${({ theme }) => theme.spacing(4)};
`; `;

2
front/src/modules/auth/components/ui/SubTitle.tsx
View File

@ -6,7 +6,7 @@ type OwnProps = {
}; };
const StyledSubTitle = styled.div` const StyledSubTitle = styled.div`
color: ${({ theme }) => theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
margin-top: ${({ theme }) => theme.spacing(2)}; margin-top: ${({ theme }) => theme.spacing(2)};
`; `;

4
front/src/modules/auth/components/ui/Title.tsx
View File

@ -6,8 +6,8 @@ type OwnProps = {
}; };
const StyledTitle = styled.div` const StyledTitle = styled.div`
font-size: ${({ theme }) => theme.fontSizeExtraLarge}; font-size: ${({ theme }) => theme.font.size.xl};
font-weight: ${({ theme }) => theme.fontWeightSemibold}; font-weight: ${({ theme }) => theme.font.weight.semiBold};
margin-top: ${({ theme }) => theme.spacing(10)}; margin-top: ${({ theme }) => theme.spacing(10)};
`; `;

78
front/src/modules/command-menu/components/CommandMenuStyles.tsx
View File

@ -2,10 +2,10 @@ import styled from '@emotion/styled';
import { Command } from 'cmdk'; import { Command } from 'cmdk';
export const StyledDialog = styled(Command.Dialog)` export const StyledDialog = styled(Command.Dialog)`
background: ${(props) => props.theme.primaryBackground}; background: ${({ theme }) => theme.background.primary};
border-radius: ${(props) => props.theme.borderRadius}; border-radius: ${({ theme }) => theme.border.radius.md};
box-shadow: ${(props) => props.theme.heavyBoxShadow}; box-shadow: ${({ theme }) => theme.boxShadow.strong};
font-family: ${(props) => props.theme.fontFamily}; font-family: ${({ theme }) => theme.font.family};
left: 50%; left: 50%;
max-width: 640px; max-width: 640px;
overflow: hidden; overflow: hidden;
@ -17,51 +17,51 @@ export const StyledDialog = styled(Command.Dialog)`
`; `;
export const StyledInput = styled(Command.Input)` export const StyledInput = styled(Command.Input)`
background: ${(props) => props.theme.primaryBackground}; background: ${({ theme }) => theme.background.primary};
border: none; border: none;
border-bottom: 1px solid ${(props) => props.theme.primaryBorder}; border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 0; border-radius: 0;
color: ${(props) => props.theme.text100}; color: ${({ theme }) => theme.font.color.primary};
font-size: ${(props) => props.theme.fontSizeLarge}; font-size: ${({ theme }) => theme.font.size.lg};
margin: 0; margin: 0;
outline: none; outline: none;
padding: ${(props) => props.theme.spacing(5)}; padding: ${({ theme }) => theme.spacing(5)};
width: 100%; width: 100%;
`; `;
export const StyledMenuItem = styled(Command.Item)` export const StyledMenuItem = styled(Command.Item)`
align-items: center; align-items: center;
color: ${(props) => props.theme.text80}; color: ${({ theme }) => theme.font.color.primary};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
font-size: ${(props) => props.theme.fontSizeMedium}; font-size: ${({ theme }) => theme.font.size.md};
gap: ${(props) => props.theme.spacing(3)}; gap: ${({ theme }) => theme.spacing(3)};
height: 40px; height: 40px;
justify-content: space-between; justify-content: space-between;
padding: 0 ${(props) => props.theme.spacing(4)}; padding: 0 ${({ theme }) => theme.spacing(4)};
position: relative; position: relative;
transition: all 150ms ease; transition: all 150ms ease;
transition-property: none; transition-property: none;
user-select: none; user-select: none;
&:hover { &:hover {
background: ${(props) => props.theme.lightBackgroundTransparent}; background: ${({ theme }) => theme.background.transparent.light};
} }
&[data-selected='true'] { &[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 /* 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) But it needs to be consistend with other picker dropdown (e.g. company)
&:after { &:after {
background: ${(props) => props.theme.quaternaryBackground}; background: ${({ theme }) => theme.background.quaternary};
content: ''; content: '';
height: 100%; height: 100%;
left: 0; left: 0;
position: absolute; position: absolute;
width: 3px; width: 3px;
z-index: ${(props) => props.theme.lastLayerZIndex}; z-index: ${({ theme }) => theme.lastLayerZIndex};
} */ } */
} }
&[data-disabled='true'] { &[data-disabled='true'] {
color: ${(props) => props.theme.text30}; color: ${({ theme }) => theme.font.color.light};
cursor: not-allowed; cursor: not-allowed;
} }
svg { svg {
@ -71,7 +71,7 @@ export const StyledMenuItem = styled(Command.Item)`
`; `;
export const StyledList = styled(Command.List)` export const StyledList = styled(Command.List)`
background: ${(props) => props.theme.secondaryBackground}; background: ${({ theme }) => theme.background.secondary};
height: min(300px, var(--cmdk-list-height)); height: min(300px, var(--cmdk-list-height));
max-height: 400px; max-height: 400px;
overflow: auto; overflow: auto;
@ -83,14 +83,14 @@ export const StyledList = styled(Command.List)`
export const StyledGroup = styled(Command.Group)` export const StyledGroup = styled(Command.Group)`
[cmdk-group-heading] { [cmdk-group-heading] {
align-items: center; align-items: center;
color: ${(props) => props.theme.text30}; color: ${({ theme }) => theme.font.color.light};
display: flex; display: flex;
font-size: ${(props) => props.theme.fontSizeExtraSmall}; font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${(props) => props.theme.fontWeightBold}; font-weight: ${({ theme }) => theme.font.weight.semiBold};
padding-bottom: ${(props) => props.theme.spacing(2)}; padding-bottom: ${({ theme }) => theme.spacing(2)};
padding-left: ${(props) => props.theme.spacing(4)}; padding-left: ${({ theme }) => theme.spacing(4)};
padding-right: ${(props) => props.theme.spacing(4)}; padding-right: ${({ theme }) => theme.spacing(4)};
padding-top: ${(props) => props.theme.spacing(2)}; padding-top: ${({ theme }) => theme.spacing(2)};
text-transform: uppercase; text-transform: uppercase;
user-select: none; user-select: none;
} }
@ -98,9 +98,9 @@ export const StyledGroup = styled(Command.Group)`
export const StyledEmpty = styled(Command.Empty)` export const StyledEmpty = styled(Command.Empty)`
align-items: center; align-items: center;
color: ${(props) => props.theme.text30}; color: ${({ theme }) => theme.font.color.light};
display: flex; display: flex;
font-size: ${(props) => props.theme.fontSizeMedium}; font-size: ${({ theme }) => theme.font.size.md};
height: 64px; height: 64px;
justify-content: center; justify-content: center;
white-space: pre-wrap; white-space: pre-wrap;
@ -111,28 +111,28 @@ export const StyledSeparator = styled(Command.Separator)``;
export const StyledIconAndLabelContainer = styled.div` export const StyledIconAndLabelContainer = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
gap: ${(props) => props.theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
`; `;
export const StyledIconContainer = styled.div` export const StyledIconContainer = styled.div`
align-items: center; align-items: center;
background: ${(props) => props.theme.lightBackgroundTransparent}; background: ${({ theme }) => theme.background.transparent.light};
border-radius: 4px; border-radius: 4px;
color: ${(props) => props.theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
display: flex; display: flex;
padding: ${(props) => props.theme.spacing(1)}; padding: ${({ theme }) => theme.spacing(1)};
`; `;
export const StyledShortCut = styled.div` export const StyledShortCut = styled.div`
background-color: ${(props) => props.theme.lightBackgroundTransparent}; background-color: ${({ theme }) => theme.background.transparent.light};
border-radius: 4px; border-radius: 4px;
color: ${(props) => props.theme.text30}; color: ${({ theme }) => theme.font.color.light};
margin-left: ${(props) => props.theme.spacing(1)}; margin-left: ${({ theme }) => theme.spacing(1)};
margin-right: ${(props) => props.theme.spacing(1)}; margin-right: ${({ theme }) => theme.spacing(1)};
padding: ${(props) => props.theme.spacing(1)}; padding: ${({ theme }) => theme.spacing(1)};
`; `;
export const StyledShortcutsContainer = styled.div` export const StyledShortcutsContainer = styled.div`
align-items: center; align-items: center;
color: ${(props) => props.theme.text30}; color: ${({ theme }) => theme.font.color.light};
display: flex; display: flex;
font-size: ${(props) => props.theme.fontSizeSmall}; font-size: ${({ theme }) => theme.font.size.sm};
`; `;

12
front/src/modules/comments/components/CommentChip.tsx
View File

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

20
front/src/modules/comments/components/CommentHeader.tsx
View File

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

6
front/src/modules/comments/components/CommentThread.tsx
View File

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

6
front/src/modules/comments/components/CommentThreadCreateMode.tsx
View File

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

8
front/src/modules/comments/components/CommentThreadItem.tsx
View File

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

24
front/src/modules/comments/components/CommentThreadRelationPicker.tsx
View File

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

2
front/src/modules/comments/components/__stories__/CommentChip.stories.tsx
View File

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

12
front/src/modules/companies/components/CompanyChip.tsx
View File

@ -9,14 +9,14 @@ export type CompanyChipPropsType = {
const StyledContainer = styled.span` const StyledContainer = styled.span`
align-items: center; align-items: center;
background-color: ${(props) => props.theme.tertiaryBackground}; background-color: ${({ theme }) => theme.background.tertiary};
border-radius: ${(props) => props.theme.spacing(1)}; border-radius: ${({ theme }) => theme.spacing(1)};
color: ${(props) => props.theme.text80}; color: ${({ theme }) => theme.font.color.primary};
display: inline-flex; display: inline-flex;
gap: ${(props) => props.theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(1)};
height: calc(20px - 2 * ${(props) => props.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; user-select: none;

38
front/src/modules/opportunities/components/CompanyBoardCard.tsx
View File

@ -7,46 +7,46 @@ import { IconCalendarEvent, IconUser, IconUsers } from '../../ui/icons';
import { getLogoUrlFromDomainName, humanReadableDate } from '../../utils/utils'; import { getLogoUrlFromDomainName, humanReadableDate } from '../../utils/utils';
const StyledBoardCard = styled.div` const StyledBoardCard = styled.div`
background: ${({ theme }) => theme.secondaryBackground}; background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.mediumBorder}; border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: 4px; border-radius: 4px;
box-shadow: ${({ theme }) => theme.lightBoxShadow}; box-shadow: ${({ theme }) => theme.boxShadow.light};
color: ${({ theme }) => theme.text80}; color: ${({ theme }) => theme.font.color.primary};
cursor: pointer; cursor: pointer;
`; `;
const StyledBoardCardWrapper = styled.div` const StyledBoardCardWrapper = styled.div`
padding-bottom: ${(props) => props.theme.spacing(2)}; padding-bottom: ${({ theme }) => theme.spacing(2)};
`; `;
const StyledBoardCardHeader = styled.div` const StyledBoardCardHeader = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-weight: ${(props) => props.theme.fontWeightBold}; font-weight: ${({ theme }) => theme.font.weight.semiBold};
height: 24px; height: 24px;
padding-left: ${(props) => props.theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(2)}; padding-right: ${({ theme }) => theme.spacing(2)};
padding-top: ${(props) => props.theme.spacing(2)}; padding-top: ${({ theme }) => theme.spacing(2)};
img { img {
height: ${(props) => props.theme.iconSizeMedium}px; height: ${({ theme }) => theme.icon.size.md}px;
margin-right: ${(props) => props.theme.spacing(2)}; margin-right: ${({ theme }) => theme.spacing(2)};
object-fit: cover; object-fit: cover;
width: ${(props) => props.theme.iconSizeMedium}px; width: ${({ theme }) => theme.icon.size.md}px;
} }
`; `;
const StyledBoardCardBody = styled.div` const StyledBoardCardBody = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: ${(props) => props.theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
padding: ${(props) => props.theme.spacing(2)}; padding: ${({ theme }) => theme.spacing(2)};
span { span {
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
svg { svg {
color: ${(props) => props.theme.text40}; color: ${({ theme }) => theme.font.color.tertiary};
margin-right: ${(props) => props.theme.spacing(2)}; margin-right: ${({ theme }) => theme.spacing(2)};
} }
} }
`; `;
@ -70,14 +70,14 @@ export function CompanyBoardCard({ company }: { company: CompanyProp }) {
</StyledBoardCardHeader> </StyledBoardCardHeader>
<StyledBoardCardBody> <StyledBoardCardBody>
<span> <span>
<IconUser size={theme.iconSizeMedium} /> <IconUser size={theme.icon.size.md} />
<PersonChip name={company.accountOwner?.displayName || ''} /> <PersonChip name={company.accountOwner?.displayName || ''} />
</span> </span>
<span> <span>
<IconUsers size={theme.iconSizeMedium} /> {company.employees} <IconUsers size={theme.icon.size.md} /> {company.employees}
</span> </span>
<span> <span>
<IconCalendarEvent size={theme.iconSizeMedium} /> <IconCalendarEvent size={theme.icon.size.md} />
{humanReadableDate(new Date(company.createdAt as string))} {humanReadableDate(new Date(company.createdAt as string))}
</span> </span>
</StyledBoardCardBody> </StyledBoardCardBody>

10
front/src/modules/people/components/PersonChip.tsx
View File

@ -10,15 +10,15 @@ export type PersonChipPropsType = {
const StyledContainer = styled.span` const StyledContainer = styled.span`
align-items: center; align-items: center;
background-color: ${(props) => props.theme.tertiaryBackground}; background-color: ${({ theme }) => theme.background.tertiary};
border-radius: ${(props) => props.theme.spacing(1)}; border-radius: ${({ theme }) => theme.spacing(1)};
color: ${(props) => props.theme.text80}; color: ${({ theme }) => theme.font.color.primary};
display: inline-flex; display: inline-flex;
gap: ${(props) => props.theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(1)};
height: 12px; height: 12px;
overflow: hidden; overflow: hidden;
padding: ${(props) => props.theme.spacing(1)}; padding: ${({ theme }) => theme.spacing(1)};
:hover { :hover {
filter: brightness(95%); filter: brightness(95%);

10
front/src/modules/pipelines/components/PipelineChip.tsx
View File

@ -9,12 +9,12 @@ type OwnProps = {
const StyledContainer = styled.span` const StyledContainer = styled.span`
align-items: center; align-items: center;
background-color: ${(props) => props.theme.tertiaryBackground}; background-color: ${({ theme }) => theme.background.tertiary};
border-radius: ${(props) => props.theme.spacing(1)}; border-radius: ${({ theme }) => theme.spacing(1)};
color: ${(props) => props.theme.text80}; color: ${({ theme }) => theme.font.color.primary};
display: inline-flex; display: inline-flex;
gap: ${(props) => props.theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(1)};
padding: ${(props) => props.theme.spacing(1)}; padding: ${({ theme }) => theme.spacing(1)};
:hover { :hover {
filter: brightness(95%); filter: brightness(95%);

2
front/src/modules/relation-picker/components/SingleEntitySelect.tsx
View File

@ -72,7 +72,7 @@ export function SingleEntitySelect<
<> <>
<DropdownMenuItemContainer> <DropdownMenuItemContainer>
<DropdownMenuButton onClick={onCreate}> <DropdownMenuButton onClick={onCreate}>
<IconPlus size={theme.iconSizeMedium} /> <IconPlus size={theme.icon.size.md} />
Create new Create new
</DropdownMenuButton> </DropdownMenuButton>
</DropdownMenuItemContainer> </DropdownMenuItemContainer>

8
front/src/modules/settings/components/SettingsNavbar.tsx
View File

@ -31,7 +31,7 @@ export function SettingsNavbar() {
<NavItem <NavItem
label="Profile" label="Profile"
to="/settings/profile" to="/settings/profile"
icon={<IconUser size={theme.iconSizeMedium} />} icon={<IconUser size={theme.icon.size.md} />}
active={ active={
!!useMatch({ !!useMatch({
path: useResolvedPath('/people').pathname, path: useResolvedPath('/people').pathname,
@ -42,7 +42,7 @@ export function SettingsNavbar() {
<NavItem <NavItem
label="Experience" label="Experience"
to="/settings/profile/experience" to="/settings/profile/experience"
icon={<IconColorSwatch size={theme.iconSizeMedium} />} icon={<IconColorSwatch size={theme.icon.size.md} />}
soon={true} soon={true}
active={ active={
!!useMatch({ !!useMatch({
@ -55,7 +55,7 @@ export function SettingsNavbar() {
<NavItem <NavItem
label="General" label="General"
to="/settings/workspace" to="/settings/workspace"
icon={<IconSettings size={theme.iconSizeMedium} />} icon={<IconSettings size={theme.icon.size.md} />}
soon={true} soon={true}
active={ active={
!!useMatch({ !!useMatch({
@ -68,7 +68,7 @@ export function SettingsNavbar() {
<NavItem <NavItem
label="Logout" label="Logout"
onClick={handleLogout} onClick={handleLogout}
icon={<IconLogout size={theme.iconSizeMedium} />} icon={<IconLogout size={theme.icon.size.md} />}
danger={true} danger={true}
/> />
</NavItemsContainer> </NavItemsContainer>

8
front/src/modules/ui/components/board/BoardColumn.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
export const StyledColumn = styled.div` export const StyledColumn = styled.div`
background-color: ${({ theme }) => theme.primaryBackground}; background-color: ${({ theme }) => theme.background.primary};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 200px; min-width: 200px;
@ -12,10 +12,10 @@ export const StyledColumn = styled.div`
export const StyledColumnTitle = styled.h3` export const StyledColumnTitle = styled.h3`
color: ${({ color }) => color}; color: ${({ color }) => color};
font-family: 'Inter'; font-family: 'Inter';
font-size: ${({ theme }) => theme.fontSizeMedium}; font-size: ${({ theme }) => theme.font.size.md};
font-style: normal; font-style: normal;
font-weight: ${({ theme }) => theme.fontWeightMedium}; font-weight: ${({ theme }) => theme.font.weight.medium};
line-height: ${({ theme }) => theme.lineHeight}; line-height: ${({ theme }) => theme.text.lineHeight};
margin: 0; margin: 0;
margin-bottom: ${({ theme }) => theme.spacing(2)}; margin-bottom: ${({ theme }) => theme.spacing(2)};
`; `;

12
front/src/modules/ui/components/board/NewButton.tsx
View File

@ -6,18 +6,18 @@ import { IconPlus } from '@/ui/icons/index';
const StyledButton = styled.button` const StyledButton = styled.button`
align-items: center; align-items: center;
align-self: baseline; align-self: baseline;
background-color: ${({ theme }) => theme.primaryBackground}; background-color: ${({ theme }) => theme.background.primary};
border: none; border: none;
border-radius: ${({ theme }) => theme.borderRadius}; border-radius: ${({ theme }) => theme.border.radius.md};
color: ${({ theme }) => theme.text40}; color: ${({ theme }) => theme.font.color.tertiary};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
gap: ${({ theme }) => theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(1)};
justify-content: center; justify-content: center;
padding: ${(props) => props.theme.spacing(1)}; padding: ${({ theme }) => theme.spacing(1)};
&:hover { &:hover {
background-color: ${({ theme }) => theme.secondaryBackground}; background-color: ${({ theme }) => theme.background.secondary};
} }
`; `;
@ -30,7 +30,7 @@ export function NewButton({ onClick }: OwnProps) {
return ( return (
<StyledButton onClick={onClick}> <StyledButton onClick={onClick}>
<IconPlus size={theme.iconSizeMedium} /> <IconPlus size={theme.icon.size.md} />
New New
</StyledButton> </StyledButton>
); );

8
front/src/modules/ui/components/buttons/IconButton.tsx
View File

@ -2,11 +2,11 @@ import styled from '@emotion/styled';
const StyledIconButton = styled.button` const StyledIconButton = styled.button`
align-items: center; align-items: center;
background: ${(props) => props.theme.blue}; background: ${({ theme }) => theme.color.blue};
border: none; border: none;
border-radius: 50%; border-radius: 50%;
color: ${(props) => props.theme.text0}; color: ${({ theme }) => theme.font.color.inverted};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -19,8 +19,8 @@ const StyledIconButton = styled.button`
width: 20px; width: 20px;
&:disabled { &:disabled {
background: ${(props) => props.theme.quaternaryBackground}; background: ${({ theme }) => theme.background.quaternary};
color: ${(props) => props.theme.text40}; color: ${({ theme }) => theme.font.color.tertiary};
cursor: default; cursor: default;
} }
`; `;

15
front/src/modules/ui/components/buttons/PrimaryButton.tsx
View File

@ -10,18 +10,19 @@ const StyledButton = styled.button<{ fullWidth: boolean }>`
align-items: center; align-items: center;
background: radial-gradient( background: radial-gradient(
50% 62.62% at 50% 0%, 50% 62.62% at 50% 0%,
${({ theme }) => theme.text60} 0%, ${({ theme }) => theme.font.color.secondary} 0%,
${({ theme }) => theme.text80} 100% ${({ theme }) => theme.font.color.primary} 100%
); );
border: 1px solid ${({ theme }) => theme.primaryBorder}; border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px; border-radius: 8px;
box-shadow: 0px 0px 4px ${({ theme }) => theme.mediumBackgroundTransparent} 0%, box-shadow: 0px 0px 4px ${({ theme }) => theme.background.transparent.medium}
0px 2px 4px ${({ theme }) => theme.lightBackgroundTransparent} 0%; 0%,
color: ${(props) => props.theme.text0}; 0px 2px 4px ${({ theme }) => theme.background.transparent.light} 0%;
color: ${({ theme }) => theme.font.color.inverted};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-weight: ${({ theme }) => theme.fontWeightBold}; font-weight: ${({ theme }) => theme.font.weight.semiBold};
gap: ${({ theme }) => theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
justify-content: center; justify-content: center;
padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)}; padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};

15
front/src/modules/ui/components/buttons/SecondaryButton.tsx
View File

@ -8,16 +8,17 @@ type OwnProps = {
const StyledButton = styled.button<{ fullWidth: boolean }>` const StyledButton = styled.button<{ fullWidth: boolean }>`
align-items: center; align-items: center;
background: ${({ theme }) => theme.primaryBackground}; background: ${({ theme }) => theme.background.primary};
border: 1px solid ${({ theme }) => theme.primaryBorder}; border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px; border-radius: 8px;
box-shadow: 0px 0px 4px ${({ theme }) => theme.mediumBackgroundTransparent} 0%, box-shadow: 0px 0px 4px ${({ theme }) => theme.background.transparent.medium}
0px 2px 4px ${({ theme }) => theme.lightBackgroundTransparent} 0%; 0%,
color: ${(props) => props.theme.text80}; 0px 2px 4px ${({ theme }) => theme.background.transparent.light} 0%;
color: ${({ theme }) => theme.font.color.primary};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-weight: ${({ theme }) => theme.fontWeightBold}; font-weight: ${({ theme }) => theme.font.weight.semiBold};
gap: 8px; gap: 8px;
justify-content: center; justify-content: center;
padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)}; padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
@ -25,7 +26,7 @@ const StyledButton = styled.button<{ fullWidth: boolean }>`
width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')}; width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
&:hover { &:hover {
background: ${({ theme }) => theme.tertiaryBackground}; background: ${({ theme }) => theme.background.tertiary};
} }
`; `;

16
front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx
View File

@ -6,19 +6,21 @@ export const EditableCellNormalModeOuterContainer = styled.div`
display: flex; display: flex;
height: 100%; height: 100%;
overflow: hidden; 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%; width: 100%;
&:hover { &: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}; -webkit-box-shadow: inset 0 0 0 1px
background: ${(props) => props.theme.secondaryBackgroundTransparent}; ${({ theme }) => theme.font.color.extraLight};
border-radius: ${(props) => props.theme.borderRadius}; 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};
} }
`; `;

6
front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx
View File

@ -3,16 +3,16 @@ import { useHotkeys } from 'react-hotkeys-hook';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useRecoilState } from 'recoil'; import { useRecoilState } from 'recoil';
import { overlayBackground } from '@/ui/themes/effects';
import { debounce } from '@/utils/debounce'; import { debounce } from '@/utils/debounce';
import { useListenClickOutsideArrayOfRef } from '../../hooks/useListenClickOutsideArrayOfRef'; import { useListenClickOutsideArrayOfRef } from '../../hooks/useListenClickOutsideArrayOfRef';
import { overlayBackground } from '../../layout/styles/themes';
import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState'; import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState';
export const EditableCellEditModeContainer = styled.div<OwnProps>` export const EditableCellEditModeContainer = styled.div<OwnProps>`
align-items: center; align-items: center;
border: 1px solid ${(props) => props.theme.primaryBorder}; border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 4px; border-radius: ${({ theme }) => theme.border.radius.sm};
display: flex; display: flex;
left: ${(props) => left: ${(props) =>
props.editModeHorizontalAlign === 'right' ? 'auto' : '0'}; props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};

4
front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx
View File

@ -2,7 +2,7 @@ import styled from '@emotion/styled';
export const HoverableMenuItem = styled.div` export const HoverableMenuItem = styled.div`
align-items: center; align-items: center;
background: ${(props) => props.theme.primaryBackground}; background: ${({ theme }) => theme.background.primary};
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
@ -14,6 +14,6 @@ export const HoverableMenuItem = styled.div`
width: 100%; width: 100%;
&:hover { &:hover {
background: ${(props) => props.theme.lightBackgroundTransparent}; background: ${({ theme }) => theme.background.transparent.light};
} }
`; `;

2
front/src/modules/ui/components/editable-cell/types/EditableChip.tsx
View File

@ -1,7 +1,7 @@
import { ChangeEvent, ComponentType, ReactNode, useRef, useState } from 'react'; import { ChangeEvent, ComponentType, ReactNode, useRef, useState } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { textInputStyle } from '@/ui/layout/styles/themes'; import { textInputStyle } from '@/ui/themes/effects';
import { EditableCell } from '../EditableCell'; import { EditableCell } from '../EditableCell';

8
front/src/modules/ui/components/editable-cell/types/EditableDate.tsx
View File

@ -15,7 +15,7 @@ export type EditableDateProps = {
const StyledContainer = styled.div` const StyledContainer = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
margin: 0px ${(props) => props.theme.spacing(2)}; margin: 0px ${({ theme }) => theme.spacing(2)};
`; `;
export type StyledCalendarContainerProps = { export type StyledCalendarContainerProps = {
@ -23,10 +23,10 @@ export type StyledCalendarContainerProps = {
}; };
const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>` const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>`
background: ${(props) => props.theme.secondaryBackground}; background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${(props) => props.theme.primaryBorder}; border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px; border-radius: 8px;
box-shadow: ${(props) => props.theme.modalBoxShadow}; box-shadow: ${({ theme }) => theme.boxShadow.strong};
left: -10px; left: -10px;
position: absolute; position: absolute;
top: 10px; top: 10px;

6
front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx
View File

@ -1,7 +1,7 @@
import { ChangeEvent, ReactElement, useRef, useState } from 'react'; import { ChangeEvent, ReactElement, useRef, useState } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { textInputStyle } from '@/ui/layout/styles/themes'; import { textInputStyle } from '@/ui/themes/effects';
import { EditableCell } from '../EditableCell'; import { EditableCell } from '../EditableCell';
@ -20,8 +20,8 @@ const StyledContainer = styled.div`
justify-content: space-between; justify-content: space-between;
& > input:last-child { & > input:last-child {
border-left: 1px solid ${(props) => props.theme.primaryBorder}; border-left: 1px solid ${({ theme }) => theme.border.color.medium};
padding-left: ${(props) => props.theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(2)};
} }
`; `;

2
front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx
View File

@ -2,7 +2,7 @@ import { ChangeEvent, MouseEvent, useRef, useState } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js'; 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 { RawLink } from '../../links/RawLink';
import { EditableCell } from '../EditableCell'; import { EditableCell } from '../EditableCell';

10
front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx
View File

@ -8,12 +8,12 @@ export const EditableRelationCreateButton = styled.button`
cursor: pointer; cursor: pointer;
display: flex; display: flex;
font-family: 'Inter'; font-family: 'Inter';
font-size: ${(props) => props.theme.fontSizeMedium}; font-size: ${({ theme }) => theme.font.size.md};
gap: ${(props) => props.theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
height: 31px; height: 31px;
padding-bottom: ${(props) => props.theme.spacing(1)}; padding-bottom: ${({ theme }) => theme.spacing(1)};
padding-left: ${(props) => props.theme.spacing(1)}; padding-left: ${({ theme }) => theme.spacing(1)};
padding-top: ${(props) => props.theme.spacing(1)}; padding-top: ${({ theme }) => theme.spacing(1)};
user-select: none; user-select: none;
width: 100%; width: 100%;
`; `;

2
front/src/modules/ui/components/editable-cell/types/EditableText.tsx
View File

@ -1,7 +1,7 @@
import { ChangeEvent, useRef, useState } from 'react'; import { ChangeEvent, useRef, useState } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { textInputStyle } from '@/ui/layout/styles/themes'; import { textInputStyle } from '@/ui/themes/effects';
import { EditableCell } from '../EditableCell'; import { EditableCell } from '../EditableCell';

8
front/src/modules/ui/components/form/Checkbox.tsx
View File

@ -15,7 +15,7 @@ const StyledContainer = styled.div`
justify-content: center; justify-content: center;
input[type='checkbox'] { input[type='checkbox'] {
accent-color: ${(props) => props.theme.blue}; accent-color: ${({ theme }) => theme.color.blue};
cursor: pointer; cursor: pointer;
height: 14px; height: 14px;
margin: 2px; margin: 2px;
@ -24,7 +24,7 @@ const StyledContainer = styled.div`
} }
input[type='checkbox']::before { input[type='checkbox']::before {
border: 1px solid ${(props) => props.theme.text40}; border: 1px solid ${({ theme }) => theme.font.color.tertiary};
border-radius: 2px; border-radius: 2px;
content: ''; content: '';
display: block; display: block;
@ -33,11 +33,11 @@ const StyledContainer = styled.div`
} }
input[type='checkbox']:hover::before { 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 { input[type='checkbox']:checked::before {
border: 1px solid ${(props) => props.theme.blue}; border: 1px solid ${({ theme }) => theme.color.blue};
} }
`; `;

56
front/src/modules/ui/components/form/DatePicker.tsx
View File

@ -2,7 +2,7 @@ import React, { forwardRef, ReactElement, useState } from 'react';
import ReactDatePicker, { CalendarContainerProps } from 'react-datepicker'; import ReactDatePicker, { CalendarContainerProps } from 'react-datepicker';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { overlayBackground } from '../../layout/styles/themes'; import { overlayBackground } from '@/ui/themes/effects';
import 'react-datepicker/dist/react-datepicker.css'; import 'react-datepicker/dist/react-datepicker.css';
@ -16,10 +16,10 @@ export type DatePickerProps = {
const StyledContainer = styled.div` const StyledContainer = styled.div`
& .react-datepicker { & .react-datepicker {
border-color: ${(props) => props.theme.primaryBorder}; border-color: ${({ theme }) => theme.border.color.light};
background: transparent; background: transparent;
font-family: 'Inter'; font-family: 'Inter';
font-size: ${(props) => props.theme.fontSizeMedium}; font-size: ${({ theme }) => theme.font.size.md};
border: none; border: none;
display: block; display: block;
font-weight: 400; font-weight: 400;
@ -49,19 +49,19 @@ const StyledContainer = styled.div`
& .react-datepicker__header__dropdown { & .react-datepicker__header__dropdown {
display: flex; display: flex;
margin-left: ${(props) => props.theme.spacing(1)}; margin-left: ${({ theme }) => theme.spacing(1)};
margin-bottom: ${(props) => props.theme.spacing(1)}; margin-bottom: ${({ theme }) => theme.spacing(1)};
} }
& .react-datepicker__month-dropdown-container, & .react-datepicker__month-dropdown-container,
& .react-datepicker__year-dropdown-container { & .react-datepicker__year-dropdown-container {
text-align: left; text-align: left;
border-radius: 4px; border-radius: 4px;
margin-left: ${(props) => props.theme.spacing(1)}; margin-left: ${({ theme }) => theme.spacing(1)};
margin-right: 0; margin-right: 0;
padding: ${(props) => props.theme.spacing(2)}; padding: ${({ theme }) => theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(4)}; padding-right: ${({ theme }) => theme.spacing(4)};
background-color: ${(props) => props.theme.tertiaryBackground}; background-color: ${({ theme }) => theme.background.tertiary};
} }
& .react-datepicker__month-read-view--down-arrow, & .react-datepicker__month-read-view--down-arrow,
@ -69,14 +69,14 @@ const StyledContainer = styled.div`
height: 5px; height: 5px;
width: 5px; width: 5px;
border-width: 1px 1px 0 0; border-width: 1px 1px 0 0;
border-color: ${(props) => props.theme.text40}; border-color: ${({ theme }) => theme.border.color.light};
top: 3px; top: 3px;
right: -6px; right: -6px;
} }
& .react-datepicker__year-read-view, & .react-datepicker__year-read-view,
& .react-datepicker__month-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 { & .react-datepicker__month-dropdown-container {
@ -89,19 +89,19 @@ const StyledContainer = styled.div`
& .react-datepicker__month-dropdown, & .react-datepicker__month-dropdown,
& .react-datepicker__year-dropdown { & .react-datepicker__year-dropdown {
border: ${(props) => props.theme.primaryBorder}; border: ${({ theme }) => theme.border.color.light};
${overlayBackground} ${overlayBackground}
overflow-y: scroll; overflow-y: scroll;
top: ${(props) => props.theme.spacing(2)}; top: ${({ theme }) => theme.spacing(2)};
} }
& .react-datepicker__month-dropdown { & .react-datepicker__month-dropdown {
left: ${(props) => props.theme.spacing(2)}; left: ${({ theme }) => theme.spacing(2)};
width: 160px; width: 160px;
height: 260px; height: 260px;
} }
& .react-datepicker__year-dropdown { & .react-datepicker__year-dropdown {
left: calc(${(props) => props.theme.spacing(9)} + 80px); left: calc(${({ theme }) => theme.spacing(9)} + 80px);
width: 100px; width: 100px;
height: 260px; height: 260px;
} }
@ -118,16 +118,16 @@ const StyledContainer = styled.div`
& .react-datepicker__year-option, & .react-datepicker__year-option,
& .react-datepicker__month-option { & .react-datepicker__month-option {
text-align: left; text-align: left;
padding: ${(props) => props.theme.spacing(2)} padding: ${({ theme }) => theme.spacing(2)}
calc(${(props) => props.theme.spacing(2)} - 2px); calc(${({ theme }) => theme.spacing(2)} - 2px);
width: calc(100% - ${(props) => props.theme.spacing(4)}); width: calc(100% - ${({ theme }) => theme.spacing(4)});
border-radius: 2px; border-radius: 2px;
color: ${(props) => props.theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer; cursor: pointer;
margin: 2px; margin: 2px;
&:hover { &:hover {
background: ${(props) => props.theme.lightBackgroundTransparent}; background: ${({ theme }) => theme.background.transparent.light};
} }
&:first-of-type { &:first-of-type {
@ -144,7 +144,7 @@ const StyledContainer = styled.div`
} }
& .react-datepicker__day-name { & .react-datepicker__day-name {
color: ${(props) => props.theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
width: 34px; width: 34px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
@ -172,7 +172,7 @@ const StyledContainer = styled.div`
border-radius: 4px; border-radius: 4px;
padding-top: 6px; padding-top: 6px;
&:hover { &:hover {
background: ${(props) => props.theme.lightBackgroundTransparent}; background: ${({ theme }) => theme.background.transparent.light};
} }
} }
& .react-datepicker__navigation--previous { & .react-datepicker__navigation--previous {
@ -198,7 +198,7 @@ const StyledContainer = styled.div`
height: 7px; height: 7px;
width: 7px; width: 7px;
border-width: 1px 1px 0 0; border-width: 1px 1px 0 0;
border-color: ${(props) => props.theme.text40}; border-color: ${({ theme }) => theme.font.color.tertiary};
} }
& .react-datepicker__day--keyboard-selected { & .react-datepicker__day--keyboard-selected {
@ -207,20 +207,20 @@ const StyledContainer = styled.div`
& .react-datepicker__day, & .react-datepicker__day,
.react-datepicker__time-name { .react-datepicker__time-name {
color: ${(props) => props.theme.text80}; color: ${({ theme }) => theme.font.color.primary};
} }
& .react-datepicker__day--selected { & .react-datepicker__day--selected {
background-color: ${(props) => props.theme.blue}; background-color: ${({ theme }) => theme.color.blue};
color: ${(props) => props.theme.text0}; color: ${({ theme }) => theme.font.color.inverted};
} }
& .react-datepicker__day--outside-month { & .react-datepicker__day--outside-month {
color: ${(props) => props.theme.text40}; color: ${({ theme }) => theme.font.color.tertiary};
} }
& .react-datepicker__day:hover { & .react-datepicker__day:hover {
color: ${(props) => props.theme.text40}; color: ${({ theme }) => theme.font.color.tertiary};
} }
`; `;

6
front/src/modules/ui/components/inputs/AutosizeTextInput.tsx
View File

@ -22,10 +22,10 @@ const StyledContainer = styled.div`
`; `;
const StyledTextArea = styled(TextareaAutosize)` const StyledTextArea = styled(TextareaAutosize)`
background: ${(props) => props.theme.tertiaryBackground}; background: ${({ theme }) => theme.background.tertiary};
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: ${(props) => props.theme.text80}; color: ${({ theme }) => theme.font.color.primary};
font-family: inherit; font-family: inherit;
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
@ -41,7 +41,7 @@ const StyledTextArea = styled(TextareaAutosize)`
} }
&::placeholder { &::placeholder {
color: ${(props) => props.theme.text30}; color: ${({ theme }) => theme.font.color.light};
font-weight: 400; font-weight: 400;
} }
`; `;

8
front/src/modules/ui/components/inputs/DoubleTextInput.tsx
View File

@ -1,8 +1,6 @@
import { ChangeEvent, useRef } from 'react'; import { ChangeEvent, useRef } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { textInputStyle } from '../../layout/styles/themes';
type OwnProps = { type OwnProps = {
leftValue: string; leftValue: string;
rightValue: string; rightValue: string;
@ -17,16 +15,14 @@ const StyledContainer = styled.div`
justify-content: space-between; justify-content: space-between;
& > input:last-child { & > input:last-child {
border-left: 1px solid ${(props) => props.theme.primaryBorder}; border-left: 1px solid ${({ theme }) => theme.border.color.light};
padding-left: ${(props) => props.theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(2)};
} }
`; `;
const StyledEditInplaceInput = styled.input` const StyledEditInplaceInput = styled.input`
height: 18px; height: 18px;
width: 45%; width: 45%;
${textInputStyle}
`; `;
export function DoubleTextInput({ export function DoubleTextInput({

12
front/src/modules/ui/components/inputs/TextInput.tsx
View File

@ -10,22 +10,22 @@ type OwnProps = Omit<
}; };
const StyledInput = styled.input<{ fullWidth: boolean }>` const StyledInput = styled.input<{ fullWidth: boolean }>`
background-color: ${({ theme }) => theme.lighterBackgroundTransparent}; background-color: ${({ theme }) => theme.background.transparent.lighter};
border: 1px solid ${({ theme }) => theme.lightBorder}; border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 4px; border-radius: 4px;
padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) =>
theme.spacing(3)}; theme.spacing(3)};
color: ${({ theme }) => theme.text80}; color: ${({ theme }) => theme.font.color.primary};
outline: none; outline: none;
width: ${({ fullWidth, theme }) => width: ${({ fullWidth, theme }) =>
fullWidth ? `calc(100% - ${theme.spacing(6)})` : 'auto'}; fullWidth ? `calc(100% - ${theme.spacing(6)})` : 'auto'};
&::placeholder, &::placeholder,
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
color: ${({ theme }) => theme.text30} color: ${({ theme }) => theme.font.color.light}
font-family: ${({ theme }) => theme.fontFamily};; font-family: ${({ theme }) => theme.font.family};;
font-weight: ${({ theme }) => theme.fontWeightMedium}; font-weight: ${({ theme }) => theme.font.weight.medium};
} }
margin-bottom: ${({ theme }) => theme.spacing(3)}; margin-bottom: ${({ theme }) => theme.spacing(3)};
`; `;

4
front/src/modules/ui/components/links/PrimaryLink.tsx
View File

@ -12,8 +12,8 @@ type OwnProps = {
const StyledClickable = styled.div` const StyledClickable = styled.div`
display: flex; display: flex;
a { a {
color: ${({ theme }) => theme.text40}; color: ${({ theme }) => theme.font.color.tertiary};
font-size: ${({ theme }) => theme.fontSizeSmall}; font-size: ${({ theme }) => theme.font.size.sm};
text-decoration: none; text-decoration: none;
} }
`; `;

8
front/src/modules/ui/components/menu/DropdownMenu.tsx
View File

@ -4,11 +4,11 @@ export const DropdownMenu = styled.div`
align-items: center; align-items: center;
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
background: ${(props) => props.theme.secondaryBackgroundTransparent}; background: ${({ theme }) => theme.background.transparent.secondary};
border: 1px solid ${(props) => props.theme.lightBorder}; border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: calc(${(props) => props.theme.borderRadius} * 2); border-radius: ${({ theme }) => theme.border.radius.md};
box-shadow: ${(props) => props.theme.modalBoxShadow}; box-shadow: ${({ theme }) => theme.boxShadow.strong};
display: flex; display: flex;

14
front/src/modules/ui/components/menu/DropdownMenuButton.tsx
View File

@ -1,23 +1,23 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { hoverBackground } from '@/ui/layout/styles/themes'; import { hoverBackground } from '@/ui/themes/effects';
export const DropdownMenuButton = styled.div` export const DropdownMenuButton = styled.div`
--horizontal-padding: ${(props) => props.theme.spacing(1.5)}; --horizontal-padding: ${({ theme }) => theme.spacing(1.5)};
--vertical-padding: ${(props) => props.theme.spacing(2)}; --vertical-padding: ${({ theme }) => theme.spacing(2)};
align-items: center; align-items: center;
border-radius: ${(props) => props.theme.borderRadius}; border-radius: ${({ theme }) => theme.border.radius.md};
color: ${(props) => props.theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: row; 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)); height: calc(32px - 2 * var(--vertical-padding));

6
front/src/modules/ui/components/menu/DropdownMenuCheckableItem.tsx
View File

@ -21,15 +21,15 @@ const StyledLeftContainer = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
gap: ${(props) => props.theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
`; `;
const StyledChildrenContainer = styled.div` const StyledChildrenContainer = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
font-size: ${(props) => props.theme.fontSizeSmall}; font-size: ${({ theme }) => theme.font.size.sm};
gap: ${(props) => props.theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
`; `;
export function DropdownMenuCheckableItem({ export function DropdownMenuCheckableItem({

12
front/src/modules/ui/components/menu/DropdownMenuItem.tsx
View File

@ -1,19 +1,19 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
export const DropdownMenuItem = styled.div` export const DropdownMenuItem = styled.div`
--horizontal-padding: ${(props) => props.theme.spacing(1.5)}; --horizontal-padding: ${({ theme }) => theme.spacing(1.5)};
--vertical-padding: ${(props) => props.theme.spacing(2)}; --vertical-padding: ${({ theme }) => theme.spacing(2)};
align-items: center; align-items: center;
border-radius: ${(props) => props.theme.borderRadius}; border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${(props) => props.theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
display: flex; display: flex;
flex-direction: row; 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)); height: calc(32px - 2 * var(--vertical-padding));

2
front/src/modules/ui/components/menu/DropdownMenuItemContainer.tsx
View File

@ -1,7 +1,7 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
export const DropdownMenuItemContainer = styled.div` export const DropdownMenuItemContainer = styled.div`
--padding: ${(props) => props.theme.spacing(1 / 2)}; --padding: ${({ theme }) => theme.spacing(1 / 2)};
align-items: flex-start; align-items: flex-start;
display: flex; display: flex;

8
front/src/modules/ui/components/menu/DropdownMenuSearch.tsx
View File

@ -1,13 +1,13 @@
import { InputHTMLAttributes } from 'react'; import { InputHTMLAttributes } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { textInputStyle } from '@/ui/layout/styles/themes'; import { textInputStyle } from '@/ui/themes/effects';
export const DropdownMenuSearchContainer = styled.div` export const DropdownMenuSearchContainer = styled.div`
--vertical-padding: ${(props) => props.theme.spacing(1)}; --vertical-padding: ${({ theme }) => theme.spacing(1)};
align-items: center; align-items: center;
border-bottom: 1px solid ${(props) => props.theme.lightBorder}; border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -18,7 +18,7 @@ export const DropdownMenuSearchContainer = styled.div`
`; `;
const StyledEditModeSearchInput = styled.input` const StyledEditModeSearchInput = styled.input`
font-size: ${(props) => props.theme.fontSizeSmall}; font-size: ${({ theme }) => theme.font.size.sm};
${textInputStyle} ${textInputStyle}

8
front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx
View File

@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { IconCheck } from '@/ui/icons/index'; import { IconCheck } from '@/ui/icons/index';
import { hoverBackground } from '@/ui/layout/styles/themes'; import { hoverBackground } from '@/ui/themes/effects';
import { DropdownMenuButton } from './DropdownMenuButton'; import { DropdownMenuButton } from './DropdownMenuButton';
@ -19,7 +19,7 @@ const DropdownMenuSelectableItemContainer = styled(DropdownMenuButton)<Props>`
align-items: center; align-items: center;
background: ${(props) => background: ${(props) =>
props.hovered ? props.theme.lightBackgroundTransparent : 'transparent'}; props.hovered ? props.theme.background.transparent.light : 'transparent'};
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -29,7 +29,7 @@ const StyledLeftContainer = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
gap: ${(props) => props.theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
`; `;
const StyledRightIcon = styled.div` const StyledRightIcon = styled.div`
@ -61,7 +61,7 @@ export function DropdownMenuSelectableItem({
> >
<StyledLeftContainer>{children}</StyledLeftContainer> <StyledLeftContainer>{children}</StyledLeftContainer>
<StyledRightIcon> <StyledRightIcon>
{selected && <IconCheck size={theme.iconSizeMedium} />} {selected && <IconCheck size={theme.icon.size.md} />}
</StyledRightIcon> </StyledRightIcon>
</DropdownMenuSelectableItemContainer> </DropdownMenuSelectableItemContainer>
); );

2
front/src/modules/ui/components/menu/DropdownMenuSeparator.tsx
View File

@ -1,7 +1,7 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
export const DropdownMenuSeparator = styled.div` export const DropdownMenuSeparator = styled.div`
background-color: ${(props) => props.theme.lightBorder}; background-color: ${({ theme }) => theme.border.color.light};
height: 1px; height: 1px;
width: 100%; width: 100%;

2
front/src/modules/ui/components/modal/Modal.tsx
View File

@ -10,7 +10,7 @@ export function Modal({ children }: { children: React.ReactNode }) {
ariaHideApp={false} ariaHideApp={false}
style={{ style={{
overlay: { overlay: {
backgroundColor: theme.modalBackgroundTransparent, backgroundColor: theme.background.overlay,
zIndex: 2, zIndex: 2,
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',

6
front/src/modules/ui/components/section-titles/MainSectionTitle.tsx
View File

@ -6,9 +6,9 @@ type OwnProps = {
}; };
const StyledMainSectionTitle = styled.h2` const StyledMainSectionTitle = styled.h2`
color: ${({ theme }) => theme.text80}; color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.fontSizeExtraLarge}; font-size: ${({ theme }) => theme.font.size.xl};
font-weight: ${({ theme }) => theme.fontWeightBold}; font-weight: ${({ theme }) => theme.font.weight.semiBold};
line-height: 1.5; line-height: 1.5;
`; `;

6
front/src/modules/ui/components/section-titles/SubSectionTitle.tsx
View File

@ -6,9 +6,9 @@ type OwnProps = {
}; };
const StyledSubSectionTitle = styled.h2` const StyledSubSectionTitle = styled.h2`
color: ${({ theme }) => theme.text80}; color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.fontSizeMedium}; font-size: ${({ theme }) => theme.font.size.md};
font-weight: ${({ theme }) => theme.fontWeightBold}; font-weight: ${({ theme }) => theme.font.weight.semiBold};
line-height: 1.5; line-height: 1.5;
`; `;

6
front/src/modules/ui/components/table/ColumnHead.tsx
View File

@ -11,13 +11,13 @@ const StyledTitle = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-weight: 500; font-weight: 500;
height: ${(props) => props.theme.spacing(8)}; height: ${({ theme }) => theme.spacing(8)};
padding-left: ${(props) => props.theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(2)};
`; `;
const StyledIcon = styled.div` const StyledIcon = styled.div`
display: flex; display: flex;
margin-right: ${(props) => props.theme.spacing(1)}; margin-right: ${({ theme }) => theme.spacing(1)};
`; `;
export function ColumnHead({ viewName, viewIcon }: OwnProps) { export function ColumnHead({ viewName, viewIcon }: OwnProps) {

16
front/src/modules/ui/components/table/EntityTable.tsx
View File

@ -40,15 +40,15 @@ const StyledTable = styled.table`
border-radius: 4px; border-radius: 4px;
border-spacing: 0; border-spacing: 0;
margin-left: ${(props) => props.theme.table.horizontalCellMargin}; margin-left: ${({ theme }) => theme.table.horizontalCellMargin};
margin-right: ${(props) => props.theme.table.horizontalCellMargin}; margin-right: ${({ theme }) => theme.table.horizontalCellMargin};
table-layout: fixed; table-layout: fixed;
width: calc(100% - ${(props) => props.theme.table.horizontalCellMargin} * 2); width: calc(100% - ${({ theme }) => theme.table.horizontalCellMargin} * 2);
th { th {
border: 1px solid ${(props) => props.theme.tertiaryBackground}; border: 1px solid ${({ theme }) => theme.background.tertiary};
border-collapse: collapse; border-collapse: collapse;
color: ${(props) => props.theme.text40}; color: ${({ theme }) => theme.font.color.tertiary};
padding: 0; padding: 0;
text-align: left; text-align: left;
@ -66,9 +66,9 @@ const StyledTable = styled.table`
} }
td { td {
border: 1px solid ${(props) => props.theme.tertiaryBackground}; border: 1px solid ${({ theme }) => theme.background.tertiary};
border-collapse: collapse; border-collapse: collapse;
color: ${(props) => props.theme.text80}; color: ${({ theme }) => theme.font.color.primary};
padding: 0; padding: 0;
text-align: left; text-align: left;
@ -102,7 +102,7 @@ const StyledTableScrollableContainer = styled.div`
const StyledRow = styled.tr<{ selected: boolean }>` const StyledRow = styled.tr<{ selected: boolean }>`
background: ${(props) => background: ${(props) =>
props.selected ? props.theme.secondaryBackground : 'none'}; props.selected ? props.theme.background.secondary : 'none'};
`; `;
export function EntityTable<TData extends { id: string }, SortField>({ export function EntityTable<TData extends { id: string }, SortField>({

10
front/src/modules/ui/components/table/action-bar/EntityTableActionBar.tsx
View File

@ -16,17 +16,17 @@ type StyledContainerProps = {
const StyledContainer = styled.div<StyledContainerProps>` const StyledContainer = styled.div<StyledContainerProps>`
align-items: center; align-items: center;
background: ${(props) => props.theme.secondaryBackground}; background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${(props) => props.theme.primaryBorder}; border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px; border-radius: 8px;
bottom: ${(props) => (props.position.x ? 'auto' : '38px')}; bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
box-shadow: ${(props) => props.theme.modalBoxShadow}; box-shadow: ${({ theme }) => theme.boxShadow.strong};
display: flex; display: flex;
height: 48px; height: 48px;
left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')}; left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')};
padding-left: ${(props) => props.theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(2)}; padding-right: ${({ theme }) => theme.spacing(2)};
position: ${(props) => (props.position.x ? 'fixed' : 'absolute')}; position: ${(props) => (props.position.x ? 'fixed' : 'absolute')};
top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')}; top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')};

10
front/src/modules/ui/components/table/action-bar/EntityTableActionBarButton.tsx
View File

@ -15,23 +15,25 @@ type StyledButtonProps = {
const StyledButton = styled.div<StyledButtonProps>` const StyledButton = styled.div<StyledButtonProps>`
border-radius: 4px; border-radius: 4px;
color: ${(props) => 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; cursor: pointer;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: ${(props) => props.theme.spacing(2)}; padding: ${({ theme }) => theme.spacing(2)};
transition: background 0.1s ease; transition: background 0.1s ease;
user-select: none; user-select: none;
&:hover { &:hover {
background: ${(props) => props.theme.tertiaryBackground}; background: ${({ theme }) => theme.background.tertiary};
} }
`; `;
const StyledButtonLabel = styled.div` const StyledButtonLabel = styled.div`
font-weight: 500; font-weight: 500;
margin-left: ${(props) => props.theme.spacing(2)}; margin-left: ${({ theme }) => theme.spacing(2)};
`; `;
export function EntityTableActionBarButton({ export function EntityTableActionBarButton({

55
front/src/modules/ui/components/table/table-header/DropdownButton.tsx
View File

@ -2,12 +2,9 @@ import { ReactNode, useRef } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { IconChevronDown } from '@/ui/icons/index'; import { IconChevronDown } from '@/ui/icons/index';
import { overlayBackground, textInputStyle } from '@/ui/themes/effects';
import { useOutsideAlerter } from '../../../hooks/useOutsideAlerter'; import { useOutsideAlerter } from '../../../hooks/useOutsideAlerter';
import {
overlayBackground,
textInputStyle,
} from '../../../layout/styles/themes';
type OwnProps = { type OwnProps = {
label: string; label: string;
@ -31,17 +28,17 @@ type StyledDropdownButtonProps = {
}; };
const StyledDropdownButton = styled.div<StyledDropdownButtonProps>` const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
background: ${(props) => props.theme.primaryBackground}; background: ${({ theme }) => theme.background.primary};
border-radius: 4px; border-radius: 4px;
color: ${(props) => (props.isActive ? props.theme.blue : 'none')}; color: ${(props) => (props.isActive ? props.theme.color.blue : 'none')};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')}; filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
padding: ${(props) => props.theme.spacing(1)}; padding: ${({ theme }) => theme.spacing(1)};
padding-left: ${(props) => props.theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(2)}; padding-right: ${({ theme }) => theme.spacing(2)};
user-select: none; user-select: none;
&:hover { &:hover {
@ -54,7 +51,7 @@ const StyledDropdown = styled.ul`
--wraper-border: 1px; --wraper-border: 1px;
--wraper-border-radius: 8px; --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); border-radius: var(--wraper-border-radius);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -80,17 +77,17 @@ const StyledDropdown = styled.ul`
const StyledDropdownItem = styled.li` const StyledDropdownItem = styled.li`
align-items: center; align-items: center;
border-radius: 2px; border-radius: 2px;
color: ${(props) => props.theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
margin: 2px; margin: 2px;
padding: ${(props) => props.theme.spacing(2)} padding: ${({ theme }) => theme.spacing(2)}
calc(${(props) => props.theme.spacing(2)} - 2px); calc(${({ theme }) => theme.spacing(2)} - 2px);
user-select: none; user-select: none;
width: calc(160px - ${(props) => props.theme.spacing(4)}); width: calc(160px - ${({ theme }) => theme.spacing(4)});
&:hover { &:hover {
background: ${(props) => props.theme.lightBackgroundTransparent}; background: ${({ theme }) => theme.background.transparent.light};
} }
`; `;
@ -102,18 +99,18 @@ const StyledDropdownItemClipped = styled.span`
const StyledDropdownTopOption = styled.li` const StyledDropdownTopOption = styled.li`
align-items: center; align-items: center;
border-bottom: 1px solid ${(props) => props.theme.lightBorder}; border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
color: ${(props) => props.theme.text80}; color: ${({ theme }) => theme.font.color.primary};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
font-size: ${(props) => props.theme.fontSizeSmall}; font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${(props) => props.theme.fontWeightMedium}; font-weight: ${({ theme }) => theme.font.weight.medium};
justify-content: space-between; justify-content: space-between;
padding: calc(${(props) => props.theme.spacing(2)}) padding: calc(${({ theme }) => theme.spacing(2)})
calc(${(props) => props.theme.spacing(2)}); calc(${({ theme }) => theme.spacing(2)});
&:hover { &:hover {
background: ${(props) => props.theme.lightBackgroundTransparent}; background: ${({ theme }) => theme.background.transparent.light};
} }
user-select: none; user-select: none;
`; `;
@ -121,19 +118,19 @@ const StyledDropdownTopOption = styled.li`
const StyledIcon = styled.div` const StyledIcon = styled.div`
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-right: ${(props) => props.theme.spacing(1)}; margin-right: ${({ theme }) => theme.spacing(1)};
min-width: ${(props) => props.theme.spacing(4)}; min-width: ${({ theme }) => theme.spacing(4)};
`; `;
const StyledSearchField = styled.li` const StyledSearchField = styled.li`
align-items: center; align-items: center;
border-bottom: var(--wraper-border) solid border-bottom: var(--wraper-border) solid
${(props) => props.theme.primaryBorder}; ${({ theme }) => theme.border.color.light};
color: ${(props) => props.theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
font-weight: ${(props) => props.theme.fontWeightMedium}; font-weight: ${({ theme }) => theme.font.weight.medium};
justify-content: space-between; justify-content: space-between;
overflow: hidden; overflow: hidden;
@ -141,7 +138,7 @@ const StyledSearchField = styled.li`
input { input {
border-radius: 8px; border-radius: 8px;
box-sizing: border-box; box-sizing: border-box;
font-family: ${(props) => props.theme.fontFamily}; font-family: ${({ theme }) => theme.font.family};
height: 36px; height: 36px;
padding: 8px; padding: 8px;
width: 100%; width: 100%;
@ -192,7 +189,7 @@ function DropdownButton({
} }
const StyleAngleDownContainer = styled.div` const StyleAngleDownContainer = styled.div`
color: ${(props) => props.theme.text40}; color: ${({ theme }) => theme.font.color.tertiary};
display: flex; display: flex;
height: 100%; height: 100%;
justify-content: center; justify-content: center;

18
front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx
View File

@ -20,7 +20,7 @@ type OwnProps<SortField, TData extends FilterableFieldsType> = {
const StyledBar = styled.div` const StyledBar = styled.div`
align-items: center; align-items: center;
border-top: 1px solid ${(props) => props.theme.primaryBorder}; border-top: 1px solid ${({ theme }) => theme.border.color.light};
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 40px; height: 40px;
@ -31,21 +31,21 @@ const StyledChipcontainer = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: ${(props) => props.theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(1)};
height: 40px; height: 40px;
justify-content: space-between; justify-content: space-between;
margin-left: ${(props) => props.theme.spacing(2)}; margin-left: ${({ theme }) => theme.spacing(2)};
overflow-x: auto; overflow-x: auto;
`; `;
const StyledCancelButton = styled.button` const StyledCancelButton = styled.button`
background-color: inherit; background-color: inherit;
border: none; border: none;
color: ${(props) => props.theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
margin-left: auto; margin-left: auto;
margin-right: ${(props) => props.theme.spacing(2)}; margin-right: ${({ theme }) => theme.spacing(2)};
padding: ${(props) => { padding: ${(props) => {
const horiz = props.theme.spacing(2); const horiz = props.theme.spacing(2);
const vert = props.theme.spacing(1); const vert = props.theme.spacing(1);
@ -54,8 +54,8 @@ const StyledCancelButton = styled.button`
user-select: none; user-select: none;
&:hover { &:hover {
background-color: ${(props) => props.theme.tertiaryBackground}; background-color: ${({ theme }) => theme.background.tertiary};
border-radius: ${(props) => props.theme.spacing(1)}; border-radius: ${({ theme }) => theme.spacing(1)};
} }
`; `;
@ -78,9 +78,9 @@ function SortAndFilterBar<SortField, TData extends FilterableFieldsType>({
id={sort.key} id={sort.key}
icon={ icon={
sort.order === 'desc' ? ( sort.order === 'desc' ? (
<IconArrowNarrowDown size={theme.iconSizeMedium} /> <IconArrowNarrowDown size={theme.icon.size.md} />
) : ( ) : (
<IconArrowNarrowUp size={theme.iconSizeMedium} /> <IconArrowNarrowUp size={theme.icon.size.md} />
) )
} }
onRemove={() => onRemoveSort(sort.key)} onRemove={() => onRemoveSort(sort.key)}

22
front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx
View File

@ -14,30 +14,34 @@ type OwnProps = {
const StyledChip = styled.div` const StyledChip = styled.div`
align-items: center; align-items: center;
background-color: ${(props) => props.theme.blueHighTransparency}; background-color: ${({ theme }) => theme.background.secondary};
border: 1px solid ${(props) => props.theme.blueLowTransparency}; border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: 50px; border-radius: 50px;
color: ${(props) => props.theme.blue}; color: ${({ theme }) => theme.color.blue};
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-shrink: 0; flex-shrink: 0;
font-size: ${(props) => props.theme.fontSizeSmall}; font-size: ${({ theme }) => theme.font.size.sm};
padding: ${(props) => props.theme.spacing(1) + ' ' + props.theme.spacing(2)}; padding: ${({ theme }) => theme.spacing(1) + ' ' + theme.spacing(2)};
`; `;
const StyledIcon = styled.div` const StyledIcon = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
margin-right: ${(props) => props.theme.spacing(1)}; margin-right: ${({ theme }) => theme.spacing(1)};
`; `;
const StyledDelete = styled.div` const StyledDelete = styled.div`
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
font-size: ${(props) => props.theme.fontSizeSmall}; font-size: ${({ theme }) => theme.font.size.sm};
margin-left: ${(props) => props.theme.spacing(2)}; margin-left: ${({ theme }) => theme.spacing(2)};
margin-top: 1px; margin-top: 1px;
user-select: none; user-select: none;
&:hover {
background-color: ${({ theme }) => theme.background.tertiary};
border-radius: ${({ theme }) => theme.border.radius.sm};
}
`; `;
const StyledLabelKey = styled.div` const StyledLabelKey = styled.div`
@ -58,7 +62,7 @@ function SortOrFilterChip({
{labelKey && <StyledLabelKey>{labelKey}:&nbsp;</StyledLabelKey>} {labelKey && <StyledLabelKey>{labelKey}:&nbsp;</StyledLabelKey>}
{labelValue} {labelValue}
<StyledDelete onClick={onRemove} data-testid={'remove-icon-' + id}> <StyledDelete onClick={onRemove} data-testid={'remove-icon-' + id}>
<IconX size={theme.iconSizeMedium} /> <IconX size={theme.icon.size.sm} stroke={theme.icon.stroke.sm} />
</StyledDelete> </StyledDelete>
</StyledChip> </StyledChip>
); );

10
front/src/modules/ui/components/table/table-header/TableHeader.tsx
View File

@ -31,22 +31,22 @@ const StyledContainer = styled.div`
const StyledTableHeader = styled.div` const StyledTableHeader = styled.div`
align-items: center; align-items: center;
color: ${(props) => props.theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-weight: 500; font-weight: 500;
height: 40px; height: 40px;
justify-content: space-between; justify-content: space-between;
padding-left: ${(props) => props.theme.spacing(3)}; padding-left: ${({ theme }) => theme.spacing(3)};
padding-right: ${(props) => props.theme.spacing(2)}; padding-right: ${({ theme }) => theme.spacing(2)};
`; `;
const StyledIcon = styled.div` const StyledIcon = styled.div`
display: flex; display: flex;
margin-right: ${(props) => props.theme.spacing(2)}; margin-right: ${({ theme }) => theme.spacing(2)};
& > svg { & > svg {
font-size: ${(props) => props.theme.iconSizeSmall}; font-size: ${({ theme }) => theme.icon.size.sm};
} }
`; `;

5
front/src/modules/ui/layout/DefaultLayout.tsx
View File

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

4
front/src/modules/ui/layout/Panel.tsx
View File

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

10
front/src/modules/ui/layout/containers/ContentContainer.tsx
View File

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

2
front/src/modules/ui/layout/containers/NoTopBarContainer.tsx
View File

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

4
front/src/modules/ui/layout/navbar/NavCollapseButton.tsx
View File

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

40
front/src/modules/ui/layout/navbar/NavItem.tsx
View File

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

10
front/src/modules/ui/layout/navbar/NavTitle.tsx
View File

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

12
front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx
View File

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

5
front/src/modules/ui/layout/navbar/NavbarContainer.tsx
View File

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

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

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

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

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

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

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

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

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

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

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

2
front/src/modules/ui/layout/states/isNavbarOpenedState.ts
View File

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

BIN
front/src/modules/ui/layout/styles/assets/dark-noise.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

18
front/src/modules/ui/layout/styles/colors/background.ts
View File

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

11
front/src/modules/ui/layout/styles/colors/border.ts
View File

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

25
front/src/modules/ui/layout/styles/colors/index.ts
View File

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

3
front/src/modules/ui/layout/styles/colors/modal.ts
View File

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

1
front/src/modules/ui/layout/styles/colors/palette.ts
View File

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

19
front/src/modules/ui/layout/styles/colors/text.ts
View File

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

19
front/src/modules/ui/layout/styles/colors/transparent.ts
View File

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

32
front/src/modules/ui/layout/styles/effects.ts
View File

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

21
front/src/modules/ui/layout/styles/texts.ts
View File

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

67
front/src/modules/ui/layout/styles/themes.ts
View File

@ -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;

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

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

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

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

BIN
front/src/modules/ui/themes/assets/dark-noise.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 203 KiB

0
front/src/modules/ui/layout/styles/assets/light-noise.jpg → front/src/modules/ui/themes/assets/light-noise.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

37
front/src/modules/ui/themes/background.ts Normal file
View File

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

4
front/src/modules/ui/themes/blur.ts Normal file
View File

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

28
front/src/modules/ui/themes/border.ts Normal file
View File

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

23
front/src/modules/ui/themes/boxShadow.ts Normal file
View File

@ -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)}`,
};

121
front/src/modules/ui/themes/colors.ts Normal file
View File

@ -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})`;
}

34
front/src/modules/ui/themes/effects.ts Normal file
View File

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

42
front/src/modules/ui/themes/font.ts Normal file
View File

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

Some files were not shown because too many files have changed in this diff Show More