Adjust shadows and gradients for dark mode (#2433)

sumup-oss · Feb 8, 2024 · 0e0a8e8 · 0e0a8e8
1 parent 789d796
commit 0e0a8e8
Show file tree

Hide file tree

Showing 10 changed files with 45 additions and 14 deletions.
diff --git a/.changeset/stale-parrots-hear.md b/.changeset/stale-parrots-hear.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Adjust components to better support the experimental dark theme.
diff --git a/packages/circuit-ui/components/Carousel/components/Slide/Slide.module.css b/packages/circuit-ui/components/Carousel/components/Slide/Slide.module.css
@@ -11,7 +11,6 @@
 
 .inner {
   overflow: hidden;
-  box-shadow: 0 0 1px rgb(0 0 0 / 5%);
   will-change: width;
 }
 

diff --git a/packages/circuit-ui/components/Modal/Modal.module.css b/packages/circuit-ui/components/Modal/Modal.module.css
@@ -12,9 +12,9 @@
   display: block;
   content: "";
   background: linear-gradient(
-    rgb(255 255 255 / 0%),
-    rgb(255 255 255 / 66%),
-    rgb(255 255 255 / 100%)
+    color-mix(in sRGB, var(--cui-bg-elevated) 0%, transparent),
+    color-mix(in sRGB, var(--cui-bg-elevated) 66%, transparent),
+    color-mix(in sRGB, var(--cui-bg-elevated) 100%, transparent)
   );
 }
 

diff --git a/packages/circuit-ui/components/Popover/Popover.module.css b/packages/circuit-ui/components/Popover/Popover.module.css
@@ -6,6 +6,7 @@
   font-size: var(--cui-typography-body-one-font-size);
   line-height: var(--cui-typography-body-one-line-height);
   text-align: left;
+  background: var(--cui-bg-elevated);
 }
 
 .icon {
@@ -25,7 +26,11 @@
   background-color: var(--cui-bg-elevated);
   border: 1px solid var(--cui-border-subtle);
   border-radius: var(--cui-border-radius-byte);
+
+  /* Fallback for browsers that don't support color-mix yet */
   box-shadow: 0 3px 8px 0 rgb(0 0 0 / 20%);
+  box-shadow: 0 3px 8px 0
+    color-mix(in sRGB, var(--cui-border-strong) 20%, transparent);
   opacity: 0;
 }
 
@@ -93,9 +98,9 @@
   height: var(--cui-spacings-kilo);
   content: "";
   background: linear-gradient(
-    rgb(255 255 255 / 0%),
-    rgb(255 255 255 / 66%),
-    rgb(255 255 255 / 100%)
+    color-mix(in sRGB, var(--cui-bg-elevated) 0%, transparent),
+    color-mix(in sRGB, var(--cui-bg-elevated) 66%, transparent),
+    color-mix(in sRGB, var(--cui-bg-elevated) 100%, transparent)
   );
   border-bottom-right-radius: var(--cui-border-radius-byte);
   border-bottom-left-radius: var(--cui-border-radius-byte);

diff --git a/...it-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.module.css b/...it-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.module.css
@@ -44,7 +44,11 @@
 .primary:hover,
 .primary:focus-within {
   width: var(--primary-navigation-width-open);
+
+  /* Fallback for browsers that don't support color-mix yet */
   box-shadow: 0 3px 8px 0 rgb(0 0 0 / 20%);
+  box-shadow: 0 3px 8px 0
+    color-mix(in sRGB, var(--cui-border-strong) 20%, transparent);
 }
 
 @media (min-width: 1900px) {

diff --git a/...cuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.module.css b/...cuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.module.css
@@ -24,9 +24,9 @@
   height: var(--cui-spacings-mega);
   content: "";
   background: linear-gradient(
-    rgb(255 255 255 / 0%),
-    rgb(255 255 255 / 66%),
-    rgb(255 255 255 / 100%)
+    color-mix(in sRGB, var(--cui-bg-normal) 0%, transparent),
+    color-mix(in sRGB, var(--cui-bg-normal) 66%, transparent),
+    color-mix(in sRGB, var(--cui-bg-normal) 100%, transparent)
   );
 }
 
