From 0bdd75f5e40a80ec1c8d7bde52385dba6acafea1 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Tue, 23 Aug 2022 10:55:11 -0400
Subject: [PATCH 01/15] [Layout foundations] Add `react-polymorphic` dep

---
 polaris-react/package.json | 1 +
 yarn.lock                  | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/polaris-react/package.json b/polaris-react/package.json
index 38987d2539a..70706141b32 100644
--- a/polaris-react/package.json
+++ b/polaris-react/package.json
@@ -62,6 +62,7 @@
     "preversion": "node ./scripts/readme-update-version"
   },
   "dependencies": {
+    "@radix-ui/react-polymorphic": "^0.0.14",
     "@shopify/polaris-icons": "^5.4.0",
     "@shopify/polaris-tokens": "^6.0.0",
     "@types/react": "*",
diff --git a/yarn.lock b/yarn.lock
index 8d0c31da8a1..c186903a9ba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2479,6 +2479,11 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
+"@radix-ui/react-polymorphic@^0.0.14":
+  version "0.0.14"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz#fc6cefee6686db8c5a7ff14c8c1b9b5abdee325b"
+  integrity sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==
+
 "@rollup/plugin-babel@^5.3.1":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"

From 4e95aa27c01426e69af187e3b9d91f116e25fc30 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Tue, 23 Aug 2022 12:09:11 -0400
Subject: [PATCH 02/15] [Layout foundations] Add polymorphic box component

---
 polaris-react/src/components/Box/Box.scss |  3 +++
 polaris-react/src/components/Box/Box.tsx  | 27 +++++++++++++++++++++++
 polaris-react/src/components/Box/index.ts |  1 +
 polaris-react/src/index.ts                |  3 +++
 4 files changed, 34 insertions(+)
 create mode 100644 polaris-react/src/components/Box/Box.scss
 create mode 100644 polaris-react/src/components/Box/Box.tsx
 create mode 100644 polaris-react/src/components/Box/index.ts

diff --git a/polaris-react/src/components/Box/Box.scss b/polaris-react/src/components/Box/Box.scss
new file mode 100644
index 00000000000..63d08ecceb3
--- /dev/null
+++ b/polaris-react/src/components/Box/Box.scss
@@ -0,0 +1,3 @@
+.root {
+  display: block;
+}
diff --git a/polaris-react/src/components/Box/Box.tsx b/polaris-react/src/components/Box/Box.tsx
new file mode 100644
index 00000000000..4baced41c5d
--- /dev/null
+++ b/polaris-react/src/components/Box/Box.tsx
@@ -0,0 +1,27 @@
+import React, {ReactNode, forwardRef} from 'react';
+import type * as Polymorphic from '@radix-ui/react-polymorphic';
+
+import {classNames} from '../../utilities/css';
+
+import styles from './Box.scss';
+
+interface BoxBaseProps {
+  /** Inner content of the Box */
+  children: ReactNode;
+}
+
+type PolymorphicBox = Polymorphic.ForwardRefComponent<'div', BoxBaseProps>;
+
+export type BoxProps = Polymorphic.OwnProps<PolymorphicBox>;
+
+export const Box = forwardRef(({as: Component = 'div', children}, ref) => {
+  const className = classNames(styles.root);
+
+  return (
+    <Component ref={ref} className={className}>
+      {children}
+    </Component>
+  );
+}) as PolymorphicBox;
+
+Box.displayName = 'Box';
diff --git a/polaris-react/src/components/Box/index.ts b/polaris-react/src/components/Box/index.ts
new file mode 100644
index 00000000000..305f81d78bc
--- /dev/null
+++ b/polaris-react/src/components/Box/index.ts
@@ -0,0 +1 @@
+export * from './Box';
diff --git a/polaris-react/src/index.ts b/polaris-react/src/index.ts
index ff69562764e..116ecfd8ddc 100644
--- a/polaris-react/src/index.ts
+++ b/polaris-react/src/index.ts
@@ -69,6 +69,9 @@ export type {
   BannerHandles,
 } from './components/Banner';
 
+export {Box} from './components/Box';
+export type {BoxProps} from './components/Box';
+
 export {Breadcrumbs} from './components/Breadcrumbs';
 export type {BreadcrumbsProps} from './components/Breadcrumbs';
 

From f4115073ac304ee56188796f2f20c4d5e8b6a2f6 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Tue, 23 Aug 2022 12:34:35 -0400
Subject: [PATCH 03/15] [Layout foundations] Add `background` prop

---
 polaris-react/src/components/Box/Box.scss | 92 +++++++++++++++++++++++
 polaris-react/src/components/Box/Box.tsx  | 47 +++++++++---
 2 files changed, 130 insertions(+), 9 deletions(-)

diff --git a/polaris-react/src/components/Box/Box.scss b/polaris-react/src/components/Box/Box.scss
index 63d08ecceb3..0bcb9420398 100644
--- a/polaris-react/src/components/Box/Box.scss
+++ b/polaris-react/src/components/Box/Box.scss
@@ -1,3 +1,95 @@
 .root {
   display: block;
 }
+
+.background {
+  background-color: var(--p-background);
+}
+
+.backgroundHovered {
+  background-color: var(--p-background-hovered);
+}
+
+.backgroundPressed {
+  background-color: var(--p-background-pressed);
+}
+
+.backgroundSelected {
+  background-color: var(--p-background-selected);
+}
+
+.surface {
+  background-color: var(--p-surface);
+}
+
+.surfaceDark {
+  background-color: var(--p-surface-dark);
+}
+
+.surfaceNeutral {
+  background-color: var(--p-surface-neutral);
+}
+
+.surfaceNeutralHovered {
+  background-color: var(--p-surface-neutral-hovered);
+}
+
+.surfaceNeutralPressed {
+  background-color: var(--p-surface-neutral-pressed);
+}
+
+.surfaceNeutralDisabled {
+  background-color: var(--p-surface-neutral-disabled);
+}
+
+.surfaceNeutralSubdued {
+  background-color: var(--p-surface-neutral-subdued);
+}
+
+.surfaceNeutralSubduedDark {
+  background-color: var(--p-surface-neutral-subdued-dark);
+}
+
+.surfaceSubdued {
+  background-color: var(--p-surface-subdued);
+}
+
+.surfaceDisabled {
+  background-color: var(--p-surface-disabled);
+}
+
+.surfaceHovered {
+  background-color: var(--p-surface-hovered);
+}
+
+.surfaceHoveredDark {
+  background-color: var(--p-surface-hovered-dark);
+}
+
+.surfacePressed {
+  background-color: var(--p-surface-pressed);
+}
+
+.surfacePressedDark {
+  background-color: var(--p-surface-pressed-dark);
+}
+
+.surfaceDepressed {
+  background-color: var(--p-surface-depressed);
+}
+
+.surfaceSearchField {
+  background-color: var(--p-surface-search-field);
+}
+
+.surfaceSearchFieldDark {
+  background-color: var(--p-surface-search-field-dark);
+}
+
+.backdrop {
+  background-color: var(--p-backdrop);
+}
+
+.overlay {
+  background-color: var(--p-overlay);
+}
diff --git a/polaris-react/src/components/Box/Box.tsx b/polaris-react/src/components/Box/Box.tsx
index 4baced41c5d..cdf005cc4f8 100644
--- a/polaris-react/src/components/Box/Box.tsx
+++ b/polaris-react/src/components/Box/Box.tsx
@@ -5,7 +5,34 @@ import {classNames} from '../../utilities/css';
 
 import styles from './Box.scss';
 
+type BackgroundColor =
+  | 'background'
+  | 'backgroundHovered'
+  | 'backgroundPressed'
+  | 'backgroundSelected'
+  | 'surface'
+  | 'surfaceDark'
+  | 'surfaceNeutral'
+  | 'surfaceNeutralHovered'
+  | 'surfaceNeutralPressed'
+  | 'surfaceNeutralDisabled'
+  | 'surfaceNeutralSubdued'
+  | 'surfaceNeutralSubduedDark'
+  | 'surfaceSubdued'
+  | 'surfaceDisabled'
+  | 'surfaceHovered'
+  | 'surfaceHoveredDark'
+  | 'surfacePressed'
+  | 'surfacePressedDark'
+  | 'surfaceDepressed'
+  | 'surfaceSearchField'
+  | 'surfaceSearchFieldDark'
+  | 'backdrop'
+  | 'overlay';
+
 interface BoxBaseProps {
+  /** Background color of the Box */
+  background?: BackgroundColor;
   /** Inner content of the Box */
   children: ReactNode;
 }
@@ -14,14 +41,16 @@ type PolymorphicBox = Polymorphic.ForwardRefComponent<'div', BoxBaseProps>;
 
 export type BoxProps = Polymorphic.OwnProps<PolymorphicBox>;
 
-export const Box = forwardRef(({as: Component = 'div', children}, ref) => {
-  const className = classNames(styles.root);
-
-  return (
-    <Component ref={ref} className={className}>
-      {children}
-    </Component>
-  );
-}) as PolymorphicBox;
+export const Box = forwardRef(
+  ({as: Component = 'div', background, children}, ref) => {
+    const className = classNames(styles.root, background && styles[background]);
+
+    return (
+      <Component ref={ref} className={className}>
+        {children}
+      </Component>
+    );
+  },
+) as PolymorphicBox;
 
 Box.displayName = 'Box';

From c27692271c57d917756067dd5e7768a5933bc5d3 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Tue, 23 Aug 2022 12:55:27 -0400
Subject: [PATCH 04/15] [Layout foundations] Add `borderRadius` prop

---
 polaris-react/src/components/Box/Box.scss | 40 +++++++++++++++++++++++
 polaris-react/src/components/Box/Box.tsx  | 28 +++++++++++++---
 2 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/polaris-react/src/components/Box/Box.scss b/polaris-react/src/components/Box/Box.scss
index 0bcb9420398..d80ba8b56b6 100644
--- a/polaris-react/src/components/Box/Box.scss
+++ b/polaris-react/src/components/Box/Box.scss
@@ -93,3 +93,43 @@
 .overlay {
   background-color: var(--p-overlay);
 }
+
+.radius-05 {
+  border-radius: var(--p-border-radius-05);
+}
+
+.radius-1 {
+  border-radius: var(--p-border-radius-1);
+}
+
+.radius-2 {
+  border-radius: var(--p-border-radius-2);
+}
+
+.radius-3 {
+  border-radius: var(--p-border-radius-3);
+}
+
+.radius-4 {
+  border-radius: var(--p-border-radius-4);
+}
+
+.radius-5 {
+  border-radius: var(--p-border-radius-5);
+}
+
+.radius-6 {
+  border-radius: var(--p-border-radius-6);
+}
+
+.radius-base {
+  border-radius: var(--p-border-radius-base);
+}
+
+.radius-large {
+  border-radius: var(--p-border-radius-large);
+}
+
+.radius-half {
+  border-radius: var(--p-border-radius-half);
+}
diff --git a/polaris-react/src/components/Box/Box.tsx b/polaris-react/src/components/Box/Box.tsx
index cdf005cc4f8..8ed7309e24c 100644
--- a/polaris-react/src/components/Box/Box.tsx
+++ b/polaris-react/src/components/Box/Box.tsx
@@ -5,7 +5,7 @@ import {classNames} from '../../utilities/css';
 
 import styles from './Box.scss';
 
-type BackgroundColor =
+type Background =
   | 'background'
   | 'backgroundHovered'
   | 'backgroundPressed'
@@ -30,9 +30,25 @@ type BackgroundColor =
   | 'backdrop'
   | 'overlay';
 
+type BorderRadius =
+  | 'radius-05'
+  | 'radius-1'
+  | 'radius-2'
+  | 'radius-3'
+  | 'radius-4'
+  | 'radius-5'
+  | 'radius-6'
+  | 'radius-base'
+  | 'radius-large'
+  | 'radius-half';
+
+type Shadow = 'default' | 'transparent' | 'faint' | 'deep';
+
 interface BoxBaseProps {
   /** Background color of the Box */
-  background?: BackgroundColor;
+  background?: Background;
+  /** Border radius of the Box */
+  borderRadius?: BorderRadius;
   /** Inner content of the Box */
   children: ReactNode;
 }
@@ -42,8 +58,12 @@ type PolymorphicBox = Polymorphic.ForwardRefComponent<'div', BoxBaseProps>;
 export type BoxProps = Polymorphic.OwnProps<PolymorphicBox>;
 
 export const Box = forwardRef(
-  ({as: Component = 'div', background, children}, ref) => {
-    const className = classNames(styles.root, background && styles[background]);
+  ({as: Component = 'div', background, borderRadius, children}, ref) => {
+    const className = classNames(
+      styles.root,
+      background && styles[background],
+      borderRadius && styles[borderRadius],
+    );
 
     return (
       <Component ref={ref} className={className}>

From 8579f4262202e3fd3259bac20160af71c2cc9d6e Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Tue, 23 Aug 2022 13:07:37 -0400
Subject: [PATCH 05/15] [Layout foundations] Add `shadow` prop

---
 polaris-react/src/components/Box/Box.scss | 18 +++++++++++++++++-
 polaris-react/src/components/Box/Box.tsx  |  8 +++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/polaris-react/src/components/Box/Box.scss b/polaris-react/src/components/Box/Box.scss
index d80ba8b56b6..63cacf6f461 100644
--- a/polaris-react/src/components/Box/Box.scss
+++ b/polaris-react/src/components/Box/Box.scss
@@ -94,7 +94,7 @@
   background-color: var(--p-overlay);
 }
 
-.radius-05 {
+<<<<<<< HEAD .radius-05 {
   border-radius: var(--p-border-radius-05);
 }
 
@@ -133,3 +133,19 @@
 .radius-half {
   border-radius: var(--p-border-radius-half);
 }
+
+.shadowBase {
+  box-shadow: var(--p-shadow-base);
+}
+
+.transparent {
+  box-shadow: var(--p-shadow-transparent);
+}
+
+.faint {
+  box-shadow: var(--p-shadow-faint);
+}
+
+.deep {
+  box-shadow: var(--p-shadow-deep);
+}
diff --git a/polaris-react/src/components/Box/Box.tsx b/polaris-react/src/components/Box/Box.tsx
index 8ed7309e24c..74da3811f4b 100644
--- a/polaris-react/src/components/Box/Box.tsx
+++ b/polaris-react/src/components/Box/Box.tsx
@@ -49,6 +49,8 @@ interface BoxBaseProps {
   background?: Background;
   /** Border radius of the Box */
   borderRadius?: BorderRadius;
+  /** Shadow on the Box */
+  shadow?: Shadow;
   /** Inner content of the Box */
   children: ReactNode;
 }
@@ -58,11 +60,15 @@ type PolymorphicBox = Polymorphic.ForwardRefComponent<'div', BoxBaseProps>;
 export type BoxProps = Polymorphic.OwnProps<PolymorphicBox>;
 
 export const Box = forwardRef(
-  ({as: Component = 'div', background, borderRadius, children}, ref) => {
+  (
+    {as: Component = 'div', background, borderRadius, shadow, children},
+    ref,
+  ) => {
     const className = classNames(
       styles.root,
       background && styles[background],
       borderRadius && styles[borderRadius],
+      shadow && styles[shadow],
     );
 
     return (

From 3f2eb9cae3ea66d68a1c217dc3560ff3446512a1 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Tue, 23 Aug 2022 13:11:58 -0400
Subject: [PATCH 06/15] Add changeset

---
 .changeset/red-cycles-allow.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/red-cycles-allow.md

diff --git a/.changeset/red-cycles-allow.md b/.changeset/red-cycles-allow.md
new file mode 100644
index 00000000000..76960cccefc
--- /dev/null
+++ b/.changeset/red-cycles-allow.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added `Box` component

From 35a1c7703741a17ebf04e44c586ce39a764854b2 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Tue, 23 Aug 2022 14:34:35 -0400
Subject: [PATCH 07/15] Fix merge conflict

---
 polaris-react/src/components/Box/Box.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris-react/src/components/Box/Box.scss b/polaris-react/src/components/Box/Box.scss
index 63cacf6f461..43c24069f37 100644
--- a/polaris-react/src/components/Box/Box.scss
+++ b/polaris-react/src/components/Box/Box.scss
@@ -94,7 +94,7 @@
   background-color: var(--p-overlay);
 }
 
-<<<<<<< HEAD .radius-05 {
+.radius-05 {
   border-radius: var(--p-border-radius-05);
 }
 

From 425f4391c55eba23d3c5e42e4e2be5ba7d18aa5f Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Wed, 24 Aug 2022 12:21:50 -0400
Subject: [PATCH 08/15] [Layout foundations] Add `margin` and `padding` props

Co-authored-by: Aaron Casanova <aaron.casanova@shopify.com>
---
 polaris-react/src/components/Box/Box.scss | 16 +++++
 polaris-react/src/components/Box/Box.tsx  | 75 +++++++++++++++++++++--
 2 files changed, 87 insertions(+), 4 deletions(-)

diff --git a/polaris-react/src/components/Box/Box.scss b/polaris-react/src/components/Box/Box.scss
index 43c24069f37..061a48147dc 100644
--- a/polaris-react/src/components/Box/Box.scss
+++ b/polaris-react/src/components/Box/Box.scss
@@ -1,5 +1,21 @@
 .root {
+  --pc-box-margin-bottom: initial;
+  --pc-box-margin-left: initial;
+  --pc-box-margin-right: initial;
+  --pc-box-margin-top: initial;
+  --pc-box-padding-bottom: initial;
+  --pc-box-padding-left: initial;
+  --pc-box-padding-right: initial;
+  --pc-box-padding-top: initial;
   display: block;
+  margin-bottom: var(--pc-box-margin-bottom);
+  margin-left: var(--pc-box-margin-left);
+  margin-right: var(--pc-box-margin-right);
+  margin-top: var(--pc-box-margin-top);
+  padding-bottom: var(--pc-box-padding-bottom);
+  padding-left: var(--pc-box-padding-left);
+  padding-right: var(--pc-box-padding-right);
+  padding-top: var(--pc-box-padding-top);
 }
 
 .background {
diff --git a/polaris-react/src/components/Box/Box.tsx b/polaris-react/src/components/Box/Box.tsx
index 74da3811f4b..c0c204f6c99 100644
--- a/polaris-react/src/components/Box/Box.tsx
+++ b/polaris-react/src/components/Box/Box.tsx
@@ -4,6 +4,7 @@ import type * as Polymorphic from '@radix-ui/react-polymorphic';
 import {classNames} from '../../utilities/css';
 
 import styles from './Box.scss';
+import type {spacing} from '@shopify/polaris-tokens';
 
 type Background =
   | 'background'
@@ -44,15 +45,42 @@ type BorderRadius =
 
 type Shadow = 'default' | 'transparent' | 'faint' | 'deep';
 
+type SpacingTokenGroup = typeof spacing;
+type SpacingTokenName = keyof SpacingTokenGroup;
+
+type SpacingTokenScale = SpacingTokenName extends `space-${infer Scale}`
+  ? Scale
+  : never;
+
 interface BoxBaseProps {
   /** Background color of the Box */
   background?: Background;
   /** Border radius of the Box */
   borderRadius?: BorderRadius;
-  /** Shadow on the Box */
-  shadow?: Shadow;
   /** Inner content of the Box */
   children: ReactNode;
+  /** Spacing outside of the Box */
+  margin?: SpacingTokenScale;
+  /** Bottom spacing outside of the Box */
+  marginBottom?: SpacingTokenScale;
+  /** Left side spacing outside of the Box */
+  marginLeft?: SpacingTokenScale;
+  /** Right side spacing outside of the Box */
+  marginRight?: SpacingTokenScale;
+  /** Top spacing outside of the Box */
+  marginTop?: SpacingTokenScale;
+  /** Spacing inside of the Box */
+  padding?: SpacingTokenScale;
+  /** Bottom spacing inside of the Box */
+  paddingBottom?: SpacingTokenScale;
+  /** Left side spacing inside of the Box */
+  paddingLeft?: SpacingTokenScale;
+  /** Right side spacing inside of the Box */
+  paddingRight?: SpacingTokenScale;
+  /** Top spacing inside of the Box */
+  paddingTop?: SpacingTokenScale;
+  /** Shadow on the Box */
+  shadow?: Shadow;
 }
 
 type PolymorphicBox = Polymorphic.ForwardRefComponent<'div', BoxBaseProps>;
@@ -61,9 +89,48 @@ export type BoxProps = Polymorphic.OwnProps<PolymorphicBox>;
 
 export const Box = forwardRef(
   (
-    {as: Component = 'div', background, borderRadius, shadow, children},
+    {
+      as: Component = 'div',
+      background,
+      borderRadius,
+      children,
+      margin,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      marginTop,
+      padding,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      paddingTop,
+      shadow,
+    },
     ref,
   ) => {
+    const style = {
+      '--pc-box-margin': margin ? `var(--p-space-${margin})` : '',
+      '--pc-box-margin-bottom': marginBottom
+        ? `var(--p-space-${marginBottom})`
+        : '',
+      '--pc-box-margin-left': marginLeft ? `var(--p-space-${marginLeft})` : '',
+      '--pc-box-margin-right': marginRight
+        ? `var(--p-space-${marginRight})`
+        : '',
+      '--pc-box-margin-top': marginTop ? `var(--p-space-${marginTop})` : '',
+      '--pc-box-padding': padding ? `var(--p-space-${padding})` : '',
+      '--pc-box-padding-bottom': paddingBottom
+        ? `var(--p-space-${paddingBottom})`
+        : '',
+      '--pc-box-padding-left': paddingLeft
+        ? `var(--p-space-${paddingLeft})`
+        : '',
+      '--pc-box-padding-right': paddingRight
+        ? `var(--p-space-${paddingRight})`
+        : '',
+      '--pc-box-padding-top': paddingTop ? `var(--p-space-${paddingTop})` : '',
+    } as React.CSSProperties;
+
     const className = classNames(
       styles.root,
       background && styles[background],
@@ -72,7 +139,7 @@ export const Box = forwardRef(
     );
 
     return (
-      <Component ref={ref} className={className}>
+      <Component ref={ref} className={className} style={style}>
         {children}
       </Component>
     );

From 2cbe34a0a78ee0c6104f5bb9e4d3ce450fe7d70c Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Thu, 25 Aug 2022 13:03:34 -0400
Subject: [PATCH 09/15] [Layout foundations] Refactor `margin` and `padding`
 logic

Including the `margin/padding` property was causing overrides when combining with `marginTop` or `paddingLeft`, for example.

Co-authored-by: Aveline Thelen <aveline.thelen@shopify.com>
Co-authored-by: Alex Page <alex.page@shopify.com>
---
 polaris-react/src/components/Box/Box.scss | 26 +++-----
 polaris-react/src/components/Box/Box.tsx  | 76 +++++++++++++++--------
 2 files changed, 60 insertions(+), 42 deletions(-)

diff --git a/polaris-react/src/components/Box/Box.scss b/polaris-react/src/components/Box/Box.scss
index 061a48147dc..e6a61672a1b 100644
--- a/polaris-react/src/components/Box/Box.scss
+++ b/polaris-react/src/components/Box/Box.scss
@@ -1,21 +1,15 @@
 .root {
-  --pc-box-margin-bottom: initial;
-  --pc-box-margin-left: initial;
-  --pc-box-margin-right: initial;
-  --pc-box-margin-top: initial;
-  --pc-box-padding-bottom: initial;
-  --pc-box-padding-left: initial;
-  --pc-box-padding-right: initial;
-  --pc-box-padding-top: initial;
   display: block;
-  margin-bottom: var(--pc-box-margin-bottom);
-  margin-left: var(--pc-box-margin-left);
-  margin-right: var(--pc-box-margin-right);
-  margin-top: var(--pc-box-margin-top);
-  padding-bottom: var(--pc-box-padding-bottom);
-  padding-left: var(--pc-box-padding-left);
-  padding-right: var(--pc-box-padding-right);
-  padding-top: var(--pc-box-padding-top);
+  /* stylelint-disable declaration-block-no-redundant-longhand-properties */
+  margin-bottom: var(--pc-box-margin-bottom, initial);
+  margin-left: var(--pc-box-margin-left, initial);
+  margin-right: var(--pc-box-margin-right, initial);
+  margin-top: var(--pc-box-margin-top, initial);
+  padding-bottom: var(--pc-box-padding-bottom, initial);
+  padding-left: var(--pc-box-padding-left, initial);
+  padding-right: var(--pc-box-padding-right, initial);
+  padding-top: var(--pc-box-padding-top, initial);
+  /* stylelint-enable declaration-block-no-redundant-longhand-properties */
 }
 
 .background {
diff --git a/polaris-react/src/components/Box/Box.tsx b/polaris-react/src/components/Box/Box.tsx
index c0c204f6c99..432e70c38f2 100644
--- a/polaris-react/src/components/Box/Box.tsx
+++ b/polaris-react/src/components/Box/Box.tsx
@@ -1,10 +1,10 @@
 import React, {ReactNode, forwardRef} from 'react';
 import type * as Polymorphic from '@radix-ui/react-polymorphic';
+import type {spacing} from '@shopify/polaris-tokens';
 
 import {classNames} from '../../utilities/css';
 
 import styles from './Box.scss';
-import type {spacing} from '@shopify/polaris-tokens';
 
 type Background =
   | 'background'
@@ -48,10 +48,18 @@ type Shadow = 'default' | 'transparent' | 'faint' | 'deep';
 type SpacingTokenGroup = typeof spacing;
 type SpacingTokenName = keyof SpacingTokenGroup;
 
+// TODO: Bring this logic into tokens
 type SpacingTokenScale = SpacingTokenName extends `space-${infer Scale}`
   ? Scale
   : never;
 
+type Spacing = {
+  bottom: SpacingTokenScale | '';
+  left: SpacingTokenScale | '';
+  right: SpacingTokenScale | '';
+  top: SpacingTokenScale | '';
+};
+
 interface BoxBaseProps {
   /** Background color of the Box */
   background?: Background;
@@ -94,41 +102,57 @@ export const Box = forwardRef(
       background,
       borderRadius,
       children,
-      margin,
-      marginBottom,
-      marginLeft,
-      marginRight,
-      marginTop,
-      padding,
-      paddingBottom,
-      paddingLeft,
-      paddingRight,
-      paddingTop,
+      margin = '',
+      marginBottom = '',
+      marginLeft = '',
+      marginRight = '',
+      marginTop = '',
+      padding = '',
+      paddingBottom = '',
+      paddingLeft = '',
+      paddingRight = '',
+      paddingTop = '',
       shadow,
     },
     ref,
   ) => {
+    const margins = {
+      bottom: marginBottom ? marginBottom : margin,
+      left: marginLeft ? marginLeft : margin,
+      right: marginRight ? marginRight : margin,
+      top: marginTop ? marginTop : margin,
+    } as Spacing;
+
+    const paddings = {
+      bottom: paddingBottom ? paddingBottom : padding,
+      left: paddingLeft ? paddingLeft : padding,
+      right: paddingRight ? paddingRight : padding,
+      top: paddingTop ? paddingTop : padding,
+    } as Spacing;
+
     const style = {
-      '--pc-box-margin': margin ? `var(--p-space-${margin})` : '',
-      '--pc-box-margin-bottom': marginBottom
-        ? `var(--p-space-${marginBottom})`
+      '--pc-box-margin-bottom': margins.bottom
+        ? `var(--p-space-${margins.bottom})`
+        : '',
+      '--pc-box-margin-left': margins.left
+        ? `var(--p-space-${margins.left})`
+        : '',
+      '--pc-box-margin-right': margins.right
+        ? `var(--p-space-${margins.right})`
         : '',
-      '--pc-box-margin-left': marginLeft ? `var(--p-space-${marginLeft})` : '',
-      '--pc-box-margin-right': marginRight
-        ? `var(--p-space-${marginRight})`
+      '--pc-box-margin-top': margins.top ? `var(--p-space-${margins.top})` : '',
+      '--pc-box-padding-bottom': paddings.bottom
+        ? `var(--p-space-${paddings.bottom})`
         : '',
-      '--pc-box-margin-top': marginTop ? `var(--p-space-${marginTop})` : '',
-      '--pc-box-padding': padding ? `var(--p-space-${padding})` : '',
-      '--pc-box-padding-bottom': paddingBottom
-        ? `var(--p-space-${paddingBottom})`
+      '--pc-box-padding-left': paddings.left
+        ? `var(--p-space-${paddings.left})`
         : '',
-      '--pc-box-padding-left': paddingLeft
-        ? `var(--p-space-${paddingLeft})`
+      '--pc-box-padding-right': paddings.right
+        ? `var(--p-space-${paddings.right})`
         : '',
-      '--pc-box-padding-right': paddingRight
-        ? `var(--p-space-${paddingRight})`
+      '--pc-box-padding-top': paddings.top
+        ? `var(--p-space-${paddings.top})`
         : '',
-      '--pc-box-padding-top': paddingTop ? `var(--p-space-${paddingTop})` : '',
     } as React.CSSProperties;
 
     const className = classNames(

From 2f36dda9ad2f7f2a819c7a0d2e12a8100800031e Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Thu, 25 Aug 2022 13:17:24 -0400
Subject: [PATCH 10/15] [Layout foundations] Refactor `borderRadius` to use
 `shape` tokens

---
 polaris-react/src/components/Box/Box.scss | 40 +++++++++++++++++++++++
 polaris-react/src/components/Box/Box.tsx  | 29 +++++++---------
 2 files changed, 52 insertions(+), 17 deletions(-)

diff --git a/polaris-react/src/components/Box/Box.scss b/polaris-react/src/components/Box/Box.scss
index e6a61672a1b..7953179b864 100644
--- a/polaris-react/src/components/Box/Box.scss
+++ b/polaris-react/src/components/Box/Box.scss
@@ -144,6 +144,46 @@
   border-radius: var(--p-border-radius-half);
 }
 
+.width-1 {
+  border: var(--p-border-width-1) solid;
+}
+
+.width-2 {
+  border: var(--p-border-width-2) solid;
+}
+
+.width-3 {
+  border: var(--p-border-width-3) solid;
+}
+
+.width-4 {
+  border: var(--p-border-width-4) solid;
+}
+
+.width-5 {
+  border: var(--p-border-width-5) solid;
+}
+
+.base {
+  border: var(--p-border-base);
+}
+
+.dark {
+  border: var(--p-border-dark);
+}
+
+.transparent {
+  border: var(--p-border-transparent);
+}
+
+.divider {
+  border: var(--p-border-divider);
+}
+
+.divider-on-dark {
+  border: var(--p-border-divider-on-dark);
+}
+
 .shadowBase {
   box-shadow: var(--p-shadow-base);
 }
diff --git a/polaris-react/src/components/Box/Box.tsx b/polaris-react/src/components/Box/Box.tsx
index 432e70c38f2..e7f7654df43 100644
--- a/polaris-react/src/components/Box/Box.tsx
+++ b/polaris-react/src/components/Box/Box.tsx
@@ -1,6 +1,6 @@
 import React, {ReactNode, forwardRef} from 'react';
 import type * as Polymorphic from '@radix-ui/react-polymorphic';
-import type {spacing} from '@shopify/polaris-tokens';
+import type {shape, spacing} from '@shopify/polaris-tokens';
 
 import {classNames} from '../../utilities/css';
 
@@ -31,20 +31,15 @@ type Background =
   | 'backdrop'
   | 'overlay';
 
-type BorderRadius =
-  | 'radius-05'
-  | 'radius-1'
-  | 'radius-2'
-  | 'radius-3'
-  | 'radius-4'
-  | 'radius-5'
-  | 'radius-6'
-  | 'radius-base'
-  | 'radius-large'
-  | 'radius-half';
-
 type Shadow = 'default' | 'transparent' | 'faint' | 'deep';
 
+type ShapeTokenGroup = typeof shape;
+type ShapeTokenName = keyof ShapeTokenGroup;
+
+type BorderTokenScale = ShapeTokenName extends `border-${infer Scale}`
+  ? Scale
+  : never;
+
 type SpacingTokenGroup = typeof spacing;
 type SpacingTokenName = keyof SpacingTokenGroup;
 
@@ -63,8 +58,8 @@ type Spacing = {
 interface BoxBaseProps {
   /** Background color of the Box */
   background?: Background;
-  /** Border radius of the Box */
-  borderRadius?: BorderRadius;
+  /** Border styling of the Box */
+  border?: BorderTokenScale;
   /** Inner content of the Box */
   children: ReactNode;
   /** Spacing outside of the Box */
@@ -100,7 +95,7 @@ export const Box = forwardRef(
     {
       as: Component = 'div',
       background,
-      borderRadius,
+      border,
       children,
       margin = '',
       marginBottom = '',
@@ -158,7 +153,7 @@ export const Box = forwardRef(
     const className = classNames(
       styles.root,
       background && styles[background],
-      borderRadius && styles[borderRadius],
+      border && styles[border],
       shadow && styles[shadow],
     );
 

From 20380ce65986ee79e11483ccf996acee18d3122a Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Mon, 29 Aug 2022 12:35:16 -0400
Subject: [PATCH 11/15] [Layout foundations] Refactor and add `border` and
 `borderRadius` props

---
 polaris-react/src/components/Box/Box.scss |  88 ++-----------------
 polaris-react/src/components/Box/Box.tsx  | 102 ++++++++++++++++++++--
 2 files changed, 105 insertions(+), 85 deletions(-)

diff --git a/polaris-react/src/components/Box/Box.scss b/polaris-react/src/components/Box/Box.scss
index 7953179b864..74f014ad20f 100644
--- a/polaris-react/src/components/Box/Box.scss
+++ b/polaris-react/src/components/Box/Box.scss
@@ -9,6 +9,14 @@
   padding-left: var(--pc-box-padding-left, initial);
   padding-right: var(--pc-box-padding-right, initial);
   padding-top: var(--pc-box-padding-top, initial);
+  border-bottom-left-radius: var(--pc-box-border-radius-bottom-left, initial);
+  border-bottom-right-radius: var(--pc-box-border-radius-bottom-right, initial);
+  border-top-left-radius: var(--pc-box-border-radius-top-left, initial);
+  border-top-right-radius: var(--pc-box-border-radius-top-right, initial);
+  border-bottom: var(--pc-box-border-bottom, initial);
+  border-left: var(--pc-box-border-left, initial);
+  border-right: var(--pc-box-border-right, initial);
+  border-top: var(--pc-box-border-top, initial);
   /* stylelint-enable declaration-block-no-redundant-longhand-properties */
 }
 
@@ -104,86 +112,6 @@
   background-color: var(--p-overlay);
 }
 
-.radius-05 {
-  border-radius: var(--p-border-radius-05);
-}
-
-.radius-1 {
-  border-radius: var(--p-border-radius-1);
-}
-
-.radius-2 {
-  border-radius: var(--p-border-radius-2);
-}
-
-.radius-3 {
-  border-radius: var(--p-border-radius-3);
-}
-
-.radius-4 {
-  border-radius: var(--p-border-radius-4);
-}
-
-.radius-5 {
-  border-radius: var(--p-border-radius-5);
-}
-
-.radius-6 {
-  border-radius: var(--p-border-radius-6);
-}
-
-.radius-base {
-  border-radius: var(--p-border-radius-base);
-}
-
-.radius-large {
-  border-radius: var(--p-border-radius-large);
-}
-
-.radius-half {
-  border-radius: var(--p-border-radius-half);
-}
-
-.width-1 {
-  border: var(--p-border-width-1) solid;
-}
-
-.width-2 {
-  border: var(--p-border-width-2) solid;
-}
-
-.width-3 {
-  border: var(--p-border-width-3) solid;
-}
-
-.width-4 {
-  border: var(--p-border-width-4) solid;
-}
-
-.width-5 {
-  border: var(--p-border-width-5) solid;
-}
-
-.base {
-  border: var(--p-border-base);
-}
-
-.dark {
-  border: var(--p-border-dark);
-}
-
-.transparent {
-  border: var(--p-border-transparent);
-}
-
-.divider {
-  border: var(--p-border-divider);
-}
-
-.divider-on-dark {
-  border: var(--p-border-divider-on-dark);
-}
-
 .shadowBase {
   box-shadow: var(--p-shadow-base);
 }
diff --git a/polaris-react/src/components/Box/Box.tsx b/polaris-react/src/components/Box/Box.tsx
index e7f7654df43..084b49dc8a7 100644
--- a/polaris-react/src/components/Box/Box.tsx
+++ b/polaris-react/src/components/Box/Box.tsx
@@ -36,10 +36,34 @@ type Shadow = 'default' | 'transparent' | 'faint' | 'deep';
 type ShapeTokenGroup = typeof shape;
 type ShapeTokenName = keyof ShapeTokenGroup;
 
-type BorderTokenScale = ShapeTokenName extends `border-${infer Scale}`
+type BorderShapeTokenScale = ShapeTokenName extends `border-${infer Scale}`
   ? Scale
   : never;
 
+type BorderTokenScale = Exclude<
+  BorderShapeTokenScale,
+  `radius-${string}` | `width-${string}`
+>;
+
+interface Border {
+  bottom: BorderTokenScale;
+  left: BorderTokenScale;
+  right: BorderTokenScale;
+  top: BorderTokenScale;
+}
+
+type BorderRadiusTokenScale = Extract<
+  BorderShapeTokenScale,
+  `radius-${string}`
+>;
+
+interface BorderRadius {
+  bottomLeft: BorderRadiusTokenScale | '';
+  bottomRight: BorderRadiusTokenScale | '';
+  topLeft: BorderRadiusTokenScale | '';
+  topRight: BorderRadiusTokenScale | '';
+}
+
 type SpacingTokenGroup = typeof spacing;
 type SpacingTokenName = keyof SpacingTokenGroup;
 
@@ -48,18 +72,36 @@ type SpacingTokenScale = SpacingTokenName extends `space-${infer Scale}`
   ? Scale
   : never;
 
-type Spacing = {
+interface Spacing {
   bottom: SpacingTokenScale | '';
   left: SpacingTokenScale | '';
   right: SpacingTokenScale | '';
   top: SpacingTokenScale | '';
-};
+}
 
 interface BoxBaseProps {
   /** Background color of the Box */
   background?: Background;
   /** Border styling of the Box */
   border?: BorderTokenScale;
+  /** Bottom border styling of the Box */
+  borderBottom?: BorderTokenScale;
+  /** Left border styling of the Box */
+  borderLeft?: BorderTokenScale;
+  /** Right border styling of the Box */
+  borderRight?: BorderTokenScale;
+  /** Top border styling of the Box */
+  borderTop?: BorderTokenScale;
+  /** Border radius of the Box */
+  borderRadius?: BorderRadiusTokenScale;
+  /** Bottom left border radius of the Box */
+  borderRadiusBottomLeft?: BorderRadiusTokenScale;
+  /** Bottom right border radius of the Box */
+  borderRadiusBottomRight?: BorderRadiusTokenScale;
+  /** Top left border radius of the Box */
+  borderRadiusTopLeft?: BorderRadiusTokenScale;
+  /** Top right border radius of the Box */
+  borderRadiusTopRight?: BorderRadiusTokenScale;
   /** Inner content of the Box */
   children: ReactNode;
   /** Spacing outside of the Box */
@@ -95,7 +137,16 @@ export const Box = forwardRef(
     {
       as: Component = 'div',
       background,
-      border,
+      border = '',
+      borderBottom = '',
+      borderLeft = '',
+      borderRight = '',
+      borderTop = '',
+      borderRadius = '',
+      borderRadiusBottomLeft = '',
+      borderRadiusBottomRight = '',
+      borderRadiusTopLeft = '',
+      borderRadiusTopRight = '',
       children,
       margin = '',
       marginBottom = '',
@@ -111,6 +162,24 @@ export const Box = forwardRef(
     },
     ref,
   ) => {
+    const borders = {
+      bottom: borderBottom ? borderBottom : border,
+      left: borderLeft ? borderLeft : border,
+      right: borderRight ? borderRight : border,
+      top: borderTop ? borderTop : border,
+    } as Border;
+
+    const borderRadiuses = {
+      bottomLeft: borderRadiusBottomLeft
+        ? borderRadiusBottomLeft
+        : borderRadius,
+      bottomRight: borderRadiusBottomRight
+        ? borderRadiusBottomRight
+        : borderRadius,
+      topLeft: borderRadiusTopLeft ? borderRadiusTopLeft : borderRadius,
+      topRight: borderRadiusTopRight ? borderRadiusTopRight : borderRadius,
+    } as BorderRadius;
+
     const margins = {
       bottom: marginBottom ? marginBottom : margin,
       left: marginLeft ? marginLeft : margin,
@@ -148,12 +217,35 @@ export const Box = forwardRef(
       '--pc-box-padding-top': paddings.top
         ? `var(--p-space-${paddings.top})`
         : '',
+      '--pc-box-border-bottom': borders.bottom
+        ? `var(--p-border-${borders.bottom})`
+        : '',
+      '--pc-box-border-left': borders.left
+        ? `var(--p-border-${borders.left})`
+        : '',
+      '--pc-box-border-right': borders.right
+        ? `var(--p-border-${borders.right})`
+        : '',
+      '--pc-box-border-top': borders.top
+        ? `var(--p-border-${borders.top})`
+        : '',
+      '--pc-box-border-radius-bottom-left': borderRadiuses.bottomLeft
+        ? `var(--p-border-${borderRadiuses.bottomLeft})`
+        : '',
+      '--pc-box-border-radius-bottom-right': borderRadiuses.bottomRight
+        ? `var(--p-border-${borderRadiuses.bottomRight})`
+        : '',
+      '--pc-box-border-radius-top-left': borderRadiuses.topLeft
+        ? `var(--p-border-${borderRadiuses.topLeft})`
+        : '',
+      '--pc-box-border-radius-top-right': borderRadiuses.topRight
+        ? `var(--p-border-${borderRadiuses.topRight})`
+        : '',
     } as React.CSSProperties;
 
     const className = classNames(
       styles.root,
       background && styles[background],
-      border && styles[border],
       shadow && styles[shadow],
     );
 

From a119bb91ce312ecd915cab795da18885f53c8fe4 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Mon, 29 Aug 2022 13:28:48 -0400
Subject: [PATCH 12/15] [Layout foundations] Refactor `shadow` to use `depth`
 tokens

---
 polaris-react/src/components/Box/Box.scss | 17 +----------------
 polaris-react/src/components/Box/Box.tsx  | 19 +++++++++++--------
 2 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/polaris-react/src/components/Box/Box.scss b/polaris-react/src/components/Box/Box.scss
index 74f014ad20f..3908557f275 100644
--- a/polaris-react/src/components/Box/Box.scss
+++ b/polaris-react/src/components/Box/Box.scss
@@ -18,6 +18,7 @@
   border-right: var(--pc-box-border-right, initial);
   border-top: var(--pc-box-border-top, initial);
   /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+  box-shadow: var(--pc-box-shadow, initial);
 }
 
 .background {
@@ -111,19 +112,3 @@
 .overlay {
   background-color: var(--p-overlay);
 }
-
-.shadowBase {
-  box-shadow: var(--p-shadow-base);
-}
-
-.transparent {
-  box-shadow: var(--p-shadow-transparent);
-}
-
-.faint {
-  box-shadow: var(--p-shadow-faint);
-}
-
-.deep {
-  box-shadow: var(--p-shadow-deep);
-}
diff --git a/polaris-react/src/components/Box/Box.tsx b/polaris-react/src/components/Box/Box.tsx
index 084b49dc8a7..18647e6063e 100644
--- a/polaris-react/src/components/Box/Box.tsx
+++ b/polaris-react/src/components/Box/Box.tsx
@@ -1,6 +1,6 @@
 import React, {ReactNode, forwardRef} from 'react';
 import type * as Polymorphic from '@radix-ui/react-polymorphic';
-import type {shape, spacing} from '@shopify/polaris-tokens';
+import type {depth, shape, spacing} from '@shopify/polaris-tokens';
 
 import {classNames} from '../../utilities/css';
 
@@ -31,7 +31,13 @@ type Background =
   | 'backdrop'
   | 'overlay';
 
-type Shadow = 'default' | 'transparent' | 'faint' | 'deep';
+type DepthTokenGroup = typeof depth;
+type DepthTokenName = keyof DepthTokenGroup;
+type ShadowsTokenName = Exclude<DepthTokenName, `shadows-${string}`>;
+
+type DepthTokenScale = ShadowsTokenName extends `shadow-${infer Scale}`
+  ? Scale
+  : never;
 
 type ShapeTokenGroup = typeof shape;
 type ShapeTokenName = keyof ShapeTokenGroup;
@@ -125,7 +131,7 @@ interface BoxBaseProps {
   /** Top spacing inside of the Box */
   paddingTop?: SpacingTokenScale;
   /** Shadow on the Box */
-  shadow?: Shadow;
+  shadow?: DepthTokenScale;
 }
 
 type PolymorphicBox = Polymorphic.ForwardRefComponent<'div', BoxBaseProps>;
@@ -241,13 +247,10 @@ export const Box = forwardRef(
       '--pc-box-border-radius-top-right': borderRadiuses.topRight
         ? `var(--p-border-${borderRadiuses.topRight})`
         : '',
+      '--pc-box-shadow': shadow ? `var(--p-shadow-${shadow})` : '',
     } as React.CSSProperties;
 
-    const className = classNames(
-      styles.root,
-      background && styles[background],
-      shadow && styles[shadow],
-    );
+    const className = classNames(styles.root, background && styles[background]);
 
     return (
       <Component ref={ref} className={className} style={style}>

From b1d6ed7bf328fdc92e3991071f278112f19dd7a4 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Tue, 30 Aug 2022 09:04:35 -0400
Subject: [PATCH 13/15] [Layout foundations] Remove `radius-` prefix from
 `borderRadius` type

---
 polaris-react/src/components/Box/Box.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/polaris-react/src/components/Box/Box.tsx b/polaris-react/src/components/Box/Box.tsx
index 18647e6063e..afc481514d1 100644
--- a/polaris-react/src/components/Box/Box.tsx
+++ b/polaris-react/src/components/Box/Box.tsx
@@ -61,7 +61,9 @@ interface Border {
 type BorderRadiusTokenScale = Extract<
   BorderShapeTokenScale,
   `radius-${string}`
->;
+> extends `radius-${infer Scale}`
+  ? Scale
+  : never;
 
 interface BorderRadius {
   bottomLeft: BorderRadiusTokenScale | '';
@@ -236,16 +238,16 @@ export const Box = forwardRef(
         ? `var(--p-border-${borders.top})`
         : '',
       '--pc-box-border-radius-bottom-left': borderRadiuses.bottomLeft
-        ? `var(--p-border-${borderRadiuses.bottomLeft})`
+        ? `var(--p-border-radius-${borderRadiuses.bottomLeft})`
         : '',
       '--pc-box-border-radius-bottom-right': borderRadiuses.bottomRight
-        ? `var(--p-border-${borderRadiuses.bottomRight})`
+        ? `var(--p-border-radius-${borderRadiuses.bottomRight})`
         : '',
       '--pc-box-border-radius-top-left': borderRadiuses.topLeft
-        ? `var(--p-border-${borderRadiuses.topLeft})`
+        ? `var(--p-border-radius-${borderRadiuses.topLeft})`
         : '',
       '--pc-box-border-radius-top-right': borderRadiuses.topRight
-        ? `var(--p-border-${borderRadiuses.topRight})`
+        ? `var(--p-border-radius-${borderRadiuses.topRight})`
         : '',
       '--pc-box-shadow': shadow ? `var(--p-shadow-${shadow})` : '',
     } as React.CSSProperties;

From 4f2dbdc6166abc4189d4717bfa7c6e789d01758e Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Tue, 30 Aug 2022 09:21:56 -0400
Subject: [PATCH 14/15] [Layout foundations] Refactor `background` to use color
 tokens

---
 polaris-react/src/components/Box/Box.scss | 109 ++--------------------
 polaris-react/src/components/Box/Box.tsx  |  36 +++----
 2 files changed, 21 insertions(+), 124 deletions(-)

diff --git a/polaris-react/src/components/Box/Box.scss b/polaris-react/src/components/Box/Box.scss
index 3908557f275..a2ae93e5a59 100644
--- a/polaris-react/src/components/Box/Box.scss
+++ b/polaris-react/src/components/Box/Box.scss
@@ -1,14 +1,7 @@
 .root {
   display: block;
+  background-color: var(--pc-box-background, initial);
   /* stylelint-disable declaration-block-no-redundant-longhand-properties */
-  margin-bottom: var(--pc-box-margin-bottom, initial);
-  margin-left: var(--pc-box-margin-left, initial);
-  margin-right: var(--pc-box-margin-right, initial);
-  margin-top: var(--pc-box-margin-top, initial);
-  padding-bottom: var(--pc-box-padding-bottom, initial);
-  padding-left: var(--pc-box-padding-left, initial);
-  padding-right: var(--pc-box-padding-right, initial);
-  padding-top: var(--pc-box-padding-top, initial);
   border-bottom-left-radius: var(--pc-box-border-radius-bottom-left, initial);
   border-bottom-right-radius: var(--pc-box-border-radius-bottom-right, initial);
   border-top-left-radius: var(--pc-box-border-radius-top-left, initial);
@@ -17,98 +10,14 @@
   border-left: var(--pc-box-border-left, initial);
   border-right: var(--pc-box-border-right, initial);
   border-top: var(--pc-box-border-top, initial);
+  margin-bottom: var(--pc-box-margin-bottom, initial);
+  margin-left: var(--pc-box-margin-left, initial);
+  margin-right: var(--pc-box-margin-right, initial);
+  margin-top: var(--pc-box-margin-top, initial);
+  padding-bottom: var(--pc-box-padding-bottom, initial);
+  padding-left: var(--pc-box-padding-left, initial);
+  padding-right: var(--pc-box-padding-right, initial);
+  padding-top: var(--pc-box-padding-top, initial);
   /* stylelint-enable declaration-block-no-redundant-longhand-properties */
   box-shadow: var(--pc-box-shadow, initial);
 }
-
-.background {
-  background-color: var(--p-background);
-}
-
-.backgroundHovered {
-  background-color: var(--p-background-hovered);
-}
-
-.backgroundPressed {
-  background-color: var(--p-background-pressed);
-}
-
-.backgroundSelected {
-  background-color: var(--p-background-selected);
-}
-
-.surface {
-  background-color: var(--p-surface);
-}
-
-.surfaceDark {
-  background-color: var(--p-surface-dark);
-}
-
-.surfaceNeutral {
-  background-color: var(--p-surface-neutral);
-}
-
-.surfaceNeutralHovered {
-  background-color: var(--p-surface-neutral-hovered);
-}
-
-.surfaceNeutralPressed {
-  background-color: var(--p-surface-neutral-pressed);
-}
-
-.surfaceNeutralDisabled {
-  background-color: var(--p-surface-neutral-disabled);
-}
-
-.surfaceNeutralSubdued {
-  background-color: var(--p-surface-neutral-subdued);
-}
-
-.surfaceNeutralSubduedDark {
-  background-color: var(--p-surface-neutral-subdued-dark);
-}
-
-.surfaceSubdued {
-  background-color: var(--p-surface-subdued);
-}
-
-.surfaceDisabled {
-  background-color: var(--p-surface-disabled);
-}
-
-.surfaceHovered {
-  background-color: var(--p-surface-hovered);
-}
-
-.surfaceHoveredDark {
-  background-color: var(--p-surface-hovered-dark);
-}
-
-.surfacePressed {
-  background-color: var(--p-surface-pressed);
-}
-
-.surfacePressedDark {
-  background-color: var(--p-surface-pressed-dark);
-}
-
-.surfaceDepressed {
-  background-color: var(--p-surface-depressed);
-}
-
-.surfaceSearchField {
-  background-color: var(--p-surface-search-field);
-}
-
-.surfaceSearchFieldDark {
-  background-color: var(--p-surface-search-field-dark);
-}
-
-.backdrop {
-  background-color: var(--p-backdrop);
-}
-
-.overlay {
-  background-color: var(--p-overlay);
-}
diff --git a/polaris-react/src/components/Box/Box.tsx b/polaris-react/src/components/Box/Box.tsx
index afc481514d1..12b2684f0f2 100644
--- a/polaris-react/src/components/Box/Box.tsx
+++ b/polaris-react/src/components/Box/Box.tsx
@@ -1,35 +1,22 @@
 import React, {ReactNode, forwardRef} from 'react';
 import type * as Polymorphic from '@radix-ui/react-polymorphic';
-import type {depth, shape, spacing} from '@shopify/polaris-tokens';
+import type {colors, depth, shape, spacing} from '@shopify/polaris-tokens';
 
 import {classNames} from '../../utilities/css';
 
 import styles from './Box.scss';
 
-type Background =
+type ColorsTokenGroup = typeof colors;
+type ColorsTokenName = keyof ColorsTokenGroup;
+type BackgroundColorTokenScale = Extract<
+  ColorsTokenName,
   | 'background'
-  | 'backgroundHovered'
-  | 'backgroundPressed'
-  | 'backgroundSelected'
+  | `background-${string}`
   | 'surface'
-  | 'surfaceDark'
-  | 'surfaceNeutral'
-  | 'surfaceNeutralHovered'
-  | 'surfaceNeutralPressed'
-  | 'surfaceNeutralDisabled'
-  | 'surfaceNeutralSubdued'
-  | 'surfaceNeutralSubduedDark'
-  | 'surfaceSubdued'
-  | 'surfaceDisabled'
-  | 'surfaceHovered'
-  | 'surfaceHoveredDark'
-  | 'surfacePressed'
-  | 'surfacePressedDark'
-  | 'surfaceDepressed'
-  | 'surfaceSearchField'
-  | 'surfaceSearchFieldDark'
+  | `surface-${string}`
   | 'backdrop'
-  | 'overlay';
+  | 'overlay'
+>;
 
 type DepthTokenGroup = typeof depth;
 type DepthTokenName = keyof DepthTokenGroup;
@@ -89,7 +76,7 @@ interface Spacing {
 
 interface BoxBaseProps {
   /** Background color of the Box */
-  background?: Background;
+  background?: BackgroundColorTokenScale;
   /** Border styling of the Box */
   border?: BorderTokenScale;
   /** Bottom border styling of the Box */
@@ -203,6 +190,7 @@ export const Box = forwardRef(
     } as Spacing;
 
     const style = {
+      '--pc-box-background': background ? `var(--p-${background})` : '',
       '--pc-box-margin-bottom': margins.bottom
         ? `var(--p-space-${margins.bottom})`
         : '',
@@ -252,7 +240,7 @@ export const Box = forwardRef(
       '--pc-box-shadow': shadow ? `var(--p-shadow-${shadow})` : '',
     } as React.CSSProperties;
 
-    const className = classNames(styles.root, background && styles[background]);
+    const className = classNames(styles.root);
 
     return (
       <Component ref={ref} className={className} style={style}>

From 8b94a286b9310f6f58ae123926836941ead3bb39 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Tue, 30 Aug 2022 09:23:05 -0400
Subject: [PATCH 15/15] [Layout foundations] Update `root` classname to `Box`

Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>
---
 polaris-react/src/components/Box/Box.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris-react/src/components/Box/Box.scss b/polaris-react/src/components/Box/Box.scss
index a2ae93e5a59..e9f41654a2b 100644
--- a/polaris-react/src/components/Box/Box.scss
+++ b/polaris-react/src/components/Box/Box.scss
@@ -1,4 +1,4 @@
-.root {
+.Box {
   display: block;
   background-color: var(--pc-box-background, initial);
   /* stylelint-disable declaration-block-no-redundant-longhand-properties */