@sproutsocial/racine 9.1.0-token-beta.0 → 10.0.0--dar97-beta.0

package/__flow__/types/theme.flow.js

@@ -10,9 +10,9 @@ import {
   space,
   easing,
   duration,
-} from "../themes/default/theme";
+} from "../themes/light/theme";
 import type { TypeColors } from "./theme.colors.flow.js";
-import type { TypeFontFamilyString } from "../themes/default/theme";
+import type { TypeFontFamilyString } from "../themes/light/theme";
 
 export type TypeBreakpoint = typeof breakpoints;
 export type TypeTypography = typeof typography;

package/__flow__/utils/mixins.js

@@ -1,6 +1,6 @@
 // @flow strict-local
 import { css } from "styled-components";
-import theme from "../themes/default/theme";
+import theme from "../themes/light/theme";
 import { transparentize } from "polished";
 
 export const svgToDataURL = (svgStr: string) => {

package/__flow__/utils/responsiveProps/index.js

@@ -1,5 +1,5 @@
 // @flow
-import theme from "../../themes/default/theme";
+import theme from "../../themes/light/theme";
 
 import type { TypeResponsive } from "../../types/system-props.flow";
 

package/commonjs/Menu/index.js

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

package/commonjs/Menu/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.MenuItemsContainer = exports.MenuGroupContainer = exports.MenuItemContainer = void 0;
+exports.MenuItemsContainer = exports.MenuItemContainer = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -56,21 +56,8 @@ var MenuItemContainer = (0, _styledComponents.default)(_Box.default).withConfig(
   return props.disabled && _mixins.disabled;
 });
 exports.MenuItemContainer = MenuItemContainer;
-var MenuGroupContainer = (0, _styledComponents.default)(_Box.default).withConfig({
-  displayName: "styles__MenuGroupContainer",
-  componentId: "fjvae4-1"
-})(["", ";"], function (props) {
-  return props.appearance === "flush" ? (0, _styledComponents.css)(["margin:0 -", ";"], function (props) {
-    return props.theme.space[300];
-  }) : (0, _styledComponents.css)(["padding:", ";"], function (props) {
-    return props.theme.space[300];
-  });
-});
-exports.MenuGroupContainer = MenuGroupContainer;
 var MenuItemsContainer = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MenuItemsContainer",
-  componentId: "fjvae4-2"
+  componentId: "fjvae4-1"
 })(["list-style-type:none;outline:0;"]);
-exports.MenuItemsContainer = MenuItemsContainer;
-var _default = MenuGroupContainer;
-exports.default = _default;
+exports.MenuItemsContainer = MenuItemsContainer;

package/commonjs/ThemeProvider/index.js

@@ -7,7 +7,7 @@ var React = _interopRequireWildcard(require("react"));
 
 var _styledComponents = require("styled-components");
 
-var _theme = _interopRequireDefault(require("../themes/default/theme"));
+var _theme = _interopRequireDefault(require("../themes/light/theme"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/commonjs/index.js

@@ -15,7 +15,7 @@ exports.useSelect = _hooks.useSelect;
 exports.useMultiselect = _hooks.useMultiselect;
 exports.useTextContent = _hooks.useTextContent;
 
-var _theme = _interopRequireDefault(require("./themes/default/theme"));
+var _theme = _interopRequireDefault(require("./themes/light/theme"));
 
 exports.theme = _theme.default;
 

package/commonjs/themes/dark/theme.js

@@ -7,7 +7,7 @@ var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
 
 var _seedsDepth = _interopRequireDefault(require("@sproutsocial/seeds-depth"));
 
-var _theme = _interopRequireDefault(require("../default/theme"));
+var _theme = _interopRequireDefault(require("../light/theme"));
 
 var _datavizPalette = require("./dataviz-palette");
 

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

@@ -1,5 +1,5 @@
 "use strict";
 
-var _literalColors = _interopRequireDefault(require("../themes/default/literal-colors"));
+var _literalColors = _interopRequireDefault(require("../themes/light/literal-colors"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/commonjs/types/theme.flow.js

@@ -1,3 +1,3 @@
 "use strict";
 
-var _theme = require("../themes/default/theme");
+var _theme = require("../themes/light/theme");

package/commonjs/utils/mixins.js

@@ -5,7 +5,7 @@ exports.disabled = exports.pill = exports.focusRing = exports.visuallyHidden = e
 
 var _styledComponents = require("styled-components");
 
-var _theme = _interopRequireDefault(require("../themes/default/theme"));
+var _theme = _interopRequireDefault(require("../themes/light/theme"));
 
 var _polished = require("polished");
 

package/commonjs/utils/responsiveProps/index.js

@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports.normalizeResponsiveProp = void 0;
 
-var _theme = _interopRequireDefault(require("../../themes/default/theme"));
+var _theme = _interopRequireDefault(require("../../themes/light/theme"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/dist/themes/dark/_themes.scss

@@ -0,0 +1,132 @@
+// Inspired by https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
+// 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.
+@import "../../../dist/themes/dark/dark.scss";
+
+// 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.
+$theme = map-get($dark, 'default');
+
+// MIXIN
+// CSS properties that are theme-dependent must be wrapped in this mixin
+@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;
+  }
+}
+
+// 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);
+}
+
+// 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));
+}
+
+// @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));
+}
+
+// @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));
+}
+
+// @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));
+}
+
+// @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));
+}
+
+// @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));
+}
+
+// @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));
+}
+
+// @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));
+}
+
+// @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));
+}
+
+// @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));
+}
+
+// UTILITIES
+// Helper functions that power the functions above. Not relevant to the theme.
+// If you import this file with @use, these functions will be excluded because they are private.
+
+// Via https://stackoverflow.com/a/42295154
+// 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
+  $index : str-index($string, $separator);
+  // loop through string
+  @while $index != null {
+    // get the substring from the first character to the separator
+    $item: str-slice($string, 1, $index - 1);
+    // push item to array
+    $split-arr: append($split-arr, $item);
+    // remove item and separator from string
+    $string: str-slice($string, $index + 1);
+    // find new index of separator
+    $index : str-index($string, $separator);
+  }
+  // add the remaining string to list (the last item)
+  $split-arr: append($split-arr, $string);
+
+  @return $split-arr;
+}
+
+// Adapted from https://css-tricks.com/snippets/sass/deep-getset-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);
+  }
+  @return $map;
+}

