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

package/commonjs/Menu/styles.js

@@ -59,5 +59,5 @@ exports.MenuItemContainer = MenuItemContainer;
 var MenuItemsContainer = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MenuItemsContainer",
   componentId: "fjvae4-1"
-})(["list-style-type:none;outline:0;"]);
+})(["list-style-type:none;&:focus{", "}&:not(:focus){& li:not(:hover){color:#364141;background-color:transparent;}}"], _mixins.focusRing);
 exports.MenuItemsContainer = MenuItemsContainer;

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,18 +13,21 @@ 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 }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-var MODE = "default-dark";
+var MODE = "dark";
 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, {
@@ -54,7 +57,10 @@ var colors = _extends({}, _theme.default.colors, {
         red: _decorativePalettes.red.background,
         neutral: _decorativePalettes.neutral.background
       },
-      selected: _seedsColor.default.COLOR_NEUTRAL_0
+      selected: _seedsColor.default.COLOR_NEUTRAL_0,
+      positive_sentiment: _seedsColor.default.COLOR_BLUE_500,
+      negative_sentiment: _seedsColor.default.COLOR_RED_500,
+      neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_300
     },
     border: {
       base: _seedsColor.default.COLOR_NEUTRAL_1100,
@@ -179,7 +185,10 @@ var colors = _extends({}, _theme.default.colors, {
     error: _decorativePalettes.red.foreground,
     danger: _decorativePalettes.red.foreground,
     info: _decorativePalettes.blue.foreground,
-    opportunity: _decorativePalettes.purple.foreground
+    opportunity: _decorativePalettes.purple.foreground,
+    positive_sentiment: _seedsColor.default.COLOR_BLUE_700,
+    negative_sentiment: _seedsColor.default.COLOR_RED_600,
+    neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_600
   },
   form: {
     background: {
@@ -203,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 = "default-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: {
@@ -57,7 +59,10 @@ var colors = _extends({
         red: _decorativePalettes.red.background,
         neutral: _decorativePalettes.neutral.background
       },
-      selected: _seedsColor.default.COLOR_NEUTRAL_800
+      selected: _seedsColor.default.COLOR_NEUTRAL_800,
+      positive_sentiment: _seedsColor.default.COLOR_BLUE_500,
+      negative_sentiment: _seedsColor.default.COLOR_RED_500,
+      neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_300
     },
     border: {
       base: _seedsColor.default.COLOR_NEUTRAL_200,
@@ -182,7 +187,10 @@ var colors = _extends({
     error: _decorativePalettes.red.foreground,
     danger: _decorativePalettes.red.foreground,
     info: _decorativePalettes.blue.foreground,
-    opportunity: _decorativePalettes.purple.foreground
+    opportunity: _decorativePalettes.purple.foreground,
+    positive_sentiment: _seedsColor.default.COLOR_BLUE_700,
+    negative_sentiment: _seedsColor.default.COLOR_RED_600,
+    neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_600
   },
   form: {
     background: {
@@ -206,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/commonjs/themes/utils/interact.js

@@ -7,7 +7,7 @@ var _polished = require("polished");
 
 var interact = function interact(mode) {
   return function (themeValue) {
-    if (mode === "default-dark") {
+    if (mode === "dark") {
       return (0, _polished.lighten)(0.2, themeValue);
     } else {
       return (0, _polished.darken)(0.2, themeValue);

package/dist/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/dist/themes/dark/dark.scss

@@ -34,7 +34,10 @@ $dark: (
             red: #992222,
             neutral: #273333
           ),
-          selected: #FFFFFF
+          selected: #FFFFFF,
+          positive_sentiment: #3896e3,
+          negative_sentiment: #f76054,
+          neutral_sentiment: #c8cccc
         ),
         border: (
           base: #040404,
@@ -159,7 +162,10 @@ $dark: (
         error: #ffd5d2,
         danger: #ffd5d2,
         info: #dcf2ff,
-        opportunity: #eaeaf9
+        opportunity: #eaeaf9,
+        positive_sentiment: #2079c3,
+        negative_sentiment: #ed4c42,
+        neutral_sentiment: #6e797a
       ),
       form: (
         background: (
@@ -183,6 +189,17 @@ $dark: (
           selected: #FFFFFF
         )
       ),
+      overlay: (
+        background: (
+          base: rgba(22,32,32,0.72)
+        ),
+        text: (
+          base: #FFFFFF
+        ),
+        icon: (
+          base: #FFFFFF
+        )
+      ),
       elevation: (
         base: #040404
       ),
@@ -596,6 +613,6 @@ $dark: (
       medium: .3s,
       slow: .6s
     ),
-    mode: default-dark
+    mode: dark
   )
 );

package/dist/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/dist/themes/light/light.scss

@@ -128,7 +128,10 @@ $light: (
             red: #ffd5d2,
             neutral: #f3f4f4
           ),
-          selected: #364141
+          selected: #364141,
+          positive_sentiment: #3896e3,
+          negative_sentiment: #f76054,
+          neutral_sentiment: #c8cccc
         ),
         border: (
           base: #dee1e1,
@@ -253,7 +256,10 @@ $light: (
         error: #992222,
         danger: #992222,
         info: #0c5689,
-        opportunity: #5e4eba
+        opportunity: #5e4eba,
+        positive_sentiment: #2079c3,
+        negative_sentiment: #ed4c42,
+        neutral_sentiment: #6e797a
       ),
       form: (
         background: (
@@ -277,6 +283,17 @@ $light: (
           selected: #364141
         )
       ),
+      overlay: (
+        background: (
+          base: rgba(22,32,32,0.56)
+        ),
+        text: (
+          base: #FFFFFF
+        ),
+        icon: (
+          base: #FFFFFF
+        )
+      ),
       elevation: (
         base: #2733333D
       ),
@@ -687,6 +704,6 @@ $light: (
       medium: .3s,
       slow: .6s
     ),
-    mode: default-light
+    mode: light
   )
 );

package/lib/Button/styles.js

@@ -42,6 +42,6 @@ var Container = styled.button.withConfig({
 }, function (props) {
   return props.disabled && disabled;
 }, function (props) {
-  return props.appearance === "pill" && css(["display:inline-flex;align-items:center;justify-content:center;mix-blend-mode:", ";", ""], props.theme.mode ? "screen" : "multiply", pill);
+  return props.appearance === "pill" && css(["display:inline-flex;align-items:center;justify-content:center;mix-blend-mode:", ";", ""], props.theme.mode === "dark" ? "screen" : "multiply", pill);
 }, Icon, LAYOUT, COMMON);
 export default Container; //${props.theme.mode === "dark" ? "screen" : "multiply"}

package/lib/Checkbox/styles.js

@@ -22,7 +22,7 @@ export var InputWrapper = styled(Box).withConfig({
     return props.theme.duration.fast;
   }, function (props) {
     return props.theme.easing.ease_inout;
-  }, props.theme.mode ? "screen" : "multiply", pill, props.theme.colors.app.background.base, PillInput, pill);
+  }, props.theme.mode === "dark" ? "screen" : "multiply", pill, props.theme.colors.app.background.base, PillInput, pill);
 });
 InputWrapper.displayName = "InputWrapper";
 export var CheckboxBox = styled.div.withConfig({

package/lib/Menu/styles.js

@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
 import Box from "../Box";
-import { disabled } from "../utils/mixins";
+import { disabled, focusRing } from "../utils/mixins";
 export var MenuItemContainer = styled(Box).withConfig({
   displayName: "styles__MenuItemContainer",
   componentId: "fjvae4-0"
@@ -44,4 +44,4 @@ export var MenuItemContainer = styled(Box).withConfig({
 export var MenuItemsContainer = styled(Box).withConfig({
   displayName: "styles__MenuItemsContainer",
   componentId: "fjvae4-1"
-})(["list-style-type:none;outline:0;"]);
+})(["list-style-type:none;&:focus{", "}&:not(:focus){& li:not(:hover){color:#364141;background-color:transparent;}}"], focusRing);

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

@@ -2,18 +2,19 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 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, blue, purple, yellow, orange, red, neutral } from "./decorative-palettes";
+import { transparentize } from "polished";
 import interact from "../utils/interact";
-var MODE = "default-dark";
+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({}, defaultTheme.colors, {
+var colors = _extends({}, lightTheme.colors, {
   utils: {
     interact: interact(MODE)
   },
@@ -40,7 +41,10 @@ var colors = _extends({}, defaultTheme.colors, {
         red: red.background,
         neutral: neutral.background
       },
-      selected: COLORS.COLOR_NEUTRAL_0
+      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,
@@ -165,7 +169,10 @@ var colors = _extends({}, defaultTheme.colors, {
     error: red.foreground,
     danger: red.foreground,
     info: blue.foreground,
-    opportunity: purple.foreground
+    opportunity: purple.foreground,
+    positive_sentiment: COLORS.COLOR_BLUE_700,
+    negative_sentiment: COLORS.COLOR_RED_600,
+    neutral_sentiment: COLORS.COLOR_NEUTRAL_600
   },
   form: {
     background: {
@@ -189,6 +196,17 @@ var colors = _extends({}, defaultTheme.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
   },
@@ -198,7 +216,7 @@ var colors = _extends({}, defaultTheme.colors, {
   }
 }, datavizPalette);
 
-var darkTheme = _extends({}, defaultTheme, {
+var darkTheme = _extends({}, lightTheme, {
   colors: colors,
   shadows: shadows,
   mode: MODE

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 = "default-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: {
@@ -38,7 +39,10 @@ var colors = _extends({
         red: red.background,
         neutral: neutral.background
       },
-      selected: COLORS.COLOR_NEUTRAL_800
+      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,
@@ -163,7 +167,10 @@ var colors = _extends({
     error: red.foreground,
     danger: red.foreground,
     info: blue.foreground,
-    opportunity: purple.foreground
+    opportunity: purple.foreground,
+    positive_sentiment: COLORS.COLOR_BLUE_700,
+    negative_sentiment: COLORS.COLOR_RED_600,
+    neutral_sentiment: COLORS.COLOR_NEUTRAL_600
   },
   form: {
     background: {
@@ -187,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/lib/themes/utils/interact.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "10.0.0-dar97-beta.2",
+  "version": "10.0.2-menuCSS.0",
   "license": "MIT",
   "files": [
     "__flow__",