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

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);
 

package/commonjs/TokenInput/index.js

@@ -210,7 +210,9 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
   _proto.renderToken = function renderToken(token) {
     var _this2 = this;
 
-    var defaultIconName = this.props.iconName;
+    var _this$props4 = this.props,
+        defaultIconName = _this$props4.iconName,
+        disabled = _this$props4.disabled;
     var activeId = this.state.activeToken;
     var id = token.id,
         tokenIconName = token.iconName,
@@ -224,7 +226,8 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
         return _this2.handleClickToken(e, token);
       },
       valid: valid,
-      active: isActive
+      active: isActive,
+      disabled: disabled
     }, /*#__PURE__*/React.createElement(_Box.default, {
       display: "flex",
       alignItems: "center"
@@ -247,39 +250,39 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.render = function render() {
-    var _this$props4 = this.props,
-        autoFocus = _this$props4.autoFocus,
-        autocomplete = _this$props4.autocomplete,
-        disabled = _this$props4.disabled,
-        isInvalid = _this$props4.isInvalid,
-        hasWarning = _this$props4.hasWarning,
-        id = _this$props4.id,
-        name = _this$props4.name,
-        placeholder = _this$props4.placeholder,
-        required = _this$props4.required,
-        value = _this$props4.value,
-        elemBefore = _this$props4.elemBefore,
-        elemAfter = _this$props4.elemAfter,
-        maxLength = _this$props4.maxLength,
-        ariaDescribedby = _this$props4.ariaDescribedby,
-        ariaLabel = _this$props4.ariaLabel,
-        innerRef = _this$props4.innerRef,
-        onAddToken = _this$props4.onAddToken,
-        onRemoveToken = _this$props4.onRemoveToken,
-        onChangeTokens = _this$props4.onChangeTokens,
-        onClickToken = _this$props4.onClickToken,
-        onBlur = _this$props4.onBlur,
-        onChange = _this$props4.onChange,
-        onFocus = _this$props4.onFocus,
-        onKeyDown = _this$props4.onKeyDown,
-        onKeyUp = _this$props4.onKeyUp,
-        onPaste = _this$props4.onPaste,
-        _this$props4$inputPro = _this$props4.inputProps,
-        inputProps = _this$props4$inputPro === void 0 ? {} : _this$props4$inputPro,
-        _this$props4$qa = _this$props4.qa,
-        qa = _this$props4$qa === void 0 ? {} : _this$props4$qa,
-        tokens = _this$props4.tokens,
-        rest = _objectWithoutPropertiesLoose(_this$props4, ["autoFocus", "autocomplete", "disabled", "isInvalid", "hasWarning", "id", "name", "placeholder", "required", "value", "elemBefore", "elemAfter", "maxLength", "ariaDescribedby", "ariaLabel", "innerRef", "onAddToken", "onRemoveToken", "onChangeTokens", "onClickToken", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "tokens"]);
+    var _this$props5 = this.props,
+        autoFocus = _this$props5.autoFocus,
+        autocomplete = _this$props5.autocomplete,
+        disabled = _this$props5.disabled,
+        isInvalid = _this$props5.isInvalid,
+        hasWarning = _this$props5.hasWarning,
+        id = _this$props5.id,
+        name = _this$props5.name,
+        placeholder = _this$props5.placeholder,
+        required = _this$props5.required,
+        value = _this$props5.value,
+        elemBefore = _this$props5.elemBefore,
+        elemAfter = _this$props5.elemAfter,
+        maxLength = _this$props5.maxLength,
+        ariaDescribedby = _this$props5.ariaDescribedby,
+        ariaLabel = _this$props5.ariaLabel,
+        innerRef = _this$props5.innerRef,
+        onAddToken = _this$props5.onAddToken,
+        onRemoveToken = _this$props5.onRemoveToken,
+        onChangeTokens = _this$props5.onChangeTokens,
+        onClickToken = _this$props5.onClickToken,
+        onBlur = _this$props5.onBlur,
+        onChange = _this$props5.onChange,
+        onFocus = _this$props5.onFocus,
+        onKeyDown = _this$props5.onKeyDown,
+        onKeyUp = _this$props5.onKeyUp,
+        onPaste = _this$props5.onPaste,
+        _this$props5$inputPro = _this$props5.inputProps,
+        inputProps = _this$props5$inputPro === void 0 ? {} : _this$props5$inputPro,
+        _this$props5$qa = _this$props5.qa,
+        qa = _this$props5$qa === void 0 ? {} : _this$props5$qa,
+        tokens = _this$props5.tokens,
+        rest = _objectWithoutPropertiesLoose(_this$props5, ["autoFocus", "autocomplete", "disabled", "isInvalid", "hasWarning", "id", "name", "placeholder", "required", "value", "elemBefore", "elemAfter", "maxLength", "ariaDescribedby", "ariaLabel", "innerRef", "onAddToken", "onRemoveToken", "onChangeTokens", "onClickToken", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "tokens"]);
 
     var state = this.state;
     return /*#__PURE__*/React.createElement(_styles.default, _extends({

package/commonjs/TokenInput/styles.js

@@ -16,8 +16,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Container = _styledComponents.default.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-19um4n4-0"
-})(["box-sizing:border-box;position:relative;display:flex;flex-wrap:wrap;align-items:center;align-content:center;cursor:text;width:100%;border:1px solid ", ";border-radius:", ";margin:0;padding:", ";padding-top:", ";background-color:", ";color:", ";transition:border-color ", " ", ",box-shadow ", " ", ";", ";font-family:", ";font-weight:", ";appearance:none;button{margin:", " ", " 0 0;}input{", ";outline:none;border:none;flex:1;padding:0;padding-top:", ";margin:", " ", " ", " 0;color:", ";background-color:", ";min-height:20px;&::-webkit-search-cancel-button{appearance:none;}&:focus{box-shadow:none;}&::-ms-clear{display:none;}&:not(output):not(:focus):-moz-ui-invalid{box-shadow:none;}}&:placeholder{color:", ";}", " ", " ", " ", " ", " ", " ", ""], function (props) {
-  return props.theme.colors.forms.borderColor;
+})(["box-sizing:border-box;position:relative;display:flex;flex-wrap:wrap;align-items:center;align-content:center;cursor:text;width:100%;border:1px solid ", ";border-radius:", ";margin:0;padding:", ";padding-top:", ";background-color:", ";color:", ";transition:border-color ", " ", ",box-shadow ", " ", ";", ";font-family:", ";font-weight:", ";appearance:none;button{margin:", " ", " 0 0;}input{", ";outline:none;border:none;flex:1;padding:0;padding-top:", ";margin:", " ", " ", " 0;color:", ";background-color:", ";min-height:20px;&::-webkit-search-cancel-button{appearance:none;}&:focus{box-shadow:none;}&::-ms-clear{display:none;}&:not(output):not(:focus):-moz-ui-invalid{box-shadow:none;}", "}&:placeholder{color:", ";}", " ", " ", " ", " ", " ", " ", ""], function (props) {
+  return props.theme.colors.form.border.base;
 }, function (props) {
   return props.theme.radii[500];
 }, function (props) {
@@ -25,7 +25,7 @@ var Container = _styledComponents.default.div.withConfig({
 }, 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.colors.text.body;
 }, function (props) {
@@ -59,9 +59,11 @@ var Container = _styledComponents.default.div.withConfig({
 }, function (props) {
   return props.theme.colors.text.body;
 }, function (props) {
-  return props.theme.colors.background.container;
+  return props.theme.colors.form.background.base;
 }, function (props) {
-  return props.theme.colors.forms.placeholderColor;
+  return props.disabled && (0, _styledComponents.css)(["opacity:0.4;cursor:not-allowed;"]);
+}, function (props) {
+  return props.theme.colors.form.placeholder.base;
 }, function (props) {
   return props.hasBeforeElement && (0, _styledComponents.css)(["padding-left:40px;"]);
 }, function (props) {
@@ -72,11 +74,11 @@ var Container = _styledComponents.default.div.withConfig({
   return props.focused && (0, _styledComponents.css)(["", ""], _mixins.focusRing);
 }, function (props) {
   return props.invalid && (0, _styledComponents.css)(["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)(["border-color:", ";"], function (props) {
-    return props.theme.colors.warning.color;
+    return props.theme.colors.form.border.warning;
   });
 }, _systemProps.COMMON);
 

package/commonjs/Tooltip/index.js

@@ -131,10 +131,10 @@ var Content = function Content(_ref2) {
     py: appearance === "box" ? 400 : 200,
     m: 200,
     color: "text.body",
-    bg: "background.container",
+    bg: "container.background.base",
     boxShadow: 300,
     border: 500,
-    borderColor: "border" // $FlowIssue - upgrade v0.112.0
+    borderColor: "container.border.base" // $FlowIssue - upgrade v0.112.0
 
   }, rest), children);
 };

package/commonjs/index.js

@@ -15,13 +15,13 @@ exports.useSelect = _hooks.useSelect;
 exports.useMultiselect = _hooks.useMultiselect;
 exports.useTextContent = _hooks.useTextContent;
 
-var _theme = _interopRequireDefault(require("./utils/theme"));
+var _theme = _interopRequireDefault(require("./themes/default/theme"));
 
 exports.theme = _theme.default;
 
-var _dark = _interopRequireDefault(require("./themes/dark"));
+var _theme2 = _interopRequireDefault(require("./themes/dark/theme"));
 
-exports.darkTheme = _dark.default;
+exports.darkTheme = _theme2.default;
 
 var _Icon = _interopRequireDefault(require("./Icon"));
 

package/commonjs/themes/dark/decorative-palettes.js

@@ -0,0 +1,51 @@
+"use strict";
+
+exports.__esModule = true;
+exports.neutral = exports.red = exports.orange = exports.yellow = exports.purple = exports.blue = exports.green = void 0;
+
+var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var green = {
+  background: _seedsColor.default.COLOR_GREEN_900,
+  highlight: _seedsColor.default.COLOR_GREEN_500,
+  foreground: _seedsColor.default.COLOR_GREEN_100
+};
+exports.green = green;
+var blue = {
+  background: _seedsColor.default.COLOR_BLUE_900,
+  highlight: _seedsColor.default.COLOR_BLUE_600,
+  foreground: _seedsColor.default.COLOR_BLUE_100
+};
+exports.blue = blue;
+var purple = {
+  background: _seedsColor.default.COLOR_PURPLE_800,
+  highlight: _seedsColor.default.COLOR_PURPLE_500,
+  foreground: _seedsColor.default.COLOR_PURPLE_100
+};
+exports.purple = purple;
+var yellow = {
+  background: _seedsColor.default.COLOR_YELLOW_900,
+  highlight: _seedsColor.default.COLOR_YELLOW_600,
+  foreground: _seedsColor.default.COLOR_YELLOW_100
+};
+exports.yellow = yellow;
+var orange = {
+  background: _seedsColor.default.COLOR_ORANGE_900,
+  highlight: _seedsColor.default.COLOR_ORANGE_600,
+  foreground: _seedsColor.default.COLOR_ORANGE_100
+};
+exports.orange = orange;
+var red = {
+  background: _seedsColor.default.COLOR_RED_900,
+  highlight: _seedsColor.default.COLOR_RED_600,
+  foreground: _seedsColor.default.COLOR_RED_100
+};
+exports.red = red;
+var neutral = {
+  background: _seedsColor.default.COLOR_NEUTRAL_900,
+  highlight: _seedsColor.default.COLOR_NEUTRAL_500,
+  foreground: _seedsColor.default.COLOR_NEUTRAL_100
+};
+exports.neutral = neutral;

package/commonjs/themes/dark/theme.js

@@ -0,0 +1,195 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
+
+var _theme = _interopRequireDefault(require("../default/theme"));
+
+var _decorativePalettes = require("./decorative-palettes");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var darkTheme = _extends({}, _theme.default, {
+  colors: _extends({}, _theme.default.colors, {
+    app: {
+      background: {
+        base: _seedsColor.default.COLOR_NEUTRAL_1000
+      }
+    },
+    container: {
+      background: {
+        base: _seedsColor.default.COLOR_NEUTRAL_900,
+        success: _decorativePalettes.green.background,
+        warning: _decorativePalettes.yellow.background,
+        error: _decorativePalettes.red.background,
+        info: _decorativePalettes.blue.background,
+        opportunity: _decorativePalettes.purple.background,
+        danger: _decorativePalettes.red.background,
+        decorative: {
+          green: _decorativePalettes.green.background,
+          blue: _decorativePalettes.blue.background,
+          purple: _decorativePalettes.purple.background,
+          yellow: _decorativePalettes.yellow.background,
+          orange: _decorativePalettes.orange.background,
+          red: _decorativePalettes.red.background,
+          neutral: _decorativePalettes.neutral.background
+        },
+        selected: _seedsColor.default.COLOR_NEUTRAL_0
+      },
+      border: {
+        base: _seedsColor.default.COLOR_NEUTRAL_1100,
+        success: _decorativePalettes.green.highlight,
+        warning: _decorativePalettes.yellow.highlight,
+        error: _decorativePalettes.red.highlight,
+        danger: _decorativePalettes.red.highlight,
+        info: _decorativePalettes.blue.highlight,
+        opportunity: _decorativePalettes.purple.highlight,
+        decorative: {
+          green: _decorativePalettes.green.highlight,
+          blue: _decorativePalettes.blue.highlight,
+          purple: _decorativePalettes.purple.highlight,
+          yellow: _decorativePalettes.yellow.highlight,
+          orange: _decorativePalettes.orange.highlight,
+          red: _decorativePalettes.red.highlight,
+          neutral: _decorativePalettes.neutral.highlight
+        },
+        selected: _seedsColor.default.COLOR_NEUTRAL_0
+      }
+    },
+    button: {
+      primary: {
+        background: {
+          base: _seedsColor.default.COLOR_BLUE_400,
+          hover: _seedsColor.default.COLOR_BLUE_300,
+          active: _seedsColor.default.COLOR_BLUE_200
+        },
+        border: {
+          base: "transparent"
+        },
+        text: {
+          base: _seedsColor.default.COLOR_NEUTRAL_900,
+          hover: _seedsColor.default.COLOR_NEUTRAL_1000
+        }
+      },
+      secondary: {
+        background: {
+          base: "transparent",
+          hover: _seedsColor.default.COLOR_NEUTRAL_100,
+          active: _seedsColor.default.COLOR_NEUTRAL_0
+        },
+        border: {
+          base: _seedsColor.default.COLOR_NEUTRAL_0
+        },
+        text: {
+          base: _seedsColor.default.COLOR_NEUTRAL_0,
+          hover: _seedsColor.default.COLOR_NEUTRAL_800
+        }
+      },
+      pill: {
+        background: {
+          base: "transparent",
+          hover: _seedsColor.default.COLOR_NEUTRAL_1000,
+          active: _seedsColor.default.COLOR_NEUTRAL_900
+        },
+        border: {
+          base: "transparent"
+        },
+        text: {
+          base: _seedsColor.default.COLOR_NEUTRAL_100,
+          hover: _seedsColor.default.COLOR_NEUTRAL_0
+        }
+      },
+      destructive: {
+        background: {
+          base: _seedsColor.default.COLOR_RED_400,
+          hover: _seedsColor.default.COLOR_RED_300,
+          active: _seedsColor.default.COLOR_RED_200
+        },
+        border: {
+          base: "transparent"
+        },
+        text: {
+          base: _seedsColor.default.COLOR_NEUTRAL_900,
+          hover: _seedsColor.default.COLOR_NEUTRAL_1000
+        }
+      },
+      placeholder: {
+        background: {
+          base: "transparent",
+          hover: _seedsColor.default.COLOR_NEUTRAL_1100,
+          active: _seedsColor.default.COLOR_NEUTRAL_1100
+        },
+        border: {
+          base: _seedsColor.default.COLOR_NEUTRAL_500
+        },
+        text: {
+          base: _seedsColor.default.COLOR_BLUE_400,
+          hover: _seedsColor.default.COLOR_BLUE_300
+        }
+      },
+      unstyled: {
+        background: {
+          base: "transparent"
+        },
+        border: {
+          base: "transparent"
+        },
+        text: {
+          base: _seedsColor.default.COLOR_NEUTRAL_300,
+          hover: _seedsColor.default.COLOR_NEUTRAL_200
+        }
+      }
+    },
+    link: {
+      base: _seedsColor.default.COLOR_BLUE_400,
+      hover: _seedsColor.default.COLOR_BLUE_300
+    },
+    text: {
+      headline: _seedsColor.default.COLOR_NEUTRAL_0,
+      subtext: _seedsColor.default.COLOR_NEUTRAL_300,
+      body: _seedsColor.default.COLOR_NEUTRAL_100,
+      inverse: _seedsColor.default.COLOR_NEUTRAL_900,
+      error: _seedsColor.default.COLOR_RED_400
+    },
+    icon: {
+      base: _seedsColor.default.COLOR_NEUTRAL_100,
+      inverse: _seedsColor.default.COLOR_NEUTRAL_900,
+      success: _decorativePalettes.green.foreground,
+      warning: _decorativePalettes.yellow.foreground,
+      error: _decorativePalettes.red.foreground,
+      danger: _decorativePalettes.red.foreground,
+      info: _decorativePalettes.blue.foreground,
+      opportunity: _decorativePalettes.purple.foreground
+    },
+    form: {
+      background: {
+        base: _seedsColor.default.COLOR_NEUTRAL_900,
+        selected: _seedsColor.default.COLOR_NEUTRAL_0
+      },
+      border: {
+        base: _seedsColor.default.COLOR_NEUTRAL_500,
+        error: _decorativePalettes.red.highlight,
+        warning: _decorativePalettes.yellow.highlight,
+        selected: _seedsColor.default.COLOR_NEUTRAL_0
+      },
+      placeholder: {
+        base: _seedsColor.default.COLOR_NEUTRAL_500
+      }
+    },
+    listItem: {
+      background: {
+        base: "transparent",
+        hover: _seedsColor.default.COLOR_NEUTRAL_800,
+        selected: _seedsColor.default.COLOR_NEUTRAL_0
+      }
+    }
+  }),
+  mode: "dark"
+});
+
+var _default = darkTheme;
+exports.default = _default;

package/commonjs/themes/default/decorative-palettes.js

@@ -0,0 +1,51 @@
+"use strict";
+
+exports.__esModule = true;
+exports.neutral = exports.red = exports.orange = exports.yellow = exports.purple = exports.blue = exports.green = void 0;
+
+var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var green = {
+  background: _seedsColor.default.COLOR_GREEN_100,
+  highlight: _seedsColor.default.COLOR_GREEN_500,
+  foreground: _seedsColor.default.COLOR_GREEN_900
+};
+exports.green = green;
+var blue = {
+  background: _seedsColor.default.COLOR_BLUE_100,
+  highlight: _seedsColor.default.COLOR_BLUE_600,
+  foreground: _seedsColor.default.COLOR_BLUE_900
+};
+exports.blue = blue;
+var purple = {
+  background: _seedsColor.default.COLOR_PURPLE_100,
+  highlight: _seedsColor.default.COLOR_PURPLE_500,
+  foreground: _seedsColor.default.COLOR_PURPLE_800
+};
+exports.purple = purple;
+var yellow = {
+  background: _seedsColor.default.COLOR_YELLOW_100,
+  highlight: _seedsColor.default.COLOR_YELLOW_600,
+  foreground: _seedsColor.default.COLOR_YELLOW_900
+};
+exports.yellow = yellow;
+var orange = {
+  background: _seedsColor.default.COLOR_ORANGE_100,
+  highlight: _seedsColor.default.COLOR_ORANGE_600,
+  foreground: _seedsColor.default.COLOR_ORANGE_900
+};
+exports.orange = orange;
+var red = {
+  background: _seedsColor.default.COLOR_RED_100,
+  highlight: _seedsColor.default.COLOR_RED_600,
+  foreground: _seedsColor.default.COLOR_RED_900
+};
+exports.red = red;
+var neutral = {
+  background: _seedsColor.default.COLOR_NEUTRAL_100,
+  highlight: _seedsColor.default.COLOR_NEUTRAL_500,
+  foreground: _seedsColor.default.COLOR_NEUTRAL_900
+};
+exports.neutral = neutral;