@sproutsocial/racine 8.8.0-dar35-beta.1 → 9.0.1

package/commonjs/themes/default/theme.js

@@ -23,12 +23,15 @@ var _seedsMotion = _interopRequireDefault(require("@sproutsocial/seeds-motion"))
 
 var _seedsBorder = _interopRequireDefault(require("@sproutsocial/seeds-border"));
 
+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 breakpoints = ["900px", "1200px", "1500px", "1800px"];
 exports.breakpoints = breakpoints;
+var MODE = "default-light";
 
 var colors = _extends({
   app: {
@@ -203,6 +206,9 @@ var colors = _extends({
       selected: _seedsColor.default.COLOR_NEUTRAL_800
     }
   },
+  elevation: {
+    base: _seedsColor.default.COLOR_NEUTRAL_900 + "3D"
+  },
   network: {
     twitter: _seedsNetworkcolor.default.NETWORK_COLOR_TWITTER,
     twitter_like: _seedsNetworkcolor.default.NETWORK_COLOR_TWITTER_LIKE,
@@ -291,10 +297,9 @@ var borderWidths = {
 };
 exports.borderWidths = borderWidths;
 var shadows = {
-  "100": _seedsDepth.default.ELEVATION_LEVEL_100,
-  "200": _seedsDepth.default.ELEVATION_LEVEL_200,
-  "300": _seedsDepth.default.ELEVATION_LEVEL_300,
-  "400": _seedsDepth.default.ELEVATION_LEVEL_400
+  low: _seedsDepth.default.ELEVATION_LEVEL_100 + " " + _seedsColor.default.COLOR_NEUTRAL_900 + "3D",
+  medium: _seedsDepth.default.ELEVATION_LEVEL_300 + " " + _seedsColor.default.COLOR_NEUTRAL_900 + "3D",
+  high: _seedsDepth.default.ELEVATION_LEVEL_400 + " " + _seedsColor.default.COLOR_NEUTRAL_900 + "3D"
 };
 exports.shadows = shadows;
 var easing = {
@@ -310,6 +315,9 @@ var duration = {
 };
 exports.duration = duration;
 var theme = {
+  utils: {
+    interact: (0, _interact.default)(MODE)
+  },
   breakpoints: breakpoints,
   colors: colors,
   typography: _extends({}, typography, {
@@ -330,11 +338,10 @@ var theme = {
   }),
   borders: borders,
   borderWidths: borderWidths,
-  shadows: _extends({}, shadows, {
-    shadows: shadows
-  }),
+  shadows: shadows,
   easing: easing,
-  duration: duration
+  duration: duration,
+  mode: MODE
 };
 var _default = theme;
 exports.default = _default;

package/commonjs/themes/utils/interact.js

@@ -0,0 +1,19 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _polished = require("polished");
+
+var interact = function interact(mode) {
+  return function (themeValue) {
+    if (mode === "default-dark") {
+      return (0, _polished.lighten)(0.2, themeValue);
+    } else {
+      return (0, _polished.darken)(0.2, themeValue);
+    }
+  };
+};
+
+var _default = interact;
+exports.default = _default;

package/dist/themes/_themes.scss

@@ -9,8 +9,8 @@
 // In the JS theme files, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.
 $themes: (
-        light: map-get($default, "default"),
-        dark: map-get($dark, "default")
+   light: map-get($default, "default"),
+   dark: map-get($dark, "default")
 );
 
 // MIXIN
@@ -33,68 +33,68 @@ $themes: (
 // 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: _string-split($key, ".");
+  $keys: _str-split($key, ".");
   @return _map-deep-get($theme-map, $keys);
 }
 
-// These functions are convenience methods to get theme values for subsets of the theme.
+// 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: _string-split($key, ".");
+  $keys: _str-split($key, ".");
   @return _map-deep-get($theme-map, 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: _string-split($key, ".");
+  $keys: _str-split($key, ".");
   @return _map-deep-get($theme-map, 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: _string-split($key, ".");
+  $keys: _str-split($key, ".");
   @return _map-deep-get($theme-map, 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: _string-split($key, ".");
+  $keys: _str-split($key, ".");
   @return _map-deep-get($theme-map, 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: _string-split($key, ".");
+  $keys: _str-split($key, ".");
   @return _map-deep-get($theme-map, 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: _string-split($key, ".");
+  $keys: _str-split($key, ".");
   @return _map-deep-get($theme-map, 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: _string-split($key, ".");
+  $keys: _str-split($key, ".");
   @return _map-deep-get($theme-map, 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: _string-split($key, ".");
+  $keys: _str-split($key, ".");
   @return _map-deep-get($theme-map, 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: _string-split($key, ".");
+  $keys: _str-split($key, ".");
   @return _map-deep-get($theme-map, 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: _string-split($key, ".");
+  $keys: _str-split($key, ".");
   @return _map-deep-get($theme-map, join("duration", $keys));
 }
 
@@ -103,8 +103,9 @@ $themes: (
 // If you import this file with @use, these functions will be excluded because they are private.
 
 // Via https://stackoverflow.com/a/42295154
-// Only works with a single-character separator
-@function _string-split($string, $separator) {
+// Used to split period-separated object keys, e.g. "colors.text.body" => ["colors", "text", "body"]
+// Only works with a single-character separator.
+@function _str-split($string, $separator) {
   // empty array/list
   $split-arr: ();
   // first index of separator in string
@@ -127,7 +128,8 @@ $themes: (
 }
 
 // Adapted from https://css-tricks.com/snippets/sass/deep-getset-maps/
-// Iterates over a list of keys to read multi-level maps
+// Iterates over a list of keys to read multi-level maps.
+// e.g., _map-deep-get((colors: (text: (body: "#364141"))), ["colors", "text", "body"]) => "#364141"
 @function _map-deep-get($map, $keys) {
   @each $key in $keys {
     $map: map-get($map, $key);

package/dist/themes/dark.scss

@@ -1,6 +1,14 @@
 $dark: (
   __esModule: true,
+  shadows: (
+    low: 0px 2px 4px #040404FF,
+    medium: 0px 8px 16px #040404FF,
+    high: 0px 16px 32px #040404FF
+  ),
   default: (
+    utils: (
+      
+    ),
     breakpoints: (900px, 1200px, 1500px, 1800px),
     colors: (
       app: (
@@ -175,6 +183,9 @@ $dark: (
           selected: #FFFFFF
         )
       ),
+      elevation: (
+        base: #040404
+      ),
       network: (
         twitter: #1da1f2,
         twitter_like: #e0245e,
@@ -401,6 +412,9 @@ $dark: (
         18: #ff7f6e,
         19: #c2f2bd,
         20: #ffe99a
+      ),
+      utils: (
+        
       )
     ),
     typography: (
@@ -568,16 +582,9 @@ $dark: (
       500: 1px
     ),
     shadows: (
-      100: 0px 2px 4px rgba(39,51,51,.24),
-      200: 0px 4px 8px rgba(39,51,51,.24),
-      300: 0px 8px 16px rgba(39,51,51,.24),
-      400: 0px 16px 32px rgba(39,51,51,.24),
-      shadows: (
-        100: 0px 2px 4px rgba(39,51,51,.24),
-        200: 0px 4px 8px rgba(39,51,51,.24),
-        300: 0px 8px 16px rgba(39,51,51,.24),
-        400: 0px 16px 32px rgba(39,51,51,.24)
-      )
+      low: 0px 2px 4px #040404FF,
+      medium: 0px 8px 16px #040404FF,
+      high: 0px 16px 32px #040404FF
     ),
     easing: (
       ease_in: cubic-bezier(.4, 0, .7, .2),
@@ -589,6 +596,6 @@ $dark: (
       medium: .3s,
       slow: .6s
     ),
-    mode: dark
+    mode: default-dark
   )
 );

package/dist/themes/default.scss

@@ -85,10 +85,9 @@ $default: (
     500: 1px
   ),
   shadows: (
-    100: 0px 2px 4px rgba(39,51,51,.24),
-    200: 0px 4px 8px rgba(39,51,51,.24),
-    300: 0px 8px 16px rgba(39,51,51,.24),
-    400: 0px 16px 32px rgba(39,51,51,.24)
+    low: 0px 2px 4px #2733333D,
+    medium: 0px 8px 16px #2733333D,
+    high: 0px 16px 32px #2733333D
   ),
   easing: (
     ease_in: cubic-bezier(.4, 0, .7, .2),
@@ -101,6 +100,9 @@ $default: (
     slow: .6s
   ),
   default: (
+    utils: (
+      
+    ),
     breakpoints: (900px, 1200px, 1500px, 1800px),
     colors: (
       app: (
@@ -275,6 +277,9 @@ $default: (
           selected: #364141
         )
       ),
+      elevation: (
+        base: #2733333D
+      ),
       network: (
         twitter: #1da1f2,
         twitter_like: #e0245e,
@@ -668,16 +673,9 @@ $default: (
       500: 1px
     ),
     shadows: (
-      100: 0px 2px 4px rgba(39,51,51,.24),
-      200: 0px 4px 8px rgba(39,51,51,.24),
-      300: 0px 8px 16px rgba(39,51,51,.24),
-      400: 0px 16px 32px rgba(39,51,51,.24),
-      shadows: (
-        100: 0px 2px 4px rgba(39,51,51,.24),
-        200: 0px 4px 8px rgba(39,51,51,.24),
-        300: 0px 8px 16px rgba(39,51,51,.24),
-        400: 0px 16px 32px rgba(39,51,51,.24)
-      )
+      low: 0px 2px 4px #2733333D,
+      medium: 0px 8px 16px #2733333D,
+      high: 0px 16px 32px #2733333D
     ),
     easing: (
       ease_in: cubic-bezier(.4, 0, .7, .2),
@@ -688,6 +686,7 @@ $default: (
       fast: .15s,
       medium: .3s,
       slow: .6s
-    )
+    ),
+    mode: default-light
   )
 );

package/lib/Button/styles.js

@@ -32,7 +32,7 @@ var Container = styled.button.withConfig({
 }, function (props) {
   return props.theme.colors.button[props.appearance].background.hover;
 }, function (props) {
-  return props.appearance === "placeholder" ? props.theme.shadows[100] : "none";
+  return props.appearance === "placeholder" ? props.theme.shadows.low : "none";
 }, function (props) {
   return props.theme.colors.button[props.appearance].text.hover;
 }, function (props) {

package/lib/Card/styles.js

@@ -9,7 +9,7 @@ var Container = styled(Box).withConfig({
 }, function (props) {
   return props.theme.radii[500];
 }, function (props) {
-  return props.theme.shadows[100];
+  return props.theme.shadows.low;
 }, function (props) {
   return props.theme.duration.medium;
 }, function (props) {

package/lib/Drawer/styles.js

@@ -13,7 +13,7 @@ var Container = styled.div.withConfig({
 }, function (props) {
   return props.theme.colors.container.background.base;
 }, function (props) {
-  return props.theme.shadows[400];
+  return props.theme.shadows.high;
 }, function (props) {
   return css(["", ":", "px;"], props.direction, props.offset);
 }, COMMON);

package/lib/KeyboardKey/styles.js

@@ -12,7 +12,7 @@ var Container = styled.div.withConfig({
 }, function (props) {
   return props.theme.radii[500];
 }, function (props) {
-  return props.theme.shadows[100];
+  return props.theme.shadows.low;
 }, function (props) {
   return props.theme.space[200];
 }, COMMON);

package/lib/Menu/index.js

@@ -8,7 +8,7 @@ import * as React from "react";
 import styled from "styled-components";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import uniqueId from "lodash.uniqueid";
-import { MenuGroupContainer, MenuItemContainer, MenuItemsContainer } from "./styles";
+import { MenuItemContainer, MenuItemsContainer } from "./styles";
 import { MENU_ITEM_ROLES, MENU_ROLES } from "./constants";
 import Box from "../Box";
 import Button from "../Button";
@@ -244,7 +244,9 @@ export var MenuGroup = function MenuGroup(_ref2) {
     mt: 350,
     color: "text.headline",
     _css: isDisabled && disabled
-  }, title)), /*#__PURE__*/React.createElement(MenuGroupContainer, _extends({}, props, {
+  }, title)), /*#__PURE__*/React.createElement(Box, _extends({}, props, {
+    m: 300,
+    p: 300,
     role: "group"
   }), children));
 };

package/lib/Menu/styles.js

@@ -41,18 +41,7 @@ export var MenuItemContainer = styled(Box).withConfig({
 }, function (props) {
   return props.disabled && disabled;
 });
-export var MenuGroupContainer = styled(Box).withConfig({
-  displayName: "styles__MenuGroupContainer",
-  componentId: "fjvae4-1"
-})(["", ";"], function (props) {
-  return props.appearance === "flush" ? css(["margin:0 -", ";"], function (props) {
-    return props.theme.space[300];
-  }) : css(["padding:", ";"], function (props) {
-    return props.theme.space[300];
-  });
-});
 export var MenuItemsContainer = styled(Box).withConfig({
   displayName: "styles__MenuItemsContainer",
-  componentId: "fjvae4-2"
-})(["list-style-type:none;outline:0;"]);
-export default MenuGroupContainer;
+  componentId: "fjvae4-1"
+})(["list-style-type:none;outline:0;"]);

package/lib/Modal/styles.js

@@ -53,7 +53,7 @@ export var Container = styled(ReactModalAdapter).withConfig({
 }, function (props) {
   return props.theme.radii[500];
 }, function (props) {
-  return props.theme.shadows[300];
+  return props.theme.shadows.medium;
 }, function (props) {
   return props.theme.colors.text.body;
 }, BODY_PADDING, BODY_PADDING, BODY_PADDING, width, COMMON);

package/lib/Popout/index.js

@@ -267,7 +267,7 @@ Popout.Content = function (_ref4) {
     border: 500,
     borderColor: "container.border.base",
     borderRadius: "outer",
-    boxShadow: 300,
+    boxShadow: "medium",
     p: 400,
     m: 300
   }, rest), children);

package/lib/Token/index.js

@@ -18,14 +18,17 @@ var Token = function Token(_ref) {
       valid = _ref$valid === void 0 ? true : _ref$valid,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "closeable", "onClick", "qa", "valid", "disabled"]);
+      _ref$palette = _ref.palette,
+      palette = _ref$palette === void 0 ? "neutral" : _ref$palette,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "closeable", "onClick", "qa", "valid", "disabled", "palette"]);
 
   var textContainer = useTextContent("");
   return /*#__PURE__*/React.createElement(Container, _extends({
     ref: textContainer,
     valid: valid,
-    as: closeable || onClick ? "button" : "div",
+    palette: palette,
     type: closeable || onClick ? "button" : undefined,
+    as: closeable || onClick ? "button" : "div",
     closeable: closeable || onClick,
     disabled: disabled,
     onClick: onClick,

package/lib/Token/styles.js

@@ -4,55 +4,24 @@ import { focusRing } from "../utils/mixins";
 var Container = styled.button.withConfig({
   displayName: "styles__Container",
   componentId: "nyn5zy-0"
-})(["font-family:", ";", ";position:relative;display:inline-block;padding:", " ", ";margin:0;color:", ";background:", ";border:1px solid ", ";font-weight:", ";line-height:1;vertical-align:middle;border-radius:", ";outline:none;transition:all ", " ", ";&:focus{", "}", " ", " ", " ", ""], function (props) {
-  return props.theme.fontFamily;
-}, function (props) {
-  return props.theme.typography[200];
-}, function (props) {
-  return props.theme.space[200];
-}, function (props) {
-  return props.theme.space[300];
-}, function (props) {
-  return props.theme.colors.text.body;
-}, function (props) {
-  return props.theme.colors.container.background.base;
-}, function (props) {
-  return props.theme.colors.container.border.base;
-}, function (props) {
-  return props.theme.fontWeights.normal;
-}, function (props) {
-  return props.theme.radii[500];
-}, function (props) {
-  return props.theme.duration.fast;
-}, function (props) {
-  return props.theme.easing.ease_inout;
-}, focusRing, function (props) {
-  return props.closeable && css(["cursor:pointer;&:hover,&:active{color:", ";border:1px solid ", ";background-color:", ";}"], function (props) {
-    return props.theme.colors.text.body;
-  }, function (props) {
-    return props.theme.colors.container.border.decorative.neutral;
-  }, function (props) {
-    return props.theme.colors.container.background.decorative.neutral;
-  });
-}, function (props) {
-  return props.disabled && css(["opacity:0.4;cursor:not-allowed;&:hover,&:active{background:", ";border:1px solid ", ";}"], function (props) {
-    return props.theme.colors.container.background.base;
-  }, function (props) {
-    return props.theme.colors.container.border.base;
-  });
-}, function (props) {
-  return !props.valid && css(["color:", ";border-color:", ";background:", ";&:hover{color:", ";border:1px solid ", ";background-color:", ";}"], function (props) {
-    return props.theme.colors.text.body;
-  }, function (props) {
-    return props.theme.colors.container.border.error;
-  }, function (props) {
-    return props.theme.colors.container.background.error;
-  }, function (props) {
-    return props.theme.colors.text.body;
-  }, function (props) {
-    return props.theme.colors.container.border.error;
-  }, function (props) {
-    return props.theme.colors.container.background.error;
-  });
+})(["position:relative;display:inline-block;margin:0;line-height:1;vertical-align:middle;outline:none;", " &:focus{", "}", " ", " ", " ", " ", ""], function (_ref) {
+  var theme = _ref.theme;
+  return css(["", " font-family:", ";font-weight:", ";border:1px solid ", ";border-radius:", ";color:", ";background:", ";padding:", " ", ";transition:all ", " ", ";"], theme.typography[200], theme.fontFamily, theme.fontWeights.normal, theme.colors.container.border.base, theme.radii[500], theme.colors.text.body, theme.colors.container.background.base, theme.space[200], theme.space[300], theme.duration.fast, theme.easing.ease_inout);
+}, focusRing, function (_ref2) {
+  var theme = _ref2.theme,
+      palette = _ref2.palette;
+  return palette === "blue" && css(["color:", ";background:", ";border:1px solid ", ";&:hover,&:active{cursor:pointer;box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.body, theme.colors.container.background.decorative.blue, theme.colors.container.border.decorative.blue, theme.shadows.low, theme.utils.interact(theme.colors.container.border.decorative.blue));
+}, function (_ref3) {
+  var closeable = _ref3.closeable,
+      theme = _ref3.theme;
+  return closeable && css(["cursor:pointer;&:hover,&:active{box-shadow:", ";border:1px solid ", ";}"], theme.shadows.low, theme.utils.interact(theme.colors.container.border.base));
+}, function (_ref4) {
+  var disabled = _ref4.disabled,
+      theme = _ref4.theme;
+  return disabled && css(["opacity:0.4;cursor:not-allowed;&:hover,&:active{box-shadow:none;border:1px solid ", ";}"], theme.colors.container.border.base);
+}, function (_ref5) {
+  var valid = _ref5.valid,
+      theme = _ref5.theme;
+  return !valid && css(["color:", ";background:", ";border:1px solid ", ";&:hover{box-shadow:", ";border:1px solid ", ";}"], theme.colors.text.error, theme.colors.container.background.error, theme.colors.container.border.error, theme.shadows.low, theme.utils.interact(theme.colors.container.border.error));
 }, COMMON);
 export default Container;

package/lib/Tooltip/index.js

@@ -118,7 +118,7 @@ var Content = function Content(_ref2) {
     m: 200,
     color: "text.body",
     bg: "container.background.base",
-    boxShadow: 300,
+    boxShadow: "medium",
     border: 500,
     borderColor: "container.border.base" // $FlowIssue - upgrade v0.112.0