@sproutsocial/racine 12.19.0 → 12.20.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Log
 
+## 12.20.0
+
+### Minor Changes
+
+- cd9d6a5: Added feature demo colors to growth extended theme
+- 99c6adb: Updated the Loader Button component to support dark mode
+
+### Patch Changes
+
+- 38f240c: Removed legacy PDF and IE11 icon style hacks
+- 84797d6: Adjusted the values of icon sentiment colors to work more consistently and with better contrast across both light and dark modes
+- f97c4e1: Remove spread property from SVG in PartnerLogo component
+
 ## 12.19.0
 
 ### Minor Changes

package/__flow__/Icon/index.stories.js

@@ -80,6 +80,39 @@ defaultFixedWidth.story = {
   name: "Fixed Width (16 x 16)",
 };
 
+// testing for color usage via the theme
+export const sentimentIcons = () => (
+  <Box p={24}>
+    <Icon
+      name="flat-positive-sentiment"
+      size="large"
+      color="icon.positive_sentiment"
+      mr={400}
+    />
+    <Icon
+      name="flat-negative-sentiment"
+      size="large"
+      color="icon.negative_sentiment"
+      mr={400}
+    />
+    <Icon
+      name="flat-neutral-sentiment"
+      size="large"
+      color="icon.neutral_sentiment"
+      mr={400}
+    />
+    <Icon
+      name="flat-neutral-sentiment-outline"
+      size="large"
+      color="icon.base"
+    />
+  </Box>
+);
+
+sentimentIcons.story = {
+  name: "Sentiment usage",
+};
+
 export const Toggle = () => {
   const [state, setState] = useState([false, false, false, false]);
   const toggle = (index) => {

package/__flow__/Icon/styles.js

@@ -31,17 +31,6 @@ const stylesForSize = (iconSize, fixedWidth) => css`
       width: ${iconSize}
     }
   `}
-
-  /* IE 11 hack, do not remove */
-  /* stylelint-disable */
-  _:-ms-fullscreen &, html & {
-    width: ${iconSize};
-  }
-
-  ${"" /* PDF hack, do not remove */}
-  .pdf-page & {
-    width: ${iconSize};
-  }
 `;
 
 const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.span.attrs({

package/__flow__/LoaderButton/index.js

@@ -4,6 +4,7 @@ import styled, { css } from "styled-components";
 import Box from "../Box";
 import Button, { type TypeProps as TypeButtonProps } 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";
 
@@ -12,14 +13,29 @@ type TypeLoaderButtonProps = TypeButtonProps & {
   loaderLabel: string,
 };
 
-const getColor = (appearance) => {
+// TODO: This is a temporary solution to get the loader button to work with dark mode
+const getColor = (appearance, themeColorMode) => {
+  const 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";
   }
@@ -54,6 +70,8 @@ export const LoaderButton = ({
   ...rest
 }: TypeLoaderButtonProps) => {
   const isLoading = Boolean(_isLoading);
+  const { mode: themeColorMode } = useTheme();
+
   return (
     <Button
       disabled={disabled || isLoading}
@@ -72,7 +90,7 @@ export const LoaderButton = ({
               text={loaderLabel}
               size="small"
               delay={false}
-              color={getColor(appearance)}
+              color={getColor(appearance, themeColorMode)}
             />
           </Box>
         )}

package/__flow__/LoaderButton/index.stories.js

@@ -54,3 +54,31 @@ export const secondary = () => (
 secondary.story = {
   name: "Secondary",
 };
+
+export const allLoaderButtons = () => (
+  <Box display="flex" justifyContent="space-around">
+    <LoaderButton isLoading loaderLabel="Loading...">
+      Loading Button
+    </LoaderButton>
+
+    <LoaderButton appearance="primary" isLoading loaderLabel="Loading...">
+      Loading Button
+    </LoaderButton>
+
+    <LoaderButton appearance="secondary" isLoading loaderLabel="Loading...">
+      Loading Button
+    </LoaderButton>
+
+    <LoaderButton appearance="destructive" isLoading loaderLabel="Loading...">
+      Loading Button
+    </LoaderButton>
+
+    <LoaderButton appearance="placeholder" isLoading loaderLabel="Loading...">
+      Loading Button
+    </LoaderButton>
+
+    <LoaderButton appearance="pill" isLoading loaderLabel="Loading...">
+      Loading Button
+    </LoaderButton>
+  </Box>
+);

package/__flow__/Menu/__snapshots__/index.test.js.snap

@@ -14,15 +14,6 @@ exports[`Menu AsMenuButton should match snapshot 1`] = `
   fill: currentColor;
 }
 
