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

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};
}
`;