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
front/.storybook/preview.ts
+1 -1
View File
@@ -2,7 +2,7 @@ import { initialize, mswDecorator } from 'msw-storybook-addon';
import { Preview } from '@storybook/react'; import { Preview } from '@storybook/react';
import { ThemeProvider } from '@emotion/react'; import { ThemeProvider } from '@emotion/react';
import { withThemeFromJSXProvider } from "@storybook/addon-styling"; import { withThemeFromJSXProvider } from "@storybook/addon-styling";
import { lightTheme, darkTheme } from '../src/modules/ui/layout/styles/themes'; import { lightTheme, darkTheme } from '../src/modules/ui/themes/themes';
initialize(); initialize();
front/package.json
+1
View File
@@ -19,6 +19,7 @@
"cmdk": "^0.2.0", "cmdk": "^0.2.0",
"date-fns": "^2.30.0", "date-fns": "^2.30.0",
"graphql": "^16.6.0", "graphql": "^16.6.0",
"hex-rgb": "^5.0.0",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
"jwt-decode": "^3.1.2", "jwt-decode": "^3.1.2",
"libphonenumber-js": "^1.10.26", "libphonenumber-js": "^1.10.26",
front/src/AppNavbar.tsx
+6 -6
View File
@@ -31,37 +31,37 @@ export function AppNavbar() {
<NavItem <NavItem
label="Search" label="Search"
to="/search" to="/search"
icon={<IconSearch size={theme.iconSizeMedium} />} icon={<IconSearch size={theme.icon.size.md} />}
soon={true} soon={true}
/> />
<NavItem <NavItem
label="Inbox" label="Inbox"
to="/inbox" to="/inbox"
icon={<IconInbox size={theme.iconSizeMedium} />} icon={<IconInbox size={theme.icon.size.md} />}
soon={true} soon={true}
/> />
<NavItem <NavItem
label="Settings" label="Settings"
to="/settings/profile" to="/settings/profile"
icon={<IconSettings size={theme.iconSizeMedium} />} icon={<IconSettings size={theme.icon.size.md} />}
/> />
<NavTitle label="Workspace" /> <NavTitle label="Workspace" />
<NavItem <NavItem
label="People" label="People"
to="/people" to="/people"
icon={<IconUser size={theme.iconSizeMedium} />} icon={<IconUser size={theme.icon.size.md} />}
active={currentPath === '/people'} active={currentPath === '/people'}
/> />
<NavItem <NavItem
label="Companies" label="Companies"
to="/companies" to="/companies"
icon={<IconBuildingSkyscraper size={theme.iconSizeMedium} />} icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
active={currentPath === '/companies'} active={currentPath === '/companies'}
/> />
<NavItem <NavItem
label="Opportunities" label="Opportunities"
to="/opportunities" to="/opportunities"
icon={<IconTargetArrow size={theme.iconSizeMedium} />} icon={<IconTargetArrow size={theme.icon.size.md} />}
active={currentPath === '/opportunities'} active={currentPath === '/opportunities'}
/> />
</NavItemsContainer> </NavItemsContainer>
front/src/__stories__/shared.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { RecoilRoot, useRecoilState } from 'recoil';
import { currentUserState } from '@/auth/states/currentUserState'; import { currentUserState } from '@/auth/states/currentUserState';
import { isAuthenticatingState } from '@/auth/states/isAuthenticatingState'; import { isAuthenticatingState } from '@/auth/states/isAuthenticatingState';
import { darkTheme } from '@/ui/layout/styles/themes'; import { darkTheme } from '@/ui/themes/themes';
import { App } from '~/App'; import { App } from '~/App';
import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout'; import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
import { mockedUsersData } from '~/testing/mock-data/users'; import { mockedUsersData } from '~/testing/mock-data/users';
front/src/index.tsx
+2 -1
View File
@@ -2,9 +2,10 @@ import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import { RecoilRoot } from 'recoil'; import { RecoilRoot } from 'recoil';
import { ThemeType } from '@/ui/themes/themes';
import '@emotion/react'; import '@emotion/react';
import { ThemeType } from './modules/ui/layout/styles/themes';
import { AppWrapper } from './AppWrapper'; import { AppWrapper } from './AppWrapper';
import './index.css'; import './index.css';
front/src/modules/auth/components/ui/FooterNote.tsx
+2 -2
View File
@@ -7,9 +7,9 @@ type OwnProps = {
const StyledContainer = styled.div` const StyledContainer = styled.div`
align-items: center; align-items: center;
color: ${({ theme }) => theme.text40}; color: ${({ theme }) => theme.font.color.tertiary};
display: flex; display: flex;
font-size: ${({ theme }) => theme.fontSizeSmall}px; font-size: ${({ theme }) => theme.font.size.sm}px;
padding-left: ${({ theme }) => theme.spacing(14)}; padding-left: ${({ theme }) => theme.spacing(14)};
padding-right: ${({ theme }) => theme.spacing(14)}; padding-right: ${({ theme }) => theme.spacing(14)};
text-align: center; text-align: center;
front/src/modules/auth/components/ui/HorizontalSeparator.tsx
+3 -3
View File
@@ -1,10 +1,10 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
const Separator = styled.div` const Separator = styled.div`
background-color: ${(props) => props.theme.mediumBorder}; background-color: ${({ theme }) => theme.border.color.medium};
height: 1px; height: 1px;
margin-bottom: ${(props) => props.theme.spacing(3)}; margin-bottom: ${({ theme }) => theme.spacing(3)};
margin-top: ${(props) => props.theme.spacing(3)}; margin-top: ${({ theme }) => theme.spacing(3)};
width: 100%; width: 100%;
`; `;
front/src/modules/auth/components/ui/InputLabel.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ type OwnProps = {
}; };
const StyledContainer = styled.div` const StyledContainer = styled.div`
font-weight: ${({ theme }) => theme.fontWeightMedium}; font-weight: ${({ theme }) => theme.font.weight.medium};
margin-bottom: ${({ theme }) => theme.spacing(4)}; margin-bottom: ${({ theme }) => theme.spacing(4)};
margin-top: ${({ theme }) => theme.spacing(4)}; margin-top: ${({ theme }) => theme.spacing(4)};
`; `;
front/src/modules/auth/components/ui/SubTitle.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ type OwnProps = {
}; };
const StyledSubTitle = styled.div` const StyledSubTitle = styled.div`
color: ${({ theme }) => theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
margin-top: ${({ theme }) => theme.spacing(2)}; margin-top: ${({ theme }) => theme.spacing(2)};
`; `;
front/src/modules/auth/components/ui/Title.tsx
+2 -2
View File
@@ -6,8 +6,8 @@ type OwnProps = {
}; };
const StyledTitle = styled.div` const StyledTitle = styled.div`
font-size: ${({ theme }) => theme.fontSizeExtraLarge}; font-size: ${({ theme }) => theme.font.size.xl};
font-weight: ${({ theme }) => theme.fontWeightSemibold}; font-weight: ${({ theme }) => theme.font.weight.semiBold};
margin-top: ${({ theme }) => theme.spacing(10)}; margin-top: ${({ theme }) => theme.spacing(10)};
`; `;
front/src/modules/command-menu/components/CommandMenuStyles.tsx
+39 -39
View File
@@ -2,10 +2,10 @@ import styled from '@emotion/styled';
import { Command } from 'cmdk'; import { Command } from 'cmdk';
export const StyledDialog = styled(Command.Dialog)` export const StyledDialog = styled(Command.Dialog)`
background: ${(props) => props.theme.primaryBackground}; background: ${({ theme }) => theme.background.primary};
border-radius: ${(props) => props.theme.borderRadius}; border-radius: ${({ theme }) => theme.border.radius.md};
box-shadow: ${(props) => props.theme.heavyBoxShadow}; box-shadow: ${({ theme }) => theme.boxShadow.strong};
font-family: ${(props) => props.theme.fontFamily}; font-family: ${({ theme }) => theme.font.family};
left: 50%; left: 50%;
max-width: 640px; max-width: 640px;
overflow: hidden; overflow: hidden;
@@ -17,51 +17,51 @@ export const StyledDialog = styled(Command.Dialog)`
`; `;
export const StyledInput = styled(Command.Input)` export const StyledInput = styled(Command.Input)`
background: ${(props) => props.theme.primaryBackground}; background: ${({ theme }) => theme.background.primary};
border: none; border: none;
border-bottom: 1px solid ${(props) => props.theme.primaryBorder}; border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 0; border-radius: 0;
color: ${(props) => props.theme.text100}; color: ${({ theme }) => theme.font.color.primary};
font-size: ${(props) => props.theme.fontSizeLarge}; font-size: ${({ theme }) => theme.font.size.lg};
margin: 0; margin: 0;
outline: none; outline: none;
padding: ${(props) => props.theme.spacing(5)}; padding: ${({ theme }) => theme.spacing(5)};
width: 100%; width: 100%;
`; `;
export const StyledMenuItem = styled(Command.Item)` export const StyledMenuItem = styled(Command.Item)`
align-items: center; align-items: center;
color: ${(props) => props.theme.text80}; color: ${({ theme }) => theme.font.color.primary};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
font-size: ${(props) => props.theme.fontSizeMedium}; font-size: ${({ theme }) => theme.font.size.md};
gap: ${(props) => props.theme.spacing(3)}; gap: ${({ theme }) => theme.spacing(3)};
height: 40px; height: 40px;
justify-content: space-between; justify-content: space-between;
padding: 0 ${(props) => props.theme.spacing(4)}; padding: 0 ${({ theme }) => theme.spacing(4)};
position: relative; position: relative;
transition: all 150ms ease; transition: all 150ms ease;
transition-property: none; transition-property: none;
user-select: none; user-select: none;
&:hover { &:hover {
background: ${(props) => props.theme.lightBackgroundTransparent}; background: ${({ theme }) => theme.background.transparent.light};
} }
&[data-selected='true'] { &[data-selected='true'] {
background: ${(props) => props.theme.tertiaryBackground}; background: ${({ theme }) => theme.background.tertiary};
/* Could be nice to add a caret like this for better accessibility in the future /* Could be nice to add a caret like this for better accessibility in the future
But it needs to be consistend with other picker dropdown (e.g. company) But it needs to be consistend with other picker dropdown (e.g. company)
&:after { &:after {
background: ${(props) => props.theme.quaternaryBackground}; background: ${({ theme }) => theme.background.quaternary};
content: ''; content: '';
height: 100%; height: 100%;
left: 0; left: 0;
position: absolute; position: absolute;
width: 3px; width: 3px;
z-index: ${(props) => props.theme.lastLayerZIndex}; z-index: ${({ theme }) => theme.lastLayerZIndex};
} */ } */
} }
&[data-disabled='true'] { &[data-disabled='true'] {
color: ${(props) => props.theme.text30}; color: ${({ theme }) => theme.font.color.light};
cursor: not-allowed; cursor: not-allowed;
} }
svg { svg {
@@ -71,7 +71,7 @@ export const StyledMenuItem = styled(Command.Item)`
`; `;
export const StyledList = styled(Command.List)` export const StyledList = styled(Command.List)`
background: ${(props) => props.theme.secondaryBackground}; background: ${({ theme }) => theme.background.secondary};
height: min(300px, var(--cmdk-list-height)); height: min(300px, var(--cmdk-list-height));
max-height: 400px; max-height: 400px;
overflow: auto; overflow: auto;
@@ -83,14 +83,14 @@ export const StyledList = styled(Command.List)`
export const StyledGroup = styled(Command.Group)` export const StyledGroup = styled(Command.Group)`
[cmdk-group-heading] { [cmdk-group-heading] {
align-items: center; align-items: center;
color: ${(props) => props.theme.text30}; color: ${({ theme }) => theme.font.color.light};
display: flex; display: flex;
font-size: ${(props) => props.theme.fontSizeExtraSmall}; font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${(props) => props.theme.fontWeightBold}; font-weight: ${({ theme }) => theme.font.weight.semiBold};
padding-bottom: ${(props) => props.theme.spacing(2)}; padding-bottom: ${({ theme }) => theme.spacing(2)};
padding-left: ${(props) => props.theme.spacing(4)}; padding-left: ${({ theme }) => theme.spacing(4)};
padding-right: ${(props) => props.theme.spacing(4)}; padding-right: ${({ theme }) => theme.spacing(4)};
padding-top: ${(props) => props.theme.spacing(2)}; padding-top: ${({ theme }) => theme.spacing(2)};
text-transform: uppercase; text-transform: uppercase;
user-select: none; user-select: none;
} }
@@ -98,9 +98,9 @@ export const StyledGroup = styled(Command.Group)`
export const StyledEmpty = styled(Command.Empty)` export const StyledEmpty = styled(Command.Empty)`
align-items: center; align-items: center;
color: ${(props) => props.theme.text30}; color: ${({ theme }) => theme.font.color.light};
display: flex; display: flex;
font-size: ${(props) => props.theme.fontSizeMedium}; font-size: ${({ theme }) => theme.font.size.md};
height: 64px; height: 64px;
justify-content: center; justify-content: center;
white-space: pre-wrap; white-space: pre-wrap;
@@ -111,28 +111,28 @@ export const StyledSeparator = styled(Command.Separator)``;
export const StyledIconAndLabelContainer = styled.div` export const StyledIconAndLabelContainer = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
gap: ${(props) => props.theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
`; `;
export const StyledIconContainer = styled.div` export const StyledIconContainer = styled.div`
align-items: center; align-items: center;
background: ${(props) => props.theme.lightBackgroundTransparent}; background: ${({ theme }) => theme.background.transparent.light};
border-radius: 4px; border-radius: 4px;
color: ${(props) => props.theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
display: flex; display: flex;
padding: ${(props) => props.theme.spacing(1)}; padding: ${({ theme }) => theme.spacing(1)};
`; `;
export const StyledShortCut = styled.div` export const StyledShortCut = styled.div`
background-color: ${(props) => props.theme.lightBackgroundTransparent}; background-color: ${({ theme }) => theme.background.transparent.light};
border-radius: 4px; border-radius: 4px;
color: ${(props) => props.theme.text30}; color: ${({ theme }) => theme.font.color.light};
margin-left: ${(props) => props.theme.spacing(1)}; margin-left: ${({ theme }) => theme.spacing(1)};
margin-right: ${(props) => props.theme.spacing(1)}; margin-right: ${({ theme }) => theme.spacing(1)};
padding: ${(props) => props.theme.spacing(1)}; padding: ${({ theme }) => theme.spacing(1)};
`; `;
export const StyledShortcutsContainer = styled.div` export const StyledShortcutsContainer = styled.div`
align-items: center; align-items: center;
color: ${(props) => props.theme.text30}; color: ${({ theme }) => theme.font.color.light};
display: flex; display: flex;
font-size: ${(props) => props.theme.fontSizeSmall}; font-size: ${({ theme }) => theme.font.size.sm};
`; `;
front/src/modules/comments/components/CommentChip.tsx
+6 -6
View File
@@ -12,10 +12,10 @@ const StyledChip = styled.div`
align-items: center; align-items: center;
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
background: ${(props) => props.theme.primaryBackgroundTransparent}; background: ${({ theme }) => theme.background.transparent.primary};
border-radius: ${(props) => props.theme.borderRadius}; border-radius: ${({ theme }) => theme.border.radius.md};
color: ${(props) => props.theme.text30}; color: ${({ theme }) => theme.font.color.light};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -31,8 +31,8 @@ const StyledChip = styled.div`
padding-right: 4px; padding-right: 4px;
&:hover { &:hover {
background: ${(props) => props.theme.tertiaryBackground}; background: ${({ theme }) => theme.background.tertiary};
color: ${(props) => props.theme.text40}; color: ${({ theme }) => theme.font.color.tertiary};
} }
user-select: none; user-select: none;
@@ -56,7 +56,7 @@ export function CommentChip({ count, onClick }: CommentChipProps) {
return ( return (
<StyledChip data-testid="comment-chip" onClick={onClick}> <StyledChip data-testid="comment-chip" onClick={onClick}>
<StyledCount>{formattedCount}</StyledCount> <StyledCount>{formattedCount}</StyledCount>
<IconComment size={theme.iconSizeMedium} /> <IconComment size={theme.icon.size.md} />
</StyledChip> </StyledChip>
); );
} }
front/src/modules/comments/components/CommentHeader.tsx
+10 -10
View File
@@ -20,15 +20,15 @@ const StyledContainer = styled.div`
flex-direction: row; flex-direction: row;
gap: ${(props) => props.theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(1)};
justify-content: flex-start; justify-content: flex-start;
padding: ${(props) => props.theme.spacing(1)}; padding: ${({ theme }) => theme.spacing(1)};
`; `;
const StyledName = styled.div` const StyledName = styled.div`
color: ${(props) => props.theme.text80}; color: ${({ theme }) => theme.font.color.primary};
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
max-width: 160px; max-width: 160px;
@@ -38,25 +38,25 @@ const StyledName = styled.div`
`; `;
const StyledDate = styled.div` const StyledDate = styled.div`
color: ${(props) => props.theme.text30}; color: ${({ theme }) => theme.font.color.light};
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
margin-left: ${(props) => props.theme.spacing(1)}; margin-left: ${({ theme }) => theme.spacing(1)};
padding-top: 1.5px; padding-top: 1.5px;
`; `;
const StyledTooltip = styled(Tooltip)` const StyledTooltip = styled(Tooltip)`
background-color: ${(props) => props.theme.primaryBackground}; background-color: ${({ theme }) => theme.background.primary};
box-shadow: 0px 2px 4px 3px box-shadow: 0px 2px 4px 3px
${(props) => props.theme.lightBackgroundTransparent}; ${({ theme }) => theme.background.transparent.light};
box-shadow: 2px 4px 16px 6px box-shadow: 2px 4px 16px 6px
${(props) => props.theme.lightBackgroundTransparent}; ${({ theme }) => theme.background.transparent.light};
color: ${(props) => props.theme.text80}; color: ${({ theme }) => theme.font.color.primary};
opacity: 1; opacity: 1;
padding: 8px; padding: 8px;
@@ -81,7 +81,7 @@ export function CommentHeader({ comment }: OwnProps) {
<StyledContainer> <StyledContainer>
<Avatar <Avatar
avatarUrl={avatarUrl} avatarUrl={avatarUrl}
size={theme.iconSizeMedium} size={theme.icon.size.md}
placeholder={capitalizedFirstUsernameLetter} placeholder={capitalizedFirstUsernameLetter}
/> />
<StyledName>{authorName}</StyledName> <StyledName>{authorName}</StyledName>
front/src/modules/comments/components/CommentThread.tsx
+3 -3
View File
@@ -28,10 +28,10 @@ const StyledContainer = styled.div`
flex-direction: column; flex-direction: column;
gap: ${(props) => props.theme.spacing(4)}; gap: ${({ theme }) => theme.spacing(4)};
justify-content: flex-start; justify-content: flex-start;
padding: ${(props) => props.theme.spacing(2)}; padding: ${({ theme }) => theme.spacing(2)};
`; `;
const StyledThreadItemListContainer = styled.div` const StyledThreadItemListContainer = styled.div`
@@ -39,7 +39,7 @@ const StyledThreadItemListContainer = styled.div`
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
gap: ${(props) => props.theme.spacing(4)}; gap: ${({ theme }) => theme.spacing(4)};
justify-content: flex-start; justify-content: flex-start;
front/src/modules/comments/components/CommentThreadCreateMode.tsx
+3 -3
View File
@@ -27,12 +27,12 @@ const StyledContainer = styled.div`
align-items: flex-start; align-items: flex-start;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: ${(props) => props.theme.spacing(4)}; gap: ${({ theme }) => theme.spacing(4)};
justify-content: flex-start; justify-content: flex-start;
max-height: calc(100% - 16px); max-height: calc(100% - 16px);
padding: ${(props) => props.theme.spacing(2)}; padding: ${({ theme }) => theme.spacing(2)};
`; `;
const StyledThreadItemListContainer = styled.div` const StyledThreadItemListContainer = styled.div`
@@ -40,7 +40,7 @@ const StyledThreadItemListContainer = styled.div`
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
gap: ${(props) => props.theme.spacing(4)}; gap: ${({ theme }) => theme.spacing(4)};
justify-content: flex-start; justify-content: flex-start;
overflow: auto; overflow: auto;
front/src/modules/comments/components/CommentThreadItem.tsx
+4 -4
View File
@@ -12,15 +12,15 @@ const StyledContainer = styled.div`
align-items: flex-start; align-items: flex-start;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: ${(props) => props.theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(1)};
justify-content: flex-start; justify-content: flex-start;
`; `;
const StyledCommentBody = styled.div` const StyledCommentBody = styled.div`
color: ${(props) => props.theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
font-size: ${(props) => props.theme.fontSizeMedium}; font-size: ${({ theme }) => theme.font.size.md};
line-height: ${(props) => props.theme.lineHeight}; line-height: ${({ theme }) => theme.text.lineHeight};
overflow-wrap: anywhere; overflow-wrap: anywhere;
padding-left: 24px; padding-left: 24px;
front/src/modules/comments/components/CommentThreadRelationPicker.tsx
+12 -12
View File
@@ -36,7 +36,7 @@ const StyledContainer = styled.div`
align-items: flex-start; align-items: flex-start;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: ${(props) => props.theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
justify-content: flex-start; justify-content: flex-start;
width: 100%; width: 100%;
@@ -47,14 +47,14 @@ const StyledLabelContainer = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: ${(props) => props.theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
padding-bottom: ${(props) => props.theme.spacing(2)}; padding-bottom: ${({ theme }) => theme.spacing(2)};
padding-top: ${(props) => props.theme.spacing(2)}; padding-top: ${({ theme }) => theme.spacing(2)};
`; `;
const StyledRelationLabel = styled.div` const StyledRelationLabel = styled.div`
color: ${(props) => props.theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -62,8 +62,8 @@ const StyledRelationLabel = styled.div`
`; `;
const StyledRelationContainer = styled.div` const StyledRelationContainer = styled.div`
--horizontal-padding: ${(props) => props.theme.spacing(1)}; --horizontal-padding: ${({ theme }) => theme.spacing(1)};
--vertical-padding: ${(props) => props.theme.spacing(1.5)}; --vertical-padding: ${({ theme }) => theme.spacing(1.5)};
border: 1px solid transparent; border: 1px solid transparent;
@@ -72,11 +72,11 @@ const StyledRelationContainer = styled.div`
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: ${(props) => props.theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
&:hover { &:hover {
background-color: ${(props) => props.theme.secondaryBackground}; background-color: ${({ theme }) => theme.background.secondary};
border: 1px solid ${(props) => props.theme.lightBorder}; border: 1px solid ${({ theme }) => theme.border.color.light};
} }
min-height: calc(32px - 2 * var(--vertical-padding)); min-height: calc(32px - 2 * var(--vertical-padding));
@@ -88,7 +88,7 @@ const StyledRelationContainer = styled.div`
`; `;
const StyledMenuWrapper = styled.div` const StyledMenuWrapper = styled.div`
z-index: ${(props) => props.theme.lastLayerZIndex}; z-index: ${({ theme }) => theme.lastLayerZIndex};
`; `;
export function CommentThreadRelationPicker({ commentThread }: OwnProps) { export function CommentThreadRelationPicker({ commentThread }: OwnProps) {
@@ -205,7 +205,7 @@ export function CommentThreadRelationPicker({ commentThread }: OwnProps) {
return ( return (
<StyledContainer> <StyledContainer>
<StyledLabelContainer> <StyledLabelContainer>
<IconArrowUpRight size={16} color={theme.text40} /> <IconArrowUpRight size={16} color={theme.font.color.tertiary} />
<StyledRelationLabel>Relations</StyledRelationLabel> <StyledRelationLabel>Relations</StyledRelationLabel>
</StyledLabelContainer> </StyledLabelContainer>
<StyledRelationContainer <StyledRelationContainer
front/src/modules/comments/components/__stories__/CommentChip.stories.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ type Story = StoryObj<typeof CellCommentChip>;
const TestCellContainer = styled.div` const TestCellContainer = styled.div`
align-items: center; align-items: center;
background: ${(props) => props.theme.primaryBackground}; background: ${({ theme }) => theme.background.primary};
display: flex; display: flex;
height: fit-content; height: fit-content;
front/src/modules/companies/components/CompanyChip.tsx
+6 -6
View File
@@ -9,14 +9,14 @@ export type CompanyChipPropsType = {
const StyledContainer = styled.span` const StyledContainer = styled.span`
align-items: center; align-items: center;
background-color: ${(props) => props.theme.tertiaryBackground}; background-color: ${({ theme }) => theme.background.tertiary};
border-radius: ${(props) => props.theme.spacing(1)}; border-radius: ${({ theme }) => theme.spacing(1)};
color: ${(props) => props.theme.text80}; color: ${({ theme }) => theme.font.color.primary};
display: inline-flex; display: inline-flex;
gap: ${(props) => props.theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(1)};
height: calc(20px - 2 * ${(props) => props.theme.spacing(1)}); height: calc(20px - 2 * ${({ theme }) => theme.spacing(1)});
padding: ${(props) => props.theme.spacing(1)}; padding: ${({ theme }) => theme.spacing(1)};
user-select: none; user-select: none;
front/src/modules/opportunities/components/CompanyBoardCard.tsx
+19 -19
View File
@@ -7,46 +7,46 @@ import { IconCalendarEvent, IconUser, IconUsers } from '../../ui/icons';
import { getLogoUrlFromDomainName, humanReadableDate } from '../../utils/utils'; import { getLogoUrlFromDomainName, humanReadableDate } from '../../utils/utils';
const StyledBoardCard = styled.div` const StyledBoardCard = styled.div`
background: ${({ theme }) => theme.secondaryBackground}; background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.mediumBorder}; border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: 4px; border-radius: 4px;
box-shadow: ${({ theme }) => theme.lightBoxShadow}; box-shadow: ${({ theme }) => theme.boxShadow.light};
color: ${({ theme }) => theme.text80}; color: ${({ theme }) => theme.font.color.primary};
cursor: pointer; cursor: pointer;
`; `;
const StyledBoardCardWrapper = styled.div` const StyledBoardCardWrapper = styled.div`
padding-bottom: ${(props) => props.theme.spacing(2)}; padding-bottom: ${({ theme }) => theme.spacing(2)};
`; `;
const StyledBoardCardHeader = styled.div` const StyledBoardCardHeader = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-weight: ${(props) => props.theme.fontWeightBold}; font-weight: ${({ theme }) => theme.font.weight.semiBold};
height: 24px; height: 24px;
padding-left: ${(props) => props.theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(2)}; padding-right: ${({ theme }) => theme.spacing(2)};
padding-top: ${(props) => props.theme.spacing(2)}; padding-top: ${({ theme }) => theme.spacing(2)};
img { img {
height: ${(props) => props.theme.iconSizeMedium}px; height: ${({ theme }) => theme.icon.size.md}px;
margin-right: ${(props) => props.theme.spacing(2)}; margin-right: ${({ theme }) => theme.spacing(2)};
object-fit: cover; object-fit: cover;
width: ${(props) => props.theme.iconSizeMedium}px; width: ${({ theme }) => theme.icon.size.md}px;
} }
`; `;
const StyledBoardCardBody = styled.div` const StyledBoardCardBody = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: ${(props) => props.theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
padding: ${(props) => props.theme.spacing(2)}; padding: ${({ theme }) => theme.spacing(2)};
span { span {
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
svg { svg {
color: ${(props) => props.theme.text40}; color: ${({ theme }) => theme.font.color.tertiary};
margin-right: ${(props) => props.theme.spacing(2)}; margin-right: ${({ theme }) => theme.spacing(2)};
} }
} }
`; `;
@@ -70,14 +70,14 @@ export function CompanyBoardCard({ company }: { company: CompanyProp }) {
</StyledBoardCardHeader> </StyledBoardCardHeader>
<StyledBoardCardBody> <StyledBoardCardBody>
<span> <span>
<IconUser size={theme.iconSizeMedium} /> <IconUser size={theme.icon.size.md} />
<PersonChip name={company.accountOwner?.displayName || ''} /> <PersonChip name={company.accountOwner?.displayName || ''} />
</span> </span>
<span> <span>
<IconUsers size={theme.iconSizeMedium} /> {company.employees} <IconUsers size={theme.icon.size.md} /> {company.employees}
</span> </span>
<span> <span>
<IconCalendarEvent size={theme.iconSizeMedium} /> <IconCalendarEvent size={theme.icon.size.md} />
{humanReadableDate(new Date(company.createdAt as string))} {humanReadableDate(new Date(company.createdAt as string))}
</span> </span>
</StyledBoardCardBody> </StyledBoardCardBody>
front/src/modules/people/components/PersonChip.tsx
+5 -5
View File
@@ -10,15 +10,15 @@ export type PersonChipPropsType = {
const StyledContainer = styled.span` const StyledContainer = styled.span`
align-items: center; align-items: center;
background-color: ${(props) => props.theme.tertiaryBackground}; background-color: ${({ theme }) => theme.background.tertiary};
border-radius: ${(props) => props.theme.spacing(1)}; border-radius: ${({ theme }) => theme.spacing(1)};
color: ${(props) => props.theme.text80}; color: ${({ theme }) => theme.font.color.primary};
display: inline-flex; display: inline-flex;
gap: ${(props) => props.theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(1)};
height: 12px; height: 12px;
overflow: hidden; overflow: hidden;
padding: ${(props) => props.theme.spacing(1)}; padding: ${({ theme }) => theme.spacing(1)};
:hover { :hover {
filter: brightness(95%); filter: brightness(95%);
front/src/modules/pipelines/components/PipelineChip.tsx
+5 -5
View File
@@ -9,12 +9,12 @@ type OwnProps = {
const StyledContainer = styled.span` const StyledContainer = styled.span`
align-items: center; align-items: center;
background-color: ${(props) => props.theme.tertiaryBackground}; background-color: ${({ theme }) => theme.background.tertiary};
border-radius: ${(props) => props.theme.spacing(1)}; border-radius: ${({ theme }) => theme.spacing(1)};
color: ${(props) => props.theme.text80}; color: ${({ theme }) => theme.font.color.primary};
display: inline-flex; display: inline-flex;
gap: ${(props) => props.theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(1)};
padding: ${(props) => props.theme.spacing(1)}; padding: ${({ theme }) => theme.spacing(1)};
:hover { :hover {
filter: brightness(95%); filter: brightness(95%);
front/src/modules/relation-picker/components/SingleEntitySelect.tsx
+1 -1
View File
@@ -72,7 +72,7 @@ export function SingleEntitySelect<
<> <>
<DropdownMenuItemContainer> <DropdownMenuItemContainer>
<DropdownMenuButton onClick={onCreate}> <DropdownMenuButton onClick={onCreate}>
<IconPlus size={theme.iconSizeMedium} /> <IconPlus size={theme.icon.size.md} />
Create new Create new
</DropdownMenuButton> </DropdownMenuButton>
</DropdownMenuItemContainer> </DropdownMenuItemContainer>
front/src/modules/settings/components/SettingsNavbar.tsx
+4 -4
View File
@@ -31,7 +31,7 @@ export function SettingsNavbar() {
<NavItem <NavItem
label="Profile" label="Profile"
to="/settings/profile" to="/settings/profile"
icon={<IconUser size={theme.iconSizeMedium} />} icon={<IconUser size={theme.icon.size.md} />}
active={ active={
!!useMatch({ !!useMatch({
path: useResolvedPath('/people').pathname, path: useResolvedPath('/people').pathname,
@@ -42,7 +42,7 @@ export function SettingsNavbar() {
<NavItem <NavItem
label="Experience" label="Experience"
to="/settings/profile/experience" to="/settings/profile/experience"
icon={<IconColorSwatch size={theme.iconSizeMedium} />} icon={<IconColorSwatch size={theme.icon.size.md} />}
soon={true} soon={true}
active={ active={
!!useMatch({ !!useMatch({
@@ -55,7 +55,7 @@ export function SettingsNavbar() {
<NavItem <NavItem
label="General" label="General"
to="/settings/workspace" to="/settings/workspace"
icon={<IconSettings size={theme.iconSizeMedium} />} icon={<IconSettings size={theme.icon.size.md} />}
soon={true} soon={true}
active={ active={
!!useMatch({ !!useMatch({
@@ -68,7 +68,7 @@ export function SettingsNavbar() {
<NavItem <NavItem
label="Logout" label="Logout"
onClick={handleLogout} onClick={handleLogout}
icon={<IconLogout size={theme.iconSizeMedium} />} icon={<IconLogout size={theme.icon.size.md} />}
danger={true} danger={true}
/> />
</NavItemsContainer> </NavItemsContainer>
front/src/modules/ui/components/board/BoardColumn.tsx
+4 -4
View File
@@ -2,7 +2,7 @@ import React from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
export const StyledColumn = styled.div` export const StyledColumn = styled.div`
background-color: ${({ theme }) => theme.primaryBackground}; background-color: ${({ theme }) => theme.background.primary};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 200px; min-width: 200px;
@@ -12,10 +12,10 @@ export const StyledColumn = styled.div`
export const StyledColumnTitle = styled.h3` export const StyledColumnTitle = styled.h3`
color: ${({ color }) => color}; color: ${({ color }) => color};
font-family: 'Inter'; font-family: 'Inter';
font-size: ${({ theme }) => theme.fontSizeMedium}; font-size: ${({ theme }) => theme.font.size.md};
font-style: normal; font-style: normal;
font-weight: ${({ theme }) => theme.fontWeightMedium}; font-weight: ${({ theme }) => theme.font.weight.medium};
line-height: ${({ theme }) => theme.lineHeight}; line-height: ${({ theme }) => theme.text.lineHeight};
margin: 0; margin: 0;
margin-bottom: ${({ theme }) => theme.spacing(2)}; margin-bottom: ${({ theme }) => theme.spacing(2)};
`; `;
front/src/modules/ui/components/board/NewButton.tsx
+6 -6
View File
@@ -6,18 +6,18 @@ import { IconPlus } from '@/ui/icons/index';
const StyledButton = styled.button` const StyledButton = styled.button`
align-items: center; align-items: center;
align-self: baseline; align-self: baseline;
background-color: ${({ theme }) => theme.primaryBackground}; background-color: ${({ theme }) => theme.background.primary};
border: none; border: none;
border-radius: ${({ theme }) => theme.borderRadius}; border-radius: ${({ theme }) => theme.border.radius.md};
color: ${({ theme }) => theme.text40}; color: ${({ theme }) => theme.font.color.tertiary};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
gap: ${({ theme }) => theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(1)};
justify-content: center; justify-content: center;
padding: ${(props) => props.theme.spacing(1)}; padding: ${({ theme }) => theme.spacing(1)};
&:hover { &:hover {
background-color: ${({ theme }) => theme.secondaryBackground}; background-color: ${({ theme }) => theme.background.secondary};
} }
`; `;
@@ -30,7 +30,7 @@ export function NewButton({ onClick }: OwnProps) {
return ( return (
<StyledButton onClick={onClick}> <StyledButton onClick={onClick}>
<IconPlus size={theme.iconSizeMedium} /> <IconPlus size={theme.icon.size.md} />
New New
</StyledButton> </StyledButton>
); );
front/src/modules/ui/components/buttons/IconButton.tsx
+4 -4
View File
@@ -2,11 +2,11 @@ import styled from '@emotion/styled';
const StyledIconButton = styled.button` const StyledIconButton = styled.button`
align-items: center; align-items: center;
background: ${(props) => props.theme.blue}; background: ${({ theme }) => theme.color.blue};
border: none; border: none;
border-radius: 50%; border-radius: 50%;
color: ${(props) => props.theme.text0}; color: ${({ theme }) => theme.font.color.inverted};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@@ -19,8 +19,8 @@ const StyledIconButton = styled.button`
width: 20px; width: 20px;
&:disabled { &:disabled {
background: ${(props) => props.theme.quaternaryBackground}; background: ${({ theme }) => theme.background.quaternary};
color: ${(props) => props.theme.text40}; color: ${({ theme }) => theme.font.color.tertiary};
cursor: default; cursor: default;
} }
`; `;
front/src/modules/ui/components/buttons/PrimaryButton.tsx
+8 -7
View File
@@ -10,18 +10,19 @@ const StyledButton = styled.button<{ fullWidth: boolean }>`
align-items: center; align-items: center;
background: radial-gradient( background: radial-gradient(
50% 62.62% at 50% 0%, 50% 62.62% at 50% 0%,
${({ theme }) => theme.text60} 0%, ${({ theme }) => theme.font.color.secondary} 0%,
${({ theme }) => theme.text80} 100% ${({ theme }) => theme.font.color.primary} 100%
); );
border: 1px solid ${({ theme }) => theme.primaryBorder}; border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px; border-radius: 8px;
box-shadow: 0px 0px 4px ${({ theme }) => theme.mediumBackgroundTransparent} 0%, box-shadow: 0px 0px 4px ${({ theme }) => theme.background.transparent.medium}
0px 2px 4px ${({ theme }) => theme.lightBackgroundTransparent} 0%; 0%,
color: ${(props) => props.theme.text0}; 0px 2px 4px ${({ theme }) => theme.background.transparent.light} 0%;
color: ${({ theme }) => theme.font.color.inverted};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-weight: ${({ theme }) => theme.fontWeightBold}; font-weight: ${({ theme }) => theme.font.weight.semiBold};
gap: ${({ theme }) => theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
justify-content: center; justify-content: center;
padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)}; padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
front/src/modules/ui/components/buttons/SecondaryButton.tsx
+8 -7
View File
@@ -8,16 +8,17 @@ type OwnProps = {
const StyledButton = styled.button<{ fullWidth: boolean }>` const StyledButton = styled.button<{ fullWidth: boolean }>`
align-items: center; align-items: center;
background: ${({ theme }) => theme.primaryBackground}; background: ${({ theme }) => theme.background.primary};
border: 1px solid ${({ theme }) => theme.primaryBorder}; border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px; border-radius: 8px;
box-shadow: 0px 0px 4px ${({ theme }) => theme.mediumBackgroundTransparent} 0%, box-shadow: 0px 0px 4px ${({ theme }) => theme.background.transparent.medium}
0px 2px 4px ${({ theme }) => theme.lightBackgroundTransparent} 0%; 0%,
color: ${(props) => props.theme.text80}; 0px 2px 4px ${({ theme }) => theme.background.transparent.light} 0%;
color: ${({ theme }) => theme.font.color.primary};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-weight: ${({ theme }) => theme.fontWeightBold}; font-weight: ${({ theme }) => theme.font.weight.semiBold};
gap: 8px; gap: 8px;
justify-content: center; justify-content: center;
padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)}; padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
@@ -25,7 +26,7 @@ const StyledButton = styled.button<{ fullWidth: boolean }>`
width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')}; width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
&:hover { &:hover {
background: ${({ theme }) => theme.tertiaryBackground}; background: ${({ theme }) => theme.background.tertiary};
} }
`; `;
front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx
+9 -7
View File
@@ -6,19 +6,21 @@ export const EditableCellNormalModeOuterContainer = styled.div`
display: flex; display: flex;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
padding-left: ${(props) => props.theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(1)}; padding-right: ${({ theme }) => theme.spacing(1)};
width: 100%; width: 100%;
&:hover { &:hover {
-moz-box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20}; -moz-box-shadow: inset 0 0 0 1px
${({ theme }) => theme.font.color.extraLight};
-webkit-box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20}; -webkit-box-shadow: inset 0 0 0 1px
background: ${(props) => props.theme.secondaryBackgroundTransparent}; ${({ theme }) => theme.font.color.extraLight};
border-radius: ${(props) => props.theme.borderRadius}; background: ${({ theme }) => theme.background.transparent.secondary};
border-radius: ${({ theme }) => theme.border.radius.md};
box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20}; box-shadow: inset 0 0 0 1px ${({ theme }) => theme.font.color.extraLight};
} }
`; `;
front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx
+3 -3
View File
@@ -3,16 +3,16 @@ import { useHotkeys } from 'react-hotkeys-hook';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useRecoilState } from 'recoil'; import { useRecoilState } from 'recoil';
import { overlayBackground } from '@/ui/themes/effects';
import { debounce } from '@/utils/debounce'; import { debounce } from '@/utils/debounce';
import { useListenClickOutsideArrayOfRef } from '../../hooks/useListenClickOutsideArrayOfRef'; import { useListenClickOutsideArrayOfRef } from '../../hooks/useListenClickOutsideArrayOfRef';
import { overlayBackground } from '../../layout/styles/themes';
import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState'; import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState';
export const EditableCellEditModeContainer = styled.div<OwnProps>` export const EditableCellEditModeContainer = styled.div<OwnProps>`
align-items: center; align-items: center;
border: 1px solid ${(props) => props.theme.primaryBorder}; border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 4px; border-radius: ${({ theme }) => theme.border.radius.sm};
display: flex; display: flex;
left: ${(props) => left: ${(props) =>
props.editModeHorizontalAlign === 'right' ? 'auto' : '0'}; props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};
front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
export const HoverableMenuItem = styled.div` export const HoverableMenuItem = styled.div`
align-items: center; align-items: center;
background: ${(props) => props.theme.primaryBackground}; background: ${({ theme }) => theme.background.primary};
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
@@ -14,6 +14,6 @@ export const HoverableMenuItem = styled.div`
width: 100%; width: 100%;
&:hover { &:hover {
background: ${(props) => props.theme.lightBackgroundTransparent}; background: ${({ theme }) => theme.background.transparent.light};
} }
`; `;
front/src/modules/ui/components/editable-cell/types/EditableChip.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { ChangeEvent, ComponentType, ReactNode, useRef, useState } from 'react'; import { ChangeEvent, ComponentType, ReactNode, useRef, useState } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { textInputStyle } from '@/ui/layout/styles/themes'; import { textInputStyle } from '@/ui/themes/effects';
import { EditableCell } from '../EditableCell'; import { EditableCell } from '../EditableCell';
front/src/modules/ui/components/editable-cell/types/EditableDate.tsx
+4 -4
View File
@@ -15,7 +15,7 @@ export type EditableDateProps = {
const StyledContainer = styled.div` const StyledContainer = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
margin: 0px ${(props) => props.theme.spacing(2)}; margin: 0px ${({ theme }) => theme.spacing(2)};
`; `;
export type StyledCalendarContainerProps = { export type StyledCalendarContainerProps = {
@@ -23,10 +23,10 @@ export type StyledCalendarContainerProps = {
}; };
const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>` const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>`
background: ${(props) => props.theme.secondaryBackground}; background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${(props) => props.theme.primaryBorder}; border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px; border-radius: 8px;
box-shadow: ${(props) => props.theme.modalBoxShadow}; box-shadow: ${({ theme }) => theme.boxShadow.strong};
left: -10px; left: -10px;
position: absolute; position: absolute;
top: 10px; top: 10px;
front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
import { ChangeEvent, ReactElement, useRef, useState } from 'react'; import { ChangeEvent, ReactElement, useRef, useState } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { textInputStyle } from '@/ui/layout/styles/themes'; import { textInputStyle } from '@/ui/themes/effects';
import { EditableCell } from '../EditableCell'; import { EditableCell } from '../EditableCell';
@@ -20,8 +20,8 @@ const StyledContainer = styled.div`
justify-content: space-between; justify-content: space-between;
& > input:last-child { & > input:last-child {
border-left: 1px solid ${(props) => props.theme.primaryBorder}; border-left: 1px solid ${({ theme }) => theme.border.color.medium};
padding-left: ${(props) => props.theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(2)};
} }
`; `;
front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { ChangeEvent, MouseEvent, useRef, useState } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js'; import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js';
import { textInputStyle } from '@/ui/layout/styles/themes'; import { textInputStyle } from '@/ui/themes/effects';
import { RawLink } from '../../links/RawLink'; import { RawLink } from '../../links/RawLink';
import { EditableCell } from '../EditableCell'; import { EditableCell } from '../EditableCell';
front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx
+5 -5
View File
@@ -8,12 +8,12 @@ export const EditableRelationCreateButton = styled.button`
cursor: pointer; cursor: pointer;
display: flex; display: flex;
font-family: 'Inter'; font-family: 'Inter';
font-size: ${(props) => props.theme.fontSizeMedium}; font-size: ${({ theme }) => theme.font.size.md};
gap: ${(props) => props.theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
height: 31px; height: 31px;
padding-bottom: ${(props) => props.theme.spacing(1)}; padding-bottom: ${({ theme }) => theme.spacing(1)};
padding-left: ${(props) => props.theme.spacing(1)}; padding-left: ${({ theme }) => theme.spacing(1)};
padding-top: ${(props) => props.theme.spacing(1)}; padding-top: ${({ theme }) => theme.spacing(1)};
user-select: none; user-select: none;
width: 100%; width: 100%;
`; `;
front/src/modules/ui/components/editable-cell/types/EditableText.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { ChangeEvent, useRef, useState } from 'react'; import { ChangeEvent, useRef, useState } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { textInputStyle } from '@/ui/layout/styles/themes'; import { textInputStyle } from '@/ui/themes/effects';
import { EditableCell } from '../EditableCell'; import { EditableCell } from '../EditableCell';
front/src/modules/ui/components/form/Checkbox.tsx
+4 -4
View File
@@ -15,7 +15,7 @@ const StyledContainer = styled.div`
justify-content: center; justify-content: center;
input[type='checkbox'] { input[type='checkbox'] {
accent-color: ${(props) => props.theme.blue}; accent-color: ${({ theme }) => theme.color.blue};
cursor: pointer; cursor: pointer;
height: 14px; height: 14px;
margin: 2px; margin: 2px;
@@ -24,7 +24,7 @@ const StyledContainer = styled.div`
} }
input[type='checkbox']::before { input[type='checkbox']::before {
border: 1px solid ${(props) => props.theme.text40}; border: 1px solid ${({ theme }) => theme.font.color.tertiary};
border-radius: 2px; border-radius: 2px;
content: ''; content: '';
display: block; display: block;
@@ -33,11 +33,11 @@ const StyledContainer = styled.div`
} }
input[type='checkbox']:hover::before { input[type='checkbox']:hover::before {
border: 1px solid ${(props) => props.theme.text80}; border: 1px solid ${({ theme }) => theme.font.color.primary};
} }
input[type='checkbox']:checked::before { input[type='checkbox']:checked::before {
border: 1px solid ${(props) => props.theme.blue}; border: 1px solid ${({ theme }) => theme.color.blue};
} }
`; `;
front/src/modules/ui/components/form/DatePicker.tsx
+28 -28
View File
@@ -2,7 +2,7 @@ import React, { forwardRef, ReactElement, useState } from 'react';
import ReactDatePicker, { CalendarContainerProps } from 'react-datepicker'; import ReactDatePicker, { CalendarContainerProps } from 'react-datepicker';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { overlayBackground } from '../../layout/styles/themes'; import { overlayBackground } from '@/ui/themes/effects';
import 'react-datepicker/dist/react-datepicker.css'; import 'react-datepicker/dist/react-datepicker.css';
@@ -16,10 +16,10 @@ export type DatePickerProps = {
const StyledContainer = styled.div` const StyledContainer = styled.div`
& .react-datepicker { & .react-datepicker {
border-color: ${(props) => props.theme.primaryBorder}; border-color: ${({ theme }) => theme.border.color.light};
background: transparent; background: transparent;
font-family: 'Inter'; font-family: 'Inter';
font-size: ${(props) => props.theme.fontSizeMedium}; font-size: ${({ theme }) => theme.font.size.md};
border: none; border: none;
display: block; display: block;
font-weight: 400; font-weight: 400;
@@ -49,19 +49,19 @@ const StyledContainer = styled.div`
& .react-datepicker__header__dropdown { & .react-datepicker__header__dropdown {
display: flex; display: flex;
margin-left: ${(props) => props.theme.spacing(1)}; margin-left: ${({ theme }) => theme.spacing(1)};
margin-bottom: ${(props) => props.theme.spacing(1)}; margin-bottom: ${({ theme }) => theme.spacing(1)};
} }
& .react-datepicker__month-dropdown-container, & .react-datepicker__month-dropdown-container,
& .react-datepicker__year-dropdown-container { & .react-datepicker__year-dropdown-container {
text-align: left; text-align: left;
border-radius: 4px; border-radius: 4px;
margin-left: ${(props) => props.theme.spacing(1)}; margin-left: ${({ theme }) => theme.spacing(1)};
margin-right: 0; margin-right: 0;
padding: ${(props) => props.theme.spacing(2)}; padding: ${({ theme }) => theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(4)}; padding-right: ${({ theme }) => theme.spacing(4)};
background-color: ${(props) => props.theme.tertiaryBackground}; background-color: ${({ theme }) => theme.background.tertiary};
} }
& .react-datepicker__month-read-view--down-arrow, & .react-datepicker__month-read-view--down-arrow,
@@ -69,14 +69,14 @@ const StyledContainer = styled.div`
height: 5px; height: 5px;
width: 5px; width: 5px;
border-width: 1px 1px 0 0; border-width: 1px 1px 0 0;
border-color: ${(props) => props.theme.text40}; border-color: ${({ theme }) => theme.border.color.light};
top: 3px; top: 3px;
right: -6px; right: -6px;
} }
& .react-datepicker__year-read-view, & .react-datepicker__year-read-view,
& .react-datepicker__month-read-view { & .react-datepicker__month-read-view {
padding-right: ${(props) => props.theme.spacing(2)}; padding-right: ${({ theme }) => theme.spacing(2)};
} }
& .react-datepicker__month-dropdown-container { & .react-datepicker__month-dropdown-container {
@@ -89,19 +89,19 @@ const StyledContainer = styled.div`
& .react-datepicker__month-dropdown, & .react-datepicker__month-dropdown,
& .react-datepicker__year-dropdown { & .react-datepicker__year-dropdown {
border: ${(props) => props.theme.primaryBorder}; border: ${({ theme }) => theme.border.color.light};
${overlayBackground} ${overlayBackground}
overflow-y: scroll; overflow-y: scroll;
top: ${(props) => props.theme.spacing(2)}; top: ${({ theme }) => theme.spacing(2)};
} }
& .react-datepicker__month-dropdown { & .react-datepicker__month-dropdown {
left: ${(props) => props.theme.spacing(2)}; left: ${({ theme }) => theme.spacing(2)};
width: 160px; width: 160px;
height: 260px; height: 260px;
} }
& .react-datepicker__year-dropdown { & .react-datepicker__year-dropdown {
left: calc(${(props) => props.theme.spacing(9)} + 80px); left: calc(${({ theme }) => theme.spacing(9)} + 80px);
width: 100px; width: 100px;
height: 260px; height: 260px;
} }
@@ -118,16 +118,16 @@ const StyledContainer = styled.div`
& .react-datepicker__year-option, & .react-datepicker__year-option,
& .react-datepicker__month-option { & .react-datepicker__month-option {
text-align: left; text-align: left;
padding: ${(props) => props.theme.spacing(2)} padding: ${({ theme }) => theme.spacing(2)}
calc(${(props) => props.theme.spacing(2)} - 2px); calc(${({ theme }) => theme.spacing(2)} - 2px);
width: calc(100% - ${(props) => props.theme.spacing(4)}); width: calc(100% - ${({ theme }) => theme.spacing(4)});
border-radius: 2px; border-radius: 2px;
color: ${(props) => props.theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer; cursor: pointer;
margin: 2px; margin: 2px;
&:hover { &:hover {
background: ${(props) => props.theme.lightBackgroundTransparent}; background: ${({ theme }) => theme.background.transparent.light};
} }
&:first-of-type { &:first-of-type {
@@ -144,7 +144,7 @@ const StyledContainer = styled.div`
} }
& .react-datepicker__day-name { & .react-datepicker__day-name {
color: ${(props) => props.theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
width: 34px; width: 34px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
@@ -172,7 +172,7 @@ const StyledContainer = styled.div`
border-radius: 4px; border-radius: 4px;
padding-top: 6px; padding-top: 6px;
&:hover { &:hover {
background: ${(props) => props.theme.lightBackgroundTransparent}; background: ${({ theme }) => theme.background.transparent.light};
} }
} }
& .react-datepicker__navigation--previous { & .react-datepicker__navigation--previous {
@@ -198,7 +198,7 @@ const StyledContainer = styled.div`
height: 7px; height: 7px;
width: 7px; width: 7px;
border-width: 1px 1px 0 0; border-width: 1px 1px 0 0;
border-color: ${(props) => props.theme.text40}; border-color: ${({ theme }) => theme.font.color.tertiary};
} }
& .react-datepicker__day--keyboard-selected { & .react-datepicker__day--keyboard-selected {
@@ -207,20 +207,20 @@ const StyledContainer = styled.div`
& .react-datepicker__day, & .react-datepicker__day,
.react-datepicker__time-name { .react-datepicker__time-name {
color: ${(props) => props.theme.text80}; color: ${({ theme }) => theme.font.color.primary};
} }
& .react-datepicker__day--selected { & .react-datepicker__day--selected {
background-color: ${(props) => props.theme.blue}; background-color: ${({ theme }) => theme.color.blue};
color: ${(props) => props.theme.text0}; color: ${({ theme }) => theme.font.color.inverted};
} }
& .react-datepicker__day--outside-month { & .react-datepicker__day--outside-month {
color: ${(props) => props.theme.text40}; color: ${({ theme }) => theme.font.color.tertiary};
} }
& .react-datepicker__day:hover { & .react-datepicker__day:hover {
color: ${(props) => props.theme.text40}; color: ${({ theme }) => theme.font.color.tertiary};
} }
`; `;
front/src/modules/ui/components/inputs/AutosizeTextInput.tsx
+3 -3
View File
@@ -22,10 +22,10 @@ const StyledContainer = styled.div`
`; `;
const StyledTextArea = styled(TextareaAutosize)` const StyledTextArea = styled(TextareaAutosize)`
background: ${(props) => props.theme.tertiaryBackground}; background: ${({ theme }) => theme.background.tertiary};
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: ${(props) => props.theme.text80}; color: ${({ theme }) => theme.font.color.primary};
font-family: inherit; font-family: inherit;
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
@@ -41,7 +41,7 @@ const StyledTextArea = styled(TextareaAutosize)`
} }
&::placeholder { &::placeholder {
color: ${(props) => props.theme.text30}; color: ${({ theme }) => theme.font.color.light};
font-weight: 400; font-weight: 400;
} }
`; `;
front/src/modules/ui/components/inputs/DoubleTextInput.tsx
+2 -6
View File
@@ -1,8 +1,6 @@
import { ChangeEvent, useRef } from 'react'; import { ChangeEvent, useRef } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { textInputStyle } from '../../layout/styles/themes';
type OwnProps = { type OwnProps = {
leftValue: string; leftValue: string;
rightValue: string; rightValue: string;
@@ -17,16 +15,14 @@ const StyledContainer = styled.div`
justify-content: space-between; justify-content: space-between;
& > input:last-child { & > input:last-child {
border-left: 1px solid ${(props) => props.theme.primaryBorder}; border-left: 1px solid ${({ theme }) => theme.border.color.light};
padding-left: ${(props) => props.theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(2)};
} }
`; `;
const StyledEditInplaceInput = styled.input` const StyledEditInplaceInput = styled.input`
height: 18px; height: 18px;
width: 45%; width: 45%;
${textInputStyle}
`; `;
export function DoubleTextInput({ export function DoubleTextInput({
front/src/modules/ui/components/inputs/TextInput.tsx
+6 -6
View File
@@ -10,22 +10,22 @@ type OwnProps = Omit<
}; };
const StyledInput = styled.input<{ fullWidth: boolean }>` const StyledInput = styled.input<{ fullWidth: boolean }>`
background-color: ${({ theme }) => theme.lighterBackgroundTransparent}; background-color: ${({ theme }) => theme.background.transparent.lighter};
border: 1px solid ${({ theme }) => theme.lightBorder}; border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 4px; border-radius: 4px;
padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) =>
theme.spacing(3)}; theme.spacing(3)};
color: ${({ theme }) => theme.text80}; color: ${({ theme }) => theme.font.color.primary};
outline: none; outline: none;
width: ${({ fullWidth, theme }) => width: ${({ fullWidth, theme }) =>
fullWidth ? `calc(100% - ${theme.spacing(6)})` : 'auto'}; fullWidth ? `calc(100% - ${theme.spacing(6)})` : 'auto'};
&::placeholder, &::placeholder,
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
color: ${({ theme }) => theme.text30} color: ${({ theme }) => theme.font.color.light}
font-family: ${({ theme }) => theme.fontFamily};; font-family: ${({ theme }) => theme.font.family};;
font-weight: ${({ theme }) => theme.fontWeightMedium}; font-weight: ${({ theme }) => theme.font.weight.medium};
} }
margin-bottom: ${({ theme }) => theme.spacing(3)}; margin-bottom: ${({ theme }) => theme.spacing(3)};
`; `;
front/src/modules/ui/components/links/PrimaryLink.tsx
+2 -2
View File
@@ -12,8 +12,8 @@ type OwnProps = {
const StyledClickable = styled.div` const StyledClickable = styled.div`
display: flex; display: flex;
a { a {
color: ${({ theme }) => theme.text40}; color: ${({ theme }) => theme.font.color.tertiary};
font-size: ${({ theme }) => theme.fontSizeSmall}; font-size: ${({ theme }) => theme.font.size.sm};
text-decoration: none; text-decoration: none;
} }
`; `;
front/src/modules/ui/components/menu/DropdownMenu.tsx
+4 -4
View File
@@ -4,11 +4,11 @@ export const DropdownMenu = styled.div`
align-items: center; align-items: center;
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
background: ${(props) => props.theme.secondaryBackgroundTransparent}; background: ${({ theme }) => theme.background.transparent.secondary};
border: 1px solid ${(props) => props.theme.lightBorder}; border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: calc(${(props) => props.theme.borderRadius} * 2); border-radius: ${({ theme }) => theme.border.radius.md};
box-shadow: ${(props) => props.theme.modalBoxShadow}; box-shadow: ${({ theme }) => theme.boxShadow.strong};
display: flex; display: flex;
front/src/modules/ui/components/menu/DropdownMenuButton.tsx
+7 -7
View File
@@ -1,23 +1,23 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { hoverBackground } from '@/ui/layout/styles/themes'; import { hoverBackground } from '@/ui/themes/effects';
export const DropdownMenuButton = styled.div` export const DropdownMenuButton = styled.div`
--horizontal-padding: ${(props) => props.theme.spacing(1.5)}; --horizontal-padding: ${({ theme }) => theme.spacing(1.5)};
--vertical-padding: ${(props) => props.theme.spacing(2)}; --vertical-padding: ${({ theme }) => theme.spacing(2)};
align-items: center; align-items: center;
border-radius: ${(props) => props.theme.borderRadius}; border-radius: ${({ theme }) => theme.border.radius.md};
color: ${(props) => props.theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-size: ${(props) => props.theme.fontSizeSmall}; font-size: ${({ theme }) => theme.font.size.sm};
gap: ${(props) => props.theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
height: calc(32px - 2 * var(--vertical-padding)); height: calc(32px - 2 * var(--vertical-padding));
front/src/modules/ui/components/menu/DropdownMenuCheckableItem.tsx
+3 -3
View File
@@ -21,15 +21,15 @@ const StyledLeftContainer = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
gap: ${(props) => props.theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
`; `;
const StyledChildrenContainer = styled.div` const StyledChildrenContainer = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
font-size: ${(props) => props.theme.fontSizeSmall}; font-size: ${({ theme }) => theme.font.size.sm};
gap: ${(props) => props.theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
`; `;
export function DropdownMenuCheckableItem({ export function DropdownMenuCheckableItem({
front/src/modules/ui/components/menu/DropdownMenuItem.tsx
+6 -6
View File
@@ -1,19 +1,19 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
export const DropdownMenuItem = styled.div` export const DropdownMenuItem = styled.div`
--horizontal-padding: ${(props) => props.theme.spacing(1.5)}; --horizontal-padding: ${({ theme }) => theme.spacing(1.5)};
--vertical-padding: ${(props) => props.theme.spacing(2)}; --vertical-padding: ${({ theme }) => theme.spacing(2)};
align-items: center; align-items: center;
border-radius: ${(props) => props.theme.borderRadius}; border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${(props) => props.theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-size: ${(props) => props.theme.fontSizeSmall}; font-size: ${({ theme }) => theme.font.size.sm};
gap: ${(props) => props.theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
height: calc(32px - 2 * var(--vertical-padding)); height: calc(32px - 2 * var(--vertical-padding));
front/src/modules/ui/components/menu/DropdownMenuItemContainer.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
export const DropdownMenuItemContainer = styled.div` export const DropdownMenuItemContainer = styled.div`
--padding: ${(props) => props.theme.spacing(1 / 2)}; --padding: ${({ theme }) => theme.spacing(1 / 2)};
align-items: flex-start; align-items: flex-start;
display: flex; display: flex;
front/src/modules/ui/components/menu/DropdownMenuSearch.tsx
+4 -4
View File
@@ -1,13 +1,13 @@
import { InputHTMLAttributes } from 'react'; import { InputHTMLAttributes } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { textInputStyle } from '@/ui/layout/styles/themes'; import { textInputStyle } from '@/ui/themes/effects';
export const DropdownMenuSearchContainer = styled.div` export const DropdownMenuSearchContainer = styled.div`
--vertical-padding: ${(props) => props.theme.spacing(1)}; --vertical-padding: ${({ theme }) => theme.spacing(1)};
align-items: center; align-items: center;
border-bottom: 1px solid ${(props) => props.theme.lightBorder}; border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -18,7 +18,7 @@ export const DropdownMenuSearchContainer = styled.div`
`; `;
const StyledEditModeSearchInput = styled.input` const StyledEditModeSearchInput = styled.input`
font-size: ${(props) => props.theme.fontSizeSmall}; font-size: ${({ theme }) => theme.font.size.sm};
${textInputStyle} ${textInputStyle}
front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx
+4 -4
View File
@@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { IconCheck } from '@/ui/icons/index'; import { IconCheck } from '@/ui/icons/index';
import { hoverBackground } from '@/ui/layout/styles/themes'; import { hoverBackground } from '@/ui/themes/effects';
import { DropdownMenuButton } from './DropdownMenuButton'; import { DropdownMenuButton } from './DropdownMenuButton';
@@ -19,7 +19,7 @@ const DropdownMenuSelectableItemContainer = styled(DropdownMenuButton)<Props>`
align-items: center; align-items: center;
background: ${(props) => background: ${(props) =>
props.hovered ? props.theme.lightBackgroundTransparent : 'transparent'}; props.hovered ? props.theme.background.transparent.light : 'transparent'};
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -29,7 +29,7 @@ const StyledLeftContainer = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
gap: ${(props) => props.theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
`; `;
const StyledRightIcon = styled.div` const StyledRightIcon = styled.div`
@@ -61,7 +61,7 @@ export function DropdownMenuSelectableItem({
> >
<StyledLeftContainer>{children}</StyledLeftContainer> <StyledLeftContainer>{children}</StyledLeftContainer>
<StyledRightIcon> <StyledRightIcon>
{selected && <IconCheck size={theme.iconSizeMedium} />} {selected && <IconCheck size={theme.icon.size.md} />}
</StyledRightIcon> </StyledRightIcon>
</DropdownMenuSelectableItemContainer> </DropdownMenuSelectableItemContainer>
); );
front/src/modules/ui/components/menu/DropdownMenuSeparator.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
export const DropdownMenuSeparator = styled.div` export const DropdownMenuSeparator = styled.div`
background-color: ${(props) => props.theme.lightBorder}; background-color: ${({ theme }) => theme.border.color.light};
height: 1px; height: 1px;
width: 100%; width: 100%;
front/src/modules/ui/components/modal/Modal.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ export function Modal({ children }: { children: React.ReactNode }) {
ariaHideApp={false} ariaHideApp={false}
style={{ style={{
overlay: { overlay: {
backgroundColor: theme.modalBackgroundTransparent, backgroundColor: theme.background.overlay,
zIndex: 2, zIndex: 2,
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
front/src/modules/ui/components/section-titles/MainSectionTitle.tsx
+3 -3
View File
@@ -6,9 +6,9 @@ type OwnProps = {
}; };
const StyledMainSectionTitle = styled.h2` const StyledMainSectionTitle = styled.h2`
color: ${({ theme }) => theme.text80}; color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.fontSizeExtraLarge}; font-size: ${({ theme }) => theme.font.size.xl};
font-weight: ${({ theme }) => theme.fontWeightBold}; font-weight: ${({ theme }) => theme.font.weight.semiBold};
line-height: 1.5; line-height: 1.5;
`; `;
front/src/modules/ui/components/section-titles/SubSectionTitle.tsx
+3 -3
View File
@@ -6,9 +6,9 @@ type OwnProps = {
}; };
const StyledSubSectionTitle = styled.h2` const StyledSubSectionTitle = styled.h2`
color: ${({ theme }) => theme.text80}; color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.fontSizeMedium}; font-size: ${({ theme }) => theme.font.size.md};
font-weight: ${({ theme }) => theme.fontWeightBold}; font-weight: ${({ theme }) => theme.font.weight.semiBold};
line-height: 1.5; line-height: 1.5;
`; `;
front/src/modules/ui/components/table/ColumnHead.tsx
+3 -3
View File
@@ -11,13 +11,13 @@ const StyledTitle = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-weight: 500; font-weight: 500;
height: ${(props) => props.theme.spacing(8)}; height: ${({ theme }) => theme.spacing(8)};
padding-left: ${(props) => props.theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(2)};
`; `;
const StyledIcon = styled.div` const StyledIcon = styled.div`
display: flex; display: flex;
margin-right: ${(props) => props.theme.spacing(1)}; margin-right: ${({ theme }) => theme.spacing(1)};
`; `;
export function ColumnHead({ viewName, viewIcon }: OwnProps) { export function ColumnHead({ viewName, viewIcon }: OwnProps) {
front/src/modules/ui/components/table/EntityTable.tsx
+8 -8
View File
@@ -40,15 +40,15 @@ const StyledTable = styled.table`
border-radius: 4px; border-radius: 4px;
border-spacing: 0; border-spacing: 0;
margin-left: ${(props) => props.theme.table.horizontalCellMargin}; margin-left: ${({ theme }) => theme.table.horizontalCellMargin};
margin-right: ${(props) => props.theme.table.horizontalCellMargin}; margin-right: ${({ theme }) => theme.table.horizontalCellMargin};
table-layout: fixed; table-layout: fixed;
width: calc(100% - ${(props) => props.theme.table.horizontalCellMargin} * 2); width: calc(100% - ${({ theme }) => theme.table.horizontalCellMargin} * 2);
th { th {
border: 1px solid ${(props) => props.theme.tertiaryBackground}; border: 1px solid ${({ theme }) => theme.background.tertiary};
border-collapse: collapse; border-collapse: collapse;
color: ${(props) => props.theme.text40}; color: ${({ theme }) => theme.font.color.tertiary};
padding: 0; padding: 0;
text-align: left; text-align: left;
@@ -66,9 +66,9 @@ const StyledTable = styled.table`
} }
td { td {
border: 1px solid ${(props) => props.theme.tertiaryBackground}; border: 1px solid ${({ theme }) => theme.background.tertiary};
border-collapse: collapse; border-collapse: collapse;
color: ${(props) => props.theme.text80}; color: ${({ theme }) => theme.font.color.primary};
padding: 0; padding: 0;
text-align: left; text-align: left;
@@ -102,7 +102,7 @@ const StyledTableScrollableContainer = styled.div`
const StyledRow = styled.tr<{ selected: boolean }>` const StyledRow = styled.tr<{ selected: boolean }>`
background: ${(props) => background: ${(props) =>
props.selected ? props.theme.secondaryBackground : 'none'}; props.selected ? props.theme.background.secondary : 'none'};
`; `;
export function EntityTable<TData extends { id: string }, SortField>({ export function EntityTable<TData extends { id: string }, SortField>({
front/src/modules/ui/components/table/action-bar/EntityTableActionBar.tsx
+5 -5
View File
@@ -16,17 +16,17 @@ type StyledContainerProps = {
const StyledContainer = styled.div<StyledContainerProps>` const StyledContainer = styled.div<StyledContainerProps>`
align-items: center; align-items: center;
background: ${(props) => props.theme.secondaryBackground}; background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${(props) => props.theme.primaryBorder}; border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px; border-radius: 8px;
bottom: ${(props) => (props.position.x ? 'auto' : '38px')}; bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
box-shadow: ${(props) => props.theme.modalBoxShadow}; box-shadow: ${({ theme }) => theme.boxShadow.strong};
display: flex; display: flex;
height: 48px; height: 48px;
left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')}; left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')};
padding-left: ${(props) => props.theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(2)}; padding-right: ${({ theme }) => theme.spacing(2)};
position: ${(props) => (props.position.x ? 'fixed' : 'absolute')}; position: ${(props) => (props.position.x ? 'fixed' : 'absolute')};
top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')}; top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')};
front/src/modules/ui/components/table/action-bar/EntityTableActionBarButton.tsx
+6 -4
View File
@@ -15,23 +15,25 @@ type StyledButtonProps = {
const StyledButton = styled.div<StyledButtonProps>` const StyledButton = styled.div<StyledButtonProps>`
border-radius: 4px; border-radius: 4px;
color: ${(props) => color: ${(props) =>
props.type === 'warning' ? props.theme.red : props.theme.text60}; props.type === 'warning'
? props.theme.color.red
: props.theme.font.color.secondary};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: ${(props) => props.theme.spacing(2)}; padding: ${({ theme }) => theme.spacing(2)};
transition: background 0.1s ease; transition: background 0.1s ease;
user-select: none; user-select: none;
&:hover { &:hover {
background: ${(props) => props.theme.tertiaryBackground}; background: ${({ theme }) => theme.background.tertiary};
} }
`; `;
const StyledButtonLabel = styled.div` const StyledButtonLabel = styled.div`
font-weight: 500; font-weight: 500;
margin-left: ${(props) => props.theme.spacing(2)}; margin-left: ${({ theme }) => theme.spacing(2)};
`; `;
export function EntityTableActionBarButton({ export function EntityTableActionBarButton({
front/src/modules/ui/components/table/table-header/DropdownButton.tsx
+26 -29
View File
@@ -2,12 +2,9 @@ import { ReactNode, useRef } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { IconChevronDown } from '@/ui/icons/index'; import { IconChevronDown } from '@/ui/icons/index';
import { overlayBackground, textInputStyle } from '@/ui/themes/effects';
import { useOutsideAlerter } from '../../../hooks/useOutsideAlerter'; import { useOutsideAlerter } from '../../../hooks/useOutsideAlerter';
import {
overlayBackground,
textInputStyle,
} from '../../../layout/styles/themes';
type OwnProps = { type OwnProps = {
label: string; label: string;
@@ -31,17 +28,17 @@ type StyledDropdownButtonProps = {
}; };
const StyledDropdownButton = styled.div<StyledDropdownButtonProps>` const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
background: ${(props) => props.theme.primaryBackground}; background: ${({ theme }) => theme.background.primary};
border-radius: 4px; border-radius: 4px;
color: ${(props) => (props.isActive ? props.theme.blue : 'none')}; color: ${(props) => (props.isActive ? props.theme.color.blue : 'none')};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')}; filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
padding: ${(props) => props.theme.spacing(1)}; padding: ${({ theme }) => theme.spacing(1)};
padding-left: ${(props) => props.theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(2)}; padding-right: ${({ theme }) => theme.spacing(2)};
user-select: none; user-select: none;
&:hover { &:hover {
@@ -54,7 +51,7 @@ const StyledDropdown = styled.ul`
--wraper-border: 1px; --wraper-border: 1px;
--wraper-border-radius: 8px; --wraper-border-radius: 8px;
border: var(--wraper-border) solid ${(props) => props.theme.primaryBorder}; border: var(--wraper-border) solid ${({ theme }) => theme.border.color.light};
border-radius: var(--wraper-border-radius); border-radius: var(--wraper-border-radius);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -80,17 +77,17 @@ const StyledDropdown = styled.ul`
const StyledDropdownItem = styled.li` const StyledDropdownItem = styled.li`
align-items: center; align-items: center;
border-radius: 2px; border-radius: 2px;
color: ${(props) => props.theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
margin: 2px; margin: 2px;
padding: ${(props) => props.theme.spacing(2)} padding: ${({ theme }) => theme.spacing(2)}
calc(${(props) => props.theme.spacing(2)} - 2px); calc(${({ theme }) => theme.spacing(2)} - 2px);
user-select: none; user-select: none;
width: calc(160px - ${(props) => props.theme.spacing(4)}); width: calc(160px - ${({ theme }) => theme.spacing(4)});
&:hover { &:hover {
background: ${(props) => props.theme.lightBackgroundTransparent}; background: ${({ theme }) => theme.background.transparent.light};
} }
`; `;
@@ -102,18 +99,18 @@ const StyledDropdownItemClipped = styled.span`
const StyledDropdownTopOption = styled.li` const StyledDropdownTopOption = styled.li`
align-items: center; align-items: center;
border-bottom: 1px solid ${(props) => props.theme.lightBorder}; border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
color: ${(props) => props.theme.text80}; color: ${({ theme }) => theme.font.color.primary};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
font-size: ${(props) => props.theme.fontSizeSmall}; font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${(props) => props.theme.fontWeightMedium}; font-weight: ${({ theme }) => theme.font.weight.medium};
justify-content: space-between; justify-content: space-between;
padding: calc(${(props) => props.theme.spacing(2)}) padding: calc(${({ theme }) => theme.spacing(2)})
calc(${(props) => props.theme.spacing(2)}); calc(${({ theme }) => theme.spacing(2)});
&:hover { &:hover {
background: ${(props) => props.theme.lightBackgroundTransparent}; background: ${({ theme }) => theme.background.transparent.light};
} }
user-select: none; user-select: none;
`; `;
@@ -121,19 +118,19 @@ const StyledDropdownTopOption = styled.li`
const StyledIcon = styled.div` const StyledIcon = styled.div`
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-right: ${(props) => props.theme.spacing(1)}; margin-right: ${({ theme }) => theme.spacing(1)};
min-width: ${(props) => props.theme.spacing(4)}; min-width: ${({ theme }) => theme.spacing(4)};
`; `;
const StyledSearchField = styled.li` const StyledSearchField = styled.li`
align-items: center; align-items: center;
border-bottom: var(--wraper-border) solid border-bottom: var(--wraper-border) solid
${(props) => props.theme.primaryBorder}; ${({ theme }) => theme.border.color.light};
color: ${(props) => props.theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
font-weight: ${(props) => props.theme.fontWeightMedium}; font-weight: ${({ theme }) => theme.font.weight.medium};
justify-content: space-between; justify-content: space-between;
overflow: hidden; overflow: hidden;
@@ -141,7 +138,7 @@ const StyledSearchField = styled.li`
input { input {
border-radius: 8px; border-radius: 8px;
box-sizing: border-box; box-sizing: border-box;
font-family: ${(props) => props.theme.fontFamily}; font-family: ${({ theme }) => theme.font.family};
height: 36px; height: 36px;
padding: 8px; padding: 8px;
width: 100%; width: 100%;
@@ -192,7 +189,7 @@ function DropdownButton({
} }
const StyleAngleDownContainer = styled.div` const StyleAngleDownContainer = styled.div`
color: ${(props) => props.theme.text40}; color: ${({ theme }) => theme.font.color.tertiary};
display: flex; display: flex;
height: 100%; height: 100%;
justify-content: center; justify-content: center;
front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx
+9 -9
View File
@@ -20,7 +20,7 @@ type OwnProps<SortField, TData extends FilterableFieldsType> = {
const StyledBar = styled.div` const StyledBar = styled.div`
align-items: center; align-items: center;
border-top: 1px solid ${(props) => props.theme.primaryBorder}; border-top: 1px solid ${({ theme }) => theme.border.color.light};
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 40px; height: 40px;
@@ -31,21 +31,21 @@ const StyledChipcontainer = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: ${(props) => props.theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(1)};
height: 40px; height: 40px;
justify-content: space-between; justify-content: space-between;
margin-left: ${(props) => props.theme.spacing(2)}; margin-left: ${({ theme }) => theme.spacing(2)};
overflow-x: auto; overflow-x: auto;
`; `;
const StyledCancelButton = styled.button` const StyledCancelButton = styled.button`
background-color: inherit; background-color: inherit;
border: none; border: none;
color: ${(props) => props.theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
margin-left: auto; margin-left: auto;
margin-right: ${(props) => props.theme.spacing(2)}; margin-right: ${({ theme }) => theme.spacing(2)};
padding: ${(props) => { padding: ${(props) => {
const horiz = props.theme.spacing(2); const horiz = props.theme.spacing(2);
const vert = props.theme.spacing(1); const vert = props.theme.spacing(1);
@@ -54,8 +54,8 @@ const StyledCancelButton = styled.button`
user-select: none; user-select: none;
&:hover { &:hover {
background-color: ${(props) => props.theme.tertiaryBackground}; background-color: ${({ theme }) => theme.background.tertiary};
border-radius: ${(props) => props.theme.spacing(1)}; border-radius: ${({ theme }) => theme.spacing(1)};
} }
`; `;
@@ -78,9 +78,9 @@ function SortAndFilterBar<SortField, TData extends FilterableFieldsType>({
id={sort.key} id={sort.key}
icon={ icon={
sort.order === 'desc' ? ( sort.order === 'desc' ? (
<IconArrowNarrowDown size={theme.iconSizeMedium} /> <IconArrowNarrowDown size={theme.icon.size.md} />
) : ( ) : (
<IconArrowNarrowUp size={theme.iconSizeMedium} /> <IconArrowNarrowUp size={theme.icon.size.md} />
) )
} }
onRemove={() => onRemoveSort(sort.key)} onRemove={() => onRemoveSort(sort.key)}
front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx
+13 -9
View File
@@ -14,30 +14,34 @@ type OwnProps = {
const StyledChip = styled.div` const StyledChip = styled.div`
align-items: center; align-items: center;
background-color: ${(props) => props.theme.blueHighTransparency}; background-color: ${({ theme }) => theme.background.secondary};
border: 1px solid ${(props) => props.theme.blueLowTransparency}; border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: 50px; border-radius: 50px;
color: ${(props) => props.theme.blue}; color: ${({ theme }) => theme.color.blue};
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-shrink: 0; flex-shrink: 0;
font-size: ${(props) => props.theme.fontSizeSmall}; font-size: ${({ theme }) => theme.font.size.sm};
padding: ${(props) => props.theme.spacing(1) + ' ' + props.theme.spacing(2)}; padding: ${({ theme }) => theme.spacing(1) + ' ' + theme.spacing(2)};
`; `;
const StyledIcon = styled.div` const StyledIcon = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
margin-right: ${(props) => props.theme.spacing(1)}; margin-right: ${({ theme }) => theme.spacing(1)};
`; `;
const StyledDelete = styled.div` const StyledDelete = styled.div`
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
font-size: ${(props) => props.theme.fontSizeSmall}; font-size: ${({ theme }) => theme.font.size.sm};
margin-left: ${(props) => props.theme.spacing(2)}; margin-left: ${({ theme }) => theme.spacing(2)};
margin-top: 1px; margin-top: 1px;
user-select: none; user-select: none;
&:hover {
background-color: ${({ theme }) => theme.background.tertiary};
border-radius: ${({ theme }) => theme.border.radius.sm};
}
`; `;
const StyledLabelKey = styled.div` const StyledLabelKey = styled.div`
@@ -58,7 +62,7 @@ function SortOrFilterChip({
{labelKey && <StyledLabelKey>{labelKey}:&nbsp;</StyledLabelKey>} {labelKey && <StyledLabelKey>{labelKey}:&nbsp;</StyledLabelKey>}
{labelValue} {labelValue}
<StyledDelete onClick={onRemove} data-testid={'remove-icon-' + id}> <StyledDelete onClick={onRemove} data-testid={'remove-icon-' + id}>
<IconX size={theme.iconSizeMedium} /> <IconX size={theme.icon.size.sm} stroke={theme.icon.stroke.sm} />
</StyledDelete> </StyledDelete>
</StyledChip> </StyledChip>
); );
front/src/modules/ui/components/table/table-header/TableHeader.tsx
+5 -5
View File
@@ -31,22 +31,22 @@ const StyledContainer = styled.div`
const StyledTableHeader = styled.div` const StyledTableHeader = styled.div`
align-items: center; align-items: center;
color: ${(props) => props.theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-weight: 500; font-weight: 500;
height: 40px; height: 40px;
justify-content: space-between; justify-content: space-between;
padding-left: ${(props) => props.theme.spacing(3)}; padding-left: ${({ theme }) => theme.spacing(3)};
padding-right: ${(props) => props.theme.spacing(2)}; padding-right: ${({ theme }) => theme.spacing(2)};
`; `;
const StyledIcon = styled.div` const StyledIcon = styled.div`
display: flex; display: flex;
margin-right: ${(props) => props.theme.spacing(2)}; margin-right: ${({ theme }) => theme.spacing(2)};
& > svg { & > svg {
font-size: ${(props) => props.theme.iconSizeSmall}; font-size: ${({ theme }) => theme.icon.size.sm};
} }
`; `;
front/src/modules/ui/layout/DefaultLayout.tsx
+3 -2
View File
@@ -5,12 +5,13 @@ import { currentUserState } from '@/auth/states/currentUserState';
import { CommandMenu } from '@/command-menu/components/CommandMenu'; import { CommandMenu } from '@/command-menu/components/CommandMenu';
import { AppNavbar } from '~/AppNavbar'; import { AppNavbar } from '~/AppNavbar';
import { MOBILE_VIEWPORT } from '../themes/themes';
import { NavbarContainer } from './navbar/NavbarContainer'; import { NavbarContainer } from './navbar/NavbarContainer';
import { isNavbarOpenedState } from './states/isNavbarOpenedState'; import { isNavbarOpenedState } from './states/isNavbarOpenedState';
import { MOBILE_VIEWPORT } from './styles/themes';
const StyledLayout = styled.div` const StyledLayout = styled.div`
background: ${(props) => props.theme.noisyBackground}; background: ${({ theme }) => theme.background.noisy};
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 100vh; height: 100vh;
front/src/modules/ui/layout/Panel.tsx
+2 -2
View File
@@ -2,8 +2,8 @@ import React from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
const StyledPanel = styled.div` const StyledPanel = styled.div`
background: ${(props) => props.theme.primaryBackground}; background: ${({ theme }) => theme.background.primary};
border: 1px solid ${(props) => props.theme.primaryBorder}; border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
front/src/modules/ui/layout/containers/ContentContainer.tsx
+5 -5
View File
@@ -11,16 +11,16 @@ type OwnProps = {
}; };
const MainContainer = styled.div<{ topMargin: number }>` const MainContainer = styled.div<{ topMargin: number }>`
background: ${(props) => props.theme.noisyBackground}; background: ${({ theme }) => theme.background.noisy};
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: ${(props) => props.theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};
height: calc(100% - ${(props) => props.topMargin}px); height: calc(100% - ${(props) => props.topMargin}px);
padding-bottom: ${(props) => props.theme.spacing(3)}; padding-bottom: ${({ theme }) => theme.spacing(3)};
padding-right: ${(props) => props.theme.spacing(3)}; padding-right: ${({ theme }) => theme.spacing(3)};
width: calc(100% - ${(props) => props.theme.spacing(3)}); width: calc(100% - ${({ theme }) => theme.spacing(3)});
`; `;
type LeftContainerProps = { type LeftContainerProps = {
front/src/modules/ui/layout/containers/NoTopBarContainer.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ type OwnProps = {
const StyledContainer = styled.div` const StyledContainer = styled.div`
display: flex; display: flex;
padding-top: ${(props) => props.theme.spacing(4)}; padding-top: ${({ theme }) => theme.spacing(4)};
width: 100%; width: 100%;
`; `;
front/src/modules/ui/layout/navbar/NavCollapseButton.tsx
+2 -2
View File
@@ -5,16 +5,16 @@ import {
IconLayoutSidebarLeftCollapse, IconLayoutSidebarLeftCollapse,
IconLayoutSidebarRightCollapse, IconLayoutSidebarRightCollapse,
} from '@/ui/icons'; } from '@/ui/icons';
import { MOBILE_VIEWPORT } from '@/ui/themes/themes';
import { isNavbarOpenedState } from '../states/isNavbarOpenedState'; import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
import { MOBILE_VIEWPORT } from '../styles/themes';
const CollapseButton = styled.button<{ hideOnDesktop: boolean | undefined }>` const CollapseButton = styled.button<{ hideOnDesktop: boolean | undefined }>`
align-items: center; align-items: center;
background: inherit; background: inherit;
border: 0; border: 0;
color: ${(props) => props.theme.text30}; color: ${({ theme }) => theme.font.color.light};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
front/src/modules/ui/layout/navbar/NavItem.tsx
+20 -20
View File
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { MOBILE_VIEWPORT } from '../styles/themes'; import { MOBILE_VIEWPORT } from '@/ui/themes/themes';
type OwnProps = { type OwnProps = {
label: string; label: string;
@@ -23,44 +23,45 @@ type StyledItemProps = {
const StyledItem = styled.button<StyledItemProps>` const StyledItem = styled.button<StyledItemProps>`
align-items: center; align-items: center;
background: ${(props) => background: ${(props) =>
props.active ? props.theme.lightBackgroundTransparent : 'inherit'}; props.active ? props.theme.background.transparent.light : 'inherit'};
border: none; border: none;
border-radius: 4px; border-radius: 4px;
color: ${(props) => { color: ${(props) => {
if (props.active) { if (props.active) {
return props.theme.text80; return props.theme.font.color.primary;
} }
if (props.danger) { if (props.danger) {
return props.theme.red; return props.theme.color.red;
} }
if (props.soon) { if (props.soon) {
return props.theme.text20; return props.theme.font.color.extraLight;
} }
return props.theme.text60; return props.theme.font.color.secondary;
}}; }};
cursor: ${(props) => (props.soon ? 'default' : 'pointer')}; cursor: ${(props) => (props.soon ? 'default' : 'pointer')};
display: flex; display: flex;
font-family: 'Inter'; font-family: 'Inter';
font-size: ${(props) => props.theme.fontSizeMedium}; font-size: ${({ theme }) => theme.font.size.md};
margin-bottom: calc(${(props) => props.theme.spacing(1)} / 2); margin-bottom: calc(${({ theme }) => theme.spacing(1)} / 2);
padding-bottom: ${(props) => props.theme.spacing(1)}; padding-bottom: ${({ theme }) => theme.spacing(1)};
padding-left: ${(props) => props.theme.spacing(1)}; padding-left: ${({ theme }) => theme.spacing(1)};
padding-top: ${(props) => props.theme.spacing(1)}; padding-top: ${({ theme }) => theme.spacing(1)};
pointer-events: ${(props) => (props.soon ? 'none' : 'auto')}; pointer-events: ${(props) => (props.soon ? 'none' : 'auto')};
:hover { :hover {
background: ${(props) => props.theme.lightBackgroundTransparent}; background: ${({ theme }) => theme.background.transparent.light};
color: ${(props) => (props.danger ? props.theme.red : props.theme.text80)}; color: ${(props) =>
props.danger ? props.theme.color.red : props.theme.font.color.primary};
} }
user-select: none; user-select: none;
@media (max-width: ${MOBILE_VIEWPORT}px) { @media (max-width: ${MOBILE_VIEWPORT}px) {
font-size: ${(props) => props.theme.fontSizeLarge}; font-size: ${({ theme }) => theme.font.size.lg};
} }
`; `;
const StyledItemLabel = styled.div` const StyledItemLabel = styled.div`
display: flex; display: flex;
margin-left: ${(props) => props.theme.spacing(2)}; margin-left: ${({ theme }) => theme.spacing(2)};
`; `;
const StyledSoonPill = styled.div` const StyledSoonPill = styled.div`
@@ -68,11 +69,10 @@ const StyledSoonPill = styled.div`
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 50px; border-radius: 50px;
background-color: ${(props) => props.theme.lightBackgroundTransparent}; background-color: ${({ theme }) => theme.background.transparent.light};
font-size: ${(props) => props.theme.fontSizeExtraSmall}; font-size: ${({ theme }) => theme.font.size.xs};
padding: ${(props) => props.theme.spacing(1)} padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)}
${(props) => props.theme.spacing(2)} ${(props) => props.theme.spacing(1)} ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
${(props) => props.theme.spacing(2)};
margin-left: auto; // this aligns the pill to the right margin-left: auto; // this aligns the pill to the right
`; `;
front/src/modules/ui/layout/navbar/NavTitle.tsx
+5 -5
View File
@@ -5,13 +5,13 @@ type OwnProps = {
}; };
const StyledTitle = styled.div` const StyledTitle = styled.div`
color: ${(props) => props.theme.text30}; color: ${({ theme }) => theme.font.color.light};
display: flex; display: flex;
font-size: ${(props) => props.theme.fontSizeExtraSmall}; font-size: ${({ theme }) => theme.font.size.xs};
font-weight: 600; font-weight: 600;
padding-bottom: ${(props) => props.theme.spacing(2)}; padding-bottom: ${({ theme }) => theme.spacing(2)};
padding-left: ${(props) => props.theme.spacing(1)}; padding-left: ${({ theme }) => theme.spacing(1)};
padding-top: ${(props) => props.theme.spacing(8)}; padding-top: ${({ theme }) => theme.spacing(8)};
text-transform: uppercase; text-transform: uppercase;
`; `;
front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx
+6 -6
View File
@@ -13,9 +13,9 @@ const StyledContainer = styled.div`
display: flex; display: flex;
height: 34px; height: 34px;
justify-content: space-between; justify-content: space-between;
margin-left: ${(props) => props.theme.spacing(1)}; margin-left: ${({ theme }) => theme.spacing(1)};
padding: ${(props) => props.theme.spacing(2)}; padding: ${({ theme }) => theme.spacing(2)};
padding-top: ${(props) => props.theme.spacing(1)}; padding-top: ${({ theme }) => theme.spacing(1)};
user-select: none; user-select: none;
width: 100%; width: 100%;
`; `;
@@ -39,11 +39,11 @@ const StyledLogo = styled.div<StyledLogoProps>`
`; `;
const StyledName = styled.div` const StyledName = styled.div`
color: ${(props) => props.theme.text80}; color: ${({ theme }) => theme.font.color.primary};
font-family: 'Inter'; font-family: 'Inter';
font-size: ${(props) => props.theme.fontSizeMedium}; font-size: ${({ theme }) => theme.font.size.md};
font-weight: 500; font-weight: 500;
margin-left: ${(props) => props.theme.spacing(1)}; margin-left: ${({ theme }) => theme.spacing(1)};
`; `;
function NavWorkspaceButton() { function NavWorkspaceButton() {
front/src/modules/ui/layout/navbar/NavbarContainer.tsx
+3 -2
View File
@@ -1,13 +1,14 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { MOBILE_VIEWPORT } from '@/ui/themes/themes';
import { isNavbarOpenedState } from '../states/isNavbarOpenedState'; import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
import { MOBILE_VIEWPORT } from '../styles/themes';
const StyledNavbarContainer = styled.div` const StyledNavbarContainer = styled.div`
flex-direction: column; flex-direction: column;
width: ${(props) => (useRecoilValue(isNavbarOpenedState) ? 'auto' : '0')}; width: ${(props) => (useRecoilValue(isNavbarOpenedState) ? 'auto' : '0')};
padding: ${(props) => props.theme.spacing(2)}; padding: ${({ theme }) => theme.spacing(2)};
flex-shrink: 0; flex-shrink: 0;
overflow: hidden; overflow: hidden;
front/src/modules/ui/layout/navbar/sub-navbar/NavBackButton.tsx
+5 -5
View File
@@ -13,14 +13,14 @@ const IconAndButtonContainer = styled.button`
align-items: center; align-items: center;
background: inherit; background: inherit;
border: none; border: none;
color: ${(props) => props.theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-size: ${(props) => props.theme.fontSizeLarge}; font-size: ${({ theme }) => theme.font.size.lg};
font-weight: ${(props) => props.theme.fontWeightSemibold}; font-weight: ${({ theme }) => theme.font.weight.semiBold};
gap: ${(props) => props.theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(1)};
padding: ${(props) => props.theme.spacing(1)}; padding: ${({ theme }) => theme.spacing(1)};
width: 100%; width: 100%;
`; `;
front/src/modules/ui/layout/navbar/sub-navbar/SubNavBarContainer.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ const StyledContainer = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-left: 300px; padding-left: 300px;
padding-top: ${(props) => props.theme.spacing(6)}; padding-top: ${({ theme }) => theme.spacing(6)};
`; `;
const StyledNavItemsContainer = styled.div` const StyledNavItemsContainer = styled.div`
front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ import { RightDrawerRouter } from './RightDrawerRouter';
const StyledRightDrawer = styled.div` const StyledRightDrawer = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: ${(props) => props.theme.rightDrawerWidth}; width: ${({ theme }) => theme.rightDrawerWidth};
`; `;
export function RightDrawer() { export function RightDrawer() {
front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx
+3 -3
View File
@@ -4,8 +4,8 @@ import { RightDrawerTopBarCloseButton } from './RightDrawerTopBarCloseButton';
const StyledRightDrawerTopBar = styled.div` const StyledRightDrawerTopBar = styled.div`
align-items: center; align-items: center;
border-bottom: 1px solid ${(props) => props.theme.lightBorder}; border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
color: ${(props) => props.theme.text60}; color: ${({ theme }) => theme.font.color.secondary};
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-size: 13px; font-size: 13px;
@@ -18,7 +18,7 @@ const StyledRightDrawerTopBar = styled.div`
const StyledTopBarTitle = styled.div` const StyledTopBarTitle = styled.div`
align-items: center; align-items: center;
font-weight: 500; font-weight: 500;
margin-right: ${(props) => props.theme.spacing(1)}; margin-right: ${({ theme }) => theme.spacing(1)};
`; `;
export function RightDrawerTopBar({ export function RightDrawerTopBar({
front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx
+4 -4
View File
@@ -8,7 +8,7 @@ import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
const StyledButton = styled.button` const StyledButton = styled.button`
align-items: center; align-items: center;
background: none; background: none;
border: 1px solid ${(props) => props.theme.lightBorder}; border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@@ -16,14 +16,14 @@ const StyledButton = styled.button`
height: 24px; height: 24px;
padding: 3px; padding: 3px;
transition: ${(props) => props.theme.clickableElementBackgroundTransition}; transition: ${({ theme }) => theme.clickableElementBackgroundTransition};
width: 24px; width: 24px;
&:hover { &:hover {
background: ${(props) => props.theme.lightBackgroundTransparent}; background: ${({ theme }) => theme.background.transparent.light};
} }
svg { svg {
color: ${(props) => props.theme.text40}; color: ${({ theme }) => theme.font.color.tertiary};
transform: rotate(45deg); transform: rotate(45deg);
} }
`; `;
front/src/modules/ui/layout/states/isNavbarOpenedState.ts
+1 -1
View File
@@ -1,6 +1,6 @@
import { atom } from 'recoil'; import { atom } from 'recoil';
import { MOBILE_VIEWPORT } from '../styles/themes'; import { MOBILE_VIEWPORT } from '@/ui/themes/themes';
const isMobile = window.innerWidth <= MOBILE_VIEWPORT; const isMobile = window.innerWidth <= MOBILE_VIEWPORT;
front/src/modules/ui/layout/styles/assets/dark-noise.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

front/src/modules/ui/layout/styles/colors/background.ts
-18
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',
};
front/src/modules/ui/layout/styles/colors/border.ts
-11
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',
};
front/src/modules/ui/layout/styles/colors/index.ts
-25
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,
};
front/src/modules/ui/layout/styles/colors/modal.ts
-3
View File
@@ -1,3 +0,0 @@
export const modalColorsLight = {};
export const modalColorsDark = {};
front/src/modules/ui/layout/styles/colors/palette.ts
-1
View File
@@ -1 +0,0 @@
export const paletteColors = {};
front/src/modules/ui/layout/styles/colors/text.ts
-19
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',
};
front/src/modules/ui/layout/styles/colors/transparent.ts
-19
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)',
};
front/src/modules/ui/layout/styles/effects.ts
-32
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};
}
`;
front/src/modules/ui/layout/styles/texts.ts
-21
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,
};
front/src/modules/ui/layout/styles/themes.ts
-67
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;
front/src/modules/ui/layout/top-bar/TopBar.tsx
+6 -6
View File
@@ -10,13 +10,13 @@ export const TOP_BAR_MIN_HEIGHT = 40;
const TopBarContainer = styled.div` const TopBarContainer = styled.div`
align-items: center; align-items: center;
background: ${(props) => props.theme.noisyBackground}; background: ${({ theme }) => theme.background.noisy};
color: ${(props) => props.theme.text80}; color: ${({ theme }) => theme.font.color.primary};
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-size: 14px; font-size: 14px;
min-height: ${TOP_BAR_MIN_HEIGHT}px; min-height: ${TOP_BAR_MIN_HEIGHT}px;
padding: ${(props) => props.theme.spacing(2)}; padding: ${({ theme }) => theme.spacing(2)};
`; `;
const TitleContainer = styled.div` const TitleContainer = styled.div`
@@ -29,16 +29,16 @@ const TitleContainer = styled.div`
const AddButtonContainer = styled.div` const AddButtonContainer = styled.div`
align-items: center; align-items: center;
border: 1px solid ${(props) => props.theme.primaryBorder}; border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: 4px; border-radius: 4px;
color: ${(props) => props.theme.text40}; color: ${({ theme }) => theme.font.color.tertiary};
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
height: 28px; height: 28px;
justify-content: center; justify-content: center;
justify-self: flex-end; justify-self: flex-end;
margin-right: ${(props) => props.theme.spacing(1)}; margin-right: ${({ theme }) => theme.spacing(1)};
user-select: none; user-select: none;
width: 28px; width: 28px;
`; `;
front/src/modules/ui/layout/top-bar/TopTitle.tsx
+2 -2
View File
@@ -10,8 +10,8 @@ const TitleAndCollapseContainer = styled.div`
const TitleContainer = styled.div` const TitleContainer = styled.div`
display: flex; display: flex;
font-size: ${(props) => props.theme.fontSizeLarge}; font-size: ${({ theme }) => theme.font.size.lg};
font-weight: ${(props) => props.theme.fontWeightSemibold}; font-weight: ${({ theme }) => theme.font.weight.semiBold};
width: 100%; width: 100%;
`; `;
front/src/modules/ui/themes/assets/dark-noise.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 203 KiB

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

front/src/modules/ui/themes/background.ts
+37
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),
};
front/src/modules/ui/themes/blur.ts
+4
View File
@@ -0,0 +1,4 @@
export const blur = {
light: 'blur(6px)',
strong: 'blur(20px)',
};
front/src/modules/ui/themes/border.ts
+28
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,
};
front/src/modules/ui/themes/boxShadow.ts
+23
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)}`,
};
front/src/modules/ui/themes/colors.ts
+121
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})`;
}
front/src/modules/ui/themes/effects.ts
+34
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};
}
`;
front/src/modules/ui/themes/font.ts
+42
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