@sproutsocial/racine 12.18.0 → 12.20.0

package/dist/logoList.js

@@ -1 +1 @@
-module.exports = ["bigcommerce-dark","bigcommerce","bitly-dark","bitly","canva-dark","canva","dropbox-dark","dropbox-lockup-dark","dropbox-lockup","dropbox-wordmark-dark","dropbox-wordmark","dropbox","facebook-audience-network-dark","facebook-audience-network","facebook-dark","facebook-groups-dark","facebook-groups","facebook-shops-dark","facebook-shops","facebook","feedly-dark","feedly","glassdoor-dark","glassdoor","google-analytics-dark","google-analytics","google-business-messages-dark","google-business-messages","google-drive-dark","google-drive","google-my-business-dark","google-my-business","hubspot-dark","hubspot","instagram-dark","instagram","linkedin-audience-network-dark","linkedin-audience-network","linkedin-dark","linkedin","marketo-dark","marketo","messenger-dark","messenger","microsoft-dynamics-dark","microsoft-dynamics","pinterest-dark","pinterest","reddit-dark","reddit","salesforce-dark","salesforce","shopify-dark","shopify","slack-dark","slack","tiktok-dark","tiktok","tripadvisor-dark","tripadvisor","tumblr-dark","tumblr","twitter-audience-network-dark","twitter-audience-network","twitter-dark","twitter","whatsapp-dark","whatsapp","woocommerce-dark","woocommerce","yelp-dark","yelp","youtube-dark","youtube","zendesk-dark","zendesk-lockup-dark","zendesk-lockup","zendesk-wordmark-dark","zendesk-wordmark","zendesk"];
+module.exports = ["bigcommerce-dark","bigcommerce-lockup-dark","bigcommerce-lockup","bigcommerce","bitly-dark","bitly","canva-dark","canva","dropbox-dark","dropbox-lockup-dark","dropbox-lockup","dropbox-wordmark-dark","dropbox-wordmark","dropbox","facebook-audience-network-dark","facebook-audience-network","facebook-dark","facebook-groups-dark","facebook-groups","facebook-shops-dark","facebook-shops","facebook","feedly-dark","feedly","glassdoor-dark","glassdoor","google-analytics-dark","google-analytics","google-business-messages-dark","google-business-messages","google-drive-dark","google-drive","google-my-business-dark","google-my-business","hubspot-dark","hubspot","instagram-dark","instagram","linkedin-audience-network-dark","linkedin-audience-network","linkedin-dark","linkedin","marketo-dark","marketo","messenger-dark","messenger","microsoft-dynamics-dark","microsoft-dynamics","pinterest-dark","pinterest","reddit-dark","reddit","salesforce-dark","salesforce","shopify-dark","shopify","slack-dark","slack","sproutsocial-dark","sproutsocial-lockup-dark","sproutsocial-lockup","sproutsocial-wordmark-dark","sproutsocial-wordmark","sproutsocial","tiktok-dark","tiktok","tripadvisor-dark","tripadvisor","tumblr-dark","tumblr","twitter-audience-network-dark","twitter-audience-network","twitter-dark","twitter","whatsapp-dark","whatsapp","woocommerce-dark","woocommerce","yelp-dark","yelp","youtube-dark","youtube","zendesk-dark","zendesk-lockup-dark","zendesk-lockup","zendesk-wordmark-dark","zendesk-wordmark","zendesk"];

package/dist/themes/dark/theme.scss

