Update Card and LegacyCard mobile styles

Shopify · Apr 23, 2024 · 41e2eb1 · 41e2eb1
1 parent a83084b
commit 41e2eb1
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/.changeset/angry-avocados-scream.md b/.changeset/angry-avocados-scream.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Removed default `Card` and `LegacyCard` bevel styles below sm breakpoint
diff --git a/polaris-react/src/components/Card/Card.tsx b/polaris-react/src/components/Card/Card.tsx
@@ -1,7 +1,6 @@
 import type {
   BreakpointsAlias,
   ColorBackgroundAlias,
-  BorderRadiusAliasOrScale,
   SpaceScale,
 } from '@shopify/polaris-tokens';
 import React from 'react';
@@ -40,15 +39,15 @@ export const Card = ({
   roundedAbove = 'sm',
 }: CardProps) => {
   const breakpoints = useBreakpoints();
-  const defaultBorderRadius: BorderRadiusAliasOrScale = '300';
-  const hasBorderRadius = Boolean(breakpoints[`${roundedAbove}Up`]);
+  const hasBevel = Boolean(breakpoints[`${roundedAbove}Up`]);
 
   return (
     <WithinContentContext.Provider value>
       <ShadowBevel
         boxShadow="100"
-        borderRadius={hasBorderRadius ? defaultBorderRadius : '0'}
+        borderRadius="300"
         zIndex="32"
+        bevel={hasBevel}
       >
         <Box
           background={background}

diff --git a/polaris-react/src/components/LegacyCard/LegacyCard.module.css b/polaris-react/src/components/LegacyCard/LegacyCard.module.css
@@ -1,12 +1,8 @@
 .LegacyCard {
   background-color: var(--p-color-bg-surface);
-  box-shadow: var(--p-shadow-300);
   outline: var(--p-border-width-025) solid transparent;
   overflow: clip;
 
-  @mixin shadow-bevel var(--p-shadow-100), var(--p-border-radius-0), null, '',
-    101;
-
   + .LegacyCard {
     margin-top: var(--p-space-400);
 
@@ -16,6 +12,7 @@
   }
 
   @media (--p-breakpoints-sm-up) {
+    box-shadow: var(--p-shadow-300);
     border-radius: var(--p-border-radius-200);
 
     @mixin shadow-bevel var(--p-shadow-100), var(--p-border-radius-300), null,