@artsy/palette 41.0.0-canary.1423.31650.0 → 41.0.0-canary.1433.31866.0

package/dist/elements/Button/tokens.js

@@ -15,97 +15,97 @@ var DEFAULT_PRIMARY_STATES = {
   focus: {
     backgroundColor: "blue100",
     borderColor: "blue100",
-    color: "white100",
+    color: "mono0",
     textDecoration: "underline"
   },
   hover: {
     backgroundColor: "blue100",
     borderColor: "blue100",
-    color: "white100",
+    color: "mono0",
     textDecoration: "underline"
   },
   active: {
     backgroundColor: "blue150",
     borderColor: "blue150",
-    color: "white100",
+    color: "mono0",
     textDecoration: "underline"
   },
   loading: {
     backgroundColor: "blue100",
     borderColor: "blue100",
-    color: "white100"
+    color: "mono0"
   },
   disabled: {
-    backgroundColor: "black30",
-    borderColor: "black30",
-    color: "white100"
+    backgroundColor: "mono30",
+    borderColor: "mono30",
+    color: "mono0"
   },
   success: {
     backgroundColor: "blue100",
     borderColor: "blue100",
-    color: "white100"
+    color: "mono0"
   }
 };
 var DEFAULT_SECONDARY_STATES = _objectSpread(_objectSpread({}, DEFAULT_PRIMARY_STATES), {}, {
   disabled: {
     backgroundColor: "transparent",
-    borderColor: "black30",
-    color: "black30"
+    borderColor: "mono30",
+    color: "mono30"
   }
 });
 var BUTTON_STYLES = {
   primaryBlack: _objectSpread({
     default: {
-      backgroundColor: "black100",
-      borderColor: "black100",
-      color: "white100"
+      backgroundColor: "mono100",
+      borderColor: "mono100",
+      color: "mono0"
     }
   }, DEFAULT_PRIMARY_STATES),
   primaryWhite: _objectSpread({
     default: {
-      backgroundColor: "white100",
-      borderColor: "white100",
-      color: "black100"
+      backgroundColor: "mono0",
+      borderColor: "mono0",
+      color: "mono100"
     }
   }, DEFAULT_PRIMARY_STATES),
   primaryBlue: _objectSpread(_objectSpread({
     default: {
       backgroundColor: "blue100",
       borderColor: "blue100",
-      color: "white100"
+      color: "mono0"
     }
   }, DEFAULT_PRIMARY_STATES), {}, {
     focus: {
       backgroundColor: "blue150",
       borderColor: "blue150",
-      color: "white100",
+      color: "mono0",
       textDecoration: "underline"
     },
     hover: {
       backgroundColor: "blue150",
       borderColor: "blue150",
-      color: "white100",
+      color: "mono0",
       textDecoration: "underline"
     },
     active: {
       backgroundColor: "blue200",
       borderColor: "blue200",
-      color: "white100",
+      color: "mono0",
       textDecoration: "underline"
     }
   }),
   primaryGray: _objectSpread({
     default: {
-      backgroundColor: "black10",
-      borderColor: "black10",
-      color: "black100"
+      backgroundColor: "mono10",
+      borderColor: "mono10",
+      color: "mono100"
     }
   }, DEFAULT_PRIMARY_STATES),
   secondaryBlack: _objectSpread({
     default: {
       backgroundColor: "transparent",
-      borderColor: "black100",
-      color: "black100"
+      borderColor: "mono100",
+      color: "mono100"
     }
   }, DEFAULT_SECONDARY_STATES),
   secondaryBlue: _objectSpread({
@@ -118,52 +118,52 @@ var BUTTON_STYLES = {
   secondaryWhite: _objectSpread({
     default: {
       backgroundColor: "transparent",
-      borderColor: "white100",
-      color: "white100"
+      borderColor: "mono0",
+      color: "mono0"
     }
   }, DEFAULT_SECONDARY_STATES),
   /** Used for follow buttons */
   secondaryNeutral: _objectSpread(_objectSpread({
     default: {
       backgroundColor: "transparent",
-      borderColor: "black100",
-      color: "black100"
+      borderColor: "mono100",
+      color: "mono100"
     }
   }, DEFAULT_SECONDARY_STATES), {}, {
     focus: {
-      backgroundColor: "black10",
-      borderColor: "black10",
-      color: "black100",
+      backgroundColor: "mono10",
+      borderColor: "mono10",
+      color: "mono100",
       textDecoration: "underline"
     },
     hover: {
-      backgroundColor: "black100",
-      borderColor: "black100",
-      color: "white100",
+      backgroundColor: "mono100",
+      borderColor: "mono100",
+      color: "mono0",
       textDecoration: "underline"
     },
     active: {
-      backgroundColor: "black100",
-      borderColor: "black100",
-      color: "white100",
+      backgroundColor: "mono100",
+      borderColor: "mono100",
+      color: "mono0",
       textDecoration: "underline"
     },
     loading: {
-      backgroundColor: "black100",
-      borderColor: "black100",
-      color: "white100"
+      backgroundColor: "mono100",
+      borderColor: "mono100",
+      color: "mono0"
     },
     success: {
       backgroundColor: "transparent",
-      borderColor: "black100",
-      color: "black100"
+      borderColor: "mono100",
+      color: "mono100"
     }
   }),
   tertiary: {
     default: {
       backgroundColor: "transparent",
       borderColor: "transparent",
-      color: "black100"
+      color: "mono100"
     },
     focus: {
       backgroundColor: "blue10",
@@ -191,7 +191,7 @@ var BUTTON_STYLES = {
     disabled: {
       backgroundColor: "transparent",
       borderColor: "transparent",
-      color: "black30"
+      color: "mono30"
     },
     success: {
       backgroundColor: "transparent",

package/dist/elements/Button/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":["_types","require","_typeof","obj","Symbol","iterator","constructor","prototype","ownKeys","object","enumerableOnly","keys","Object","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","key","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","toPrimitive","undefined","res","call","TypeError","Number","DEFAULT_PRIMARY_STATES","focus","backgroundColor","borderColor","color","textDecoration","hover","active","loading","disabled","success","DEFAULT_SECONDARY_STATES","BUTTON_STYLES","primaryBlack","default","primaryWhite","primaryBlue","primaryGray","secondaryBlack","secondaryBlue","secondaryWhite","secondaryNeutral","tertiary","exports","BUTTON_VARIANTS","BUTTON_STATES","reduce","variantsMemo","state","BUTTON_VARIANT_NAMES","stateMemo","variant","BUTTON_SIZES","small","height","borderRadius","px","large","BUTTON_TEXT_SIZES"],"sources":["../../../src/elements/Button/tokens.ts"],"sourcesContent":["import { BUTTON_STATES, BUTTON_VARIANT_NAMES } from \"./types\"\nimport { TextProps } from \"../Text\"\nimport { ButtonSize, ButtonState, ButtonVariant } from \"./types\"\n\nconst DEFAULT_PRIMARY_STATES = {\n  focus: {\n    backgroundColor: \"blue100\",\n    borderColor: \"blue100\",\n    color: \"white100\",\n    textDecoration: \"underline\",\n  },\n  hover: {\n    backgroundColor: \"blue100\",\n    borderColor: \"blue100\",\n    color: \"white100\",\n    textDecoration: \"underline\",\n  },\n  active: {\n    backgroundColor: \"blue150\",\n    borderColor: \"blue150\",\n    color: \"white100\",\n    textDecoration: \"underline\",\n  },\n  loading: {\n    backgroundColor: \"blue100\",\n    borderColor: \"blue100\",\n    color: \"white100\",\n  },\n  disabled: {\n    backgroundColor: \"black30\",\n    borderColor: \"black30\",\n    color: \"white100\",\n  },\n  success: {\n    backgroundColor: \"blue100\",\n    borderColor: \"blue100\",\n    color: \"white100\",\n  },\n}\n\nconst DEFAULT_SECONDARY_STATES = {\n  ...DEFAULT_PRIMARY_STATES,\n  disabled: {\n    backgroundColor: \"transparent\",\n    borderColor: \"black30\",\n    color: \"black30\",\n  },\n}\n\nexport const BUTTON_STYLES: Record<ButtonVariant, Record<ButtonState, any>> = {\n  primaryBlack: {\n    default: {\n      backgroundColor: \"black100\",\n      borderColor: \"black100\",\n      color: \"white100\",\n    },\n    ...DEFAULT_PRIMARY_STATES,\n  },\n\n  primaryWhite: {\n    default: {\n      backgroundColor: \"white100\",\n      borderColor: \"white100\",\n      color: \"black100\",\n    },\n    ...DEFAULT_PRIMARY_STATES,\n  },\n\n  primaryBlue: {\n    default: {\n      backgroundColor: \"blue100\",\n      borderColor: \"blue100\",\n      color: \"white100\",\n    },\n    ...DEFAULT_PRIMARY_STATES,\n    focus: {\n      backgroundColor: \"blue150\",\n      borderColor: \"blue150\",\n      color: \"white100\",\n      textDecoration: \"underline\",\n    },\n    hover: {\n      backgroundColor: \"blue150\",\n      borderColor: \"blue150\",\n      color: \"white100\",\n      textDecoration: \"underline\",\n    },\n    active: {\n      backgroundColor: \"blue200\",\n      borderColor: \"blue200\",\n      color: \"white100\",\n      textDecoration: \"underline\",\n    },\n  },\n\n  primaryGray: {\n    default: {\n      backgroundColor: \"black10\",\n      borderColor: \"black10\",\n      color: \"black100\",\n    },\n    ...DEFAULT_PRIMARY_STATES,\n  },\n\n  secondaryBlack: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"black100\",\n      color: \"black100\",\n    },\n    ...DEFAULT_SECONDARY_STATES,\n  },\n\n  secondaryBlue: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"blue100\",\n      color: \"blue100\",\n    },\n    ...DEFAULT_SECONDARY_STATES,\n  },\n\n  secondaryWhite: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"white100\",\n      color: \"white100\",\n    },\n    ...DEFAULT_SECONDARY_STATES,\n  },\n\n  /** Used for follow buttons */\n  secondaryNeutral: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"black100\",\n      color: \"black100\",\n    },\n    ...DEFAULT_SECONDARY_STATES,\n    focus: {\n      backgroundColor: \"black10\",\n      borderColor: \"black10\",\n      color: \"black100\",\n      textDecoration: \"underline\",\n    },\n    hover: {\n      backgroundColor: \"black100\",\n      borderColor: \"black100\",\n      color: \"white100\",\n      textDecoration: \"underline\",\n    },\n    active: {\n      backgroundColor: \"black100\",\n      borderColor: \"black100\",\n      color: \"white100\",\n      textDecoration: \"underline\",\n    },\n    loading: {\n      backgroundColor: \"black100\",\n      borderColor: \"black100\",\n      color: \"white100\",\n    },\n    success: {\n      backgroundColor: \"transparent\",\n      borderColor: \"black100\",\n      color: \"black100\",\n    },\n  },\n\n  tertiary: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n      color: \"black100\",\n    },\n    focus: {\n      backgroundColor: \"blue10\",\n      borderColor: \"blue10\",\n      color: \"blue100\",\n      textDecoration: \"underline\",\n    },\n    hover: {\n      backgroundColor: \"blue10\",\n      borderColor: \"blue10\",\n      color: \"blue100\",\n      textDecoration: \"underline\",\n    },\n    active: {\n      backgroundColor: \"blue15\",\n      borderColor: \"blue15\",\n      color: \"blue100\",\n      textDecoration: \"underline\",\n    },\n    loading: {\n      backgroundColor: \"blue10\",\n      borderColor: \"blue10\",\n      color: \"blue100\",\n    },\n    disabled: {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n      color: \"black30\",\n    },\n    success: {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n      color: \"blue100\",\n    },\n  },\n}\n\ntype ButtonVariants = Record<ButtonState, Record<ButtonVariant, any>>\n\n/** Inverts the structure of the style object so that we can use responsive values for `variant` */\nexport const BUTTON_VARIANTS: ButtonVariants = BUTTON_STATES.reduce(\n  (variantsMemo, state) => {\n    return {\n      ...variantsMemo,\n      [state]: BUTTON_VARIANT_NAMES.reduce((stateMemo, variant) => {\n        return {\n          ...stateMemo,\n          [variant]: BUTTON_STYLES[variant][state],\n        }\n      }, {}),\n    }\n  },\n  {} as ButtonVariants\n)\n\n/** Available button sizes */\nexport const BUTTON_SIZES = {\n  small: {\n    height: \"30px\",\n    borderRadius: \"15px\",\n    px: \"25px\",\n  },\n  large: {\n    height: \"50px\",\n    borderRadius: \"25px\",\n    px: \"25px\",\n  },\n} as const\n\n/** Text sizes associated with available button sizes */\nexport const BUTTON_TEXT_SIZES: Record<ButtonSize, TextProps[\"variant\"]> = {\n  small: \"xs\",\n  large: \"sm-display\",\n}\n"],"mappings":"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"}
+{"version":3,"file":"tokens.js","names":["_types","require","_typeof","obj","Symbol","iterator","constructor","prototype","ownKeys","object","enumerableOnly","keys","Object","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","key","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","toPrimitive","undefined","res","call","TypeError","Number","DEFAULT_PRIMARY_STATES","focus","backgroundColor","borderColor","color","textDecoration","hover","active","loading","disabled","success","DEFAULT_SECONDARY_STATES","BUTTON_STYLES","primaryBlack","default","primaryWhite","primaryBlue","primaryGray","secondaryBlack","secondaryBlue","secondaryWhite","secondaryNeutral","tertiary","exports","BUTTON_VARIANTS","BUTTON_STATES","reduce","variantsMemo","state","BUTTON_VARIANT_NAMES","stateMemo","variant","BUTTON_SIZES","small","height","borderRadius","px","large","BUTTON_TEXT_SIZES"],"sources":["../../../src/elements/Button/tokens.ts"],"sourcesContent":["import { BUTTON_STATES, BUTTON_VARIANT_NAMES } from \"./types\"\nimport { TextProps } from \"../Text\"\nimport { ButtonSize, ButtonState, ButtonVariant } from \"./types\"\n\nconst DEFAULT_PRIMARY_STATES = {\n  focus: {\n    backgroundColor: \"blue100\",\n    borderColor: \"blue100\",\n    color: \"mono0\",\n    textDecoration: \"underline\",\n  },\n  hover: {\n    backgroundColor: \"blue100\",\n    borderColor: \"blue100\",\n    color: \"mono0\",\n    textDecoration: \"underline\",\n  },\n  active: {\n    backgroundColor: \"blue150\",\n    borderColor: \"blue150\",\n    color: \"mono0\",\n    textDecoration: \"underline\",\n  },\n  loading: {\n    backgroundColor: \"blue100\",\n    borderColor: \"blue100\",\n    color: \"mono0\",\n  },\n  disabled: {\n    backgroundColor: \"mono30\",\n    borderColor: \"mono30\",\n    color: \"mono0\",\n  },\n  success: {\n    backgroundColor: \"blue100\",\n    borderColor: \"blue100\",\n    color: \"mono0\",\n  },\n}\n\nconst DEFAULT_SECONDARY_STATES = {\n  ...DEFAULT_PRIMARY_STATES,\n  disabled: {\n    backgroundColor: \"transparent\",\n    borderColor: \"mono30\",\n    color: \"mono30\",\n  },\n}\n\nexport const BUTTON_STYLES: Record<ButtonVariant, Record<ButtonState, any>> = {\n  primaryBlack: {\n    default: {\n      backgroundColor: \"mono100\",\n      borderColor: \"mono100\",\n      color: \"mono0\",\n    },\n    ...DEFAULT_PRIMARY_STATES,\n  },\n\n  primaryWhite: {\n    default: {\n      backgroundColor: \"mono0\",\n      borderColor: \"mono0\",\n      color: \"mono100\",\n    },\n    ...DEFAULT_PRIMARY_STATES,\n  },\n\n  primaryBlue: {\n    default: {\n      backgroundColor: \"blue100\",\n      borderColor: \"blue100\",\n      color: \"mono0\",\n    },\n    ...DEFAULT_PRIMARY_STATES,\n    focus: {\n      backgroundColor: \"blue150\",\n      borderColor: \"blue150\",\n      color: \"mono0\",\n      textDecoration: \"underline\",\n    },\n    hover: {\n      backgroundColor: \"blue150\",\n      borderColor: \"blue150\",\n      color: \"mono0\",\n      textDecoration: \"underline\",\n    },\n    active: {\n      backgroundColor: \"blue200\",\n      borderColor: \"blue200\",\n      color: \"mono0\",\n      textDecoration: \"underline\",\n    },\n  },\n\n  primaryGray: {\n    default: {\n      backgroundColor: \"mono10\",\n      borderColor: \"mono10\",\n      color: \"mono100\",\n    },\n    ...DEFAULT_PRIMARY_STATES,\n  },\n\n  secondaryBlack: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"mono100\",\n      color: \"mono100\",\n    },\n    ...DEFAULT_SECONDARY_STATES,\n  },\n\n  secondaryBlue: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"blue100\",\n      color: \"blue100\",\n    },\n    ...DEFAULT_SECONDARY_STATES,\n  },\n\n  secondaryWhite: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"mono0\",\n      color: \"mono0\",\n    },\n    ...DEFAULT_SECONDARY_STATES,\n  },\n\n  /** Used for follow buttons */\n  secondaryNeutral: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"mono100\",\n      color: \"mono100\",\n    },\n    ...DEFAULT_SECONDARY_STATES,\n    focus: {\n      backgroundColor: \"mono10\",\n      borderColor: \"mono10\",\n      color: \"mono100\",\n      textDecoration: \"underline\",\n    },\n    hover: {\n      backgroundColor: \"mono100\",\n      borderColor: \"mono100\",\n      color: \"mono0\",\n      textDecoration: \"underline\",\n    },\n    active: {\n      backgroundColor: \"mono100\",\n      borderColor: \"mono100\",\n      color: \"mono0\",\n      textDecoration: \"underline\",\n    },\n    loading: {\n      backgroundColor: \"mono100\",\n      borderColor: \"mono100\",\n      color: \"mono0\",\n    },\n    success: {\n      backgroundColor: \"transparent\",\n      borderColor: \"mono100\",\n      color: \"mono100\",\n    },\n  },\n\n  tertiary: {\n    default: {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n      color: \"mono100\",\n    },\n    focus: {\n      backgroundColor: \"blue10\",\n      borderColor: \"blue10\",\n      color: \"blue100\",\n      textDecoration: \"underline\",\n    },\n    hover: {\n      backgroundColor: \"blue10\",\n      borderColor: \"blue10\",\n      color: \"blue100\",\n      textDecoration: \"underline\",\n    },\n    active: {\n      backgroundColor: \"blue15\",\n      borderColor: \"blue15\",\n      color: \"blue100\",\n      textDecoration: \"underline\",\n    },\n    loading: {\n      backgroundColor: \"blue10\",\n      borderColor: \"blue10\",\n      color: \"blue100\",\n    },\n    disabled: {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n      color: \"mono30\",\n    },\n    success: {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n      color: \"blue100\",\n    },\n  },\n}\n\ntype ButtonVariants = Record<ButtonState, Record<ButtonVariant, any>>\n\n/** Inverts the structure of the style object so that we can use responsive values for `variant` */\nexport const BUTTON_VARIANTS: ButtonVariants = BUTTON_STATES.reduce(\n  (variantsMemo, state) => {\n    return {\n      ...variantsMemo,\n      [state]: BUTTON_VARIANT_NAMES.reduce((stateMemo, variant) => {\n        return {\n          ...stateMemo,\n          [variant]: BUTTON_STYLES[variant][state],\n        }\n      }, {}),\n    }\n  },\n  {} as ButtonVariants\n)\n\n/** Available button sizes */\nexport const BUTTON_SIZES = {\n  small: {\n    height: \"30px\",\n    borderRadius: \"15px\",\n    px: \"25px\",\n  },\n  large: {\n    height: \"50px\",\n    borderRadius: \"25px\",\n    px: \"25px\",\n  },\n} as const\n\n/** Text sizes associated with available button sizes */\nexport const BUTTON_TEXT_SIZES: Record<ButtonSize, TextProps[\"variant\"]> = {\n  small: \"xs\",\n  large: \"sm-display\",\n}\n"],"mappings":"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"}

package/dist/elements/Cards/Card.js

@@ -67,13 +67,13 @@ var Card = function Card(_ref) {
     }
   }, status && /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "xs",
-    color: "white100"
+    color: "mono0"
   }, status), title && /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "sm-display",
-    color: "white100"
+    color: "mono0"
   }, title), subtitle && /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "sm-display",
-    color: "black15"
+    color: "mono15"
   }, subtitle))));
 };
 exports.Card = Card;

