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

package/__flow__/ThemeProvider/index.js

@@ -4,9 +4,10 @@ import { ThemeProvider as BaseThemeProvider } from "styled-components";
 import theme 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__/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

@@ -1,43 +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 = (theme: TypeTheme) => {
-  const sproutDarkTheme = clone(theme);
+const darkTheme = (baseDarkTheme: TypeTheme) => {
+  // clone base theme. (we don't want to mutate the base theme)
+  const themeClone = clone(baseDarkTheme);
 
-  sproutDarkTheme.colors = {
-    ...sproutDarkTheme.colors,
-    navigation: {
-      main: {
-        background: {
-          base: theme.colors.neutral[1000],
-          gradient: theme.colors.neutral[1100],
-        },
-      },
-      secondary: {
-        background: {
-          base: theme.colors.neutral[900],
-        },
-      },
-      text: {
-        base: theme.colors.neutral[0],
-        hover: theme.colors.neutral[0],
-      },
-      icon: {
-        base: theme.colors.neutral[0],
-        hover: theme.colors.neutral[0],
-      },
-      item: {
-        background: {
-          base: theme.colors.neutral[1000],
-          hover: theme.colors.neutral[1100],
-          active: theme.colors.neutral[700],
-        },
-      },
-    },
-  };
+  // get non color theme values
+  const nonColorThemeValues = getNonColorThemeValues(themeClone);
+
+  // get sprout specific dark theme colors
+  const darkThemeColors = getDarkThemeColors(themeClone.colors);
 
-  return sproutDarkTheme;
+  return {
+    ...themeClone,
+    ...nonColorThemeValues,
+    ...darkThemeColors,
+  };
 };
 
 export default darkTheme;

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

@@ -1,53 +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 = (theme: TypeTheme) => {
-  const sproutLightTheme = clone(theme);
-  // copy theme that's passed in
-  // get all non color theme values
-  // get light theme changes
+const lightTheme = (baseLightTheme: TypeTheme) => {
+  // clone base theme. (we don't want to mutate the base theme)
+  const themeClone = clone(baseLightTheme);
 
-  sproutLightTheme.colors = {
-    ...sproutLightTheme.colors,
-    navigation: {
-      main: {
-        background: {
-          base: theme.colors.neutral[900],
-          overflowGradient: theme.colors.neutral[1000],
-        },
-      },
-      secondary: {
-        background: {
-          base: theme.colors.neutral[800],
-        },
-      },
-      text: {
-        base: theme.colors.neutral[0],
-        hover: theme.colors.neutral[0],
-      },
-      icon: {
-        base: theme.colors.neutral[0],
-        hover: theme.colors.neutral[0],
-      },
-      listItem: {
-        background: {
-          base: theme.colors.neutral[800],
-          hover: theme.colors.neutral[1000],
-          selected: theme.colors.neutral[700],
-        },
-      },
-    },
-    icon: {
-      sentiment: {
-        positive_sentiment: theme.colors.blue[500],
-        negative_sentiment: theme.colors.red[500],
-        neutral_sentiment: theme.colors.neutral[300],
-      },
-    },
-  };
+  // get non color theme values
+  const nonColorThemeValues = getNonColorThemeValues(themeClone);
+
+  // get sprout specific light theme colors
+  const lightThemeColors = getLightThemeColors(themeClone.colors);
 
-  return sproutLightTheme;
+  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

@@ -43,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/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

@@ -5,43 +5,24 @@ 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(theme) {
-  var sproutDarkTheme = (0, _justClone.default)(theme);
-  sproutDarkTheme.colors = _extends({}, sproutDarkTheme.colors, {
-    navigation: {
-      main: {
-        background: {
-          base: theme.colors.neutral[1000],
-          gradient: theme.colors.neutral[1100]
-        }
-      },
-      secondary: {
-        background: {
-          base: theme.colors.neutral[900]
-        }
-      },
-      text: {
-        base: theme.colors.neutral[0],
-        hover: theme.colors.neutral[0]
-      },
-      icon: {
-        base: theme.colors.neutral[0],
-        hover: theme.colors.neutral[0]
-      },
-      item: {
-        background: {
-          base: theme.colors.neutral[1000],
-          hover: theme.colors.neutral[1100],
-          active: theme.colors.neutral[700]
-        }
-      }
-    }
-  });
-  return sproutDarkTheme;
+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;

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

@@ -5,53 +5,24 @@ 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(theme) {
-  var sproutLightTheme = (0, _justClone.default)(theme); // copy theme that's passed in
-  // get all non color theme values
-  // get light theme changes
-
-  sproutLightTheme.colors = _extends({}, sproutLightTheme.colors, {
-    navigation: {
-      main: {
-        background: {
-          base: theme.colors.neutral[900],
-          overflowGradient: theme.colors.neutral[1000]
-        }
-      },
-      secondary: {
-        background: {
-          base: theme.colors.neutral[800]
-        }
-      },
-      text: {
-        base: theme.colors.neutral[0],
-        hover: theme.colors.neutral[0]
-      },
-      icon: {
-        base: theme.colors.neutral[0],
-        hover: theme.colors.neutral[0]
-      },
-      listItem: {
-        background: {
-          base: theme.colors.neutral[800],
-          hover: theme.colors.neutral[1000],
-          selected: theme.colors.neutral[700]
-        }
-      }
-    },
-    icon: {
-      sentiment: {
-        positive_sentiment: theme.colors.blue[500],
-        negative_sentiment: theme.colors.red[500],
-        neutral_sentiment: theme.colors.neutral[300]
-      }
-    }
-  });
-  return sproutLightTheme;
+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;

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

@@ -1,40 +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(theme) {
-  var sproutDarkTheme = clone(theme);
-  sproutDarkTheme.colors = _extends({}, sproutDarkTheme.colors, {
-    navigation: {
-      main: {
-        background: {
-          base: theme.colors.neutral[1000],
-          gradient: theme.colors.neutral[1100]
-        }
-      },
-      secondary: {
-        background: {
-          base: theme.colors.neutral[900]
-        }
-      },
-      text: {
-        base: theme.colors.neutral[0],
-        hover: theme.colors.neutral[0]
-      },
-      icon: {
-        base: theme.colors.neutral[0],
-        hover: theme.colors.neutral[0]
-      },
-      item: {
-        background: {
-          base: theme.colors.neutral[1000],
-          hover: theme.colors.neutral[1100],
-          active: theme.colors.neutral[700]
-        }
-      }
-    }
-  });
-  return sproutDarkTheme;
+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/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

@@ -1,50 +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(theme) {
-  var sproutLightTheme = clone(theme); // copy theme that's passed in
-  // get all non color theme values
-  // get light theme changes
+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
 
-  sproutLightTheme.colors = _extends({}, sproutLightTheme.colors, {
-    navigation: {
-      main: {
-        background: {
-          base: theme.colors.neutral[900],
-          overflowGradient: theme.colors.neutral[1000]
-        }
-      },
-      secondary: {
-        background: {
-          base: theme.colors.neutral[800]
-        }
-      },
-      text: {
-        base: theme.colors.neutral[0],
-        hover: theme.colors.neutral[0]
-      },
-      icon: {
-        base: theme.colors.neutral[0],
-        hover: theme.colors.neutral[0]
-      },
-      listItem: {
-        background: {
-          base: theme.colors.neutral[800],
-          hover: theme.colors.neutral[1000],
-          selected: theme.colors.neutral[700]
-        }
-      }
-    },
-    icon: {
-      sentiment: {
-        positive_sentiment: theme.colors.blue[500],
-        negative_sentiment: theme.colors.red[500],
-        neutral_sentiment: theme.colors.neutral[300]
-      }
-    }
-  });
-  return sproutLightTheme;
+  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.5-sproutTheme-beta.1",
+  "version": "11.2.5-sproutTheme-beta.2",
   "license": "MIT",
   "files": [
     "__flow__",

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

@@ -1,6 +0,0 @@
-// @flow strict-local
-import clone from 'just-clone';
-
-const nonColorThemeValues = (theme) => {
-  const sproutTheme = clone(theme);
-}

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

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

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

@@ -1,9 +0,0 @@
-"use strict";
-
-var _justClone = _interopRequireDefault(require("just-clone"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var nonColorThemeValues = function nonColorThemeValues(theme) {
-  var sproutTheme = (0, _justClone.default)(theme);
-};

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

@@ -1,5 +0,0 @@
-import clone from 'just-clone';
-
-var nonColorThemeValues = function nonColorThemeValues(theme) {
-  var sproutTheme = clone(theme);
-};