@sproutsocial/racine 11.9.0 → 12.1.0

package/commonjs/utils/useInteractiveColor.js

@@ -0,0 +1,33 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useInteractiveColor = void 0;
+
+var _polished = require("polished");
+
+var _styledComponents = require("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 (!(0, _styledComponents.useTheme)()) {
+    throw new Error("useInteractiveColor() must be used within a Styled Components ThemeProvider");
+  } // Get the current theme mode ie. 'light' or 'dark'
+
+
+  var themeMode = (0, _styledComponents.useTheme)().mode; // If the theme mode is dark, return a lightened version of the themeValue
+
+  if (themeMode === "dark") {
+    return (0, _polished.lighten)(0.2, themeColor);
+  } else {
+    // If the theme mode is light, return a darkened version of the themeValue
+    return (0, _polished.darken)(0.2, themeColor);
+  }
+};
+
+exports.useInteractiveColor = useInteractiveColor;

package/dist/themes/dark/theme.scss

@@ -1,9 +1,6 @@
 $theme: (
   __esModule: true,
   default: (
-    utils: (
-      
-    ),
     breakpoints: (900px, 1200px, 1500px, 1800px),
     colors: (
       app: (

package/dist/themes/extendedThemes/sproutTheme/dark/theme.scss

@@ -18,9 +18,6 @@ $theme: (
     )
   ),
   default: (
-    utils: (
-      
-    ),
     breakpoints: (900px, 1200px, 1500px, 1800px),
     colors: (
       app: (
@@ -492,6 +489,66 @@ $theme: (
           neutral: #f3f4f4,
           negative: #f3f4f4
         )
+      ),
+      growth: (
+        education: (
+          decorative: (
+            aqua: #0797ae,
+            teal: #08c4b2
+          )
+        ),
+        opportunity: (
+          background: (
+            base: #6f5ed3
+          ),
+          button: (
+            primary: (
+              base: #a193f2,
+              hover: #c1c1f7
+            )
+          ),
+          badge: (
+            background: (
+              base: #6f5ed3,
+              active: #eaeaf9
+            ),
+            icon: (
+              base: #d8d7f9,
+              active: #5e4eba
+            ),
+            text: (
+              base: #d8d7f9
+            )
+          ),
+          decorative: (
+            green: #0ca750,
+            lightAqua: #0797ae,
+            darkAqua: #002838,
+            purple: #6f5ed3
+          )
+        ),
+        darkModal: (
+          background: (
+            base: #002838
+          ),
+          text: (
+            base: #FFFFFF
+          ),
+          cards: (
+            background: (
+              base: #FFFFFF,
+              hover: #eaeaf9
+            ),
+            text: (
+              base: #364141,
+              hover: #273333
+            ),
+            border: (
+              base: #FFFFFF,
+              hover: #6f5ed3
+            )
+          )
+        )
       )
     ),
     typography: (
@@ -675,6 +732,66 @@ $theme: (
     ),
     mode: dark
   ),
+  growth: (
+    education: (
+      decorative: (
+        aqua: #0797ae,
+        teal: #08c4b2
+      )
+    ),
+    opportunity: (
+      background: (
+        base: #6f5ed3
+      ),
+      button: (
+        primary: (
+          base: #a193f2,
+          hover: #c1c1f7
+        )
+      ),
+      badge: (
+        background: (
+          base: #6f5ed3,
+          active: #eaeaf9
+        ),
+        icon: (
+          base: #d8d7f9,
+          active: #5e4eba
+        ),
+        text: (
+          base: #d8d7f9
+        )
+      ),
+      decorative: (
+        green: #0ca750,
+        lightAqua: #0797ae,
+        darkAqua: #002838,
+        purple: #6f5ed3
+      )
+    ),
+    darkModal: (
+      background: (
+        base: #002838
+      ),
+      text: (
+        base: #FFFFFF
+      ),
+      cards: (
+        background: (
+          base: #FFFFFF,
+          hover: #eaeaf9
+        ),
+        text: (
+          base: #364141,
+          hover: #273333
+        ),
+        border: (
+          base: #FFFFFF,
+          hover: #6f5ed3
+        )
+      )
+    )
+  ),
   navigation: (
     main: (
       background: (

package/dist/themes/extendedThemes/sproutTheme/light/theme.scss

@@ -18,9 +18,6 @@ $theme: (
     )
   ),
   default: (
-    utils: (
-      
-    ),
     breakpoints: (900px, 1200px, 1500px, 1800px),
     colors: (
       app: (
@@ -492,6 +489,66 @@ $theme: (
           neutral: #364141,
           negative: #364141
         )
+      ),
+      growth: (
+        education: (
+          decorative: (
+            aqua: #0797ae,
+            teal: #0b968f
+          )
+        ),
+        opportunity: (
+          background: (
+            base: #6f5ed3
+          ),
+          button: (
+            primary: (
+              base: #6f5ed3,
+              hover: #5e4eba
+            )
+          ),
+          badge: (
+            background: (
+              base: #d8d7f9,
+              active: #5e4eba
+            ),
+            icon: (
+              base: #6f5ed3,
+              active: #eaeaf9
+            ),
+            text: (
+              base: #6f5ed3
+            )
+          ),
+          decorative: (
+            green: #0ca750,
+            lightAqua: #0797ae,
+            darkAqua: #002838,
+            purple: #6f5ed3
+          )
+        ),
+        darkModal: (
+          background: (
+            base: #002838
+          ),
+          text: (
+            base: #FFFFFF
+          ),
+          cards: (
+            background: (
+              base: #FFFFFF,
+              hover: #eaeaf9
+            ),
+            text: (
+              base: #364141,
+              hover: #273333
+            ),
+            border: (
+              base: #FFFFFF,
+              hover: #6f5ed3
+            )
+          )
+        )
       )
     ),
     typography: (
@@ -675,6 +732,66 @@ $theme: (
     ),
     mode: light
   ),
+  growth: (
+    education: (
+      decorative: (
+        aqua: #0797ae,
+        teal: #0b968f
+      )
+    ),
+    opportunity: (
+      background: (
+        base: #6f5ed3
+      ),
+      button: (
+        primary: (
+          base: #6f5ed3,
+          hover: #5e4eba
+        )
+      ),
+      badge: (
+        background: (
+          base: #d8d7f9,
+          active: #5e4eba
+        ),
+        icon: (
+          base: #6f5ed3,
+          active: #eaeaf9
+        ),
+        text: (
+          base: #6f5ed3
+        )
+      ),
+      decorative: (
+        green: #0ca750,
+        lightAqua: #0797ae,
+        darkAqua: #002838,
+        purple: #6f5ed3
+      )
+    ),
+    darkModal: (
+      background: (
+        base: #002838
+      ),
+      text: (
+        base: #FFFFFF
+      ),
+      cards: (
+        background: (
+          base: #FFFFFF,
+          hover: #eaeaf9
+        ),
+        text: (
+          base: #364141,
+          hover: #273333
+        ),
+        border: (
+          base: #FFFFFF,
+          hover: #6f5ed3
+        )
+      )
+    )
+  ),
   navigation: (
     main: (
       background: (

package/dist/themes/light/theme.scss

@@ -8,9 +8,6 @@ $theme: (
   ),
   breakpoints: (900px, 1200px, 1500px, 1800px),
   default: (
-    utils: (
-      
-    ),
     breakpoints: (900px, 1200px, 1500px, 1800px),
     colors: (
       app: (

package/lib/Input/index.js

@@ -14,12 +14,13 @@ import Button from "../Button";
 import Icon from "../Icon";
 import styled from "styled-components";
 import { mergeRefs } from "../utils";
+import { useInteractiveColor } from "../utils/useInteractiveColor";
 var InputContext = /*#__PURE__*/React.createContext({});
 var StyledButton = styled(Button).withConfig({
   displayName: "Input__StyledButton",
   componentId: "sc-1ck1dnm-0"
 })(["&:hover,&:active{color:", ";}"], function (props) {
-  return props.theme.utils.interact(props.theme.colors.icon.base);
+  return useInteractiveColor(props.theme.colors.icon.base);
 });
 
 var ClearButton = function ClearButton() {

package/lib/Token/styles.js

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 import { COMMON } from "../utils/system-props";
 import { focusRing } from "../utils/mixins";
+import { useInteractiveColor } from "../utils/useInteractiveColor";
 var Container = styled.button.withConfig({
   displayName: "styles__Container",
   componentId: "sc-nyn5zy-0"
@@ -8,13 +9,13 @@ var Container = styled.button.withConfig({
   var theme = _ref.theme;
   return 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);
 }, focusRing, function (_ref2) {
-  var theme = _ref2.theme,
-      palette = _ref2.palette;
-  return palette === "blue" && 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 && css(["cursor:pointer;&:hover,&:active{box-shadow:", ";border:1px solid ", ";}"], theme.shadows.low, useInteractiveColor(theme.colors.container.border.base));
 }, function (_ref3) {
-  var closeable = _ref3.closeable,
-      theme = _ref3.theme;
-  return closeable && 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" && 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, useInteractiveColor(theme.colors.container.border.decorative.blue));
 }, function (_ref4) {
   var disabled = _ref4.disabled,
       theme = _ref4.theme;
@@ -22,6 +23,6 @@ var Container = styled.button.withConfig({
 }, function (_ref5) {
   var valid = _ref5.valid,
       theme = _ref5.theme;
-  return !valid && 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 && 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, useInteractiveColor(theme.colors.container.border.error));
 }, COMMON);
 export default Container;

package/lib/index.js

@@ -1,6 +1,7 @@
 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 { sproutLightTheme, sproutDarkTheme } from "./themes/extendedThemes/sproutTheme";

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

@@ -46,12 +46,74 @@ export var analytics = {
     negative: baseDarkTheme.colors.neutral[100]
   }
 };
+export var 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]
+      }
+    }
+  }
+};
 
 var darkTheme = _extends({}, baseDarkTheme, {
   colors: _extends({}, baseDarkTheme.colors, {
     navigation: navigation,
     datePicker: datePicker,
-    analytics: analytics
+    analytics: analytics,
+    growth: growth
   })
 });
 

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

@@ -46,12 +46,74 @@ export var analytics = {
     negative: baseLightTheme.colors.neutral[800]
   }
 };
+export var 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]
+      }
+    }
+  }
+};
 
 var lightTheme = _extends({}, baseLightTheme, {
   colors: _extends({}, baseLightTheme.colors, {
     navigation: navigation,
     datePicker: datePicker,
-    analytics: analytics
+    analytics: analytics,
+    growth: growth
   })
 });
 

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, analytics } from "../themes/extendedThemes/sproutTheme/light/theme";
+import { datePicker, navigation, analytics, growth } 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",
+  "version": "12.1.0",
   "license": "MIT",
   "files": [
     "__flow__",

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;