@sproutsocial/racine 12.1.0-svgs-bundle.0 → 12.2.0-partner-logos.1

package/__flow__/EnumLogoNames.js

@@ -1,2 +1,2 @@
 // @flow
-    export type EnumLogoNames = "bitly-dark" | "bitly" | "canva-dark" | "canva" | "dropbox-dark" | "dropbox" | "facebook-dark" | "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-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-dark" | "twitter" | "whatsapp-dark" | "whatsapp" | "woocommerce-dark" | "woocommerce" | "yelp-dark" | "yelp" | "youtube-dark" | "youtube" | "zendesk-dark" | "zendesk";
+    export type EnumLogoNames = "bitly-dark" | "bitly" | "canva-dark" | "canva" | "dropbox-dark" | "dropbox" | "facebook-dark" | "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-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-dark" | "twitter" | "whatsapp-dark" | "whatsapp" | "woocommerce-dark" | "woocommerce" | "yelp-dark" | "yelp" | "youtube-dark" | "youtube" | "zendesk-dark" | "zendesk";

package/__flow__/Input/index.js

@@ -7,6 +7,7 @@ import styled from "styled-components";
 import type { StyledComponent } from "styled-components";
 import type { TypeTheme } from "../types/theme.flow";
 import { mergeRefs } from "../utils";
