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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -2,7 +2,7 @@ import { ChangeEvent, MouseEvent, useRef, useState } from 'react';
import styled from '@emotion/styled';
import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js';
import { textInputStyle } from '@/ui/layout/styles/themes';
import { textInputStyle } from '@/ui/themes/effects';
import { RawLink } from '../../links/RawLink';
import { EditableCell } from '../EditableCell';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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