diff --git a/UNRELEASED-v8.md b/UNRELEASED-v8.md index e8e1d0332a2..72a96aae69e 100644 --- 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 index c5252bb3a4b..34c6c6a5e1b 100644 --- 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 index ed4c14e5327..619bcb77517 100644 --- 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 index 626c045bfa9..b7ee2fd1bf1 100644 --- 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 index 69ada688c1e..87c99a7c2b8 100644 --- 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 index e4b9c232a18..370f6d538cf 100644 --- 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 index a79223f992b..86711329f49 100644 --- 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 index 6d36456504c..ac013216cfe 100644 --- 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 index 16a53ebbd99..72caa0f0d4b 100644 --- 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 index c3055c0cd51..8b63de2ff88 100644 --- a/src/components/README.md +++ b/src/components/README.md @@ -108,7 +108,7 @@ Wrap your application in a div that contains the Polaris CSS variables. This is ```html
``` diff --git a/src/components/RangeSlider/components/DualThumb/DualThumb.scss b/src/components/RangeSlider/components/DualThumb/DualThumb.scss index b366bc81c8e..05be680f640 100644 --- 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 index cf7b58e6212..c488a6ad1b2 100644 --- 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 index 41a9fa78308..9ce5d849727 100644 --- 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 index 25f177064e2..d9d62637382 100644 --- 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 index 60abb16f802..5c0c51cc99a 100644 --- 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 index ddf0a17b9a9..3f76f1d64c5 100644 --- 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 index 716477fdd91..8f2eb86c366 100644 --- 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 index 66dc925a589..137c33aab8b 100644 --- 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 index b35ab8dada4..a020d37fc8c 100644 --- 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 index 7c87e041630..50adad36264 100644 --- 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 deleted file mode 100644 index d7e3d7064bd..00000000000 --- a/src/styles/foundation/_shadows.scss +++ /dev/null @@ -1,33 +0,0 @@ -// Shadows are intentionally very subtle gradiations. -$shadows-data: ( - faint: ( - 0 1px 0 0 rgba(22, 29, 37, 0.05), - ), - base: ( - 0 0 0 1px rgba(63, 63, 68, 0.05), - 0 1px 3px 0 rgba(63, 63, 68, 0.15), - ), - deep: ( - 0 0 0 1px rgba(6, 44, 82, 0.1), - 0 2px 16px rgba(33, 43, 54, 0.08), - ), - layer: ( - 0 31px 41px 0 rgba(32, 42, 53, 0.2), - 0 2px 16px 0 rgba(32, 42, 54, 0.08), - ), - transparent: 0 0 0 0 transparent, -); - -/// Returns the shadow for the specified depth -/// @param {String} $depth [base] - The shadow’s depth. -/// @return {List} The shadow value. - -@function shadow($depth: base) { - $fetched-value: map-get($shadows-data, $depth); - - @if type-of($fetched-value) == list { - @return $fetched-value; - } @else { - @error 'Shadow variant `#{$depth}` not found. Available variants: #{available-names($shadows-data)}'; - } -} diff --git a/src/styles/shared/_buttons.scss b/src/styles/shared/_buttons.scss index 0ab05ed2acf..e28b3dd37f0 100644 --- 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,7 +38,7 @@ } &:focus { - box-shadow: var(--p-button-drop-shadow); + box-shadow: var(--p-shadow-button); outline: 0; @include focus-ring($style: 'focused'); @@ -46,7 +46,7 @@ &: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 new file mode 100644 index 00000000000..d954cc21140 --- /dev/null +++ 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 index cabf4df8ffd..15eccf8ea48 100644 --- 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 index 1193e7ecdcf..44d13c7c4a8 100644 --- 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,