Complete color refactoring (#15414)

# Complete color refactoring

Closes https://github.com/twentyhq/core-team-issues/issues/1779

- Updated all colors to use Radix colors with P3 color space allowing
for brighter colors
- Created our own gray scale interpolated on Radix's scale to have the
same values for grays as the old ones in the app
- Introduced dark and light colors as well as there transparent versions
- Added many new colors from radix that can be used in the tags or in
the graphs
- Updated multiple color utilities to match new behaviors
- Changed the computation of Avatar colors to return only colors from
the theme (before it was random hsl)

These changes allow the user to use new colors in tags or charts, the
colors are brighter and with better contrast. We have a full range of
color variations from 1 to 12 where before we only had 4 adaptative
colors.
All these changes will allow us to develop custom themes for the user
soon, where users can choose their accent colors, background colors and
there contrast.

packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
 import { motion } from 'framer-motion';
 import { IconReload } from 'twenty-ui/display';
-import { GRAY_SCALE, THEME_DARK } from 'twenty-ui/theme';
+import { THEME_DARK } from 'twenty-ui/theme';
 
 type AppRootErrorFallbackProps = AppErrorDisplayProps;
 
@@ -17,8 +17,8 @@ const StyledContainer = styled.div`
 `;
 
 const StyledPanel = styled.div`
-  background: ${GRAY_SCALE.gray0};
-  border: 1px solid ${GRAY_SCALE.gray20};
+  background: ${({ theme }) => theme.grayScale.gray1};
+  border: 1px solid ${({ theme }) => theme.grayScale.gray5};
   border-radius: 8px;
   height: 100%;
   overflow-x: auto;
@@ -66,13 +66,13 @@ const StyledEmptyTextContainer = styled.div`
 `;
 
 const StyledEmptyTitle = styled.div`
-  color: ${GRAY_SCALE.gray60};
+  color: ${({ theme }) => theme.grayScale.gray12};
   font-size: 1.23rem;
   font-weight: 600;
 `;
 
 const StyledEmptySubTitle = styled.div`
-  color: ${GRAY_SCALE.gray50};
+  color: ${({ theme }) => theme.grayScale.gray11};
   font-size: 0.92rem;
   font-weight: 400;
   line-height: 1.5;
@@ -83,9 +83,9 @@ const StyledEmptySubTitle = styled.div`
 
 const StyledButton = styled.button`
   align-items: center;
-  background: ${GRAY_SCALE.gray0};
-  border: 1px solid ${GRAY_SCALE.gray20};
-  color: ${GRAY_SCALE.gray60};
+  background: ${({ theme }) => theme.grayScale.gray1};
+  border: 1px solid ${({ theme }) => theme.grayScale.gray5};
+  color: ${({ theme }) => theme.grayScale.gray12};
   border-radius: 8px;
   cursor: pointer;
   display: flex;
@@ -94,7 +94,7 @@ const StyledButton = styled.button`
 `;
 
 const StyledIcon = styled(IconReload)`
-  color: ${GRAY_SCALE.gray60};
+  color: ${({ theme }) => theme.grayScale.gray12};
   margin-right: 8px;
 `;