@sproutsocial/racine 7.5.0 → 8.0.0-beta-dark-mode.1

package/__flow__/types/theme.colors.flow.js

@@ -0,0 +1,244 @@
+// @flow strict-local
+
+import literalColors from "../themes/default/literal-colors";
+
+type TypeAppColors = {|
+  app: {
+    background: {
+      base: string,
+    },
+  },
+|};
+
+type TypeContainerColors = {|
+  container: {
+    background: {
+      base: string,
+      success: string,
+      warning: string,
+      error: string,
+      info: string,
+      opportunity: string,
+      danger: string,
+      decorative: {
+        green: string,
+        blue: string,
+        purple: string,
+        yellow: string,
+        orange: string,
+        red: string,
+        neutral: string,
+      },
+      selected: string,
+    },
+    border: {
+      base: string,
+      success: string,
+      warning: string,
+      error: string,
+      danger: string,
+      info: string,
+      opportunity: string,
+      decorative: {
+        green: string,
+        blue: string,
+        purple: string,
+        yellow: string,
+        orange: string,
+        red: string,
+        neutral: string,
+      },
+      selected: string,
+    },
+  },
+|};
+
+type TypeButtonColors = {|
+  button: {
+    primary: {
+      background: {
+        base: string,
+        hover: string,
+        active: string,
+      },
+      border: {
+        base: string,
+      },
+      text: {
+        base: string,
+        hover: string,
+      },
+    },
+    secondary: {
+      background: {
+        base: string,
+        hover: string,
+        active: string,
+      },
+      border: {
+        base: string,
+      },
+      text: {
+        base: string,
+        hover: string,
+      },
+    },
+    pill: {
+      background: {
+        base: string,
+        hover: string,
+        active: string,
+      },
+      border: {
+        base: string,
+      },
+      text: {
+        base: string,
+        hover: string,
+      },
+    },
+    destructive: {
+      background: {
+        base: string,
+        hover: string,
+        active: string,
+      },
+      border: {
+        base: string,
+      },
+      text: {
+        base: string,
+        hover: string,
+      },
+    },
+    placeholder: {
+      background: {
+        base: string,
+        hover: string,
+        active: string,
+      },
+      border: {
+        base: string,
+      },
+      text: {
+        base: string,
+        hover: string,
+      },
+    },
+    unstyled: {
+      background: {
+        base: string,
+      },
+      border: {
+        base: string,
+      },
+      text: {
+        base: string,
+        hover: string,
+      },
+    },
+  },
+|};
+
+type TypeLinkColors = {|
+  link: {
+    base: string,
+    hover: string,
+  },
+|};
+
+type TypeTextColors = {|
+  text: {
+    headline: string,
+    subtext: string,
+    body: string,
+    inverse: string,
+    error: string,
+  },
+|};
+
+type TypeIconColors = {|
+  icon: {
+    base: string,
+    inverse: string,
+    success: string,
+    warning: string,
+    error: string,
+    danger: string,
+    info: string,
+    opportunity: string,
+  },
+|};
+
+type TypeFormColors = {|
+  form: {
+    background: {
+      base: string,
+      selected: string,
+    },
+    border: {
+      base: string,
+      error: string,
+      warning: string,
+      selected: string,
+    },
+    placeholder: {
+      base: string,
+    },
+  },
+|};
+
+type TypeListItemColors = {|
+  listItem: {
+    background: {
+      base: string,
+      hover: string,
+      selected: string,
+    },
+  },
+|};
+
+type TypeNetworkColors = {|
+  network: {
+    twitter: string,
+    twitter_like: string,
+    facebook: string,
+    facebook_audience_network: string,
+    linkedin: string,
+    instagram: string,
+    feedly: string,
+    analytics: string,
+    youtube: string,
+    messenger: string,
+    snapchat: string,
+    pinterest: string,
+    tumblr: string,
+    reddit: string,
+    tripadvisor: string,
+    glassdoor: string,
+    google_my_business: string,
+    google_business_messages: string,
+    salesforce: string,
+    zendesk: string,
+    hubspot: string,
+    microsoft_dynamics: string,
+    yelp: string,
+    whatsapp: string,
+  },
+|};
+
+type TypeLiteralColors = typeof literalColors;
+
+export type TypeColors = {
+  ...TypeAppColors,
+  ...TypeContainerColors,
+  ...TypeButtonColors,
+  ...TypeLinkColors,
+  ...TypeLinkColors,
+  ...TypeTextColors,
+  ...TypeIconColors,
+  ...TypeFormColors,
+  ...TypeListItemColors,
+  ...TypeNetworkColors,
+  ...TypeLiteralColors,
+};

