@sproutsocial/racine 11.9.0 → 12.1.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Change Log
 
+## 12.1.0
+
+### Minor Changes
+
+- 76941e3: add growth specific colors to sprout theme for light and dark mode
+
+## 12.0.0
+
+### Major Changes
+
+- 54639f5: Moved `theme.util.interact()` to a hook called `useInteractiveColor()`
+
+  - `theme.util.interact()` will no longer be available on the theme object and is moved to a hook called `useInteractiveColor()`
+  - To import the hook, use `import { useInteractiveColor } from '@sproutsocial/racine'`
+  - `useInteractiveColor()` accepts a theme color option and returns a lighten or darken version of that color depending on the theme mode currently in use('light' or 'dark')
+  - `useInteractiveColor()` can only be utilized within a theme context.
+
+  example:
+
+  ```jsx
+  import { useInteractiveColor } from '@sproutsocial/racine'
+
+  ....
+   &:hover,
+    &:active {
+      color: ${({theme}) => useInteract(theme.colors.icon.base)};
+    }
+  ```
+
 ## 11.9.0
 
 ### Minor Changes

package/__flow__/Input/index.js

@@ -7,6 +7,7 @@ import styled from "styled-components";
 import type { StyledComponent } from "styled-components";
 import type { TypeTheme } from "../types/theme.flow";
 import { mergeRefs } from "../utils";
+import { useInteractiveColor } from "../utils/useInteractiveColor";
 
 type TypeProps = {
   /** ID of the form element, should match the "for" value of the associated label */
@@ -90,8 +91,7 @@ const InputContext = React.createContext<TypeInputContext>({});
 const StyledButton: StyledComponent<any, TypeTheme, *> = styled(Button)`
   &:hover,
   &:active {
-    color: ${(props) =>
-      props.theme.utils.interact(props.theme.colors.icon.base)};
+    color: ${(props) => useInteractiveColor(props.theme.colors.icon.base)};
   }
 `;
 

package/__flow__/Token/styles.js

@@ -2,6 +2,7 @@
 import styled, { css, type StyledComponent } from "styled-components";
 import { COMMON } from "../utils/system-props";
 import { focusRing } from "../utils/mixins";
+import { useInteractiveColor } from "../utils/useInteractiveColor";
 
 import type { TypeTheme } from "../types/theme.flow";
 
@@ -29,30 +30,30 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
     ${focusRing}
   }
 