@@ -79,10 +79,9 @@
   width: 100%;
   padding: var(--cui-spacings-bit);
   background: linear-gradient(
-    to bottom,
-    rgb(255 255 255 / 100%),
-    rgb(255 255 255 / 100%) 60%,
-    rgb(255 255 255 / 0%)
+    color-mix(in sRGB, var(--cui-bg-normal) 100%, transparent),
+    color-mix(in sRGB, var(--cui-bg-normal) 100%, transparent) 66%,
+    color-mix(in sRGB, var(--cui-bg-normal) 0%, transparent)
   );
 }
 

diff --git a/packages/circuit-ui/components/legacy/Tooltip/__snapshots__/Tooltip.spec.tsx.snap b/packages/circuit-ui/components/legacy/Tooltip/__snapshots__/Tooltip.spec.tsx.snap
@@ -17,6 +17,7 @@ exports[`Tooltip > should override alignment styles with position styles 1`] = `
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
   box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent);
   top: 50%;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
@@ -74,6 +75,7 @@ exports[`Tooltip > should render with align bottom, when passed "bottom" for the
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
   box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent);
   top: 50%;
   top: calc(50% - (16px + 4px));
   left: 100%;
@@ -124,6 +126,7 @@ exports[`Tooltip > should render with align center, when passed "center" for the
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
   box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent);
   top: 50%;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
@@ -181,6 +184,7 @@ exports[`Tooltip > should render with align left, when passed "left" for the ali
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
   box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent);
   top: 50%;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
@@ -238,6 +242,7 @@ exports[`Tooltip > should render with align right, when passed "right" for the a
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
   box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent);
   top: 50%;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
@@ -295,6 +300,7 @@ exports[`Tooltip > should render with align top, when passed "top" for the align
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
   box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent);
   bottom: 50%;
   bottom: calc(50% - (16px + 4px));
   left: 100%;
@@ -345,6 +351,7 @@ exports[`Tooltip > should render with position bottom, when passed "bottom" for
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
   box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent);
   left: 50%;
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
@@ -402,6 +409,7 @@ exports[`Tooltip > should render with position left, when passed "left" for the
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
   box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent);
   top: 50%;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
@@ -459,6 +467,7 @@ exports[`Tooltip > should render with position right, when passed "right" for th
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
   box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent);
   top: 50%;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
@@ -516,6 +525,7 @@ exports[`Tooltip > should render with position top, when passed "top" for the po
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
   box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent);
   left: 50%;
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);

diff --git a/packages/circuit-ui/styles/style-mixins.spec.tsx b/packages/circuit-ui/styles/style-mixins.spec.tsx
@@ -152,7 +152,10 @@ describe('Style helpers', () => {
       expect(styles).toMatchInlineSnapshot(
         `
         "
+            /* Fallback for browsers that don't support color-mix yet */
             box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
+            box-shadow: 0 3px 8px 0
+              color-mix(in sRGB, var(--cui-border-strong) 20%, transparent);
           "
       `,
       );

diff --git a/packages/circuit-ui/styles/style-mixins.ts b/packages/circuit-ui/styles/style-mixins.ts
@@ -128,7 +128,10 @@ export const spacing = (
  */
 export function shadow(): SerializedStyles {
   return css`
+    /* Fallback for browsers that don't support color-mix yet */
     box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 0 3px 8px 0
+      color-mix(in sRGB, var(--cui-border-strong) 20%, transparent);
   `;
 }
 

diff --git a/packages/circuit-ui/styles/utility.module.css b/packages/circuit-ui/styles/utility.module.css
@@ -53,5 +53,8 @@
 }
 
 .shadow {
+  /* Fallback for browsers that don't support color-mix yet */
   box-shadow: 0 3px 8px 0 rgb(0 0 0 / 20%);
+  box-shadow: 0 3px 8px 0
+    color-mix(in sRGB, var(--cui-border-strong) 20%, transparent);
 }