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>

front/.eslintrc.js

@@ -5,7 +5,7 @@ module.exports = {
     tsconfigRootDir: __dirname,
     sourceType: 'module',
   },
-  plugins: ['@typescript-eslint/eslint-plugin', 'simple-import-sort', 'better-styled-components'],
+  plugins: ['@typescript-eslint/eslint-plugin', 'simple-import-sort', 'twenty'],
   extends: [
     'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
@@ -45,6 +45,7 @@ module.exports = {
     '@typescript-eslint/no-explicit-any': 'off',
     'simple-import-sort/imports': 'error',
     'simple-import-sort/exports': 'error',
-    'better-styled-components/sort-declarations-alphabetically': 2
-  },
+    'twenty/sort-css-properties-alphabetically': 'error',
+    'twenty/no-hardcoded-colors': 'error'
+  }
 };

front/README.md

@@ -6,7 +6,7 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 In the project directory, you can run:
 
-### `npm start`
+### `yarn start`
 
 Runs the app in the development mode.\
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
@@ -14,12 +14,12 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 The page will reload if you make edits.\
 You will also see any lint errors in the console.
 
-### `npm test`
+### `yarn test`
 
 Launches the test runner in the interactive watch mode.\
 See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-### `npm run build`
+### `yarn build`
 
 Builds the app for production to the `build` folder.\
 It correctly bundles React in production mode and optimizes the build for the best performance.
@@ -29,7 +29,7 @@ Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
-### `npm run eject`
+### `yarn eject`
 
 **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
 

front/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.7.5",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.5",
     "@hello-pangea/dnd": "^16.2.0",
@@ -115,7 +116,6 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-config-standard-with-typescript": "^23.0.0",
-    "eslint-plugin-better-styled-components": "^1.1.2",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-n": "^15.5.1",
     "eslint-plugin-prettier": "^4.2.1",
@@ -123,6 +123,7 @@
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-storybook": "^0.6.11",
+    "eslint-plugin-twenty": "file:../packages/eslint-plugin-twenty",
     "http-server": "^14.1.1",
     "mock-apollo-client": "^1.2.1",
     "msw": "^1.2.1",

front/public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.2.1).
+ * Mock Service Worker (1.2.2).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

front/src/modules/comments/components/comments/CommentHeader.tsx

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

front/src/modules/search/components/CommandMenuStyles.tsx

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

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

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

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

@@ -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;

front/src/modules/ui/components/form/DatePicker.tsx

@@ -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 {

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

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

front/src/modules/ui/layout/navbar/NavItem.tsx

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

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

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

front/src/modules/ui/layout/styles/themes.ts

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