package/dist/themes/{dark.scss → dark/dark.scss}

@@ -1,9 +1,9 @@
 $dark: (
   __esModule: true,
   shadows: (
-    low: 0px 2px 4px rgba(39,51,51,.24) #040404FF,
-    medium: 0px 8px 16px rgba(39,51,51,.24) #040404FF,
-    high: 0px 16px 32px rgba(39,51,51,.24) #040404FF
+    low: 0px 2px 4px #040404FF,
+    medium: 0px 8px 16px #040404FF,
+    high: 0px 16px 32px #040404FF
   ),
   default: (
     utils: (
@@ -582,9 +582,9 @@ $dark: (
       500: 1px
     ),
     shadows: (
-      low: 0px 2px 4px rgba(39,51,51,.24) #040404FF,
-      medium: 0px 8px 16px rgba(39,51,51,.24) #040404FF,
-      high: 0px 16px 32px rgba(39,51,51,.24) #040404FF
+      low: 0px 2px 4px #040404FF,
+      medium: 0px 8px 16px #040404FF,
+      high: 0px 16px 32px #040404FF
     ),
     easing: (
       ease_in: cubic-bezier(.4, 0, .7, .2),

package/{__flow__/themes → dist/themes/light}/_themes.scss

@@ -3,29 +3,23 @@
 
 // SET-UP
 // These files are auto-generated based on JS theme files, ensuring our SCSS theme variables stay in sync.
-@import "../../dist/themes/default.scss";
-@import "../../dist/themes/dark.scss";
+@import "../../../dist/themes/light/light.scss";
 
 // 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")
-);
+$theme = map-get($light, 'default');
 
 // MIXIN
 // CSS properties that are theme-dependent must be wrapped in this mixin
 @mixin themed() {
-  @each $theme, $map in $themes {
-    .theme--#{$theme} & {
+    & {
       $theme-map: () !global;
-      @each $key, $submap in $map {
-        $value: map-get(map-get($themes, $theme), "#{$key}");
+      @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/{default.scss → light/light.scss}

@@ -1,4 +1,4 @@
-$default: (
+$light: (
   __esModule: true,
   breakpoints: (900px, 1200px, 1500px, 1800px),
   typography: (
@@ -85,9 +85,9 @@ $default: (
     500: 1px
   ),
   shadows: (
-    low: 0px 2px 4px rgba(39,51,51,.24) #2733333D,
-    medium: 0px 8px 16px rgba(39,51,51,.24) #2733333D,
-    high: 0px 16px 32px rgba(39,51,51,.24) #2733333D
+    low: 0px 2px 4px #2733333D,
+    medium: 0px 8px 16px #2733333D,
+    high: 0px 16px 32px #2733333D
   ),
   easing: (
     ease_in: cubic-bezier(.4, 0, .7, .2),
@@ -673,9 +673,9 @@ $default: (
       500: 1px
     ),
     shadows: (
-      low: 0px 2px 4px rgba(39,51,51,.24) #2733333D,
-      medium: 0px 8px 16px rgba(39,51,51,.24) #2733333D,
-      high: 0px 16px 32px rgba(39,51,51,.24) #2733333D
+      low: 0px 2px 4px #2733333D,
+      medium: 0px 8px 16px #2733333D,
+      high: 0px 16px 32px #2733333D
     ),
     easing: (
       ease_in: cubic-bezier(.4, 0, .7, .2),

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

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import * as React from "react";
 import { ThemeProvider as BaseThemeProvider } from "styled-components";
-import theme from "../themes/default/theme";
+import theme from "../themes/light/theme";
 
 var ThemeProvider = function ThemeProvider(props) {
   return /*#__PURE__*/React.createElement(BaseThemeProvider, _extends({}, props, {

package/lib/index.js

@@ -1,6 +1,6 @@
 export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
 export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
-export { default as theme } from "./themes/default/theme";
+export { default as theme } from "./themes/light/theme";
 export { default as darkTheme } from "./themes/dark/theme";
 export { default as Icon } from "./Icon"; // DEPRECATED: Alert has been renamed to Banner
 

package/lib/themes/dark/theme.js

@@ -2,7 +2,7 @@ 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 "../default/theme";
+import defaultTheme from "../light/theme";
 import { datavizPalette } from "./dataviz-palette";
 import { green, blue, purple, yellow, orange, red, neutral } from "./decorative-palettes";
 import interact from "../utils/interact";

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

@@ -1 +1 @@
-import literalColors from "../themes/default/literal-colors";
+import literalColors from "../themes/light/literal-colors";

package/lib/types/theme.flow.js

@@ -1 +1 @@
-import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from "../themes/default/theme";
+import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from "../themes/light/theme";

package/lib/utils/mixins.js

@@ -1,5 +1,5 @@
 import { css } from "styled-components";
-import theme from "../themes/default/theme";
+import theme from "../themes/light/theme";
 import { transparentize } from "polished";
 export var svgToDataURL = function svgToDataURL(svgStr) {
   var encoded = encodeURIComponent(svgStr).replace(/'/g, "%27").replace(/"/g, "%22");

package/lib/utils/responsiveProps/index.js

@@ -1,4 +1,4 @@
-import theme from "../../themes/default/theme";
+import theme from "../../themes/light/theme";
 var breakpoints = theme.breakpoints;
 var LENGTH = breakpoints.length + 1;
 export var normalizeResponsiveProp = function normalizeResponsiveProp(value) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "9.1.0-token-beta.0",
+  "version": "10.0.0--dar97-beta.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -103,7 +103,7 @@
     "@storybook/addon-storysource": "^6.1.11",
     "@storybook/addon-viewport": "^6.1.11",
     "@storybook/addons": "^6.1.11",
-    "@storybook/react": "^6.1.11",
+    "@storybook/react": "^6.4.19",
     "@storybook/theming": "^6.1.11",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^13.0.0",

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

@@ -1,80 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Modal should render properly 1`] = `
-.c0__Overlay {
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  background-color: rgba(22,32,32,0.68);
-  opacity: 0;
-  will-change: opacity;
-  -webkit-transition: opacity .3s cubic-bezier(.4,0,.2,1);
-  transition: opacity .3s cubic-bezier(.4,0,.2,1);
-  z-index: 6;
-}
-
-.c0__Overlay.ReactModal__Overlay--after-open {
-  opacity: 1;
-}
-
-.c0__Overlay.ReactModal__Overlay--before-close {
-  opacity: 0;
-}
-
-.c0__Content {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  background: #FFFFFF;
-  border-radius: 6px;
-  box-shadow: 0px 8px 16px #2733333D;
-  -webkit-filter: blur(0);
-  filter: blur(0);
-  color: #364141;
-  outline: none;
-  max-width: calc(100vw - 64px);
-  max-height: calc(100vh - 64px);
-  width: 800px;
-  background-color: #c1c1f7;
-}
-
-@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none) {
-  .c0__Content {
-    height: calc(100vh - 64px);
-  }
-}
-
-<div
-  class="ReactModal__Overlay ReactModal__Overlay--after-open styles__Container-sc-9lom4g-0__Overlay c0 c0__Overlay"
->
-  <div
-    aria-label="Label"
-    aria-modal="true"
-    class="ReactModal__Content ReactModal__Content--after-open styles__Container-sc-9lom4g-0__Content c0 c0__Content"
-    data-qa-modal=""
-    data-qa-modal-isopen="true"
-    role="dialog"
-    tabindex="-1"
-  >
-    ajdsfljasdlfjlasdjf
-  </div>
-</div>
-`;