package/dist/elements/Cards/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["_react","_interopRequireDefault","require","_Image","_Box","_Text","_ResponsiveBox","_Theme","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Card","_ref","image","title","subtitle","status","_ref$maxWidth","maxWidth","_ref$aspectWidth","aspectWidth","_ref$aspectHeight","aspectHeight","rest","_useTheme","useTheme","theme","hasInfo","createElement","Box","ResponsiveBox","Image","alt","height","width","style","objectFit","src","position","bottom","left","background","effects","overlayGradient","p","textShadow","Text","variant","color","exports","displayName"],"sources":["../../../src/elements/Cards/Card.tsx"],"sourcesContent":["import React from \"react\"\nimport { Image, ImageProps } from \"../Image\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { ResponsiveBox } from \"../ResponsiveBox\"\nimport { useTheme } from \"../../Theme\"\n\nexport interface CardProps extends BoxProps {\n  image: string | ImageProps | null | undefined\n  title?: string | null\n  subtitle?: string | null\n  status?: string | null\n  aspectWidth?: number\n  aspectHeight?: number\n}\n\n/**\n * `Card` is a card with one image one tall image, and text for title\n * and subtitle at the bottom.\n */\nexport const Card: React.FC<React.PropsWithChildren<CardProps>> = ({\n  image,\n  title,\n  subtitle,\n  status,\n  maxWidth = 280,\n  aspectWidth = 280,\n  aspectHeight = 370,\n  ...rest\n}) => {\n  const { theme } = useTheme()\n\n  const hasInfo = title || subtitle || status\n\n  return (\n    <Box maxWidth={maxWidth} {...rest}>\n      <ResponsiveBox\n        aspectWidth={aspectWidth}\n        aspectHeight={aspectHeight}\n        maxWidth=\"100%\"\n      >\n        <Image\n          alt=\"\"\n          height=\"100%\"\n          width=\"100%\"\n          style={{ objectFit: \"cover\" }}\n          {...(typeof image === \"string\" ? { src: image } : image)}\n        />\n\n        {hasInfo && (\n          <Box\n            position=\"absolute\"\n            width=\"100%\"\n            height=\"50%\"\n            bottom={0}\n            left={0}\n            background={theme.effects.overlayGradient}\n          />\n        )}\n\n        <Box\n          position=\"absolute\"\n          bottom={0}\n          left={0}\n          width=\"100%\"\n          p={2}\n          style={{ textShadow: theme.effects.textShadow }}\n        >\n          {status && (\n            <Text variant=\"xs\" color=\"white100\">\n              {status}\n            </Text>\n          )}\n\n          {title && (\n            <Text variant=\"sm-display\" color=\"white100\">\n              {title}\n            </Text>\n          )}\n\n          {subtitle && (\n            <Text variant=\"sm-display\" color=\"black15\">\n              {subtitle}\n            </Text>\n          )}\n        </Box>\n      </ResponsiveBox>\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Card.js","names":["_react","_interopRequireDefault","require","_Image","_Box","_Text","_ResponsiveBox","_Theme","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Card","_ref","image","title","subtitle","status","_ref$maxWidth","maxWidth","_ref$aspectWidth","aspectWidth","_ref$aspectHeight","aspectHeight","rest","_useTheme","useTheme","theme","hasInfo","createElement","Box","ResponsiveBox","Image","alt","height","width","style","objectFit","src","position","bottom","left","background","effects","overlayGradient","p","textShadow","Text","variant","color","exports","displayName"],"sources":["../../../src/elements/Cards/Card.tsx"],"sourcesContent":["import React from \"react\"\nimport { Image, ImageProps } from \"../Image\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { ResponsiveBox } from \"../ResponsiveBox\"\nimport { useTheme } from \"../../Theme\"\n\nexport interface CardProps extends BoxProps {\n  image: string | ImageProps | null | undefined\n  title?: string | null\n  subtitle?: string | null\n  status?: string | null\n  aspectWidth?: number\n  aspectHeight?: number\n}\n\n/**\n * `Card` is a card with one image one tall image, and text for title\n * and subtitle at the bottom.\n */\nexport const Card: React.FC<React.PropsWithChildren<CardProps>> = ({\n  image,\n  title,\n  subtitle,\n  status,\n  maxWidth = 280,\n  aspectWidth = 280,\n  aspectHeight = 370,\n  ...rest\n}) => {\n  const { theme } = useTheme()\n\n  const hasInfo = title || subtitle || status\n\n  return (\n    <Box maxWidth={maxWidth} {...rest}>\n      <ResponsiveBox\n        aspectWidth={aspectWidth}\n        aspectHeight={aspectHeight}\n        maxWidth=\"100%\"\n      >\n        <Image\n          alt=\"\"\n          height=\"100%\"\n          width=\"100%\"\n          style={{ objectFit: \"cover\" }}\n          {...(typeof image === \"string\" ? { src: image } : image)}\n        />\n\n        {hasInfo && (\n          <Box\n            position=\"absolute\"\n            width=\"100%\"\n            height=\"50%\"\n            bottom={0}\n            left={0}\n            background={theme.effects.overlayGradient}\n          />\n        )}\n\n        <Box\n          position=\"absolute\"\n          bottom={0}\n          left={0}\n          width=\"100%\"\n          p={2}\n          style={{ textShadow: theme.effects.textShadow }}\n        >\n          {status && (\n            <Text variant=\"xs\" color=\"mono0\">\n              {status}\n            </Text>\n          )}\n\n          {title && (\n            <Text variant=\"sm-display\" color=\"mono0\">\n              {title}\n            </Text>\n          )}\n\n          {subtitle && (\n            <Text variant=\"sm-display\" color=\"mono15\">\n              {subtitle}\n            </Text>\n          )}\n        </Box>\n      </ResponsiveBox>\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/elements/Cards/TriptychCard.js

@@ -60,9 +60,9 @@ var TriptychCard = function TriptychCard(_ref) {
           aspectWidth: 3,
           aspectHeight: 2,
           maxWidth: "100%",
-          bg: "black10",
+          bg: "mono10",
           borderRight: "1px solid",
-          borderColor: "white100"
+          borderColor: "mono0"
         }, /*#__PURE__*/_react.default.createElement(_Image.Image, _extends({
           alt: "",
           height: "100%",
@@ -76,9 +76,9 @@ var TriptychCard = function TriptychCard(_ref) {
           aspectWidth: 1,
           aspectHeight: 1,
           maxWidth: "100%",
-          bg: "black10",
+          bg: "mono10",
           borderRight: "1px solid",
-          borderColor: "white100"
+          borderColor: "mono0"
         }, /*#__PURE__*/_react.default.createElement(_Image.Image, _extends({
           alt: "",
           height: "100%",
@@ -93,9 +93,9 @@ var TriptychCard = function TriptychCard(_ref) {
           aspectWidth: 1,
           aspectHeight: 2,
           maxWidth: "100%",
-          bg: "black10",
+          bg: "mono10",
           borderLeft: "1px solid",
-          borderColor: "white100"
+          borderColor: "mono0"
         }, /*#__PURE__*/_react.default.createElement(_Image.Image, _extends({
           alt: "",
           height: "100%",
@@ -109,9 +109,9 @@ var TriptychCard = function TriptychCard(_ref) {
           aspectWidth: 1,
           aspectHeight: 1,
           maxWidth: "100%",
-          bg: "black10",
+          bg: "mono10",
           borderRight: "1px solid",
-          borderColor: "white100"
+          borderColor: "mono0"
         }, /*#__PURE__*/_react.default.createElement(_Image.Image, _extends({
           alt: "",
           height: "100%",
@@ -127,10 +127,10 @@ var TriptychCard = function TriptychCard(_ref) {
           aspectWidth: 1,
           aspectHeight: 1,
           maxWidth: "100%",
-          bg: "black10",
+          bg: "mono10",
           borderLeft: "1px solid",
           borderBottom: "1px solid",
-          borderColor: "white100"
+          borderColor: "mono0"
         }, /*#__PURE__*/_react.default.createElement(_Image.Image, _extends({
           alt: "",
           height: "100%",
@@ -142,10 +142,10 @@ var TriptychCard = function TriptychCard(_ref) {
           aspectWidth: 1,
           aspectHeight: 1,
           maxWidth: "100%",
-          bg: "black10",
+          bg: "mono10",
           borderLeft: "1px solid",
           borderTop: "1px solid",
-          borderColor: "white100"
+          borderColor: "mono0"
         }, /*#__PURE__*/_react.default.createElement(_Image.Image, _extends({
           alt: "",
           height: "100%",
@@ -161,7 +161,7 @@ var TriptychCard = function TriptychCard(_ref) {
     variant: "sm-display"
   }, title), subtitle && /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "sm-display",
-    color: "black60"
+    color: "mono60"
   }, subtitle));
 };
 exports.TriptychCard = TriptychCard;

package/dist/elements/Cards/TriptychCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"TriptychCard.js","names":["_react","_interopRequireDefault","require","_Image","_Box","_ResponsiveBox","_Flex","_Text","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","iter","Symbol","iterator","isArray","len","arr2","isArrayOfStrings","images","every","src","exports","TriptychCard","_ref","title","subtitle","status","rest","imgs","map","createElement","Box","ResponsiveBox","aspectWidth","aspectHeight","maxWidth","mb","Flex","flexDirection","width","height","bg","borderRight","borderColor","Image","alt","style","objectFit","Fragment","flexShrink","borderLeft","borderBottom","borderTop","Text","variant","color","displayName"],"sources":["../../../src/elements/Cards/TriptychCard.tsx"],"sourcesContent":["import React from \"react\"\nimport { Image, ImageProps } from \"../Image\"\nimport { Box, BoxProps } from \"../Box\"\nimport { ResponsiveBox } from \"../ResponsiveBox\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\n\ntype Images = ImageProps[] | string[]\n\nexport interface TriptychCardProps extends BoxProps {\n  /** 1, 2, or 3 images */\n  images: Images\n  title?: string | null\n  subtitle?: string | null\n  status?: string | null\n}\n\nexport const isArrayOfStrings = (images: Images): images is string[] =>\n  [...images].every((src) => typeof src === \"string\")\n\n/**\n * `TriptychCard` is a card with a layout one square image on the left,\n * one tall or two square images on the right, and text for title and subtitle\n * at the bottom.\n */\n\nexport const TriptychCard: React.FC<React.PropsWithChildren<TriptychCardProps>> = ({\n  images,\n  title,\n  subtitle,\n  status,\n  ...rest\n}) => {\n  const imgs: ImageProps[] = (isArrayOfStrings(images)\n    ? images.map((src) => ({ src }))\n    : images\n  ).slice(0, 3)\n\n  return (\n    <Box {...rest}>\n      <ResponsiveBox aspectWidth={3} aspectHeight={2} maxWidth=\"100%\" mb={1}>\n        <Flex flexDirection=\"row\" width=\"100%\" height=\"100%\">\n          {(() => {\n            switch (imgs.length) {\n              case 1:\n                return (\n                  <ResponsiveBox\n                    aspectWidth={3}\n                    aspectHeight={2}\n                    maxWidth=\"100%\"\n                    bg=\"black10\"\n                    borderRight=\"1px solid\"\n                    borderColor=\"white100\"\n                  >\n                    <Image\n                      alt=\"\"\n                      height=\"100%\"\n                      width=\"100%\"\n                      style={{ objectFit: \"cover\" }}\n                      {...imgs[0]}\n                    />\n                  </ResponsiveBox>\n                )\n\n              case 2:\n                return (\n                  <>\n                    <ResponsiveBox\n                      aspectWidth={1}\n                      aspectHeight={1}\n                      maxWidth=\"100%\"\n                      bg=\"black10\"\n                      borderRight=\"1px solid\"\n                      borderColor=\"white100\"\n                    >\n                      <Image\n                        alt=\"\"\n                        height=\"100%\"\n                        width=\"100%\"\n                        style={{ objectFit: \"cover\" }}\n                        {...imgs[0]}\n                      />\n                    </ResponsiveBox>\n\n                    <Flex width=\"33.33%\" flexShrink={0}>\n                      <ResponsiveBox\n                        aspectWidth={1}\n                        aspectHeight={2}\n                        maxWidth=\"100%\"\n                        bg=\"black10\"\n                        borderLeft=\"1px solid\"\n                        borderColor=\"white100\"\n                      >\n                        <Image\n                          alt=\"\"\n                          height=\"100%\"\n                          width=\"100%\"\n                          style={{ objectFit: \"cover\" }}\n                          {...imgs[1]}\n                        />\n                      </ResponsiveBox>\n                    </Flex>\n                  </>\n                )\n              case 3:\n                return (\n                  <>\n                    <ResponsiveBox\n                      aspectWidth={1}\n                      aspectHeight={1}\n                      maxWidth=\"100%\"\n                      bg=\"black10\"\n                      borderRight=\"1px solid\"\n                      borderColor=\"white100\"\n                    >\n                      <Image\n                        alt=\"\"\n                        height=\"100%\"\n                        width=\"100%\"\n                        style={{ objectFit: \"cover\" }}\n                        {...imgs[0]}\n                      />\n                    </ResponsiveBox>\n\n                    <Flex width=\"33.33%\" flexShrink={0} flexDirection=\"column\">\n                      <ResponsiveBox\n                        aspectWidth={1}\n                        aspectHeight={1}\n                        maxWidth=\"100%\"\n                        bg=\"black10\"\n                        borderLeft=\"1px solid\"\n                        borderBottom=\"1px solid\"\n                        borderColor=\"white100\"\n                      >\n                        <Image\n                          alt=\"\"\n                          height=\"100%\"\n                          width=\"100%\"\n                          style={{ objectFit: \"cover\" }}\n                          {...imgs[1]}\n                        />\n                      </ResponsiveBox>\n\n                      <ResponsiveBox\n                        aspectWidth={1}\n                        aspectHeight={1}\n                        maxWidth=\"100%\"\n                        bg=\"black10\"\n                        borderLeft=\"1px solid\"\n                        borderTop=\"1px solid\"\n                        borderColor=\"white100\"\n                      >\n                        <Image\n                          alt=\"\"\n                          height=\"100%\"\n                          width=\"100%\"\n                          style={{ objectFit: \"cover\" }}\n                          {...imgs[2]}\n                        />\n                      </ResponsiveBox>\n                    </Flex>\n                  </>\n                )\n            }\n          })()}\n        </Flex>\n      </ResponsiveBox>\n\n      {status && <Text variant=\"xs\">{status}</Text>}\n\n      <Text variant=\"sm-display\">{title}</Text>\n\n      {subtitle && (\n        <Text variant=\"sm-display\" color=\"black60\">\n          {subtitle}\n        </Text>\n      )}\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"TriptychCard.js","names":["_react","_interopRequireDefault","require","_Image","_Box","_ResponsiveBox","_Flex","_Text","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","iter","Symbol","iterator","isArray","len","arr2","isArrayOfStrings","images","every","src","exports","TriptychCard","_ref","title","subtitle","status","rest","imgs","map","createElement","Box","ResponsiveBox","aspectWidth","aspectHeight","maxWidth","mb","Flex","flexDirection","width","height","bg","borderRight","borderColor","Image","alt","style","objectFit","Fragment","flexShrink","borderLeft","borderBottom","borderTop","Text","variant","color","displayName"],"sources":["../../../src/elements/Cards/TriptychCard.tsx"],"sourcesContent":["import React from \"react\"\nimport { Image, ImageProps } from \"../Image\"\nimport { Box, BoxProps } from \"../Box\"\nimport { ResponsiveBox } from \"../ResponsiveBox\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\n\ntype Images = ImageProps[] | string[]\n\nexport interface TriptychCardProps extends BoxProps {\n  /** 1, 2, or 3 images */\n  images: Images\n  title?: string | null\n  subtitle?: string | null\n  status?: string | null\n}\n\nexport const isArrayOfStrings = (images: Images): images is string[] =>\n  [...images].every((src) => typeof src === \"string\")\n\n/**\n * `TriptychCard` is a card with a layout one square image on the left,\n * one tall or two square images on the right, and text for title and subtitle\n * at the bottom.\n */\n\nexport const TriptychCard: React.FC<\n  React.PropsWithChildren<TriptychCardProps>\n> = ({ images, title, subtitle, status, ...rest }) => {\n  const imgs: ImageProps[] = (isArrayOfStrings(images)\n    ? images.map((src) => ({ src }))\n    : images\n  ).slice(0, 3)\n\n  return (\n    <Box {...rest}>\n      <ResponsiveBox aspectWidth={3} aspectHeight={2} maxWidth=\"100%\" mb={1}>\n        <Flex flexDirection=\"row\" width=\"100%\" height=\"100%\">\n          {(() => {\n            switch (imgs.length) {\n              case 1:\n                return (\n                  <ResponsiveBox\n                    aspectWidth={3}\n                    aspectHeight={2}\n                    maxWidth=\"100%\"\n                    bg=\"mono10\"\n                    borderRight=\"1px solid\"\n                    borderColor=\"mono0\"\n                  >\n                    <Image\n                      alt=\"\"\n                      height=\"100%\"\n                      width=\"100%\"\n                      style={{ objectFit: \"cover\" }}\n                      {...imgs[0]}\n                    />\n                  </ResponsiveBox>\n                )\n\n              case 2:\n                return (\n                  <>\n                    <ResponsiveBox\n                      aspectWidth={1}\n                      aspectHeight={1}\n                      maxWidth=\"100%\"\n                      bg=\"mono10\"\n                      borderRight=\"1px solid\"\n                      borderColor=\"mono0\"\n                    >\n                      <Image\n                        alt=\"\"\n                        height=\"100%\"\n                        width=\"100%\"\n                        style={{ objectFit: \"cover\" }}\n                        {...imgs[0]}\n                      />\n                    </ResponsiveBox>\n\n                    <Flex width=\"33.33%\" flexShrink={0}>\n                      <ResponsiveBox\n                        aspectWidth={1}\n                        aspectHeight={2}\n                        maxWidth=\"100%\"\n                        bg=\"mono10\"\n                        borderLeft=\"1px solid\"\n                        borderColor=\"mono0\"\n                      >\n                        <Image\n                          alt=\"\"\n                          height=\"100%\"\n                          width=\"100%\"\n                          style={{ objectFit: \"cover\" }}\n                          {...imgs[1]}\n                        />\n                      </ResponsiveBox>\n                    </Flex>\n                  </>\n                )\n              case 3:\n                return (\n                  <>\n                    <ResponsiveBox\n                      aspectWidth={1}\n                      aspectHeight={1}\n                      maxWidth=\"100%\"\n                      bg=\"mono10\"\n                      borderRight=\"1px solid\"\n                      borderColor=\"mono0\"\n                    >\n                      <Image\n                        alt=\"\"\n                        height=\"100%\"\n                        width=\"100%\"\n                        style={{ objectFit: \"cover\" }}\n                        {...imgs[0]}\n                      />\n                    </ResponsiveBox>\n\n                    <Flex width=\"33.33%\" flexShrink={0} flexDirection=\"column\">\n                      <ResponsiveBox\n                        aspectWidth={1}\n                        aspectHeight={1}\n                        maxWidth=\"100%\"\n                        bg=\"mono10\"\n                        borderLeft=\"1px solid\"\n                        borderBottom=\"1px solid\"\n                        borderColor=\"mono0\"\n                      >\n                        <Image\n                          alt=\"\"\n                          height=\"100%\"\n                          width=\"100%\"\n                          style={{ objectFit: \"cover\" }}\n                          {...imgs[1]}\n                        />\n                      </ResponsiveBox>\n\n                      <ResponsiveBox\n                        aspectWidth={1}\n                        aspectHeight={1}\n                        maxWidth=\"100%\"\n                        bg=\"mono10\"\n                        borderLeft=\"1px solid\"\n                        borderTop=\"1px solid\"\n                        borderColor=\"mono0\"\n                      >\n                        <Image\n                          alt=\"\"\n                          height=\"100%\"\n                          width=\"100%\"\n                          style={{ objectFit: \"cover\" }}\n                          {...imgs[2]}\n                        />\n                      </ResponsiveBox>\n                    </Flex>\n                  </>\n                )\n            }\n          })()}\n        </Flex>\n      </ResponsiveBox>\n\n      {status && <Text variant=\"xs\">{status}</Text>}\n\n      <Text variant=\"sm-display\">{title}</Text>\n\n      {subtitle && (\n        <Text variant=\"sm-display\" color=\"mono60\">\n          {subtitle}\n        </Text>\n      )}\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/elements/Carousel/Carousel.story.js

@@ -46,9 +46,9 @@ var Demo = function Demo(_ref) {
       key: i,
       width: width,
       height: heights[i % heights.length],
-      bg: "black10",
+      bg: "mono10",
       border: "1px solid",
-      borderColor: "black30",
+      borderColor: "mono30",
       p: 1,
       textAlign: "center"
     }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
@@ -200,7 +200,7 @@ var CustomArrows = function CustomArrows() {
         style: {
           transform: "translateX(0)"
         },
-        bg: "black5",
+        bg: "mono5",
         color: "red100",
         height: 300,
         opacity: 0.75,
@@ -212,7 +212,7 @@ var CustomArrows = function CustomArrows() {
         style: {
           transform: "translateX(0)"
         },
-        bg: "black5",
+        bg: "mono5",
         color: "red100",
         height: 300,
         opacity: 0.75,
@@ -257,27 +257,27 @@ var CarouselWithText = function CarouselWithText() {
     mx: [2, 4],
     my: 2
   }, /*#__PURE__*/_react.default.createElement(_2.Carousel, null, /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    bg: "black10",
+    bg: "mono10",
     p: 1,
     width: 300
   }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    bg: "black10",
+    bg: "mono10",
     p: 1,
     width: 300
   }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    bg: "black10",
+    bg: "mono10",
     p: 1,
     width: 300
   }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    bg: "black10",
+    bg: "mono10",
     p: 1,
     width: 300
   }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    bg: "black10",
+    bg: "mono10",
     p: 1,
     width: 300
   }, LOREM), /*#__PURE__*/_react.default.createElement(_Text.Text, {
-    bg: "black10",
+    bg: "mono10",
     p: 1,
     width: 300
   }, LOREM)));
@@ -340,42 +340,42 @@ var ConditionalChildren = function ConditionalChildren() {
     mx: [2, 4],
     my: 2
   }, /*#__PURE__*/_react.default.createElement(_2.Carousel, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "black10",
+    bg: "mono10",
     width: 300,
     height: 300,
     p: 2
   }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "xs"
   }, "1")), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "black10",
+    bg: "mono10",
     width: 300,
     height: 300,
     p: 2
   }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "xs"
   }, "2")), false && /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "black10",
+    bg: "mono10",
     width: 300,
     height: 300,
     p: 2
   }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "xs"
   }, "3")), true && /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "black10",
+    bg: "mono10",
     width: 300,
     height: 300,
     p: 2
   }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "xs"
   }, "4")), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "black10",
+    bg: "mono10",
     width: 300,
     height: 300,
     p: 2
   }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
     variant: "xs"
   }, "5")), /*#__PURE__*/_react.default.createElement(_Box.Box, {
-    bg: "black10",
+    bg: "mono10",
     width: 300,
     height: 300,
     p: 2