package/__flow__/types/theme.flow.js

@@ -1,218 +1,43 @@
 // @flow strict-local
-import theme, {
+import {
   breakpoints,
+  typography,
   fontWeights,
+  space,
+  radii,
+  borders,
+  borderWidths,
+  shadows,
   easing,
   duration,
-} from "../utils/theme";
-
-export type TypeTheme = typeof theme;
-
-export type TypeBreakpoints = typeof breakpoints;
-
-export type TypeColor =
-  | "cta.primary"
-  | "cta.secondary"
-  | "cta.link"
-  | "text.body"
-  | "text.headline"
-  | "text.subtext"
-  | "error"
-  | "warning"
-  | "border"
-  | "neutral.0"
-  | "neutral.100"
-  | "neutral.200"
-  | "neutral.300"
-  | "neutral.400"
-  | "neutral.500"
-  | "neutral.600"
-  | "neutral.700"
-  | "neutral.800"
-  | "neutral.900"
-  | "neutral.1000"
-  | "green.0"
-  | "green.100"
-  | "green.200"
-  | "green.300"
-  | "green.400"
-  | "green.500"
-  | "green.600"
-  | "green.700"
-  | "green.800"
-  | "green.900"
-  | "green.1000"
-  | "green.1100"
-  | "red.0"
-  | "red.100"
-  | "red.200"
-  | "red.300"
-  | "red.400"
-  | "red.500"
-  | "red.600"
-  | "red.700"
-  | "red.800"
-  | "red.900"
-  | "red.1000"
-  | "blue.0"
-  | "blue.100"
-  | "blue.200"
-  | "blue.300"
-  | "blue.400"
-  | "blue.500"
-  | "blue.600"
-  | "blue.700"
-  | "blue.800"
-  | "blue.900"
-  | "blue.1000"
-  | "blue.1100"
-  | "teal.0"
-  | "teal.100"
-  | "teal.200"
-  | "teal.300"
-  | "teal.400"
-  | "teal.500"
-  | "teal.600"
-  | "teal.700"
-  | "teal.800"
-  | "teal.900"
-  | "teal.1000"
-  | "teal.1100"
-  | "aqua.0"
-  | "aqua.100"
-  | "aqua.200"
-  | "aqua.300"
-  | "aqua.400"
-  | "aqua.500"
-  | "aqua.600"
-  | "aqua.700"
-  | "aqua.800"
-  | "aqua.900"
-  | "aqua.1000"
-  | "aqua.1100"
-  | "purple.0"
-  | "purple.100"
-  | "purple.200"
-  | "purple.300"
-  | "purple.400"
-  | "purple.500"
-  | "purple.600"
-  | "purple.700"
-  | "purple.800"
-  | "purple.900"
-  | "purple.1000"
-  | "purple.1100"
-  | "yellow.0"
-  | "yellow.100"
-  | "yellow.200"
-  | "yellow.300"
-  | "yellow.400"
-  | "yellow.500"
-  | "yellow.600"
-  | "yellow.700"
-  | "yellow.800"
-  | "yellow.900"
-  | "yellow.1000"
-  | "yellow.1100"
-  | "pink.0"
-  | "pink.100"
-  | "pink.200"
-  | "pink.300"
-  | "pink.400"
-  | "pink.500"
-  | "pink.600"
-  | "pink.700"
-  | "pink.800"
-  | "pink.900"
-  | "pink.1000"
-  | "pink.1100"
-  | "orange.0"
-  | "orange.100"
-  | "orange.200"
-  | "orange.300"
-  | "orange.400"
-  | "orange.500"
-  | "orange.600"
-  | "orange.700"
-  | "orange.800"
-  | "orange.900"
-  | "orange.1000"
-  | "orange.1100"
-  | "pink.0"
-  | "pink.100"
-  | "pink.200"
-  | "pink.300"
-  | "pink.400"
-  | "pink.500"
-  | "pink.600"
-  | "pink.700"
-  | "pink.800"
-  | "pink.900"
-  | "pink.1000"
-  | "pink.1100"
-  | "network.twitter"
-  | "network.twitter_like"
-  | "network.facebook"
-  | "network.facebook_audience_network"
-  | "network.linkedin"
-  | "network.instagram"
-  | "network.feedly"
-  | "network.analytics"
-  | "network.youtube"
-  | "network.messenger"
-  | "network.snapchat"
-  | "network.pinterest"
-  | "network.tumblr"
-  | "network.reddit"
-  | "network.tripadvisor"
-  | "network.google_my_business";
-
-export type TypeTypographySize =
-  | 100
-  | 200
-  | 300
-  | 400
-  | 500
-  | 600
-  | 700
-  | 800
-  | 900
-  | 1000
-  | 1100
-  | 1200;
-
-export type TypeFontWeight = $Keys<typeof fontWeights>;
-
-export type TypeSpace =
-  | 0
-  | 100
-  | 200
-  | 300
-  | 350
-  | 400
-  | 450
-  | 500
-  | 600
-  | -100
-  | -200
-  | -300
-  | -350
-  | -400
-  | -450
-  | -500
-  | -600
-  | string;
-
-export type TypeRadii = 400 | 500 | 600 | 1000 | "inner" | "outer" | "pill";
-
-export type TypeBorder = 500;
-
-export type TypeBorderWidth = 500;
-
-export type TypeShadow = 100 | 200 | 300 | 400;
-
-export type TypeEasing = $Keys<typeof easing>;
-
-export type TypeDuration = $Keys<typeof duration>;
-
-export type TypeSize = "default" | "large";
+} from "../themes/default/theme";
+import type { TypeColors } from "./theme.colors.flow.js";
+import type { TypeFontFamilyString } from "../themes/default/theme";
+
+export type TypeBreakpoint = typeof breakpoints;
+export type TypeTypography = typeof typography;
+export type TypeFontWeight = typeof fontWeights;
+export type TypeFontFamily = TypeFontFamilyString;
+export type TypeSpace = $Keys<typeof space>;
+export type TypeColor = TypeColors;
+export type TypeRadii = typeof radii;
+export type TypeBorder = typeof borders;
+export type TypeBorderWidth = typeof borderWidths;
+export type TypeShadow = typeof shadows;
+export type TypeEasing = typeof easing;
+export type TypeDuration = typeof duration;
+
+export type TypeTheme = {
+  breakpoints: TypeBreakpoint,
+  colors: TypeColor,
+  typography: TypeTypography,
+  fontWeights: TypeFontWeight,
+  fontFamily: TypeFontFamily,
+  space: TypeSpace,
+  radii: TypeRadii,
+  borders: TypeBorder,
+  borderWidths: TypeBorderWidth,
+  shadows: TypeShadow,
+  easing: TypeEasing,
+  duration: TypeDuration,
+};

