Feat/13662 box design token updates (#13725)

* Updating Box component and adding dark theme to storybook toolbar

* Updating box props table manually

* Fixing linting issues

* Updating design-tokens to v.1.3.0

* Reverting theme/background changes in .storybook/preview.js so we can use implementation in #13651

* Updating yarn.lock

* Updating titles

ui/components/ui/box/README.mdx

@@ -0,0 +1,124 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import ActionableMessage from '../actionable-message';
+
+import Box from '.';
+
+# Box
+
+Box is a utility component that can be used for layout or as a base for other UI components.
+
+<Canvas>
+  <Story id="ui-components-ui-box-box-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+| Name            | Description                         | Default            |
+| --------------- | ----------------------------------- | ------------------ |
+| children        | node func                           | -                  |
+| flexDirection   | Object.values(FLEX_DIRECTION)       | FLEX_DIRECTION.ROW |
+| flexWrap        | Object.values(FLEX_WRAP)            | -                  |
+| gap             | 1,2,4,6,8                           | -                  |
+| margin          | 1,2,4,6,8 or array of numbers [1,2] | -                  |
+| marginTop       | 1,2,4,6,8                           | -                  |
+| marginBottom    | 1,2,4,6,8                           | -                  |
+| marginRight     | 1,2,4,6,8                           | -                  |
+| marginLeft      | 1,2,4,6,8                           | -                  |
+| padding         | 1,2,4,6,8 or array of numbers [1,2] | -                  |
+| paddingTop      | 1,2,4,6,8                           | -                  |
+| paddingBottom   | 1,2,4,6,8                           | -                  |
+| paddingRight    | 1,2,4,6,8                           | -                  |
+| paddingLeft     | 1,2,4,6,8                           | -                  |
+| borderColor     | Object.values(COLORS)               | -                  |
+| borderWidth     | number                              | -                  |
+| borderRadius    | Object.values(SIZES)                | -                  |
+| borderStyle     | Object.values(BORDER_STYLE)         | -                  |
+| alignItems      | Object.values(ALIGN_ITEMS)          | -                  |
+| justifyContent  | Object.values(JUSTIFY_CONTENT)      | -                  |
+| textAlign       | Object.values(TEXT_ALIGN)           | -                  |
+| display         | Object.values(DISPLAY)              | -                  |
+| width           | Object.values(BLOCK_SIZES)          | -                  |
+| height          | Object.values(BLOCK_SIZES)          | -                  |
+| backgroundColor | Object.values(COLORS)               | -                  |
+| className       | string                              |                    |
+
+## Usage
+
+The following describes the props and example usage for this component.
+
+### Background Color
+
+Use the `backgroundColor` prop along with the `COLORS` object from `ui/helpers/constants/design-system.js` to change background color.
+
+<Canvas>
+  <Story id="ui-components-ui-box-box-stories-js--background-color" />
+</Canvas>
+
+**NOTE**: The `<Box/>` and `<Typography/>` color combinations above follow our design system color rules and should cover most general UI applications. Click "Show code" to see the code example. Do not use the [deprecated colors](#deprecated-colors)
+
+Example of importing `COLORS` object with `Box` component
+
+```jsx
+import { COLORS } from '../../../helpers/constants/design-system';
+import Box from '../ui/box';
+
+<Box backgroundColor={COLORS.BACKGROUND_DEFAULT}>
+  <Typography color={COLORS.TEXT_DEFAULT}>COLORS.BACKGROUND_DEFAULT</Typography>
+</Box>;
+```
+
+### Border Color
+
+Use the `borderColor` prop along with the `COLORS` object from `ui/helpers/constants/design-system.js` to change border color
+
+<Canvas>
+  <Story id="ui-components-ui-box-box-stories-js--border-color" />
+</Canvas>
+
+**NOTE**: The `<Box/>` and `<Typography/>` color combinations above follow our design system color rules and should cover most general UI applications. Click "Show code" to see the code example. Do not use the [deprecated colors](#deprecated-colors)
+
+Example of importing `COLORS` object with `Box` component
+
+```jsx
+import { COLORS } from '../../../helpers/constants/design-system';
+import Box from '../ui/box';
+
+<Box
+  backgroundColor={COLORS.BACKGROUND_DEFAULT}
+  borderColor={COLORS.BORDER_DEFAULT}
+>
+  <Typography color={COLORS.TEXT_DEFAULT}>COLORS.BORDER_DEFAULT</Typography>
+</Box>;
+```
+
+## Deprecated Colors
+
+List of deprecated background and border color props that are not theme compatible and should not be used.
+
+```js
+/** !!! DEPRECATED DO NOT USE!!! */
+UI1: 'ui-1',
+UI2: 'ui-2',
+UI3: 'ui-3',
+UI4: 'ui-4',
+BLACK: 'black',
+GREY: 'grey',
+NEUTRAL_GREY: 'neutral-grey',
+WHITE: 'white',
+PRIMARY1: 'primary-1',
+PRIMARY2: 'primary-2',
+PRIMARY3: 'primary-3',
+SECONDARY1: 'secondary-1',
+SECONDARY2: 'secondary-2',
+SECONDARY3: 'secondary-3',
+SUCCESS1: 'success-1',
+SUCCESS2: 'success-2',
+SUCCESS3: 'success-3',
+ERROR1: 'error-1',
+ERROR2: 'error-2',
+ERROR3: 'error-3',
+ALERT1: 'alert-1',
+ALERT2: 'alert-2',
+ALERT3: 'alert-3',
+```

ui/components/ui/box/box.stories.js

@@ -8,8 +8,12 @@ import {
   JUSTIFY_CONTENT,
   TEXT_ALIGN,
 } from '../../../helpers/constants/design-system';
+
+import Typography from '../typography';
 import Box from './box';
 
+import README from './README.mdx';
+
 const sizeKnobOptions = [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 const marginSizeKnobOptions = [...sizeKnobOptions, 'auto'];
 
@@ -17,6 +21,11 @@ export default {
   title: 'Components/UI/Box',
   id: __filename,
   component: Box,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
   argTypes: {
     size: {
       control: { type: 'range', min: 50, max: 500, step: 10 },
@@ -29,37 +38,50 @@ export default {
       defaultValue: 1,
     },
     display: {
-      options: DISPLAY,
+      options: Object.values(DISPLAY),
       control: 'select',
       defaultValue: DISPLAY.BLOCK,
       table: { category: 'display' },
     },
     width: {
-      options: BLOCK_SIZES,
+      options: Object.values(BLOCK_SIZES),
       control: 'select',
       defaultValue: BLOCK_SIZES.HALF,
       table: { category: 'display' },
     },
     height: {
-      options: BLOCK_SIZES,
+      options: Object.values(BLOCK_SIZES),
       control: 'select',
       defaultValue: BLOCK_SIZES.HALF,
       table: { category: 'display' },
     },
+    backgroundColor: {
+      options: Object.values(COLORS),
+      control: 'select',
+      table: {
+        category: 'background',
+      },
+    },
+    borderColor: {
+      options: Object.values(COLORS),
+      control: 'select',
+      defaultValue: COLORS.BORDER_DEFAULT,
+      table: { category: 'border' },
+    },
     justifyContent: {
-      options: JUSTIFY_CONTENT,
+      options: Object.values(JUSTIFY_CONTENT),
       control: 'select',
       defaultValue: JUSTIFY_CONTENT.FLEX_START,
       table: { category: 'display' },
     },
     alignItems: {
-      options: ALIGN_ITEMS,
+      options: Object.values(ALIGN_ITEMS),
       control: 'select',
       defaultValue: ALIGN_ITEMS.FLEX_START,
       table: { category: 'display' },
     },
     textAlign: {
-      options: TEXT_ALIGN,
+      options: Object.values(TEXT_ALIGN),
       control: 'select',
       defaultValue: TEXT_ALIGN.LEFT,
       table: { category: 'left' },
@@ -115,7 +137,7 @@ export default {
       table: { category: 'padding' },
     },
     borderStyle: {
-      options: BORDER_STYLE,
+      options: Object.values(BORDER_STYLE),
       control: 'select',
       defaultValue: BORDER_STYLE.DASHED,
       table: { category: 'border' },
@@ -126,18 +148,6 @@ export default {
       defaultValue: 1,
       table: { category: 'border' },
     },
-    borderColor: {
-      options: COLORS,
-      control: 'select',
-      defaultValue: COLORS.BLACK,
-      table: { category: 'border' },
-    },
-    backgroundColor: {
-      options: COLORS,
-      defaultValue: COLORS.WHITE,
-      control: 'select',
-      table: { category: 'background' },
-    },
   },
 };
 
@@ -153,3 +163,141 @@ export const DefaultStory = (args) => {
 };
 
 DefaultStory.storyName = 'Default';
+
+export const BackgroundColor = () => {
+  return (
+    <>
+      <Box padding={3} backgroundColor={COLORS.BACKGROUND_DEFAULT}>
+        <Typography color={COLORS.TEXT_DEFAULT}>
+          COLORS.BACKGROUND_DEFAULT
+        </Typography>
+      </Box>
+      <Box padding={3} backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}>
+        <Typography color={COLORS.TEXT_DEFAULT}>
+          COLORS.BACKGROUND_ALTERNATIVE
+        </Typography>
+      </Box>
+      <Box padding={3} backgroundColor={COLORS.OVERLAY_DEFAULT}>
+        <Typography color={COLORS.OVERLAY_INVERSE}>
+          COLORS.OVERLAY_DEFAULT
+        </Typography>
+      </Box>
+      <Box padding={3} backgroundColor={COLORS.PRIMARY_DEFAULT}>
+        <Typography color={COLORS.PRIMARY_INVERSE}>
+          COLORS.PRIMARY_DEFAULT
+        </Typography>
+      </Box>
+      <Box padding={3} backgroundColor={COLORS.PRIMARY_MUTED}>
+        <Typography color={COLORS.TEXT_DEFAULT}>
+          COLORS.PRIMARY_MUTED
+        </Typography>
+      </Box>
+      <Box padding={3} backgroundColor={COLORS.SECONDARY_DEFAULT}>
+        <Typography color={COLORS.SECONDARY_INVERSE}>
+          COLORS.SECONDARY_DEFAULT
+        </Typography>
+      </Box>
+      <Box padding={3} backgroundColor={COLORS.SECONDARY_MUTED}>
+        <Typography color={COLORS.TEXT_DEFAULT}>
+          COLORS.SECONDARY_MUTED
+        </Typography>
+      </Box>
+      <Box padding={3} backgroundColor={COLORS.ERROR_DEFAULT}>
+        <Typography color={COLORS.ERROR_INVERSE}>
+          COLORS.ERROR_DEFAULT
+        </Typography>
+      </Box>
+      <Box padding={3} backgroundColor={COLORS.ERROR_MUTED}>
+        <Typography color={COLORS.TEXT_DEFAULT}>COLORS.ERROR_MUTED</Typography>
+      </Box>
+      <Box padding={3} backgroundColor={COLORS.SUCCESS_DEFAULT}>
+        <Typography color={COLORS.SUCCESS_INVERSE}>
+          COLORS.SUCCESS_DEFAULT
+        </Typography>
+      </Box>
+      <Box padding={3} backgroundColor={COLORS.SUCCESS_MUTED}>
+        <Typography color={COLORS.TEXT_DEFAULT}>
+          COLORS.SUCCESS_MUTED
+        </Typography>
+      </Box>
+      <Box padding={3} backgroundColor={COLORS.WARNING_DEFAULT}>
+        <Typography color={COLORS.WARNING_INVERSE}>
+          COLORS.WARNING_DEFAULT
+        </Typography>
+      </Box>
+      <Box padding={3} backgroundColor={COLORS.WARNING_MUTED}>
+        <Typography color={COLORS.TEXT_DEFAULT}>
+          COLORS.WARNING_MUTED
+        </Typography>
+      </Box>
+    </>
+  );
+};
+
+export const BorderColor = () => {
+  return (
+    <>
+      <Box
+        padding={3}
+        backgroundColor={COLORS.BACKGROUND_DEFAULT}
+        borderColor={COLORS.BORDER_DEFAULT}
+      >
+        <Typography color={COLORS.TEXT_DEFAULT}>
+          COLORS.BORDER_DEFAULT
+        </Typography>
+      </Box>
+      <Box
+        padding={3}
+        backgroundColor={COLORS.BACKGROUND_DEFAULT}
+        borderColor={COLORS.BORDER_MUTED}
+      >
+        <Typography color={COLORS.TEXT_DEFAULT}>COLORS.BORDER_MUTED</Typography>
+      </Box>
+      <Box
+        padding={3}
+        borderColor={COLORS.PRIMARY_DEFAULT}
+        backgroundColor={COLORS.PRIMARY_MUTED}
+      >
+        <Typography color={COLORS.TEXT_DEFAULT}>
+          COLORS.PRIMARY_DEFAULT
+        </Typography>
+      </Box>
+      <Box
+        padding={3}
+        backgroundColor={COLORS.SECONDARY_MUTED}
+        borderColor={COLORS.SECONDARY_DEFAULT}
+      >
+        <Typography color={COLORS.TEXT_DEFAULT}>
+          COLORS.SECONDARY_DEFAULT
+        </Typography>
+      </Box>
+      <Box
+        padding={3}
+        backgroundColor={COLORS.ERROR_MUTED}
+        borderColor={COLORS.ERROR_DEFAULT}
+      >
+        <Typography color={COLORS.TEXT_DEFAULT}>
+          COLORS.ERROR_DEFAULT
+        </Typography>
+      </Box>
+      <Box
+        padding={3}
+        backgroundColor={COLORS.SUCCESS_MUTED}
+        borderColor={COLORS.SUCCESS_DEFAULT}
+      >
+        <Typography color={COLORS.TEXT_DEFAULT}>
+          COLORS.SUCCESS_DEFAULT
+        </Typography>
+      </Box>
+      <Box
+        padding={3}
+        backgroundColor={COLORS.WARNING_MUTED}
+        borderColor={COLORS.WARNING_DEFAULT}
+      >
+        <Typography color={COLORS.TEXT_DEFAULT}>
+          COLORS.WARNING_DEFAULT
+        </Typography>
+      </Box>
+    </>
+  );
+};

ui/css/design-system/colors.scss

@@ -1,4 +1,56 @@
 $color-map: (
+  'background-default': --color-background-default,
+  'background-alternative': --color-background-alternative,
+  'text-default': --color-text-default,
+  'text-alternative': --color-text-alternative,
+  'text-muted': --color-text-muted,
+  'icon-default': --color-icon-default,
+  'icon-muted': --color-icon-muted,
+  'border-default': --color-border-default,
+  'border-muted': --color-border-muted,
+  'overlay-default': --color-overlay-default,
+  'overlay-inverse': --color-overlay-inverse,
+  'primary-default': --color-primary-default,
+  'primary-alternative': --color-primary-alternative,
+  'primary-muted': --color-primary-muted,
+  'primary-inverse': --color-primary-inverse,
+  'primary-disabled': --color-primary-disabled,
+  'secondary-default': --color-secondary-default,
+  'secondary-alternative': --color-secondary-alternative,
+  'secondary-muted': --color-secondary-muted,
+  'secondary-inverse': --color-secondary-inverse,
+  'secondary-disabled': --color-secondary-disabled,
+  'error-default': --color-error-default,
+  'error-alternative': --color-error-alternative,
+  'error-muted': --color-error-muted,
+  'error-inverse': --color-error-inverse,
+  'error-disabled': --color-error-disabled,
+  'warning-default': --color-warning-default,
+  'warning-alternative': --color-warning-alternative,
+  'warning-muted': --color-warning-muted,
+  'warning-inverse': --color-warning-inverse,
+  'warning-disabled': --color-warning-disabled,
+  'success-default': --color-success-default,
+  'success-alternative': --color-success-alternative,
+  'success-muted': --color-success-muted,
+  'success-inverse': --color-success-inverse,
+  'success-disabled': --color-success-disabled,
+  'info-default': --color-info-default,
+  'info-alternative': --color-info-alternative,
+  'info-muted': --color-info-muted,
+  'info-inverse': --color-info-inverse,
+  'info-disabled': --color-info-disabled,
+  'mainnet': --mainnet,
+  'ropsten': --ropsten,
+  'kovan': --kovan,
+  'rinkeby': --rinkeby,
+  'goerli': --goerli,
+  'localhost': --localhost,
+  'transparent': transparent,
+  'flask-purple': --flask-purple,
+  /**
+  * !!! DEPRECATED DO NOT USE!!!
+  */
   'ui-1': --ui-1,
   'ui-2': --ui-2,
   'ui-3': --ui-3,
@@ -22,13 +74,5 @@ $color-map: (
   'error-3': --error-3,
   'success-1': --success-1,
   'success-2': --success-2,
-  'success-3': --success-3,
+  'success-3': --success-3
-  'mainnet': --mainnet,
-  'ropsten': --ropsten,
-  'kovan': --kovan,
-  'rinkeby': --rinkeby,
-  'goerli': --goerli,
-  'localhost': --localhost,
-  'transparent': transparent,
-  'flask-purple': --flask-purple
 );

ui/helpers/constants/design-system.js

@@ -5,6 +5,57 @@
  * match the plural form of the thing. e.g. COLORS, TYPOGRAPHY
  */
 export const COLORS = {
+  BACKGROUND_DEFAULT: 'background-default',
+  BACKGROUND_ALTERNATIVE: 'background-alternative',
+  TEXT_DEFAULT: 'text-default',
+  TEXT_ALTERNATIVE: 'text-alternative',
+  TEXT_MUTED: 'text-muted',
+  ICON_DEFAULT: 'icon-default',
+  ICON_MUTED: 'icon-muted',
+  BORDER_DEFAULT: 'border-default',
+  BORDER_MUTED: 'border-muted',
+  OVERLAY_DEFAULT: 'overlay-default',
+  OVERLAY_INVERSE: 'overlay-inverse',
+  PRIMARY_DEFAULT: 'primary-default',
+  PRIMARY_ALTERNATIVE: 'primary-alternative',
+  PRIMARY_MUTED: 'primary-muted',
+  PRIMARY_INVERSE: 'primary-inverse',
+  PRIMARY_DISABLED: 'primary-disabled',
+  SECONDARY_DEFAULT: 'secondary-default',
+  SECONDARY_ALTERNATIVE: 'secondary-alternative',
+  SECONDARY_MUTED: 'secondary-muted',
+  SECONDARY_INVERSE: 'secondary-inverse',
+  SECONDARY_DISABLED: 'secondary-disabled',
+  ERROR_DEFAULT: 'error-default',
+  ERROR_ALTERNATIVE: 'error-alternative',
+  ERROR_MUTED: 'error-muted',
+  ERROR_INVERSE: 'error-inverse',
+  ERROR_DISABLED: 'error-disabled',
+  WARNING_DEFAULT: 'warning-default',
+  WARNING_ALTERNATIVE: 'warning-alternative',
+  WARNING_MUTED: 'warning-muted',
+  WARNING_INVERSE: 'warning-inverse',
+  WARNING_DISABLED: 'warning-disabled',
+  SUCCESS_DEFAULT: 'success-default',
+  SUCCESS_ALTERNATIVE: 'success-alternative',
+  SUCCESS_MUTED: 'success-muted',
+  SUCCESS_INVERSE: 'success-inverse',
+  SUCCESS_DISABLED: 'success-disabled',
+  INFO_DEFAULT: 'info-default',
+  INFO_ALTERNATIVE: 'info-alternative',
+  INFO_MUTED: 'info-muted',
+  INFO_INVERSE: 'info-inverse',
+  INFO_DISABLED: 'info-disabled',
+  MAINNET: 'mainnet',
+  ROPSTEN: 'ropsten',
+  KOVAN: 'kovan',
+  RINKEBY: 'rinkeby',
+  GOERLI: 'goerli',
+  TRANSPARENT: 'transparent',
+  LOCALHOST: 'localhost',
+  /**
+   * !!! DEPRECATED DO NOT USE!!!
+   */
   UI1: 'ui-1',
   UI2: 'ui-2',
   UI3: 'ui-3',
@@ -28,13 +79,6 @@ export const COLORS = {
   ALERT1: 'alert-1',
   ALERT2: 'alert-2',
   ALERT3: 'alert-3',
-  MAINNET: 'mainnet',
-  ROPSTEN: 'ropsten',
-  KOVAN: 'kovan',
-  RINKEBY: 'rinkeby',
-  GOERLI: 'goerli',
-  TRANSPARENT: 'transparent',
-  LOCALHOST: 'localhost',
 };
 
 export const TYPOGRAPHY = {