[Box] Add border width support

.changeset/gorgeous-dryers-wash.md

@@ -0,0 +1,7 @@
+---
+'@shopify/polaris': minor
+'@shopify/polaris-tokens': minor
+---
+
+- Added border width prop to `Box`
+- Exported color token subset alias types from tokens package and remove from `Box`

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

@@ -23,6 +23,7 @@
   --pc-box-padding-inline-end: initial;
   --pc-box-padding-block-start: initial;
   --pc-box-width: initial;
+  --pc-box-border-width: var(--p-border-width-1);
   background-color: var(--pc-box-background);
   box-shadow: var(--pc-box-shadow);
   border-radius: var(--pc-box-border-radius);
@@ -46,6 +47,22 @@
   border-inline-start: var(--pc-box-border-inline-start, var(--pc-box-border));
   border-inline-end: var(--pc-box-border-inline-end, var(--pc-box-border));
   border-block-start: var(--pc-box-border-block-start, var(--pc-box-border));
+  border-block-start-width: var(
+    --pc-box-border-block-start-width,
+    var(--pc-box-border-width)
+  );
+  border-block-end-width: var(
+    --pc-box-border-block-end-width,
+    var(--pc-box-border-width)
+  );
+  border-inline-start-width: var(
+    --pc-box-border-inline-start-width,
+    var(--pc-box-border-width)
+  );
+  border-inline-end-width: var(
+    --pc-box-border-inline-end-width,
+    var(--pc-box-border-width)
+  );
   color: var(--pc-box-color);
   min-height: var(--pc-box-min-height);
   min-width: var(--pc-box-min-width);

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import type {ComponentMeta} from '@storybook/react';
+import {Box, Icon} from '@shopify/polaris';
+import {PaintBrushMajor} from '@shopify/polaris-icons';
+
+export default {
+  component: Box,
+} as ComponentMeta<typeof Box>;
+
+export function Default() {
+  return (
+    <Box background="surface" padding="4">
+      <Icon source={PaintBrushMajor} color="base" />
+    </Box>
+  );
+}
+
+export function BoxWithDarkBorder() {
+  return (
+    <Box background="surface" padding="4" border="dark">
+      <Icon source={PaintBrushMajor} color="base" />
+    </Box>
+  );
+}
+
+export function BoxWithBorderRadius() {
+  return (
+    <Box background="surface" padding="4" borderRadius="2">
+      <Icon source={PaintBrushMajor} color="highlight" />
+    </Box>
+  );
+}

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

@@ -1,5 +1,11 @@
 import React, {createElement, forwardRef} from 'react';
 import type {
+  ColorsActionTokenAlias,
+  ColorsBackdropTokenAlias,
+  ColorsBackgroundTokenAlias,
+  ColorsOverlayTokenAlias,
+  ColorsSurfaceTokenAlias,
+  ShapeBorderWidthScale,
   DepthShadowAlias,
   SpacingSpaceScale,
 } from '@shopify/polaris-tokens';
@@ -12,72 +18,6 @@ type Element = 'div' | 'span' | 'section';
 
 type Overflow = 'hidden' | 'scroll';
 
-export type BackgroundColorTokenScale =
-  | 'action-critical'
-  | 'action-critical-depressed'
-  | 'action-critical-disabled'
-  | 'action-critical-hovered'
-  | 'action-critical-pressed'
-  | 'action-primary'
-  | 'action-primary-depressed'
-  | 'action-primary-disabled'
-  | 'action-primary-hovered'
-  | 'action-primary-pressed'
-  | 'action-secondary'
-  | 'action-secondary-depressed'
-  | 'action-secondary-disabled'
-  | 'action-secondary-hovered'
-  | 'action-secondary-hovered-dark'
-  | 'action-secondary-pressed'
-  | 'action-secondary-pressed-dark'
-  | 'backdrop'
-  | 'background'
-  | 'background-hovered'
-  | 'background-pressed'
-  | 'background-selected'
-  | 'overlay'
-  | 'surface'
-  | 'surface-attention'
-  | 'surface-critical'
-  | 'surface-critical-subdued'
-  | 'surface-critical-subdued-depressed'
-  | 'surface-critical-subdued-hovered'
-  | 'surface-critical-subdued-pressed'
-  | 'surface-dark'
-  | 'surface-depressed'
-  | 'surface-disabled'
-  | 'surface-highlight'
-  | 'surface-highlight-subdued'
-  | 'surface-highlight-subdued-hovered'
-  | 'surface-highlight-subdued-pressed'
-  | 'surface-hovered'
-  | 'surface-hovered-dark'
-  | 'surface-neutral'
-  | 'surface-neutral-disabled'
-  | 'surface-neutral-hovered'
-  | 'surface-neutral-pressed'
-  | 'surface-neutral-subdued'
-  | 'surface-neutral-subdued-dark'
-  | 'surface-pressed'
-  | 'surface-pressed-dark'
-  | 'surface-primary-selected'
-  | 'surface-primary-selected-hovered'
-  | 'surface-primary-selected-pressed'
-  | 'surface-search-field'
-  | 'surface-search-field-dark'
-  | 'surface-selected'
-  | 'surface-selected-hovered'
-  | 'surface-selected-pressed'
-  | 'surface-subdued'
-  | 'surface-success'
-  | 'surface-success-subdued'
-  | 'surface-success-subdued-hovered'
-  | 'surface-success-subdued-pressed'
-  | 'surface-warning'
-  | 'surface-warning-subdued'
-  | 'surface-warning-subdued-hovered'
-  | 'surface-warning-subdued-pressed';
-
 export type ColorTokenScale =
   | 'text'
   | 'text-critical'
