Shopify · lgriffee · Dec 10, 2021 · Dec 10, 2021 · Dec 10, 2021 · Dec 10, 2021
diff --git a/UNRELEASED-v8.md b/UNRELEASED-v8.md
@@ -29,6 +29,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 - Dropped support for node < 16 ([#4778](https://github.com/Shopify/polaris-react/pull/4778))
 - Removed `build/styles` directory from build output ([#4728](https://github.com/Shopify/polaris-react/pull/4728))
 - Removed the border-radius() function and replaced any instances with tokens ([#4793](https://github.com/Shopify/polaris-react/pull/4793))
+- Removed the shadow() function (replaced any instances with tokens) and renamed shadow legacy tokens ([#4823](https://github.com/Shopify/polaris-react/pull/4823))
 
 ### New components
 

diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -8,9 +8,6 @@ $large-min-height: 44px;
 $large-vertical-padding: ($large-min-height - line-height(body) - 2px) / 2;
 $spinner-size: 20px;
 
-$partial-button-filled-pressed-box-shadow: inset 0 0 0 0 transparent,
-  inset 0 1px 1px 0 rgba(22, 29, 37, 0.05), inset 0 0 3px 0;
-
 .Button {
   --pc-button-segment: 10;
   --pc-button-focused: 20;

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

diff --git a/src/components/CustomProperties/README.md b/src/components/CustomProperties/README.md
@@ -106,7 +106,7 @@ The CustomProperties component uses [CSS custom properties](https://developer.mo
 ```scss
 .Card {
   background-color: var(--p-surface);
-  box-shadow: var(--p-card-shadow);
+  box-shadow: var(--p-shadow-card);
   border-radius: var(--p-border-radius-2);
 }
 ```

diff --git a/src/components/CustomProperties/tests/CustomProperties.test.tsx b/src/components/CustomProperties/tests/CustomProperties.test.tsx
@@ -38,8 +38,9 @@ const mockTokens: Tokens = {
   colorSchemes: mockColorSchemes,
   motion: mockTokenGroup,
   // Note: We don't need to assign mock values to the remaining static tokens.
-  shape: {},
+  depth: {},
   legacyTokens: {},
+  shape: {},
   spacing: {},
   typography: {},
   zIndex: {},

diff --git a/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss b/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss
@@ -1,13 +1,12 @@
 @import '../../../../styles/common';
 $off-white: rgb(250, 251, 252);
 $off-white-border: rgb(235, 238, 240);
-$shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
 .ContextualSaveBar {
   display: flex;
   height: top-bar-height();
   background: var(--p-surface);
-  box-shadow: $shadow;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
   .LogoContainer {
     border-right: none;

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

diff --git a/src/components/Modal/components/Dialog/Dialog.scss b/src/components/Modal/components/Dialog/Dialog.scss
@@ -40,7 +40,7 @@ $dangerous-magic-space-16: 64px;
   width: 100%;
   max-height: calc(100vh - #{$vertical-spacing});
   background: var(--p-surface);
-  box-shadow: var(--p-modal-shadow);
+  box-shadow: var(--p-shadow-modal);
 
   @media (forced-colors: active) {
     @include high-contrast-border;

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

diff --git a/src/components/README.md b/src/components/README.md
diff --git a/src/components/RangeSlider/components/DualThumb/DualThumb.scss b/src/components/RangeSlider/components/DualThumb/DualThumb.scss
@@ -160,7 +160,7 @@ $range-output-spacing: 16px;
   min-width: $range-output-size;
   height: $range-output-size;
   background-color: var(--p-surface);
-  box-shadow: var(--p-popover-shadow);
+  box-shadow: var(--p-shadow-popover);
   border-radius: var(--p-border-radius-base);
   transition-property: transform;
   transition-duration: var(--p-duration-150);

diff --git a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
@@ -192,7 +192,7 @@ $range-output-spacing: 16px;
 .OutputBubble {
   position: relative;
   display: flex;
-  box-shadow: var(--p-popover-shadow);
+  box-shadow: var(--p-shadow-popover);
   padding: 0 var(--p-space-2);
   min-width: $range-output-size;
   height: $range-output-size;

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

diff --git a/src/components/Scrollable/Scrollable.scss b/src/components/Scrollable/Scrollable.scss
@@ -1,12 +1,13 @@
 @import '../../styles/common';
 
-$shadow-size: 20px;
-$shadow-bottom: inset 0 (-1 * $shadow-size) $shadow-size (-1 * $shadow-size)
-  var(--p-hint-from-direct-light);
-$shadow-top: inset 0 $shadow-size $shadow-size (-1 * $shadow-size)
-  var(--p-hint-from-direct-light);
-
 .Scrollable {
+  --pc-scrollable-shadow-size: 20px;
+  --pc-scrollable-shadow-bottom: inset 0
+    calc(-1 * var(--pc-scrollable-shadow-size)) var(--pc-scrollable-shadow-size)
+    calc(-1 * var(--pc-scrollable-shadow-size)) var(--p-hint-from-direct-light);
+  --pc-scrollable-shadow-top: inset 0 var(--pc-scrollable-shadow-size)
+    var(--pc-scrollable-shadow-size) calc(-1 * var(--pc-scrollable-shadow-size))
+    var(--p-hint-from-direct-light);
   -webkit-overflow-scrolling: touch;
   position: relative;
 
@@ -29,13 +30,14 @@ $shadow-top: inset 0 $shadow-size $shadow-size (-1 * $shadow-size)
 }
 
 .hasTopShadow {
-  box-shadow: $shadow-top;
+  box-shadow: var(--pc-scrollable-shadow-top);
 }
 
 .hasBottomShadow {
-  box-shadow: $shadow-bottom;
+  box-shadow: var(--pc-scrollable-shadow-bottom);
 }
 
 .hasTopShadow.hasBottomShadow {
-  box-shadow: $shadow-top, $shadow-bottom;
+  box-shadow: var(--pc-scrollable-shadow-top),
+    var(--pc-scrollable-shadow-bottom);
 }
diff --git a/src/components/Sheet/Sheet.scss b/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-modal-shadow);
+  box-shadow: var(--p-shadow-modal);
 
   @media screen and (-ms-high-contrast: active) {
     border-left: border();

diff --git a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss b/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
@@ -6,7 +6,7 @@ $content-max-width: 200px;
   --pc-tooltip-overlay-offset: var(--p-space-1);
   margin: var(--pc-tooltip-overlay-offset) var(--p-space-4) var(--p-space-4);
   opacity: 1;
-  box-shadow: var(--p-popover-shadow);
+  box-shadow: var(--p-shadow-popover);
   border-radius: var(--p-border-radius-1);
   pointer-events: none;
   will-change: opacity, left, top;

diff --git a/src/components/TopBar/TopBar.scss b/src/components/TopBar/TopBar.scss
@@ -9,7 +9,7 @@ $context-control-expand-after: 1400px;
   position: relative;
   display: flex;
   height: top-bar-height();
-  box-shadow: var(--p-top-bar-shadow);
+  box-shadow: var(--p-shadow-top-bar);
   background-color: var(--p-surface);
   transition: var(--p-duration-200) background-color ease-in-out;
 

diff --git a/src/components/TopBar/components/Search/Search.scss b/src/components/TopBar/components/Search/Search.scss
@@ -9,7 +9,7 @@
   top: top-bar-height();
   left: 0;
   right: 0;
-  box-shadow: var(--p-modal-shadow);
+  box-shadow: var(--p-shadow-modal);
   overflow: hidden;
 
   @include page-content-when-not-fully-condensed {

diff --git a/src/styles/_common.scss b/src/styles/_common.scss
@@ -9,7 +9,6 @@
 @import './foundation/border-width';
 @import './foundation/borders';
 @import './foundation/layout';
-@import './foundation/shadows';
 @import './foundation/typography';
 @import './foundation/focus-ring';
 @import './foundation/accessibility';

diff --git a/src/styles/_public-api.scss b/src/styles/_public-api.scss
@@ -22,7 +22,6 @@
 @import './foundation/border-width';
 @import './foundation/borders';
 @import './foundation/layout';
-@import './foundation/shadows';
 @import './foundation/typography';
 @import './foundation/z-index';
 @import './foundation/focus-ring';

diff --git a/src/styles/foundation/_shadows.scss b/src/styles/foundation/_shadows.scss
diff --git a/src/styles/shared/_buttons.scss b/src/styles/shared/_buttons.scss
@@ -19,7 +19,7 @@
   margin: 0;
   padding: $vertical-padding var(--p-space-4);
   background: var(--p-surface);
-  box-shadow: var(--p-button-drop-shadow);
+  box-shadow: var(--p-shadow-button);
   border-radius: var(--p-border-radius-1);
   color: var(--p-text);
   border: 1px solid var(--p-border-neutral-subdued);
@@ -38,15 +38,15 @@
   }
 
   &:focus {
-    box-shadow: var(--p-button-drop-shadow);
+    box-shadow: var(--p-shadow-button);
     outline: 0;
 
     @include focus-ring($style: 'focused');
   }
 
   &:active {
     background: var(--p-action-secondary-pressed);
-    box-shadow: var(--p-button-drop-shadow);
+    box-shadow: var(--p-shadow-button);
 
     &::after {
       border: none;
@@ -56,7 +56,7 @@
 
   &.pressed {
     background: var(--p-action-secondary-depressed);
-    box-shadow: var(--p-button-pressed-inner-shadow);
+    box-shadow: var(--p-shadows-inset-button-pressed);
     color: var(--p-text-on-primary);
     border-color: var(--p-border-depressed);
     @include recolor-icon(currentColor);
@@ -81,7 +81,7 @@
   background: var(--pc-button-color);
   border-width: 0;
   border-color: transparent;
-  box-shadow: var(--p-button-drop-shadow), var(--p-button-inner-shadow);
+  box-shadow: var(--p-shadow-button), var(--p-shadows-inset-button);
   color: var(--pc-button-text);
 
   &:hover {
@@ -92,25 +92,25 @@
 
   &:focus {
     border-color: transparent;
-    box-shadow: var(--p-button-drop-shadow), var(--p-button-inner-shadow);
+    box-shadow: var(--p-shadow-button), var(--p-shadows-inset-button);
   }
 
   &:active {
     background: var(--pc-button-color-active);
     border-color: transparent;
-    box-shadow: var(--p-button-drop-shadow), var(--p-button-inner-shadow);
+    box-shadow: var(--p-shadow-button), var(--p-shadows-inset-button);
   }
 
   &.pressed {
     color: var(--pc-button-text);
     background: var(--pc-button-color-depressed);
     border-color: transparent;
-    box-shadow: var(--p-button-drop-shadow), var(--p-button-inner-shadow);
+    box-shadow: var(--p-shadow-button), var(--p-shadows-inset-button);
 
     &:hover,
     &:focus {
       background: var(--pc-button-color-depressed);
-      box-shadow: var(--p-button-drop-shadow), var(--p-button-inner-shadow);
+      box-shadow: var(--p-shadow-button), var(--p-shadows-inset-button);
     }
   }
 }

diff --git a/src/tokens/_depth.ts b/src/tokens/_depth.ts
@@ -0,0 +1,22 @@
+import type {TokenGroup} from './tokens';
+
+export const depth: TokenGroup = {
+  'shadow-transparent': '0 0 0 0 transparent',
+  'shadow-faint': '0 1px 0 0 rgba(22, 29, 37, 0.05)',
+  'shadow-base':
+    '0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)',
+  'shadow-deep':
+    '0 0 0 1px rgba(6, 44, 82, 0.1), 0 2px 16px rgba(33, 43, 54, 0.08)',
+  'shadow-button': '0 1px 0 rgba(0, 0, 0, 0.05)',
+  'shadow-top-bar': '0 2px 2px -1px rgba(0, 0, 0, 0.15)',
+  'shadow-card':
+    '0 0 5px rgba(23, 24, 24, 0.05), 0 1px 2px rgba(0, 0, 0, 0.15)',
+  'shadow-popover':
+    '-1px 0 20px rgba(23, 24, 24, 0.05), 0 1px 5px rgba(0, 0, 0, 0.15)',
+  'shadow-layer':
+    '0 31px 41px 0 rgba(32, 42, 53, 0.2), 0 2px 16px 0 rgba(32, 42, 54, 0.08)',
+  'shadow-modal':
+    '0 26px 80px rgba(0, 0, 0, 0.2), 0 0px 1px rgba(0, 0, 0, 0.2)',
+  'shadows-inset-button': 'inset 0 -1px 0 rgba(0, 0, 0, 0.2)',
+  'shadows-inset-button-pressed': 'inset 0 1px 0 rgba(0, 0, 0, 0.15)',
+};
diff --git a/src/tokens/_legacy-tokens.ts b/src/tokens/_legacy-tokens.ts
@@ -7,16 +7,6 @@ import type {TokenGroup} from './tokens';
  * deprecating any undesired tokens.
  */
 export const legacyTokens: TokenGroup = {
-  'card-shadow':
-    '0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light)',
-  'popover-shadow':
-    '-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light)',
-  'modal-shadow':
-    '0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light)',
-  'top-bar-shadow': '0 2px 2px -1px var(--p-shadow-from-direct-light)',
-  'button-drop-shadow': '0 1px 0 rgba(0, 0, 0, 0.05)',
-  'button-inner-shadow': 'inset 0 -1px 0 rgba(0, 0, 0, 0.2)',
-  'button-pressed-inner-shadow': 'inset 0 1px 0 rgba(0, 0, 0, 0.15)',
   'override-loading-z-index': '514',
   'choice-size': '20px',
   'icon-size': '10px',

diff --git a/src/tokens/tokens.ts b/src/tokens/tokens.ts
@@ -1,7 +1,8 @@
+import {depth} from './_depth';
 import {legacyTokens} from './_legacy-tokens';
-import {shape} from './_shape';
 import {lightColorScheme, darkColorScheme} from './_color';
 import {motion} from './_motion';
+import {shape} from './_shape';
 import {spacing} from './_spacing';
 import {typography} from './_typography';
 import {zIndex} from './_z-index';
@@ -44,20 +45,22 @@ const colorSchemes: ColorSchemes = {
 };
 
 export interface Tokens {
-  shape: TokenGroup;
+  depth: TokenGroup;
   colorSchemes: ColorSchemes;
   legacyTokens: TokenGroup;
   motion: TokenGroup;
+  shape: TokenGroup;
   spacing: TokenGroup;
   typography: TokenGroup;
   zIndex: TokenGroup;
 }
 
 export const tokens: Tokens = {
-  shape,
+  depth,
   colorSchemes,
   legacyTokens,
   motion,
+  shape,
   spacing,
   typography,
   zIndex,