fix(Alert): Adjust colors

cozy · Nov 28, 2023 · 29a3b80 · 29a3b80
1 parent a09926b
commit 29a3b80
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 65 deletions.
diff --git a/react/Alert/Readme.md b/react/Alert/Readme.md
@@ -17,6 +17,7 @@ const initialVariants = [{
   square: false,
   actionOne: false,
   actionTwo: false,
+  filled: false,
   close: false
 }]
 
@@ -26,6 +27,7 @@ const initialVariants = [{
   {variant => (
     <Alert
       color={variant.color ? "#EFA82D" : undefined}
+      variant={variant.filled ? 'filled' : undefined}
       block={variant.block}
       square={variant.square}
       icon={variant.noIcon ? false : variant.largeIcon ? <Icon icon={DeviceLaptopIcon} color="var(--errorColor)" size={32} /> : undefined}
@@ -81,7 +83,7 @@ const makeButtonColor = color => ['primary', 'secondary'].includes(color) ? unde
             )}
             onClose={variant.close ? () => {} : undefined}
           >
-            {variant.title && <AlertTitle>{color.toUpperCase()}</AlertTitle>}
+            {variant.title && <AlertTitle>{color}</AlertTitle>}
             This is a {color} alert
           </Alert>
         </div>
@@ -97,11 +99,16 @@ const makeButtonColor = color => ['primary', 'secondary'].includes(color) ? unde
             severity={color}
             block={variant.block}
             action={variant.close ? undefined : (
-              <Button variant="primary" size="small" color={makeButtonColor(color)} label="ACTION" />
+              <Button
+                variant='text'
+                style={{ color: `var(--${color}ContrastTextColor)` }}
+                size="small"
+                label="ACTION"
+              />
             )}
             onClose={variant.close ? () => {} : undefined}
           >
-            {variant.title && <AlertTitle>{color.toUpperCase()}</AlertTitle>}
+            {variant.title && <AlertTitle>{color}</AlertTitle>}
             This is a {color} alert
           </Alert>
         </div>
@@ -121,7 +128,7 @@ const makeButtonColor = color => ['primary', 'secondary'].includes(color) ? unde
             )}
             onClose={variant.close ? () => {} : undefined}
           >
-            {variant.title && <AlertTitle>{color.toUpperCase()}</AlertTitle>}
+            {variant.title && <AlertTitle>{color}</AlertTitle>}
             This is a {color} alert
           </Alert>
         </div>

