@sproutsocial/racine 11.2.4 → 11.2.5-sproutTheme-beta.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 11.2.5
+
+### Patch Changes
+
+- a73cdfb: remove weird characters from props descriptions
+
 ## 11.2.4
 
 ### Patch Changes

package/__flow__/Button/index.stories.js

@@ -3,6 +3,11 @@ import { boolean, text, number } from "@storybook/addon-knobs";
 import Button from "./index";
 import Icon from "../Icon";
 import Box from "../Box";
+import ThemeProvider from "../ThemeProvider";
+import {
+  sproutLightTheme,
+  sproutDarkTheme,
+} from "../themes/extendedThemes/sproutTheme";
 
 export default {
   title: "Button",
@@ -22,12 +27,22 @@ defaultStory.story = {
 };
 
 export const primary = () => (
-  <Button
-    appearance={text("appearance", "primary")}
-    onClick={() => alert("Testing...")}
-  >
-    Primary Button
-  </Button>
+  <>
+    <Button
+      appearance={text("appearance", "primary")}
+      onClick={() => alert("Testing...")}
+    >
+      Primary Button
+    </Button>
+    <ThemeProvider theme={(theme) => sproutLightTheme(theme)}>
+      <Button
+        appearance={text("appearance", "primary")}
+        onClick={() => alert("Testing...")}
+      >
+        Primary Button
+      </Button>
+    </ThemeProvider>
+  </>
 );
 
 primary.story = {

package/__flow__/Link/index.js

@@ -8,11 +8,11 @@ type TypeProps = {
   /** Optional prop to make the URL open in a new tab */
   external?: boolean,
   children: React.Node,
-  /** Setting this prop will cause the component to be rendered as a link.) */
+  /** Setting this prop will cause the component to be rendered as a link */
   href?: string,
   /** Disables user action and applies a disabled style to the component */
   disabled?: boolean,
-  /** Can be used in addition to an href but still renders as a link. Omitting href will render as button.) */
+  /** Can be used in addition to an href but still renders as a link. Omitting href will render as button */
   onClick?: (e: SyntheticEvent<HTMLButtonElement>) => void,
   as?: $PropertyType<TypeStyledComponentsCommonProps, "as">,
   underline?: boolean,

package/__flow__/ThemeProvider/index.js

@@ -3,10 +3,11 @@ 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 } from "../types/theme.flow";
+import type { TypeSproutTheme } from "../themes/extendedThemes/sproutTheme/sproutThemeType.flow";
 
 type TypeProps = $ReadOnly<{|
-  theme?: TypeTheme,
+  theme?: TypeTheme | TypeSproutTheme,
   children: React.Node,
 |}>;
 

package/__flow__/index.js

@@ -6,6 +6,10 @@ 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__/themes/extendedThemes/sproutTheme/NonColorThemeValues/index.js

@@ -0,0 +1,17 @@
+// @flow strict-local
+import type {
+  TypeNonColorThemeValues,
+  TypeTheme,
+} from "../../../../types/theme.flow.js";
+
+export function getNonColorThemeValues(
+  theme: TypeTheme
+): TypeNonColorThemeValues {
+  const { colors, ...otherThemeValues } = theme;
+  return {
+    ...otherThemeValues,
+    /**
+     * You can add your own theme values or over rides here.
+     */
+  };
+}

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

@@ -0,0 +1,45 @@
+// @flow strict-local
+import type { TypeColors } from "../../../../types/theme.colors.flow.js";
+
+export function getDarkThemeColors(themeColors: TypeColors) {
+  return {
+    ...themeColors,
+    navigation: {
+      main: {
+        background: {
+          base: themeColors.neutral[1000],
+          gradient: themeColors.neutral[1100],
+        },
+      },
+      secondary: {
+        background: {
+          base: themeColors.neutral[900],
+        },
+      },
+      text: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0],
+      },
+      icon: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0],
+      },
+      listItem: {
+        background: {
+          base: themeColors.neutral[1000],
+          hover: themeColors.neutral[1100],
+          active: themeColors.neutral[700],
+        },
+      },
+    },
+    icon: {
+      // FIX: These need to be changed to have dark mode colors
+      // For now we've copied the light mode values here as well.
+      sentiment: {
+        positive_sentiment: themeColors.blue[500],
+        negative_sentiment: themeColors.red[500],
+        neutral_sentiment: themeColors.neutral[300],
+      },
+    },
+  };
+}

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