package/__flow__/utils/mixins.js

@@ -1,6 +1,6 @@
 // @flow strict-local
 import { css } from "styled-components";
-import theme from "./theme";
+import theme from "../themes/default/theme";
 import { transparentize } from "polished";
 
 export const svgToDataURL = (svgStr: string) => {
@@ -26,8 +26,9 @@ export const visuallyHidden = css`
 `;
 
 export const focusRing = css`
-  box-shadow: 0 0 0 1px ${theme.colors.cta.primary.background},
-    0 0px 0px 4px ${transparentize(0.7, theme.colors.cta.primary.background)};
+  box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},
+    0 0px 0px 4px
+      ${transparentize(0.7, theme.colors.button.primary.background.base)};
   outline: none;
 
   &::-moz-focus-inner {

package/__flow__/utils/responsiveProps/index.js

@@ -1,5 +1,5 @@
 // @flow
-import theme from "../theme";
+import theme from "../../themes/default/theme";
 
 import type { TypeResponsive } from "../../types/system-props.flow";
 

package/commonjs/Badge/styles.js

@@ -23,7 +23,7 @@ var colors = {
   suggestion: "colors.neutral.900"
 };
 var backgroundColors = {
-  primary: "colors.cta.primary",
+  primary: "colors.blue.700",
   secondary: "colors.yellow.500",
   passive: "colors.neutral.200",
   common: "colors.aqua.600",

package/commonjs/Banner/index.js

@@ -83,8 +83,9 @@ var Banner = /*#__PURE__*/function (_React$Component) {
         text = _this$props.text,
         rest = _objectWithoutPropertiesLoose(_this$props, ["type", "text"]);
 
-    return /*#__PURE__*/React.createElement(_styles.default, _extends({
-      type: type,
+    return /*#__PURE__*/React.createElement(_styles.default // danger needs to be properly deprecated and removed DS-1094
+    , _extends({
+      type: type === "danger" ? "error" : type,
       "data-qa-alert": "",
       "data-qa-alert-type": type,
       "data-qa-alert-text": text // $FlowIssue - upgrade v0.112.0

package/commonjs/Banner/styles.js

@@ -15,7 +15,7 @@ var Container = _styledComponents.default.div.withConfig({
   displayName: "styles__Container",
   componentId: "q43dr4-0"
 })(function (props) {
-  return (0, _styledComponents.css)(["display:flex;overflow:hidden;align-items:center;justify-content:space-between;color:", ";border-radius:", ";font-family:", ";", " padding:", ";border:1px solid ", ";background-color:", ";.Icon{align-self:flex-start;margin-top:3px;margin-right:", ";min-width:16px;color:", ";}a,button{font-weight:", ";color:", ";font-size:inherit;text-decoration:underline;}> span:not(.Icon){display:block;}", " ", ""], props.theme.colors.text.headline, props.theme.radii.outer, props.theme.fontFamily, props.theme.typography[200], props.theme.space[300], props.theme.colors[props.type].border, props.theme.colors[props.type].background, props.theme.space[400], props.theme.colors[props.type].icon, props.theme.fontWeights.semibold, props.theme.colors.text.headline, _systemProps.COMMON, _systemProps.LAYOUT);
+  return (0, _styledComponents.css)(["display:flex;overflow:hidden;align-items:center;justify-content:space-between;color:", ";border-radius:", ";font-family:", ";", " padding:", ";border:1px solid ", ";background-color:", ";.Icon{align-self:flex-start;margin-top:3px;margin-right:", ";min-width:16px;color:", ";}a,button{font-weight:", ";color:", ";font-size:inherit;&:hover{color:", ";text-decoration:underline;}}> span:not(.Icon){display:block;}", " ", ""], props.theme.colors.text.body, props.theme.radii.outer, props.theme.fontFamily, props.theme.typography[200], props.theme.space[300], props.theme.colors.container.border[props.type], props.theme.colors.container.background[props.type], props.theme.space[400], props.theme.colors.icon[props.type], props.theme.fontWeights.semibold, props.theme.colors.text.body, props.theme.colors.text.body, _systemProps.COMMON, _systemProps.LAYOUT);
 });
 
 var _default = Container;

package/commonjs/Button/index.js

@@ -20,7 +20,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var Button = function Button(_ref) {
   var href = _ref.href,
       _ref$appearance = _ref.appearance,
-      appearance = _ref$appearance === void 0 ? "default" : _ref$appearance,
+      appearance = _ref$appearance === void 0 ? "unstyled" : _ref$appearance,
       _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
       disabled = _ref.disabled,
@@ -39,8 +39,10 @@ var Button = function Button(_ref) {
 
   if (!href && external) {
     console.warn("Warning: external prop cannot be set without a href declaration");
-  }
+  } // plans to properly deprecate captured in DS-1096
 
+
+  var appearanceCheck = appearance === "default" ? "unstyled" : appearance;
   return /*#__PURE__*/React.createElement(_styles.default, _extends({
     title: title,
     active: active,
@@ -52,7 +54,7 @@ var Button = function Button(_ref) {
     "aria-disabled": disabled ? disabled : undefined,
     disabled: disabled,
     buttonSize: size,
-    appearance: appearance,
+    appearance: appearanceCheck,
     ref: innerRef,
     onClick: onClick,
     "data-qa-button": title || "",

package/commonjs/Button/styles.js

@@ -23,15 +23,15 @@ var Container = _styledComponents.default.button.withConfig({
 })(["display:inline-block;box-sizing:border-box;text-align:center;font-family:", ";border:1px solid ", ";border-radius:", ";border-style:", ";background:", ";color:", ";cursor:pointer;text-decoration:none;line-height:16px;white-space:nowrap;font-weight:", ";transition:all ", " linear;margin:0;padding:", ";font-size:", ";&:visited{color:", ";}&:hover{color:", ";background:", ";text-decoration:none;box-shadow:", ";}&:active{color:", ";background:", ";transform:translateY(1px);}&:focus{", "}&:focus:active{box-shadow:none;}", " ", " ", " ", "{vertical-align:text-bottom;}", " ", ""], function (props) {
   return props.theme.fontFamily;
 }, function (props) {
-  return props.theme.colors.cta[props.appearance].borderColor;
+  return props.theme.colors.button[props.appearance].border.base;
 }, function (props) {
   return props.theme.radii[500];
 }, function (props) {
   return props.appearance === "placeholder" ? "dashed" : "solid";
 }, function (props) {
-  return props.theme.colors.cta[props.appearance].background;
+  return props.theme.colors.button[props.appearance].background.base;
 }, function (props) {
-  return props.theme.colors.cta[props.appearance].color;
+  return props.theme.colors.button[props.appearance].text.base;
 }, function (props) {
   return props.theme.fontWeights.bold;
 }, function (props) {
@@ -41,24 +41,25 @@ var Container = _styledComponents.default.button.withConfig({
 }, function (props) {
   return props.buttonSize === "default" ? props.theme.typography[200].fontSize : props.theme.typography[300].fontSize;
 }, function (props) {
-  return props.theme.colors.cta[props.appearance].color;
+  return props.theme.colors.button[props.appearance].text.base;
 }, function (props) {
-  return props.theme.colors.cta[props.appearance].hoverColor;
+  return props.theme.colors.button[props.appearance].text.hover;
 }, function (props) {
-  return props.theme.colors.cta[props.appearance].hoverBackground;
+  return props.theme.colors.button[props.appearance].background.hover;
 }, function (props) {
   return props.appearance === "placeholder" ? props.theme.shadows[100] : "none";
 }, function (props) {
-  return props.theme.colors.cta[props.appearance].hoverColor;
+  return props.theme.colors.button[props.appearance].text.hover;
 }, function (props) {
-  return props.theme.colors.cta[props.appearance].activeBackground;
+  return props.theme.colors.button[props.appearance].background.active;
 }, _mixins.focusRing, function (props) {
-  return props.active && (0, _styledComponents.css)(["color:", " !important;background:", " !important;"], props.theme.colors.cta[props.appearance].hoverColor, props.theme.colors.cta[props.appearance].activeBackground);
+  return props.active && (0, _styledComponents.css)(["color:", " !important;background:", " !important;"], props.theme.colors.button[props.appearance].text.hover, props.theme.colors.button[props.appearance].background.active);
 }, function (props) {
   return props.disabled && _mixins.disabled;
 }, function (props) {
-  return props.appearance === "pill" && (0, _styledComponents.css)(["display:inline-flex;align-items:center;justify-content:center;mix-blend-mode:multiply;", ""], _mixins.pill);
+  return props.appearance === "pill" && (0, _styledComponents.css)(["display:inline-flex;align-items:center;justify-content:center;mix-blend-mode:", ";", ""], props.theme.mode ? "screen" : "multiply", _mixins.pill);
 }, _styles.default, _systemProps.LAYOUT, _systemProps.COMMON);
 
-var _default = Container;
+var _default = Container; //${props.theme.mode === "dark" ? "screen" : "multiply"}
+
 exports.default = _default;

package/commonjs/Card/index.js

@@ -26,11 +26,11 @@ var Card = function Card(_ref) {
       _ref$border = _ref.border,
       border = _ref$border === void 0 ? 500 : _ref$border,
       _ref$borderColor = _ref.borderColor,
-      borderColor = _ref$borderColor === void 0 ? "border" : _ref$borderColor,
+      borderColor = _ref$borderColor === void 0 ? "container.border.base" : _ref$borderColor,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? "text.body" : _ref$color,
       _ref$bg = _ref.bg,
-      bg = _ref$bg === void 0 ? "background.container" : _ref$bg,
+      bg = _ref$bg === void 0 ? "container.background.base" : _ref$bg,
       rest = _objectWithoutPropertiesLoose(_ref, ["onClick", "href", "children", "ariaLabel", "buttonProps", "border", "borderColor", "color", "bg"]);
 
   return /*#__PURE__*/React.createElement(_styles.Container, _extends({}, rest, {

package/commonjs/CharacterCounter/styles.js

@@ -21,7 +21,7 @@ var Container = _styledComponents.default.div.withConfig({
 }, function (props) {
   return props.theme.fontWeights.semibold;
 }, function (props) {
-  return props.overlimit ? props.theme.colors.error.color : props.theme.colors.text.subtext;
+  return props.overlimit ? props.theme.colors.text.error : props.theme.colors.text.subtext;
 }, function (p) {
   return p.mini && (0, _styledComponents.css)(["", ""], p.theme.typography[100]);
 }, _systemProps.COMMON);