diff --git a/react/Alert/index.jsx b/react/Alert/index.jsx
@@ -57,6 +57,7 @@ const Alert = forwardRef(
     },
     ref
   ) => {
+    // as primary and secondary doesn't exist on Mui Alert, we force success severity for those
     const madeSeverity = ['primary', 'secondary'].includes(severity)
       ? 'success'
       : severity
@@ -70,7 +71,7 @@ const Alert = forwardRef(
         style={{ backgroundColor: color, borderRadius: square && 0 }}
         className={cx(
           className,
-          `cozyAlert-${severity}-${variant}`,
+          `cozyStyles-${severity}-${variant}`,
           { block },
           { action: Boolean(action) }
         )}

diff --git a/react/MuiCozyTheme/helpers.js b/react/MuiCozyTheme/helpers.js
@@ -1,18 +1,19 @@
-import { alpha, lighten, darken } from '../styles'
-
-export const makeAlertColor = (theme, color) => {
-  const themeColorByColor = {
-    primary: theme.palette[color].main,
-    secondary: theme.palette.text.primary
-  }
+import { alpha } from '../styles'
 
+export const makeAlertColor = (theme, severity) => {
   // same approach as Mui, see https://github.com/mui/material-ui/blob/v4.x/packages/material-ui-lab/src/Alert/Alert.js#L28
   return {
     '&-standard': {
-      color: darken(themeColorByColor[color], 0.6),
-      backgroundColor: lighten(themeColorByColor[color], 0.9),
+      color: theme.palette.text.primary,
+      backgroundColor: alpha(
+        theme.palette[severity].main,
+        theme.palette.background.contrastOpacity
+      ),
       '& $icon': {
-        color: themeColorByColor[color]
+        color:
+          severity === 'secondary'
+            ? theme.palette.text.primary
+            : theme.palette[severity].main
       },
       '& $action': {
         '& button[title="Close"]': {
@@ -21,45 +22,22 @@ export const makeAlertColor = (theme, color) => {
       }
     },
     '&-outlined': {
-      color: darken(themeColorByColor[color], 0.6),
-      border: `1px solid ${themeColorByColor[color]}`,
+      color: theme.palette.text.primary,
+      border: `1px solid ${theme.palette[severity].main}`,
       '& $icon': {
-        color: themeColorByColor[color]
+        color:
+          severity === 'secondary'
+            ? theme.palette.text.primary
+            : theme.palette[severity].main
       }
     },
     '&-filled': {
-      backgroundColor:
-        color === 'secondary'
-          ? theme.palette.grey[600]
-          : themeColorByColor[color]
-    }
-  }
-}
-
-export const makeAlertInvertedColor = (theme, color) => {
-  return {
-    '&-standard': {
-      color: theme.palette.primary.main,
-      backgroundColor: theme.palette.background.default,
-      '& $icon': {
-        color: theme.palette[color].main
-      }
-    },
-    '&-outlined': {
-      color: theme.palette.primary.main,
-      border: `1px solid ${theme.palette.primary.main}`,
-      '& $icon': {
-        color: theme.palette[color].main
-      }
-    },
-    '&-filled': {
-      color: theme.palette[color].contrastText,
-      backgroundColor:
-        color === 'secondary'
-          ? theme.palette.grey[200]
-          : theme.palette[color].main,
-      '& $icon': {
-        color: theme.palette[color].contrastText
+      color: theme.palette[severity].contrastText,
+      backgroundColor: theme.palette[severity].main,
+      '& $action': {
+        '& button[title="Close"]': {
+          color: theme.palette[severity].contrastText
+        }
       }
     }
   }

diff --git a/react/MuiCozyTheme/makeInvertedOverrides.js b/react/MuiCozyTheme/makeInvertedOverrides.js
@@ -1,6 +1,5 @@
 import merge from 'lodash/merge'
 
-import { makeAlertInvertedColor } from './helpers'
 import { makeOverrides } from './makeOverrides'
 
 export const makeInvertedOverrides = invertedTheme => {
@@ -28,18 +27,6 @@ export const makeInvertedOverrides = invertedTheme => {
         backgroundColor: 'rgba(255,255,255,0.2)'
       }
     },
-    MuiAlert: {
-      root: {
-        '&.cozyAlert': {
-          '&-primary': makeAlertInvertedColor(invertedTheme, 'primary'),
-          '&-secondary': makeAlertInvertedColor(invertedTheme, 'secondary'),
-          '&-success': makeAlertInvertedColor(invertedTheme, 'success'),
-          '&-error': makeAlertInvertedColor(invertedTheme, 'error'),
-          '&-warning': makeAlertInvertedColor(invertedTheme, 'warning'),
-          '&-info': makeAlertInvertedColor(invertedTheme, 'info')
-        }
-      }
-    },
     MuiSnackbarContent: {
       root: {
         backgroundColor: invertedTheme.palette.grey[200]

diff --git a/react/MuiCozyTheme/makeOverrides.js b/react/MuiCozyTheme/makeOverrides.js
@@ -760,9 +760,13 @@ export const makeOverrides = theme => ({
   MuiAlert: {
     root: {
       padding: '8px 16px',
-      '&.cozyAlert': {
+      '&.cozyStyles': {
         '&-primary': makeAlertColor(theme, 'primary'),
-        '&-secondary': makeAlertColor(theme, 'secondary')
+        '&-secondary': makeAlertColor(theme, 'secondary'),
+        '&-success': makeAlertColor(theme, 'success'),
+        '&-error': makeAlertColor(theme, 'error'),
+        '&-warning': makeAlertColor(theme, 'warning'),
+        '&-info': makeAlertColor(theme, 'info')
       },
       '& $icon': {
         paddingTop: '9px'