[Box] Refactor position to use logical properties (#7777)

### WHY are these changes introduced?

Resolves #7771.
Refactors `Box` to use logical properties to align with other layout
primitives.

### WHAT is this pull request doing?

Refactors `top`, `bottom`, `left`, and `right` props on `Box` to be
`insetBlockStart`, `insetBlockEnd`, `insetInlineStart`, and
`insetInlineEnd`.
Updates prop names in style guide.

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';

import {Box, Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <Box
        position="relative"
        width="100%"
        minHeight="600px"
        background="action-primary-depressed"
      >
        <Box
          position="absolute"
          insetInlineStart="0"
          insetBlockEnd="0"
          width="50px"
          minHeight="50px"
          background="action-critical-depressed"
          zIndex="1"
        />
        <Box
          position="absolute"
          insetInlineStart="0"
          insetBlockEnd="6"
          width="50px"
          minHeight="50px"
          background="action-critical"
          zIndex="2"
        />

        <Box
          position="absolute"
          insetBlockStart="4"
          insetInlineEnd="4"
          width="100px"
          minHeight="100px"
          background="action-critical"
          zIndex="2"
        >
          <Box
            position="absolute"
            insetBlockEnd="2"
            insetInlineStart="0"
            width="50px"
            minHeight="50px"
            background="action-secondary"
            zIndex="1"
          >
            <Box visuallyHidden>asdf</Box>
          </Box>
        </Box>
      </Box>
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: laurkim

.changeset/lovely-moose-refuse.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': patch
+'polaris.shopify.com': patch
+---
+
+Refactored `position` properties on `Box` to use logical property names

polaris-react/src/components/Box/Box.scss

@@ -52,14 +52,14 @@
   --pc-box-padding-block-start: initial;
   --pc-box-width: initial;
   --pc-box-border-width: var(--p-border-width-1);
-  --pc-box-top: initial;
-  --pc-box-right: initial;
-  --pc-box-bottom: initial;
-  --pc-box-left: initial;
-  top: var(--pc-box-top);
-  right: var(--pc-box-right);
-  bottom: var(--pc-box-bottom);
-  left: var(--pc-box-left);
+  --pc-box-inset-block-start: initial;
+  --pc-box-inset-block-end: initial;
+  --pc-box-inset-inline-start: initial;
+  --pc-box-inset-inline-end: initial;
+  inset-block-start: var(--pc-box-inset-block-start);
+  inset-block-end: var(--pc-box-inset-block-end);
+  inset-inline-start: var(--pc-box-inset-inline-start);
+  inset-inline-end: var(--pc-box-inset-inline-end);
   background-color: var(--pc-box-background);
   box-shadow: var(--pc-box-shadow);
   border-radius: var(--pc-box-border-radius);

polaris-react/src/components/Box/Box.tsx

@@ -158,13 +158,13 @@ export interface BoxProps {
   /** Position of box */
   position?: Position;
   /** Top position of box */
-  top?: Spacing;
+  insetBlockStart?: Spacing;
   /** Bottom position of box */
-  right?: Spacing;
+  insetBlockEnd?: Spacing;
   /** Left position of box */
-  bottom?: Spacing;
+  insetInlineStart?: Spacing;
   /** Right position of box */
-  left?: Spacing;
+  insetInlineEnd?: Spacing;
   /** Opacity of box */
   opacity?: string;
   /** Visually hide the contents (still announced by screenreader) */
@@ -210,10 +210,10 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       width,
       visuallyHidden,
       position,
-      top,
-      right,
-      bottom,
-      left,
+      insetBlockStart,
+      insetBlockEnd,
+      insetInlineStart,
+      insetInlineEnd,
       zIndex,
       opacity,
     },
@@ -298,10 +298,18 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       '--pc-box-shadow': shadow ? `var(--p-shadow-${shadow})` : undefined,
       '--pc-box-width': width,
       position,
-      '--pc-box-top': top ? `var(--p-space-${top})` : undefined,
-      '--pc-box-right': right ? `var(--p-space-${right})` : undefined,
-      '--pc-box-bottom': bottom ? `var(--p-space-${bottom})` : undefined,
-      '--pc-box-left': left ? `var(--p-space-${left})` : undefined,
+      '--pc-box-inset-block-start': insetBlockStart
+        ? `var(--p-space-${insetBlockStart})`
+        : undefined,
+      '--pc-box-inset-block-end': insetBlockEnd
+        ? `var(--p-space-${insetBlockEnd})`
+        : undefined,
+      '--pc-box-inset-inline-start': insetInlineStart
+        ? `var(--p-space-${insetInlineStart})`
+        : undefined,
+      '--pc-box-inset-inline-end': insetInlineEnd
+        ? `var(--p-space-${insetInlineEnd})`
+        : undefined,
       zIndex,
       opacity,
     } as React.CSSProperties;