@sproutsocial/racine 8.8.0-dar35-beta.1 → 9.0.1

package/__flow__/types/system-props.flow.js

@@ -67,7 +67,6 @@ export type TypeSystemCommonProps = $ReadOnly<{|
   ...TypeSpaceProps,
   cursor?: TypeResponsiveBase<>,
 |}>;
-
 export type TypeSystemBorderProps = $ReadOnly<{|
   border?: TypeResponsiveBase<>,
   borderWidth?: TypeResponsiveBase<>,
@@ -85,7 +84,7 @@ export type TypeSystemBorderProps = $ReadOnly<{|
   borderX?: TypeResponsiveBase<>,
   borderY?: TypeResponsiveBase<>,
   boxShadow?: TypeResponsiveBase<>,
-  textShadow?: TypeResponsiveBase<>,
+  textShadow?: TypeResponsiveBase<>
 |}>;
 
 type TypeResponsiveTypeographySize = TypeResponsiveString<TypeTypography>;

package/commonjs/Button/styles.js

@@ -47,7 +47,7 @@ var Container = _styledComponents.default.button.withConfig({
 }, function (props) {
   return props.theme.colors.button[props.appearance].background.hover;
 }, function (props) {
-  return props.appearance === "placeholder" ? props.theme.shadows[100] : "none";
+  return props.appearance === "placeholder" ? props.theme.shadows.low : "none";
 }, function (props) {
   return props.theme.colors.button[props.appearance].text.hover;
 }, function (props) {

package/commonjs/Card/styles.js

@@ -19,7 +19,7 @@ var Container = (0, _styledComponents.default)(_Box.default).withConfig({
 }, function (props) {
   return props.theme.radii[500];
 }, function (props) {
-  return props.theme.shadows[100];
+  return props.theme.shadows.low;
 }, function (props) {
   return props.theme.duration.medium;
 }, function (props) {

package/commonjs/Drawer/styles.js

@@ -29,7 +29,7 @@ var Container = _styledComponents.default.div.withConfig({
 }, function (props) {
   return props.theme.colors.container.background.base;
 }, function (props) {
-  return props.theme.shadows[400];
+  return props.theme.shadows.high;
 }, function (props) {
   return (0, _styledComponents.css)(["", ":", "px;"], props.direction, props.offset);
 }, _systemProps.COMMON);

package/commonjs/KeyboardKey/styles.js

@@ -21,7 +21,7 @@ var Container = _styledComponents.default.div.withConfig({
 }, function (props) {
   return props.theme.radii[500];
 }, function (props) {
-  return props.theme.shadows[100];
+  return props.theme.shadows.low;
 }, function (props) {
   return props.theme.space[200];
 }, _systemProps.COMMON);

package/commonjs/Menu/index.js

@@ -277,7 +277,9 @@ var MenuGroup = function MenuGroup(_ref2) {
     mt: 350,
     color: "text.headline",
     _css: isDisabled && _mixins.disabled
-  }, title)), /*#__PURE__*/React.createElement(_styles.MenuGroupContainer, _extends({}, props, {
+  }, title)), /*#__PURE__*/React.createElement(_Box.default, _extends({}, props, {
+    m: 300,
+    p: 300,
     role: "group"
   }), children));
 };

package/commonjs/Menu/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.MenuItemsContainer = exports.MenuGroupContainer = exports.MenuItemContainer = void 0;
+exports.MenuItemsContainer = exports.MenuItemContainer = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -56,21 +56,8 @@ var MenuItemContainer = (0, _styledComponents.default)(_Box.default).withConfig(
   return props.disabled && _mixins.disabled;
 });
 exports.MenuItemContainer = MenuItemContainer;
-var MenuGroupContainer = (0, _styledComponents.default)(_Box.default).withConfig({
-  displayName: "styles__MenuGroupContainer",
-  componentId: "fjvae4-1"
-})(["", ";"], function (props) {
-  return props.appearance === "flush" ? (0, _styledComponents.css)(["margin:0 -", ";"], function (props) {
-    return props.theme.space[300];
-  }) : (0, _styledComponents.css)(["padding:", ";"], function (props) {
-    return props.theme.space[300];
-  });
-});
-exports.MenuGroupContainer = MenuGroupContainer;
 var MenuItemsContainer = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MenuItemsContainer",
-  componentId: "fjvae4-2"
+  componentId: "fjvae4-1"
 })(["list-style-type:none;outline:0;"]);
-exports.MenuItemsContainer = MenuItemsContainer;
-var _default = MenuGroupContainer;
-exports.default = _default;
+exports.MenuItemsContainer = MenuItemsContainer;

package/commonjs/Modal/styles.js

@@ -72,7 +72,7 @@ var Container = (0, _styledComponents.default)(ReactModalAdapter).withConfig({
 }, function (props) {
   return props.theme.radii[500];
 }, function (props) {
-  return props.theme.shadows[300];
+  return props.theme.shadows.medium;
 }, function (props) {
   return props.theme.colors.text.body;
 }, BODY_PADDING, BODY_PADDING, BODY_PADDING, _styledSystem.width, _systemProps.COMMON);

