@sproutsocial/racine 10.0.0 → 10.0.1-dependencies.0

package/__flow__/Avatar/index.test.js

@@ -14,9 +14,4 @@ describe("Avatar", () => {
     const { container } = render(<Avatar name="Test User" />);
     expect(container.textContent).toEqual("TU");
   });
-
-  it("should set the correct font size", () => {
-    const { getByText } = render(<Avatar name="Test User" />);
-    expect(getByText("TU")).toHaveStyleRule("font-size", "16px");
-  });
 });

package/__flow__/Badge/index.test.js

@@ -10,11 +10,6 @@ describe("Racine Badge", () => {
     expect(getByDataQaLabel({ "badge-type": "primary" })).toBeTruthy();
   });
 
-  it("should render with correct size styling", () => {
-    const { getByText } = render(<Badge text="Test" size="small" />);
-    expect(getByText("Test")).toHaveStyleRule("padding", "4px 8px");
-  });
-
   it("should render with secondary type", () => {
     const { getByText, getByDataQaLabel } = render(
       <Badge text="Test" type="secondary" />

package/__flow__/Button/index.stories.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { boolean, text, number } from "@storybook/addon-knobs";
 import Button from "./index";
 import Icon from "../Icon";
 import Box from "../Box";
@@ -8,155 +7,140 @@ export default {
   title: "Button",
 };
 
-export const defaultStory = () => (
-  <Button
-    appearance={text("appearance", "default")}
-    onClick={() => alert("Testing...")}
-  >
+export const defaultStory = (args) => (
+  <Button {...args} onClick={() => alert("Testing...")}>
     Default
   </Button>
 );
 
+defaultStory.args = { appearance: "default" };
+
 defaultStory.story = {
   name: "Default",
 };
 
-export const primary = () => (
-  <Button
-    appearance={text("appearance", "primary")}
-    onClick={() => alert("Testing...")}
-  >
+export const primary = (args) => (
+  <Button {...args} onClick={() => alert("Testing...")}>
     Primary Button
   </Button>
 );
 
+primary.args = { appearance: "primary" };
+
 primary.story = {
   name: "Primary",
 };
 
-export const secondary = () => (
-  <Button appearance={text("appearance", "secondary")}>Secondary Button</Button>
-);
+export const secondary = (args) => <Button {...args}>Secondary Button</Button>;
+
+secondary.args = { appearance: "secondary" };
 
 secondary.story = {
   name: "Secondary",
 };
 
-export const destructive = () => (
-  <Button appearance={text("appearance", "destructive")}>
-    Destructive Button
-  </Button>
+export const destructive = (args) => (
+  <Button {...args}>Destructive Button</Button>
 );
 
+destructive.args = { appearance: "destructive" };
 destructive.story = {
   name: "Destructive",
 };
 
-export const placeholder = () => (
-  <Button appearance={text("appearance", "placeholder")}>
-    Placeholder Button
-  </Button>
+export const placeholder = (args) => (
+  <Button {...args}>Placeholder Button</Button>
 );
 
+placeholder.args = { appearance: "placeholder" };
 placeholder.story = {
   name: "Placeholder",
 };
 
-export const largeButton = () => (
-  <Button
-    appearance={text("appearance", "primary")}
-    size={text("size", "large")}
-  >
-    Large Button
-  </Button>
-);
+export const largeButton = (args) => <Button {...args}>Large Button</Button>;
+largeButton.args = { size: "large", appearance: "primary" };
 
 largeButton.story = {
   name: "Large button",
 };
 
-export const pillButton = () => (
+export const pillButton = (args) => (
   <Box bg="container.background.base" p={400}>
-    <Button appearance={text("shape", "pill")}>
+    <Button {...args}>
       <Icon name="reply" mr={350} />
       Pill Button
     </Button>
   </Box>
 );
-
+pillButton.args = { appearance: "pill" };
 pillButton.story = {
   name: "Pill button",
 };
 
-export const pillIconOnlyButton = () => (
+export const pillIconOnlyButton = (args) => (
   <Box bg="container.background.base" p={400}>
-    <Button appearance={text("shape", "pill")} ariaLabel="This is a label">
+    <Button {...args} ariaLabel="This is a label">
       <Icon name="circle-check-outline" />
     </Button>
   </Box>
 );
 
+pillIconOnlyButton.args = { appearance: "pill" };
 pillIconOnlyButton.story = {
   name: "Pill icon only button",
 };
 
-export const activeButton = () => (
-  <Button
-    appearance={text("appearance", "secondary")}
-    active={boolean("active", true)}
-  >
-    Active Button
-  </Button>
-);
+export const activeButton = (args) => <Button {...args}>Active Button</Button>;
 
+activeButton.args = { appearance: "secondary", active: true };
 activeButton.story = {
   name: "Active button",
 };
 
-export const buttonAsALink = () => (
-  <Button
-    href={text("href", "http://sproutsocial.style")}
-    external={boolean("external", true)}
-    appearance={text("appearance", "primary")}
-  >
-    Button using anchor element
-  </Button>
+export const buttonAsALink = (args) => (
+  <Button {...args}>Button using anchor element</Button>
 );
-
+buttonAsALink.args = {
+  appearance: "primary",
+  external: true,
+  href: "http://sproutsocial.style",
+};
 buttonAsALink.story = {
   name: "Button as a link",
 };
 
-export const disabledButton = () => (
-  <Button
-    appearance={text("appearance", "primary")}
-    disabled={text("disabled", "true")}
-  >
-    This Button is disabled
-  </Button>
+export const disabledButton = (args) => (
+  <Button {...args}>This Button is disabled</Button>
 );
-
+disabledButton.args = {
+  appearance: "primary",
+  disabled: true,
+};
 disabledButton.story = {
   name: "Disabled button",
 };
 
-export const fullWidthButton = () => (
-  <Button appearance={text("appearance", "primary")} width={number("width", 1)}>
-    Full-Width Button
-  </Button>
+export const fullWidthButton = (args) => (
+  <Button {...args}>Full-Width Button</Button>
 );
-
+fullWidthButton.args = {
+  appearance: "primary",
+  width: 1,
+};
 fullWidthButton.story = {
   name: "Full width button",
 };
 
-export const withIcon = () => (
-  <Button appearance={text("appearance", "secondary")}>
+export const withIcon = (args) => (
+  <Button {...args}>
     <Icon name="twitter" mr={350} />
     Secondary Button
   </Button>
 );
 
+withIcon.args = {
+  appearance: "secondary",
+};
 withIcon.story = {
   name: "With icon",
 };

package/__flow__/CharacterCounter/index.test.js

@@ -2,7 +2,6 @@ import React from "react";
 import { render } from "../utils/react-testing-library";
 import "jest-styled-components";
 import CharacterCounter from "./";
-import { COLOR_RED_800 } from "@sproutsocial/seeds-color";
 
 describe.only("CharacterCounter", () => {
   it("should render properly", () => {
@@ -13,11 +12,4 @@ describe.only("CharacterCounter", () => {
 
     expect(getByText(remainingNumber.toString())).toBeTruthy();
   });
-
-  it("should render properly with overlimit values", () => {
-    const { getByText } = render(
-      <CharacterCounter currentValue={2} maxValue={1} />
-    );
-    expect(getByText("-1")).toHaveStyleRule("color", COLOR_RED_800);
-  });
 });

package/__flow__/ChartLegend/index.test.js

@@ -2,7 +2,6 @@ import React from "react";
 import { render } from "../utils/react-testing-library";
 import "jest-styled-components";
 import ChartLegend from "./";
-import { CONTRAST_THEME, COMPARE_THEME } from "../utils/chartColors";
 
 describe("ChartLegend", () => {
   let legendLabelsArray = [{ name: "Label One" }, { name: "Label Two" }];
@@ -15,40 +14,4 @@ describe("ChartLegend", () => {
     expect(getByText("Label One")).toBeTruthy();
     expect(getByText("Label Two")).toBeTruthy();
   });
-
-  it("should render the correct theme", () => {
-    const { getAllByDataQaLabel } = render(
-      <ChartLegend legendLabels={legendLabelsArray} theme="contrast" />
-    );
-
-    expect(getAllByDataQaLabel({ swatch: "" })[0]).toHaveStyleRule(
-      "background-color",
-      CONTRAST_THEME[0]
-    );
-
-    expect(getAllByDataQaLabel({ swatch: "" })[1]).toHaveStyleRule(
-      "background-color",
-      CONTRAST_THEME[1]
-    );
-  });
-
-  it("should display a custom color", () => {
-    const newLegendLabelsArray = [
-      { name: "Label One", color: "#000" },
-      { name: "Label Two" },
-    ];
-    const { getAllByDataQaLabel } = render(
-      <ChartLegend legendLabels={newLegendLabelsArray} />
-    );
-
-    expect(getAllByDataQaLabel({ swatch: "" })[0]).toHaveStyleRule(
-      "background-color",
-      "#000"
-    );
-
-    expect(getAllByDataQaLabel({ swatch: "" })[1]).toHaveStyleRule(
-      "background-color",
-      COMPARE_THEME[1]
-    );
-  });
 });

package/__flow__/EmptyState/index.test.js

@@ -97,7 +97,6 @@ describe("EmptyState", () => {
     );
     const element = getByText("Reload Page");
     expect(element).toBeTruthy();
-    expect(element).toHaveStyleRule("color", "#FFFFFF");
   });
 
   it("should render a secondary button", async () => {
@@ -105,7 +104,7 @@ describe("EmptyState", () => {
       <EmptyState
         media={
           <Image
-            alt="No assets matching your
 search or filters"
+            alt="No assets matching your
  search or filters"
             src="https://cl.ly/db498c7682df/download/analytics.svg"
             m={0}
           />
@@ -118,6 +117,5 @@ describe("EmptyState", () => {
     );
     const element = getByText("I'll do this later");
     expect(element).toBeTruthy();
-    expect(element).toHaveStyleRule("color", "#515e5f");
   });
 });

package/__flow__/Link/index.test.js

@@ -2,7 +2,6 @@ import React from "react";
 import "jest-styled-components";
 import { render } from "../utils/react-testing-library";
 import Link from "./";
-import { TYPOGRAPHY_SIZE_600 } from "@sproutsocial/seeds-typography";
 
 describe("Racine Link", () => {
   it("should render in an anchor tag", () => {
@@ -83,10 +82,6 @@ describe("Racine Link", () => {
     );
 
     expect(getByText("Link as span").tagName).toEqual("SPAN");
-    expect(getByText("Link as span")).toHaveStyleRule(
-      "font-size",
-      TYPOGRAPHY_SIZE_600.fontSize
-    );
   });
 
   it("Has type attribute as button when rendered as a button element", () => {
@@ -99,9 +94,4 @@ describe("Racine Link", () => {
     expect(getByText("Link").type).toBeFalsy();
     expect(getByText("Link").type).not.toEqual("button");
   });
-
-  it("Can render with an underline", () => {
-    const { getByText } = render(<Link underline>Link</Link>);
-    expect(getByText("Link")).toHaveStyleRule("text-decoration", "underline");
-  });
 });

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

@@ -1,8 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Listbox AsListbox multiselect should match snapshot 1`] = `
-<body>
-  .c5 {
+.c5 {
   display: inline-block;
   color: inherit;
   vertical-align: middle;
@@ -20,12 +19,12 @@ exports[`Listbox AsListbox multiselect should match snapshot 1`] = `
   width: 16px;
 }
 
-_:-ms-fullscreen .c5,
+_:-ms-fullscreen .c4,
 html .c5 {
   width: 16px;
 }
 
-.pdf-page .c5 {
+.pdf-page .c4 {
   width: 16px;
 }
 
@@ -131,7 +130,8 @@ html .c5 {
   transform: none;
 }
 
-<div>
+<body>
+  <div>
     <div
       class="c0"
     >
@@ -185,12 +185,12 @@ exports[`Listbox AsListbox should match snapshot 1`] = `
   fill: currentColor;
 }
 
-_:-ms-fullscreen .c6,
+_:-ms-fullscreen .c5,
 html .c6 {
   width: 16px;
 }
 
-.pdf-page .c6 {
+.pdf-page .c5 {
   width: 16px;
 }
 
@@ -375,8 +375,7 @@ html .c6 {
 `;
 
 exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
-<body>
-  .c0 {
+.c0 {
   box-sizing: border-box;
   font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
   margin: 0px;
@@ -550,7 +549,8 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
   }
 }
 
-<div>
+<body>
+  <div>
     <ul
       aria-activedescendant="MenuItem-28"
       aria-multiselectable="true"
@@ -673,8 +673,7 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
 `;
 
 exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
-<body>
-  .c0 {
+.c0 {
   box-sizing: border-box;
   font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
   margin: 0px;
@@ -905,7 +904,8 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
   }
 }
 
-<div>
+<body>
+  <div>
     <ul
       aria-activedescendant="MenuItem-34"
       aria-multiselectable="true"

package/__flow__/Loader/index.test.js

@@ -8,18 +8,4 @@ describe("Loader", () => {
     const { getByText } = render(<Loader />);
     expect(getByText("Loading")).toBeTruthy();
   });
-
-  it("should render with small size class", () => {
-    const { getByDataQaLabel } = render(<Loader size="small" />);
-    expect(getByDataQaLabel({ loader: "" })).toHaveStyleRule("width", "20px");
-  });
-
-  it("should render with light theme", () => {
-    const { getByDataQaLabel } = render(<Loader color="light" />);
-    expect(getByDataQaLabel({ loader: "" })).toHaveStyleRule(
-      "border-color",
-      "rgba(255,255,255,0.3) rgba(255,255,255,0.3) rgba(255,255,255,0.7) rgba(255,255,255,0.7)",
-      { modifier: ":after" }
-    );
-  });
 });

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

@@ -270,8 +270,7 @@ exports[`Menu AsMenu should match snapshot 1`] = `
 `;
 
 exports[`Menu AsMenuButton should match snapshot 1`] = `
-<body>
-  .c3 {
+.c3 {
   display: inline-block;
   color: inherit;
   vertical-align: middle;
@@ -284,12 +283,12 @@ exports[`Menu AsMenuButton should match snapshot 1`] = `
   fill: currentColor;
 }
 
-_:-ms-fullscreen .c3,
+_:-ms-fullscreen .c2,
 html .c3 {
   width: 16px;
 }
 
-.pdf-page .c3 {
+.pdf-page .c2 {
   width: 16px;
 }
 
@@ -357,7 +356,8 @@ html .c3 {
   display: inline-block;
 }
 
-<div>
+<body>
+  <div>
     <div
       class="c0"
     >

package/__flow__/Modal/index.test.js

@@ -7,25 +7,6 @@ import { COLOR_PURPLE_300 } from "@sproutsocial/seeds-color";
 afterEach(() => cleanup());
 
 describe("Modal", () => {
-  it("renders a custom background color", () => {
-    // Use baseElement since it renders in a Portal
-    const { baseElement } = render(
-      <Modal
-        isOpen={true}
-        label="Label"
-        bg={COLOR_PURPLE_300}
-        onClose={() => {}}
-        closeButtonLabel="Close this dialog"
-      >
-        ajdsfljasdlfjlasdjf
-      </Modal>
-    );
-    expect(baseElement.querySelector(".ReactModal__Content")).toHaveStyleRule(
-      "background-color",
-      COLOR_PURPLE_300
-    );
-  });
-
   it("should close on overlay click and esc", () => {
     const onClose = jest.fn();
     const { baseElement, getByText, getByLabelText } = render(

package/__flow__/Modal/styles.js

@@ -6,7 +6,6 @@ import styled, {
 } from "styled-components";
 import { width, zIndex } from "styled-system";
 import ReactModal from "react-modal";
-import { transparentize } from "polished";
 import Box from "../Box";
 import { COMMON } from "../utils/system-props";
 
@@ -62,8 +61,7 @@ export const Container: StyledComponent<any, TypeTheme, *> = styled(ReactModalAd
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: ${(props) =>
-      transparentize(0.32, props.theme.colors.neutral[1000])};
+    background-color: ${(props) => props.theme.colors.overlay.background.base};
     opacity: 0;
     will-change: opacity;
     transition: opacity ${(props) => props.theme.duration.medium}

package/__flow__/Text/index.test.js

@@ -4,49 +4,10 @@ import "jest-styled-components";
 import Text from "./";
 
 describe("Text", () => {
-  it("does not set word break or truncated styles by default", () => {
-    const { getByDataQaLabel } = render(<Text children="Default" />);
-    const component = getByDataQaLabel({ text: "Default" });
-    expect(component).not.toHaveStyleRule("word-break", "break-word");
-    expect(component).not.toHaveStyleRule("text-overflow", "ellipsis");
-  });
-
-  it("sets word break styles when breakWord is true", () => {
-    const { getByDataQaLabel } = render(
-      <Text breakWord children="Word Break" />
-    );
-    const component = getByDataQaLabel({ text: "Word Break" });
-    expect(component).toHaveStyleRule("word-break", "break-word");
-  });
-
-  it("sets truncated styles when truncated is true", () => {
-    const { getByDataQaLabel } = render(
-      <Text truncated children="Truncated" />
-    );
-    const component = getByDataQaLabel({ text: "Truncated" });
-    expect(component).toHaveStyleRule("text-overflow", "ellipsis");
-  });
-
-  it("is italic when isItalicized is true", () => {
-    const { getByDataQaLabel } = render(
-      <Text isItalicized children="Italicized" />
-    );
-    const component = getByDataQaLabel({ text: "Italicized" });
-    expect(component).toHaveStyleRule("font-style", "italic");
-  });
-
   it("outputs the correct string/content", () => {
     const { getByText } = render(
       <Text children="Supercalifragilisticexpialidocious" />
     );
     expect(getByText("Supercalifragilisticexpialidocious")).toBeTruthy();
   });
-
-  it("displays a custom size if using fontSize", () => {
-    const { getByText } = render(
-      <Text children="Custom sized text!" fontSize={1000} />
-    );
-    const component = getByText("Custom sized text!");
-    expect(component).toHaveStyleRule("font-size", "76px");
-  });
 });

package/__flow__/themes/dark/theme.js

@@ -13,6 +13,7 @@ import {
   red,
   neutral,
 } from "./decorative-palettes";
+import { transparentize } from "polished";
 
 import interact from "../utils/interact";
 
@@ -24,6 +25,8 @@ export const shadows = {
   high: `${DEPTH.ELEVATION_LEVEL_400} ${COLORS.COLOR_NEUTRAL_1100}FF`,
 };
 
+// If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
+
 const colors = {
   ...lightTheme.colors,
   utils: {
@@ -207,6 +210,17 @@ const colors = {
       selected: COLORS.COLOR_NEUTRAL_0,
     },
   },
+  overlay: {
+    background: {
+      base: transparentize(0.28, COLORS.COLOR_NEUTRAL_1000),
+    },
+    text: {
+      base: COLORS.COLOR_NEUTRAL_0,
+    },
+    icon: {
+      base: COLORS.COLOR_NEUTRAL_0,
+    },
+  },
   elevation: {
     base: COLORS.COLOR_NEUTRAL_1100,
   },

package/__flow__/themes/light/theme.js

@@ -18,6 +18,7 @@ import SPACE from "@sproutsocial/seeds-space";
 import DEPTH from "@sproutsocial/seeds-depth";
 import MOTION from "@sproutsocial/seeds-motion";
 import BORDER from "@sproutsocial/seeds-border";
+import { transparentize } from "polished";
 
 import interact from "../utils/interact";
 
@@ -25,6 +26,8 @@ export const breakpoints = ["900px", "1200px", "1500px", "1800px"];
 
 const MODE = "light";
 
+// If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
+
 const colors = {
   app: {
     background: {
@@ -204,6 +207,17 @@ const colors = {
       selected: COLORS.COLOR_NEUTRAL_800,
     },
   },
+  overlay: {
+    background: {
+      base: transparentize(0.44, COLORS.COLOR_NEUTRAL_1000),
+    },
+    text: {
+      base: COLORS.COLOR_NEUTRAL_0,
+    },
+    icon: {
+      base: COLORS.COLOR_NEUTRAL_0,
+    },
+  },
   elevation: {
     base: `${COLORS.COLOR_NEUTRAL_900}3D`,
   },

package/commonjs/Modal/styles.js

@@ -11,8 +11,6 @@ var _styledSystem = require("styled-system");
 
 var _reactModal = _interopRequireDefault(require("react-modal"));
 
-var _polished = require("polished");
-
 var _Box = _interopRequireDefault(require("../Box"));
 
 var _systemProps = require("../utils/system-props");
@@ -62,7 +60,7 @@ var Container = (0, _styledComponents.default)(ReactModalAdapter).withConfig({
   displayName: "styles__Container",
   componentId: "sc-9lom4g-0"
 })(["&__Overlay{position:fixed;top:0px;left:0px;right:0px;bottom:0px;display:flex;align-items:center;justify-content:center;background-color:", ";opacity:0;will-change:opacity;transition:opacity ", " ", ";", " &.ReactModal__Overlay--after-open{opacity:1;}&.ReactModal__Overlay--before-close{opacity:0;}}&__Content{display:flex;flex-direction:column;background:", ";border-radius:", ";box-shadow:", ";filter:blur(0);color:", ";outline:none;max-width:calc(100vw - ", ");max-height:calc(100vh - ", ");@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){height:calc(100vh - ", ");}", " ", "}"], function (props) {
-  return (0, _polished.transparentize)(0.32, props.theme.colors.neutral[1000]);
+  return props.theme.colors.overlay.background.base;
 }, function (props) {
   return props.theme.duration.medium;
 }, function (props) {

package/commonjs/themes/dark/theme.js

@@ -13,6 +13,8 @@ var _datavizPalette = require("./dataviz-palette");
 
 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 }; }
@@ -24,7 +26,8 @@ var shadows = {
   low: _seedsDepth.default.ELEVATION_LEVEL_100 + " " + _seedsColor.default.COLOR_NEUTRAL_1100 + "FF",
   medium: _seedsDepth.default.ELEVATION_LEVEL_300 + " " + _seedsColor.default.COLOR_NEUTRAL_1100 + "FF",
   high: _seedsDepth.default.ELEVATION_LEVEL_400 + " " + _seedsColor.default.COLOR_NEUTRAL_1100 + "FF"
-};
+}; // If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
+
 exports.shadows = shadows;
 
 var colors = _extends({}, _theme.default.colors, {
@@ -209,6 +212,17 @@ var colors = _extends({}, _theme.default.colors, {
       selected: _seedsColor.default.COLOR_NEUTRAL_0
     }
   },
+  overlay: {
+    background: {
+      base: (0, _polished.transparentize)(0.28, _seedsColor.default.COLOR_NEUTRAL_1000)
+    },
+    text: {
+      base: _seedsColor.default.COLOR_NEUTRAL_0
+    },
+    icon: {
+      base: _seedsColor.default.COLOR_NEUTRAL_0
+    }
+  },
   elevation: {
     base: _seedsColor.default.COLOR_NEUTRAL_1100
   },

package/commonjs/themes/light/theme.js

@@ -23,6 +23,8 @@ var _seedsMotion = _interopRequireDefault(require("@sproutsocial/seeds-motion"))
 
 var _seedsBorder = _interopRequireDefault(require("@sproutsocial/seeds-border"));
 
+var _polished = require("polished");
+
 var _interact = _interopRequireDefault(require("../utils/interact"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,7 +33,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 var breakpoints = ["900px", "1200px", "1500px", "1800px"];
 exports.breakpoints = breakpoints;
-var MODE = "light";
+var MODE = "light"; // If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
 
 var colors = _extends({
   app: {
@@ -212,6 +214,17 @@ var colors = _extends({
       selected: _seedsColor.default.COLOR_NEUTRAL_800
     }
   },
+  overlay: {
+    background: {
+      base: (0, _polished.transparentize)(0.44, _seedsColor.default.COLOR_NEUTRAL_1000)
+    },
+    text: {
+      base: _seedsColor.default.COLOR_NEUTRAL_0
+    },
+    icon: {
+      base: _seedsColor.default.COLOR_NEUTRAL_0
+    }
+  },
   elevation: {
     base: _seedsColor.default.COLOR_NEUTRAL_900 + "3D"
   },

package/dist/themes/dark/dark.scss

@@ -189,6 +189,17 @@ $dark: (
           selected: #FFFFFF
         )
       ),
+      overlay: (
+        background: (
+          base: rgba(22,32,32,0.72)
+        ),
+        text: (
+          base: #FFFFFF
+        ),
+        icon: (
+          base: #FFFFFF
+        )
+      ),
       elevation: (
         base: #040404
       ),

package/dist/themes/light/light.scss

@@ -283,6 +283,17 @@ $light: (
           selected: #364141
         )
       ),
+      overlay: (
+        background: (
+          base: rgba(22,32,32,0.56)
+        ),
+        text: (
+          base: #FFFFFF
+        ),
+        icon: (
+          base: #FFFFFF
+        )
+      ),
       elevation: (
         base: #2733333D
       ),

package/lib/Modal/styles.js

@@ -10,7 +10,6 @@ import React from "react";
 import styled, { createGlobalStyle } from "styled-components";
 import { width, zIndex } from "styled-system";
 import ReactModal from "react-modal";
-import { transparentize } from "polished";
 import Box from "../Box";
 import { COMMON } from "../utils/system-props";
 // This is the max space allowed between the modal and the edge of the browser
@@ -43,7 +42,7 @@ export var Container = styled(ReactModalAdapter).withConfig({
   displayName: "styles__Container",
   componentId: "sc-9lom4g-0"
 })(["&__Overlay{position:fixed;top:0px;left:0px;right:0px;bottom:0px;display:flex;align-items:center;justify-content:center;background-color:", ";opacity:0;will-change:opacity;transition:opacity ", " ", ";", " &.ReactModal__Overlay--after-open{opacity:1;}&.ReactModal__Overlay--before-close{opacity:0;}}&__Content{display:flex;flex-direction:column;background:", ";border-radius:", ";box-shadow:", ";filter:blur(0);color:", ";outline:none;max-width:calc(100vw - ", ");max-height:calc(100vh - ", ");@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){height:calc(100vh - ", ");}", " ", "}"], function (props) {
-  return transparentize(0.32, props.theme.colors.neutral[1000]);
+  return props.theme.colors.overlay.background.base;
 }, function (props) {
   return props.theme.duration.medium;
 }, function (props) {

package/lib/themes/dark/theme.js

@@ -5,13 +5,14 @@ import DEPTH from "@sproutsocial/seeds-depth";
 import lightTheme from "../light/theme";
 import { datavizPalette } from "./dataviz-palette";
 import { green, blue, purple, yellow, orange, red, neutral } from "./decorative-palettes";
+import { transparentize } from "polished";
 import interact from "../utils/interact";
 var MODE = "dark";
 export var shadows = {
   low: DEPTH.ELEVATION_LEVEL_100 + " " + COLORS.COLOR_NEUTRAL_1100 + "FF",
   medium: DEPTH.ELEVATION_LEVEL_300 + " " + COLORS.COLOR_NEUTRAL_1100 + "FF",
   high: DEPTH.ELEVATION_LEVEL_400 + " " + COLORS.COLOR_NEUTRAL_1100 + "FF"
-};
+}; // If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
 
 var colors = _extends({}, lightTheme.colors, {
   utils: {
@@ -195,6 +196,17 @@ var colors = _extends({}, lightTheme.colors, {
       selected: COLORS.COLOR_NEUTRAL_0
     }
   },
+  overlay: {
+    background: {
+      base: transparentize(0.28, COLORS.COLOR_NEUTRAL_1000)
+    },
+    text: {
+      base: COLORS.COLOR_NEUTRAL_0
+    },
+    icon: {
+      base: COLORS.COLOR_NEUTRAL_0
+    }
+  },
   elevation: {
     base: COLORS.COLOR_NEUTRAL_1100
   },

package/lib/themes/light/theme.js

@@ -10,9 +10,10 @@ import SPACE from "@sproutsocial/seeds-space";
 import DEPTH from "@sproutsocial/seeds-depth";
 import MOTION from "@sproutsocial/seeds-motion";
 import BORDER from "@sproutsocial/seeds-border";
+import { transparentize } from "polished";
 import interact from "../utils/interact";
 export var breakpoints = ["900px", "1200px", "1500px", "1800px"];
-var MODE = "light";
+var MODE = "light"; // If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
 
 var colors = _extends({
   app: {
@@ -193,6 +194,17 @@ var colors = _extends({
       selected: COLORS.COLOR_NEUTRAL_800
     }
   },
+  overlay: {
+    background: {
+      base: transparentize(0.44, COLORS.COLOR_NEUTRAL_1000)
+    },
+    text: {
+      base: COLORS.COLOR_NEUTRAL_0
+    },
+    icon: {
+      base: COLORS.COLOR_NEUTRAL_0
+    }
+  },
   elevation: {
     base: COLORS.COLOR_NEUTRAL_900 + "3D"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "10.0.0",
+  "version": "10.0.1-dependencies.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -62,6 +62,7 @@
     ]
   },
   "dependencies": {
+    "@storybook/addon-controls": "^6.4.19",
     "@styled-system/theme-get": "^5.1.2",
     "classnames": "^2.2.6",
     "lodash.curry": "^4.1.1",
@@ -75,14 +76,14 @@
     "react-popper": "^1.3.3",
     "react-spring": "^8.0.25",
     "react-toastify": "^6.0.5",
-    "react-virtualized": "9.18.5",
+    "react-virtualized": "9.22.3",
     "scroll-into-view-if-needed": "1.1.0",
     "styled-system": "^5.1.5",
     "use-measure": "^0.2.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.5.5",
-    "@babel/core": "^7.4.5",
+    "@babel/core": "^7.12.9",
     "@babel/plugin-proposal-class-properties": "^7.4.4",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/preset-env": "^7.8.0",
@@ -97,20 +98,21 @@
     "@sproutsocial/seeds-networkcolor": "^2.9.0",
     "@sproutsocial/seeds-space": "^0.4.7",
     "@sproutsocial/seeds-typography": "^3.0.1",
-    "@storybook/addon-a11y": "^6.1.11",
-    "@storybook/addon-actions": "^6.3.8",
-    "@storybook/addon-knobs": "^6.1.11",
-    "@storybook/addon-storysource": "^6.1.11",
-    "@storybook/addon-viewport": "^6.1.11",
-    "@storybook/addons": "^6.1.11",
+    "@storybook/addon-a11y": "^6.4.19",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-controls": "^6.4.19",
+    "@storybook/addon-knobs": "^6.4.0",
+    "@storybook/addon-storysource": "^6.4.19",
+    "@storybook/addon-viewport": "^6.4.19",
+    "@storybook/addons": "^6.4.19",
     "@storybook/react": "^6.4.19",
-    "@storybook/theming": "^6.1.11",
+    "@storybook/theming": "^6.4.19",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^13.0.0",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "10.1.0",
     "babel-jest": "26.1.0",
-    "babel-loader": "8.0.6",
+    "babel-loader": "8.2.3",
     "babel-plugin-inline-import": "^3.0.0",
     "babel-plugin-polished": "^1.1.0",
     "babel-plugin-styled-components": "^1.10.0",
@@ -138,7 +140,7 @@
     "jest": "26.1.0",
     "jest-axe": "3.4.0",
     "jest-dom": "^3.5.0",
-    "jest-styled-components": "7.0.0-beta.1",
+    "jest-styled-components": "7.0.8",
     "jscodeshift": "^0.6.4",
     "json-to-scss": "^1.6.2",
     "lint-staged": "^10.2.11",
@@ -146,15 +148,15 @@
     "npm-run-all": "^4.1.2",
     "outdent": "^0.7.0",
     "pify": "^4.0.1",
-    "playroom": "^0.22.2",
+    "playroom": "^0.27.9",
     "prettier": "^2.0.5",
     "prop-types": "^15.6.1",
     "react": "16.12.0",
     "react-dates": "^21.8.0",
     "react-dom": "16.12.0",
     "rimraf": "^2.6.3",
-    "storybook-dark-mode": "^1.0.7",
-    "styled-components": "5.0.0-rc.2",
+    "storybook-dark-mode": "^1.0.9",
+    "styled-components": "5.3.3",
     "stylelint": "^13.8.0",
     "stylelint-config-recommended": "^2.2.0",
     "stylelint-config-styled-components": "^0.1.1",
@@ -179,6 +181,7 @@
     "styled-components": "^5.0.0-rc.2"
   },
   "resolutions": {
+    "**/eslint-import-resolver-node": "0.3.4",
     "lodash": "^4.17.21",
     "react-popper/create-react-context": "^0.3.0"
   },