@sproutsocial/racine 10.0.0-dar97-beta.2 → 10.0.2-menuCSS.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Change Log
 
+## 10.0.0
+
+### Major Changes
+
+- 98f063a: Make theme names consistent by removing references to "default-light" and "default-dark"
+  - We no longer refer to the "light" theme as "default-light" in the theme object.
+  - We no longer refer to the "dark" theme as "default-dark" in the theme object.
+- 98f063a: Change "themed" SCSS mixin setup
+  - A parent theme classname of 'theme--light' or 'theme--dark' is no longer required to use the mixin.
+  - A separate mixin is offered per theme, instead of a single mixin for all themes.
+- 98f063a: Rename "default" theme to "light"
+
+## 9.0.3
+
+### Patch Changes
+
+- a9a06a6: Added aliases for sentiment colors
+
+## 9.0.2
+
+### Patch Changes
+
+- 3215099: bug fix for mix blend mode
+
 ## 9.0.1
 
 ### Patch Changes

package/__flow__/Button/styles.js

@@ -87,7 +87,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
       align-items: center;
       justify-content: center;
       /* This solution is temporary. DS-1095 */
-      mix-blend-mode: ${props.theme.mode ? "screen" : "multiply"};
+      mix-blend-mode: ${props.theme.mode === "dark" ? "screen" : "multiply"};
 
       ${pill}
     `}

package/__flow__/Checkbox/styles.js

@@ -35,7 +35,7 @@ export const InputWrapper = styled<typeof Box, TypeTheme, any>(Box)`
       transition: all ${(props) => props.theme.duration.fast}
         ${(props) => props.theme.easing.ease_inout};
       /* This solution is temporary. DS-1095 */
