@sproutsocial/racine 10.0.1-dependencies.0 → 11.0.0-mixin-beta.0

package/__flow__/Avatar/index.test.js

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

package/__flow__/CharacterCounter/index.test.js

@@ -2,6 +2,7 @@ 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", () => {
@@ -12,4 +13,11 @@ 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,6 +2,7 @@ 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" }];
@@ -14,4 +15,40 @@ 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,6 +97,7 @@ describe("EmptyState", () => {
     );
     const element = getByText("Reload Page");
     expect(element).toBeTruthy();
+    expect(element).toHaveStyleRule("color", "#FFFFFF");
   });
 
   it("should render a secondary button", async () => {
@@ -104,7 +105,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}
           />
@@ -117,5 +118,6 @@ 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,6 +2,7 @@ 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", () => {
@@ -82,6 +83,10 @@ 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", () => {
@@ -94,4 +99,9 @@ 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,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Listbox AsListbox multiselect should match snapshot 1`] = `
-.c5 {
+<body>
+  .c5 {
   display: inline-block;
   color: inherit;
   vertical-align: middle;
@@ -19,12 +20,12 @@ exports[`Listbox AsListbox multiselect should match snapshot 1`] = `
   width: 16px;
 }
 
-_:-ms-fullscreen .c4,
+_:-ms-fullscreen .c5,
 html .c5 {
   width: 16px;
 }
 
-.pdf-page .c4 {
+.pdf-page .c5 {
   width: 16px;
 }
 
@@ -130,8 +131,7 @@ html .c5 {
   transform: none;
 }
 
-<body>
-  <div>
+<div>
     <div
       class="c0"
     >
@@ -185,12 +185,12 @@ exports[`Listbox AsListbox should match snapshot 1`] = `
   fill: currentColor;
 }
 
-_:-ms-fullscreen .c5,
+_:-ms-fullscreen .c6,
 html .c6 {
   width: 16px;
 }
 
-.pdf-page .c5 {
+.pdf-page .c6 {
   width: 16px;
 }
 
@@ -375,7 +375,8 @@ html .c6 {
 `;
 
 exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
-.c0 {
+<body>
+  .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;
@@ -549,8 +550,7 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
   }
 }
 
-<body>
-  <div>
+<div>
     <ul
       aria-activedescendant="MenuItem-28"
       aria-multiselectable="true"
@@ -673,7 +673,8 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
 `;
 
 exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
-.c0 {
+<body>
+  .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;
@@ -904,8 +905,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
   }
 }
 
-<body>
-  <div>
+<div>
     <ul
       aria-activedescendant="MenuItem-34"
       aria-multiselectable="true"

package/__flow__/Loader/index.test.js

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

package/__flow__/Modal/index.test.js

@@ -7,6 +7,25 @@ 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__/Text/index.test.js

@@ -4,10 +4,49 @@ 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/_themed.scss

@@ -7,90 +7,75 @@
 
 // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.
-$theme: map-get($dark, 'default');
-
-// MIXIN
-// CSS properties that are theme-dependent must be wrapped in this mixin.
-// It will convert semantic tokens to the appropriate theme-dependent CSS property.
-@mixin themed() {
-  & {
-    $theme-map: () !global;
-    @each $key, $submap in $theme {
-      $value: map-get($theme, "#{$key}");
-      $theme-map: map-merge($theme-map, ($key: $value)) !global;
-    }
-    @content;
-    $theme-map: null !global;
-  }
-}
+$theme: map-get($dark, "default");
 
 // FUNCTIONS
 // This function will allow you to get any value from the theme.
 // @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
 @function t($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, $keys);
+  @return _map-deep-get($theme, $keys);
 }
 
 // The rest of the functions are convenience methods to get theme values for subsets of the theme.
 // @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
 @function colors($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("colors", $keys));
+  @return _map-deep-get($theme, join("colors", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
 @function typography($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("typography", $keys));
+  @return _map-deep-get($theme, join("typography", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
 @function fontWeights($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("fontWeights", $keys));
+  @return _map-deep-get($theme, join("fontWeights", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
 @function space($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("space", $keys));
+  @return _map-deep-get($theme, join("space", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
 @function radii($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("radii", $keys));
+  @return _map-deep-get($theme, join("radii", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
 @function borders($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("borders", $keys));
+  @return _map-deep-get($theme, join("borders", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
 @function borderWidths($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("borderWidths", $keys));
+  @return _map-deep-get($theme, join("borderWidths", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
 @function shadows($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("shadows", $keys));
+  @return _map-deep-get($theme, join("shadows", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
 @function easing($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("easing", $keys));
+  @return _map-deep-get($theme, join("easing", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
 @function duration($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("duration", $keys));
+  @return _map-deep-get($theme, join("duration", $keys));
 }
 
 // UTILITIES
@@ -104,7 +89,7 @@ $theme: map-get($dark, 'default');
   // empty array/list
   $split-arr: ();
   // first index of separator in string
-  $index : str-index($string, $separator);
+  $index: str-index($string, $separator);
   // loop through string
   @while $index != null {
     // get the substring from the first character to the separator
@@ -114,7 +99,7 @@ $theme: map-get($dark, 'default');
     // remove item and separator from string
     $string: str-slice($string, $index + 1);
     // find new index of separator
-    $index : str-index($string, $separator);
+    $index: str-index($string, $separator);
   }
   // add the remaining string to list (the last item)
   $split-arr: append($split-arr, $string);

package/__flow__/themes/light/_themed.scss

@@ -7,90 +7,75 @@
 
 // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.
-$theme: map-get($light, 'default');
-
-// MIXIN
-// CSS properties that are theme-dependent must be wrapped in this mixin.
-// It will convert semantic tokens to the appropriate theme-dependent CSS property.
-@mixin themed() {
-  & {
-    $theme-map: () !global;
-    @each $key, $submap in $theme {
-      $value: map-get($theme, "#{$key}");
-      $theme-map: map-merge($theme-map, ($key: $value)) !global;
-    }
-    @content;
-    $theme-map: null !global;
-  }
-}
+$theme: map-get($light, "default");
 
 // FUNCTIONS
 // This function will allow you to get any value from the theme.
 // @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
 @function t($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, $keys);
+  @return _map-deep-get($theme, $keys);
 }
 
 // The rest of the functions are convenience methods to get theme values for subsets of the theme.
 // @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
 @function colors($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("colors", $keys));
+  @return _map-deep-get($theme, join("colors", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
 @function typography($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("typography", $keys));
+  @return _map-deep-get($theme, join("typography", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
 @function fontWeights($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("fontWeights", $keys));
+  @return _map-deep-get($theme, join("fontWeights", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
 @function space($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("space", $keys));
+  @return _map-deep-get($theme, join("space", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
 @function radii($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("radii", $keys));
+  @return _map-deep-get($theme, join("radii", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
 @function borders($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("borders", $keys));
+  @return _map-deep-get($theme, join("borders", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
 @function borderWidths($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("borderWidths", $keys));
+  @return _map-deep-get($theme, join("borderWidths", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
 @function shadows($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("shadows", $keys));
+  @return _map-deep-get($theme, join("shadows", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
 @function easing($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("easing", $keys));
+  @return _map-deep-get($theme, join("easing", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
 @function duration($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("duration", $keys));
+  @return _map-deep-get($theme, join("duration", $keys));
 }
 
 // UTILITIES
@@ -104,7 +89,7 @@ $theme: map-get($light, 'default');
   // empty array/list
   $split-arr: ();
   // first index of separator in string
-  $index : str-index($string, $separator);
+  $index: str-index($string, $separator);
   // loop through string
   @while $index != null {
     // get the substring from the first character to the separator
@@ -114,7 +99,7 @@ $theme: map-get($light, 'default');
     // remove item and separator from string
     $string: str-slice($string, $index + 1);
     // find new index of separator
-    $index : str-index($string, $separator);
+    $index: str-index($string, $separator);
   }
   // add the remaining string to list (the last item)
   $split-arr: append($split-arr, $string);

package/dist/themes/dark/_themed.scss

@@ -7,90 +7,75 @@
 
 // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.
-$theme: map-get($dark, 'default');
-
-// MIXIN
-// CSS properties that are theme-dependent must be wrapped in this mixin.
-// It will convert semantic tokens to the appropriate theme-dependent CSS property.
-@mixin themed() {
-  & {
-    $theme-map: () !global;
-    @each $key, $submap in $theme {
-      $value: map-get($theme, "#{$key}");
-      $theme-map: map-merge($theme-map, ($key: $value)) !global;
-    }
-    @content;
-    $theme-map: null !global;
-  }
-}
+$theme: map-get($dark, "default");
 
 // FUNCTIONS
 // This function will allow you to get any value from the theme.
 // @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
 @function t($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, $keys);
+  @return _map-deep-get($theme, $keys);
 }
 
 // The rest of the functions are convenience methods to get theme values for subsets of the theme.
 // @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
 @function colors($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("colors", $keys));
+  @return _map-deep-get($theme, join("colors", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
 @function typography($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("typography", $keys));
+  @return _map-deep-get($theme, join("typography", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
 @function fontWeights($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("fontWeights", $keys));
+  @return _map-deep-get($theme, join("fontWeights", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
 @function space($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("space", $keys));
+  @return _map-deep-get($theme, join("space", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
 @function radii($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("radii", $keys));
+  @return _map-deep-get($theme, join("radii", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
 @function borders($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("borders", $keys));
+  @return _map-deep-get($theme, join("borders", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
 @function borderWidths($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("borderWidths", $keys));
+  @return _map-deep-get($theme, join("borderWidths", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
 @function shadows($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("shadows", $keys));
+  @return _map-deep-get($theme, join("shadows", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
 @function easing($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("easing", $keys));
+  @return _map-deep-get($theme, join("easing", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
 @function duration($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("duration", $keys));
+  @return _map-deep-get($theme, join("duration", $keys));
 }
 
 // UTILITIES
@@ -104,7 +89,7 @@ $theme: map-get($dark, 'default');
   // empty array/list
   $split-arr: ();
   // first index of separator in string
-  $index : str-index($string, $separator);
+  $index: str-index($string, $separator);
   // loop through string
   @while $index != null {
     // get the substring from the first character to the separator
@@ -114,7 +99,7 @@ $theme: map-get($dark, 'default');
     // remove item and separator from string
     $string: str-slice($string, $index + 1);
     // find new index of separator
-    $index : str-index($string, $separator);
+    $index: str-index($string, $separator);
   }
   // add the remaining string to list (the last item)
   $split-arr: append($split-arr, $string);

package/dist/themes/light/_themed.scss

@@ -7,90 +7,75 @@
 
 // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.
-$theme: map-get($light, 'default');
-
-// MIXIN
-// CSS properties that are theme-dependent must be wrapped in this mixin.
-// It will convert semantic tokens to the appropriate theme-dependent CSS property.
-@mixin themed() {
-  & {
-    $theme-map: () !global;
-    @each $key, $submap in $theme {
-      $value: map-get($theme, "#{$key}");
-      $theme-map: map-merge($theme-map, ($key: $value)) !global;
-    }
-    @content;
-    $theme-map: null !global;
-  }
-}
+$theme: map-get($light, "default");
 
 // FUNCTIONS
 // This function will allow you to get any value from the theme.
 // @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
 @function t($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, $keys);
+  @return _map-deep-get($theme, $keys);
 }
 
 // The rest of the functions are convenience methods to get theme values for subsets of the theme.
 // @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
 @function colors($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("colors", $keys));
+  @return _map-deep-get($theme, join("colors", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
 @function typography($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("typography", $keys));
+  @return _map-deep-get($theme, join("typography", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
 @function fontWeights($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("fontWeights", $keys));
+  @return _map-deep-get($theme, join("fontWeights", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
 @function space($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("space", $keys));
+  @return _map-deep-get($theme, join("space", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
 @function radii($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("radii", $keys));
+  @return _map-deep-get($theme, join("radii", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
 @function borders($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("borders", $keys));
+  @return _map-deep-get($theme, join("borders", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
 @function borderWidths($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("borderWidths", $keys));
+  @return _map-deep-get($theme, join("borderWidths", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
 @function shadows($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("shadows", $keys));
+  @return _map-deep-get($theme, join("shadows", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
 @function easing($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("easing", $keys));
+  @return _map-deep-get($theme, join("easing", $keys));
 }
 
 // @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
 @function duration($key) {
   $keys: _str-split($key, ".");
-  @return _map-deep-get($theme-map, join("duration", $keys));
+  @return _map-deep-get($theme, join("duration", $keys));
 }
 
 // UTILITIES
@@ -104,7 +89,7 @@ $theme: map-get($light, 'default');
   // empty array/list
   $split-arr: ();
   // first index of separator in string
-  $index : str-index($string, $separator);
+  $index: str-index($string, $separator);
   // loop through string
   @while $index != null {
     // get the substring from the first character to the separator
@@ -114,7 +99,7 @@ $theme: map-get($light, 'default');
     // remove item and separator from string
     $string: str-slice($string, $index + 1);
     // find new index of separator
-    $index : str-index($string, $separator);
+    $index: str-index($string, $separator);
   }
   // add the remaining string to list (the last item)
   $split-arr: append($split-arr, $string);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "10.0.1-dependencies.0",
+  "version": "11.0.0-mixin-beta.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -62,7 +62,6 @@
     ]
   },
   "dependencies": {
-    "@storybook/addon-controls": "^6.4.19",
     "@styled-system/theme-get": "^5.1.2",
     "classnames": "^2.2.6",
     "lodash.curry": "^4.1.1",
@@ -76,14 +75,14 @@
     "react-popper": "^1.3.3",
     "react-spring": "^8.0.25",
     "react-toastify": "^6.0.5",
-    "react-virtualized": "9.22.3",
+    "react-virtualized": "9.18.5",
     "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.12.9",
+    "@babel/core": "^7.4.5",
     "@babel/plugin-proposal-class-properties": "^7.4.4",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/preset-env": "^7.8.0",
@@ -98,21 +97,20 @@
     "@sproutsocial/seeds-networkcolor": "^2.9.0",
     "@sproutsocial/seeds-space": "^0.4.7",
     "@sproutsocial/seeds-typography": "^3.0.1",
-    "@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/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/react": "^6.4.19",
-    "@storybook/theming": "^6.4.19",
+    "@storybook/theming": "^6.1.11",
     "@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.2.3",
+    "babel-loader": "8.0.6",
     "babel-plugin-inline-import": "^3.0.0",
     "babel-plugin-polished": "^1.1.0",
     "babel-plugin-styled-components": "^1.10.0",
@@ -140,7 +138,7 @@
     "jest": "26.1.0",
     "jest-axe": "3.4.0",
     "jest-dom": "^3.5.0",
-    "jest-styled-components": "7.0.8",
+    "jest-styled-components": "7.0.0-beta.1",
     "jscodeshift": "^0.6.4",
     "json-to-scss": "^1.6.2",
     "lint-staged": "^10.2.11",
@@ -148,15 +146,15 @@
     "npm-run-all": "^4.1.2",
     "outdent": "^0.7.0",
     "pify": "^4.0.1",
-    "playroom": "^0.27.9",
+    "playroom": "^0.22.2",
     "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.9",
-    "styled-components": "5.3.3",
+    "storybook-dark-mode": "^1.0.7",
+    "styled-components": "5.0.0-rc.2",
     "stylelint": "^13.8.0",
     "stylelint-config-recommended": "^2.2.0",
     "stylelint-config-styled-components": "^0.1.1",
@@ -181,7 +179,6 @@
     "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"
   },