@sproutsocial/racine 11.5.0 → 11.6.1-theme-beta.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 11.6.0
+
+### Minor Changes
+
+- 43adc28: Added a sprout theme to racine
+
 ## 11.5.0
 
 ### Minor Changes

package/__flow__/Checkbox/styles.js

@@ -182,90 +182,90 @@ const getIcon = (type, color) => {
 
 // eslint-disable-next-line prettier/prettier
 export const CheckboxContainer: StyledComponent<any, TypeTheme, *> = styled.span(
-    (props) => css`
-      display: inline-flex;
-      align-items: center;
-      box-sizing: border-box;
-      position: relative;
-      transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};
-
-      @supports (-webkit-appearance: none) {
-        &:before {
-          /* stylelint-disable */
-          content: url("data:image/svg+xml;utf8,${getIcon(
-            props.indeterminate ? "indeterminate" : "check",
-
-            props.checked
-              ? props.theme.colors.form.background.base
-              : props.theme.colors.form.border.base
-          )}");
-          opacity: ${props.checked ? 1 : 0};
-          position: absolute;
-          width: ${props.theme.space[400]};
-          height: ${props.theme.space[400]};
-          text-align: center;
-          transform: translateY(1px);
-          line-height: 1;
-          margin: auto;
-          pointer-events: none;
-          transition: ${props.theme.duration.fast}
-            ${props.theme.easing.ease_inout};
+  (props) => css`
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    position: relative;
+    transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};
+
+    @supports (-webkit-appearance: none) {
+      &:before {
+        /* stylelint-disable */
+        content: url("data:image/svg+xml;utf8,${getIcon(
+          props.indeterminate ? "indeterminate" : "check",
+
+          props.checked
+            ? props.theme.colors.form.background.base
+            : props.theme.colors.form.border.base
+        )}");
+        opacity: ${props.checked ? 1 : 0};
+        position: absolute;
+        width: ${props.theme.space[400]};
+        height: ${props.theme.space[400]};
+        text-align: center;
+        transform: translateY(1px);
+        line-height: 1;
+        margin: auto;
+        pointer-events: none;
+        transition: ${props.theme.duration.fast}
+          ${props.theme.easing.ease_inout};
+      }
+
+      &:hover:before {
+        opacity: ${props.disabled && !props.checked ? 0 : 1};
+      }
+
+      ${props.disabled &&
+      css`
+        opacity: 0.4;
+      `}
+
+      input[type='checkbox'] {
+        box-sizing: border-box;
+        appearance: none;
+        margin: 0;
+        padding: 0;
+        width: ${props.theme.space[400]};
+        height: ${props.theme.space[400]};
+        border: 1px solid ${props.theme.colors.form.border.base};
+        border-radius: 4px;
+        background-color: ${props.theme.colors.form.background.base};
+        transition: all ${props.theme.duration.fast}
+          ${props.theme.easing.ease_in};
+        cursor: ${props.disabled ? "not-allowed" : "pointer"};
+        flex-shrink: 0;
+
+        &:not(:checked) {
+          ${!props.indeterminate &&
+          css`
+            border-color: ${props.theme.colors
+              .neutral[300]} !important; /* We don't want the focus ring to remove the border */
+            background-color: ${props.theme.colors.form.background.base};
+          `}
         }
 
-        &:hover:before {
-          opacity: ${props.disabled && !props.checked ? 0 : 1};
+        &:checked {
+          border-color: ${props.theme.colors.form.border.selected};
+          background-color: ${props.theme.colors.form.background.selected};
         }
 
-        ${props.disabled &&
+        ${props.indeterminate &&
+        props.checked &&
         css`
-          opacity: 0.4;
+          border-color: ${props.theme.colors.form.border.selected} !important;
+          background-color: ${props.theme.colors.form.background
+            .selected} !important;
         `}
 
-        input[type='checkbox'] {
-          box-sizing: border-box;
-          appearance: none;
-          margin: 0;
-          padding: 0;
-          width: ${props.theme.space[400]};
-          height: ${props.theme.space[400]};
-          border: 1px solid ${props.theme.colors.form.border.base};
-          border-radius: 4px;
-          background-color: ${props.theme.colors.form.background.base};
-          transition: all ${props.theme.duration.fast}
-            ${props.theme.easing.ease_in};
-          cursor: ${props.disabled ? "not-allowed" : "pointer"};
-          flex-shrink: 0;
-
-          &:not(:checked) {
-            ${!props.indeterminate &&
-            css`
-              border-color: ${props.theme.colors
-                .neutral[300]} !important; /* We don't want the focus ring to remove the border */
-              background-color: ${props.theme.colors.form.background.base};
-            `}
-          }
-
-          &:checked {
-            border-color: ${props.theme.colors.form.border.selected};
-            background-color: ${props.theme.colors.form.background.selected};
-          }
-
-          ${props.indeterminate &&
-          props.checked &&
-          css`
-            border-color: ${props.theme.colors.form.border.selected} !important;
-            background-color: ${props.theme.colors.form.background
-              .selected} !important;
-          `}
-
-          &:focus {
-            ${focusRing}
-          }
+        &:focus {
+          ${focusRing}
         }
       }
+    }
 
-      ${COMMON}
-    `
-  );
+    ${COMMON}
+  `
+);
 
 export default Container;

package/__flow__/Collapsible/index.js

@@ -73,8 +73,9 @@ const Trigger = ({ children, ...rest }) => {
 };
 
 const Panel = ({ children, ...rest }) => {
-  const { isOpen, id, offset, collapsedHeight, openHeight } =
-    useContext(CollapsibleContext);
+  const { isOpen, id, offset, collapsedHeight, openHeight } = useContext(
+    CollapsibleContext
+  );
   const ref = useRef();
   const measurement = useMeasure(ref);
   const [isHidden, setIsHidden] = useState(undefined);

package/__flow__/Image/index.js

@@ -80,8 +80,16 @@ export default class Image extends React.Component<TypeProps, TypeState> {
   };
 
   render() {
-    const { alt, title, onClick, onError, onLoad, src, qa, ...rest } =
-      this.props;
+    const {
+      alt,
+      title,
+      onClick,
+      onError,
+      onLoad,
+      src,
+      qa,
+      ...rest
+    } = this.props;
 
     return (
       <ImageContainer

package/__flow__/SegmentedControl/index.js

@@ -17,8 +17,9 @@ type TypeSegmentedControlContext = {
   onChange: (e: SyntheticInputEvent<HTMLInputElement>) => void,
 };
 
-const SegmentedControlContext =
-  React.createContext<?TypeSegmentedControlContext>(null);
+const SegmentedControlContext = React.createContext<?TypeSegmentedControlContext>(
+  null
+);
 
 type TypeSegmentedControlItemProps = {
   /** The value of this item. Should be unique among sibling items. */

package/__flow__/TableCell/index.js

@@ -22,8 +22,15 @@ export type TypeTableCell = {
  */
 export default class TableCell extends React.Component<TypeTableCell> {
   render() {
-    const { id, content, colSpan, width, align, children, ...rest } =
-      this.props;
+    const {
+      id,
+      content,
+      colSpan,
+      width,
+      align,
+      children,
+      ...rest
+    } = this.props;
 
     return (
       <Container

package/__flow__/ThemeProvider/index.js

@@ -3,10 +3,13 @@ import * as React from "react";
 import { ThemeProvider as BaseThemeProvider } from "styled-components";
 import theme from "../themes/light/theme";
 
-import typeof { default as TypeTheme } from "../themes/light/theme";
+import type { TypeTheme, TypeSproutTheme } from "../types/theme.flow";
+
+// We can append additional themes types here
+type TypeAllThemes = TypeTheme | TypeSproutTheme;
 
 type TypeProps = $ReadOnly<{|
-  theme?: TypeTheme,
+  theme?: TypeAllThemes,
   children: React.Node,
 |}>;
 

package/__flow__/ToggleHint/index.js

@@ -32,8 +32,15 @@ export default class ToggleHint extends React.Component<TypeProps> {
   };
 
   render() {
-    const { icon, isOpen, openString, closeString, qa, className, ...rest } =
-      this.props;
+    const {
+      icon,
+      isOpen,
+      openString,
+      closeString,
+      qa,
+      className,
+      ...rest
+    } = this.props;
 
     return (
       <Container

package/__flow__/index.js

@@ -1,11 +1,15 @@
 // @flow
 export type { EnumIconNames } from "./EnumIconNames";
-export type { TypeTheme } from "./types/theme.flow";
+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 { default as theme } from "./themes/light/theme";
 export { default as darkTheme } from "./themes/dark/theme";
+export {
+  sproutLightTheme,
+  sproutDarkTheme,
+} from "./themes/extendedThemes/sproutTheme";
 export { default as Icon } from "./Icon";
 // DEPRECATED: Alert has been renamed to Banner
 export { default as Alert } from "./Banner";

package/__flow__/systemProps/color.js

@@ -14,8 +14,7 @@ import type {
 
 // https://styled-system.com/table#color
 
-type TypeBackgroundColorSystemProp =
-  TypeResponsiveBaseSystemProp<BackgroundColorProperty>;
+type TypeBackgroundColorSystemProp = TypeResponsiveBaseSystemProp<BackgroundColorProperty>;
 export type TypeColorSystemProps = $ReadOnly<{|
   backgroundColor?: TypeBackgroundColorSystemProp,
   bg?: TypeBackgroundColorSystemProp,

package/__flow__/themes/dark/theme.js

@@ -29,9 +29,6 @@ export const shadows = {
 
 const colors = {
   ...lightTheme.colors,
-  utils: {
-    interact: interact(MODE),
-  },
   app: {
     background: {
       base: COLORS.COLOR_NEUTRAL_1000,
@@ -238,6 +235,9 @@ const colors = {
 
 const darkTheme = {
   ...lightTheme,
+  utils: {
+    interact: interact(MODE),
+  },
   colors,
   shadows,
   mode: MODE,

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

@@ -0,0 +1,42 @@
+// @flow strict-local
+import baseDarkTheme from "../../../dark/theme";
+import type { TypeSproutTheme } from "../../../../types/theme.flow";
+
+export const navigation = {
+  main: {
+    background: {
+      base: baseDarkTheme.colors.neutral[1000],
+      overflowGradient: baseDarkTheme.colors.neutral[1100],
+    },
+  },
+  secondary: {
+    background: {
+      base: baseDarkTheme.colors.neutral[900],
+    },
+  },
+  text: {
+    base: baseDarkTheme.colors.neutral[0],
+    hover: baseDarkTheme.colors.neutral[0],
+  },
+  icon: {
+    base: baseDarkTheme.colors.neutral[0],
+    hover: baseDarkTheme.colors.neutral[0],
+  },
+  listItem: {
+    background: {
+      base: baseDarkTheme.colors.neutral[1000],
+      hover: baseDarkTheme.colors.neutral[1100],
+      selected: baseDarkTheme.colors.neutral[700],
+    },
+  },
+};
+
+const darkTheme: TypeSproutTheme = {
+  ...baseDarkTheme,
+  colors: {
+    ...baseDarkTheme.colors,
+    navigation,
+  },
+};
+
+export default darkTheme;

package/__flow__/themes/extendedThemes/sproutTheme/index.js

@@ -0,0 +1,3 @@
+// @flow
+export { default as sproutLightTheme } from "./light/theme";
+export { default as sproutDarkTheme } from "./dark/theme";

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

@@ -0,0 +1,42 @@
+// @flow strict-local
+import baseLightTheme from "../../../light/theme";
+import type { TypeSproutTheme } from "../../../../types/theme.flow";
+
+export const navigation = {
+  main: {
+    background: {
+      base: baseLightTheme.colors.neutral[900],
+      overflowGradient: baseLightTheme.colors.neutral[1000],
+    },
+  },
+  secondary: {
+    background: {
+      base: baseLightTheme.colors.neutral[800],
+    },
+  },
+  text: {
+    base: baseLightTheme.colors.neutral[0],
+    hover: baseLightTheme.colors.neutral[0],
+  },
+  icon: {
+    base: baseLightTheme.colors.neutral[0],
+    hover: baseLightTheme.colors.neutral[0],
+  },
+  listItem: {
+    background: {
+      base: baseLightTheme.colors.neutral[800],
+      hover: baseLightTheme.colors.neutral[1000],
+      selected: baseLightTheme.colors.neutral[700],
+    },
+  },
+};
+
+const lightTheme: TypeSproutTheme = {
+  ...baseLightTheme,
+  colors: {
+    ...baseLightTheme.colors,
+    navigation,
+  },
+};
+
+export default lightTheme;

package/__flow__/types/theme.colors.flow.js

@@ -229,7 +229,14 @@ type TypeElevationColors = {|
   },
 |};
 
-type TypeDatavizColors = typeof datavizPalette;
+type TypeDatavizColors = {|
+  DATAVIZ_COLORS_MAP: typeof datavizPalette.DATAVIZ_COLORS_MAP,
+  DATAVIZ_COLORS_LIST: typeof datavizPalette.DATAVIZ_COLORS_LIST,
+  dataviz: {
+    map: typeof datavizPalette.DATAVIZ_COLORS_MAP,
+    list: typeof datavizPalette.DATAVIZ_COLORS_LIST,
+  },
+|};
 
 type TypeNetworkColors = {|
   network: {

package/__flow__/types/theme.flow.js

@@ -13,7 +13,10 @@ import {
 } from "../themes/light/theme";
 import type { TypeColors } from "./theme.colors.flow.js";
 import type { TypeFontFamilyString } from "../themes/light/theme";
+import { navigation } 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;
 export type TypeFontWeight = typeof fontWeights;
@@ -28,6 +31,8 @@ export type TypeEasing = typeof easing;
 export type TypeDuration = typeof duration;
 
 export type TypeTheme = {
+  mode: TypeThemeMode,
+  utils: TypeThemeUtils,
   breakpoints: TypeBreakpoint,
   colors: TypeColor,
   typography: TypeTypography,
@@ -41,3 +46,12 @@ export type TypeTheme = {
   easing: TypeEasing,
   duration: TypeDuration,
 };
+
+// Extended themes
+export type TypeSproutTheme = {
+  ...$Exact<TypeTheme>,
+  colors: {|
+    ...$Exact<TypeColor>,
+    navigation: typeof navigation,
+  |},
+};

package/__flow__/utils/responsiveProps/index.test.js

@@ -19,13 +19,21 @@ describe("normalizeResponsiveProp", () => {
 
   it("should handle arrays with 4 values", () => {
     expect(normalizeResponsiveProp([0, 1, 2, 3])).toMatchObject([
-      0, 1, 2, 3, 3,
+      0,
+      1,
+      2,
+      3,
+      3,
     ]);
   });
 
   it("should handle arrays with 5 values", () => {
     expect(normalizeResponsiveProp([0, 1, 2, 3, 4])).toMatchObject([
-      0, 1, 2, 3, 4,
+      0,
+      1,
+      2,
+      3,
+      4,
     ]);
   });
 });

package/commonjs/index.js

@@ -61,6 +61,8 @@ var _exportNames = {
   Menu: true,
   Listbox: true,
   OverflowList: true,
+  sproutLightTheme: true,
+  sproutDarkTheme: true,
   toast: true,
   MenuButton: true,
   MenuButtonContext: true,
@@ -70,7 +72,7 @@ var _exportNames = {
   DateRangePicker: true,
   VisuallyHidden: true
 };
-exports.visuallyHidden = exports.useTextContent = exports.useSelect = exports.useMultiselect = exports.toast = exports.theme = 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.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");
 
@@ -101,6 +103,11 @@ var _theme2 = _interopRequireDefault(require("./themes/dark/theme"));
 
 exports.darkTheme = _theme2.default;
 
+var _sproutTheme = require("./themes/extendedThemes/sproutTheme");
+
+exports.sproutLightTheme = _sproutTheme.sproutLightTheme;
+exports.sproutDarkTheme = _sproutTheme.sproutDarkTheme;
+
 var _Icon = _interopRequireDefault(require("./Icon"));
 
 exports.Icon = _Icon.default;

package/commonjs/themes/dark/theme.js

@@ -31,9 +31,6 @@ var shadows = {
 exports.shadows = shadows;
 
 var colors = _extends({}, _theme.default.colors, {
-  utils: {
-    interact: (0, _interact.default)(MODE)
-  },
   app: {
     background: {
       base: _seedsColor.default.COLOR_NEUTRAL_1000
@@ -237,6 +234,9 @@ 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

@@ -0,0 +1,49 @@
+"use strict";
+
+exports.__esModule = true;
+exports.navigation = exports.default = void 0;
+
+var _theme = _interopRequireDefault(require("../../../dark/theme"));
+
+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 navigation = {
+  main: {
+    background: {
+      base: _theme.default.colors.neutral[1000],
+      overflowGradient: _theme.default.colors.neutral[1100]
+    }
+  },
+  secondary: {
+    background: {
+      base: _theme.default.colors.neutral[900]
+    }
+  },
+  text: {
+    base: _theme.default.colors.neutral[0],
+    hover: _theme.default.colors.neutral[0]
+  },
+  icon: {
+    base: _theme.default.colors.neutral[0],
+    hover: _theme.default.colors.neutral[0]
+  },
+  listItem: {
+    background: {
+      base: _theme.default.colors.neutral[1000],
+      hover: _theme.default.colors.neutral[1100],
+      selected: _theme.default.colors.neutral[700]
+    }
+  }
+};
+exports.navigation = navigation;
+
+var darkTheme = _extends({}, _theme.default, {
+  colors: _extends({}, _theme.default.colors, {
+    navigation: navigation
+  })
+});
+
+var _default = darkTheme;
+exports.default = _default;

package/commonjs/themes/extendedThemes/sproutTheme/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+exports.__esModule = true;
+exports.sproutLightTheme = exports.sproutDarkTheme = void 0;
+
+var _theme = _interopRequireDefault(require("./light/theme"));
+
+exports.sproutLightTheme = _theme.default;
+
+var _theme2 = _interopRequireDefault(require("./dark/theme"));
+
+exports.sproutDarkTheme = _theme2.default;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -0,0 +1,49 @@
+"use strict";
+
+exports.__esModule = true;
+exports.navigation = exports.default = void 0;
+
+var _theme = _interopRequireDefault(require("../../../light/theme"));
+
+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 navigation = {
+  main: {
+    background: {
+      base: _theme.default.colors.neutral[900],
+      overflowGradient: _theme.default.colors.neutral[1000]
+    }
+  },
+  secondary: {
+    background: {
+      base: _theme.default.colors.neutral[800]
+    }
+  },
+  text: {
+    base: _theme.default.colors.neutral[0],
+    hover: _theme.default.colors.neutral[0]
+  },
+  icon: {
+    base: _theme.default.colors.neutral[0],
+    hover: _theme.default.colors.neutral[0]
+  },
+  listItem: {
+    background: {
+      base: _theme.default.colors.neutral[800],
+      hover: _theme.default.colors.neutral[1000],
+      selected: _theme.default.colors.neutral[700]
+    }
+  }
+};
+exports.navigation = navigation;
+
+var lightTheme = _extends({}, _theme.default, {
+  colors: _extends({}, _theme.default.colors, {
+    navigation: navigation
+  })
+});
+
+var _default = lightTheme;
+exports.default = _default;

package/commonjs/types/theme.flow.js

@@ -1,3 +1,5 @@
 "use strict";
 
-var _theme = require("../themes/light/theme");
+var _theme = require("../themes/light/theme");
+
+var _theme2 = require("../themes/extendedThemes/sproutTheme/light/theme");

package/dist/themes/dark/dark.scss

@@ -430,9 +430,6 @@ $dark: (
         18: #ff7f6e,
         19: #c2f2bd,
         20: #ffe99a
-      ),
-      utils: (
-        
       )
     ),
     typography: (

package/lib/index.js

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

package/lib/themes/dark/theme.js

@@ -15,9 +15,6 @@ export var shadows = {
 }; // If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
 
 var colors = _extends({}, lightTheme.colors, {
-  utils: {
-    interact: interact(MODE)
-  },
   app: {
     background: {
       base: COLORS.COLOR_NEUTRAL_1000
@@ -221,6 +218,9 @@ var colors = _extends({}, lightTheme.colors, {
 }, datavizPalette);
 
 var darkTheme = _extends({}, lightTheme, {
+  utils: {
+    interact: interact(MODE)
+  },
   colors: colors,
   shadows: shadows,
   mode: MODE

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

@@ -0,0 +1,39 @@
+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 baseDarkTheme from "../../../dark/theme";
+export var navigation = {
+  main: {
+    background: {
+      base: baseDarkTheme.colors.neutral[1000],
+      overflowGradient: baseDarkTheme.colors.neutral[1100]
+    }
+  },
+  secondary: {
+    background: {
+      base: baseDarkTheme.colors.neutral[900]
+    }
+  },
+  text: {
+    base: baseDarkTheme.colors.neutral[0],
+    hover: baseDarkTheme.colors.neutral[0]
+  },
+  icon: {
+    base: baseDarkTheme.colors.neutral[0],
+    hover: baseDarkTheme.colors.neutral[0]
+  },
+  listItem: {
+    background: {
+      base: baseDarkTheme.colors.neutral[1000],
+      hover: baseDarkTheme.colors.neutral[1100],
+      selected: baseDarkTheme.colors.neutral[700]
+    }
+  }
+};
+
+var darkTheme = _extends({}, baseDarkTheme, {
+  colors: _extends({}, baseDarkTheme.colors, {
+    navigation: navigation
+  })
+});
+
+export default darkTheme;

package/lib/themes/extendedThemes/sproutTheme/index.js

@@ -0,0 +1,2 @@
+export { default as sproutLightTheme } from "./light/theme";
+export { default as sproutDarkTheme } from "./dark/theme";

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

@@ -0,0 +1,39 @@
+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 baseLightTheme from "../../../light/theme";
+export var navigation = {
+  main: {
+    background: {
+      base: baseLightTheme.colors.neutral[900],
+      overflowGradient: baseLightTheme.colors.neutral[1000]
+    }
+  },
+  secondary: {
+    background: {
+      base: baseLightTheme.colors.neutral[800]
+    }
+  },
+  text: {
+    base: baseLightTheme.colors.neutral[0],
+    hover: baseLightTheme.colors.neutral[0]
+  },
+  icon: {
+    base: baseLightTheme.colors.neutral[0],
+    hover: baseLightTheme.colors.neutral[0]
+  },
+  listItem: {
+    background: {
+      base: baseLightTheme.colors.neutral[800],
+      hover: baseLightTheme.colors.neutral[1000],
+      selected: baseLightTheme.colors.neutral[700]
+    }
+  }
+};
+
+var lightTheme = _extends({}, baseLightTheme, {
+  colors: _extends({}, baseLightTheme.colors, {
+    navigation: navigation
+  })
+});
+
+export default lightTheme;

package/lib/types/theme.flow.js

@@ -1 +1,2 @@
-import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from "../themes/light/theme";
+import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from "../themes/light/theme";
+import { navigation } from "../themes/extendedThemes/sproutTheme/light/theme";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "11.5.0",
+  "version": "11.6.1-theme-beta.1",
   "license": "MIT",
   "files": [
     "__flow__",