updated: removed gradient from onboarding buttons (#5178)

Fixes #5168

- Added primaryInverted and primaryInvertedHover to design system.
- Changed primary button background with a gradient to inverted-flat for
both light and dark themes.
- Hover added to go lighter (consistent with tertiary color of +5 step
on GRAY_SCALE).
- Font color changed from primary to inverted.
- Modified button border from light to strong.

Two components are still utilizing the button with gradient background -
email and chrome extension.
Figma design guidelines show them to be inverted and flat (not
gradient).

- Should I change those as well?
- Should the gradient style be removed altogether after this has been
completed?

Co-authored-by: Henry Kim <henrykim@Henrys-iMac.local>

packages/twenty-front/src/modules/ui/input/button/components/MainButton.tsx

@@ -24,7 +24,7 @@ const StyledButton = styled.button<
 
     switch (variant) {
       case 'primary':
-        return theme.background.radialGradient;
+        return theme.background.primaryInverted;
       case 'secondary':
         return theme.background.primary;
       default:
@@ -39,7 +39,7 @@ const StyledButton = styled.button<
 
     switch (variant) {
       case 'primary':
-        return theme.background.transparent.light;
+        return theme.background.transparent.strong;
       case 'secondary':
         return theme.border.color.medium;
       default:
@@ -61,7 +61,7 @@ const StyledButton = styled.button<
 
     switch (variant) {
       case 'primary':
-        return theme.grayScale.gray0;
+        return theme.font.color.inverted;
       case 'secondary':
         return theme.font.color.primary;
       default:
@@ -90,7 +90,7 @@ const StyledButton = styled.button<
       default:
         return `
           &:hover {
-            background: ${theme.background.radialGradientHover}};
+            background: ${theme.background.primaryInvertedHover}};
           }
         `;
     }