@sproutsocial/racine 9.1.1-theme-extension.1 → 10.0.0--dar97-beta.0

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.1-theme-extension.1",
+  "version": "10.0.0--dar97-beta.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -64,7 +64,6 @@
   "dependencies": {
     "@styled-system/theme-get": "^5.1.2",
     "classnames": "^2.2.6",
-    "deepmerge": "^4.2.2",
     "lodash.curry": "^4.1.1",
     "lodash.uniqueid": "^4.0.1",
     "lru-memoize": "^1.1.0",
@@ -93,7 +92,7 @@
     "@reach/component-component": "^0.1.3",
     "@sproutsocial/seeds-border": "^1.1.0",
     "@sproutsocial/seeds-color": "^1.5.3",
-    "@sproutsocial/seeds-depth": "^1.1.1",
+    "@sproutsocial/seeds-depth": "^3.0.0",
     "@sproutsocial/seeds-motion": "^1.2.0",
     "@sproutsocial/seeds-networkcolor": "^2.9.0",
     "@sproutsocial/seeds-space": "^0.4.7",
@@ -104,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",
@@ -141,6 +140,7 @@
     "jest-dom": "^3.5.0",
     "jest-styled-components": "7.0.0-beta.1",
     "jscodeshift": "^0.6.4",
+    "json-to-scss": "^1.6.2",
     "lint-staged": "^10.2.11",
     "moment": "^2.29.1",
     "npm-run-all": "^4.1.2",

package/__flow__/CustomThemeProvider/index.js

@@ -1,17 +0,0 @@
-// @flow strict-local
-import * as React from "react";
-import { ThemeProvider } from "styled-components";
-
-import typeof { default as TypeTheme } from "../themes/default/theme";
-
-type TypeProps = {|
-  // Not sure how to type acceptance of a custom function to override theme
-  theme?: TypeTheme | ((customTheme: TypeTheme) => ?TypeTheme),
-  children: React.Node,
-|};
-
-const CustomThemeProvider = (props: TypeProps) => (
-  <ThemeProvider theme={props.theme} {...props} />
-);
-
-export default CustomThemeProvider;

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 rgba(39,51,51,.24);
-  -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>
-`;

package/__flow__/themes/sprout/theme.js

@@ -1,22 +0,0 @@
-// @flow strict-local
-import theme from "../default/theme";
-import { COLOR_RED_800 } from "@sproutsocial/seeds-color";
-
-const sproutTheme = {
-  container: {
-    background: {
-      error: {
-        hover: COLOR_RED_800,
-      },
-    },
-  },
-  button: {
-    primary: {
-      background: {
-        base: "purple",
-      },
-    },
-  },
-};
-
-export default sproutTheme;

package/__flow__/utils/extendTheme.js

@@ -1,17 +0,0 @@
-//@flow strict-local
-import * as merge from "deepmerge";
-
-export function extendColorTheme(
-  baseTheme: { colors: {} },
-  extension: { [key: string]: string | {} }
-) {
-  const newColorTheme = merge(baseTheme.colors, extension);
-  const newTheme = {
-    ...baseTheme,
-    colors: {
-      ...newColorTheme,
-    },
-  };
-
-  return newTheme;
-}

package/commonjs/CustomThemeProvider/index.js

@@ -1,23 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _styledComponents = require("styled-components");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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 CustomThemeProvider = function CustomThemeProvider(props) {
-  return /*#__PURE__*/React.createElement(_styledComponents.ThemeProvider, _extends({
-    theme: props.theme
-  }, props));
-};
-
-var _default = CustomThemeProvider;
-exports.default = _default;

package/commonjs/themes/sprout/theme.js

@@ -1,29 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _theme = _interopRequireDefault(require("../default/theme"));
-
-var _seedsColor = require("@sproutsocial/seeds-color");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var sproutTheme = {
-  container: {
-    background: {
-      error: {
-        hover: _seedsColor.COLOR_RED_800
-      }
-    }
-  },
-  button: {
-    primary: {
-      background: {
-        base: "purple"
-      }
-    }
-  }
-};
-var _default = sproutTheme;
-exports.default = _default;

package/commonjs/utils/extendTheme.js

@@ -1,22 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.extendColorTheme = extendColorTheme;
-
-var merge = _interopRequireWildcard(require("deepmerge"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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); }
-
-function extendColorTheme(baseTheme, extension) {
-  var newColorTheme = merge(baseTheme.colors, extension);
-
-  var newTheme = _extends({}, baseTheme, {
-    colors: _extends({}, newColorTheme)
-  });
-
-  return newTheme;
-}

package/lib/CustomThemeProvider/index.js

@@ -1,12 +0,0 @@
-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); }
-
-import * as React from "react";
-import { ThemeProvider } from "styled-components";
-
-var CustomThemeProvider = function CustomThemeProvider(props) {
-  return /*#__PURE__*/React.createElement(ThemeProvider, _extends({
-    theme: props.theme
-  }, props));
-};
-
-export default CustomThemeProvider;

package/lib/themes/sprout/theme.js

@@ -1,19 +0,0 @@
-import theme from "../default/theme";
-import { COLOR_RED_800 } from "@sproutsocial/seeds-color";
-var sproutTheme = {
-  container: {
-    background: {
-      error: {
-        hover: COLOR_RED_800
-      }
-    }
-  },
-  button: {
-    primary: {
-      background: {
-        base: "purple"
-      }
-    }
-  }
-};
-export default sproutTheme;

package/lib/utils/extendTheme.js

@@ -1,12 +0,0 @@
-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); }
-
-import * as merge from "deepmerge";
-export function extendColorTheme(baseTheme, extension) {
-  var newColorTheme = merge(baseTheme.colors, extension);
-
-  var newTheme = _extends({}, baseTheme, {
-    colors: _extends({}, newColorTheme)
-  });
-
-  return newTheme;
-}