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

* 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

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)}