@@ -0,0 +1,25 @@
+// @flow strict-local
+import clone from "just-clone";
+import baseDarkTheme from "../../../dark/theme";
+import { getDarkThemeColors } from "./getDarkThemeColors";
+import { getNonColorThemeValues } from "../NonColorThemeValues";
+import type { TypeTheme } from "../../../../types/theme.flow.js";
+
+const darkTheme = (baseDarkTheme: TypeTheme) => {
+  // clone base theme. (we don't want to mutate the base theme)
+  const themeClone = clone(baseDarkTheme);
+
+  // get non color theme values
+  const nonColorThemeValues = getNonColorThemeValues(themeClone);
+
+  // get sprout specific dark theme colors
+  const darkThemeColors = getDarkThemeColors(themeClone.colors);
+
+  return {
+    ...themeClone,
+    ...nonColorThemeValues,
+    ...darkThemeColors,
+  };
+};
+
+export default darkTheme;

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

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

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

@@ -0,0 +1,43 @@
+// @flow strict-local
+import type { TypeColors } from "../../../../types/theme.colors.flow.js";
+
+export function getLightThemeColors(themeColors: TypeColors) {
+  return {
+    ...themeColors,
+    navigation: {
+      main: {
+        background: {
+          base: themeColors.neutral[900],
+          overflowGradient: themeColors.neutral[1000],
+        },
+      },
+      secondary: {
+        background: {
+          base: themeColors.neutral[800],
+        },
+      },
+      text: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0],
+      },
+      icon: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0],
+      },
+      listItem: {
+        background: {
+          base: themeColors.neutral[800],
+          hover: themeColors.neutral[1000],
+          selected: themeColors.neutral[700],
+        },
+      },
+    },
+    icon: {
+      sentiment: {
+        positive_sentiment: themeColors.blue[500],
+        negative_sentiment: themeColors.red[500],
+        neutral_sentiment: themeColors.neutral[300],
+      },
+    },
+  };
+}

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

@@ -0,0 +1,25 @@
+// @flow strict-local
+import clone from "just-clone";
+import baseLightTheme from "../../../light/theme";
+import { getLightThemeColors } from "./getLightThemeColors";
+import { getNonColorThemeValues } from "../NonColorThemeValues";
+import type { TypeTheme } from "../../../../types/theme.flow.js";
+
+const lightTheme = (baseLightTheme: TypeTheme) => {
+  // clone base theme. (we don't want to mutate the base theme)
+  const themeClone = clone(baseLightTheme);
+
+  // get non color theme values
+  const nonColorThemeValues = getNonColorThemeValues(themeClone);
+
+  // get sprout specific light theme colors
+  const lightThemeColors = getLightThemeColors(themeClone.colors);
+
+  return {
+    ...themeClone,
+    ...nonColorThemeValues,
+    ...lightThemeColors,
+  };
+};
+
+export default lightTheme;

package/__flow__/themes/extendedThemes/sproutTheme/sproutThemeType.flow.js

@@ -0,0 +1,36 @@
+// @flow strict-local
+import type { TypeTheme } from "../../../types/theme.flow";
+
+export type TypeSproutTheme = {
+  ...$Exact<TypeTheme>,
+  colors: {|
+    navigation: {|
+      main: {|
+        background: {|
+          base: string,
+          gradient: string,
+        |},
+      |},
+      secondary: {|
+        background: {|
+          base: string,
+        |},
+      |},
+      text: {|
+        base: string,
+        hover: string,
+      |},
+      icon: {|
+        base: string,
+        hover: string,
+      |},
+      listItem: {|
+        background: {|
+          base: string,
+          hover: string,
+          active: string,
+        |},
+      |},
+    |},
+  |},
+};

