@sproutsocial/racine 7.6.0 → 8.0.0-beta-dark-mode.0

package/commonjs/Checkbox/styles.js

@@ -36,11 +36,11 @@ var InputWrapper = (0, _styledComponents.default)(_Box.default).withConfig({
 }, function (props) {
   return props.theme.space[400];
 }, function (props) {
-  return props.appearance === "pill" && (0, _styledComponents.css)(["background-color:transparent;transition:all ", " ", ";mix-blend-mode:multiply;", " &:hover{background-color:", ";}", "{", "}"], function (props) {
+  return props.appearance === "pill" && (0, _styledComponents.css)(["background-color:transparent;transition:all ", " ", ";mix-blend-mode:", ";", " &:hover{background-color:", ";}", "{", "}"], function (props) {
     return props.theme.duration.fast;
   }, function (props) {
     return props.theme.easing.ease_inout;
-  }, _mixins.pill, props.theme.colors.background.app, PillInput, _mixins.pill);
+  }, props.theme.mode ? "screen" : "multiply", _mixins.pill, props.theme.colors.app.background.base, PillInput, _mixins.pill);
 });
 exports.InputWrapper = InputWrapper;
 InputWrapper.displayName = "InputWrapper";
@@ -53,9 +53,9 @@ var CheckboxBox = _styledComponents.default.div.withConfig({
 }, function (props) {
   return props.theme.space[400];
 }, 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) {
@@ -87,9 +87,9 @@ var PillInput = _styledComponents.default.input.withConfig({
 }, _mixins.focusRing, function (props) {
   return !props.checked && (0, _styledComponents.css)(["&:hover,&:focus{~ ", " ", "{opacity:", ";color:", ";}}"], CheckboxBox, CheckIcon, function (props) {
     return props.disabled ? 0 : 1;
-  }, props.theme.colors.forms.borderColor);
+  }, props.theme.colors.form.border.base);
 }, function (props) {
-  return props.checked && (0, _styledComponents.css)(["~ ", "{border-color:", ";background-color:", ";}~ ", " ", "{opacity:1;color:", ";}"], CheckboxBox, props.theme.colors.selection.border, props.theme.colors.selection.background, CheckboxBox, CheckIcon, props.theme.colors.icon.inverse);
+  return props.checked && (0, _styledComponents.css)(["~ ", "{border-color:", ";background-color:", ";}~ ", " ", "{opacity:1;color:", ";}"], CheckboxBox, props.theme.colors.form.border.selected, props.theme.colors.form.background.selected, CheckboxBox, CheckIcon, props.theme.colors.icon.inverse);
 }, function (props) {
   return props.disabled && (0, _styledComponents.css)(["~ ", "{opacity:0.4;}~ ", " ", "{opacity:", ";}"], CheckboxBox, CheckboxBox, CheckIcon, props.checked ? 1 : 0);
 });
