@sproutsocial/racine 9.1.0-token-beta.0 → 9.1.1-theme-extension.0

package/commonjs/Token/styles.js

@@ -16,25 +16,56 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Container = _styledComponents.default.button.withConfig({
   displayName: "styles__Container",
   componentId: "nyn5zy-0"
-})(["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));
+})(["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;
+  });
 }, _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: "medium",
+    boxShadow: 300,
     border: 500,
     borderColor: "container.border.base" // $FlowIssue - upgrade v0.112.0
 

package/commonjs/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.VisuallyHidden = exports.DateRangePicker = exports.SingleDatePicker = exports.ListboxButton = exports.MenuItemContainer = exports.MenuButtonContext = exports.MenuButton = exports.toast = exports.OverflowList = exports.Listbox = exports.Menu = exports.ToastContainer = exports.Skeleton = exports.Breadcrumb = exports.Avatar = exports.Stack = exports.Message = exports.Fieldset = exports.FormField = exports.EmptyState = exports.SegmentedControl = exports.Collapsible = exports.Numeral = exports.LoaderButton = exports.Drawer = exports.Tooltip = exports.ThemeProvider = exports.Popout = exports.Modal = exports.Tabs = exports.TokenInput = exports.Token = exports.Switch = exports.Link = exports.Button = exports.Select = exports.Input = exports.Label = exports.Box = exports.TableRowAccordion = exports.TableHeaderCell = exports.TableCell = exports.Table = exports.ChartLegend = exports.KeyboardKey = exports.Image = exports.Text = exports.Loader = exports.ToggleHint = exports.Textarea = exports.Radio = exports.Checkbox = exports.CharacterCounter = exports.Card = exports.Indicator = exports.Badge = exports.Banner = exports.Alert = exports.Icon = exports.darkTheme = exports.theme = exports.useTextContent = exports.useMultiselect = exports.useSelect = exports.disabled = exports.focusRing = exports.visuallyHidden = void 0;
+exports.VisuallyHidden = exports.DateRangePicker = exports.SingleDatePicker = exports.ListboxButton = exports.MenuItemContainer = exports.MenuButtonContext = exports.MenuButton = exports.toast = exports.OverflowList = exports.Listbox = exports.Menu = exports.ToastContainer = exports.Skeleton = exports.Breadcrumb = exports.Avatar = exports.Stack = exports.Message = exports.Fieldset = exports.FormField = exports.EmptyState = exports.SegmentedControl = exports.Collapsible = exports.Numeral = exports.LoaderButton = exports.Drawer = exports.Tooltip = exports.CustomThemeProvider = exports.ThemeProvider = exports.Popout = exports.Modal = exports.Tabs = exports.TokenInput = exports.Token = exports.Switch = exports.Link = exports.Button = exports.Select = exports.Input = exports.Label = exports.Box = exports.TableRowAccordion = exports.TableHeaderCell = exports.TableCell = exports.Table = exports.ChartLegend = exports.KeyboardKey = exports.Image = exports.Text = exports.Loader = exports.ToggleHint = exports.Textarea = exports.Radio = exports.Checkbox = exports.CharacterCounter = exports.Card = exports.Indicator = exports.Badge = exports.Banner = exports.Alert = exports.Icon = exports.darkTheme = exports.theme = exports.useTextContent = exports.useMultiselect = exports.useSelect = exports.disabled = exports.focusRing = exports.visuallyHidden = void 0;
 
 var _mixins = require("./utils/mixins");
 
@@ -152,6 +152,10 @@ var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
 
 exports.ThemeProvider = _ThemeProvider.default;
 
+var _CustomThemeProvider = _interopRequireDefault(require("./CustomThemeProvider"));
+
+exports.CustomThemeProvider = _CustomThemeProvider.default;
+
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 
 exports.Tooltip = _Tooltip.default;

package/commonjs/themes/dark/theme.js