package/commonjs/Popout/index.js

@@ -290,7 +290,7 @@ Popout.Content = function (_ref4) {
     border: 500,
     borderColor: "container.border.base",
     borderRadius: "outer",
-    boxShadow: 300,
+    boxShadow: "medium",
     p: 400,
     m: 300
   }, rest), children);

package/commonjs/Token/index.js

@@ -33,14 +33,17 @@ var Token = function Token(_ref) {
       valid = _ref$valid === void 0 ? true : _ref$valid,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "closeable", "onClick", "qa", "valid", "disabled"]);
+      _ref$palette = _ref.palette,
+      palette = _ref$palette === void 0 ? "neutral" : _ref$palette,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "closeable", "onClick", "qa", "valid", "disabled", "palette"]);
 
   var textContainer = (0, _hooks.useTextContent)("");
   return /*#__PURE__*/React.createElement(_styles.default, _extends({
     ref: textContainer,
     valid: valid,
-    as: closeable || onClick ? "button" : "div",
+    palette: palette,
     type: closeable || onClick ? "button" : undefined,
+    as: closeable || onClick ? "button" : "div",
     closeable: closeable || onClick,
     disabled: disabled,
     onClick: onClick,

package/commonjs/Token/styles.js

@@ -16,56 +16,25 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Container = _styledComponents.default.button.withConfig({
   displayName: "styles__Container",
   componentId: "nyn5zy-0"
-})(["font-family:", ";", ";position:relative;display:inline-block;padding:", " ", ";margin:0;color:", ";background:", ";border:1px solid ", ";font-weight:", ";line-height:1;vertical-align:middle;border-radius:", ";outline:none;transition:all ", " ", ";&:focus{", "}", " ", " ", " ", ""], function (props) {
-  return props.theme.fontFamily;
-}, function (props) {
-  return props.theme.typography[200];
-}, function (props) {
-  return props.theme.space[200];
-}, function (props) {
-  return props.theme.space[300];
-}, function (props) {
-  return props.theme.colors.text.body;
-}, function (props) {
-  return props.theme.colors.container.background.base;
-}, function (props) {
-  return props.theme.colors.container.border.base;
-}, function (props) {
-  return props.theme.fontWeights.normal;
-}, function (props) {
-  return props.theme.radii[500];
-}, function (props) {
-  return props.theme.duration.fast;
-}, function (props) {
-  return props.theme.easing.ease_inout;
-}, _mixins.focusRing, function (props) {
-  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.container.border.decorative.neutral;
-  }, function (props) {
-    return props.theme.colors.container.background.decorative.neutral;
-  });
-}, function (props) {
-  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:", ";border:1px solid ", ";background-color:", ";}"], function (props) {
-    return props.theme.colors.text.body;
-  }, function (props) {
-    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.container.border.error;
-  }, function (props) {
-    return props.theme.colors.container.background.error;
-  });
+})(["position:relative;display:inline-block;margin:0;line-height:1;vertical-align:middle;outline:none;", " &:focus{", "}", " ", " ", " ", " ", ""], function (_ref) {
+  var theme = _ref.theme;
+  return (0, _styledComponents.css)(["", " font-family:", ";font-weight:", ";border:1px solid ", ";border-radius:", ";color:", ";background:", ";padding:", " ", ";transition:all ", " ", ";"], theme.typography[200], theme.fontFamily, theme.fontWeights.normal, theme.colors.container.border.base, theme.radii[500], theme.colors.text.body, theme.colors.container.background.base, theme.space[200], theme.space[300], theme.duration.fast, theme.easing.ease_inout);
+}, _mixins.focusRing, function (_ref2) {
+  var theme = _ref2.theme,
+      palette = _ref2.palette;
+  return palette === "blue" && (0, _styledComponents.css)(["color:", ";background:", ";border:1px solid ", ";&:hover,&:active{cursor:pointer;box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.body, theme.colors.container.background.decorative.blue, theme.colors.container.border.decorative.blue, theme.shadows.low, theme.utils.interact(theme.colors.container.border.decorative.blue));
+}, function (_ref3) {
+  var closeable = _ref3.closeable,
+      theme = _ref3.theme;
+  return closeable && (0, _styledComponents.css)(["cursor:pointer;&:hover,&:active{box-shadow:", ";border:1px solid ", ";}"], theme.shadows.low, theme.utils.interact(theme.colors.container.border.base));
+}, function (_ref4) {
+  var disabled = _ref4.disabled,
+      theme = _ref4.theme;
+  return disabled && (0, _styledComponents.css)(["opacity:0.4;cursor:not-allowed;&:hover,&:active{box-shadow:none;border:1px solid ", ";}"], theme.colors.container.border.base);
+}, function (_ref5) {
+  var valid = _ref5.valid,
+      theme = _ref5.theme;
+  return !valid && (0, _styledComponents.css)(["color:", ";background:", ";border:1px solid ", ";&:hover{box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.error, theme.colors.container.background.error, theme.colors.container.border.error, theme.shadows.low, theme.utils.interact(theme.colors.container.border.error));
 }, _systemProps.COMMON);
 
 var _default = Container;

package/commonjs/Tooltip/index.js

@@ -132,7 +132,7 @@ var Content = function Content(_ref2) {
     m: 200,
     color: "text.body",
     bg: "container.background.base",
-    boxShadow: 300,
+    boxShadow: "medium",
     border: 500,
     borderColor: "container.border.base" // $FlowIssue - upgrade v0.112.0
 

package/commonjs/themes/dark/theme.js

@@ -1,200 +1,221 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
+exports.default = exports.shadows = void 0;
 
 var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
 
+var _seedsDepth = _interopRequireDefault(require("@sproutsocial/seeds-depth"));
+
 var _theme = _interopRequireDefault(require("../default/theme"));
 
 var _datavizPalette = require("./dataviz-palette");
 
 var _decorativePalettes = require("./decorative-palettes");
 
+var _interact = _interopRequireDefault(require("../utils/interact"));
+
 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: {
+var MODE = "default-dark";
+var shadows = {
+  low: _seedsDepth.default.ELEVATION_LEVEL_100 + " " + _seedsColor.default.COLOR_NEUTRAL_1100 + "FF",
+  medium: _seedsDepth.default.ELEVATION_LEVEL_300 + " " + _seedsColor.default.COLOR_NEUTRAL_1100 + "FF",
+  high: _seedsDepth.default.ELEVATION_LEVEL_400 + " " + _seedsColor.default.COLOR_NEUTRAL_1100 + "FF"
+};
+exports.shadows = shadows;
+
+var colors = _extends({}, _theme.default.colors, {
+  utils: {
+    interact: (0, _interact.default)(MODE)
+  },
+  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_NEUTRAL_1000
+        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
       }
     },
-    container: {
+    secondary: {
       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
+        base: "transparent",
+        hover: _seedsColor.default.COLOR_NEUTRAL_100,
+        active: _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
+        base: _seedsColor.default.COLOR_NEUTRAL_0
+      },
+      text: {
+        base: _seedsColor.default.COLOR_NEUTRAL_0,
+        hover: _seedsColor.default.COLOR_NEUTRAL_800
       }
     },
-    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
       },
-      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
-        }
+      border: {
+        base: "transparent"
       },
-      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
-        }
+      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
       },
-      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
-        }
+      border: {
+        base: "transparent"
       },
-      unstyled: {
-        background: {
-          base: "transparent"
-        },
-        border: {
-          base: "transparent"
-        },
-        text: {
-          base: _seedsColor.default.COLOR_NEUTRAL_300,
-          hover: _seedsColor.default.COLOR_NEUTRAL_200
-        }
+      text: {
+        base: _seedsColor.default.COLOR_NEUTRAL_900,
+        hover: _seedsColor.default.COLOR_NEUTRAL_1000
       }
     },
-    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: {
+    placeholder: {
       background: {
-        base: _seedsColor.default.COLOR_NEUTRAL_900,
-        selected: _seedsColor.default.COLOR_NEUTRAL_0
+        base: "transparent",
+        hover: _seedsColor.default.COLOR_NEUTRAL_1100,
+        active: _seedsColor.default.COLOR_NEUTRAL_1100
       },
       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
+      },
+      text: {
+        base: _seedsColor.default.COLOR_BLUE_400,
+        hover: _seedsColor.default.COLOR_BLUE_300
       }
     },
-    listItem: {
+    unstyled: {
       background: {
-        base: "transparent",
-        hover: _seedsColor.default.COLOR_NEUTRAL_800,
-        selected: _seedsColor.default.COLOR_NEUTRAL_0
+        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
     },
-    dataviz: {
-      map: _datavizPalette.datavizPalette.DATAVIZ_COLORS_MAP,
-      list: _datavizPalette.datavizPalette.DATAVIZ_COLORS_LIST
+    placeholder: {
+      base: _seedsColor.default.COLOR_NEUTRAL_500
+    }
+  },
+  listItem: {
+    background: {
+      base: "transparent",
+      hover: _seedsColor.default.COLOR_NEUTRAL_800,
+      selected: _seedsColor.default.COLOR_NEUTRAL_0
     }
-  }, _datavizPalette.datavizPalette),
-  mode: "dark"
+  },
+  elevation: {
+    base: _seedsColor.default.COLOR_NEUTRAL_1100
+  },
+  dataviz: {
+    map: _datavizPalette.datavizPalette.DATAVIZ_COLORS_MAP,
+    list: _datavizPalette.datavizPalette.DATAVIZ_COLORS_LIST
+  }
+}, _datavizPalette.datavizPalette);
+
+var darkTheme = _extends({}, _theme.default, {
+  colors: colors,
+  shadows: shadows,
+  mode: MODE
 });
 
 var _default = darkTheme;