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

package/lib/Card/index.js

@@ -17,11 +17,11 @@ var Card = function Card(_ref) {
       _ref$border = _ref.border,
       border = _ref$border === void 0 ? 500 : _ref$border,
       _ref$borderColor = _ref.borderColor,
-      borderColor = _ref$borderColor === void 0 ? "border" : _ref$borderColor,
+      borderColor = _ref$borderColor === void 0 ? "container.border.base" : _ref$borderColor,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? "text.body" : _ref$color,
       _ref$bg = _ref.bg,
-      bg = _ref$bg === void 0 ? "background.container" : _ref$bg,
+      bg = _ref$bg === void 0 ? "container.background.base" : _ref$bg,
       rest = _objectWithoutPropertiesLoose(_ref, ["onClick", "href", "children", "ariaLabel", "buttonProps", "border", "borderColor", "color", "bg"]);
 
   return /*#__PURE__*/React.createElement(Container, _extends({}, rest, {

package/lib/CharacterCounter/styles.js

@@ -10,7 +10,7 @@ var Container = styled.div.withConfig({
 }, function (props) {
   return props.theme.fontWeights.semibold;
 }, function (props) {
-  return props.overlimit ? props.theme.colors.error.color : props.theme.colors.text.subtext;
+  return props.overlimit ? props.theme.colors.text.error : props.theme.colors.text.subtext;
 }, function (p) {
   return p.mini && css(["", ""], p.theme.typography[100]);
 }, COMMON);

package/lib/Checkbox/styles.js

@@ -18,11 +18,11 @@ export var InputWrapper = styled(Box).withConfig({
 }, function (props) {
   return props.theme.space[400];
 }, function (props) {
-  return props.appearance === "pill" && css(["background-color:transparent;transition:all ", " ", ";mix-blend-mode:multiply;", " &:hover{background-color:", ";}", "{", "}"], function (props) {
+  return props.appearance === "pill" && 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;
-  }, pill, props.theme.colors.background.app, PillInput, pill);
+  }, props.theme.mode ? "screen" : "multiply", pill, props.theme.colors.app.background.base, PillInput, pill);
 });
 InputWrapper.displayName = "InputWrapper";
 export var CheckboxBox = styled.div.withConfig({
@@ -33,9 +33,9 @@ export var CheckboxBox = styled.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) {
@@ -63,9 +63,9 @@ export var PillInput = styled.input.withConfig({
 }, focusRing, function (props) {
   return !props.checked && 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 && 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 && 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 && css(["~ ", "{opacity:0.4;}~ ", " ", "{opacity:", ";}"], CheckboxBox, CheckboxBox, CheckIcon, props.checked ? 1 : 0);
 });
@@ -105,6 +105,6 @@ export var CheckboxContainer = styled.span.withConfig({
   displayName: "styles__CheckboxContainer",
   componentId: "sc-59uw8o-6"
 })(function (props) {
-  return 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 && 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 && 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 && css(["border-color:", " !important;background-color:", " !important;"], props.theme.colors.selection.border, props.theme.colors.selection), focusRing, COMMON);
+  return 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 && 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 && 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 && css(["border-color:", " !important;background-color:", " !important;"], props.theme.colors.form.border.selected, props.theme.colors.form.background.selected), focusRing, COMMON);
 });
 export default Container;

package/lib/DatePicker/styles.js

@@ -5,6 +5,7 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
 import styled, { createGlobalStyle, css } from "styled-components";
 import moment from "moment";
 import Box from "../Box";
+import { disabled } from "../utils/mixins";
 
 /*
  * Partial list of modifiers given to renderDayContents by airbnb/react-dates. There may be more.
@@ -62,13 +63,13 @@ export var CalendarDay = styled(Box).withConfig({
       theme = _ref.theme;
 
   if (isSelected(modifiers)) {
-    return 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 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 css(["margin:0 ", ";border-radius:", ";border:1px solid ", ";"], theme.space[200], theme.radii.pill, theme.colors.selection.border);
+    return css(["margin:0 ", ";border-radius:", ";border:1px solid ", ";"], theme.space[200], theme.radii.pill, theme.colors.container.border.selected);
   } else if (isOutOfRange(modifiers)) {
-    return css(["color:", ";"], theme.colors.selection.disabledColor);
+    return css(["color:", ";", ";"], theme.colors.text.subtext, disabled);
   }
 });
 export var ReactDatesCssOverrides = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\t.DayPicker {\n\t\tbox-sizing: content-box;\n\t\tfont-weight: ", ";\n\t\tfont-family: ", ";\n\n\t\t/* override react-dates height to better reflect how tall the component actually is */\n\t\t/* adding margin/padding will be more truer to our seeds system because the height */\n\t\t/* of the calendar adds an extra row of padding if we do not override it */\n\t\t&_transitionContainer {\n\t\t\t/* need !important because react-dates sets height on the element itself */\n\t\t\theight: 228px !important;\n\t\t}\n\n\t\t&_weekHeader {\n\t\t\tcolor: ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\n \t\t\t/* Magic number to match position of .CalendarMonth_caption */\n\t\t\ttop: 26px;\n\n\t\t\t/* Magic number to make the bottom border line stretch the full width */\n\t\t\twidth: 230px;\n\n\t\t\t&_ul {\n \t\t\t\t/* Magic number to line up day name headings over the correct numbers */\n\t\t\t\tpadding-left: 10px;\n\t\t\t}\n\t\t}\n\n\t\t&_weekHeaders__horizontal {\n\t\t\tmargin-left: 0\n\t\t}\n\n\t\t&_weekHeader_li {\n\t\t\t", "\n\t\t\tcolor: ", ";\n\t\t\tfont-weight: ", ";\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t&__horizontal {\n\t\t\tbox-shadow: none;\n\t\t\tbackground: ", ";\n\t\t}\n\t}\n\n    .CalendarDay {\n\t\tbackground-color: transparent;\n\n        &__selected, &__selected_span, &:hover {\n            background-color: transparent;\n\t\t}\n\n\t\t&__default {\n\t\t\tcolor: ", ";\n\t\t}\n\t\t&__default,\n\t\t&__default:hover {\n\t\t\tborder: none;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n\n    .CalendarMonth {\n\t\t", "\n\t\tbackground: ", ";\n\n \t\t/* spacing between visible months and months off canvas */\n\t\tpadding: 0 15px;\n\n\t\t&_caption {\n\t\t\t", "\n\t\t\tcolor: ", ";\n\t\t\tpadding-top: 0;\n\t\t\tbackground: ", ";\n\n\t\t\tstrong {\n\t\t\t\tfont-weight: ", ";\n\t\t\t}\n\n\t\t}\n\t\t&_table {\n\t\t\tline-height: 21.333px;\n\t\t\ttr {\n\t\t\t\tvertical-align: middle;\n\t\t\t}\n\t\t\ttd {\n\t\t\t\tpadding: 0;\n\t\t\t\tborder-bottom: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t.CalendarMonthGrid {\n\t\tbackground: ", ";\n\t}\n\n\t/* Left and Right Arrow Buttons to navigate months */\n\t.DayPickerNavigation_button__horizontal {\n\t\tcolor: ", ";\n\t\ttop: -4px;\n\t\tpadding: 7px 8px;\n\t\tposition: absolute;\n\t\tline-height: 0.78;\n\t\tborder-radius: 9999px;\n\t\tborder: none;\n\t\tbackground: ", ";\n\n\t\t&:nth-child(1) {\n\t\t\tleft: 22px;\n\t\t}\n\t\t&:nth-child(2) {\n\t\t\tright: 22px;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground: ", ";\n\t\t}\n\t}\n"])), function (_ref2) {
@@ -81,7 +82,7 @@ export var ReactDatesCssOverrides = createGlobalStyle(_templateObject || (_templ
   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];
@@ -93,7 +94,7 @@ export var ReactDatesCssOverrides = createGlobalStyle(_templateObject || (_templ
   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;
@@ -105,7 +106,7 @@ export var ReactDatesCssOverrides = createGlobalStyle(_templateObject || (_templ
   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];
@@ -114,20 +115,20 @@ export var ReactDatesCssOverrides = createGlobalStyle(_templateObject || (_templ
   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;
 });

package/lib/Drawer/styles.js

@@ -11,7 +11,7 @@ var Container = styled.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/lib/FormField/index.js

@@ -58,7 +58,7 @@ var FormField = function FormField(_ref) {
   }), isInvalid && error && /*#__PURE__*/React.createElement(Text, {
     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/lib/Input/styles.js

@@ -7,7 +7,7 @@ var Container = styled.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) {
@@ -45,7 +45,7 @@ var Container = styled.div.withConfig({
       return props.theme.typography[200].fontSize;
   }
 }, focusRing, function (props) {
-  return props.theme.colors.forms.placeholderColor;
+  return props.theme.colors.form.placeholder.base;
 }, function (props) {
   return props.hasBeforeElement && css(["padding-left:40px;"]);
 }, function (props) {
@@ -54,22 +54,22 @@ var Container = styled.div.withConfig({
   return props.disabled && css(["opacity:0.4;input{cursor:not-allowed;}"]);
 }, function (props) {
   return props.appearance === "primary" && 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 && css(["input{border-color:", ";}"], function (props) {
-    return props.theme.colors.error.color;
+    return props.theme.colors.form.border.error;
   });
 }, function (props) {
   return props.warning && css(["input{border-color:", ";}"], function (props) {
-    return props.theme.colors.warning.color;
+    return props.theme.colors.form.border.warning;
   });
 }, COMMON);
 export var Accessory = styled.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 && css(["left:", ";"], props.theme.space[350]);
 }, function (props) {

package/lib/KeyboardKey/styles.js

@@ -6,9 +6,9 @@ var Container = styled.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/lib/Link/styles.js

@@ -5,12 +5,8 @@ import { TYPOGRAPHY, COMMON } from "../utils/system-props";
 var Container = styled(Text).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) {
@@ -18,11 +14,11 @@ var Container = styled(Text).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;
 }, focusRing, function (props) {
   return !props.href && css(["background:none;"]);
 }, function (props) {

package/lib/Listbox/index.js

@@ -27,11 +27,11 @@ export var ListboxButtonContainer = styled(MenuButton).withConfig({
   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) {
@@ -72,9 +72,9 @@ export var ListboxButtonContainer = styled(MenuButton).withConfig({
   }
 }, function (props) {
   return props.invalid && css(["border-color:", ";", "{color:", ";}"], function (props) {
-    return props.theme.colors.error.border;
+    return props.theme.colors.form.border.error;
   }, Arrow, function (props) {
-    return props.theme.colors.error.color;
+    return props.theme.colors.icon.error;
   });
 });
 export var ListboxButton = function ListboxButton(_ref2) {

package/lib/Menu/index.js

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

package/lib/Menu/styles.js

@@ -4,10 +4,12 @@ import { disabled } from "../utils/mixins";
 export var MenuItemContainer = styled(Box).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 && 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) {
@@ -19,14 +21,18 @@ export var MenuItemContainer = styled(Box).withConfig({
 }, function (props) {
   return css(["", ";"], props.theme.typography[200]);
 }, function (props) {
-  return props.active && !props.disabled && css(["background-color:", ";"], props.theme.colors.background.app);
+  return props.active && !props.disabled && 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 && css(["font-weight:", ";"], function (props) {
     return props.theme.fontWeights.semibold;
   });
 }, function (props) {
-  return !props.disabled && css(["&:focus,&:hover{background-color:", ";}"], function (props) {
-    return props.theme.colors.background.app;
+  return !props.disabled && 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 ? css(["&:hover{cursor:pointer;}"]) : css(["&:hover{cursor:default;}"]);

package/lib/Message/index.js

@@ -35,7 +35,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
 });
@@ -45,7 +45,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/lib/Modal/index.js

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

package/lib/Modal/styles.js

@@ -49,7 +49,7 @@ export var Container = styled(ReactModalAdapter).withConfig({
 }, function (props) {
   return props.theme.easing.ease_inout;
 }, 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) {
@@ -85,7 +85,7 @@ export var Header = styled(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";
 });
 export var Footer = styled(Box).withConfig({
   displayName: "styles__Footer",

package/lib/Numeral/styles.js

@@ -8,5 +8,5 @@ export var AbbrContainer = styled(Text).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;
 });

package/lib/Popout/index.js

@@ -262,10 +262,10 @@ Popout.Content = function (_ref4) {
       rest = _objectWithoutPropertiesLoose(_ref4, ["children"]);
 
   return /*#__PURE__*/React.createElement(Box, _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/lib/Radio/styles.js

@@ -13,9 +13,9 @@ export var Input = styled.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) {
@@ -45,9 +45,9 @@ export var InputWrapper = styled.span.withConfig({
 }, function (props) {
   return props.disabled ? "not-allowed" : "pointer";
 }, function (props) {
-  return !props.checked && 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 && 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 && 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 && 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);
 });
 InputWrapper.displayName = "InputWrapper";
 export var LabelText = styled(Text).withConfig({

package/lib/SegmentedControl/styles.js

@@ -7,7 +7,7 @@ export var SegmentedControlContainer = styled(Box).withConfig({
   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) {
@@ -39,13 +39,13 @@ export var SegmentedControlLabel = styled(Text).withConfig({
 }, 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 && 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;
   });
 });

package/lib/Select/styles.js

@@ -5,11 +5,11 @@ var Container = styled.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) {
@@ -52,9 +52,9 @@ var Container = styled.div.withConfig({
   return props.disabled && css(["opacity:0.4;"]);
 }, function (props) {
   return props.invalid && 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;
   });
 }, COMMON);
 export var Arrow = styled.span.withConfig({
@@ -73,7 +73,7 @@ export var Arrow = styled.span.withConfig({
       return props.theme.space[350];
   }
 }, function (props) {
-  return props.theme.colors.icon.primary;
+  return props.theme.colors.icon.base;
 });
 Container.displayName = "SelectContainer";
 Arrow.displayName = "Select Arrow";

package/lib/Skeleton/index.js

@@ -5,8 +5,8 @@ var Skeleton = styled(Box).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      " + transparentize(0.7, props.theme.colors.border) + " 32%,\n      " + transparentize(0.05, props.theme.colors.border) + ",\n      " + transparentize(0.7, props.theme.colors.border) + " 68%\n    );";
+  return "linear-gradient(\n      288deg,\n      " + transparentize(0.7, props.theme.colors.container.border.base) + " 32%,\n      " + transparentize(0.05, props.theme.colors.container.border.base) + ",\n      " + transparentize(0.7, props.theme.colors.container.border.base) + " 68%\n    );";
 });
 export default Skeleton; //rgba(243, 244, 244, 0.7)

package/lib/Switch/styles.js

@@ -6,33 +6,33 @@ import Icon from "../Icon/styles";
 var Container = styled.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;
 }, focusRing, function (props) {
   if (props.checked) {
-    return 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, Icon, props.theme.colors.background.container);
+    return 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, Icon, 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 && 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;
   });
 }, COMMON);
 export default Container;

package/lib/Table/styles.js

@@ -4,6 +4,6 @@ var Container = styled.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;
 }, COMMON);
 export default Container;

package/lib/TableRowAccordion/styles.js

@@ -4,7 +4,7 @@ var Container = styled.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;
 }, COMMON); // eslint-disable-next-line prettier/prettier
 
 export var Detail = styled.tr.withConfig({