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

package/lib/Tabs/styles.js

@@ -9,7 +9,7 @@ var Container = styled.ul.withConfig({
 }, function (props) {
   return props.theme.borders[500];
 }, function (props) {
-  return props.theme.colors.border;
+  return props.theme.colors.container.border.base;
 }, COMMON);
 export var TabItem = styled.li.withConfig({
   displayName: "styles__TabItem",
@@ -22,11 +22,11 @@ export var TabItem = styled.li.withConfig({
   });
 }, function (props) {
   return props.isSelected && 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 && 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
 
@@ -39,11 +39,11 @@ export var TabButton = styled(Button).withConfig({
   return props.theme.colors.text.headline;
 }, function (props) {
   return props.isSelected && css(["color:", ";"], function (props) {
-    return props.theme.colors.cta.link.color;
+    return props.theme.colors.link.base;
   });
 }, function (props) {
   return props.isSelected && css(["color:", ";"], function (props) {
-    return props.theme.colors.cta.link.hoverColor;
+    return props.theme.colors.link.hover;
   });
 });
 export default Container;

package/lib/Textarea/styles.js

@@ -7,11 +7,11 @@ var Container = styled.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) {
@@ -29,7 +29,7 @@ var Container = styled.div.withConfig({
 }, function (props) {
   return props.theme.fontWeights.normal;
 }, focusRing, function (props) {
-  return props.theme.colors.forms.placeholderColor;
+  return props.theme.colors.form.placeholder.base;
 }, function (props) {
   return props.resizable && css(["resize:vertical;"]);
 }, function (props) {
@@ -40,14 +40,14 @@ var Container = styled.div.withConfig({
   return props.disabled && css(["opacity:0.4;textarea{cursor:not-allowed;}"]);
 }, function (props) {
   return props.invalid && css(["textarea{border-color:", ";}"], function (props) {
-    return props.theme.colors.error.color;
+    return props.theme.colors.form.border.error;
   });
 }, COMMON);
 export var Accessory = styled.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 && css(["top:", ";left:", ";"], props.theme.space[300], props.theme.space[350]);
 }, function (props) {

package/lib/ThemeProvider/index.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import * as React from "react";
 import { ThemeProvider as BaseThemeProvider } from "styled-components";
-import theme from "../utils/theme";
+import theme from "../themes/default/theme";
 
 var ThemeProvider = function ThemeProvider(props) {
   return /*#__PURE__*/React.createElement(BaseThemeProvider, _extends({}, props, {

package/lib/Toast/index.js

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

package/lib/Toast/styles.js

@@ -15,9 +15,9 @@ var Container = styled(Box).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];
 });
 export var CustomIcon = styled(Icon).withConfig({
   displayName: "styles__CustomIcon",
@@ -25,7 +25,7 @@ export var CustomIcon = styled(Icon).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];
 });
 export var GlobalToastStyles = 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"])), toastStyles, function (p) {
   return p.theme.space[400];

package/lib/Token/styles.js

@@ -15,9 +15,9 @@ var Container = styled.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) {
@@ -30,25 +30,29 @@ var Container = styled.button.withConfig({
   return props.closeable && 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 && css(["opacity:0.4;cursor:not-allowed;"]);
+  return props.disabled && 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 && css(["color:", ";border-color:", ";background:", ";&:hover{color:", ";border-color:", ";background:", ";}"], function (props) {
-    return props.theme.colors.text.inverse;
+  return !props.valid && 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.error.color;
+    return props.theme.colors.container.background.error;
   }, function (props) {
-    return props.theme.colors.text.inverse;
+    return props.theme.colors.text.body;
   }, function (props) {
-    return props.theme.colors.red[900];
+    return props.theme.colors.container.border.error;
   }, function (props) {
-    return props.theme.colors.red[900];
+    return props.theme.colors.container.background.error;
   });
 }, COMMON);
 export default Container;

package/lib/TokenInput/index.js

@@ -192,7 +192,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,
@@ -206,7 +208,8 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
         return _this2.handleClickToken(e, token);
       },
       valid: valid,
-      active: isActive
+      active: isActive,
+      disabled: disabled
     }, /*#__PURE__*/React.createElement(Box, {
       display: "flex",
       alignItems: "center"
@@ -229,39 +232,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(Container, _extends({

package/lib/TokenInput/styles.js

@@ -4,8 +4,8 @@ import { focusRing } from "../utils/mixins";
 var Container = styled.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) {
@@ -13,7 +13,7 @@ var Container = styled.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) {
@@ -47,9 +47,11 @@ var Container = styled.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 && css(["opacity:0.4;cursor:not-allowed;"]);
+}, function (props) {
+  return props.theme.colors.form.placeholder.base;
 }, function (props) {
   return props.hasBeforeElement && css(["padding-left:40px;"]);
 }, function (props) {
@@ -60,11 +62,11 @@ var Container = styled.div.withConfig({
   return props.focused && css(["", ""], focusRing);
 }, function (props) {
   return props.invalid && css(["border-color:", ";"], function (props) {
-    return props.theme.colors.error.color;
+    return props.theme.colors.form.border.error;
   });
 }, function (props) {
   return props.warning && css(["border-color:", ";"], function (props) {
-    return props.theme.colors.warning.color;
+    return props.theme.colors.form.border.warning;
   });
 }, COMMON);
 Container.displayName = "TokenInputContainer";

package/lib/Tooltip/index.js

@@ -117,10 +117,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/lib/index.js

@@ -1,7 +1,7 @@
 export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
 export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
-export { default as theme } from "./utils/theme";
-export { default as darkTheme } from "./themes/dark";
+export { default as theme } from "./themes/default/theme";
+export { default as darkTheme } from "./themes/dark/theme";
 export { default as Icon } from "./Icon"; // DEPRECATED: Alert has been renamed to Banner
 
 export { default as Alert } from "./Banner";

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

@@ -0,0 +1,36 @@
+import COLORS from "@sproutsocial/seeds-color";
+export var green = {
+  background: COLORS.COLOR_GREEN_900,
+  highlight: COLORS.COLOR_GREEN_500,
+  foreground: COLORS.COLOR_GREEN_100
+};
+export var blue = {
+  background: COLORS.COLOR_BLUE_900,
+  highlight: COLORS.COLOR_BLUE_600,
+  foreground: COLORS.COLOR_BLUE_100
+};
+export var purple = {
+  background: COLORS.COLOR_PURPLE_800,
+  highlight: COLORS.COLOR_PURPLE_500,
+  foreground: COLORS.COLOR_PURPLE_100
+};
+export var yellow = {
+  background: COLORS.COLOR_YELLOW_900,
+  highlight: COLORS.COLOR_YELLOW_600,
+  foreground: COLORS.COLOR_YELLOW_100
+};
+export var orange = {
+  background: COLORS.COLOR_ORANGE_900,
+  highlight: COLORS.COLOR_ORANGE_600,
+  foreground: COLORS.COLOR_ORANGE_100
+};
+export var red = {
+  background: COLORS.COLOR_RED_900,
+  highlight: COLORS.COLOR_RED_600,
+  foreground: COLORS.COLOR_RED_100
+};
+export var neutral = {
+  background: COLORS.COLOR_NEUTRAL_900,
+  highlight: COLORS.COLOR_NEUTRAL_500,
+  foreground: COLORS.COLOR_NEUTRAL_100
+};

package/lib/themes/dark/theme.js

@@ -0,0 +1,185 @@
+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); }
+
+import COLORS from "@sproutsocial/seeds-color";
+import defaultTheme from "../default/theme";
+import { green, blue, purple, yellow, orange, red, neutral } from "./decorative-palettes";
+
+var darkTheme = _extends({}, defaultTheme, {
+  colors: _extends({}, defaultTheme.colors, {
+    app: {
+      background: {
+        base: COLORS.COLOR_NEUTRAL_1000
+      }
+    },
+    container: {
+      background: {
+        base: COLORS.COLOR_NEUTRAL_900,
+        success: green.background,
+        warning: yellow.background,
+        error: red.background,
+        info: blue.background,
+        opportunity: purple.background,
+        danger: red.background,
+        decorative: {
+          green: green.background,
+          blue: blue.background,
+          purple: purple.background,
+          yellow: yellow.background,
+          orange: orange.background,
+          red: red.background,
+          neutral: neutral.background
+        },
+        selected: COLORS.COLOR_NEUTRAL_0
+      },
+      border: {
+        base: COLORS.COLOR_NEUTRAL_1100,
+        success: green.highlight,
+        warning: yellow.highlight,
+        error: red.highlight,
+        danger: red.highlight,
+        info: blue.highlight,
+        opportunity: purple.highlight,
+        decorative: {
+          green: green.highlight,
+          blue: blue.highlight,
+          purple: purple.highlight,
+          yellow: yellow.highlight,
+          orange: orange.highlight,
+          red: red.highlight,
+          neutral: neutral.highlight
+        },
+        selected: COLORS.COLOR_NEUTRAL_0
+      }
+    },
+    button: {
+      primary: {
+        background: {
+          base: COLORS.COLOR_BLUE_400,
+          hover: COLORS.COLOR_BLUE_300,
+          active: COLORS.COLOR_BLUE_200
+        },
+        border: {
+          base: "transparent"
+        },
+        text: {
+          base: COLORS.COLOR_NEUTRAL_900,
+          hover: COLORS.COLOR_NEUTRAL_1000
+        }
+      },
+      secondary: {
+        background: {
+          base: "transparent",
+          hover: COLORS.COLOR_NEUTRAL_100,
+          active: COLORS.COLOR_NEUTRAL_0
+        },
+        border: {
+          base: COLORS.COLOR_NEUTRAL_0
+        },
+        text: {
+          base: COLORS.COLOR_NEUTRAL_0,
+          hover: COLORS.COLOR_NEUTRAL_800
+        }
+      },
+      pill: {
+        background: {
+          base: "transparent",
+          hover: COLORS.COLOR_NEUTRAL_1000,
+          active: COLORS.COLOR_NEUTRAL_900
+        },
+        border: {
+          base: "transparent"
+        },
+        text: {
+          base: COLORS.COLOR_NEUTRAL_100,
+          hover: COLORS.COLOR_NEUTRAL_0
+        }
+      },
+      destructive: {
+        background: {
+          base: COLORS.COLOR_RED_400,
+          hover: COLORS.COLOR_RED_300,
+          active: COLORS.COLOR_RED_200
+        },
+        border: {
+          base: "transparent"
+        },
+        text: {
+          base: COLORS.COLOR_NEUTRAL_900,
+          hover: COLORS.COLOR_NEUTRAL_1000
+        }
+      },
+      placeholder: {
+        background: {
+          base: "transparent",
+          hover: COLORS.COLOR_NEUTRAL_1100,
+          active: COLORS.COLOR_NEUTRAL_1100
+        },
+        border: {
+          base: COLORS.COLOR_NEUTRAL_500
+        },
+        text: {
+          base: COLORS.COLOR_BLUE_400,
+          hover: COLORS.COLOR_BLUE_300
+        }
+      },
+      unstyled: {
+        background: {
+          base: "transparent"
+        },
+        border: {
+          base: "transparent"
+        },
+        text: {
+          base: COLORS.COLOR_NEUTRAL_300,
+          hover: COLORS.COLOR_NEUTRAL_200
+        }
+      }
+    },
+    link: {
+      base: COLORS.COLOR_BLUE_400,
+      hover: COLORS.COLOR_BLUE_300
+    },
+    text: {
+      headline: COLORS.COLOR_NEUTRAL_0,
+      subtext: COLORS.COLOR_NEUTRAL_300,
+      body: COLORS.COLOR_NEUTRAL_100,
+      inverse: COLORS.COLOR_NEUTRAL_900,
+      error: COLORS.COLOR_RED_400
+    },
+    icon: {
+      base: COLORS.COLOR_NEUTRAL_100,
+      inverse: COLORS.COLOR_NEUTRAL_900,
+      success: green.foreground,
+      warning: yellow.foreground,
+      error: red.foreground,
+      danger: red.foreground,
+      info: blue.foreground,
+      opportunity: purple.foreground
+    },
+    form: {
+      background: {
+        base: COLORS.COLOR_NEUTRAL_900,
+        selected: COLORS.COLOR_NEUTRAL_0
+      },
+      border: {
+        base: COLORS.COLOR_NEUTRAL_500,
+        error: red.highlight,
+        warning: yellow.highlight,
+        selected: COLORS.COLOR_NEUTRAL_0
+      },
+      placeholder: {
+        base: COLORS.COLOR_NEUTRAL_500
+      }
+    },
+    listItem: {
+      background: {
+        base: "transparent",
+        hover: COLORS.COLOR_NEUTRAL_800,
+        selected: COLORS.COLOR_NEUTRAL_0
+      }
+    }
+  }),
+  mode: "dark"
+});
+
+export default darkTheme;

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

@@ -0,0 +1,36 @@
+import COLORS from "@sproutsocial/seeds-color";
+export var green = {
+  background: COLORS.COLOR_GREEN_100,
+  highlight: COLORS.COLOR_GREEN_500,
+  foreground: COLORS.COLOR_GREEN_900
+};
+export var blue = {
+  background: COLORS.COLOR_BLUE_100,
+  highlight: COLORS.COLOR_BLUE_600,
+  foreground: COLORS.COLOR_BLUE_900
+};
+export var purple = {
+  background: COLORS.COLOR_PURPLE_100,
+  highlight: COLORS.COLOR_PURPLE_500,
+  foreground: COLORS.COLOR_PURPLE_800
+};
+export var yellow = {
+  background: COLORS.COLOR_YELLOW_100,
+  highlight: COLORS.COLOR_YELLOW_600,
+  foreground: COLORS.COLOR_YELLOW_900
+};
+export var orange = {
+  background: COLORS.COLOR_ORANGE_100,
+  highlight: COLORS.COLOR_ORANGE_600,
+  foreground: COLORS.COLOR_ORANGE_900
+};
+export var red = {
+  background: COLORS.COLOR_RED_100,
+  highlight: COLORS.COLOR_RED_600,
+  foreground: COLORS.COLOR_RED_900
+};
+export var neutral = {
+  background: COLORS.COLOR_NEUTRAL_100,
+  highlight: COLORS.COLOR_NEUTRAL_500,
+  foreground: COLORS.COLOR_NEUTRAL_900
+};