Migrate depth custom properties from v10 to v11 (#8601)

### WHY are these changes introduced? Part of #8405 ### WHAT is this pull request doing? Runs the [`v11-styles-replace-custom-property-depth`](#8272) from `@shopify/polaris-migrator` to migrate `depth` custom properties from `v10` to `v11`. e.g. ```sh cd polaris-react npx @shopify/[email protected] v11-styles-replace-custom-property-depth './src/**/*.scss' npx prettier --write "./src/**/*.scss" yarn lint:styles ``` <hr> 🚨 Note: This PR will not merge until: - [x] Shopify/web#85942 is ready to merge (so that we can release these changes in both polaris and web at the same time) - [x] #8604 is merged since one of the migrations in this PR will need to access it
Shopify · Mar 16, 2023 · 243fd62 · 243fd62
1 parent 443898f
commit 243fd62
Show file tree

Hide file tree

Showing 27 changed files with 41 additions and 35 deletions.
diff --git a/.changeset/strange-socks-fry.md b/.changeset/strange-socks-fry.md
@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': minor
+---
+
+Migrate `depth` custom properties from Polaris `v10` to `v11`
diff --git a/polaris-react/src/components/AlphaCard/AlphaCard.tsx b/polaris-react/src/components/AlphaCard/AlphaCard.tsx
@@ -53,7 +53,7 @@ export const AlphaCard = ({
     <Box
       background={background}
       padding={padding}
-      shadow="card"
+      shadow="md"
       borderRadius={hasBorderRadius ? defaultBorderRadius : undefined}
     >
       {children}

diff --git a/polaris-react/src/components/Box/Box.tsx b/polaris-react/src/components/Box/Box.tsx
@@ -6,7 +6,7 @@ import type {
   ColorsOverlayTokenAlias,
   ColorsSurfaceTokenAlias,
   ShapeBorderWidthScale,
-  DepthShadowAlias,
+  ShadowAlias,
   SpacingSpaceScale,
 } from '@shopify/polaris-tokens';
 
@@ -155,7 +155,7 @@ export interface BoxProps extends React.AriaAttributes {
     'status' | 'presentation' | 'menu' | 'listbox' | 'combobox'
   >;
   /** Shadow on box */
-  shadow?: DepthShadowAlias;
+  shadow?: ShadowAlias;
   /** Set tab order */
   tabIndex?: Extract<React.AllHTMLAttributes<HTMLElement>['tabIndex'], number>;
   /** Width of container */

diff --git a/polaris-react/src/components/BulkActions/BulkActions.scss b/polaris-react/src/components/BulkActions/BulkActions.scss
@@ -65,7 +65,7 @@ $bulk-actions-button-stacking-order: (
   padding: var(--p-space-4);
   background: var(--p-surface);
   border-radius: var(--p-border-radius-2);
-  box-shadow: var(--p-shadow-deep), var(--p-shadow-popover);
+  box-shadow: var(--p-shadow-md), var(--p-shadow-xl);
   max-width: 100%;
   pointer-events: auto;
 

diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss
@@ -155,7 +155,7 @@
   background: var(--pc-button-color);
   border-width: 0;
   border-color: transparent;
-  box-shadow: var(--p-shadow-button), var(--p-shadows-inset-button);
+  box-shadow: var(--p-shadow-sm);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   color: var(--pc-button-text);
 
@@ -169,14 +169,14 @@
 
   &:focus {
     border-color: transparent;
-    box-shadow: var(--p-shadow-button), var(--p-shadows-inset-button);
+    box-shadow: var(--p-shadow-sm);
   }
 
   &:active {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     background: var(--pc-button-color-active);
     border-color: transparent;
-    box-shadow: var(--p-shadow-button), var(--p-shadows-inset-button);
+    box-shadow: var(--p-shadow-sm);
   }
 
   &.pressed {
@@ -185,13 +185,13 @@
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     background: var(--pc-button-color-depressed);
     border-color: transparent;
-    box-shadow: var(--p-shadow-button), var(--p-shadows-inset-button);
+    box-shadow: var(--p-shadow-sm);
 
     &:hover,
     &:focus {
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       background: var(--pc-button-color-depressed);
-      box-shadow: var(--p-shadow-button), var(--p-shadows-inset-button);
+      box-shadow: var(--p-shadow-sm);
     }
   }
 

diff --git a/polaris-react/src/components/Card/Card.scss b/polaris-react/src/components/Card/Card.scss
@@ -2,7 +2,7 @@
 
 .Card {
   background-color: var(--p-surface);
-  box-shadow: var(--p-shadow-card);
+  box-shadow: var(--p-shadow-md);
   outline: var(--p-border-width-1) solid transparent;
 
   + .Card {

diff --git a/polaris-react/src/components/DataTable/DataTable.scss b/polaris-react/src/components/DataTable/DataTable.scss
@@ -359,7 +359,7 @@
   .StickyHeaderInner-isSticky {
     visibility: visible;
     background-color: var(--p-surface);
-    box-shadow: var(--p-shadow-base);
+    box-shadow: var(--p-shadow-md);
   }
 }
 

diff --git a/polaris-react/src/components/Frame/components/Toast/Toast.scss b/polaris-react/src/components/Frame/components/Toast/Toast.scss
@@ -10,7 +10,7 @@ $Backdrop-opacity: 0.88;
   background: var(--p-surface-dark);
   color: var(--p-text-on-interactive);
   margin-bottom: var(--p-space-5);
-  box-shadow: var(--p-shadow-popover);
+  box-shadow: var(--p-shadow-xl);
 
   @media #{$p-breakpoints-sm-up} {
     padding: var(--p-space-3);

diff --git a/polaris-react/src/components/FullscreenBar/FullscreenBar.scss b/polaris-react/src/components/FullscreenBar/FullscreenBar.scss
@@ -4,7 +4,7 @@
   position: relative;
   display: flex;
   height: $top-bar-height;
-  box-shadow: var(--p-shadow-top-bar);
+  box-shadow: var(--p-shadow-sm);
   background-color: var(--p-surface);
 }
 

diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss
@@ -63,7 +63,7 @@ $loading-panel-height: 53px;
   align-items: center;
   background: var(--p-surface);
   padding: var(--p-space-2) var(--p-space-4);
-  box-shadow: var(--p-shadow-base);
+  box-shadow: var(--p-shadow-md);
 
   .LoadingPanelRow {
     display: flex;
@@ -560,7 +560,7 @@ $loading-panel-height: 53px;
 .StickyTableHeader-isSticky {
   visibility: visible;
   background-color: var(--p-surface);
-  box-shadow: var(--p-shadow-base);
+  box-shadow: var(--p-shadow-md);
 }
 
 .IndexTable:hover {

diff --git a/polaris-react/src/components/LegacyCard/LegacyCard.scss b/polaris-react/src/components/LegacyCard/LegacyCard.scss
@@ -2,7 +2,7 @@
 
 .LegacyCard {
   background-color: var(--p-surface);
-  box-shadow: var(--p-shadow-card);
+  box-shadow: var(--p-shadow-md);
   outline: var(--p-border-width-1) solid transparent;
 
   + .LegacyCard {

diff --git a/polaris-react/src/components/Modal/components/Dialog/Dialog.scss b/polaris-react/src/components/Modal/components/Dialog/Dialog.scss
@@ -41,7 +41,7 @@ $large-width: 980px;
   width: 100%;
   max-height: calc(100vh - #{$vertical-spacing});
   background: var(--p-surface);
-  box-shadow: var(--p-shadow-modal);
+  box-shadow: var(--p-shadow-2xl);
 
   @media (forced-colors: active) {
     border: var(--p-border-width-1) solid transparent;

diff --git a/polaris-react/src/components/Navigation/Navigation.scss b/polaris-react/src/components/Navigation/Navigation.scss
@@ -72,7 +72,7 @@ $nav-max-width: 360px;
     height: $top-bar-height;
     padding: 0 var(--p-space-2) 0 var(--p-space-4);
     background-color: var(--p-surface);
-    box-shadow: var(--p-shadow-top-bar);
+    box-shadow: var(--p-shadow-sm);
     margin-bottom: var(--p-space-4);
 
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY

diff --git a/polaris-react/src/components/Popover/Popover.scss b/polaris-react/src/components/Popover/Popover.scss
@@ -9,7 +9,7 @@ $vertical-motion-offset: -5px;
 .Popover {
   max-width: calc(100vw - var(--p-space-8));
   margin: $visible-portion-of-arrow var(--p-space-2) var(--p-space-4);
-  box-shadow: var(--p-shadow-popover);
+  box-shadow: var(--p-shadow-xl);
   border-radius: var(--p-border-radius-2);
   will-change: left, top;
 }

diff --git a/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss b/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss
@@ -168,7 +168,7 @@ $range-output-size: 32px;
   min-width: $range-output-size;
   height: $range-output-size;
   background-color: var(--p-surface);
-  box-shadow: var(--p-shadow-popover);
+  box-shadow: var(--p-shadow-xl);
   border-radius: var(--p-border-radius-1);
   transition-property: transform;
   transition-duration: var(--p-duration-150);

diff --git a/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss b/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
@@ -268,7 +268,7 @@ $range-output-translate-x: calc(
 .OutputBubble {
   position: relative;
   display: flex;
-  box-shadow: var(--p-shadow-popover);
+  box-shadow: var(--p-shadow-xl);
   padding: 0 var(--p-space-2);
   min-width: $range-output-size;
   height: $range-output-size;

diff --git a/polaris-react/src/components/ResourceList/ResourceList.scss b/polaris-react/src/components/ResourceList/ResourceList.scss
@@ -67,7 +67,7 @@ $item-wrapper-loading-height: 64px;
 }
 
 .HeaderWrapper-isSticky {
-  box-shadow: var(--p-shadow-base);
+  box-shadow: var(--p-shadow-md);
 }
 
 .HeaderContentWrapper {

diff --git a/polaris-react/src/components/Select/Select.scss b/polaris-react/src/components/Select/Select.scss
@@ -119,7 +119,7 @@
   border: var(--p-border-width-1) solid var(--p-border-shadow);
   border-radius: var(--p-border-radius-1);
   background-color: var(--p-surface);
-  box-shadow: var(--p-shadow-button);
+  box-shadow: var(--p-shadow-sm);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include focus-ring($border-width: 1px);
   // stylelint-disable-next-line order/properties-order -- 'position' needs to sit below focus-ring since it will be overwritten with relative when the focus ring style is 'base'

diff --git a/polaris-react/src/components/Sheet/Sheet.scss b/polaris-react/src/components/Sheet/Sheet.scss
@@ -8,7 +8,7 @@ $sheet-desktop-width: 380px;
   width: 100%;
   height: 100%;
   background-color: var(--p-surface);
-  box-shadow: var(--p-shadow-modal);
+  box-shadow: var(--p-shadow-2xl);
 
   @media screen and (-ms-high-contrast: active) {
     border-left: var(--p-border-base);

diff --git a/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss b/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
@@ -7,7 +7,7 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   margin: var(--pc-tooltip-overlay-offset) var(--p-space-4) var(--p-space-4);
   opacity: 1;
-  box-shadow: var(--p-shadow-popover), var(--p-shadow-lg);
+  box-shadow: var(--p-shadow-xl), var(--p-shadow-lg);
   // stylelint-disable-next-line -- Polaris component custom properties
   border-radius: var(--pc-tooltip-border-radius);
   pointer-events: none;

diff --git a/polaris-react/src/components/TopBar/TopBar.scss b/polaris-react/src/components/TopBar/TopBar.scss
@@ -7,7 +7,7 @@ $icon-size: 20px;
   position: relative;
   display: flex;
   height: $top-bar-height;
-  box-shadow: var(--p-shadow-top-bar);
+  box-shadow: var(--p-shadow-sm);
   background-color: var(--p-surface);
   transition: var(--p-duration-200) background-color var(--p-ease-in-out);
 

diff --git a/polaris-react/src/components/TopBar/components/Search/Search.scss b/polaris-react/src/components/TopBar/components/Search/Search.scss
@@ -9,7 +9,7 @@
   top: $top-bar-height;
   left: 0;
   right: 0;
-  box-shadow: var(--p-shadow-modal);
+  box-shadow: var(--p-shadow-2xl);
   overflow: hidden;
 
   @media #{$p-breakpoints-sm-up} {

diff --git a/polaris-react/src/styles/shared/_buttons.scss b/polaris-react/src/styles/shared/_buttons.scss
@@ -14,7 +14,7 @@
   margin: 0;
   padding: $vertical-padding var(--p-space-4);
   background: var(--p-surface);
-  box-shadow: var(--p-shadow-button);
+  box-shadow: var(--p-shadow-sm);
   border-radius: var(--p-border-radius-1);
   color: var(--p-text);
   border: var(--p-border-width-1) solid var(--p-border-neutral-subdued);
@@ -37,15 +37,15 @@
   }
 
   &:focus-visible {
-    box-shadow: var(--p-shadow-button);
+    box-shadow: var(--p-shadow-sm);
     outline: 0;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($style: 'focused');
   }
 
   &:active {
     background: var(--p-action-secondary-pressed);
-    box-shadow: var(--p-shadow-button);
+    box-shadow: var(--p-shadow-sm);
 
     &::after {
       border: none;
@@ -55,7 +55,7 @@
 
   &.pressed {
     background: var(--p-action-secondary-depressed);
-    box-shadow: var(--p-shadows-inset-button-pressed);
+    box-shadow: var(--p-shadow-inset-md);
     color: var(--p-text-on-primary);
     border-color: var(--p-border-depressed);
 

diff --git a/polaris.shopify.com/content/components/layout-and-structure/alpha-card.md b/polaris.shopify.com/content/components/layout-and-structure/alpha-card.md
@@ -29,7 +29,7 @@ examples:
   - fileName: alpha-card-default.tsx
     title: Default
     description: >-
-      By default, cards have an 8px border radius and uses `--p-surface` as the background and `--p-shadow-card` as the shadow. There is padding of `space-5` (20px) around children and `space-4` (16px) for small screens.
+      By default, cards have an 8px border radius and uses `--p-surface` as the background and `--p-shadow-md` as the shadow. There is padding of `space-5` (20px) around children and `space-4` (16px) for small screens.
   - fileName: alpha-card-with-subdued-background.tsx
     title: With subdued background
     description: >-

diff --git a/polaris.shopify.com/content/components/layout-and-structure/box.md b/polaris.shopify.com/content/components/layout-and-structure/box.md
@@ -30,7 +30,7 @@ examples:
   - fileName: box-with-shadow.tsx
     title: Shadow
     description: >-
-      Shadow can be applied using the [Depth tokens](https://polaris.shopify.com/tokens/depth).
+      Shadow can be applied using the [Shadow tokens](https://polaris.shopify.com/tokens/shadow).
 ---
 
 ## Related components

diff --git a/polaris.shopify.com/pages/examples/box-with-shadow.tsx b/polaris.shopify.com/pages/examples/box-with-shadow.tsx
@@ -5,7 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function BoxWithShadowExample() {
   return (
-    <Box shadow="base">
+    <Box shadow="md">
       <Placeholder label="Content inside a box" />
     </Box>
   );

diff --git a/polaris.shopify.com/src/components/UpdateBanner/UpdateBanner.module.scss b/polaris.shopify.com/src/components/UpdateBanner/UpdateBanner.module.scss
@@ -1,7 +1,7 @@
 .Banner {
   border-radius: var(--border-radius-700);
   background-color: var(--surface-subdued);
-  box-shadow: var(--p-shadow-card);
+  box-shadow: var(--p-shadow-md);
   display: flex;
   align-items: center;
   gap: var(--p-space-6);