@sproutsocial/racine 7.7.0-beta-collapsible.0 → 8.0.0-beta-dark-mode.3

package/commonjs/FormField/index.js

@@ -72,7 +72,7 @@ var FormField = function FormField(_ref) {
   }), isInvalid && error && /*#__PURE__*/React.createElement(_Text.default, {
     as: "div",
     fontSize: 200,
-    color: "error.color",
+    color: "text.error",
     mt: 300,
     id: errorId,
     "data-qa-formfield-error": qa && qa["data-qa-formfield-error"] || errorContainerText.current

package/commonjs/Input/styles.js

@@ -19,7 +19,7 @@ var Container = _styledComponents.default.div.withConfig({
 })(["box-sizing:border-box;position:relative;input{box-sizing:border-box;width:100%;border:1px solid transparent;border-radius:", ";background-color:", ";color:", ";outline:none;transition:border-color ", " ", ",box-shadow ", " ", ";font-family:", ";font-weight:", ";appearance:none;line-height:16px;margin:0;padding:", ";font-size:", ";&::-ms-clear{display:none;}&::-webkit-search-cancel-button{appearance:none;}&:focus{", "}&:not(output):not(:focus):-moz-ui-invalid{box-shadow:none;}&:placeholder{color:", ";}", " ", "}", " ", " ", " ", " ", ""], function (props) {
   return props.theme.radii[500];
 }, function (props) {
-  return props.theme.colors.background.container;
+  return props.theme.colors.form.background.base;
 }, function (props) {
   return props.theme.colors.text.body;
 }, function (props) {
@@ -57,7 +57,7 @@ var Container = _styledComponents.default.div.withConfig({
       return props.theme.typography[200].fontSize;
   }
 }, _mixins.focusRing, function (props) {
-  return props.theme.colors.forms.placeholderColor;
+  return props.theme.colors.form.placeholder.base;
 }, function (props) {
   return props.hasBeforeElement && (0, _styledComponents.css)(["padding-left:40px;"]);
 }, function (props) {
@@ -66,15 +66,15 @@ var Container = _styledComponents.default.div.withConfig({
   return props.disabled && (0, _styledComponents.css)(["opacity:0.4;input{cursor:not-allowed;}"]);
 }, function (props) {
   return props.appearance === "primary" && (0, _styledComponents.css)(["input{border:1px solid ", ";}"], function (props) {
-    return props.theme.colors.forms.borderColor;
+    return props.theme.colors.form.border.base;
   });
 }, function (props) {
   return props.invalid && (0, _styledComponents.css)(["input{border-color:", ";}"], function (props) {
-    return props.theme.colors.error.color;
+    return props.theme.colors.form.border.error;
   });
 }, function (props) {
   return props.warning && (0, _styledComponents.css)(["input{border-color:", ";}"], function (props) {
-    return props.theme.colors.warning.color;
+    return props.theme.colors.form.border.warning;
   });
 }, _systemProps.COMMON);
 
@@ -82,7 +82,7 @@ var Accessory = _styledComponents.default.div.withConfig({
   displayName: "styles__Accessory",
   componentId: "uozj0s-1"
 })(["position:absolute;top:50%;transform:translateY(-50%);color:", ";display:flex;align-items:center;", ";", ";"], function (props) {
-  return props.theme.colors.icon.primary;
+  return props.theme.colors.icon.base;
 }, function (props) {
   return props.before && (0, _styledComponents.css)(["left:", ";"], props.theme.space[350]);
 }, function (props) {

package/commonjs/KeyboardKey/styles.js

@@ -15,9 +15,9 @@ var Container = _styledComponents.default.div.withConfig({
 })(["display:inline-flex;color:", ";background-color:", ";border:1px solid ", ";border-radius:", ";box-shadow:", ";padding:0 ", ";min-width:20px;justify-content:center;", ""], function (props) {
   return props.theme.colors.text.body;
 }, function (props) {
-  return props.theme.colors.background.container;
+  return props.theme.colors.container.background.base;
 }, function (props) {
-  return props.theme.colors.border;
+  return props.theme.colors.container.border.base;
 }, function (props) {
   return props.theme.radii[500];
 }, function (props) {

package/commonjs/Link/styles.js

@@ -20,12 +20,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Container = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "styles__Container",
   componentId: "adcw4a-0"
-})(["border:0;font-family:", ";transition:all ", " ", ";text-decoration:", ";appearance:none;cursor:pointer;", " font-weight:", ";color:", ";&:hover{color:", ";text-decoration:underline;}&:active{color:", ";}&:focus{", "}&:focus:active{box-shadow:none;}", " ", " ", " ", ""], function (props) {
+})(["border:0;font-family:", ";text-decoration:", ";appearance:none;cursor:pointer;", " font-weight:", ";color:", ";&:hover{color:", ";text-decoration:underline;}&:active{color:", ";}&:focus{", "}&:focus:active{box-shadow:none;}", " ", " ", " ", ""], function (props) {
   return props.theme.fontFamily;
-}, function (props) {
-  return props.theme.duration.fast;
-}, function (props) {
-  return props.theme.easing.ease_inout;
 }, function (props) {
   return props.underline ? "underline" : "none";
 }, function (props) {
@@ -33,11 +29,11 @@ var Container = (0, _styledComponents.default)(_Text.default).withConfig({
 }, function (props) {
   return props.theme.fontWeights.semibold;
 }, function (props) {
-  return props.theme.colors.cta.link.color;
+  return props.theme.colors.link.base;
 }, function (props) {
-  return props.theme.colors.cta.link.color;
+  return props.theme.colors.link.hover;
 }, function (props) {
-  return props.theme.colors.cta.link.hoverColor;
+  return props.theme.colors.link.hover;
 }, _mixins.focusRing, function (props) {
   return !props.href && (0, _styledComponents.css)(["background:none;"]);
 }, function (props) {

package/commonjs/Listbox/index.js

@@ -46,11 +46,11 @@ var ListboxButtonContainer = (0, _styledComponents.default)(_Menu.MenuButton).wi
   displayName: "Listbox__ListboxButtonContainer",
   componentId: "c9mfi8-0"
 })(["position:relative;width:100%;border:1px solid ", ";border-radius:", ";background-color:", ";color:", ";cursor:", ";outline:none;appearance:none;transition:border-color ", " ", ",box-shadow ", " ", ";font-family:", ";font-weight:", ";text-align:left;margin:0;&:active{transform:none;}padding:", ";font-size:", ";", ""], function (props) {
-  return props.theme.colors.forms.borderColor;
+  return props.theme.colors.form.border.base;
 }, function (props) {
   return props.theme.radii[500];
 }, function (props) {
-  return props.theme.colors.background.container;
+  return props.theme.colors.form.background.base;
 }, function (props) {
   return props.theme.colors.text.body;
 }, function (props) {
@@ -91,9 +91,9 @@ var ListboxButtonContainer = (0, _styledComponents.default)(_Menu.MenuButton).wi
   }
 }, function (props) {
   return props.invalid && (0, _styledComponents.css)(["border-color:", ";", "{color:", ";}"], function (props) {
-    return props.theme.colors.error.border;
+    return props.theme.colors.form.border.error;
   }, _styles.Arrow, function (props) {
-    return props.theme.colors.error.color;
+    return props.theme.colors.icon.error;
   });
 });
 exports.ListboxButtonContainer = ListboxButtonContainer;

package/commonjs/Menu/index.js

@@ -268,7 +268,7 @@ var MenuGroup = function MenuGroup(_ref2) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement(_Box.default, {
     pl: 400,
     borderTop: "1px solid",
-    borderColor: "border",
+    borderColor: "container.border.base",
     mt: "-1px"
   }, /*#__PURE__*/React.createElement(_StyledText, {
     forwardedAs: titleAs || "div",
@@ -289,7 +289,7 @@ var MenuDivider = function MenuDivider(props) {
     as: "li",
     role: "separator",
     borderTop: "1px solid",
-    borderColor: "border"
+    borderColor: "container.border.base"
   }, props));
 };
 

package/commonjs/Menu/styles.js

@@ -18,10 +18,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var MenuItemContainer = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MenuItemContainer",
   componentId: "fjvae4-0"
-})(["", ";width:100%;border-radius:", ";background-color:transparent;border:none;text-align:left;color:", ";font-family:", ";font-weight:", ";padding:", ";list-style-type:none;outline:0;", ";", " ", " ", " ", " ", ""], function (props) {
+})(["", ";width:100%;border-radius:", ";background-color:", ";border:none;text-align:left;color:", ";font-family:", ";font-weight:", ";padding:", ";list-style-type:none;outline:0;", ";", " ", " ", " ", " ", ""], function (props) {
   return !props.hidden && (0, _styledComponents.css)(["display:block;"]);
 }, function (props) {
   return props.theme.radii[500];
+}, function (props) {
+  return props.theme.colors.listItem.background.base;
 }, function (props) {
   return props.theme.colors.text.body;
 }, function (props) {
@@ -33,14 +35,18 @@ var MenuItemContainer = (0, _styledComponents.default)(_Box.default).withConfig(
 }, function (props) {
   return (0, _styledComponents.css)(["", ";"], props.theme.typography[200]);
 }, function (props) {
-  return props.active && !props.disabled && (0, _styledComponents.css)(["background-color:", ";"], props.theme.colors.background.app);
+  return props.active && !props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";"], function (props) {
+    return props.theme.colors.text.inverse;
+  }, props.theme.colors.listItem.background.selected);
 }, function (props) {
   return props.selected && !props.isCheckboxOrRadio && (0, _styledComponents.css)(["font-weight:", ";"], function (props) {
     return props.theme.fontWeights.semibold;
   });
 }, function (props) {
-  return !props.disabled && (0, _styledComponents.css)(["&:focus,&:hover{background-color:", ";}"], function (props) {
-    return props.theme.colors.background.app;
+  return !props.disabled && (0, _styledComponents.css)(["&:focus,&:hover{color:", ";background-color:", ";}"], function (props) {
+    return props.theme.colors.text.body;
+  }, function (props) {
+    return props.theme.colors.listItem.background.hover;
   });
 }, function (props) {
   return props.interactive && !props.disabled ? (0, _styledComponents.css)(["&:hover{cursor:pointer;}"]) : (0, _styledComponents.css)(["&:hover{cursor:default;}"]);

package/commonjs/Message/index.js

@@ -51,7 +51,7 @@ var avatarSizeMap = function avatarSizeMap(density) {
 // $FlowIssue Upgrade 0.111.1
 var MessageContext = /*#__PURE__*/React.createContext({
   density: MESSAGE_DENSITIES.SMALL,
-  borderColor: "border",
+  borderColor: "container.border.base",
   bg: "background.container",
   indentContent: true
 });
@@ -61,7 +61,7 @@ var Message = function Message(_ref) {
       _ref$density = _ref.density,
       density = _ref$density === void 0 ? MESSAGE_DENSITIES.SMALL : _ref$density,
       _ref$borderColor = _ref.borderColor,
-      borderColor = _ref$borderColor === void 0 ? "border" : _ref$borderColor,
+      borderColor = _ref$borderColor === void 0 ? "container.border.base" : _ref$borderColor,
       _ref$bg = _ref.bg,
       bg = _ref$bg === void 0 ? "background.container" : _ref$bg,
       _ref$indentContent = _ref.indentContent,

package/commonjs/Modal/index.js

@@ -76,7 +76,7 @@ var ModalFooter = function ModalFooter(props) {
     // $FlowIssue - upgrade v0.112.0
     React.createElement(_styles.Footer, _extends({
       borderTop: 500,
-      borderColor: "border"
+      borderColor: "container.border.base"
     }, props))
   );
 };

package/commonjs/Modal/styles.js

@@ -68,7 +68,7 @@ var Container = (0, _styledComponents.default)(ReactModalAdapter).withConfig({
 }, function (props) {
   return props.theme.easing.ease_inout;
 }, _styledSystem.zIndex, function (props) {
-  return props.theme.colors.background.container;
+  return props.theme.colors.container.background.base;
 }, function (props) {
   return props.theme.radii[500];
 }, function (props) {
@@ -107,7 +107,7 @@ var Header = (0, _styledComponents.default)(HeaderContainer).withConfig({
 })(["display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;border-bottom-width:", ";border-bottom-color:", ";border-bottom-style:solid;"], function (props) {
   return props.theme.borderWidths[500];
 }, function (props) {
-  return props.bordered ? props.theme.colors.border : "transparent";
+  return props.bordered ? props.theme.colors.container.border.base : "transparent";
 });
 exports.Header = Header;
 var Footer = (0, _styledComponents.default)(_Box.default).withConfig({

package/commonjs/Numeral/styles.js

@@ -18,6 +18,6 @@ var AbbrContainer = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "styles__AbbrContainer",
   componentId: "o79gt9-1"
 })(["font-variant-numeric:tabular-nums;border-bottom:1px dotted ", ";"], function (props) {
-  return props.theme.colors.border;
+  return props.theme.colors.container.border.base;
 });
 exports.AbbrContainer = AbbrContainer;

package/commonjs/Popout/index.js

@@ -285,10 +285,10 @@ Popout.Content = function (_ref4) {
       rest = _objectWithoutPropertiesLoose(_ref4, ["children"]);
 
   return /*#__PURE__*/React.createElement(_Box.default, _extends({
-    bg: "background.container",
+    bg: "container.background.base",
     color: "text.body",
     border: 500,
-    borderColor: "border",
+    borderColor: "container.border.base",
     borderRadius: "outer",
     boxShadow: 300,
     p: 400,

package/commonjs/Radio/styles.js

@@ -30,9 +30,9 @@ var Input = _styledComponents.default.input.withConfig({
 })(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;appearance:none;cursor:", ";border:1px solid ", ";border-radius:50%;background-color:", ";transition:border-color ", " ", ",background-color ", " ", ";&:focus{", "}"], function (props) {
   return props.disabled ? "not-allowed" : "pointer";
 }, function (props) {
-  return props.theme.colors.forms.borderColor;
+  return props.theme.colors.form.border.base;
 }, function (props) {
-  return props.theme.colors.background.container;
+  return props.theme.colors.form.background.base;
 }, function (props) {
   return props.theme.duration.fast;
 }, function (props) {
@@ -64,9 +64,9 @@ var InputWrapper = _styledComponents.default.span.withConfig({
 }, function (props) {
   return props.disabled ? "not-allowed" : "pointer";
 }, function (props) {
-  return !props.checked && (0, _styledComponents.css)(["&:hover,&:focus{", "{border-color:", ";background-color:", ";}&:before{opacity:", ";background-color:", ";}}"], Input, props.theme.colors.forms.borderColor, props.theme.colors.background.container, props.disabled ? 0 : 1, props.theme.colors.forms.borderColor);
+  return !props.checked && (0, _styledComponents.css)(["&:hover,&:focus{", "{border-color:", ";background-color:", ";}&:before{opacity:", ";background-color:", ";}}"], Input, props.theme.colors.form.border.base, props.theme.colors.form.background.base, props.disabled ? 0 : 1, props.theme.colors.form.background.base);
 }, function (props) {
-  return props.checked && (0, _styledComponents.css)(["", "{border-color:", ";background-color:", ";}&:before{opacity:1;background-color:", ";}"], Input, props.theme.colors.selection.border, props.theme.colors.selection.background, props.theme.colors.background.container);
+  return props.checked && (0, _styledComponents.css)(["", "{border-color:", ";background-color:", ";}&:before{opacity:1;background-color:", ";}"], Input, props.theme.colors.form.border.selected, props.theme.colors.form.background.selected, props.theme.colors.form.background.base);
 });
 
 exports.InputWrapper = InputWrapper;

package/commonjs/SegmentedControl/styles.js

@@ -22,7 +22,7 @@ var SegmentedControlContainer = (0, _styledComponents.default)(_Box.default).wit
   displayName: "styles__SegmentedControlContainer",
   componentId: "sc-1o18lau-0"
 })(["border:1px solid ", ";border-radius:", ";padding:", ";legend{", "}", ""], function (props) {
-  return props.theme.colors.selection.border;
+  return props.theme.colors.button.secondary.border.base;
 }, function (props) {
   return props.theme.radii.outer;
 }, function (props) {
@@ -56,14 +56,14 @@ var SegmentedControlLabel = (0, _styledComponents.default)(_Text.default).withCo
 }, function (props) {
   return props.theme.duration.fast;
 }, function (props) {
-  return props.theme.colors.border;
+  return props.theme.colors.listItem.background.hover;
 }, function (props) {
   return props.isActive && (0, _styledComponents.css)(["color:", ";background-color:", ";&:hover{background-color:", ";}"], function (props) {
-    return props.theme.colors.background.container;
+    return props.theme.colors.text.inverse;
   }, function (props) {
-    return props.theme.colors.selection.background;
+    return props.theme.colors.listItem.background.selected;
   }, function (props) {
-    return props.theme.colors.selection.background;
+    return props.theme.colors.listItem.background.selected;
   });
 });
 exports.SegmentedControlLabel = SegmentedControlLabel;

package/commonjs/Select/styles.js

@@ -17,11 +17,11 @@ var Container = _styledComponents.default.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-1j75x48-0"
 })(["position:relative;box-sizing:border-box;select{box-sizing:border-box;width:100%;border:1px solid ", ";border-radius:", ";background-color:", ";color:", ";cursor:", ";outline:none;appearance:none;transition:border-color ", " ", ",box-shadow ", " ", ";font-family:", ";font-weight:", ";margin:0;visibility:visible;padding:", ";font-size:", ";&::-ms-expand{display:none;}&:focus{", "}&:not(output):not(:focus):-moz-ui-invalid{box-shadow:none;}}@-moz-document url-prefix(){select{line-height:14px;}}", " ", " ", ""], function (props) {
-  return props.theme.colors.forms.borderColor;
+  return props.theme.colors.form.border.base;
 }, function (props) {
   return props.theme.radii[500];
 }, function (props) {
-  return props.theme.colors.background.container;
+  return props.theme.colors.form.background.base;
 }, function (props) {
   return props.theme.colors.text.body;
 }, function (props) {
@@ -64,9 +64,9 @@ var Container = _styledComponents.default.div.withConfig({
   return props.disabled && (0, _styledComponents.css)(["opacity:0.4;"]);
 }, function (props) {
   return props.invalid && (0, _styledComponents.css)(["select{border-color:", ";}", "{color:", ";}"], function (props) {
-    return props.theme.colors.error.color;
+    return props.theme.colors.form.border.error;
   }, Arrow, function (props) {
-    return props.theme.colors.error.color;
+    return props.theme.colors.icon.error;
   });
 }, _systemProps.COMMON);
 
@@ -86,7 +86,7 @@ var Arrow = _styledComponents.default.span.withConfig({
       return props.theme.space[350];
   }
 }, function (props) {
-  return props.theme.colors.icon.primary;
+  return props.theme.colors.icon.base;
 });
 
 exports.Arrow = Arrow;

package/commonjs/Skeleton/index.js

@@ -15,9 +15,9 @@ var Skeleton = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "Skeleton",
   componentId: "sc-1fovt5u-0"
 })(["background:", ";background-image:", ";background-size:400%;background-repeat:no-repeat;animation:SkeletonShimmer 2.5s linear infinite reverse;@media (prefers-reduced-motion){{animation:none;}}@keyframes SkeletonShimmer{0%{background-position:0% 0;}100%{background-position:100% 0;}}"], function (p) {
-  return p.theme.colors.background.app;
+  return p.theme.colors.app.background.base;
 }, function (props) {
-  return "linear-gradient(\n      288deg,\n      " + (0, _polished.transparentize)(0.7, props.theme.colors.border) + " 32%,\n      " + (0, _polished.transparentize)(0.05, props.theme.colors.border) + ",\n      " + (0, _polished.transparentize)(0.7, props.theme.colors.border) + " 68%\n    );";
+  return "linear-gradient(\n      288deg,\n      " + (0, _polished.transparentize)(0.7, props.theme.colors.container.border.base) + " 32%,\n      " + (0, _polished.transparentize)(0.05, props.theme.colors.container.border.base) + ",\n      " + (0, _polished.transparentize)(0.7, props.theme.colors.container.border.base) + " 68%\n    );";
 });
 var _default = Skeleton; //rgba(243, 244, 244, 0.7)
 

package/commonjs/Switch/styles.js

@@ -21,33 +21,33 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Container = _styledComponents.default.button.withConfig({
   displayName: "styles__Container",
   componentId: "x5lhuq-0"
-})(["position:relative;display:inline-block;width:36px;height:22px;margin:0;padding:", " ", ";vertical-align:middle;appearance:none;background-color:", ";border-radius:11px;outline:none;cursor:pointer;transition:background-color ", " ", ";border:1px solid ", ";white-space:nowrap;overflow:hidden;&::after{position:absolute;top:50%;left:0;width:14px;height:14px;background-color:", ";border-radius:50%;content:\"\";transition:transform ", " ", ";transform:translate(4px,-50%);}&:focus{", "}", " ", " ", ""], function (props) {
+})(["position:relative;display:inline-block;width:36px;height:22px;margin:0;padding:", " ", ";vertical-align:middle;appearance:none;background-color:", ";border-radius:11px;outline:none;cursor:pointer;transition:background-color ", " ", ";border:1px solid ", ";white-space:nowrap;overflow:hidden;&::after{position:absolute;top:50%;left:0;width:14px;height:14px;background-color:", ";opacity:0.64;border-radius:50%;content:\"\";transition:transform ", " ", ";transform:translate(4px,-50%);}&:focus{", "}", " ", " ", ""], function (props) {
   return props.theme.space[100];
 }, function (props) {
   return props.theme.space[200];
 }, function (props) {
-  return props.theme.colors.background.container;
+  return props.theme.colors.form.background.base;
 }, function (props) {
   return props.theme.duration.fast;
 }, function (props) {
   return props.theme.easing.ease_inout;
 }, function (props) {
-  return props.theme.colors.forms.borderColor;
+  return props.theme.colors.form.border.base;
 }, function (props) {
-  return props.theme.colors.forms.borderColor;
+  return props.theme.colors.icon.base;
 }, function (props) {
   return props.theme.duration.fast;
 }, function (props) {
   return props.theme.easing.ease_inout;
 }, _mixins.focusRing, function (props) {
   if (props.checked) {
-    return (0, _styledComponents.css)(["color:", ";text-align:left;border-color:", ";background-color:", ";&::after{background-color:", ";transform:translate(17px,-50%);}", "{position:absolute;top:50%;left:4px;transform:translate(0,-50%);color:", ";}"], props.theme.colors.selection.color, props.theme.colors.selection.border, props.theme.colors.selection.background, props.theme.colors.background.container, _styles.default, props.theme.colors.background.container);
+    return (0, _styledComponents.css)(["color:", ";text-align:left;border-color:", ";background-color:", ";&::after{background-color:", ";opacity:1;transform:translate(17px,-50%);}", "{position:absolute;top:50%;left:4px;transform:translate(0,-50%);color:", ";}"], props.theme.colors.text.body, props.theme.colors.form.border.selected, props.theme.colors.form.background.selected, props.theme.colors.icon.inverse, _styles.default, props.theme.colors.icon.inverse);
   } else {
-    return "\n        &:hover,\n        &:focus {\n          border-color: " + props.theme.colors.forms.borderColor + ";\n          background-color: " + props.theme.colors.background.container + ";\n        }\n        &:hover {\n          &::after {\n            transform: translate(6px, -50%);\n          }\n        }\n      ";
+    return "\n        &:hover,\n        &:focus {\n          border-color: " + props.theme.colors.form.border.base + ";\n          background-color: " + props.theme.colors.form.background.base + ";\n        }\n        &:hover {\n          &::after {\n            transform: translate(6px, -50%);\n          }\n        }\n      ";
   }
 }, function (props) {
   return props.disabled && (0, _styledComponents.css)(["opacity:0.4;cursor:not-allowed;&[aria-pressed=\"true\"]{&:hover,&:focus{background-color:", ";}}"], function (props) {
-    return props.theme.colors.selection.background;
+    return props.theme.colors.container.background.selected;
   });
 }, _systemProps.COMMON);
 

package/commonjs/Table/styles.js

@@ -13,7 +13,7 @@ var Container = _styledComponents.default.table.withConfig({
   displayName: "styles__Container",
   componentId: "sc-1t7lqra-0"
 })(["width:100%;border-collapse:collapse;thead{vertical-align:bottom;}tr,thead{border-bottom:1px solid ", ";}", ""], function (props) {
-  return props.theme.colors.border;
+  return props.theme.colors.container.border.base;
 }, _systemProps.COMMON);
 
 var _default = Container;

package/commonjs/TableRowAccordion/styles.js

@@ -15,7 +15,7 @@ var Container = _styledComponents.default.tbody.withConfig({
   displayName: "styles__Container",
   componentId: "sc-17hu4uw-0"
 })(["border-bottom:1px solid ", ";", ""], function (props) {
-  return props.theme.colors.border;
+  return props.theme.colors.container.border.base;
 }, _systemProps.COMMON); // eslint-disable-next-line prettier/prettier
 
 

package/commonjs/Tabs/styles.js

@@ -23,7 +23,7 @@ var Container = _styledComponents.default.ul.withConfig({
 }, function (props) {
   return props.theme.borders[500];
 }, function (props) {
-  return props.theme.colors.border;
+  return props.theme.colors.container.border.base;
 }, _systemProps.COMMON);
 
 var TabItem = _styledComponents.default.li.withConfig({
@@ -37,11 +37,11 @@ var TabItem = _styledComponents.default.li.withConfig({
   });
 }, function (props) {
   return props.isSelected && (0, _styledComponents.css)(["box-shadow:", ";"], function (props) {
-    return "inset 0 -3px 0 0 " + props.theme.colors.cta.primary.background;
+    return "inset 0 -3px 0 0 " + props.theme.colors.button.primary.background.base;
   });
 }, function (props) {
   return props.isSelected && (0, _styledComponents.css)(["box-shadow:", ";"], function (props) {
-    return "inset 0 -3px 0 0 " + props.theme.colors.cta.primary.hoverBackground;
+    return "inset 0 -3px 0 0 " + props.theme.colors.button.primary.background.hover;
   });
 }); // eslint-disable-next-line prettier/prettier
 
@@ -56,11 +56,11 @@ var TabButton = (0, _styledComponents.default)(_Button.default).withConfig({
   return props.theme.colors.text.headline;
 }, function (props) {
   return props.isSelected && (0, _styledComponents.css)(["color:", ";"], function (props) {
-    return props.theme.colors.cta.link.color;
+    return props.theme.colors.link.base;
   });
 }, function (props) {
   return props.isSelected && (0, _styledComponents.css)(["color:", ";"], function (props) {
-    return props.theme.colors.cta.link.hoverColor;
+    return props.theme.colors.link.hover;
   });
 });
 exports.TabButton = TabButton;

package/commonjs/Textarea/styles.js

@@ -19,11 +19,11 @@ var Container = _styledComponents.default.div.withConfig({
 })(["box-sizing:border-box;position:relative;textarea{box-sizing:border-box;display:block;width:100%;padding:", ";border:1px solid ", ";border-radius:", ";background-color:", ";color:", ";outline:none;resize:none;transition:border-color ", " ", ",box-shadow ", " ", ";font-family:", ";", " font-weight:", ";appearance:none;&:focus{", "}&:placeholder{color:", ";}", " ", " ", "}", " ", " ", ""], function (props) {
   return props.theme.space[300];
 }, function (props) {
-  return props.theme.colors.forms.borderColor;
+  return props.theme.colors.form.border.base;
 }, function (props) {
   return props.theme.radii[500];
 }, function (props) {
-  return props.theme.colors.background.container;
+  return props.theme.colors.form.background.base;
 }, function (props) {
   return props.theme.colors.text.body;
 }, function (props) {
@@ -41,7 +41,7 @@ var Container = _styledComponents.default.div.withConfig({
 }, function (props) {
   return props.theme.fontWeights.normal;
 }, _mixins.focusRing, function (props) {
-  return props.theme.colors.forms.placeholderColor;
+  return props.theme.colors.form.placeholder.base;
 }, function (props) {
   return props.resizable && (0, _styledComponents.css)(["resize:vertical;"]);
 }, function (props) {
@@ -52,7 +52,7 @@ var Container = _styledComponents.default.div.withConfig({
   return props.disabled && (0, _styledComponents.css)(["opacity:0.4;textarea{cursor:not-allowed;}"]);
 }, function (props) {
   return props.invalid && (0, _styledComponents.css)(["textarea{border-color:", ";}"], function (props) {
-    return props.theme.colors.error.color;
+    return props.theme.colors.form.border.error;
   });
 }, _systemProps.COMMON);
 
@@ -60,7 +60,7 @@ var Accessory = _styledComponents.default.div.withConfig({
   displayName: "styles__Accessory",
   componentId: "sc-1hnc1wu-1"
 })(["position:absolute;color:", ";", ";", ";"], function (props) {
-  return props.theme.colors.icon.primary;
+  return props.theme.colors.icon.base;
 }, function (props) {
   return props.before && (0, _styledComponents.css)(["top:", ";left:", ";"], props.theme.space[300], props.theme.space[350]);
 }, function (props) {

package/commonjs/ThemeProvider/index.js

@@ -7,7 +7,7 @@ var React = _interopRequireWildcard(require("react"));
 
 var _styledComponents = require("styled-components");
 
-var _theme = _interopRequireDefault(require("../utils/theme"));
+var _theme = _interopRequireDefault(require("../themes/default/theme"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/commonjs/Toast/index.js

@@ -135,7 +135,7 @@ var Toast = function Toast(_ref) {
   }, content)), /*#__PURE__*/React.createElement(IconBox, null, /*#__PURE__*/React.createElement(_Icon.default, {
     name: "x",
     ml: 400,
-    color: "neutral.800"
+    color: "icon.base"
   }))));
 };
 

package/commonjs/Toast/styles.js

@@ -29,9 +29,9 @@ var Container = (0, _styledComponents.default)(_Box.default).withConfig({
 }, function (p) {
   return p.theme.typography[200];
 }, function (p) {
-  return p.theme.colors.background.container;
+  return p.theme.colors.container.background.base;
 }, function (p) {
-  return p.theme.colors[p.type].border;
+  return p.theme.colors.container.border[p.type];
 });
 var CustomIcon = (0, _styledComponents.default)(_Icon.default).withConfig({
   displayName: "styles__CustomIcon",
@@ -39,7 +39,7 @@ var CustomIcon = (0, _styledComponents.default)(_Icon.default).withConfig({
 })(["margin-right:", ";transform:translateY(4px);color:", ";"], function (props) {
   return props.theme.space[400];
 }, function (p) {
-  return p.customColor ? undefined : p.theme.colors[p.type].icon;
+  return p.customColor ? undefined : p.theme.colors.icon[p.type];
 });
 exports.CustomIcon = CustomIcon;
 var GlobalToastStyles = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\t", "\n\n\t.Toastify__toast:last-of-type {\n\t\tmargin-bottom: 0;\n\t}\n\n\t.Toastify-container-overrides {\n\t\tpadding: 0;\n\t\twidth: 360px;\n\t}\n\n\t.Toastify-toast-overrides {\n\t\tpadding: 0;\n\t\tmin-height: 0;\n\t\tborder-radius: 2px;\n\t}\n\n\t.Toastify__toast-container--bottom-right {\n\t\tbottom: ", ";\n\t\tright: ", ";\n\t}\n\n\t/* Override React Toastify's mobile width styles */\n\t@media only screen and (max-width: 480px) {\n\t\t.Toastify-container-overrides {\n\t\t\tmin-width: initial;\n\t\t}\n\t}\n"])), _ReactToastify.default, function (p) {

package/commonjs/Token/styles.js

@@ -27,9 +27,9 @@ var Container = _styledComponents.default.button.withConfig({
 }, function (props) {
   return props.theme.colors.text.body;
 }, function (props) {
-  return props.theme.colors.background.container;
+  return props.theme.colors.container.background.base;
 }, function (props) {
-  return props.theme.colors.forms.borderColor;
+  return props.theme.colors.container.border.base;
 }, function (props) {
   return props.theme.fontWeights.normal;
 }, function (props) {
@@ -42,21 +42,29 @@ var Container = _styledComponents.default.button.withConfig({
   return props.closeable && (0, _styledComponents.css)(["cursor:pointer;&:hover,&:active{color:", ";border:1px solid ", ";background-color:", ";}"], function (props) {
     return props.theme.colors.text.body;
   }, function (props) {
-    return props.theme.colors.forms.borderColor;
+    return props.theme.colors.container.border.decorative.neutral;
   }, function (props) {
-    return props.theme.colors.background.app;
+    return props.theme.colors.container.background.decorative.neutral;
   });
 }, function (props) {
-  return props.disabled && (0, _styledComponents.css)(["opacity:0.4;cursor:not-allowed;"]);
+  return props.disabled && (0, _styledComponents.css)(["opacity:0.4;cursor:not-allowed;&:hover,&:active{background:", ";border:1px solid ", ";}"], function (props) {
+    return props.theme.colors.container.background.base;
+  }, function (props) {
+    return props.theme.colors.container.border.base;
+  });
 }, function (props) {
-  return !props.valid && (0, _styledComponents.css)(["color:", ";border-color:", ";background:", ";&:hover{color:", ";}"], function (props) {
-    return props.theme.colors.text.inverse;
+  return !props.valid && (0, _styledComponents.css)(["color:", ";border-color:", ";background:", ";&:hover{color:", ";border:1px solid ", ";background-color:", ";}"], function (props) {
+    return props.theme.colors.text.body;
   }, function (props) {
-    return props.theme.colors.error.color;
+    return props.theme.colors.container.border.error;
+  }, function (props) {
+    return props.theme.colors.container.background.error;
+  }, function (props) {
+    return props.theme.colors.text.body;
   }, function (props) {
-    return props.theme.colors.error.color;
+    return props.theme.colors.container.border.error;
   }, function (props) {
-    return props.theme.colors.text.inverse;
+    return props.theme.colors.container.background.error;
   });
 }, _systemProps.COMMON);