package/__flow__/types/theme.flow.js

@@ -14,6 +14,7 @@ import {
 import type { TypeColors } from "./theme.colors.flow.js";
 import type { TypeFontFamilyString } from "../themes/light/theme";
 
+export type TypeThemeMode = "light" | "dark";
 export type TypeBreakpoint = typeof breakpoints;
 export type TypeTypography = typeof typography;
 export type TypeFontWeight = typeof fontWeights;
@@ -28,6 +29,7 @@ export type TypeEasing = typeof easing;
 export type TypeDuration = typeof duration;
 
 export type TypeTheme = {
+  mode: TypeThemeMode,
   breakpoints: TypeBreakpoint,
   colors: TypeColor,
   typography: TypeTypography,
@@ -41,3 +43,18 @@ export type TypeTheme = {
   easing: TypeEasing,
   duration: TypeDuration,
 };
+
+export type TypeNonColorThemeValues = {
+  mode: TypeThemeMode,
+  breakpoints: TypeBreakpoint,
+  typography: TypeTypography,
+  fontWeights: TypeFontWeight,
+  fontFamily: TypeFontFamily,
+  space: TypeSpace,
+  radii: TypeRadii,
+  borders: TypeBorder,
+  borderWidths: TypeBorderWidth,
+  shadows: TypeShadow,
+  easing: TypeEasing,
+  duration: TypeDuration,
+};

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.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.sproutDarkTheme = exports.sproutLightTheme = 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;
 
 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/extendedThemes/sproutTheme/NonColorThemeValues/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getNonColorThemeValues = getNonColorThemeValues;
+
+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 _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function getNonColorThemeValues(theme) {
+  var colors = theme.colors,
+      otherThemeValues = _objectWithoutPropertiesLoose(theme, ["colors"]);
+
+  return _extends({}, otherThemeValues);
+}

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

@@ -0,0 +1,48 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getDarkThemeColors = getDarkThemeColors;
+
+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 getDarkThemeColors(themeColors) {
+  return _extends({}, themeColors, {
+    navigation: {
+      main: {
+        background: {
+          base: themeColors.neutral[1000],
+          gradient: themeColors.neutral[1100]
+        }
+      },
+      secondary: {
+        background: {
+          base: themeColors.neutral[900]
+        }
+      },
+      text: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0]
+      },
+      icon: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0]
+      },
+      listItem: {
+        background: {
+          base: themeColors.neutral[1000],
+          hover: themeColors.neutral[1100],
+          active: themeColors.neutral[700]
+        }
+      }
+    },
+    icon: {
+      // FIX: These need to be changed to have dark mode colors
+      // For now we've copied the light mode values here as well.
+      sentiment: {
+        positive_sentiment: themeColors.blue[500],
+        negative_sentiment: themeColors.red[500],
+        neutral_sentiment: themeColors.neutral[300]
+      }
+    }
+  });
+}

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

@@ -0,0 +1,29 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _justClone = _interopRequireDefault(require("just-clone"));
+
+var _theme = _interopRequireDefault(require("../../../dark/theme"));
+
+var _getDarkThemeColors = require("./getDarkThemeColors");
+
+var _NonColorThemeValues = require("../NonColorThemeValues");
+
+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 = function darkTheme(baseDarkTheme) {
+  // clone base theme. (we don't want to mutate the base theme)
+  var themeClone = (0, _justClone.default)(baseDarkTheme); // get non color theme values
+
+  var nonColorThemeValues = (0, _NonColorThemeValues.getNonColorThemeValues)(themeClone); // get sprout specific dark theme colors
+
+  var darkThemeColors = (0, _getDarkThemeColors.getDarkThemeColors)(themeClone.colors);
+  return _extends({}, themeClone, nonColorThemeValues, darkThemeColors);
+};
+
+var _default = darkTheme;
+exports.default = _default;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+exports.__esModule = true;
+exports.sproutDarkTheme = exports.sproutLightTheme = 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/getLightThemeColors.js