@@ -132,7 +132,7 @@ var CheckboxContainer = _styledComponents.default.span.withConfig({
   displayName: "styles__CheckboxContainer",
   componentId: "sc-59uw8o-6"
 })(function (props) {
-  return (0, _styledComponents.css)(["display:inline-flex;align-items:center;box-sizing:border-box;position:relative;transition:all ", " ", ";@supports (-webkit-appearance:none){&:before{content:url(\"data:image/svg+xml;utf8,", "\");opacity:", ";position:absolute;width:", ";height:", ";text-align:center;transform:translateY(1px);line-height:1;margin:auto;pointer-events:none;transition:", " ", ";}&:hover:before{opacity:", ";}", " input[type='checkbox']{box-sizing:border-box;appearance:none;margin:0;padding:0;width:", ";height:", ";border:1px solid ", ";border-radius:4px;background-color:", ";transition:all ", " ", ";cursor:", ";flex-shrink:0;&:not(:checked){", "}&:checked{border-color:", ";background-color:", ";}", " &:focus{", "}}}", ""], props.theme.duration.fast, props.theme.easing.ease_in, getIcon(props.indeterminate ? "indeterminate" : "check", props.checked ? props.theme.colors.background.container : props.theme.colors.forms.borderColor), props.checked ? 1 : 0, props.theme.space[400], props.theme.space[400], props.theme.duration.fast, props.theme.easing.ease_inout, props.disabled && !props.checked ? 0 : 1, props.disabled && (0, _styledComponents.css)(["opacity:0.4;"]), props.theme.space[400], props.theme.space[400], props.theme.colors.forms.borderColor, props.theme.colors.background.container, props.theme.duration.fast, props.theme.easing.ease_in, props.disabled ? "not-allowed" : "pointer", !props.indeterminate && (0, _styledComponents.css)(["border-color:", " !important;background-color:", ";"], props.theme.colors.neutral[300], props.theme.colors.background.container), props.theme.colors.selection.border, props.theme.colors.selection.background, props.indeterminate && props.checked && (0, _styledComponents.css)(["border-color:", " !important;background-color:", " !important;"], props.theme.colors.selection.border, props.theme.colors.selection), _mixins.focusRing, _systemProps.COMMON);
+  return (0, _styledComponents.css)(["display:inline-flex;align-items:center;box-sizing:border-box;position:relative;transition:all ", " ", ";@supports (-webkit-appearance:none){&:before{content:url(\"data:image/svg+xml;utf8,", "\");opacity:", ";position:absolute;width:", ";height:", ";text-align:center;transform:translateY(1px);line-height:1;margin:auto;pointer-events:none;transition:", " ", ";}&:hover:before{opacity:", ";}", " input[type='checkbox']{box-sizing:border-box;appearance:none;margin:0;padding:0;width:", ";height:", ";border:1px solid ", ";border-radius:4px;background-color:", ";transition:all ", " ", ";cursor:", ";flex-shrink:0;&:not(:checked){", "}&:checked{border-color:", ";background-color:", ";}", " &:focus{", "}}}", ""], props.theme.duration.fast, props.theme.easing.ease_in, getIcon(props.indeterminate ? "indeterminate" : "check", props.checked ? props.theme.colors.form.background.base : props.theme.colors.form.border.base), props.checked ? 1 : 0, props.theme.space[400], props.theme.space[400], props.theme.duration.fast, props.theme.easing.ease_inout, props.disabled && !props.checked ? 0 : 1, props.disabled && (0, _styledComponents.css)(["opacity:0.4;"]), props.theme.space[400], props.theme.space[400], props.theme.colors.form.border.base, props.theme.colors.form.background.base, props.theme.duration.fast, props.theme.easing.ease_in, props.disabled ? "not-allowed" : "pointer", !props.indeterminate && (0, _styledComponents.css)(["border-color:", " !important;background-color:", ";"], props.theme.colors.neutral[300], props.theme.colors.form.background.base), props.theme.colors.form.border.selected, props.theme.colors.form.background.selected, props.indeterminate && props.checked && (0, _styledComponents.css)(["border-color:", " !important;background-color:", " !important;"], props.theme.colors.form.border.selected, props.theme.colors.form.background.selected), _mixins.focusRing, _systemProps.COMMON);
 });
 
 exports.CheckboxContainer = CheckboxContainer;

package/commonjs/DatePicker/styles.js

@@ -9,6 +9,8 @@ var _moment = _interopRequireDefault(require("moment"));
 
 var _Box = _interopRequireDefault(require("../Box"));
 
