Box API Rework

[zakbutcher]

Motivation

There are too many background colors to support a performant API leveraging booleans to configure which background color to use:

Desired Approach (risk of bad performance at scale)

<Box bg-grey10 />

Traditional Approach (tried & true)

<Box bg="grey-10" />

The Desired Approach is more succinct and reduces the variance in keys use to apply props to a component. This approach scales well for other props such as the bold / strong / emphasis / italics prop combination because there are only a few possible options. Colors consist of 9 shades of 12 colors by default and should be available for use defining the following styles (including, but not limited to):

• background-color
• boder-color
• color
• box-shadow colors

Solution

• Traditional approach to prop naming and definition will be used to support highly configurable props such as those that are defined by colors
• Experimental API may be used for prop configurations with only a dozen possible values or less

[zakbutcher]

Closing PR because alternative approach using boolean API was identified. Approach leverages the naive assumption that only one prop from each boolean group will be provided at a time.

e.g. a dev will not do <Box bg-grey-1 bg-grey-2 /> and if they do, both classNames will be applied and normal CSS specificity & order of declaration rules will apply