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

Add a custom rule to prevent colors from being hardcoded outside of theme (#288)

Browse Source 
* Add a custom rule to prevent colors from being hardcoded in ESLint

* Refactor colors

* Create packages folder and fix colors

* Remove external dependency for css alphabetical order linting

* Fix install with yarn

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Félix Malfait
2023-06-14 16:56:29 +02:00
committed by GitHub
parent bf6fb0ba70
commit 31f3950439
61 changed files with 31490 additions and 62652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,9 +49,11 @@ const StyledDate = styled.div`
const StyledTooltip = styled(Tooltip)`
background-color: ${(props) => props.theme.primaryBackground};
box-shadow: 0px 2px 4px 3px rgba(0, 0, 0, 0.04);
box-shadow: 0px 2px 4px 3px
${(props) => props.theme.lightBackgroundTransparent};
box-shadow: 2px 4px 16px 6px rgba(0, 0, 0, 0.12);
box-shadow: 2px 4px 16px 6px
${(props) => props.theme.lightBackgroundTransparent};
color: ${(props) => props.theme.text100};

4
front/src/modules/search/components/CommandMenuStyles.tsx
View File

@ -4,7 +4,7 @@ import { Command } from 'cmdk';
export const StyledDialog = styled(Command.Dialog)`
background: ${(props) => props.theme.primaryBackground};
border-radius: ${(props) => props.theme.borderRadius};
box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09);
box-shadow: ${(props) => props.theme.modalBoxShadow};
font-family: ${(props) => props.theme.fontFamily};
left: 50%;
max-width: 640px;
@ -45,7 +45,7 @@ export const StyledItem = styled(Command.Item)`
transition-property: none;
user-select: none;
&:hover {
background: ${(props) => props.theme.clickableElementBackgroundHover};
background: ${(props) => props.theme.lightBackgroundTransparent};
}
&[data-selected='true'] {
background: ${(props) => props.theme.secondaryBackground};

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

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

@ -26,7 +26,7 @@ const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>`
background: ${(props) => props.theme.secondaryBackground};
border: 1px solid ${(props) => props.theme.primaryBorder};
border-radius: 8px;
box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09);
box-shadow: ${(props) => props.theme.modalBoxShadow};
left: -10px;
position: absolute;
top: 10px;

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

@ -127,7 +127,7 @@ const StyledContainer = styled.div`
margin: 2px;
&:hover {
background: rgba(0, 0, 0, 0.04);
background: ${(props) => props.theme.lightBackgroundTransparent};
}
&:first-of-type {
@ -172,7 +172,7 @@ const StyledContainer = styled.div`
border-radius: 4px;
padding-top: 6px;
&:hover {
background: rgba(0, 0, 0, 0.04);
background: ${(props) => props.theme.lightBackgroundTransparent};
}
}
& .react-datepicker__navigation--previous {

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

@ -90,7 +90,7 @@ const StyledDropdownItem = styled.li`
width: calc(160px - ${(props) => props.theme.spacing(4)});
&:hover {
background: rgba(0, 0, 0, 0.04);
background: ${(props) => props.theme.lightBackgroundTransparent};
}
`;
@ -112,7 +112,7 @@ const StyledDropdownTopOption = styled.li`
calc(${(props) => props.theme.spacing(2)});
&:hover {
background: rgba(0, 0, 0, 0.04);
background: ${(props) => props.theme.lightBackgroundTransparent};
}
user-select: none;
`;

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

@ -22,7 +22,8 @@ type StyledItemProps = {
const StyledItem = styled.button<StyledItemProps>`
align-items: center;
background: ${(props) => (props.active ? 'rgba(0, 0, 0, 0.04)' : 'inherit')};
background: ${(props) =>
props.active ? props.theme.lightBackgroundTransparent : 'inherit'};
border: none;
border-radius: 4px;
color: ${(props) => {
@ -47,7 +48,7 @@ const StyledItem = styled.button<StyledItemProps>`
padding-top: ${(props) => props.theme.spacing(1)};
pointer-events: ${(props) => (props.soon ? 'none' : 'auto')};
:hover {
background: rgba(0, 0, 0, 0.04);
background: ${(props) => props.theme.lightBackgroundTransparent};
color: ${(props) => (props.danger ? props.theme.red : props.theme.text100)};
}
user-select: none;
@ -67,7 +68,7 @@ const StyledSoonPill = styled.div`
justify-content: center;
align-items: center;
border-radius: 50px;
background-color: rgba(0, 0, 0, 0.04);
background-color: ${(props) => props.theme.lightBackgroundTransparent};
font-size: ${(props) => props.theme.fontSizeExtraSmall};
padding: ${(props) => props.theme.spacing(1)}
${(props) => props.theme.spacing(2)} ${(props) => props.theme.spacing(1)}

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

@ -20,7 +20,7 @@ const StyledButton = styled.button`
width: 24px;
&:hover {
background: ${(props) => props.theme.clickableElementBackgroundHover};
background: ${(props) => props.theme.lightBackgroundTransparent};
}
svg {
color: ${(props) => props.theme.text40};

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

@ -48,12 +48,15 @@ const lightThemeSpecific = {
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)',
primaryBorder: 'rgba(0, 0, 0, 0.08)',
lightBorder: '#f5f5f5',
mediumBorder: '#ebebeb',
clickableElementBackgroundHover: 'rgba(0, 0, 0, 0.04)',
clickableElementBackgroundTransition: 'background 0.1s ease',
text100: '#000',
@ -93,8 +96,11 @@ const darkThemeSpecific: typeof lightThemeSpecific = {
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)',
clickableElementBackgroundHover: 'rgba(0, 0, 0, 0.04)',
clickableElementBackgroundTransition: 'background 0.1s ease',
primaryBorder: 'rgba(255, 255, 255, 0.08)',
@ -148,7 +154,7 @@ export const hoverBackground = (props: any) =>
css`
transition: background 0.1s ease;
&:hover {
background: rgba(0, 0, 0, 0.04);
background: ${props.theme.lightBackgroundTransparent};
}
`;