-_:-ms-fullscreen .c2,
-html .c3 {
-  width: 16px;
-}
-
-.pdf-page .c2 {
-  width: 16px;
-}
-
 .c1 {
   display: inline-block;
   box-sizing: border-box;

package/__flow__/PartnerLogo/index.js

@@ -57,13 +57,7 @@ const PartnerLogo = ({
       // $FlowIssue - upgrade v0.112.0
       {...rest}
     >
-      <svg
-        className="logo-svg"
-        viewBox={logoViewBox}
-        focusable={false}
-        // $FlowIssue - upgrade v0.112.0
-        {...rest}
-      >
+      <svg className="logo-svg" viewBox={logoViewBox} focusable={false}>
         <use
           xmlnsXlink="http://www.w3.org/1999/xlink"
           xlinkHref={`#sslogosvg-${whichLogo(backgroundType)}`}

package/__flow__/PartnerLogo/styles.js

@@ -20,18 +20,6 @@ const stylesForSize = (height, width, logoSize) => css`
     height: ${logoSize ? logoSize : height};
     width: ${logoSize ? logoSize : ""};
   }
-
-  /* IE 11 hack, do not remove */
-  /* stylelint-disable */
-  _:-ms-fullscreen &,
-  html & {
-    width: ${logoSize ? logoSize : width};
-  }
-
-  ${"" /* PDF hack, do not remove */}
-  .pdf-page & {
-    width: ${logoSize ? logoSize : width};
-  }
 `;
 
 const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.span.attrs({

package/__flow__/themes/dark/theme.js

@@ -200,9 +200,9 @@ const 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/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -144,6 +144,18 @@ export const 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/__flow__/themes/extendedThemes/sproutTheme/light/theme.js

@@ -141,6 +141,18 @@ export const 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/__flow__/themes/light/theme.js

@@ -200,9 +200,9 @@ const colors = {
     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/commonjs/Icon/styles.js

@@ -25,9 +25,7 @@ var sizes = {
 };
 
 var stylesForSize = function stylesForSize(iconSize, fixedWidth) {
-  return (0, _styledComponents.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 (0, _styledComponents.css)(["line-height:", ";&,.Icon-svg{height:", ";fill:currentColor;}", ""], iconSize, iconSize, fixedWidth && "\n    &,\n    & .Icon-svg {\n      width: " + iconSize + "\n    }\n  ");
 };
 
 var Container = _styledComponents.default.span.attrs({

package/commonjs/LoaderButton/index.js

@@ -29,14 +29,37 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 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; }
 
-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";
@@ -63,6 +86,10 @@ var LoaderButton = function LoaderButton(_ref) {
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var isLoading = Boolean(_isLoading);
+
+  var _useTheme = (0, _styledComponents.useTheme)(),
+      themeColorMode = _useTheme.mode;
+
   return /*#__PURE__*/React.createElement(_Button.default, _extends({
     disabled: disabled || isLoading,
     appearance: appearance,
@@ -83,7 +110,7 @@ var LoaderButton = function LoaderButton(_ref) {
     text: loaderLabel,
     size: "small",
     delay: false,
-    color: getColor(appearance)
+    color: getColor(appearance, themeColorMode)
   }))));
 };
 

package/commonjs/PartnerLogo/index.js

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

package/commonjs/PartnerLogo/styles.js

@@ -22,9 +22,7 @@ var sizes = {
 };
 
 var stylesForSize = function stylesForSize(height, width, logoSize) {
-  return (0, _styledComponents.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 (0, _styledComponents.css)(["line-height:", ";&,.logo-svg{height:", ";width:", ";}"], logoSize ? logoSize : height, logoSize ? logoSize : height, logoSize ? logoSize : "");
 };
 
 var Container = _styledComponents.default.span.attrs({

package/commonjs/themes/dark/theme.js

@@ -201,9 +201,9 @@ var colors = _extends({}, _theme.default.colors, {
     info: _decorativePalettes.blue.foreground,
     opportunity: _decorativePalettes.purple.foreground,
     applied: _seedsColor.default.COLOR_BLUE_400,
-    positive_sentiment: _seedsColor.default.COLOR_BLUE_700,
+    positive_sentiment: _seedsColor.default.COLOR_BLUE_600,
     negative_sentiment: _seedsColor.default.COLOR_RED_600,
-    neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_600
+    neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_500
   },
   form: {
     background: {

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

@@ -152,6 +152,18 @@ var growth = {
       purple: _theme.default.colors.purple[700]
     }
   },
+  featuredDemo: {
+    background: {
+      primary: {
+        base: _theme.default.colors.blue[400],
+        hover: _theme.default.colors.blue[100]
+      },
+      secondary: {
+        base: _theme.default.colors.purple[500],
+        hover: _theme.default.colors.purple[100]
+      }
+    }
+  },
   darkModal: {
     background: {
       base: _theme.default.colors.aqua[1100]

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

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

package/commonjs/themes/light/theme.js

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

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": (
@@ -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

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/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

@@ -139,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.19.0",
+  "version": "12.20.0",
   "license": "MIT",
   "files": [
     "__flow__",