Fix: danger font color values & acc. to design specs #5344

its-id · 2024-05-09T16:42:01Z

changes done (commits in order):

Fixed fontLight & fontDark 'danger' color as per design spec: changed theme.font.color.danger to match the disabled color theme (for light and dark) as followed by the BorderDark and BorderLight. Use the updated colors for Buttons
Replace theme.font.color.danger with theme.color.red (5 changed files): Since theme.font.color.danger has now been updated to contain the disabled button color values, we use the theme.color.red color in all the places using theme.font.color.danger as it contains same value that was used to be of theme.font.color.danger before.
fixed hover color of StyledConfirmationButton in ConfirmationModal: issue can be seen when going to /settings/workspace and trying to hover on delete the workspace button in dark mode. fixed with this commit.

Important Note: The files /twenty-front/src/modules/ui/theme/constants/FontLight.ts and /twenty-front/src/modules/ui/theme/constants/FontDark.ts are of no use as theme for the entire 'twenty-front' and 'twenty-chrome-extension' packages use the same files from '@/ui/theme' (twenty-ui package)

dark mode :

when disabled:

on hover:

light mode (when disabled):

on hover:

- Changed theme.font.color.danger to match the disabled color theme (for light and dark) as followed by the BorderDark and BorderLight - Use the updated colors for Buttons - Important Note: The files `/twenty-front/src/modules/ui/theme/constants/FontLight.ts` and `/twenty-front/src/modules/ui/theme/constants/FontDark.ts` are of no use as theme for the entire 'twenty-front' and 'twenty-chrome-extension' packages use the same files from '@/ui/theme' (twenty-ui package)

Since `theme.font.color.danger` has now been updated to contain the disabled button color values, we use the `theme.color.red` color in all the places using `theme.font.color.danger` as it contains same value that was used to be of `theme.font.color.danger` before.

issue can be seen when going to /settings/workspace and trying to hover on delete the workspace button in dark mode. fixed with this commit

charlesBochet · 2024-05-14T15:26:38Z

packages/twenty-ui/src/theme/constants/FontDark.ts

@@ -10,7 +10,7 @@ export const FONT_DARK = {
    light: GRAY_SCALE.gray50,
    extraLight: GRAY_SCALE.gray55,
    inverted: GRAY_SCALE.gray100,
-    danger: COLOR.red,
+    danger: COLOR.red70,


@Bonapara I feel this was right before @its-id change.
the danger color font should be red #f83e3e according to Figma

Could you confirm?

So, to understand the fix: a brief about the issue itself. Earlier the FontLight and FontDark both were hardcoded to take only single color which turned out to be an issue in disabled mode. (ref to issue screenshot here)

The fix revolved around the usage of FontDark and FontLight to work same as BorderLight and BorderDark in disabled mode. So, I made FontDark and FontLight danger color to use same value same as being used by BorderLight (#fed8d8) and BorderDark (#441f1f).

And as for the other files which were previously using font.color.danger value which was basically COLOR.red (#f83e3e), I switched to theme.color.red making sure their color value doesn't change.

This now becomes much more cleaner and easier to use. So, acc. to current changes, fontDark and fontLight danger color is being used only for disabled mode.

charlesBochet · 2024-05-14T15:26:46Z

packages/twenty-ui/src/theme/constants/FontLight.ts

@@ -10,7 +10,7 @@ export const FONT_LIGHT = {
    light: GRAY_SCALE.gray35,
    extraLight: GRAY_SCALE.gray30,
    inverted: GRAY_SCALE.gray0,
-    danger: COLOR.red,
+    danger: COLOR.red20,


charlesBochet · 2024-05-14T15:27:41Z

...twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx

@@ -38,7 +38,7 @@ export const StyledMenuItemBase = styled.li<MenuItemBaseProps>`
    switch (accent) {
      case 'danger': {
        return css`
-          color: ${theme.font.color.danger};
+          color: ${theme.color.red};
