@automattic/vip-design-system 0.28.1 → 0.28.3

package/.storybook/decorators/withColorMode.jsx

@@ -1,11 +1,24 @@
+/**
+ * External dependencies
+ */
+
 import React, { useEffect } from 'react';
 import { makeDecorator } from '@storybook/addons';
 import { useColorMode } from 'theme-ui';
-import { getColor } from '../../src/system/theme/getColor';
+
+/**
+ * Internal dependencies
+ */
+import ThemeBuilder from '../../src/system/theme/getColor';
+
+import Valet from '../../src/system/theme/generated/valet-theme-light.json';
+import ValetDark from '../../src/system/theme/generated/valet-theme-dark.json';
+const { getColor } = ThemeBuilder( Valet );
+const { getColor: getColorDark } = ThemeBuilder( ValetDark );
 
 // These need to be updated to import VIP design tokens;
 const lightBackground = getColor( 'background', 'primary' );
-const darkBackground = '#1C1C1B';
+const darkBackground = getColorDark( 'background', 'primary' );
 
 export const backgrounds = {
 	default: 'Light',

package/README.md

@@ -49,9 +49,9 @@ You need to update the tokens once the VIP Design System updates the core files.
 
 We use the VIP Design System Tokens as our base theme structure. All colors, spaces, types should come from a dynamic token system provided by the VIP Design team, currently using Figma as the design software. When the design system is updated by the Design team, they push a file to the root of this repository: `tokens/valet-core.json`.
 
-By using the [Token Transformer](https://docs.tokens.studio/sync/github#7-how-to-use-tokens-stored-in-github-in-development) and a custom npm script, we parse this file getting only the VIP Dashboard theme we need for the react components. The theme is called: `productive-color-wpvip`.
+By using the [Token Transformer](https://docs.tokens.studio/sync/github#7-how-to-use-tokens-stored-in-github-in-development) and a custom npm script, we parse this file getting only the VIP Dashboard theme we need for the react components. The light theme is called: `wpvip-productive-color`, and the dark theme is called `wpvip-productive-color-dark`.
 
-Once the new file is updated, we need to generate a custom theme file in `src/generated/valet-theme.json`. This operation generates a small json file with the colors we need already filled in.
+Once the new file is updated, we need to generate a custom theme file in `src/generated/valet-theme-light.json`. This operation generates a small json file with the colors we need already filled in.
 
 Once the theme is updated, the file `src/system/theme/index.js` reads the colors and apply to all components.
 
@@ -61,7 +61,7 @@ _Important:_ If you change the `generated/valet-theme.json`, make it sure to ope
 
 #### Update theme script
 
-Run this command to update the VIP Valet Theme with the latest `tokens/valet-core.json`.
+Run this command to update the VIP Valet Theme with the latest `tokens/**` files.
 
 ```bash
 npm run theme-update

package/build/system/Accordion/Accordion.js

@@ -112,16 +112,10 @@ var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forward
         fontSize: 1,
         fontWeight: 600,
         '&[data-state="closed"]': {
-          backgroundColor: function backgroundColor(_ref3) {
-            var accordion = _ref3.accordion;
-            return accordion.background.closed;
-          }
+          backgroundColor: 'accordion.background.closed'
         },
         '&[data-state="open"]': {
-          backgroundColor: function backgroundColor(_ref4) {
-            var accordion = _ref4.accordion;
-            return accordion.background.open;
-          },
+          backgroundColor: 'accordion.background.open',
           borderBottom: '1px solid',
           borderBottomColor: 'borders.2',
           '.vip-accordion-trigger-indicator': {
@@ -129,10 +123,7 @@ var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forward
           }
         },
         '&:hover': {
-          backgroundColor: function backgroundColor(_ref5) {
-            var accordion = _ref5.accordion;
-            return accordion.background.hover;
-          }
+          backgroundColor: 'accordion.background.hover'
         }
       }, sx)
     }, props, {
@@ -159,10 +150,10 @@ Trigger.propTypes = {
   sx: _propTypes["default"].object
 };
 
-var TriggerWithIcon = /*#__PURE__*/_react["default"].forwardRef(function (_ref6, forwardedRef) {
-  var children = _ref6.children,
-      icon = _ref6.icon,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref6, _excluded3);
+var TriggerWithIcon = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, forwardedRef) {
+  var children = _ref3.children,
+      icon = _ref3.icon,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, _excluded3);
   return (0, _jsxRuntime.jsxs)(Trigger, (0, _extends2["default"])({}, props, {
     ref: forwardedRef,
     children: [(0, _jsxRuntime.jsx)("span", {
@@ -173,7 +164,7 @@ var TriggerWithIcon = /*#__PURE__*/_react["default"].forwardRef(function (_ref6,
       children: icon
     }), (0, _jsxRuntime.jsx)("div", {
       sx: {
-        color: 'heading',
+        color: 'accordion.trigger.text',
         flexGrow: 1,
         textAlign: 'left',
         ml: 3
@@ -190,15 +181,15 @@ TriggerWithIcon.propTypes = {
   icon: _propTypes["default"].node.isRequired
 };
 
-var Content = /*#__PURE__*/_react["default"].forwardRef(function (_ref7, forwardedRef) {
-  var children = _ref7.children,
-      _ref7$sx = _ref7.sx,
-      sx = _ref7$sx === void 0 ? {} : _ref7$sx,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref7, _excluded4);
+var Content = /*#__PURE__*/_react["default"].forwardRef(function (_ref4, forwardedRef) {
+  var children = _ref4.children,
+      _ref4$sx = _ref4.sx,
+      sx = _ref4$sx === void 0 ? {} : _ref4$sx,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref4, _excluded4);
   return (0, _jsxRuntime.jsx)(AccordionPrimitive.Content, (0, _extends2["default"])({
     sx: (0, _extends2["default"])({
-      backgroundColor: 'transparent',
-      color: 'text',
+      backgroundColor: 'accordion.content.background',
+      color: 'accordion.content.text',
       fontSize: 2,
       overflow: 'hidden',
       px: 3,
@@ -223,12 +214,12 @@ Content.propTypes = {
   sx: _propTypes["default"].object
 };
 
-var Root = /*#__PURE__*/_react["default"].forwardRef(function (_ref8, forwardRef) {
-  var _ref8$sx = _ref8.sx,
-      sx = _ref8$sx === void 0 ? {} : _ref8$sx,
-      children = _ref8.children,
-      className = _ref8.className,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref8, _excluded5);
+var Root = /*#__PURE__*/_react["default"].forwardRef(function (_ref5, forwardRef) {
+  var _ref5$sx = _ref5.sx,
+      sx = _ref5$sx === void 0 ? {} : _ref5$sx,
+      children = _ref5.children,
+      className = _ref5.className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref5, _excluded5);
   return (0, _jsxRuntime.jsx)(AccordionPrimitive.Root, (0, _extends2["default"])({
     className: (0, _classnames["default"])('vip-accordion-component', className),
     collapsible: true,

package/build/system/Badge/Badge.stories.js

@@ -33,7 +33,7 @@ var TemplateLink = function TemplateLink(props) {
     sx: {
       m: 2
     },
-    children: (0, _jsxRuntime.jsx)("a", {
+    children: (0, _jsxRuntime.jsx)(_.Link, {
       href: "http://google.com",
       children: "Google.com"
     })

package/build/system/Dropdown/Dropdown.stories.js

@@ -19,6 +19,10 @@ var _Button = require("../Button");
 
 var NewDialog = _interopRequireWildcard(require("../NewDialog"));
 
+var _Link = require("../Link");
+
+var _Text = require("../Text");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["onConfirm"];
@@ -50,8 +54,8 @@ var Default = function Default() {
       }), (0, _jsxRuntime.jsx)(Dropdown.Separator, {}), (0, _jsxRuntime.jsx)(Dropdown.Item, {
         children: "Errored"
       })]
-    }), (0, _jsxRuntime.jsxs)("p", {
-      children: ["This component is based on the Radix Dropdown. You can find all available options, props and features in the", ' ', (0, _jsxRuntime.jsx)("a", {
+    }), (0, _jsxRuntime.jsxs)(_Text.Text, {
+      children: ["This component is based on the Radix Dropdown. You can find all available options, props and features in the", ' ', (0, _jsxRuntime.jsx)(_Link.Link, {
         href: "https://www.radix-ui.com/docs/primitives/components/dropdown-menu",
         target: "_blank",
         rel: "noopener noreferrer",
@@ -133,8 +137,8 @@ var ComplexOptions = function ComplexOptions() {
           }), "Colm Tuite"]
         })]
       })]
-    }), (0, _jsxRuntime.jsxs)("p", {
-      children: ["This component is based on the Radix Dropdown. You can find all available options, props and features in the", ' ', (0, _jsxRuntime.jsx)("a", {
+    }), (0, _jsxRuntime.jsxs)(_Text.Text, {
+      children: ["This component is based on the Radix Dropdown. You can find all available options, props and features in the", ' ', (0, _jsxRuntime.jsx)(_Link.Link, {
         href: "https://www.radix-ui.com/docs/primitives/components/dropdown-menu",
         target: "_blank",
         rel: "noopener noreferrer",
@@ -175,7 +179,7 @@ var WithDialog = function WithDialog() {
   };
 
   return (0, _jsxRuntime.jsxs)("div", {
-    children: [(0, _jsxRuntime.jsx)("p", {
+    children: [(0, _jsxRuntime.jsx)(_Text.Text, {
       children: "This is an important example when combining the Dropdown component with the NewDialog component. In order to have the correct accessibility, there are some events you need to use. Use this example if you want to copy and paste the code."
     }), (0, _jsxRuntime.jsxs)(Dropdown.Root, {
       modal: !alertOpen,

package/build/system/Form/Radio.stories.js

@@ -41,7 +41,7 @@ var Default = function Default() {
 
   return (0, _jsxRuntime.jsxs)(_2.Form.Root, {
     children: [(0, _jsxRuntime.jsxs)("p", {
-      children: ["Per recommendation, if you have a Radio button, use a Fieldset with a legend as wrapper to your options.", ' ', (0, _jsxRuntime.jsx)("a", {
+      children: ["Per recommendation, if you have a Radio button, use a Fieldset with a legend as wrapper to your options.", ' ', (0, _jsxRuntime.jsx)(_2.Link, {
         href: "https://a11y-collective.github.io/demos/en/accessible-code/form-fieldsets.html",
         children: "Reference to Form fieldsets"
       })]

package/build/system/NewForm/FormAutocomplete.js

@@ -33,9 +33,11 @@ var _FormSelectLoading = require("./FormSelectLoading");
 
 var _Input = require("../Form/Input.styles");
 
+var _Form = require("../Form");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["autoFilter", "className", "debounce", "displayMenu", "forLabel", "getOptionLabel", "getOptionValue", "id", "isInline", "label", "loading", "minLength", "noOptionsMessage", "onChange", "onInputChange", "options", "required", "searchIcon", "showAllValues", "source", "value"];
+var _excluded = ["autoFilter", "className", "debounce", "displayMenu", "forLabel", "getOptionLabel", "getOptionValue", "id", "isInline", "label", "loading", "minLength", "noOptionsMessage", "onChange", "onInputChange", "options", "required", "searchIcon", "showAllValues", "source", "value", "hasError", "errorMessage"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -161,6 +163,8 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       showAllValues = _ref$showAllValues === void 0 ? true : _ref$showAllValues,
       source = _ref.source,
       value = _ref.value,
+      hasError = _ref.hasError,
+      errorMessage = _ref.errorMessage,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -267,6 +271,10 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
           tNoResults: noOptionsMessage
         }, props)), loading && (0, _jsxRuntime.jsx)(_FormSelectLoading.FormSelectLoading, {}), (0, _jsxRuntime.jsx)(_FormSelectArrow.FormSelectArrow, {})]
       })
+    }), hasError && errorMessage && (0, _jsxRuntime.jsx)(_Form.Validation, {
+      isValid: false,
+      describedId: forLabel,
+      children: errorMessage
     })]
   });
 });
@@ -293,6 +301,8 @@ FormAutocomplete.propTypes = {
   searchIcon: _propTypes["default"].bool,
   showAllValues: _propTypes["default"].bool,
   source: _propTypes["default"].func,
-  value: _propTypes["default"].string
+  value: _propTypes["default"].string,
+  hasError: _propTypes["default"].bool,
+  errorMessage: _propTypes["default"].string
 };
 FormAutocomplete.displayName = 'FormAutocomplete';

package/build/system/NewForm/FormAutocomplete.stories.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.WithSearchIcon = exports.WithLoading = exports.WithDefaultValue = exports.WithDebounce = exports.WithCustomMessages = exports.Inline = exports.Default = void 0;
+exports["default"] = exports.WithSearchIcon = exports.WithLoading = exports.WithErrors = exports.WithDefaultValue = exports.WithDebounce = exports.WithCustomMessages = exports.Inline = exports.Default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -166,4 +166,16 @@ var WithCustomMessages = function WithCustomMessages() {
   });
 };
 
-exports.WithCustomMessages = WithCustomMessages;
+exports.WithCustomMessages = WithCustomMessages;
+
+var WithErrors = function WithErrors() {
+  var customArgs = (0, _extends2["default"])({}, args, {
+    hasError: true,
+    errorMessage: 'Please select a value'
+  });
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
+  });
+};
+
+exports.WithErrors = WithErrors;

package/build/system/NewForm/FormSelect.stories.js

@@ -13,6 +13,8 @@ var _react = require("react");
 
 var Form = _interopRequireWildcard(require("."));
 
+var _Link = require("../Link");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["label", "width", "onChange"];
@@ -76,7 +78,7 @@ var DefaultComponent = function DefaultComponent(_ref) {
         children: "15 options"
       }), ". If you need to use a auto-complete, searchable solution, please use another component with a typeahead capability."]
     }), (0, _jsxRuntime.jsxs)("p", {
-      children: ["This component was heavily inspired by the", ' ', (0, _jsxRuntime.jsxs)("a", {
+      children: ["This component was heavily inspired by the", ' ', (0, _jsxRuntime.jsxs)(_Link.Link, {
         href: "https://designsystem.digital.gov/components/select/",
         target: "_blank",
         rel: "noreferrer",

package/build/system/Notice/Notice.stories.js

@@ -26,22 +26,17 @@ exports["default"] = _default;
 
 var Default = function Default() {
   return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-    children: [(0, _jsxRuntime.jsx)(_.Notice, {
+    children: [(0, _jsxRuntime.jsxs)(_.Notice, {
       variant: "alert",
       headingVariant: "h2",
       sx: {
         mb: 4
       },
       title: "Your site is ready to launch!",
-      children: (0, _jsxRuntime.jsxs)(_.Text, {
-        sx: {
-          mb: 0
-        },
-        children: ["It looks like you\u2018re ready to share your", ' ', (0, _jsxRuntime.jsx)(_.Link, {
-          href: "https://google.com/",
-          children: "application with the world."
-        })]
-      })
+      children: ["It looks like you\u2018re ready to share your", ' ', (0, _jsxRuntime.jsx)(_.Link, {
+        href: "https://google.com/",
+        children: "application with the world."
+      })]
     }), (0, _jsxRuntime.jsxs)(_.Notice, {
       variant: "success",
       sx: {
@@ -70,21 +65,16 @@ var Default = function Default() {
         href: "https://google.com/",
         children: "application with the world."
       })]
-    }), (0, _jsxRuntime.jsx)(_.Notice, {
+    }), (0, _jsxRuntime.jsxs)(_.Notice, {
       variant: "info",
       sx: {
         mb: 4
       },
       title: "Please read this first",
-      children: (0, _jsxRuntime.jsxs)(_.Text, {
-        sx: {
-          mb: 0
-        },
-        children: ["This notice has a title and children and", ' ', (0, _jsxRuntime.jsx)("a", {
-          href: "/?path=/story/avatar--default",
-          children: "A link to Avatar"
-        })]
-      })
+      children: ["This notice has a title and children and", ' ', (0, _jsxRuntime.jsx)(_.Link, {
+        href: "/?path=/story/avatar--default",
+        children: "A link to Avatar"
+      })]
     }), (0, _jsxRuntime.jsx)(_.Notice, {
       variant: "alert",
       sx: {
@@ -97,17 +87,17 @@ var Default = function Default() {
           mb: 0
         },
         children: [(0, _jsxRuntime.jsx)("li", {
-          children: (0, _jsxRuntime.jsx)("a", {
+          children: (0, _jsxRuntime.jsx)(_.Link, {
             href: "#name",
             children: "Please enter your name."
           })
         }), (0, _jsxRuntime.jsx)("li", {
-          children: (0, _jsxRuntime.jsx)("a", {
+          children: (0, _jsxRuntime.jsx)(_.Link, {
             href: "#email",
             children: "Please enter your email address."
           })
         }), (0, _jsxRuntime.jsx)("li", {
-          children: (0, _jsxRuntime.jsx)("a", {
+          children: (0, _jsxRuntime.jsx)(_.Link, {
             href: "#terms",
             children: "Please agree to the terms."
           })

package/build/system/Table/Table.stories.js

@@ -46,9 +46,6 @@ var Default = function Default() {
         gbc: true
       }), (0, _jsxRuntime.jsxs)(_.TableRow, {
         children: [(0, _jsxRuntime.jsx)(_.TableCell, {
-          sx: {
-            backgroundColor: 'lightgray'
-          },
           children: (0, _jsxRuntime.jsx)(_.Flex, {
             sx: {
               alignItems: 'center'

package/build/system/Tabs/Tabs.stories.js

@@ -46,7 +46,7 @@ var Default = function Default() {
     }), (0, _jsxRuntime.jsx)(_.TabsContent, {
       value: "all",
       children: (0, _jsxRuntime.jsxs)(_.Text, {
-        children: ["All content ", (0, _jsxRuntime.jsx)("a", {
+        children: ["All content ", (0, _jsxRuntime.jsx)(_.Link, {
           href: "https://google.com",
           children: "https://google.com"
         })]
@@ -57,8 +57,8 @@ var Default = function Default() {
     }), (0, _jsxRuntime.jsx)(_.TabsContent, {
       value: "dev",
       children: (0, _jsxRuntime.jsxs)(_.Text, {
-        children: ["In Development content ", (0, _jsxRuntime.jsx)("button", {
-          type: "button",
+        children: ["In Development content ", (0, _jsxRuntime.jsx)(_.Button, {
+          variant: "secondary",
           children: "Hey I am a button"
         }), ' ']
       })

package/build/system/Wizard/WizardStep.js

@@ -42,7 +42,7 @@ var WizardStep = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwa
     borderLeftColor = 'primary';
   }
 
-  var color = 'secondary';
+  var color = 'text';
 
   if (complete) {
     color = 'success';
@@ -84,7 +84,8 @@ var WizardStep = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwa
       children: [(0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
         "aria-hidden": "true",
         sx: {
-          mr: 2
+          mr: 2,
+          color: active ? 'icon.primary' : 'icon.disabled'
         }
       }), title]
     }) : (0, _jsxRuntime.jsxs)(_.Flex, {
@@ -95,7 +96,8 @@ var WizardStep = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwa
       children: [(0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
         "aria-hidden": "true",
         sx: {
-          mr: 2
+          mr: 2,
+          color: active ? 'icon.primary' : 'icon.disabled'
         }
       }), title]
     }), subTitle && active && (0, _jsxRuntime.jsx)(_.Text, {

package/build/system/theme/colors.js

@@ -3,183 +3,20 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.light = exports["default"] = exports.dark = void 0;
+exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _getColor = require("./getColor");
-
 /** @jsxImportSource theme-ui */
 
 /**
  * External dependencies
  */
-
-/**
- * Internal dependencies
- */
-var light = (0, _extends2["default"])({}, _getColor.ValetTheme.color, {
-  brand: _getColor.ValetTheme.color.gold,
-  grey: _getColor.ValetTheme.color.gray
-});
-exports.light = light;
-var dark = {
-  black: 'rgba(19, 25, 30, 1)',
-  brand: {
-    0: '#1A160F',
-    3: '#231809',
-    7: '#301F08',
-    10: '#301F08',
-    20: '#3A2406',
-    30: '#432804',
-    40: '#502E01',
-    50: '#603700',
-    60: '#774400',
-    70: '#B96B03',
-    80: '#C37A19',
-    90: '#CA8529',
-    100: '#FAF2E7'
-  },
-  grey: {
-    0: '#161615',
-    5: '#1C1C1B',
-    10: '#242221',
-    20: '#282827',
-    30: '#2F2D2C',
-    40: '#353431',
-    50: '#3F3D3B',
-    60: '#524F4C',
-    70: '#726F6A',
-    80: '#807D78',
-    90: '#A29F9B',
-    100: '#EDEDEC'
-  },
-  blue: {
-    0: '#0B1A1C',
-    5: '#062124',
-    10: '#032D31',
-    20: '#00353B',
-    30: '#003C42',
-    40: '#00444C',
-    50: '#005059',
-    60: '#00636E',
-    70: '#009FB1',
-    80: '#09BDD2',
-    90: '#2AC5D7',
-    100: '#E6F9FB'
-  },
-  green: {
-    0: '#0D1913',
-    5: '#0C1F16',
-    10: '#0F291D',
-    20: '#113122',
-    30: '#133927',
-    40: '#16442E',
-    50: '#1B5439',
-    60: '#236E4A',
-    70: '#30A46C',
-    80: '#3CB179',
-    90: '#4CC389',
-    100: '#E4FAF0'
-  },
-  pink: {
-    0: 'rgba(255, 248, 246, 1)',
-    5: 'rgba(255, 232, 230, 1)',
-    10: 'rgba(255, 214, 210, 1)',
-    15: 'rgba(255, 197, 193, 1)',
-    20: 'rgba(251, 183, 180, 1)',
-    25: 'rgba(239, 171, 168, 1)',
-    30: 'rgba(226, 158, 157, 1)',
-    35: 'rgba(212, 146, 148, 1)',
-    40: 'rgba(202, 133, 136, 1)',
-    45: 'rgba(188, 122, 126, 1)',
-    50: 'rgba(176, 109, 116, 1)',
-    55: 'rgba(163, 95, 106, 1)',
-    60: 'rgba(149, 83, 93, 1)',
-    65: 'rgba(137, 71, 85, 1)',
-    70: 'rgba(124, 57, 74, 1)',
-    75: 'rgba(109, 41, 62, 1)',
-    80: 'rgba(95, 30, 52, 1)',
-    85: 'rgba(83, 14, 43, 1)',
-    90: 'rgba(69, 0, 31, 1)',
-    95: 'rgba(53, 0, 18, 1)',
-    100: 'rgba(46, 0, 3, 1)'
-  },
-  salmon: {
-    0: 'rgba(254, 248, 248, 1)',
-    5: 'rgba(254, 233, 228, 1)',
-    10: 'rgba(254, 214, 206, 1)',
-    15: 'rgba(254, 195, 177, 1)',
-    20: 'rgba(255, 178, 150, 1)',
-    25: 'rgba(255, 163, 120, 1)',
-    30: 'rgba(249, 148, 94, 1)',
-    35: 'rgba(237, 137, 85, 1)',
-    40: 'rgba(224, 123, 77, 1)',
-    45: 'rgba(210, 113, 70, 1)',
-    50: 'rgba(197, 101, 63, 1)',
-    55: 'rgba(181, 86, 56, 1)',
-    60: 'rgba(167, 73, 48, 1)',
-    65: 'rgba(153, 60, 43, 1)',
-    70: 'rgba(137, 47, 38, 1)',
-    75: 'rgba(124, 30, 30, 1)',
-    80: 'rgba(108, 15, 23, 1)',
-    85: 'rgba(94, 0, 16, 1)',
-    90: 'rgba(78, 0, 0, 1)',
-    95: 'rgba(62, 0, 1, 1)',
-    100: 'rgba(52, 0, 2, 1)'
-  },
-  orange: {
-    0: 'rgba(255, 249, 241, 1)',
-    5: 'rgba(255, 233, 219, 1)',
-    10: 'rgba(255, 215, 189, 1)',
-    15: 'rgba(255, 195, 159, 1)',
-    20: 'rgba(255, 178, 126, 1)',
-    25: 'rgba(254, 159, 95, 1)',
-    30: 'rgba(255, 139, 64, 1)',
-    35: 'rgba(255, 123, 40, 1)',
-    40: 'rgba(244, 110, 21, 1)',
-    45: 'rgba(231, 98, 5, 1)',
-    50: 'rgba(215, 80, 1, 1)',
-    55: 'rgba(197, 73, 0, 1)',
-    60: 'rgba(180, 60, 0, 1)',
-    65: 'rgba(165, 49, 0, 1)',
-    70: 'rgba(148, 38, 1, 1)',
-    75: 'rgba(129, 23, 1, 1)',
-    80: 'rgba(111, 8, 1, 1)',
-    85: 'rgba(95, 0, 0, 1)',
-    90: 'rgba(78, 0, 0, 1)',
-    95: 'rgba(60, 0, 0, 1)',
-    100: 'rgba(50, 0, 3, 1)'
-  },
-  yellow: {
-    0: '#1F1300',
-    5: '#261700',
-    10: '#301E00',
-    20: '#3B2400',
-    30: '#462B00',
-    40: '#553400',
-    50: '#674003',
-    60: '#804F00',
-    70: '#FFB031',
-    80: '#FFC568',
-    90: '#F69E12',
-    100: '#FFF2DE'
-  },
-  red: {
-    0: '#1E1313',
-    5: '#2B1311',
-    10: '#3C1714',
-    20: '#491915',
-    30: '#561B17',
-    40: '#681E19',
-    50: '#832019',
-    60: '#AC241A',
-    70: '#F04539',
-    80: '#F6574B',
-    90: '#FA6459',
-    100: '#FFEEED'
-  }
+var _default = function _default(theme) {
+  return (0, _extends2["default"])({}, theme.color, {
+    brand: theme.color.gold,
+    grey: theme.color.gray
+  });
 };
-exports.dark = dark;
-var _default = light;
+
 exports["default"] = _default;