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

package/lib/themes/{default → light}/theme.js

@@ -10,7 +10,9 @@ 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 interact from "../utils/interact";
 export var breakpoints = ["900px", "1200px", "1500px", "1800px"];
+var MODE = "light";
 
 var colors = _extends({
   app: {
@@ -36,7 +38,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,
@@ -161,7 +166,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: {
@@ -185,6 +193,9 @@ var colors = _extends({
       selected: COLORS.COLOR_NEUTRAL_800
     }
   },
+  elevation: {
+    base: COLORS.COLOR_NEUTRAL_900 + "3D"
+  },
   network: {
     twitter: NETWORKCOLORS.NETWORK_COLOR_TWITTER,
     twitter_like: NETWORKCOLORS.NETWORK_COLOR_TWITTER_LIKE,
@@ -211,6 +222,10 @@ var colors = _extends({
     yelp: NETWORKCOLORS.NETWORK_COLOR_YELP,
     whatsapp: NETWORKCOLORS.NETWORK_COLOR_WHATSAPP,
     tiktok: NETWORKCOLORS.NETWORK_COLOR_TIKTOK
+  },
+  dataviz: {
+    map: datavizPalette.DATAVIZ_COLORS_MAP,
+    list: datavizPalette.DATAVIZ_COLORS_LIST
   }
 }, literalColors, datavizPalette);
 
@@ -262,10 +277,9 @@ export var borderWidths = {
   "500": BORDER.BORDER_WIDTH_500
 };
 export var shadows = {
-  "100": DEPTH.ELEVATION_LEVEL_100,
-  "200": DEPTH.ELEVATION_LEVEL_200,
-  "300": DEPTH.ELEVATION_LEVEL_300,
-  "400": DEPTH.ELEVATION_LEVEL_400
+  low: DEPTH.ELEVATION_LEVEL_100 + " " + COLORS.COLOR_NEUTRAL_900 + "3D",
+  medium: DEPTH.ELEVATION_LEVEL_300 + " " + COLORS.COLOR_NEUTRAL_900 + "3D",
+  high: DEPTH.ELEVATION_LEVEL_400 + " " + COLORS.COLOR_NEUTRAL_900 + "3D"
 };
 export var easing = {
   ease_in: MOTION.MOTION_EASE_IN,
@@ -278,6 +292,9 @@ export var duration = {
   slow: MOTION.MOTION_DURATION_SLOW
 };
 var theme = {
+  utils: {
+    interact: interact(MODE)
+  },
   breakpoints: breakpoints,
   colors: colors,
   typography: _extends({}, typography, {
@@ -298,10 +315,9 @@ var theme = {
   }),
   borders: borders,
   borderWidths: borderWidths,
-  shadows: _extends({}, shadows, {
-    shadows: shadows
-  }),
+  shadows: shadows,
   easing: easing,
-  duration: duration
+  duration: duration,
+  mode: MODE
 };
 export default theme;

package/lib/themes/utils/interact.js

@@ -0,0 +1,13 @@
+import { darken, lighten } from "polished";
+
+var interact = function interact(mode) {
+  return function (themeValue) {
+    if (mode === "dark") {
+      return lighten(0.2, themeValue);
+    } else {
+      return darken(0.2, themeValue);
+    }
+  };
+};
+
+export default 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.1-theme-extension.0",
+  "version": "10.0.0-dar105-beta.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -52,22 +52,18 @@
   },
   "lint-staged": {
     "**/*.js": [
-      "eslint --fix",
-      "git add"
+      "eslint --fix"
     ],
     "*.scss": [
-      "stylelint --fix",
-      "git add"
+      "stylelint --fix"
     ],
     "icons/*.svg": [
-      "yarn icon-lint write",
-      "git add"
+      "yarn icon-lint write"
     ]
   },
   "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",
@@ -96,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",
@@ -107,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",
@@ -144,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,16 +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 = {|
-  theme?: 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;
-}