-  ${({ theme, palette }) =>
-    palette === "blue" &&
+  ${({ closeable, theme }) =>
+    closeable &&
     css`
-      color: ${theme.colors.text.body};
-      background: ${theme.colors.container.background.decorative.blue};
-      border: 1px solid ${theme.colors.container.border.decorative.blue};
+      cursor: pointer;
       &:hover,
       &:active {
-        cursor: pointer;
         box-shadow: ${theme.shadows.low};
         border: 1px solid
-          ${theme.utils.interact(theme.colors.container.border.decorative.blue)};
+          ${useInteractiveColor(theme.colors.container.border.base)};
       }
     `}
 
-  ${({ closeable, theme }) =>
-    closeable &&
+  ${({ theme, palette }) =>
+    palette === "blue" &&
     css`
-      cursor: pointer;
+      color: ${theme.colors.text.body};
+      background: ${theme.colors.container.background.decorative.blue};
+      border: 1px solid ${theme.colors.container.border.decorative.blue};
       &:hover,
       &:active {
+        cursor: pointer;
         box-shadow: ${theme.shadows.low};
         border: 1px solid
-          ${theme.utils.interact(theme.colors.container.border.base)};
+          ${useInteractiveColor(theme.colors.container.border.decorative.blue)};
       }
     `}
 
@@ -77,7 +78,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
       &:hover {
         box-shadow: ${theme.shadows.low};
         border: 1px solid
-          ${theme.utils.interact(theme.colors.container.border.error)};
+          ${useInteractiveColor(theme.colors.container.border.error)};
       }
     `}
 

package/__flow__/index.js

@@ -4,6 +4,7 @@ export type { TypeTheme, TypeSproutTheme } from "./types/theme.flow";
 export * from "./systemProps";
 export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
 export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
+export { useInteractiveColor } from "./utils/useInteractiveColor";
 export { default as theme } from "./themes/light/theme";
 export { default as darkTheme } from "./themes/dark/theme";
 export {

package/__flow__/themes/dark/theme.js

@@ -15,8 +15,6 @@ import {
 } from "./decorative-palettes";
 import { transparentize } from "polished";
 
-import interact from "../utils/interact";
-
 const MODE = "dark";
 
 export const shadows = {
@@ -235,9 +233,6 @@ const colors = {
 
 const darkTheme = {
   ...lightTheme,
-  utils: {
-    interact: interact(MODE),
-  },
   colors,
   shadows,
   mode: MODE,

package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -50,6 +50,68 @@ export const analytics = {
   },
 };
 
+export const growth = {
+  education: {
+    decorative: {
+      aqua: baseDarkTheme.colors.aqua[600],
+      teal: baseDarkTheme.colors.teal[500],
+    },
+  },
+  opportunity: {
+    background: {
+      base: baseDarkTheme.colors.purple[700],
+    },
+    button: {
+      primary: {
+        base: baseDarkTheme.colors.purple[400],
+        hover: baseDarkTheme.colors.purple[300],
+      },
+    },
+    badge: {
+      background: {
+        base: baseDarkTheme.colors.purple[700],
+        active: baseDarkTheme.colors.purple[100],
+      },
+      icon: {
+        base: baseDarkTheme.colors.purple[200],
+        active: baseDarkTheme.colors.purple[800],
+      },
+      text: {
+        base: baseDarkTheme.colors.purple[200],
+      },
+    },
+    decorative: {
+      // confetti
+      green: baseDarkTheme.colors.green[700],
+      lightAqua: baseDarkTheme.colors.aqua[600],
+      darkAqua: baseDarkTheme.colors.aqua[1100],
+      purple: baseDarkTheme.colors.purple[700],
+    },
+  },
+  darkModal: {
+    background: {
+      base: baseDarkTheme.colors.aqua[1100],
+    },
+    text: {
+      base: baseDarkTheme.colors.neutral[0],
+    },
+    cards: {
+      background: {
+        base: baseDarkTheme.colors.neutral[0],
+        hover: baseDarkTheme.colors.purple[100],
+      },
+      text: {
+        base: baseDarkTheme.colors.neutral[800],
+        hover: baseDarkTheme.colors.neutral[900],
+      },
+      border: {
+        base: baseDarkTheme.colors.neutral[0],
+        hover: baseDarkTheme.colors.purple[700],
+      },
+    },
+  },
+};
+
 const darkTheme: TypeSproutTheme = {
   ...baseDarkTheme,
   colors: {
@@ -57,6 +119,7 @@ const darkTheme: TypeSproutTheme = {
     navigation,
     datePicker,
     analytics,
+    growth,
   },
 };
 

package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js

@@ -50,6 +50,68 @@ export const analytics = {
   },
 };
 
+export const growth = {
+  education: {
+    decorative: {
+      aqua: baseLightTheme.colors.aqua[600],
+      teal: baseLightTheme.colors.teal[700],
+    },
+  },
+  opportunity: {
+    background: {
+      base: baseLightTheme.colors.purple[700],
+    },
+    button: {
+      primary: {
+        base: baseLightTheme.colors.purple[700],
+        hover: baseLightTheme.colors.purple[800],
+      },
+    },
+    badge: {
+      background: {
+        base: baseLightTheme.colors.purple[200],
+        active: baseLightTheme.colors.purple[800],
+      },
+      icon: {
+        base: baseLightTheme.colors.purple[700],
+        active: baseLightTheme.colors.purple[100],
+      },
+      text: {
+        base: baseLightTheme.colors.purple[700],
+      },
+    },
+    decorative: {
+      // confetti
+      green: baseLightTheme.colors.green[700],
+      lightAqua: baseLightTheme.colors.aqua[600],
+      darkAqua: baseLightTheme.colors.aqua[1100],
+      purple: baseLightTheme.colors.purple[700],
+    },
+  },
+  darkModal: {
+    background: {
+      base: baseLightTheme.colors.aqua[1100],
+    },
+    text: {
+      base: baseLightTheme.colors.neutral[0],
+    },
+    cards: {
+      background: {
+        base: baseLightTheme.colors.neutral[0],
+        hover: baseLightTheme.colors.purple[100],
+      },
+      text: {
+        base: baseLightTheme.colors.neutral[800],
+        hover: baseLightTheme.colors.neutral[900],
+      },
+      border: {
+        base: baseLightTheme.colors.neutral[0],
+        hover: baseLightTheme.colors.purple[700],
+      },
+    },
+  },
+};
+
 const lightTheme: TypeSproutTheme = {
   ...baseLightTheme,
   colors: {
@@ -57,6 +119,7 @@ const lightTheme: TypeSproutTheme = {
     navigation,
     datePicker,
     analytics,
+    growth,
   },
 };
 

package/__flow__/themes/light/theme.js

@@ -20,8 +20,6 @@ import MOTION from "@sproutsocial/seeds-motion";
 import BORDER from "@sproutsocial/seeds-border";
 import { transparentize } from "polished";
 
-import interact from "../utils/interact";
-
 export const breakpoints = ["900px", "1200px", "1500px", "1800px"];
 
 const MODE = "light";
@@ -350,9 +348,6 @@ export const duration = {
 };
 
 const theme = {
-  utils: {
-    interact: interact(MODE),
-  },
   breakpoints,
   colors,
   typography: {

package/__flow__/types/theme.flow.js

@@ -17,9 +17,9 @@ import {
   datePicker,
   navigation,
   analytics,
+  growth,
 } from "../themes/extendedThemes/sproutTheme/light/theme";
 
-export type TypeThemeUtils = {| interact: (color: string) => string |};
 export type TypeThemeMode = "light" | "dark";
 export type TypeBreakpoint = typeof breakpoints;
 export type TypeTypography = typeof typography;
@@ -36,7 +36,6 @@ export type TypeDuration = typeof duration;
 
 export type TypeTheme = {
   mode: TypeThemeMode,
-  utils: TypeThemeUtils,
   breakpoints: TypeBreakpoint,
   colors: TypeColor,
   typography: TypeTypography,
@@ -59,5 +58,6 @@ export type TypeSproutTheme = {
     navigation: typeof navigation,
     datePicker: typeof datePicker,
     analytics: typeof analytics,
+    growth: typeof growth,
   |},
 };

package/__flow__/utils/useInteractiveColor.js

@@ -0,0 +1,32 @@
+//@flow strict-local
+import { darken, lighten } from "polished";
+import { useTheme } from "styled-components";
+import type { TypeColors } from "../types/theme.colors.flow.js";
+
+/**
+ * The useInteractiveColor hook has context of theme mode (light or dark)
+ * and can be used to lighten or darken a color dynamically
+ *
+ * note: colors are limited to our theme colors
+ */
+const useInteractiveColor = (themeColor: TypeColors): string => {
+  // Throw error if used outside of a ThemeProvider (styled-components)
+  if (!useTheme()) {
+    throw new Error(
+      "useInteractiveColor() must be used within a Styled Components ThemeProvider"
+    );
+  }
+
+  // Get the current theme mode ie. 'light' or 'dark'
+  const themeMode = useTheme().mode;
+
+  // If the theme mode is dark, return a lightened version of the themeValue
+  if (themeMode === "dark") {
+    return lighten(0.2, themeColor);
+  } else {
+    // If the theme mode is light, return a darkened version of the themeValue
+    return darken(0.2, themeColor);
+  }
+};
+
+export { useInteractiveColor };

package/commonjs/Input/index.js

@@ -15,6 +15,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _utils = require("../utils");
 
+var _useInteractiveColor = require("../utils/useInteractiveColor");
+
 var _excluded = ["autoComplete", "autoFocus", "disabled", "readOnly", "isInvalid", "hasWarning", "id", "name", "placeholder", "type", "required", "value", "elemBefore", "elemAfter", "maxLength", "ariaLabel", "ariaDescribedby", "clearButtonLabel", "innerRef", "onBlur", "onChange", "onClear", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "appearance", "size"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,7 +38,7 @@ var StyledButton = (0, _styledComponents.default)(_Button.default).withConfig({
   displayName: "Input__StyledButton",
   componentId: "sc-1ck1dnm-0"
 })(["&:hover,&:active{color:", ";}"], function (props) {
-  return props.theme.utils.interact(props.theme.colors.icon.base);
+  return (0, _useInteractiveColor.useInteractiveColor)(props.theme.colors.icon.base);
 });
 
 var ClearButton = function ClearButton() {

package/commonjs/Token/styles.js

@@ -9,6 +9,8 @@ var _systemProps = require("../utils/system-props");
 
 var _mixins = require("../utils/mixins");
 
+var _useInteractiveColor = require("../utils/useInteractiveColor");
+
 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; }
@@ -20,13 +22,13 @@ var Container = _styledComponents.default.button.withConfig({
   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));
+  var closeable = _ref2.closeable,
+      theme = _ref2.theme;
+  return closeable && (0, _styledComponents.css)(["cursor:pointer;&:hover,&:active{box-shadow:", ";border:1px solid ", ";}"], theme.shadows.low, (0, _useInteractiveColor.useInteractiveColor)(theme.colors.container.border.base));
 }, 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));
+  var theme = _ref3.theme,
+      palette = _ref3.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, (0, _useInteractiveColor.useInteractiveColor)(theme.colors.container.border.decorative.blue));
 }, function (_ref4) {
   var disabled = _ref4.disabled,
       theme = _ref4.theme;
@@ -34,7 +36,7 @@ var Container = _styledComponents.default.button.withConfig({
 }, 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));
+  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, (0, _useInteractiveColor.useInteractiveColor)(theme.colors.container.border.error));
 }, _systemProps.COMMON);
 
 var _default = Container;

package/commonjs/index.js

@@ -8,6 +8,7 @@ var _exportNames = {
   useSelect: true,
   useMultiselect: true,
   useTextContent: true,
+  useInteractiveColor: true,
   theme: true,
   darkTheme: true,
   Icon: true,
@@ -72,7 +73,7 @@ var _exportNames = {
   DateRangePicker: true,
   VisuallyHidden: true
 };
-exports.visuallyHidden = exports.useTextContent = exports.useSelect = exports.useMultiselect = exports.toast = exports.theme = exports.sproutLightTheme = exports.sproutDarkTheme = exports.focusRing = exports.disabled = exports.darkTheme = exports.VisuallyHidden = exports.Tooltip = exports.TokenInput = exports.Token = exports.ToggleHint = exports.ToastContainer = exports.ThemeProvider = exports.Textarea = exports.Text = exports.Tabs = exports.TableRowAccordion = exports.TableHeaderCell = exports.TableCell = exports.Table = exports.Switch = exports.Stack = exports.Skeleton = exports.SingleDatePicker = exports.Select = exports.SegmentedControl = exports.Radio = exports.Popout = exports.OverflowList = exports.Numeral = exports.Modal = exports.Message = exports.MenuItemContainer = exports.MenuButtonContext = exports.MenuButton = exports.Menu = exports.LoaderButton = exports.Loader = exports.ListboxButton = exports.Listbox = exports.Link = exports.Label = exports.KeyboardKey = exports.Input = exports.Indicator = exports.Image = exports.Icon = exports.FormField = exports.Fieldset = exports.EmptyState = exports.Drawer = exports.DateRangePicker = exports.Collapsible = exports.Checkbox = exports.ChartLegend = exports.CharacterCounter = exports.Card = exports.Button = exports.Breadcrumb = exports.Box = exports.Banner = exports.Badge = exports.Avatar = exports.Alert = void 0;
+exports.visuallyHidden = exports.useTextContent = exports.useSelect = exports.useMultiselect = exports.useInteractiveColor = exports.toast = exports.theme = exports.sproutLightTheme = exports.sproutDarkTheme = exports.focusRing = exports.disabled = exports.darkTheme = exports.VisuallyHidden = exports.Tooltip = exports.TokenInput = exports.Token = exports.ToggleHint = exports.ToastContainer = exports.ThemeProvider = exports.Textarea = exports.Text = exports.Tabs = exports.TableRowAccordion = exports.TableHeaderCell = exports.TableCell = exports.Table = exports.Switch = exports.Stack = exports.Skeleton = exports.SingleDatePicker = exports.Select = exports.SegmentedControl = exports.Radio = exports.Popout = exports.OverflowList = exports.Numeral = exports.Modal = exports.Message = exports.MenuItemContainer = exports.MenuButtonContext = exports.MenuButton = exports.Menu = exports.LoaderButton = exports.Loader = exports.ListboxButton = exports.Listbox = exports.Link = exports.Label = exports.KeyboardKey = exports.Input = exports.Indicator = exports.Image = exports.Icon = exports.FormField = exports.Fieldset = exports.EmptyState = exports.Drawer = exports.DateRangePicker = exports.Collapsible = exports.Checkbox = exports.ChartLegend = exports.CharacterCounter = exports.Card = exports.Button = exports.Breadcrumb = exports.Box = exports.Banner = exports.Badge = exports.Avatar = exports.Alert = void 0;
 
 var _systemProps = require("./systemProps");
 
@@ -95,6 +96,10 @@ exports.useSelect = _hooks.useSelect;
 exports.useMultiselect = _hooks.useMultiselect;
 exports.useTextContent = _hooks.useTextContent;
 
+var _useInteractiveColor = require("./utils/useInteractiveColor");
+
+exports.useInteractiveColor = _useInteractiveColor.useInteractiveColor;
+
 var _theme = _interopRequireDefault(require("./themes/light/theme"));
 
 exports.theme = _theme.default;

package/commonjs/themes/dark/theme.js

@@ -15,8 +15,6 @@ var _decorativePalettes = require("./decorative-palettes");
 
 var _polished = require("polished");
 
-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); }
@@ -234,9 +232,6 @@ var colors = _extends({}, _theme.default.colors, {
 }, _datavizPalette.datavizPalette);
 
 var darkTheme = _extends({}, _theme.default, {
-  utils: {
-    interact: (0, _interact.default)(MODE)
-  },
   colors: colors,
   shadows: shadows,
   mode: MODE

package/commonjs/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.navigation = exports.default = exports.datePicker = exports.analytics = void 0;
+exports.navigation = exports.growth = exports.default = exports.datePicker = exports.analytics = void 0;
 
 var _theme = _interopRequireDefault(require("../../../dark/theme"));
 
@@ -57,12 +57,75 @@ var analytics = {
   }
 };
 exports.analytics = analytics;
+var growth = {
+  education: {
+    decorative: {
+      aqua: _theme.default.colors.aqua[600],
+      teal: _theme.default.colors.teal[500]
+    }
+  },
+  opportunity: {
+    background: {
+      base: _theme.default.colors.purple[700]
+    },
+    button: {
+      primary: {
+        base: _theme.default.colors.purple[400],
+        hover: _theme.default.colors.purple[300]
+      }
+    },
+    badge: {
+      background: {
+        base: _theme.default.colors.purple[700],
+        active: _theme.default.colors.purple[100]
+      },
+      icon: {
+        base: _theme.default.colors.purple[200],
+        active: _theme.default.colors.purple[800]
+      },
+      text: {
+        base: _theme.default.colors.purple[200]
+      }
+    },
+    decorative: {
+      // confetti
+      green: _theme.default.colors.green[700],
+      lightAqua: _theme.default.colors.aqua[600],
+      darkAqua: _theme.default.colors.aqua[1100],
+      purple: _theme.default.colors.purple[700]
+    }
+  },
+  darkModal: {
+    background: {
+      base: _theme.default.colors.aqua[1100]
+    },
+    text: {
+      base: _theme.default.colors.neutral[0]
+    },
+    cards: {
+      background: {
+        base: _theme.default.colors.neutral[0],
+        hover: _theme.default.colors.purple[100]
+      },
+      text: {
+        base: _theme.default.colors.neutral[800],
+        hover: _theme.default.colors.neutral[900]
+      },
+      border: {
+        base: _theme.default.colors.neutral[0],
+        hover: _theme.default.colors.purple[700]
+      }
+    }
+  }
+};
+exports.growth = growth;
 
 var darkTheme = _extends({}, _theme.default, {
   colors: _extends({}, _theme.default.colors, {
     navigation: navigation,
     datePicker: datePicker,
-    analytics: analytics
+    analytics: analytics,
+    growth: growth
   })
 });
 

package/commonjs/themes/extendedThemes/sproutTheme/light/theme.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.navigation = exports.default = exports.datePicker = exports.analytics = void 0;
+exports.navigation = exports.growth = exports.default = exports.datePicker = exports.analytics = void 0;
 
 var _theme = _interopRequireDefault(require("../../../light/theme"));
 
@@ -57,12 +57,75 @@ var analytics = {
   }
 };
 exports.analytics = analytics;
+var growth = {
+  education: {
+    decorative: {
+      aqua: _theme.default.colors.aqua[600],
+      teal: _theme.default.colors.teal[700]
+    }
+  },
+  opportunity: {
+    background: {
+      base: _theme.default.colors.purple[700]
+    },
+    button: {
+      primary: {
+        base: _theme.default.colors.purple[700],
+        hover: _theme.default.colors.purple[800]
+      }
+    },
+    badge: {
+      background: {
+        base: _theme.default.colors.purple[200],
+        active: _theme.default.colors.purple[800]
+      },
+      icon: {
+        base: _theme.default.colors.purple[700],
+        active: _theme.default.colors.purple[100]
+      },
+      text: {
+        base: _theme.default.colors.purple[700]
+      }
+    },
+    decorative: {
+      // confetti
+      green: _theme.default.colors.green[700],
+      lightAqua: _theme.default.colors.aqua[600],
+      darkAqua: _theme.default.colors.aqua[1100],
+      purple: _theme.default.colors.purple[700]
+    }
+  },
+  darkModal: {
+    background: {
+      base: _theme.default.colors.aqua[1100]
+    },
+    text: {
+      base: _theme.default.colors.neutral[0]
+    },
+    cards: {
+      background: {
+        base: _theme.default.colors.neutral[0],
+        hover: _theme.default.colors.purple[100]
+      },
+      text: {
+        base: _theme.default.colors.neutral[800],
+        hover: _theme.default.colors.neutral[900]
+      },
+      border: {
+        base: _theme.default.colors.neutral[0],
+        hover: _theme.default.colors.purple[700]
+      }
+    }
+  }
+};
+exports.growth = growth;
 
 var lightTheme = _extends({}, _theme.default, {
   colors: _extends({}, _theme.default.colors, {
     navigation: navigation,
     datePicker: datePicker,
-    analytics: analytics
+    analytics: analytics,
+    growth: growth
   })
 });
 

package/commonjs/themes/light/theme.js

@@ -25,8 +25,6 @@ var _seedsBorder = _interopRequireDefault(require("@sproutsocial/seeds-border"))
 
 var _polished = require("polished");
 
-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); }
@@ -338,9 +336,6 @@ var duration = {
 };
 exports.duration = duration;
 var theme = {
-  utils: {
-    interact: (0, _interact.default)(MODE)
-  },
   breakpoints: breakpoints,
   colors: colors,
   typography: _extends({}, typography, {