twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-27 14:24:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

updated: removed gradient from onboarding buttons (#5178)

Browse Source 
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>
This commit is contained in:
hnrykm 2024-04-29 10:11:42 -04:00 committed by GitHub
parent a064708d8b
commit 6e87554445
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-docs/src/ui/generated/index.d.cts
View File

@ -37,6 +37,8 @@ declare const lightTheme: {
overlay: string;
radialGradient: string;
radialGradientHover: string;
primaryInverted: string;
primaryInvertedHover: string;
};
border: {
radius: {

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

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

2
packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts
View File

@ -25,4 +25,6 @@ export const BACKGROUND_DARK = {
overlay: RGBA(GRAY_SCALE.gray80, 0.8),
radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
primaryInverted: GRAY_SCALE.gray20,
primaryInvertedHover: GRAY_SCALE.gray15,
};

2
packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts
View File

@ -25,4 +25,6 @@ export const BACKGROUND_LIGHT = {
overlay: RGBA(GRAY_SCALE.gray80, 0.8),
radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
primaryInverted: GRAY_SCALE.gray60,
primaryInvertedHover: GRAY_SCALE.gray55,
};

2
packages/twenty-ui/src/theme/constants/BackgroundDark.ts
View File

@ -25,4 +25,6 @@ export const BACKGROUND_DARK = {
overlay: RGBA(GRAY_SCALE.gray80, 0.8),
radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
primaryInverted: GRAY_SCALE.gray20,
primaryInvertedHover: GRAY_SCALE.gray15,
};

2
packages/twenty-ui/src/theme/constants/BackgroundLight.ts
View File

@ -25,4 +25,6 @@ export const BACKGROUND_LIGHT = {
overlay: RGBA(GRAY_SCALE.gray80, 0.8),
radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
primaryInverted: GRAY_SCALE.gray60,
primaryInvertedHover: GRAY_SCALE.gray55,
};