@@ -121,6 +61,13 @@ export type BorderRadiusTokenScale =
   | 'large'
   | 'half';
 
+export type BackgroundColors =
+  | ColorsBackdropTokenAlias
+  | ColorsBackgroundTokenAlias
+  | ColorsOverlayTokenAlias
+  | ColorsActionTokenAlias
+  | ColorsSurfaceTokenAlias;
+
 interface BorderRadius {
   startStart: BorderRadiusTokenScale;
   startEnd: BorderRadiusTokenScale;
@@ -135,11 +82,18 @@ interface Spacing {
   inlineEnd: SpacingSpaceScale;
 }
 
+interface BorderWidth {
+  blockStart: ShapeBorderWidthScale;
+  blockEnd: ShapeBorderWidthScale;
+  inlineStart: ShapeBorderWidthScale;
+  inlineEnd: ShapeBorderWidthScale;
+}
+
 export interface BoxProps {
   /** HTML Element type */
   as?: Element;
   /** Background color */
-  background?: BackgroundColorTokenScale;
+  background?: BackgroundColors;
   /** Border style */
   border?: BorderTokenAlias;
   /** Vertical end border style */
@@ -160,6 +114,16 @@ export interface BoxProps {
   borderRadiusStartStart?: BorderRadiusTokenScale;
   /** Verital start horizontal end border radius */
   borderRadiusStartEnd?: BorderRadiusTokenScale;
+  /** Border width */
+  borderWidth?: ShapeBorderWidthScale;
+  /** Vertical start border width */
+  borderBlockStartWidth?: ShapeBorderWidthScale;
+  /** Vertical end border width */
+  borderBlockEndWidth?: ShapeBorderWidthScale;
+  /** Horizontal start border width */
+  borderInlineStartWidth?: ShapeBorderWidthScale;
+  /** Horizontal end border width */
+  borderInlineEndWidth?: ShapeBorderWidthScale;
   /** Color of children */
   color?: ColorTokenScale;
   /** HTML id attribute */
@@ -202,6 +166,11 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       borderInlineStart,
       borderInlineEnd,
       borderBlockStart,
+      borderWidth,
+      borderBlockStartWidth,
+      borderBlockEndWidth,
+      borderInlineStartWidth,
+      borderInlineEndWidth,
       borderRadius,
       borderRadiusEndStart,
       borderRadiusEndEnd,
@@ -239,6 +208,13 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       startEnd: borderRadiusStartEnd,
     } as BorderRadius;
 
+    const borderWidths = {
+      blockStart: borderBlockStartWidth,
+      blockEnd: borderBlockEndWidth,
+      inlineStart: borderInlineStartWidth,
+      inlineEnd: borderInlineEndWidth,
+    } as BorderWidth;
+
     const paddings = {
       blockEnd: paddingBlockEnd,
       inlineStart: paddingInlineStart,
@@ -277,6 +253,21 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       '--pc-box-border-radius-start-end': borderRadiuses.startEnd
         ? `var(--p-border-radius-${borderRadiuses.startEnd})`
         : undefined,
+      '--pc-box-border-width': borderWidth
+        ? `var(--p-border-width-${borderWidth})`
+        : undefined,
+      '--pc-box-border-block-start-width': borderWidths.blockStart
+        ? `var(--p-border-width-${borderWidths.blockStart})`
+        : undefined,
+      '--pc-box-border-block-end-width': borderWidths.blockEnd
+        ? `var(--p-border-width-${borderWidths.blockEnd})`
+        : undefined,
+      '--pc-box-border-inline-start-width': borderWidths.inlineStart
+        ? `var(--p-border-width-${borderWidths.inlineStart})`
+        : undefined,
+      '--pc-box-border-inline-end-width': borderWidths.inlineEnd
+        ? `var(--p-border-width-${borderWidths.inlineEnd})`
+        : undefined,
       '--pc-box-min-height': minHeight,
       '--pc-box-min-width': minWidth,
       '--pc-box-max-width': maxWidth,

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

@@ -4,7 +4,7 @@ import type {ColorsTokenName, ShapeTokenName} from '@shopify/polaris-tokens';
 
 import {Box} from '..';
 import type {
-  BackgroundColorTokenScale as BoxBackgroundColorTokenScale,
+  BackgroundColors as BoxBackgroundColorTokenScale,
   ColorTokenScale as BoxColorTokenScale,
   BorderTokenAlias as BoxBorderTokenAlias,
   BorderRadiusTokenScale as BoxBorderRadiusTokenScale,

polaris-tokens/src/index.ts

@@ -13,7 +13,16 @@ export type {
   BreakpointsAlias,
 } from './token-groups/breakpoints';
 
-export type {ColorsTokenGroup, ColorsTokenName} from './token-groups/colors';
+export type {
+  ColorsTokenGroup,
+  ColorsTokenName,
+  ColorsBackgroundTokenAlias,
+  ColorsActionTokenAlias,
+  ColorsSurfaceTokenAlias,
+  ColorsBackdropTokenAlias,
+  ColorsOverlayTokenAlias,
+  ColorsBorderTokenAlias,
+} from './token-groups/colors';
 
 export type {
   DepthTokenGroup,
@@ -43,6 +52,7 @@ export type {
   ShapeTokenName,
   ShapeBorderRadiusScale,
   ShapeBorderRadiusAlias,
+  ShapeBorderWidthScale,
 } from './token-groups/shape';
 
 export type {

polaris-tokens/src/token-groups/colors.ts

@@ -650,3 +650,106 @@ export const colors = {
 
 export type ColorsTokenGroup = TokenGroup<typeof colors>;
 export type ColorsTokenName = keyof ColorsTokenGroup;
+
+export const colorsBackgroundTokenAlias = [
+  'background',
+  'background-hovered',
+  'background-pressed',
+  'background-selected',
+] as const;
+export type ColorsBackgroundTokenAlias =
+  typeof colorsBackgroundTokenAlias[number];
+
+export const colorsActionTokenAlias = [
+  'action-critical',
+  'action-critical-depressed',
+  'action-critical-disabled',
+  'action-critical-hovered',
+  'action-critical-pressed',
+  'action-primary',
+  'action-primary-depressed',
+  'action-primary-disabled',
+  'action-primary-hovered',
+  'action-primary-pressed',
+  'action-secondary',
+  'action-secondary-depressed',
+  'action-secondary-disabled',
+  'action-secondary-hovered',
+  'action-secondary-hovered-dark',
+  'action-secondary-pressed',
+  'action-secondary-pressed-dark',
+] as const;
+export type ColorsActionTokenAlias = typeof colorsActionTokenAlias[number];
+
+export const colorsSurfaceTokenAlias = [
+  'surface',
+  'surface-attention',
+  'surface-critical',
+  'surface-critical-subdued',
+  'surface-critical-subdued-depressed',
+  'surface-critical-subdued-hovered',
+  'surface-critical-subdued-pressed',
+  'surface-dark',
+  'surface-depressed',
+  'surface-disabled',
+  'surface-highlight',
+  'surface-highlight-subdued',
+  'surface-highlight-subdued-hovered',
+  'surface-highlight-subdued-pressed',
+  'surface-hovered',
+  'surface-hovered-dark',
+  'surface-neutral',
+  'surface-neutral-disabled',
+  'surface-neutral-hovered',
+  'surface-neutral-pressed',
+  'surface-neutral-subdued',
+  'surface-neutral-subdued-dark',
+  'surface-pressed',
+  'surface-pressed-dark',
+  'surface-primary-selected',
+  'surface-primary-selected-hovered',
+  'surface-primary-selected-pressed',
+  'surface-search-field',
+  'surface-search-field-dark',
+  'surface-selected',
+  'surface-selected-hovered',
+  'surface-selected-pressed',
+  'surface-subdued',
+  'surface-success',
+  'surface-success-subdued',
+  'surface-success-subdued-hovered',
+  'surface-success-subdued-pressed',
+  'surface-warning',
+  'surface-warning-subdued',
+  'surface-warning-subdued-hovered',
+  'surface-warning-subdued-pressed',
+] as const;
+export type ColorsSurfaceTokenAlias = typeof colorsSurfaceTokenAlias[number];
+
+export const colorsBackdropTokenAlias = ['backdrop'] as const;
+export type ColorsBackdropTokenAlias = typeof colorsBackdropTokenAlias[number];
+
+export const colorsOverlayTokenAlias = ['overlay'] as const;
+export type ColorsOverlayTokenAlias = typeof colorsOverlayTokenAlias[number];
+
+export const colorsBorderTokenAlias = [
+  'border',
+  'border-on-dark',
+  'border-neutral-subdued',
+  'border-hovered',
+  'border-disabled',
+  'border-subdued',
+  'border-depressed',
+  'border-shadow',
+  'border-shadow-subdued',
+  'border-critical',
+  'border-critical-subdued',
+  'border-critical-disabled',
+  'border-warning',
+  'border-warning-subdued',
+  'border-highlight',
+  'border-highlight-subdued',
+  'border-success',
+  'border-success-subdued',
+] as const;
+export type ColorsBorderTokenAlias = typeof colorsBorderTokenAlias[number];