+var _mixins = require("../utils/mixins");
+
 var _templateObject;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -75,13 +77,13 @@ var CalendarDay = (0, _styledComponents.default)(_Box.default).withConfig({
       theme = _ref.theme;
 
   if (isSelected(modifiers)) {
-    return (0, _styledComponents.css)(["background-color:", ";color:", ";margin-left:", ";margin-right:", ";border-top-left-radius:", ";border-bottom-left-radius:", ";border-top-right-radius:", ";border-bottom-right-radius:", ";"], theme.colors.selection.background, theme.colors.selection.color, shouldHaveLeftPill(modifiers, day) && theme.space[200], shouldHaveRightPill(modifiers, day) && theme.space[200], shouldHaveLeftPill(modifiers, day) && theme.radii.pill, shouldHaveLeftPill(modifiers, day) && theme.radii.pill, shouldHaveRightPill(modifiers, day) && theme.radii.pill, shouldHaveRightPill(modifiers, day) && theme.radii.pill);
+    return (0, _styledComponents.css)(["background-color:", ";color:", ";margin-left:", ";margin-right:", ";border-top-left-radius:", ";border-bottom-left-radius:", ";border-top-right-radius:", ";border-bottom-right-radius:", ";"], theme.colors.container.background.selected, theme.colors.text.inverse, shouldHaveLeftPill(modifiers, day) && theme.space[200], shouldHaveRightPill(modifiers, day) && theme.space[200], shouldHaveLeftPill(modifiers, day) && theme.radii.pill, shouldHaveLeftPill(modifiers, day) && theme.radii.pill, shouldHaveRightPill(modifiers, day) && theme.radii.pill, shouldHaveRightPill(modifiers, day) && theme.radii.pill);
   }
 
   if (isHoveredAndInRange(modifiers)) {
-    return (0, _styledComponents.css)(["margin:0 ", ";border-radius:", ";border:1px solid ", ";"], theme.space[200], theme.radii.pill, theme.colors.selection.border);
+    return (0, _styledComponents.css)(["margin:0 ", ";border-radius:", ";border:1px solid ", ";"], theme.space[200], theme.radii.pill, theme.colors.container.border.selected);
   } else if (isOutOfRange(modifiers)) {
-    return (0, _styledComponents.css)(["color:", ";"], theme.colors.selection.disabledColor);
+    return (0, _styledComponents.css)(["color:", ";", ";"], theme.colors.text.subtext, _mixins.disabled);
   }
 });
 exports.CalendarDay = CalendarDay;
@@ -95,7 +97,7 @@ var ReactDatesCssOverrides = (0, _styledComponents.createGlobalStyle)(_templateO
   return theme.colors.text.headline;
 }, function (_ref4) {
   var theme = _ref4.theme;
-  return theme.colors.border;
+  return theme.colors.container.border.base;
 }, function (_ref5) {
   var theme = _ref5.theme;
   return theme.typography[200];
@@ -107,7 +109,7 @@ var ReactDatesCssOverrides = (0, _styledComponents.createGlobalStyle)(_templateO
   return theme.fontWeights.semibold;
 }, function (_ref8) {
   var theme = _ref8.theme;
-  return theme.colors.background.container;
+  return theme.colors.container.background.base;
 }, function (_ref9) {
   var theme = _ref9.theme;
   return theme.colors.text.body;
@@ -119,7 +121,7 @@ var ReactDatesCssOverrides = (0, _styledComponents.createGlobalStyle)(_templateO
   return theme.typography[200];
 }, function (_ref12) {
   var theme = _ref12.theme;
-  return theme.colors.background.container;
+  return theme.colors.container.background.base;
 }, function (_ref13) {
   var theme = _ref13.theme;
   return theme.typography[200];
@@ -128,21 +130,21 @@ var ReactDatesCssOverrides = (0, _styledComponents.createGlobalStyle)(_templateO
   return theme.colors.text.headline;
 }, function (_ref15) {
   var theme = _ref15.theme;
-  return theme.colors.background.container;
+  return theme.colors.container.background.base;
 }, function (_ref16) {
   var theme = _ref16.theme;
   return theme.fontWeights.semibold;
 }, function (_ref17) {
   var theme = _ref17.theme;
-  return theme.colors.background.container;
+  return theme.colors.container.background.base;
 }, function (_ref18) {
   var theme = _ref18.theme;
-  return theme.colors.cta.pill.color;
+  return theme.colors.button.pill.text.base;
 }, function (_ref19) {
   var theme = _ref19.theme;
-  return theme.colors.cta.pill.background;
+  return theme.colors.button.pill.background.base;
 }, function (_ref20) {
   var theme = _ref20.theme;
-  return theme.colors.cta.pill.hoverBackground;
+  return theme.colors.button.pill.background.hover;
 });
 exports.ReactDatesCssOverrides = ReactDatesCssOverrides;

package/commonjs/Drawer/styles.js

@@ -27,7 +27,7 @@ var Container = _styledComponents.default.div.withConfig({
 })(["display:flex;flex-direction:column;position:fixed;top:0;height:100%;width:", "px;background-color:", ";box-shadow:", ";filter:blur(0);", " ", ""], function (props) {
   return props.width;
 }, function (props) {
-  return props.theme.colors.background.container;
+  return props.theme.colors.container.background.base;
 }, function (props) {
   return props.theme.shadows[400];
 }, function (props) {

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;