+import { useInteractiveColor } from "../utils/useInteractiveColor";
 
 type TypeProps = {
   /** ID of the form element, should match the "for" value of the associated label */
@@ -90,8 +91,7 @@ const InputContext = React.createContext<TypeInputContext>({});
 const StyledButton: StyledComponent<any, TypeTheme, *> = styled(Button)`
   &:hover,
   &:active {
-    color: ${(props) =>
-      props.theme.utils.interact(props.theme.colors.icon.base)};
+    color: ${(props) => useInteractiveColor(props.theme.colors.icon.base)};
   }
 `;
 

package/__flow__/LogoViewBoxes.js

@@ -1 +1 @@
-module.exports = {"bitly-dark":"0 0 140 64","bitly":"0 0 140 64","canva-dark":"0 0 140 140","canva":"0 0 140 140","dropbox-dark":"0 0 140 119","dropbox":"0 0 140 119","facebook-dark":"0 0 141 139","facebook-shops-dark":"0 0 141 155","facebook-shops":"0 0 141 155","facebook":"0 0 141 139","Feedly-dark":"0 0 141 123","Feedly":"0 0 141 123","glassdoor-dark":"0 0 140 196","glassdoor":"0 0 140 196","google-analytics-dark":"0 0 140 160","google-analytics":"0 0 140 160","google-business-messages-dark":"0 0 140 140","google-business-messages":"0 0 140 140","google-drive-dark":"0 0 140 126","google-drive":"0 0 140 126","google-my-business-dark":"0 0 140 123","google-my-business":"0 0 140 123","hubspot-dark":"0 0 140 156","hubspot":"0 0 140 156","instagram-dark":"0 0 140 140","instagram":"0 0 140 140","linkedin-dark":"0 0 140 140","linkedin":"0 0 140 140","marketo-dark":"0 0 140 164","marketo":"0 0 140 164","messenger-dark":"0 0 140 141","messenger":"0 0 140 140","microsoft-dynamics-dark":"0 0 140 227","microsoft-dynamics":"0 0 140 227","pinterest-dark":"0 0 140 141","pinterest":"0 0 140 141","reddit-dark":"0 0 140 140","reddit":"0 0 140 140","salesforce-dark":"0 0 140 99","salesforce":"0 0 140 99","shopify-dark":"0 0 140 159","shopify":"0 0 140 159","slack-dark":"0 0 140 140","slack":"0 0 140 140","tiktok-dark":"0 0 140 159","tiktok":"0 0 140 159","tripadvisor-dark":"0 0 140 140","tripadvisor":"0 0 140 140","tumblr-dark":"0 0 140 140","tumblr":"0 0 140 140","twitter-dark":"0 0 140 114","twitter":"0 0 140 114","whatsapp-dark":"0 0 140 140","whatsapp":"0 0 140 141","woocommerce-dark":"0 0 140 84","woocommerce":"0 0 140 84","yelp-dark":"0 0 140 159","yelp":"0 0 140 159","youtube-dark":"0 0 140 99","youtube":"0 0 140 99","zendesk-dark":"0 0 140 107","zendesk":"0 0 140 107"};
+module.exports = {"bitly-dark":"0 0 140 64","bitly":"0 0 140 64","canva-dark":"0 0 140 140","canva":"0 0 140 140","dropbox-dark":"0 0 140 119","dropbox":"0 0 140 119","facebook-dark":"0 0 141 139","facebook-shops-dark":"0 0 141 155","facebook-shops":"0 0 141 155","facebook":"0 0 141 139","feedly-dark":"0 0 141 123","feedly":"0 0 141 123","glassdoor-dark":"0 0 140 196","glassdoor":"0 0 140 196","google-analytics-dark":"0 0 140 160","google-analytics":"0 0 140 160","google-business-messages-dark":"0 0 140 140","google-business-messages":"0 0 140 140","google-drive-dark":"0 0 140 126","google-drive":"0 0 140 126","google-my-business-dark":"0 0 140 123","google-my-business":"0 0 140 123","hubspot-dark":"0 0 140 156","hubspot":"0 0 140 156","instagram-dark":"0 0 140 140","instagram":"0 0 140 140","linkedin-dark":"0 0 140 140","linkedin":"0 0 140 140","marketo-dark":"0 0 140 164","marketo":"0 0 140 164","messenger-dark":"0 0 140 141","messenger":"0 0 140 140","microsoft-dynamics-dark":"0 0 140 227","microsoft-dynamics":"0 0 140 227","pinterest-dark":"0 0 140 141","pinterest":"0 0 140 141","reddit-dark":"0 0 140 140","reddit":"0 0 140 140","salesforce-dark":"0 0 140 99","salesforce":"0 0 140 99","shopify-dark":"0 0 140 159","shopify":"0 0 140 159","slack-dark":"0 0 140 140","slack":"0 0 140 140","tiktok-dark":"0 0 140 159","tiktok":"0 0 140 159","tripadvisor-dark":"0 0 140 140","tripadvisor":"0 0 140 140","tumblr-dark":"0 0 140 140","tumblr":"0 0 140 140","twitter-dark":"0 0 140 114","twitter":"0 0 140 114","whatsapp-dark":"0 0 140 140","whatsapp":"0 0 140 141","woocommerce-dark":"0 0 140 84","woocommerce":"0 0 140 84","yelp-dark":"0 0 140 159","yelp":"0 0 140 159","youtube-dark":"0 0 140 99","youtube":"0 0 140 99","zendesk-dark":"0 0 140 107","zendesk":"0 0 140 107"};

package/__flow__/PartnerLogo/index.js

@@ -5,19 +5,32 @@ import type { TypePartnerNames } from "./TypePartnerNames";
 import { useTheme } from "styled-components";
 
 type TypeProps = {
+  /** The name of the partner whose logo you want to render. */
   partnerName: TypePartnerNames,
+  /** Manually override the default mode behavior by rendering a logo based on the background it's displayed on. */
+  backgroundType?: "dark" | "light",
 };
 
-const PartnerLogo = ({ partnerName }: TypeProps) => {
+const PartnerLogo = ({ partnerName, backgroundType }: TypeProps) => {
   const { mode } = useTheme();
-  const whichLogo = mode === "dark" ? `${partnerName}-dark` : partnerName;
-  const logoViewBox = logoViewBoxes[whichLogo];
+  const whichLogo = (type) => {
+    if (type && type === "dark") {
+      return `${partnerName}-dark`;
+    } else if (type && type === "light") {
+      return partnerName;
+    } else if (mode === "dark") {
+      return `${partnerName}-dark`;
+    } else {
+      return partnerName;
+    }
+  };
+  const logoViewBox = logoViewBoxes[whichLogo(backgroundType)];
 
   return (
     <svg viewBox={logoViewBox} focusable={false}>
       <use
         xmlnsXlink="http://www.w3.org/1999/xlink"
-        xlinkHref={`#sslogosvg-${whichLogo}`}
+        xlinkHref={`#sslogosvg-${whichLogo(backgroundType)}`}
       />
     </svg>
   );

package/__flow__/PartnerLogo/index.stories.js

@@ -57,3 +57,17 @@ export const PartnerLogos = (args) => (
 PartnerLogos.story = {
   name: "Partner Logos",
 };
+
+export const ModeOverride = (args) => (
+  <Box width="25%">
+    <PartnerLogo {...args} />
+  </Box>
+);
+
+ModeOverride.args = {
+  backgroundType: "light",
+};
+
+ModeOverride.story = {
+  name: "Mode override",
+};

package/__flow__/PartnerLogo/partnerLogos/feedly-dark.svg

@@ -0,0 +1,3 @@
+<svg width="141" height="123" viewBox="0 0 141 123" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M52.2726 122.345H89.6544L89.9817 122.309C94.0706 122.305 97.992 120.684 100.891 117.8L136.382 81.8363C137.828 80.4117 138.978 78.7136 139.762 76.8407C140.546 74.9679 140.95 72.9577 140.95 70.9272C140.95 68.8967 140.546 66.8866 139.762 65.0137C138.978 63.1408 137.828 61.4427 136.382 60.0181L81.8362 5.4728C80.4117 4.02591 78.7135 2.87686 76.8407 2.09254C74.9678 1.30822 72.9576 0.904297 70.9271 0.904297C68.8967 0.904297 66.8865 1.30822 65.0136 2.09254C63.1408 2.87686 61.4426 4.02591 60.0181 5.4728L5.47274 60.0181C4.039 61.4501 2.90159 63.1506 2.12555 65.0225C1.34951 66.8944 0.950073 68.9009 0.950073 70.9272C0.950073 72.9536 1.34951 74.9601 2.12555 76.8319C2.90159 78.7038 4.039 80.4043 5.47274 81.8363L41.3636 117.836C42.7918 119.274 44.492 120.413 46.3649 121.187C48.2378 121.961 50.2461 122.355 52.2726 122.345ZM31.3272 77.1451H37.8363C38.2224 77.1434 38.6047 77.0694 38.9636 76.9269C39.3074 76.7684 39.6259 76.5601 39.909 76.3088L79.218 36.8543C79.494 36.5805 79.713 36.2548 79.8625 35.8959C80.012 35.537 80.0889 35.1521 80.0889 34.7634C80.0889 34.3746 80.012 33.9897 79.8625 33.6309C79.713 33.272 79.494 32.9463 79.218 32.6725L72.1635 25.618C71.8932 25.3422 71.5707 25.123 71.2149 24.9732C70.859 24.8234 70.4769 24.7459 70.0908 24.7452C69.3394 24.78 68.6272 25.0907 68.0908 25.618L25.5818 68.3088C25.3016 68.5833 25.0799 68.9117 24.9299 69.2741C24.7799 69.6366 24.7048 70.0256 24.709 70.4179C24.7107 70.8039 24.7847 71.1863 24.9272 71.5451C25.0681 71.9073 25.2923 72.2312 25.5818 72.4906L29.2181 76.3088C29.7835 76.8546 30.5414 77.1551 31.3272 77.1451ZM66.4544 112.272H72.9271C73.3384 112.314 73.754 112.272 74.1481 112.147C74.5422 112.021 74.9064 111.817 75.218 111.545L78.8544 107.727C79.1303 107.453 79.3494 107.127 79.4989 106.768C79.6483 106.41 79.7253 106.025 79.7253 105.636C79.7253 105.247 79.6483 104.862 79.4989 104.503C79.3494 104.145 79.1303 103.819 78.8544 103.545L71.7999 96.5269C71.526 96.2509 71.2003 96.0319 70.8415 95.8824C70.4826 95.733 70.0977 95.656 69.709 95.656C69.3202 95.656 68.9353 95.733 68.5764 95.8824C68.2176 96.0319 67.8918 96.2509 67.618 96.5269L60.5635 103.581C60.2878 103.852 60.0686 104.174 59.9188 104.53C59.7689 104.886 59.6914 105.268 59.6908 105.654C59.6982 106.444 60.011 107.199 60.5635 107.763L64.3817 111.4C64.9322 111.95 65.6761 112.263 66.4544 112.272ZM49.8363 95.1814H56.309C56.7128 95.1717 57.1098 95.0758 57.4735 94.9002C57.8372 94.7246 58.1593 94.4734 58.4181 94.1633L81.9453 70.636C82.2213 70.3622 82.4403 70.0365 82.5898 69.6777C82.7392 69.3188 82.8162 68.9339 82.8162 68.5451C82.8162 68.1564 82.7392 67.7715 82.5898 67.4126C82.4403 67.0538 82.2213 66.728 81.9453 66.4542L75.0362 59.5452C74.7655 59.2703 74.4429 59.052 74.087 58.903C73.7312 58.754 73.3493 58.6773 72.9635 58.6773C72.5777 58.6773 72.1958 58.754 71.84 58.903C71.4841 59.052 71.1615 59.2703 70.8908 59.5452L44.0908 86.3451C43.8107 86.6197 43.5889 86.948 43.439 87.3105C43.289 87.6729 43.2139 88.062 43.2181 88.4542C43.2146 88.8409 43.2902 89.2243 43.4402 89.5807C43.5903 89.9372 43.8117 90.2592 44.0908 90.5269L47.7272 94.3451C48.2947 94.8876 49.0512 95.1876 49.8363 95.1814Z" fill="white"/>
+</svg>

package/__flow__/PartnerLogo/partnerLogos/feedly.svg

@@ -0,0 +1,3 @@
+<svg width="141" height="123" viewBox="0 0 141 123" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M52.2726 122.345H89.6544L89.9817 122.309C94.0706 122.305 97.992 120.684 100.891 117.8L136.382 81.8363C137.828 80.4117 138.978 78.7136 139.762 76.8407C140.546 74.9679 140.95 72.9577 140.95 70.9272C140.95 68.8967 140.546 66.8866 139.762 65.0137C138.978 63.1408 137.828 61.4427 136.382 60.0181L81.8362 5.4728C80.4117 4.02591 78.7135 2.87686 76.8407 2.09254C74.9678 1.30822 72.9576 0.904297 70.9271 0.904297C68.8967 0.904297 66.8865 1.30822 65.0136 2.09254C63.1408 2.87686 61.4426 4.02591 60.0181 5.4728L5.47274 60.0181C4.039 61.4501 2.90159 63.1506 2.12555 65.0225C1.34951 66.8944 0.950073 68.9009 0.950073 70.9272C0.950073 72.9536 1.34951 74.9601 2.12555 76.8319C2.90159 78.7038 4.039 80.4043 5.47274 81.8363L41.3636 117.836C42.7918 119.274 44.492 120.413 46.3649 121.187C48.2378 121.961 50.2461 122.355 52.2726 122.345ZM31.3272 77.1451H37.8363C38.2224 77.1434 38.6047 77.0694 38.9636 76.9269C39.3074 76.7684 39.6259 76.5601 39.909 76.3088L79.218 36.8543C79.494 36.5805 79.713 36.2548 79.8625 35.8959C80.012 35.537 80.0889 35.1521 80.0889 34.7634C80.0889 34.3746 80.012 33.9897 79.8625 33.6309C79.713 33.272 79.494 32.9463 79.218 32.6725L72.1635 25.618C71.8932 25.3422 71.5708 25.123 71.2149 24.9732C70.859 24.8234 70.4769 24.7459 70.0908 24.7452C69.3394 24.78 68.6273 25.0907 68.0908 25.618L25.5818 68.3088C25.3016 68.5833 25.0799 68.9117 24.9299 69.2741C24.78 69.6366 24.7048 70.0256 24.7091 70.4179C24.7107 70.8039 24.7847 71.1863 24.9272 71.5451C25.0681 71.9073 25.2923 72.2312 25.5818 72.4906L29.2181 76.3088C29.7835 76.8546 30.5415 77.1551 31.3272 77.1451ZM66.4544 112.272H72.9272C73.3385 112.314 73.754 112.272 74.1481 112.147C74.5422 112.021 74.9064 111.817 75.218 111.545L78.8544 107.727C79.1304 107.453 79.3494 107.127 79.4989 106.768C79.6483 106.41 79.7253 106.025 79.7253 105.636C79.7253 105.247 79.6483 104.862 79.4989 104.503C79.3494 104.145 79.1304 103.819 78.8544 103.545L71.7999 96.5269C71.5261 96.2509 71.2003 96.0319 70.8415 95.8824C70.4826 95.733 70.0977 95.656 69.709 95.656C69.3202 95.656 68.9353 95.733 68.5765 95.8824C68.2176 96.0319 67.8919 96.2509 67.6181 96.5269L60.5635 103.581C60.2878 103.852 60.0686 104.174 59.9188 104.53C59.7689 104.886 59.6914 105.268 59.6908 105.654C59.6982 106.444 60.011 107.199 60.5635 107.763L64.3817 111.4C64.9322 111.95 65.6761 112.263 66.4544 112.272ZM49.8363 95.1814H56.309C56.7128 95.1717 57.1098 95.0758 57.4735 94.9002C57.8373 94.7246 58.1593 94.4734 58.4181 94.1633L81.9453 70.636C82.2213 70.3622 82.4403 70.0365 82.5898 69.6777C82.7393 69.3188 82.8162 68.9339 82.8162 68.5451C82.8162 68.1564 82.7393 67.7715 82.5898 67.4126C82.4403 67.0538 82.2213 66.728 81.9453 66.4542L75.0362 59.5452C74.7655 59.2703 74.4429 59.052 74.0871 58.903C73.7312 58.754 73.3493 58.6773 72.9635 58.6773C72.5777 58.6773 72.1958 58.754 71.84 58.903C71.4841 59.052 71.1615 59.2703 70.8908 59.5452L44.0908 86.3451C43.8107 86.6197 43.589 86.948 43.439 87.3105C43.289 87.6729 43.2139 88.062 43.2181 88.4542C43.2146 88.8409 43.2902 89.2243 43.4403 89.5807C43.5904 89.9372 43.8117 90.2592 44.0908 90.5269L47.7272 94.3451C48.2947 94.8876 49.0512 95.1876 49.8363 95.1814Z" fill="#0FC62B"/>
+</svg>

package/__flow__/Token/styles.js

@@ -2,6 +2,7 @@
 import styled, { css, type StyledComponent } from "styled-components";
 import { COMMON } from "../utils/system-props";
 import { focusRing } from "../utils/mixins";
+import { useInteractiveColor } from "../utils/useInteractiveColor";
 
 import type { TypeTheme } from "../types/theme.flow";
 
@@ -29,30 +30,30 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
     ${focusRing}
   }
 
-  ${({ theme, palette }) =>
-    palette === "blue" &&
+  ${({ closeable, theme }) =>
+    closeable &&
     css`
-      color: ${theme.colors.text.body};
-      background: ${theme.colors.container.background.decorative.blue};
-      border: 1px solid ${theme.colors.container.border.decorative.blue};
+      cursor: pointer;
       &:hover,
       &:active {
-        cursor: pointer;
         box-shadow: ${theme.shadows.low};
         border: 1px solid
-          ${theme.utils.interact(theme.colors.container.border.decorative.blue)};
+          ${useInteractiveColor(theme.colors.container.border.base)};
       }
     `}
 
-  ${({ closeable, theme }) =>
-    closeable &&
+  ${({ theme, palette }) =>
+    palette === "blue" &&
     css`
-      cursor: pointer;
+      color: ${theme.colors.text.body};
+      background: ${theme.colors.container.background.decorative.blue};
+      border: 1px solid ${theme.colors.container.border.decorative.blue};
       &:hover,
       &:active {
+        cursor: pointer;
         box-shadow: ${theme.shadows.low};
         border: 1px solid
-          ${theme.utils.interact(theme.colors.container.border.base)};
+          ${useInteractiveColor(theme.colors.container.border.decorative.blue)};
       }
     `}
 
@@ -77,7 +78,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
       &:hover {
         box-shadow: ${theme.shadows.low};
         border: 1px solid
-          ${theme.utils.interact(theme.colors.container.border.error)};
+          ${useInteractiveColor(theme.colors.container.border.error)};
       }
     `}
 

package/__flow__/index.js

@@ -4,6 +4,7 @@ export type { TypeTheme, TypeSproutTheme } from "./types/theme.flow";
 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 {

package/__flow__/themes/dark/theme.js

@@ -15,8 +15,6 @@ import {
 } from "./decorative-palettes";
 import { transparentize } from "polished";
 
-import interact from "../utils/interact";
-
 const MODE = "dark";
 
 export const shadows = {
@@ -235,9 +233,6 @@ const colors = {
 
 const darkTheme = {
   ...lightTheme,
-  utils: {
-    interact: interact(MODE),
-  },
   colors,
   shadows,
   mode: MODE,

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

@@ -50,6 +50,68 @@ export const analytics = {
   },
 };
 
+export const 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],
+      },
+    },
+  },
+};
+
 const darkTheme: TypeSproutTheme = {
   ...baseDarkTheme,
   colors: {
@@ -57,6 +119,7 @@ const darkTheme: TypeSproutTheme = {
     navigation,
     datePicker,
     analytics,
+    growth,
   },
 };
 

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

@@ -50,6 +50,68 @@ export const analytics = {
   },
 };
 
+export const 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],
+      },
+    },
+  },
+};
+
 const lightTheme: TypeSproutTheme = {
   ...baseLightTheme,
   colors: {
@@ -57,6 +119,7 @@ const lightTheme: TypeSproutTheme = {
     navigation,
     datePicker,
     analytics,
+    growth,
   },
 };
 

package/__flow__/themes/light/theme.js

@@ -20,8 +20,6 @@ import MOTION from "@sproutsocial/seeds-motion";
 import BORDER from "@sproutsocial/seeds-border";
 import { transparentize } from "polished";
 
-import interact from "../utils/interact";
-
 export const breakpoints = ["900px", "1200px", "1500px", "1800px"];
 
 const MODE = "light";
@@ -350,9 +348,6 @@ export const duration = {
 };
 
 const theme = {
-  utils: {
-    interact: interact(MODE),
-  },
   breakpoints,
   colors,
   typography: {

package/__flow__/types/theme.flow.js

@@ -17,9 +17,9 @@ import {
   datePicker,
   navigation,
   analytics,
+  growth,
 } from "../themes/extendedThemes/sproutTheme/light/theme";
 
-export type TypeThemeUtils = {| interact: (color: string) => string |};
 export type TypeThemeMode = "light" | "dark";
 export type TypeBreakpoint = typeof breakpoints;
 export type TypeTypography = typeof typography;
@@ -36,7 +36,6 @@ export type TypeDuration = typeof duration;
 
 export type TypeTheme = {
   mode: TypeThemeMode,
-  utils: TypeThemeUtils,
   breakpoints: TypeBreakpoint,
   colors: TypeColor,
   typography: TypeTypography,
@@ -59,5 +58,6 @@ export type TypeSproutTheme = {
     navigation: typeof navigation,
     datePicker: typeof datePicker,
     analytics: typeof analytics,
+    growth: typeof growth,
   |},
 };

package/__flow__/utils/useInteractiveColor.js

@@ -0,0 +1,32 @@
+//@flow strict-local
+import { darken, lighten } from "polished";
+import { useTheme } from "styled-components";
+import type { TypeColors } from "../types/theme.colors.flow.js";
+
+/**
+ * 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
+ */
+const useInteractiveColor = (themeColor: TypeColors): string => {
+  // 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'
+  const 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/commonjs/Input/index.js

@@ -15,6 +15,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _utils = require("../utils");
 
+var _useInteractiveColor = require("../utils/useInteractiveColor");
+
 var _excluded = ["autoComplete", "autoFocus", "disabled", "readOnly", "isInvalid", "hasWarning", "id", "name", "placeholder", "type", "required", "value", "elemBefore", "elemAfter", "maxLength", "ariaLabel", "ariaDescribedby", "clearButtonLabel", "innerRef", "onBlur", "onChange", "onClear", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "appearance", "size"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,7 +38,7 @@ var StyledButton = (0, _styledComponents.default)(_Button.default).withConfig({
   displayName: "Input__StyledButton",
   componentId: "sc-1ck1dnm-0"
 })(["&:hover,&:active{color:", ";}"], function (props) {
-  return props.theme.utils.interact(props.theme.colors.icon.base);
+  return (0, _useInteractiveColor.useInteractiveColor)(props.theme.colors.icon.base);
 });
 
 var ClearButton = function ClearButton() {

package/commonjs/LogoViewBoxes.js

@@ -11,8 +11,8 @@ module.exports = {
   "facebook-shops-dark": "0 0 141 155",
   "facebook-shops": "0 0 141 155",
   "facebook": "0 0 141 139",
-  "Feedly-dark": "0 0 141 123",
-  "Feedly": "0 0 141 123",
+  "feedly-dark": "0 0 141 123",
+  "feedly": "0 0 141 123",
   "glassdoor-dark": "0 0 140 196",
   "glassdoor": "0 0 140 196",
   "google-analytics-dark": "0 0 140 160",

package/commonjs/PartnerLogo/index.js

@@ -12,19 +12,32 @@ var _styledComponents = require("styled-components");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var PartnerLogo = function PartnerLogo(_ref) {
-  var partnerName = _ref.partnerName;
+  var partnerName = _ref.partnerName,
+      backgroundType = _ref.backgroundType;
 
   var _useTheme = (0, _styledComponents.useTheme)(),
       mode = _useTheme.mode;
 
-  var whichLogo = mode === "dark" ? partnerName + "-dark" : partnerName;
-  var logoViewBox = _LogoViewBoxes.default[whichLogo];
+  var whichLogo = function whichLogo(type) {
+    if (type && type === "dark") {
+      return partnerName + "-dark";
+    } else if (type && type === "light") {
+      return partnerName;
+    } else if (mode === "dark") {
+      return partnerName + "-dark";
+    } else {
+      return partnerName;
+    }
+  };
+
+  var logoViewBox = _LogoViewBoxes.default[whichLogo(backgroundType)];
+
   return /*#__PURE__*/_react.default.createElement("svg", {
     viewBox: logoViewBox,
     focusable: false
   }, /*#__PURE__*/_react.default.createElement("use", {
     xmlnsXlink: "http://www.w3.org/1999/xlink",
-    xlinkHref: "#sslogosvg-" + whichLogo
+    xlinkHref: "#sslogosvg-" + whichLogo(backgroundType)
   }));
 };
 

package/commonjs/Token/styles.js

@@ -9,6 +9,8 @@ var _systemProps = require("../utils/system-props");
 
 var _mixins = require("../utils/mixins");
 
+var _useInteractiveColor = require("../utils/useInteractiveColor");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -20,13 +22,13 @@ var Container = _styledComponents.default.button.withConfig({
   var theme = _ref.theme;
   return (0, _styledComponents.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);
 }, _mixins.focusRing, function (_ref2) {
-  var theme = _ref2.theme,
-      palette = _ref2.palette;
-  return palette === "blue" && (0, _styledComponents.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 && (0, _styledComponents.css)(["cursor:pointer;&:hover,&:active{box-shadow:", ";border:1px solid ", ";}"], theme.shadows.low, (0, _useInteractiveColor.useInteractiveColor)(theme.colors.container.border.base));
 }, function (_ref3) {
-  var closeable = _ref3.closeable,
-      theme = _ref3.theme;
-  return closeable && (0, _styledComponents.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" && (0, _styledComponents.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, (0, _useInteractiveColor.useInteractiveColor)(theme.colors.container.border.decorative.blue));
 }, function (_ref4) {
   var disabled = _ref4.disabled,
       theme = _ref4.theme;
@@ -34,7 +36,7 @@ var Container = _styledComponents.default.button.withConfig({
 }, function (_ref5) {
   var valid = _ref5.valid,
       theme = _ref5.theme;
-  return !valid && (0, _styledComponents.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 && (0, _styledComponents.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, (0, _useInteractiveColor.useInteractiveColor)(theme.colors.container.border.error));
 }, _systemProps.COMMON);
 
 var _default = Container;

package/commonjs/index.js

@@ -8,6 +8,7 @@ var _exportNames = {
   useSelect: true,
   useMultiselect: true,
   useTextContent: true,
+  useInteractiveColor: true,
   theme: true,
   darkTheme: true,
   Icon: true,
@@ -72,7 +73,7 @@ var _exportNames = {
   DateRangePicker: true,
   VisuallyHidden: true
 };
-exports.visuallyHidden = exports.useTextContent = exports.useSelect = exports.useMultiselect = exports.toast = exports.theme = exports.sproutLightTheme = exports.sproutDarkTheme = exports.focusRing = exports.disabled = exports.darkTheme = exports.VisuallyHidden = exports.Tooltip = exports.TokenInput = exports.Token = exports.ToggleHint = exports.ToastContainer = exports.ThemeProvider = exports.Textarea = exports.Text = exports.Tabs = exports.TableRowAccordion = exports.TableHeaderCell = exports.TableCell = exports.Table = exports.Switch = exports.Stack = exports.Skeleton = exports.SingleDatePicker = exports.Select = exports.SegmentedControl = exports.Radio = exports.Popout = exports.OverflowList = exports.Numeral = exports.Modal = exports.Message = exports.MenuItemContainer = exports.MenuButtonContext = exports.MenuButton = exports.Menu = exports.LoaderButton = exports.Loader = exports.ListboxButton = exports.Listbox = exports.Link = exports.Label = exports.KeyboardKey = exports.Input = exports.Indicator = exports.Image = exports.Icon = exports.FormField = exports.Fieldset = exports.EmptyState = exports.Drawer = exports.DateRangePicker = exports.Collapsible = exports.Checkbox = exports.ChartLegend = exports.CharacterCounter = exports.Card = exports.Button = exports.Breadcrumb = exports.Box = exports.Banner = exports.Badge = exports.Avatar = exports.Alert = void 0;
+exports.visuallyHidden = exports.useTextContent = exports.useSelect = exports.useMultiselect = exports.useInteractiveColor = exports.toast = exports.theme = exports.sproutLightTheme = exports.sproutDarkTheme = exports.focusRing = exports.disabled = exports.darkTheme = exports.VisuallyHidden = exports.Tooltip = exports.TokenInput = exports.Token = exports.ToggleHint = exports.ToastContainer = exports.ThemeProvider = exports.Textarea = exports.Text = exports.Tabs = exports.TableRowAccordion = exports.TableHeaderCell = exports.TableCell = exports.Table = exports.Switch = exports.Stack = exports.Skeleton = exports.SingleDatePicker = exports.Select = exports.SegmentedControl = exports.Radio = exports.Popout = exports.OverflowList = exports.Numeral = exports.Modal = exports.Message = exports.MenuItemContainer = exports.MenuButtonContext = exports.MenuButton = exports.Menu = exports.LoaderButton = exports.Loader = exports.ListboxButton = exports.Listbox = exports.Link = exports.Label = exports.KeyboardKey = exports.Input = exports.Indicator = exports.Image = exports.Icon = exports.FormField = exports.Fieldset = exports.EmptyState = exports.Drawer = exports.DateRangePicker = exports.Collapsible = exports.Checkbox = exports.ChartLegend = exports.CharacterCounter = exports.Card = exports.Button = exports.Breadcrumb = exports.Box = exports.Banner = exports.Badge = exports.Avatar = exports.Alert = void 0;
 
 var _systemProps = require("./systemProps");
 
@@ -95,6 +96,10 @@ exports.useSelect = _hooks.useSelect;
 exports.useMultiselect = _hooks.useMultiselect;
 exports.useTextContent = _hooks.useTextContent;
 
+var _useInteractiveColor = require("./utils/useInteractiveColor");
+
+exports.useInteractiveColor = _useInteractiveColor.useInteractiveColor;
+
 var _theme = _interopRequireDefault(require("./themes/light/theme"));
 
 exports.theme = _theme.default;

package/commonjs/themes/dark/theme.js

@@ -15,8 +15,6 @@ var _decorativePalettes = require("./decorative-palettes");
 
 var _polished = require("polished");
 
-var _interact = _interopRequireDefault(require("../utils/interact"));
-
 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); }
@@ -234,9 +232,6 @@ var colors = _extends({}, _theme.default.colors, {
 }, _datavizPalette.datavizPalette);
 
 var darkTheme = _extends({}, _theme.default, {
-  utils: {
-    interact: (0, _interact.default)(MODE)
-  },
   colors: colors,
   shadows: shadows,
   mode: MODE