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 { ThemeProvider } from '@emotion/react';
import { withThemeFromJSXProvider } from "@storybook/addon-styling";
import { lightTheme, darkTheme } from '../src/modules/ui/layout/styles/themes';
import { lightTheme, darkTheme } from '../src/modules/ui/themes/themes';
initialize();

1
front/package.json
View File

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

12
front/src/AppNavbar.tsx
View File

@ -31,37 +31,37 @@ export function AppNavbar() {
<NavItem
label="Search"
to="/search"
icon={<IconSearch size={theme.iconSizeMedium} />}
icon={<IconSearch size={theme.icon.size.md} />}
soon={true}
/>
<NavItem
label="Inbox"
to="/inbox"
icon={<IconInbox size={theme.iconSizeMedium} />}
icon={<IconInbox size={theme.icon.size.md} />}
soon={true}
/>
<NavItem
label="Settings"
to="/settings/profile"
icon={<IconSettings size={theme.iconSizeMedium} />}
icon={<IconSettings size={theme.icon.size.md} />}
/>
<NavTitle label="Workspace" />
<NavItem
label="People"
to="/people"
icon={<IconUser size={theme.iconSizeMedium} />}
icon={<IconUser size={theme.icon.size.md} />}
active={currentPath === '/people'}
/>
<NavItem
label="Companies"
to="/companies"
icon={<IconBuildingSkyscraper size={theme.iconSizeMedium} />}
icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
active={currentPath === '/companies'}
/>
<NavItem
label="Opportunities"
to="/opportunities"
icon={<IconTargetArrow size={theme.iconSizeMedium} />}
icon={<IconTargetArrow size={theme.icon.size.md} />}
active={currentPath === '/opportunities'}
/>
</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 { isAuthenticatingState } from '@/auth/states/isAuthenticatingState';
import { darkTheme } from '@/ui/layout/styles/themes';
import { darkTheme } from '@/ui/themes/themes';
import { App } from '~/App';
import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
import { mockedUsersData } from '~/testing/mock-data/users';

3
front/src/index.tsx
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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`
align-items: center;
background: ${(props) => props.theme.primaryBackground};
background: ${({ theme }) => theme.background.primary};
display: flex;
height: fit-content;

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

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

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

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

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

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

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

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

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

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

@ -31,7 +31,7 @@ export function SettingsNavbar() {
<NavItem
label="Profile"
to="/settings/profile"
icon={<IconUser size={theme.iconSizeMedium} />}
icon={<IconUser size={theme.icon.size.md} />}
active={
!!useMatch({
path: useResolvedPath('/people').pathname,
@ -42,7 +42,7 @@ export function SettingsNavbar() {
<NavItem
label="Experience"
to="/settings/profile/experience"
icon={<IconColorSwatch size={theme.iconSizeMedium} />}
icon={<IconColorSwatch size={theme.icon.size.md} />}
soon={true}
active={
!!useMatch({
@ -55,7 +55,7 @@ export function SettingsNavbar() {
<NavItem
label="General"
to="/settings/workspace"
icon={<IconSettings size={theme.iconSizeMedium} />}
icon={<IconSettings size={theme.icon.size.md} />}
soon={true}
active={
!!useMatch({
@ -68,7 +68,7 @@ export function SettingsNavbar() {
<NavItem
label="Logout"
onClick={handleLogout}
icon={<IconLogout size={theme.iconSizeMedium} />}
icon={<IconLogout size={theme.icon.size.md} />}
danger={true}
/>
</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';
export const StyledColumn = styled.div`
background-color: ${({ theme }) => theme.primaryBackground};
background-color: ${({ theme }) => theme.background.primary};
display: flex;
flex-direction: column;
min-width: 200px;
@ -12,10 +12,10 @@ export const StyledColumn = styled.div`
export const StyledColumnTitle = styled.h3`
color: ${({ color }) => color};
font-family: 'Inter';
font-size: ${({ theme }) => theme.fontSizeMedium};
font-size: ${({ theme }) => theme.font.size.md};
font-style: normal;
font-weight: ${({ theme }) => theme.fontWeightMedium};
line-height: ${({ theme }) => theme.lineHeight};
font-weight: ${({ theme }) => theme.font.weight.medium};
line-height: ${({ theme }) => theme.text.lineHeight};
margin: 0;
margin-bottom: ${({ theme }) => theme.spacing(2)};
`;

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`
align-items: center;
align-self: baseline;
background-color: ${({ theme }) => theme.primaryBackground};
background-color: ${({ theme }) => theme.background.primary};
border: none;
border-radius: ${({ theme }) => theme.borderRadius};
color: ${({ theme }) => theme.text40};
border-radius: ${({ theme }) => theme.border.radius.md};
color: ${({ theme }) => theme.font.color.tertiary};
cursor: pointer;
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
justify-content: center;
padding: ${(props) => props.theme.spacing(1)};
padding: ${({ theme }) => theme.spacing(1)};
&:hover {
background-color: ${({ theme }) => theme.secondaryBackground};
background-color: ${({ theme }) => theme.background.secondary};
}
`;
@ -30,7 +30,7 @@ export function NewButton({ onClick }: OwnProps) {
return (
<StyledButton onClick={onClick}>
<IconPlus size={theme.iconSizeMedium} />
<IconPlus size={theme.icon.size.md} />
New
</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`
align-items: center;
background: ${(props) => props.theme.blue};
background: ${({ theme }) => theme.color.blue};
border: none;
border-radius: 50%;
color: ${(props) => props.theme.text0};
color: ${({ theme }) => theme.font.color.inverted};
cursor: pointer;
display: flex;
@ -19,8 +19,8 @@ const StyledIconButton = styled.button`
width: 20px;
&:disabled {
background: ${(props) => props.theme.quaternaryBackground};
color: ${(props) => props.theme.text40};
background: ${({ theme }) => theme.background.quaternary};
color: ${({ theme }) => theme.font.color.tertiary};
cursor: default;
}
`;

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

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

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

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

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

@ -6,19 +6,21 @@ export const EditableCellNormalModeOuterContainer = styled.div`
display: flex;
height: 100%;
overflow: hidden;
padding-left: ${(props) => props.theme.spacing(2)};
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(1)};
padding-right: ${({ theme }) => theme.spacing(1)};
width: 100%;
&:hover {
-moz-box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20};
-moz-box-shadow: inset 0 0 0 1px
${({ theme }) => theme.font.color.extraLight};
-webkit-box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20};
background: ${(props) => props.theme.secondaryBackgroundTransparent};
border-radius: ${(props) => props.theme.borderRadius};
-webkit-box-shadow: inset 0 0 0 1px
${({ theme }) => theme.font.color.extraLight};
background: ${({ theme }) => theme.background.transparent.secondary};
border-radius: ${({ theme }) => theme.border.radius.md};
box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20};
box-shadow: inset 0 0 0 1px ${({ theme }) => theme.font.color.extraLight};
}
`;

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

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

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 styled from '@emotion/styled';
import { textInputStyle } from '@/ui/layout/styles/themes';
import { textInputStyle } from '@/ui/themes/effects';
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`
align-items: center;
display: flex;
margin: 0px ${(props) => props.theme.spacing(2)};
margin: 0px ${({ theme }) => theme.spacing(2)};
`;
export type StyledCalendarContainerProps = {
@ -23,10 +23,10 @@ export type StyledCalendarContainerProps = {
};
const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>`
background: ${(props) => props.theme.secondaryBackground};
border: 1px solid ${(props) => props.theme.primaryBorder};
background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px;
box-shadow: ${(props) => props.theme.modalBoxShadow};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
left: -10px;
position: absolute;
top: 10px;

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

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 { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js';
import { textInputStyle } from '@/ui/layout/styles/themes';
import { textInputStyle } from '@/ui/themes/effects';
import { RawLink } from '../../links/RawLink';
import { EditableCell } from '../EditableCell';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -40,15 +40,15 @@ const StyledTable = styled.table`
border-radius: 4px;
border-spacing: 0;
margin-left: ${(props) => props.theme.table.horizontalCellMargin};
margin-right: ${(props) => props.theme.table.horizontalCellMargin};
margin-left: ${({ theme }) => theme.table.horizontalCellMargin};
margin-right: ${({ theme }) => theme.table.horizontalCellMargin};
table-layout: fixed;
width: calc(100% - ${(props) => props.theme.table.horizontalCellMargin} * 2);
width: calc(100% - ${({ theme }) => theme.table.horizontalCellMargin} * 2);
th {
border: 1px solid ${(props) => props.theme.tertiaryBackground};
border: 1px solid ${({ theme }) => theme.background.tertiary};
border-collapse: collapse;
color: ${(props) => props.theme.text40};
color: ${({ theme }) => theme.font.color.tertiary};
padding: 0;
text-align: left;
@ -66,9 +66,9 @@ const StyledTable = styled.table`
}
td {
border: 1px solid ${(props) => props.theme.tertiaryBackground};
border: 1px solid ${({ theme }) => theme.background.tertiary};
border-collapse: collapse;
color: ${(props) => props.theme.text80};
color: ${({ theme }) => theme.font.color.primary};
padding: 0;
text-align: left;
@ -102,7 +102,7 @@ const StyledTableScrollableContainer = styled.div`
const StyledRow = styled.tr<{ selected: boolean }>`
background: ${(props) =>
props.selected ? props.theme.secondaryBackground : 'none'};
props.selected ? props.theme.background.secondary : 'none'};
`;
export function EntityTable<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>`
align-items: center;
background: ${(props) => props.theme.secondaryBackground};
border: 1px solid ${(props) => props.theme.primaryBorder};
background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px;
bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
box-shadow: ${(props) => props.theme.modalBoxShadow};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
display: flex;
height: 48px;
left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')};
padding-left: ${(props) => props.theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(2)};
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(2)};
position: ${(props) => (props.position.x ? 'fixed' : 'absolute')};
top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')};

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

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

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

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

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

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

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 { AppNavbar } from '~/AppNavbar';
import { MOBILE_VIEWPORT } from '../themes/themes';
import { NavbarContainer } from './navbar/NavbarContainer';
import { isNavbarOpenedState } from './states/isNavbarOpenedState';
import { MOBILE_VIEWPORT } from './styles/themes';
const StyledLayout = styled.div`
background: ${(props) => props.theme.noisyBackground};
background: ${({ theme }) => theme.background.noisy};
display: flex;
flex-direction: row;
height: 100vh;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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`
display: flex;
flex-direction: row;
width: ${(props) => props.theme.rightDrawerWidth};
width: ${({ theme }) => theme.rightDrawerWidth};
`;
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`
align-items: center;
border-bottom: 1px solid ${(props) => props.theme.lightBorder};
color: ${(props) => props.theme.text60};
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
color: ${({ theme }) => theme.font.color.secondary};
display: flex;
flex-direction: row;
font-size: 13px;
@ -18,7 +18,7 @@ const StyledRightDrawerTopBar = styled.div`
const StyledTopBarTitle = styled.div`
align-items: center;
font-weight: 500;
margin-right: ${(props) => props.theme.spacing(1)};
margin-right: ${({ theme }) => theme.spacing(1)};
`;
export function RightDrawerTopBar({

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

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

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

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

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

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

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