@sproutsocial/racine 10.0.0 → 10.0.3-menuhotfix.0

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

@@ -388,7 +388,6 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
 .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;
-  margin: 8px;
   padding: 8px;
 }
 
@@ -686,7 +685,6 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
 .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;
-  margin: 8px;
   padding: 8px;
 }
 

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

@@ -22,7 +22,6 @@ exports[`Menu AsMenu should match snapshot 1`] = `
 .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;
 }
 

package/__flow__/Menu/index.js

@@ -287,7 +287,7 @@ export const MenuGroup = ({
         </Text>
       </Box>
     )}
-    <Box {...props} m={300} p={300} role="group">
+    <Box {...props} p={300} role="group">
       {children}
     </Box>
   </>

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/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/Menu/index.js

@@ -278,7 +278,6 @@ var MenuGroup = function MenuGroup(_ref2) {
     color: "text.headline",
     _css: isDisabled && _mixins.disabled
   }, title)), /*#__PURE__*/React.createElement(_Box.default, _extends({}, props, {
-    m: 300,
     p: 300,
     role: "group"
   }), children));

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/Menu/index.js

@@ -245,7 +245,6 @@ export var MenuGroup = function MenuGroup(_ref2) {
     color: "text.headline",
     _css: isDisabled && disabled
   }, title)), /*#__PURE__*/React.createElement(Box, _extends({}, props, {
-    m: 300,
     p: 300,
     role: "group"
   }), children));

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.3-menuhotfix.0",
   "license": "MIT",
   "files": [
     "__flow__",