Merge pull request #1389 from artsy/DIA-664-dark-mode-q-a--overlay

fix(theme): improves legibility for overlays
artsy · Jun 4, 2024 · 0b72e48 · 0b72e48
2 parents b6366f7 + 583d03a
commit 0b72e48
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 20 deletions.
diff --git a/packages/palette-tokens/src/themes/v3.tsx b/packages/palette-tokens/src/themes/v3.tsx
@@ -100,7 +100,27 @@ const EFFECTS = {
   /** Shadow to drop under text to improve legibility when over images */
   textShadow: "0 0 15px rgba(0, 0, 0, 0.25)",
   /** Overlay to improve legibility of text */
-  overlayGradient: "linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25))",
+  overlayGradient: `
+    linear-gradient(
+      to bottom,
+      hsla(0, 0%, 0%, 0) 0%,
+      hsla(0, 0%, 0%, 0.006) 8.1%,
+      hsla(0, 0%, 0%, 0.024) 15.5%,
+      hsla(0, 0%, 0%, 0.052) 22.5%,
+      hsla(0, 0%, 0%, 0.088) 29%,
+      hsla(0, 0%, 0%, 0.13) 35.3%,
+      hsla(0, 0%, 0%, 0.176) 41.2%,
+      hsla(0, 0%, 0%, 0.225) 47.1%,
+      hsla(0, 0%, 0%, 0.275) 52.9%,
+      hsla(0, 0%, 0%, 0.324) 58.8%,
+      hsla(0, 0%, 0%, 0.37) 64.7%,
+      hsla(0, 0%, 0%, 0.412) 71%,
+      hsla(0, 0%, 0%, 0.448) 77.5%,
+      hsla(0, 0%, 0%, 0.476) 84.5%,
+      hsla(0, 0%, 0%, 0.494) 91.9%,
+      hsla(0, 0%, 0%, 0.5) 100%
+    );
+  `,
   /** Fade right edge */
   fadeRight:
     "linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%)",

diff --git a/packages/palette-tokens/src/themes/v3Dark.tsx b/packages/palette-tokens/src/themes/v3Dark.tsx
@@ -63,10 +63,29 @@ const EFFECTS: Effects = {
   innerShadow: "1px 1px 2px 0 rgba(255, 255, 255, 0.1) inset",
   flatShadow: "0 1px 1px 0 rgba(255, 255, 255, 0.05)",
   /** Shadow to drop under text to improve legibility when over images */
-  textShadow: "0 0 15px rgba(255, 255, 255, 0.25)",
+  textShadow: "0 0 15px rgba(255, 255, 255, 0.5)",
   /** Overlay to improve legibility of text */
-  overlayGradient:
-    "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25))",
+  overlayGradient: `
+    linear-gradient(
+      to bottom,
+      hsla(0, 0%, 100%, 0) 0%,
+      hsla(0, 0%, 100%, 0.01) 8.1%,
+      hsla(0, 0%, 100%, 0.036) 15.5%,
+      hsla(0, 0%, 100%, 0.078) 22.5%,
+      hsla(0, 0%, 100%, 0.132) 29%,
+      hsla(0, 0%, 100%, 0.194) 35.3%,
+      hsla(0, 0%, 100%, 0.264) 41.2%,
+      hsla(0, 0%, 100%, 0.338) 47.1%,
+      hsla(0, 0%, 100%, 0.412) 52.9%,
+      hsla(0, 0%, 100%, 0.486) 58.8%,
+      hsla(0, 0%, 100%, 0.556) 64.7%,
+      hsla(0, 0%, 100%, 0.618) 71%,
+      hsla(0, 0%, 100%, 0.672) 77.5%,
+      hsla(0, 0%, 100%, 0.714) 84.5%,
+      hsla(0, 0%, 100%, 0.74) 91.9%,
+      hsla(0, 0%, 100%, 0.75) 100%
+    );
+`,
   /** Fade right edge */
   fadeRight:
     "linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)",

diff --git a/packages/palette/src/elements/Cards/Card.tsx b/packages/palette/src/elements/Cards/Card.tsx
@@ -10,6 +10,8 @@ export interface CardProps extends BoxProps {
   title?: string | null
   subtitle?: string | null
   status?: string | null
+  aspectWidth?: number
+  aspectHeight?: number
 }
 
 /**
@@ -21,13 +23,22 @@ export const Card: React.FC<CardProps> = ({
   title,
   subtitle,
   status,
+  maxWidth = 280,
+  aspectWidth = 280,
+  aspectHeight = 370,
   ...rest
 }) => {
   const { theme } = useTheme()
 
+  const hasInfo = title || subtitle || status
+
   return (
-    <Box maxWidth={280} {...rest}>
-      <ResponsiveBox aspectWidth={280} aspectHeight={370} maxWidth="100%">
+    <Box maxWidth={maxWidth} {...rest}>
+      <ResponsiveBox
+        aspectWidth={aspectWidth}
+        aspectHeight={aspectHeight}
+        maxWidth="100%"
+      >
         <Image
           alt=""
           height="100%"
@@ -36,14 +47,16 @@ export const Card: React.FC<CardProps> = ({
           {...(typeof image === "string" ? { src: image } : image)}
         />
 
-        <Box
-          position="absolute"
-          width="100%"
-          height="100%"
-          top={0}
-          left={0}
-          background={theme.effects.overlayGradient}
-        />
+        {hasInfo && (
+          <Box
+            position="absolute"
+            width="100%"
+            height="50%"
+            bottom={0}
+            left={0}
+            background={theme.effects.overlayGradient}
+          />
+        )}
 
         <Box
           position="absolute"
@@ -59,9 +72,11 @@ export const Card: React.FC<CardProps> = ({
             </Text>
           )}
 
-          <Text variant="sm-display" color="white100">
-            {title}
-          </Text>
+          {title && (
+            <Text variant="sm-display" color="white100">
+              {title}
+            </Text>
+          )}
 
           {subtitle && (
             <Text variant="sm-display" color="black15">

diff --git a/packages/palette/src/elements/Drawer/Drawer.tsx b/packages/palette/src/elements/Drawer/Drawer.tsx
@@ -5,6 +5,7 @@ import styled, { css } from "styled-components"
 import { zIndex } from "styled-system"
 import { FocusOn } from "react-focus-on"
 import { usePortal } from "../../utils/usePortal"
+import { themeGet } from "@styled-system/theme-get"
 
 export interface DrawerProps {
   open: boolean
@@ -56,14 +57,12 @@ export const Drawer: FC<DrawerProps> = ({
       </Focus>
 
       <Overlay
-        backgroundColor="black100"
-        height="100%"
         display={["none", "flex"]}
         onClick={onClose}
         data-testid="drawer-overlay"
         width="inherit"
         style={{
-          opacity: open ? "0.5" : "0",
+          opacity: open ? 1 : 0,
         }}
       />
     </Container>
@@ -89,6 +88,8 @@ const Content = styled(Box)<
 `
 
 const Overlay = styled(Box)`
+  height: 100%;
+  background: ${themeGet("effects.backdrop")};
   transition: opacity 150ms linear 50ms;
 `