From cc5a2394e9672e1441d75b249dc29edf68b58f22 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 10 Dec 2021 09:11:04 -0500 Subject: [PATCH 01/18] Update UNRELEASED-v8.md --- UNRELEASED-v8.md | 1 + 1 file changed, 1 insertion(+) diff --git a/UNRELEASED-v8.md b/UNRELEASED-v8.md index 1c61143fed9..2da51f05c4d 100644 --- a/UNRELEASED-v8.md +++ b/UNRELEASED-v8.md @@ -28,6 +28,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - Removed unnecessary `--p-border-radius-` properties and moved border-radius custom properties to tokens ([#4763](https://github.com/Shopify/polaris-react/pull/4763)) - 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 shadow() function and replaced any instances with tokens ([#]()) ### New components From 3a0dfc694129f6514ab44bf41a5403804cd75b10 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 10 Dec 2021 09:26:28 -0500 Subject: [PATCH 02/18] Update UNRELEASED-v8.md --- UNRELEASED-v8.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/UNRELEASED-v8.md b/UNRELEASED-v8.md index 2da51f05c4d..8c53aaafffe 100644 --- a/UNRELEASED-v8.md +++ b/UNRELEASED-v8.md @@ -28,7 +28,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - Removed unnecessary `--p-border-radius-` properties and moved border-radius custom properties to tokens ([#4763](https://github.com/Shopify/polaris-react/pull/4763)) - 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 shadow() function and replaced any instances with tokens ([#]()) +- Removed the shadow() function and replaced any instances with tokens ([#4823](https://github.com/Shopify/polaris-react/pull/4823)) ### New components From f064740ab51552a917c06503a44caa49eb54beac Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 10 Dec 2021 09:38:52 -0500 Subject: [PATCH 03/18] Move legacy shadow tokens into a new depth token file --- src/tokens/_depth.ts | 14 ++++++++++++++ src/tokens/_legacy-tokens.ts | 10 ---------- src/tokens/tokens.ts | 9 ++++++--- 3 files changed, 20 insertions(+), 13 deletions(-) create mode 100644 src/tokens/_depth.ts diff --git a/src/tokens/_depth.ts b/src/tokens/_depth.ts new file mode 100644 index 00000000000..4d2572ac79e --- /dev/null +++ b/src/tokens/_depth.ts @@ -0,0 +1,14 @@ +import type {TokenGroup} from './tokens'; + +export const depth: 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)', +}; 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, From fbabf26a0e1f06f1e4272fe3963077fe56ce1a1e Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 10 Dec 2021 09:42:51 -0500 Subject: [PATCH 04/18] Remove --p-shadow-from-ambient-light legacy token --- src/components/README.md | 2 +- src/tokens/_depth.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/README.md b/src/components/README.md index 47d28c1cebb..a6269ec64d2 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/tokens/_depth.ts b/src/tokens/_depth.ts index 4d2572ac79e..038128f63c8 100644 --- a/src/tokens/_depth.ts +++ b/src/tokens/_depth.ts @@ -2,9 +2,9 @@ import type {TokenGroup} from './tokens'; export const depth: TokenGroup = { 'card-shadow': - '0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light)', + '0px 0px 5px rgba(23, 24, 24, 0.05), 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)', + '-1px 0px 20px rgba(23, 24, 24, 0.05), 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)', From d45cceb4fad70bfa468ab20b7486a9d5f4bb15a3 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 10 Dec 2021 09:44:34 -0500 Subject: [PATCH 05/18] Remove --p-shadow-from-direct-light legacy token --- src/components/README.md | 2 +- src/tokens/_depth.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/README.md b/src/components/README.md index a6269ec64d2..33b09d56195 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/tokens/_depth.ts b/src/tokens/_depth.ts index 038128f63c8..6c1fbaef35f 100644 --- a/src/tokens/_depth.ts +++ b/src/tokens/_depth.ts @@ -2,12 +2,12 @@ import type {TokenGroup} from './tokens'; export const depth: TokenGroup = { 'card-shadow': - '0px 0px 5px rgba(23, 24, 24, 0.05), 0px 1px 2px var(--p-shadow-from-direct-light)', + '0px 0px 5px rgba(23, 24, 24, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.15)', 'popover-shadow': - '-1px 0px 20px rgba(23, 24, 24, 0.05), 0px 1px 5px var(--p-shadow-from-direct-light)', + '-1px 0px 20px rgba(23, 24, 24, 0.05), 0px 1px 5px rgba(0, 0, 0, 0.15)', '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)', + 'top-bar-shadow': '0 2px 2px -1px rgba(0, 0, 0, 0.15)', '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)', From 8ed2ec6b5dd6ca47d6b36b52dd3f5b87babdec82 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 10 Dec 2021 09:46:14 -0500 Subject: [PATCH 06/18] Remove --p-shadow-from-dim-light legacy token --- src/components/README.md | 2 +- src/tokens/_depth.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/README.md b/src/components/README.md index 33b09d56195..1cb50167ac6 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/tokens/_depth.ts b/src/tokens/_depth.ts index 6c1fbaef35f..d87884a5e71 100644 --- a/src/tokens/_depth.ts +++ b/src/tokens/_depth.ts @@ -6,7 +6,7 @@ export const depth: TokenGroup = { 'popover-shadow': '-1px 0px 20px rgba(23, 24, 24, 0.05), 0px 1px 5px rgba(0, 0, 0, 0.15)', 'modal-shadow': - '0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light)', + '0px 26px 80px rgba(0, 0, 0, 0.2), 0px 0px 1px rgba(0, 0, 0, 0.2)', 'top-bar-shadow': '0 2px 2px -1px rgba(0, 0, 0, 0.15)', '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)', From e7ad21eb0b8974827ba90b9a1908ff64f0f496d1 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 10 Dec 2021 10:01:11 -0500 Subject: [PATCH 07/18] Update UNRELEASED-v8.md --- UNRELEASED-v8.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/UNRELEASED-v8.md b/UNRELEASED-v8.md index 8c53aaafffe..1e579580f16 100644 --- a/UNRELEASED-v8.md +++ b/UNRELEASED-v8.md @@ -28,7 +28,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - Removed unnecessary `--p-border-radius-` properties and moved border-radius custom properties to tokens ([#4763](https://github.com/Shopify/polaris-react/pull/4763)) - 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 shadow() function and replaced any instances with tokens ([#4823](https://github.com/Shopify/polaris-react/pull/4823)) +- 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 From d003ac2536006df2d513fe0d46d7985d119ae6ea Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 10 Dec 2021 10:08:09 -0500 Subject: [PATCH 08/18] Add tokens to replace shadow() values --- src/tokens/_depth.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/tokens/_depth.ts b/src/tokens/_depth.ts index d87884a5e71..7bed87dc190 100644 --- a/src/tokens/_depth.ts +++ b/src/tokens/_depth.ts @@ -1,6 +1,14 @@ 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-layer': + '0 31px 41px 0 rgba(32, 42, 53, 0.2), 0 2px 16px 0 rgba(32, 42, 54, 0.08)', 'card-shadow': '0px 0px 5px rgba(23, 24, 24, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.15)', 'popover-shadow': From 13b09ff61736e4974418034358cd88f1bb531fbd Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 10 Dec 2021 10:08:52 -0500 Subject: [PATCH 09/18] Remove px on 0 values in tokens --- src/tokens/_depth.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/tokens/_depth.ts b/src/tokens/_depth.ts index 7bed87dc190..abc44e531c2 100644 --- a/src/tokens/_depth.ts +++ b/src/tokens/_depth.ts @@ -10,11 +10,11 @@ export const depth: TokenGroup = { 'shadow-layer': '0 31px 41px 0 rgba(32, 42, 53, 0.2), 0 2px 16px 0 rgba(32, 42, 54, 0.08)', 'card-shadow': - '0px 0px 5px rgba(23, 24, 24, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.15)', + '0 0 5px rgba(23, 24, 24, 0.05), 0 1px 2px rgba(0, 0, 0, 0.15)', 'popover-shadow': - '-1px 0px 20px rgba(23, 24, 24, 0.05), 0px 1px 5px rgba(0, 0, 0, 0.15)', + '-1px 0 20px rgba(23, 24, 24, 0.05), 0 1px 5px rgba(0, 0, 0, 0.15)', 'modal-shadow': - '0px 26px 80px rgba(0, 0, 0, 0.2), 0px 0px 1px rgba(0, 0, 0, 0.2)', + '0 26px 80px rgba(0, 0, 0, 0.2), 0 0px 1px rgba(0, 0, 0, 0.2)', 'top-bar-shadow': '0 2px 2px -1px rgba(0, 0, 0, 0.15)', '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)', From 59a4dc5e3702aa3beb5c3b1a54cd4098827c20f6 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 10 Dec 2021 10:12:13 -0500 Subject: [PATCH 10/18] Try to give a bit of order to shadow token values --- src/tokens/_depth.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/tokens/_depth.ts b/src/tokens/_depth.ts index abc44e531c2..e571e2cb129 100644 --- a/src/tokens/_depth.ts +++ b/src/tokens/_depth.ts @@ -7,16 +7,16 @@ export const depth: TokenGroup = { '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-layer': - '0 31px 41px 0 rgba(32, 42, 53, 0.2), 0 2px 16px 0 rgba(32, 42, 54, 0.08)', + 'button-drop-shadow': '0 1px 0 rgba(0, 0, 0, 0.05)', + 'top-bar-shadow': '0 2px 2px -1px rgba(0, 0, 0, 0.15)', 'card-shadow': '0 0 5px rgba(23, 24, 24, 0.05), 0 1px 2px rgba(0, 0, 0, 0.15)', 'popover-shadow': '-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)', 'modal-shadow': '0 26px 80px rgba(0, 0, 0, 0.2), 0 0px 1px rgba(0, 0, 0, 0.2)', - 'top-bar-shadow': '0 2px 2px -1px rgba(0, 0, 0, 0.15)', - '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)', }; From 3a52c63103c3fe5e676a91bc44aba69852963699 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 10 Dec 2021 11:12:06 -0500 Subject: [PATCH 11/18] Rename legacy shadow tokens --- src/components/Card/Card.scss | 2 +- src/components/CustomProperties/README.md | 2 +- .../Modal/components/Dialog/Dialog.scss | 2 +- src/components/Popover/Popover.scss | 2 +- src/components/README.md | 2 +- .../components/DualThumb/DualThumb.scss | 2 +- .../components/SingleThumb/SingleThumb.scss | 2 +- src/components/Sheet/Sheet.scss | 2 +- .../TooltipOverlay/TooltipOverlay.scss | 2 +- src/components/TopBar/TopBar.scss | 2 +- .../TopBar/components/Search/Search.scss | 2 +- src/styles/shared/_buttons.scss | 18 +++++++++--------- src/tokens/_depth.ts | 14 +++++++------- 13 files changed, 27 insertions(+), 27 deletions(-) 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/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 1cb50167ac6..e8ea10dae03 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 5ebafe361f8..ce04112ca69 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: border-radius(); 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 c2b8307637a..f0df35b0b90 100644 --- a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss +++ b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss @@ -196,7 +196,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/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 ba34e7b1860..448a3d9c9c2 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 fe8979add9f..1fd38a99112 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/shared/_buttons.scss b/src/styles/shared/_buttons.scss index 4ed8dd6b671..460cfffd046 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 index e571e2cb129..d954cc21140 100644 --- a/src/tokens/_depth.ts +++ b/src/tokens/_depth.ts @@ -7,16 +7,16 @@ export const depth: TokenGroup = { '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)', - 'button-drop-shadow': '0 1px 0 rgba(0, 0, 0, 0.05)', - 'top-bar-shadow': '0 2px 2px -1px rgba(0, 0, 0, 0.15)', - 'card-shadow': + '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)', - 'popover-shadow': + '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)', - 'modal-shadow': + 'shadow-modal': '0 26px 80px rgba(0, 0, 0, 0.2), 0 0px 1px rgba(0, 0, 0, 0.2)', - '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)', + '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)', }; From ae7c648c684e5325d73e6ae271b0033a570a28e9 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 10 Dec 2021 11:17:57 -0500 Subject: [PATCH 12/18] Replace shadow() with token value --- src/components/IndexTable/IndexTable.scss | 4 ++-- src/components/ResourceList/ResourceList.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/IndexTable/IndexTable.scss b/src/components/IndexTable/IndexTable.scss index 94cdeb16e25..6943220897a 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/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 { From 8b6b1d80c3685a3e94699a1f1d3e48e04b9f5afc Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 10 Dec 2021 11:22:03 -0500 Subject: [PATCH 13/18] Remove shadow() function and imports --- src/styles/_common.scss | 1 - src/styles/_public-api.scss | 1 - src/styles/foundation/_shadows.scss | 33 ----------------------------- 3 files changed, 35 deletions(-) delete mode 100644 src/styles/foundation/_shadows.scss diff --git a/src/styles/_common.scss b/src/styles/_common.scss index 9ef86230647..9b0cc8495bc 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -10,7 +10,6 @@ @import './foundation/borders'; @import './foundation/border-radius'; @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 f81aae032d9..03aabc29164 100644 --- a/src/styles/_public-api.scss +++ b/src/styles/_public-api.scss @@ -23,7 +23,6 @@ @import './foundation/borders'; @import './foundation/border-radius'; @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)}'; - } -} From bedce56aa97f9a061f21d14ab56b53155b9485a8 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 10 Dec 2021 11:32:50 -0500 Subject: [PATCH 14/18] Add missing test entry for new depth tokens --- .../CustomProperties/tests/CustomProperties.test.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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: {}, From 24ddf94e119935387c6fb1a21e926885c2d77370 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 10 Dec 2021 11:41:54 -0500 Subject: [PATCH 15/18] Remove unused $* shadow value --- src/components/Button/Button.scss | 3 --- 1 file changed, 3 deletions(-) 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; From 12d68cfc96c6c0667aed9c573609962e395f3d54 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 10 Dec 2021 11:42:59 -0500 Subject: [PATCH 16/18] Remove $* shadow value and simplify usage --- .../Frame/components/ContextualSaveBar/ContextualSaveBar.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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; From f441c609738626837eb608cd85e964a761eb930a Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 10 Dec 2021 11:47:46 -0500 Subject: [PATCH 17/18] Convert $* properties to --pc-* --- src/components/Scrollable/Scrollable.scss | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) 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); } From 624726436f175f3011895cb0660d0f1c04a64edb Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 10 Dec 2021 12:01:35 -0500 Subject: [PATCH 18/18] Update README.md --- src/components/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/README.md b/src/components/README.md index e8ea10dae03..788d2191434 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
```