@@ -1,221 +1,196 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.shadows = void 0;
+exports.default = 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 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: {
+var darkTheme = _extends({}, _theme.default, {
+  colors: _extends({}, _theme.default.colors, {
+    app: {
       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
+        base: _seedsColor.default.COLOR_NEUTRAL_1000
       }
     },
-    secondary: {
+    container: {
       background: {
-        base: "transparent",
-        hover: _seedsColor.default.COLOR_NEUTRAL_100,
-        active: _seedsColor.default.COLOR_NEUTRAL_0
+        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_0
-      },
-      text: {
-        base: _seedsColor.default.COLOR_NEUTRAL_0,
-        hover: _seedsColor.default.COLOR_NEUTRAL_800
+        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
       }
     },
-    pill: {
-      background: {
-        base: "transparent",
-        hover: _seedsColor.default.COLOR_NEUTRAL_1000,
-        active: _seedsColor.default.COLOR_NEUTRAL_900
+    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
+        }
       },
-      border: {
-        base: "transparent"
+      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
+        }
       },
-      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
+      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_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
+        }
       }
     },
-    placeholder: {
+    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: "transparent",
-        hover: _seedsColor.default.COLOR_NEUTRAL_1100,
-        active: _seedsColor.default.COLOR_NEUTRAL_1100
+        base: _seedsColor.default.COLOR_NEUTRAL_900,
+        selected: _seedsColor.default.COLOR_NEUTRAL_0
       },
       border: {
-        base: _seedsColor.default.COLOR_NEUTRAL_500
+        base: _seedsColor.default.COLOR_NEUTRAL_500,
+        error: _decorativePalettes.red.highlight,
+        warning: _decorativePalettes.yellow.highlight,
+        selected: _seedsColor.default.COLOR_NEUTRAL_0
       },
-      text: {
-        base: _seedsColor.default.COLOR_BLUE_400,
-        hover: _seedsColor.default.COLOR_BLUE_300
+      placeholder: {
+        base: _seedsColor.default.COLOR_NEUTRAL_500
       }
     },
-    unstyled: {
+    listItem: {
       background: {
-        base: "transparent"
-      },
-      border: {
-        base: "transparent"
-      },
-      text: {
-        base: _seedsColor.default.COLOR_NEUTRAL_300,
-        hover: _seedsColor.default.COLOR_NEUTRAL_200
+        base: "transparent",
+        hover: _seedsColor.default.COLOR_NEUTRAL_800,
+        selected: _seedsColor.default.COLOR_NEUTRAL_0
       }
     }
-  },
-  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
-    }
-  },
-  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
+  }, _datavizPalette.datavizPalette),
+  mode: "dark"
 });
 
 var _default = darkTheme;

package/commonjs/themes/default/theme.js

@@ -23,15 +23,12 @@ var _seedsMotion = _interopRequireDefault(require("@sproutsocial/seeds-motion"))
 
 var _seedsBorder = _interopRequireDefault(require("@sproutsocial/seeds-border"));
 
-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 breakpoints = ["900px", "1200px", "1500px", "1800px"];
 exports.breakpoints = breakpoints;
