@sproutsocial/racine 11.9.0-typescript.0 → 12.0.0

package/lib/themes/dark/theme.js

@@ -6,7 +6,6 @@ import lightTheme from "../light/theme";
 import { datavizPalette } from "./dataviz-palette";
 import { green, blue, purple, yellow, orange, red, neutral } from "./decorative-palettes";
 import { transparentize } from "polished";
-import interact from "../utils/interact";
 var MODE = "dark";
 export var shadows = {
   low: DEPTH.ELEVATION_LEVEL_100 + " " + COLORS.COLOR_NEUTRAL_1100 + "FF",
@@ -218,9 +217,6 @@ 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

@@ -39,11 +39,19 @@ export var datePicker = {
     }
   }
 };
+export var analytics = {
+  trend: {
+    positive: baseDarkTheme.colors.teal[500],
+    neutral: baseDarkTheme.colors.neutral[100],
+    negative: baseDarkTheme.colors.neutral[100]
+  }
+};
 
 var darkTheme = _extends({}, baseDarkTheme, {
   colors: _extends({}, baseDarkTheme.colors, {
     navigation: navigation,
-    datePicker: datePicker
+    datePicker: datePicker,
+    analytics: analytics
   })
 });
 

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

@@ -39,11 +39,19 @@ export var datePicker = {
     }
   }
 };
+export var analytics = {
+  trend: {
+    positive: baseLightTheme.colors.teal[800],
+    neutral: baseLightTheme.colors.neutral[800],
+    negative: baseLightTheme.colors.neutral[800]
+  }
+};
 
 var lightTheme = _extends({}, baseLightTheme, {
   colors: _extends({}, baseLightTheme.colors, {
     navigation: navigation,
-    datePicker: datePicker
+    datePicker: datePicker,
+    analytics: analytics
   })
 });
 

package/lib/themes/light/theme.js

@@ -11,7 +11,6 @@ import DEPTH from "@sproutsocial/seeds-depth";
 import MOTION from "@sproutsocial/seeds-motion";
 import BORDER from "@sproutsocial/seeds-border";
 import { transparentize } from "polished";
-import interact from "../utils/interact";
 export var breakpoints = ["900px", "1200px", "1500px", "1800px"];
 var MODE = "light"; // If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
 
@@ -308,9 +307,6 @@ export var duration = {
   slow: MOTION.MOTION_DURATION_SLOW
 };
 var theme = {
-  utils: {
-    interact: interact(MODE)
-  },
   breakpoints: breakpoints,
   colors: colors,
   typography: _extends({}, typography, {

package/lib/types/theme.flow.js

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

package/lib/utils/useInteractiveColor.js

@@ -0,0 +1,27 @@
+import { darken, lighten } from "polished";
+import { useTheme } from "styled-components";
+
+/**
+ * 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
+ */
+var useInteractiveColor = function useInteractiveColor(themeColor) {
+  // 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'
+
+
+  var 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "11.9.0-typescript.0",
+  "version": "12.0.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -66,10 +66,6 @@
   },
   "dependencies": {
     "@styled-system/theme-get": "^5.1.2",
-    "@types/jest": "^27.5.1",
-    "@types/node": "^17.0.38",
-    "@types/react": "^18.0.10",
-    "@types/react-dom": "^18.0.5",
     "classnames": "^2.2.6",
     "lodash.curry": "^4.1.1",
     "lodash.uniqueid": "^4.0.1",
@@ -85,7 +81,6 @@
     "react-virtualized": "9.18.5",
     "scroll-into-view-if-needed": "1.1.0",
     "styled-system": "^5.1.5",
-    "typescript": "^4.7.2",
     "use-measure": "^0.2.2"
   },
   "devDependencies": {

package/__flow__/themes/utils/interact.js

@@ -1,12 +0,0 @@
-//@flow strict-local
-import { darken, lighten } from "polished";
-
-const interact = (mode: string) => (themeValue: string) => {
-  if (mode === "dark") {
-    return lighten(0.2, themeValue);
-  } else {
-    return darken(0.2, themeValue);
-  }
-};
-
-export default interact;

package/commonjs/themes/utils/interact.js

@@ -1,19 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _polished = require("polished");
-
-var interact = function interact(mode) {
-  return function (themeValue) {
-    if (mode === "dark") {
-      return (0, _polished.lighten)(0.2, themeValue);
-    } else {
-      return (0, _polished.darken)(0.2, themeValue);
-    }
-  };
-};
-
-var _default = interact;
-exports.default = _default;

package/lib/themes/utils/interact.js

@@ -1,13 +0,0 @@
-import { darken, lighten } from "polished";
-
-var interact = function interact(mode) {
-  return function (themeValue) {
-    if (mode === "dark") {
-      return lighten(0.2, themeValue);
-    } else {
-      return darken(0.2, themeValue);
-    }
-  };
-};
-
-export default interact;