-      mix-blend-mode: ${props.theme.mode ? "screen" : "multiply"};
+      mix-blend-mode: ${props.theme.mode === "dark" ? "screen" : "multiply"};
       ${pill}
 
       &:hover {

package/__flow__/Listbox/index.test.js

@@ -165,10 +165,6 @@ describe("Listbox", () => {
   });
 
   describe("AsListbox", () => {
-    it("should match snapshot", () => {
-      expect(render(<AsListbox />).baseElement).toMatchSnapshot();
-    });
-
     it("should render items with option role", async () => {
       const { findByText, queryByLabelText, queryByRole } = render(
         <AsListbox />
@@ -211,10 +207,6 @@ describe("Listbox", () => {
   });
 
   describe("AsListbox multiselect", () => {
-    it("should match snapshot", () => {
-      expect(render(<AsListboxMultiselect />).baseElement).toMatchSnapshot();
-    });
-
     it("should render items with option role", async () => {
       const { queryByLabelText, queryByText, queryByRole } = render(
         <AsListboxMultiselect />
@@ -244,10 +236,6 @@ describe("Listbox", () => {
   });
 
   describe("AsListbox with checkboxes", () => {
-    it("should match snapshot", () => {
-      expect(render(<AsListboxWithCheckboxes />).baseElement).toMatchSnapshot();
-    });
-
     it("should render items with checkbox role", async () => {
       const { queryByRole } = render(<AsListboxWithCheckboxes />);
       const firstItem = queryByRole(MENU_ITEM_ROLES.CHECKBOX, {
@@ -267,12 +255,6 @@ describe("Listbox", () => {
   });
 
   describe("AsListbox with filter input", () => {
-    it("should match snapshot", () => {
-      expect(
-        render(<AsListboxWithFilterInput />).baseElement
-      ).toMatchSnapshot();
-    });
-
     it("should allow filtering", async () => {
       const { queryByLabelText, queryAllByRole } = render(
         <AsListboxWithFilterInput />

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

@@ -1,277 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Menu AsMenu should match snapshot 1`] = `
-.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;
-  padding: 0px;
-  width: 200px;
-  overflow: hidden;
-}
-
-.c2 {
-  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;
-  padding-left: 16px;
-  margin-top: -1px;
-  border-top: 1px solid;
-  border-color: #dee1e1;
-}
-
-.c4 {
-  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: 8px;
-  padding: 8px;
-}
-
-.c5 {
-  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;
-}
-
-.c7 {
-  display: block;
-  width: 100%;
-  border-radius: 6px;
-  background-color: transparent;
-  border: none;
-  text-align: left;
-  color: #364141;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  font-weight: 400;
-  padding: 6px 8px;
-  list-style-type: none;
-  outline: 0;
-  font-size: 13px;
-  line-height: 21.333333333333332px;
-}
-
-.c7:focus,
-.c7:hover {
-  color: #364141;
-  background-color: #f3f4f4;
-}
-
-.c7:focus .Icon-svg,
-.c7:hover .Icon-svg {
-  color: unset;
-}
-
-.c7:hover {
-  cursor: pointer;
-}
-
-.c6 {
-  display: block;
-  width: 100%;
-  border-radius: 6px;
-  background-color: transparent;
-  border: none;
-  text-align: left;
-  color: #364141;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  font-weight: 400;
-  padding: 6px 8px;
-  list-style-type: none;
-  outline: 0;
-  font-size: 13px;
-  line-height: 21.333333333333332px;
-  color: #FFFFFF;
-  background-color: #364141;
-}
-
-.c6 .Icon-svg {
-  color: #FFFFFF;
-}
-
-.c6:focus,
-.c6:hover {
-  color: #364141;
-  background-color: #f3f4f4;
-}
-
-.c6:focus .Icon-svg,
-.c6:hover .Icon-svg {
-  color: unset;
-}
-
-.c6:hover {
-  cursor: pointer;
-}
-
-.c1 {
-  list-style-type: none;
-  outline: 0;
-}
-
-.c3 {
-  margin: 0;
-  padding-left: 0;
-  padding-right: 0;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  margin-top: 12px;
-  color: #273333;
-  font-size: 13px;
-  line-height: 21.333333333333332px;
-  font-weight: 600;
-}
-
-<body>
-  <div>
-    <ul
-      aria-activedescendant="MenuItem-1"
-      class="c0 c1"
-      overflow="hidden"
-      role="menu"
-      tabindex="0"
-      width="200px"
-    >
-      <div
-        class="c2"
-      >
-        <div
-          class="c3 "
-          color="text.headline"
-          data-qa-text="Fruit"
-          font-weight="600"
-        >
-          Fruit
-        </div>
-      </div>
-      <div
-        class="c4"
-        role="group"
-      >
-        <li
-          class="c5 c6"
-          data-qa-menu-item="Apple"
-          id="MenuItem-1"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <div
-            style="display: flex; align-items: center; justify-content: space-between;"
-          >
-            <div
-              style="flex-grow: 1; word-break: break-word; min-width: 0;"
-            >
-              Apple
-            </div>
-          </div>
-        </li>
-        <li
-          class="c5 c7"
-          data-qa-menu-item="Banana"
-          id="MenuItem-2"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <div
-            style="display: flex; align-items: center; justify-content: space-between;"
-          >
-            <div
-              style="flex-grow: 1; word-break: break-word; min-width: 0;"
-            >
-              Banana
-            </div>
-          </div>
-        </li>
-        <li
-          class="c5 c7"
-          data-qa-menu-item="Orange"
-          id="MenuItem-3"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <div
-            style="display: flex; align-items: center; justify-content: space-between;"
-          >
-            <div
-              style="flex-grow: 1; word-break: break-word; min-width: 0;"
-            >
-              Orange
-            </div>
-          </div>
-        </li>
-      </div>
-      <div
-        class="c2"
-      >
-        <div
-          class="c3 "
-          color="text.headline"
-          data-qa-text="Maybe Fruit"
-          font-weight="600"
-        >
-          Maybe Fruit
-        </div>
-      </div>
-      <div
-        class="c4"
-        role="group"
-      >
-        <li
-          class="c5 c7"
-          data-qa-menu-item="Tomato"
-          id="MenuItem-4"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <div
-            style="display: flex; align-items: center; justify-content: space-between;"
-          >
-            <div
-              style="flex-grow: 1; word-break: break-word; min-width: 0;"
-            >
-              Tomato
-            </div>
-          </div>
-        </li>
-        <li
-          class="c5 c7"
-          data-qa-menu-item="Cucumber"
-          id="MenuItem-5"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <div
-            style="display: flex; align-items: center; justify-content: space-between;"
-          >
-            <div
-              style="flex-grow: 1; word-break: break-word; min-width: 0;"
-            >
-              Cucumber
-            </div>
-          </div>
-        </li>
-        <li
-          class="c5 c7"
-          data-qa-menu-item="Squash"
-          id="MenuItem-6"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <div
-            style="display: flex; align-items: center; justify-content: space-between;"
-          >
-            <div
-              style="flex-grow: 1; word-break: break-word; min-width: 0;"
-            >
-              Squash
-            </div>
-          </div>
-        </li>
-      </div>
-    </ul>
-  </div>
-</body>
-`;
-
 exports[`Menu AsMenuButton should match snapshot 1`] = `
-<body>
-  .c3 {
+.c3 {
   display: inline-block;
   color: inherit;
   vertical-align: middle;
@@ -357,7 +87,8 @@ html .c3 {
   display: inline-block;
 }
 
-<div>
+<body>
+  <div>
     <div
       class="c0"
     >
@@ -368,7 +99,7 @@ html .c3 {
         class="c1"
         data-qa-button=""
         data-qa-button-isdisabled="false"
-        id="MenuButton-13"
+        id="MenuButton-7"
         type="button"
       >
         <span

package/__flow__/Menu/index.test.js

@@ -54,10 +54,6 @@ describe("Menu", () => {
   });
 
   describe("AsMenu", () => {
-    it("should match snapshot", () => {
-      expect(render(<AsMenu />).baseElement).toMatchSnapshot();
-    });
-
     it("should render items with menuitem role", () => {
       const { queryByRole, queryByDataQaLabel } = render(<AsMenu />);
       const firstItem = queryByRole(MENU_ITEM_ROLES.MENUITEM, {

package/__flow__/Menu/styles.js

@@ -3,7 +3,7 @@ import styled, { css } from "styled-components";
 import Box from "../Box";
 import type { TypeMenuItemProps } from "./index.flow";
 import type { TypeTheme } from "../types/theme.flow";
-import { disabled } from "../utils/mixins";
+import { disabled, focusRing } from "../utils/mixins";
 
 export const MenuItemContainer = styled<
   typeof Box,
@@ -86,5 +86,13 @@ export const MenuItemContainer = styled<
 
 export const MenuItemsContainer = styled<typeof Box, TypeTheme>(Box)`
   list-style-type: none;
-  outline: 0;
+  &:focus {
+    ${focusRing}
+  }
+  &:not(:focus) {
+    & li:not(:hover) {
+      color: #364141;
+      background-color: transparent;
+    }
+  }
 `;

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__/themes/dark/_themed.scss

@@ -2,15 +2,16 @@
 // This file is excluded from stylelint, because stylelint is only set up to lint styled-components at the moment.
 
 // SET-UP
-// These files are auto-generated based on JS theme files, ensuring our SCSS theme variables stay in sync.
+// This file is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
 @import "../../../dist/themes/dark/dark.scss";
 
-// In the JS theme files, the theme object is exported as "default" (i.e., using "export default"),
+// 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
+// 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;

package/__flow__/themes/dark/theme.js

@@ -2,7 +2,7 @@
 
 import COLORS from "@sproutsocial/seeds-color";
 import DEPTH from "@sproutsocial/seeds-depth";
-import defaultTheme from "../light/theme";
+import lightTheme from "../light/theme";
 import { datavizPalette } from "./dataviz-palette";
 import {
   green,
@@ -13,10 +13,11 @@ import {
   red,
   neutral,
 } from "./decorative-palettes";
+import { transparentize } from "polished";
 
 import interact from "../utils/interact";
 
-const MODE = "default-dark";
+const MODE = "dark";
 
 export const shadows = {
   low: `${DEPTH.ELEVATION_LEVEL_100} ${COLORS.COLOR_NEUTRAL_1100}FF`,
@@ -24,8 +25,10 @@ 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 = {
-  ...defaultTheme.colors,
+  ...lightTheme.colors,
   utils: {
     interact: interact(MODE),
   },
@@ -53,6 +56,9 @@ const colors = {
         neutral: neutral.background,
       },
       selected: COLORS.COLOR_NEUTRAL_0,
+      positive_sentiment: COLORS.COLOR_BLUE_500,
+      negative_sentiment: COLORS.COLOR_RED_500,
+      neutral_sentiment: COLORS.COLOR_NEUTRAL_300,
     },
     border: {
       base: COLORS.COLOR_NEUTRAL_1100,
@@ -178,6 +184,9 @@ const colors = {
     danger: red.foreground,
     info: blue.foreground,
     opportunity: purple.foreground,
+    positive_sentiment: COLORS.COLOR_BLUE_700,
+    negative_sentiment: COLORS.COLOR_RED_600,
+    neutral_sentiment: COLORS.COLOR_NEUTRAL_600,
   },
   form: {
     background: {
@@ -201,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,
   },
@@ -212,7 +232,7 @@ const colors = {
 };
 
 const darkTheme = {
-  ...defaultTheme,
+  ...lightTheme,
   colors,
   shadows,
   mode: MODE,

package/__flow__/themes/light/_themed.scss

@@ -2,24 +2,25 @@
 // This file is excluded from stylelint, because stylelint is only set up to lint styled-components at the moment.
 
 // SET-UP
-// These files are auto-generated based on JS theme files, ensuring our SCSS theme variables stay in sync.
+// This file is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
 @import "../../../dist/themes/light/light.scss";
 
-// In the JS theme files, the theme object is exported as "default" (i.e., using "export default"),
+// 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
+// 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: () !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;
   }
 }
 

package/__flow__/themes/light/theme.js

@@ -18,12 +18,15 @@ 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 const breakpoints = ["900px", "1200px", "1500px", "1800px"];
 
-const MODE = "default-light";
+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: {
@@ -50,6 +53,9 @@ const colors = {
         neutral: neutral.background,
       },
       selected: COLORS.COLOR_NEUTRAL_800,
+      positive_sentiment: COLORS.COLOR_BLUE_500,
+      negative_sentiment: COLORS.COLOR_RED_500,
+      neutral_sentiment: COLORS.COLOR_NEUTRAL_300,
     },
     border: {
       base: COLORS.COLOR_NEUTRAL_200,
@@ -175,6 +181,9 @@ const colors = {
     danger: red.foreground,
     info: blue.foreground,
     opportunity: purple.foreground,
+    positive_sentiment: COLORS.COLOR_BLUE_700,
+    negative_sentiment: COLORS.COLOR_RED_600,
+    neutral_sentiment: COLORS.COLOR_NEUTRAL_600,
   },
   form: {
     background: {
@@ -198,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/__flow__/themes/utils/interact.js

@@ -2,7 +2,7 @@
 import { darken, lighten } from "polished";
 
 const interact = (mode: string) => (themeValue: string) => {
-  if (mode === "default-dark") {
+  if (mode === "dark") {
     return lighten(0.2, themeValue);
   } else {
     return darken(0.2, themeValue);

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

@@ -30,6 +30,9 @@ type TypeContainerColors = {|
         neutral: string,
       },
       selected: string,
+      positive_sentiment: string,
+      negative_sentiment: string,
+      neutral_sentiment: string,
     },
     border: {
       base: string,
@@ -167,6 +170,9 @@ type TypeIconColors = {|
     danger: string,
     info: string,
     opportunity: string,
+    positive_sentiment: string,
+    negative_sentiment: string,
+    neutral_sentiment: string,
   },
 |};
 

package/commonjs/Button/styles.js

@@ -57,7 +57,7 @@ var Container = _styledComponents.default.button.withConfig({
 }, 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:", ";", ""], props.theme.mode ? "screen" : "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 === "dark" ? "screen" : "multiply", _mixins.pill);
 }, _styles.default, _systemProps.LAYOUT, _systemProps.COMMON);
 
 var _default = Container; //${props.theme.mode === "dark" ? "screen" : "multiply"}

package/commonjs/Checkbox/styles.js

@@ -40,7 +40,7 @@ var InputWrapper = (0, _styledComponents.default)(_Box.default).withConfig({
     return props.theme.duration.fast;
   }, function (props) {
     return props.theme.easing.ease_inout;
-  }, props.theme.mode ? "screen" : "multiply", _mixins.pill, props.theme.colors.app.background.base, PillInput, _mixins.pill);
+  }, props.theme.mode === "dark" ? "screen" : "multiply", _mixins.pill, props.theme.colors.app.background.base, PillInput, _mixins.pill);
 });
 exports.InputWrapper = InputWrapper;
 InputWrapper.displayName = "InputWrapper";