@@ -0,0 +1,46 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getLightThemeColors = getLightThemeColors;
+
+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 getLightThemeColors(themeColors) {
+  return _extends({}, themeColors, {
+    navigation: {
+      main: {
+        background: {
+          base: themeColors.neutral[900],
+          overflowGradient: themeColors.neutral[1000]
+        }
+      },
+      secondary: {
+        background: {
+          base: themeColors.neutral[800]
+        }
+      },
+      text: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0]
+      },
+      icon: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0]
+      },
+      listItem: {
+        background: {
+          base: themeColors.neutral[800],
+          hover: themeColors.neutral[1000],
+          selected: themeColors.neutral[700]
+        }
+      }
+    },
+    icon: {
+      sentiment: {
+        positive_sentiment: themeColors.blue[500],
+        negative_sentiment: themeColors.red[500],
+        neutral_sentiment: themeColors.neutral[300]
+      }
+    }
+  });
+}

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

@@ -0,0 +1,29 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _justClone = _interopRequireDefault(require("just-clone"));
+
+var _theme = _interopRequireDefault(require("../../../light/theme"));
+
+var _getLightThemeColors = require("./getLightThemeColors");
+
+var _NonColorThemeValues = require("../NonColorThemeValues");
+
+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 lightTheme = function lightTheme(baseLightTheme) {
+  // clone base theme. (we don't want to mutate the base theme)
+  var themeClone = (0, _justClone.default)(baseLightTheme); // get non color theme values
+
+  var nonColorThemeValues = (0, _NonColorThemeValues.getNonColorThemeValues)(themeClone); // get sprout specific light theme colors
+
+  var lightThemeColors = (0, _getLightThemeColors.getLightThemeColors)(themeClone.colors);
+  return _extends({}, themeClone, nonColorThemeValues, lightThemeColors);
+};
+
+var _default = lightTheme;
+exports.default = _default;

package/commonjs/themes/extendedThemes/sproutTheme/sproutThemeType.flow.js

@@ -0,0 +1 @@
+"use strict";

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/extendedThemes/sproutTheme/NonColorThemeValues/index.js

@@ -0,0 +1,10 @@
+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 _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+export function getNonColorThemeValues(theme) {
+  var colors = theme.colors,
+      otherThemeValues = _objectWithoutPropertiesLoose(theme, ["colors"]);
+
+  return _extends({}, otherThemeValues);
+}

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

@@ -0,0 +1,43 @@
+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); }
+
+export function getDarkThemeColors(themeColors) {
+  return _extends({}, themeColors, {
+    navigation: {
+      main: {
+        background: {
+          base: themeColors.neutral[1000],
+          gradient: themeColors.neutral[1100]
+        }
+      },
+      secondary: {
+        background: {
+          base: themeColors.neutral[900]
+        }
+      },
+      text: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0]
+      },
+      icon: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0]
+      },
+      listItem: {
+        background: {
+          base: themeColors.neutral[1000],
+          hover: themeColors.neutral[1100],
+          active: themeColors.neutral[700]
+        }
+      }
+    },
+    icon: {
+      // FIX: These need to be changed to have dark mode colors
+      // For now we've copied the light mode values here as well.
+      sentiment: {
+        positive_sentiment: themeColors.blue[500],
+        negative_sentiment: themeColors.red[500],
+        neutral_sentiment: themeColors.neutral[300]
+      }
+    }
+  });
+}

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

@@ -0,0 +1,18 @@
+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 clone from "just-clone";
+import baseDarkTheme from "../../../dark/theme";
+import { getDarkThemeColors } from "./getDarkThemeColors";
+import { getNonColorThemeValues } from "../NonColorThemeValues";
+
+var darkTheme = function darkTheme(baseDarkTheme) {
+  // clone base theme. (we don't want to mutate the base theme)
+  var themeClone = clone(baseDarkTheme); // get non color theme values
+
+  var nonColorThemeValues = getNonColorThemeValues(themeClone); // get sprout specific dark theme colors
+
+  var darkThemeColors = getDarkThemeColors(themeClone.colors);
+  return _extends({}, themeClone, nonColorThemeValues, darkThemeColors);
+};
+
+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/getLightThemeColors.js