-var MODE = "default-light";
 
 var colors = _extends({
   app: {
@@ -206,9 +203,6 @@ var colors = _extends({
       selected: _seedsColor.default.COLOR_NEUTRAL_800
     }
   },
-  elevation: {
-    base: _seedsColor.default.COLOR_NEUTRAL_900 + "3D"
-  },
   network: {
     twitter: _seedsNetworkcolor.default.NETWORK_COLOR_TWITTER,
     twitter_like: _seedsNetworkcolor.default.NETWORK_COLOR_TWITTER_LIKE,
@@ -235,10 +229,6 @@ var colors = _extends({
     yelp: _seedsNetworkcolor.default.NETWORK_COLOR_YELP,
     whatsapp: _seedsNetworkcolor.default.NETWORK_COLOR_WHATSAPP,
     tiktok: _seedsNetworkcolor.default.NETWORK_COLOR_TIKTOK
-  },
-  dataviz: {
-    map: _datavizPalette.datavizPalette.DATAVIZ_COLORS_MAP,
-    list: _datavizPalette.datavizPalette.DATAVIZ_COLORS_LIST
   }
 }, _literalColors.default, _datavizPalette.datavizPalette);
 
@@ -297,9 +287,10 @@ var borderWidths = {
 };
 exports.borderWidths = borderWidths;
 var shadows = {
-  low: _seedsDepth.default.ELEVATION_LEVEL_100 + " " + _seedsColor.default.COLOR_NEUTRAL_900 + "3D",
-  medium: _seedsDepth.default.ELEVATION_LEVEL_300 + " " + _seedsColor.default.COLOR_NEUTRAL_900 + "3D",
-  high: _seedsDepth.default.ELEVATION_LEVEL_400 + " " + _seedsColor.default.COLOR_NEUTRAL_900 + "3D"
+  "100": _seedsDepth.default.ELEVATION_LEVEL_100,
+  "200": _seedsDepth.default.ELEVATION_LEVEL_200,
+  "300": _seedsDepth.default.ELEVATION_LEVEL_300,
+  "400": _seedsDepth.default.ELEVATION_LEVEL_400
 };
 exports.shadows = shadows;
 var easing = {
@@ -315,9 +306,6 @@ var duration = {
 };
 exports.duration = duration;
 var theme = {
-  utils: {
-    interact: (0, _interact.default)(MODE)
-  },
   breakpoints: breakpoints,
   colors: colors,
   typography: _extends({}, typography, {
@@ -338,10 +326,11 @@ var theme = {
   }),
   borders: borders,
   borderWidths: borderWidths,
-  shadows: shadows,
+  shadows: _extends({}, shadows, {
+    shadows: shadows
+  }),
   easing: easing,
-  duration: duration,
-  mode: MODE
+  duration: duration
 };
 var _default = theme;
 exports.default = _default;

package/commonjs/themes/sprout/theme.js

@@ -0,0 +1,29 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _theme = _interopRequireDefault(require("../default/theme"));
+
+var _seedsColor = require("@sproutsocial/seeds-color");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var sproutTheme = {
+  container: {
+    background: {
+      error: {
+        hover: _seedsColor.COLOR_RED_800
+      }
+    }
+  },
+  button: {
+    primary: {
+      background: {
+        base: "purple"
+      }
+    }
+  }
+};
+var _default = sproutTheme;
+exports.default = _default;

package/commonjs/utils/extendTheme.js

@@ -0,0 +1,22 @@
+"use strict";
+
+exports.__esModule = true;
+exports.extendColorTheme = extendColorTheme;
+
+var merge = _interopRequireWildcard(require("deepmerge"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+function extendColorTheme(baseTheme, extension) {
+  var newColorTheme = merge(baseTheme.colors, extension);
+
+  var newTheme = _extends({}, baseTheme, {
+    colors: _extends({}, newColorTheme)
+  });
+
+  return newTheme;
+}

package/lib/Breadcrumb/styles.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 var Nav = styled.nav.withConfig({
   displayName: "styles__Nav",
   componentId: "sc-1ub1apc-0"
-})(["ol{", ";margin:0;font-family:", ";padding:0;display:flex;}li{margin-right:", ";display:flex;}a,button{", ";max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;&:not(.overflow--menu){margin:0;padding:0;}}ol > div + li::before{content:\"/\";margin-right:", ";}li:last-child a,li:last-child button{color:", ";font-weight:bold;}li:not(:last-child)::after{content:\"/\";color:", ";margin-left:", ";}"], function (props) {
+})(["ol{", ";margin:0;font-family:", ";padding:0;display:flex;}li{margin-right:", ";display:flex;}a,button{", ";max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;&:not(.overflow--menu){margin:0;padding:0;}}ol > div + li::before{content:\"/\";margin-right:", ";}li:last-child a,li:last-child button{color:", ";font-weight:bold;}li:not(:last-child) a,li:not(:last-child) button{font-weight:normal;}li:not(:last-child)::after{content:\"/\";color:", ";margin-left:", ";}"], function (props) {
   return props.theme.typography[200];
 }, function (props) {
   return props.theme.fontFamily;

package/lib/Button/styles.js

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

package/lib/Card/styles.js

@@ -9,7 +9,7 @@ var Container = styled(Box).withConfig({
 }, function (props) {
   return props.theme.radii[500];
 }, function (props) {
-  return props.theme.shadows.low;
+  return props.theme.shadows[100];
 }, function (props) {
   return props.theme.duration.medium;
 }, function (props) {

package/lib/CustomThemeProvider/index.js

@@ -0,0 +1,12 @@
+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 * as React from "react";
+import { ThemeProvider } from "styled-components";
+
+var CustomThemeProvider = function CustomThemeProvider(props) {
+  return /*#__PURE__*/React.createElement(ThemeProvider, _extends({
+    theme: props.theme
+  }, props));
+};
+
+export default CustomThemeProvider;