feat: Blend ghost SquareAppIcon with luminosity in normal theme

When using normal theme, the `screen` blend mode would make the icon too difficult to be seen (not enough contrast with white background) To fix this we want to use `luminosity` blend mode with 50% opacity in normal theme The behaviour is unchanged on inverted theme
cozy · May 12, 2023 · 9374e9b · 9374e9b
1 parent 8c16952
commit 9374e9b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/react/SquareAppIcon/index.jsx b/react/SquareAppIcon/index.jsx
@@ -161,7 +161,12 @@ export const SquareAppIcon = ({
                 {letter.toUpperCase()}
               </Typography>
             ) : (
-              <div className={styles['SquareAppIcon-icon-container']}>
+              <div
+                className={cx(styles['SquareAppIcon-icon-container'], {
+                  [styles['SquareAppIcon-icon-container-normal']]:
+                    theme === 'normal'
+                })}
+              >
                 <div
                   className={cx(
                     styles['onEnd'],

diff --git a/react/SquareAppIcon/styles.styl b/react/SquareAppIcon/styles.styl
@@ -36,6 +36,10 @@ $color = constants['color'] // hard-coded color, because the component is curren
         mix-blend-mode screen
         svg, img
             filter saturate(0%)
+    .SquareAppIcon-icon-container-normal
+        mix-blend-mode luminosity
+        svg, img
+            opacity .5
 
 .SquareAppIcon-wrapper-maintenance
     .SquareAppIcon-icon-container