@@ -0,0 +1,41 @@
+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); }
+
+export function getLightThemeColors(themeColors) {
+  return _extends({}, themeColors, {
+    navigation: {
+      main: {
+        background: {
+          base: themeColors.neutral[900],
+          overflowGradient: themeColors.neutral[1000]
+        }
+      },
+      secondary: {
+        background: {
+          base: themeColors.neutral[800]
+        }
+      },
+      text: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0]
+      },
+      icon: {
+        base: themeColors.neutral[0],
+        hover: themeColors.neutral[0]
+      },
+      listItem: {
+        background: {
+          base: themeColors.neutral[800],
+          hover: themeColors.neutral[1000],
+          selected: themeColors.neutral[700]
+        }
+      }
+    },
+    icon: {
+      sentiment: {
+        positive_sentiment: themeColors.blue[500],
+        negative_sentiment: themeColors.red[500],
+        neutral_sentiment: themeColors.neutral[300]
+      }
+    }
+  });
+}

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

@@ -0,0 +1,18 @@
+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 clone from "just-clone";
+import baseLightTheme from "../../../light/theme";
+import { getLightThemeColors } from "./getLightThemeColors";
+import { getNonColorThemeValues } from "../NonColorThemeValues";
+
+var lightTheme = function lightTheme(baseLightTheme) {
+  // clone base theme. (we don't want to mutate the base theme)
+  var themeClone = clone(baseLightTheme); // get non color theme values
+
+  var nonColorThemeValues = getNonColorThemeValues(themeClone); // get sprout specific light theme colors
+
+  var lightThemeColors = getLightThemeColors(themeClone.colors);
+  return _extends({}, themeClone, nonColorThemeValues, lightThemeColors);
+};
+
+export default lightTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "11.2.4",
+  "version": "11.2.5-sproutTheme-beta.2",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -66,6 +66,7 @@
   "dependencies": {
     "@styled-system/theme-get": "^5.1.2",
     "classnames": "^2.2.6",
+    "just-clone": "^5.0.1",
     "lodash.curry": "^4.1.1",
     "lodash.uniqueid": "^4.0.1",
     "lru-memoize": "^1.1.0",

package/bin/buildNpm.js

@@ -1,58 +0,0 @@
-/**
- * This file handles the generation of an .npmrc with Jfrog credentials during the CI process.
- * It replicates the local configuration requirements of a developer running `yarn` on their machine
- * If run locally please do not commit your auth credentials
- */
-const fs = require("fs");
-const https = require("https");
-const { exit } = require("process");
-
-const { ARTIFACTORY_KEY, CI } = process.env;
-
-// Check if we're in CI context, otherwise skip the process
-if (!CI) {
-  exit();
-}
-
-const options = {
-  hostname: "sproutsocial.jfrog.io",
-  path: "/artifactory/api/npm/auth",
-  method: "GET",
-  headers: {
-    "X-JFrog-Art-Api": ARTIFACTORY_KEY,
-  },
-};
-
-const req = https.request(options, (res) => {
-  console.log(`statusCode: ${res.statusCode}`);
-
-  // Call our auth endpoint with environment credentials
-  res.on("data", (data) => {
-    // Writes out an .npmrc file with the response
-    fs.writeFile(".npmrc", data, (err) => {
-      if (err) console.log(err);
-      else {
-        console.log(".npmrc generated successfully!");
-      }
-    });
-
-    // Once the file is created we append the registry info
-    fs.appendFile(
-      ".npmrc",
-      "registry=https://sproutsocial.jfrog.io/artifactory/api/npm/npm_virtual",
-      function (err) {
-        if (err) throw err;
-        console.log("Registry Config Added!");
-      }
-    );
-
-    // Finally, we set permissions for the file so that netlify recognizes it
-    fs.chmodSync(".npmrc", "0600");
-  });
-});
-
-req.on("error", (error) => {
-  console.error(error);
-});
-
-req.end();