@@ -169,9 +169,9 @@ $theme: (
         "info": #dcf2ff,
         "opportunity": #eaeaf9,
         "applied": #56adf5,
-        "positive_sentiment": #2079c3,
+        "positive_sentiment": #2b87d3,
         "negative_sentiment": #ed4c42,
-        "neutral_sentiment": #6e797a
+        "neutral_sentiment": #929a9b
       ),
       "form": (
         "background": (

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

@@ -201,9 +201,9 @@ $theme: (
         "info": #dcf2ff,
         "opportunity": #eaeaf9,
         "applied": #56adf5,
-        "positive_sentiment": #2079c3,
+        "positive_sentiment": #2b87d3,
         "negative_sentiment": #ed4c42,
-        "neutral_sentiment": #6e797a
+        "neutral_sentiment": #929a9b
       ),
       "form": (
         "background": (
@@ -495,7 +495,7 @@ $theme: (
           ),
           "accordion": (
             "background": (
-              "base": #162020
+              "base": #162020A3
             )
           )
         ),
@@ -607,6 +607,18 @@ $theme: (
             "purple": #6f5ed3
           )
         ),
+        "featuredDemo": (
+          "background": (
+            "primary": (
+              "base": #56adf5,
+              "hover": #dcf2ff
+            ),
+            "secondary": (
+              "base": #9180f4,
+              "hover": #eaeaf9
+            )
+          )
+        ),
         "darkModal": (
           "background": (
             "base": #002838
@@ -866,6 +878,18 @@ $theme: (
         "purple": #6f5ed3
       )
     ),
+    "featuredDemo": (
+      "background": (
+        "primary": (
+          "base": #56adf5,
+          "hover": #dcf2ff
+        ),
+        "secondary": (
+          "base": #9180f4,
+          "hover": #eaeaf9
+        )
+      )
+    ),
     "darkModal": (
       "background": (
         "base": #002838
@@ -937,7 +961,7 @@ $theme: (
       ),
       "accordion": (
         "background": (
-          "base": #162020
+          "base": #162020A3
         )
       )
     ),

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

@@ -200,9 +200,9 @@ $theme: (
         "info": #0c5689,
         "opportunity": #5e4eba,
         "applied": #2079c3,
-        "positive_sentiment": #2079c3,
+        "positive_sentiment": #2b87d3,
         "negative_sentiment": #ed4c42,
-        "neutral_sentiment": #6e797a
+        "neutral_sentiment": #929a9b
       ),
       "form": (
         "background": (
@@ -606,6 +606,18 @@ $theme: (
             "purple": #6f5ed3
           )
         ),
+        "featuredDemo": (
+          "background": (
+            "primary": (
+              "base": #2079c3,
+              "hover": #0c5689
+            ),
+            "secondary": (
+              "base": #5e4eba,
+              "hover": #5e4eba
+            )
+          )
+        ),
         "darkModal": (
           "background": (
             "base": #002838
@@ -865,6 +877,18 @@ $theme: (
         "purple": #6f5ed3
       )
     ),
+    "featuredDemo": (
+      "background": (
+        "primary": (
+          "base": #2079c3,
+          "hover": #0c5689
+        ),
+        "secondary": (
+          "base": #5e4eba,
+          "hover": #5e4eba
+        )
+      )
+    ),
     "darkModal": (
       "background": (
         "base": #002838

package/dist/themes/light/theme.scss

@@ -175,9 +175,9 @@ $theme: (
         "info": #0c5689,
         "opportunity": #5e4eba,
         "applied": #2079c3,
-        "positive_sentiment": #2079c3,
+        "positive_sentiment": #2b87d3,
         "negative_sentiment": #ed4c42,
-        "neutral_sentiment": #6e797a
+        "neutral_sentiment": #929a9b
       ),
       "form": (
         "background": (

package/lib/Icon/styles.js

@@ -13,9 +13,7 @@ var sizes = {
 };
 
 var stylesForSize = function stylesForSize(iconSize, fixedWidth) {
-  return css(["line-height:", ";&,.Icon-svg{height:", ";fill:currentColor;}", " _:-ms-fullscreen &,html &{width:", ";}", " .pdf-page &{width:", ";}"], iconSize, iconSize, fixedWidth && "\n    &,\n    & .Icon-svg {\n      width: " + iconSize + "\n    }\n  ", iconSize, ""
-  /* PDF hack, do not remove */
-  , iconSize);
+  return css(["line-height:", ";&,.Icon-svg{height:", ";fill:currentColor;}", ""], iconSize, iconSize, fixedWidth && "\n    &,\n    & .Icon-svg {\n      width: " + iconSize + "\n    }\n  ");
 };
 
 var Container = styled.span.attrs({

package/lib/LoaderButton/index.js

@@ -9,17 +9,41 @@ import styled, { css } from "styled-components";
 import Box from "../Box";
 import Button from "../Button";
 import Loader from "../Loader";
+import { useTheme } from "styled-components";
 import { rgba } from "polished";
 import { COLOR_NEUTRAL_0, COLOR_NEUTRAL_1000 } from "@sproutsocial/seeds-color";
 
-var getColor = function getColor(appearance) {
+// TODO: This is a temporary solution to get the loader button to work with dark mode
+var getColor = function getColor(appearance, themeColorMode) {
+  var selectColorBasedOnMode = themeColorMode === "dark" ? "light" : "dark";
+
   switch (appearance) {
     /** "default" is @deprecated in favour of unstyled */
     case "default":
+      return selectColorBasedOnMode;
+
     case "unstyled":
-    case "outline":
+      return selectColorBasedOnMode;
+
+    case "primary":
+      return "light";
+
     case "secondary":
-      return "dark";
+      return selectColorBasedOnMode;
+
+    case "destructive":
+      return "light";
+
+    case "placeholder":
+      return selectColorBasedOnMode;
+
+    case "pill":
+      return selectColorBasedOnMode;
+
+    case "outline":
+      // This case doesn't even make sense.... There's no outline button
+      // TODO: investigate if this is even used anywhere
+      return "light";
 
     default:
       return "light";
@@ -45,6 +69,10 @@ export var LoaderButton = function LoaderButton(_ref) {
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var isLoading = Boolean(_isLoading);
+
+  var _useTheme = useTheme(),
+      themeColorMode = _useTheme.mode;
+
   return /*#__PURE__*/React.createElement(Button, _extends({
     disabled: disabled || isLoading,
     appearance: appearance,
@@ -65,7 +93,7 @@ export var LoaderButton = function LoaderButton(_ref) {
     text: loaderLabel,
     size: "small",
     delay: false,
-    color: getColor(appearance)
+    color: getColor(appearance, themeColorMode)
   }))));
 };
 export default LoaderButton;

package/lib/LogoViewBoxes.js

@@ -1,6 +1,8 @@
 module.exports = {
-  "bigcommerce-dark": "0 0 16 16",
-  "bigcommerce": "0 0 16 16",
+  "bigcommerce-dark": "0 0 140 140",
+  "bigcommerce-lockup-dark": "0 0 291 66",
+  "bigcommerce-lockup": "0 0 291 66",
+  "bigcommerce": "0 0 140 140",
   "bitly-dark": "0 0 140 64",
   "bitly": "0 0 140 64",
   "canva-dark": "0 0 140 140",
@@ -55,6 +57,12 @@ module.exports = {
   "shopify": "0 0 140 159",
   "slack-dark": "0 0 140 140",
   "slack": "0 0 140 140",
+  "sproutsocial-dark": "0 0 140 174",
+  "sproutsocial-lockup-dark": "0 0 291 58",
+  "sproutsocial-lockup": "0 0 291 58",
+  "sproutsocial-wordmark-dark": "0 0 320 52",
+  "sproutsocial-wordmark": "0 0 320 52",
+  "sproutsocial": "0 0 140 174",
   "tiktok-dark": "0 0 140 159",
   "tiktok": "0 0 140 159",
   "tripadvisor-dark": "0 0 140 140",

package/lib/PartnerLogo/index.js

@@ -45,12 +45,11 @@ var PartnerLogo = function PartnerLogo(_ref) {
     width: width ? width : defaultWidth + "px",
     logoSize: size // $FlowIssue - upgrade v0.112.0
 
-  }, rest), /*#__PURE__*/React.createElement("svg", _extends({
+  }, rest), /*#__PURE__*/React.createElement("svg", {
     className: "logo-svg",
     viewBox: logoViewBox,
-    focusable: false // $FlowIssue - upgrade v0.112.0
-
-  }, rest), /*#__PURE__*/React.createElement("use", {
+    focusable: false
+  }, /*#__PURE__*/React.createElement("use", {
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     xlinkHref: "#sslogosvg-" + whichLogo(backgroundType)
   })));

package/lib/PartnerLogo/styles.js

@@ -10,9 +10,7 @@ var sizes = {
 };
 
 var stylesForSize = function stylesForSize(height, width, logoSize) {
-  return css(["line-height:", ";&,.logo-svg{height:", ";width:", ";}_:-ms-fullscreen &,html &{width:", ";}", " .pdf-page &{width:", ";}"], logoSize ? logoSize : height, logoSize ? logoSize : height, logoSize ? logoSize : "", logoSize ? logoSize : width, ""
-  /* PDF hack, do not remove */
-  , logoSize ? logoSize : width);
+  return css(["line-height:", ";&,.logo-svg{height:", ";width:", ";}"], logoSize ? logoSize : height, logoSize ? logoSize : height, logoSize ? logoSize : "");
 };
 
 var Container = styled.span.attrs({

package/lib/themes/dark/theme.js

@@ -186,9 +186,9 @@ var colors = _extends({}, lightTheme.colors, {
     info: blue.foreground,
     opportunity: purple.foreground,
     applied: COLORS.COLOR_BLUE_400,
-    positive_sentiment: COLORS.COLOR_BLUE_700,
+    positive_sentiment: COLORS.COLOR_BLUE_600,
     negative_sentiment: COLORS.COLOR_RED_600,
-    neutral_sentiment: COLORS.COLOR_NEUTRAL_600
+    neutral_sentiment: COLORS.COLOR_NEUTRAL_500
   },
   form: {
     background: {

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

@@ -23,7 +23,10 @@ export var navigation = {
     },
     accordion: {
       background: {
-        base: baseDarkTheme.colors.neutral[1000]
+        // Uses hexicimal to change the opacity of the color
+        // Adding 'A3' at end to make this color have a 64% opacity
+        // Reference https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
+        base: baseDarkTheme.colors.neutral[1000] + "A3"
       }
     }
   },
@@ -136,6 +139,18 @@ export var growth = {
       purple: baseDarkTheme.colors.purple[700]
     }
   },
+  featuredDemo: {
+    background: {
+      primary: {
+        base: baseDarkTheme.colors.blue[400],
+        hover: baseDarkTheme.colors.blue[100]
+      },
+      secondary: {
+        base: baseDarkTheme.colors.purple[500],
+        hover: baseDarkTheme.colors.purple[100]
+      }
+    }
+  },
   darkModal: {
     background: {
       base: baseDarkTheme.colors.aqua[1100]

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

@@ -136,6 +136,18 @@ export var growth = {
       purple: baseLightTheme.colors.purple[700]
     }
   },
+  featuredDemo: {
+    background: {
+      primary: {
+        base: baseLightTheme.colors.blue[700],
+        hover: baseLightTheme.colors.blue[900]
+      },
+      secondary: {
+        base: baseLightTheme.colors.purple[800],
+        hover: baseLightTheme.colors.purple[800]
+      }
+    }
+  },
   darkModal: {
     background: {
       base: baseLightTheme.colors.aqua[1100]

package/lib/themes/light/theme.js

@@ -186,9 +186,9 @@ var colors = _extends({
     info: blue.foreground,
     opportunity: purple.foreground,
     applied: COLORS.COLOR_BLUE_700,
-    positive_sentiment: COLORS.COLOR_BLUE_700,
+    positive_sentiment: COLORS.COLOR_BLUE_600,
     negative_sentiment: COLORS.COLOR_RED_600,
-    neutral_sentiment: COLORS.COLOR_NEUTRAL_600
+    neutral_sentiment: COLORS.COLOR_NEUTRAL_500
   },
   form: {
     background: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "12.18.0",
+  "version": "12.20.0",
   "license": "MIT",
   "files": [
     "__flow__",