Fix: Box component broken responsive props for border radius

[georgewrmarshall]

Description

The responsive props for the borderRadius prop aren't working (and may have never worked mb! 🤦 ). The classNames are added correctly in the html but it seems the sass isn't properly generated. It might be worth adding border radius to ui/css/design-system/attributes.scss something like:

// in ui/css/design-system/attributes.scss

$border-radius: (
  none: 0,
  xs: 2px,
  md: 4px,
  lg: 8px,
  xl: 12px,
  full: 50%,
  pill: 9999px
);

Screencast

Story below has responsive props for borderRadius on all boxes. The classNames are being added to the html but the styles are not being generated

border.radius.broken.mov

While we are at it we should be consistent with pixels. This update should consolidate these values anyway