@sproutsocial/racine 9.1.0-token-beta.0 → 9.1.1-theme-extension.0

package/__flow__/themes/dark/theme.js

@@ -1,7 +1,6 @@
 // @flow strict-local
 
 import COLORS from "@sproutsocial/seeds-color";
-import DEPTH from "@sproutsocial/seeds-depth";
 import defaultTheme from "../default/theme";
 import { datavizPalette } from "./dataviz-palette";
 import {
@@ -14,208 +13,185 @@ import {
   neutral,
 } from "./decorative-palettes";
 
-import interact from "../utils/interact";
-
-const MODE = "default-dark";
-
-export const 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`,
-};
-
-const colors = {
-  ...defaultTheme.colors,
-  utils: {
-    interact: interact(MODE),
-  },
-  app: {
-    background: {
-      base: COLORS.COLOR_NEUTRAL_1000,
-    },
-  },
-  container: {
-    background: {
-      base: COLORS.COLOR_NEUTRAL_900,
-      success: green.background,
-      warning: yellow.background,
-      error: red.background,
-      info: blue.background,
-      opportunity: purple.background,
-      danger: red.background,
-      decorative: {
-        green: green.background,
-        blue: blue.background,
-        purple: purple.background,
-        yellow: yellow.background,
-        orange: orange.background,
-        red: red.background,
-        neutral: neutral.background,
-      },
-      selected: COLORS.COLOR_NEUTRAL_0,
-    },
-    border: {
-      base: COLORS.COLOR_NEUTRAL_1100,
-      success: green.highlight,
-      warning: yellow.highlight,
-      error: red.highlight,
-      danger: red.highlight,
-      info: blue.highlight,
-      opportunity: purple.highlight,
-      decorative: {
-        green: green.highlight,
-        blue: blue.highlight,
-        purple: purple.highlight,
-        yellow: yellow.highlight,
-        orange: orange.highlight,
-        red: red.highlight,
-        neutral: neutral.highlight,
-      },
-      selected: COLORS.COLOR_NEUTRAL_0,
-    },
-  },
-  button: {
-    primary: {
+const darkTheme = {
+  ...defaultTheme,
+  colors: {
+    ...defaultTheme.colors,
+    app: {
       background: {
-        base: COLORS.COLOR_BLUE_400,
-        hover: COLORS.COLOR_BLUE_300,
-        active: COLORS.COLOR_BLUE_200,
-      },
-      border: {
-        base: "transparent",
-      },
-      text: {
-        base: COLORS.COLOR_NEUTRAL_900,
-        hover: COLORS.COLOR_NEUTRAL_1000,
+        base: COLORS.COLOR_NEUTRAL_1000,
       },
     },
-    secondary: {
+    container: {
       background: {
-        base: "transparent",
-        hover: COLORS.COLOR_NEUTRAL_100,
-        active: COLORS.COLOR_NEUTRAL_0,
+        base: COLORS.COLOR_NEUTRAL_900,
+        success: green.background,
+        warning: yellow.background,
+        error: red.background,
+        info: blue.background,
+        opportunity: purple.background,
+        danger: red.background,
+        decorative: {
+          green: green.background,
+          blue: blue.background,
+          purple: purple.background,
+          yellow: yellow.background,
+          orange: orange.background,
+          red: red.background,
+          neutral: neutral.background,
+        },
+        selected: COLORS.COLOR_NEUTRAL_0,
       },
       border: {
-        base: COLORS.COLOR_NEUTRAL_0,
-      },
-      text: {
-        base: COLORS.COLOR_NEUTRAL_0,
-        hover: COLORS.COLOR_NEUTRAL_800,
+        base: COLORS.COLOR_NEUTRAL_1100,
+        success: green.highlight,
+        warning: yellow.highlight,
+        error: red.highlight,
+        danger: red.highlight,
+        info: blue.highlight,
+        opportunity: purple.highlight,
+        decorative: {
+          green: green.highlight,
+          blue: blue.highlight,
+          purple: purple.highlight,
+          yellow: yellow.highlight,
+          orange: orange.highlight,
+          red: red.highlight,
+          neutral: neutral.highlight,
+        },
+        selected: COLORS.COLOR_NEUTRAL_0,
       },
     },
-    pill: {
-      background: {
-        base: "transparent",
-        hover: COLORS.COLOR_NEUTRAL_1000,
-        active: COLORS.COLOR_NEUTRAL_900,
-      },
-      border: {
-        base: "transparent",
-      },
-      text: {
-        base: COLORS.COLOR_NEUTRAL_100,
-        hover: COLORS.COLOR_NEUTRAL_0,
+    button: {
+      primary: {
+        background: {
+          base: COLORS.COLOR_BLUE_400,
+          hover: COLORS.COLOR_BLUE_300,
+          active: COLORS.COLOR_BLUE_200,
+        },
+        border: {
+          base: "transparent",
+        },
+        text: {
+          base: COLORS.COLOR_NEUTRAL_900,
+          hover: COLORS.COLOR_NEUTRAL_1000,
+        },
+      },
+      secondary: {
+        background: {
+          base: "transparent",
+          hover: COLORS.COLOR_NEUTRAL_100,
+          active: COLORS.COLOR_NEUTRAL_0,
+        },
+        border: {
+          base: COLORS.COLOR_NEUTRAL_0,
+        },
+        text: {
+          base: COLORS.COLOR_NEUTRAL_0,
+          hover: COLORS.COLOR_NEUTRAL_800,
+        },
+      },
+      pill: {
+        background: {
+          base: "transparent",
+          hover: COLORS.COLOR_NEUTRAL_1000,
+          active: COLORS.COLOR_NEUTRAL_900,
+        },
+        border: {
+          base: "transparent",
+        },
+        text: {
+          base: COLORS.COLOR_NEUTRAL_100,
+          hover: COLORS.COLOR_NEUTRAL_0,
+        },
+      },
+      destructive: {
+        background: {
+          base: COLORS.COLOR_RED_400,
+          hover: COLORS.COLOR_RED_300,
+          active: COLORS.COLOR_RED_200,
+        },
+        border: {
+          base: "transparent",
+        },
+        text: {
+          base: COLORS.COLOR_NEUTRAL_900,
+          hover: COLORS.COLOR_NEUTRAL_1000,
+        },
+      },
+      placeholder: {
+        background: {
+          base: "transparent",
+          hover: COLORS.COLOR_NEUTRAL_1100,
+          active: COLORS.COLOR_NEUTRAL_1100,
+        },
+        border: {
+          base: COLORS.COLOR_NEUTRAL_500,
+        },
+        text: {
+          base: COLORS.COLOR_BLUE_400,
+          hover: COLORS.COLOR_BLUE_300,
+        },
+      },
+      unstyled: {
+        background: {
+          base: "transparent",
+        },
+        border: {
+          base: "transparent",
+        },
+        text: {
+          base: COLORS.COLOR_NEUTRAL_300,
+          hover: COLORS.COLOR_NEUTRAL_200,
+        },
       },
     },
-    destructive: {
-      background: {
-        base: COLORS.COLOR_RED_400,
-        hover: COLORS.COLOR_RED_300,
-        active: COLORS.COLOR_RED_200,
-      },
-      border: {
-        base: "transparent",
-      },
-      text: {
-        base: COLORS.COLOR_NEUTRAL_900,
-        hover: COLORS.COLOR_NEUTRAL_1000,
-      },
+    link: {
+      base: COLORS.COLOR_BLUE_400,
+      hover: COLORS.COLOR_BLUE_300,
+    },
+    text: {
+      headline: COLORS.COLOR_NEUTRAL_0,
+      subtext: COLORS.COLOR_NEUTRAL_300,
+      body: COLORS.COLOR_NEUTRAL_100,
+      inverse: COLORS.COLOR_NEUTRAL_900,
+      error: COLORS.COLOR_RED_400,
     },
-    placeholder: {
+    icon: {
+      base: COLORS.COLOR_NEUTRAL_100,
+      inverse: COLORS.COLOR_NEUTRAL_900,
+      success: green.foreground,
+      warning: yellow.foreground,
+      error: red.foreground,
+      danger: red.foreground,
+      info: blue.foreground,
+      opportunity: purple.foreground,
+    },
+    form: {
       background: {
-        base: "transparent",
-        hover: COLORS.COLOR_NEUTRAL_1100,
-        active: COLORS.COLOR_NEUTRAL_1100,
+        base: COLORS.COLOR_NEUTRAL_900,
+        selected: COLORS.COLOR_NEUTRAL_0,
       },
       border: {
         base: COLORS.COLOR_NEUTRAL_500,
+        error: red.highlight,
+        warning: yellow.highlight,
+        selected: COLORS.COLOR_NEUTRAL_0,
       },
-      text: {
-        base: COLORS.COLOR_BLUE_400,
-        hover: COLORS.COLOR_BLUE_300,
+      placeholder: {
+        base: COLORS.COLOR_NEUTRAL_500,
       },
     },
-    unstyled: {
+    listItem: {
       background: {
         base: "transparent",
-      },
-      border: {
-        base: "transparent",
-      },
-      text: {
-        base: COLORS.COLOR_NEUTRAL_300,
-        hover: COLORS.COLOR_NEUTRAL_200,
+        hover: COLORS.COLOR_NEUTRAL_800,
+        selected: COLORS.COLOR_NEUTRAL_0,
       },
     },
+    ...datavizPalette,
   },
-  link: {
-    base: COLORS.COLOR_BLUE_400,
-    hover: COLORS.COLOR_BLUE_300,
-  },
-  text: {
-    headline: COLORS.COLOR_NEUTRAL_0,
-    subtext: COLORS.COLOR_NEUTRAL_300,
-    body: COLORS.COLOR_NEUTRAL_100,
-    inverse: COLORS.COLOR_NEUTRAL_900,
-    error: COLORS.COLOR_RED_400,
-  },
-  icon: {
-    base: COLORS.COLOR_NEUTRAL_100,
-    inverse: COLORS.COLOR_NEUTRAL_900,
-    success: green.foreground,
-    warning: yellow.foreground,
-    error: red.foreground,
-    danger: red.foreground,
-    info: blue.foreground,
-    opportunity: purple.foreground,
-  },
-  form: {
-    background: {
-      base: COLORS.COLOR_NEUTRAL_900,
-      selected: COLORS.COLOR_NEUTRAL_0,
-    },
-    border: {
-      base: COLORS.COLOR_NEUTRAL_500,
-      error: red.highlight,
-      warning: yellow.highlight,
-      selected: COLORS.COLOR_NEUTRAL_0,
-    },
-    placeholder: {
-      base: COLORS.COLOR_NEUTRAL_500,
-    },
-  },
-  listItem: {
-    background: {
-      base: "transparent",
-      hover: COLORS.COLOR_NEUTRAL_800,
-      selected: COLORS.COLOR_NEUTRAL_0,
-    },
-  },
-  elevation: {
-    base: COLORS.COLOR_NEUTRAL_1100,
-  },
-  dataviz: {
-    map: datavizPalette.DATAVIZ_COLORS_MAP,
-    list: datavizPalette.DATAVIZ_COLORS_LIST,
-  },
-  ...datavizPalette,
-};
-
-const darkTheme = {
-  ...defaultTheme,
-  colors,
-  shadows,
-  mode: MODE,
+  mode: "dark",
 };
 
 export default darkTheme;

package/__flow__/themes/default/theme.js

@@ -19,12 +19,8 @@ import DEPTH from "@sproutsocial/seeds-depth";
 import MOTION from "@sproutsocial/seeds-motion";
 import BORDER from "@sproutsocial/seeds-border";
 
-import interact from "../utils/interact";
-
 export const breakpoints = ["900px", "1200px", "1500px", "1800px"];
 
-const MODE = "default-light";
-
 const colors = {
   app: {
     background: {
@@ -198,9 +194,6 @@ const colors = {
       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,
@@ -230,10 +223,6 @@ const colors = {
     whatsapp: NETWORKCOLORS.NETWORK_COLOR_WHATSAPP,
     tiktok: NETWORKCOLORS.NETWORK_COLOR_TIKTOK,
   },
-  dataviz: {
-    map: datavizPalette.DATAVIZ_COLORS_MAP,
-    list: datavizPalette.DATAVIZ_COLORS_LIST,
-  },
   ...literalColors,
   ...datavizPalette,
 };
@@ -307,9 +296,10 @@ export const borderWidths = {
 };
 
 export const shadows = {
-  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`,
+  "100": DEPTH.ELEVATION_LEVEL_100,
+  "200": DEPTH.ELEVATION_LEVEL_200,
+  "300": DEPTH.ELEVATION_LEVEL_300,
+  "400": DEPTH.ELEVATION_LEVEL_400,
 };
 
 export const easing = {
@@ -325,9 +315,6 @@ export const duration = {
 };
 
 const theme = {
-  utils: {
-    interact: interact(MODE),
-  },
   breakpoints,
   colors,
   typography: {
@@ -351,10 +338,12 @@ const theme = {
   },
   borders,
   borderWidths,
-  shadows,
+  shadows: {
+    ...shadows,
+    shadows,
+  },
   easing,
   duration,
-  mode: MODE,
 };
 
 export default theme;

package/__flow__/themes/sprout/theme.js

@@ -0,0 +1,22 @@
+// @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__/types/system-props.flow.js

@@ -67,6 +67,7 @@ export type TypeSystemCommonProps = $ReadOnly<{|
   ...TypeSpaceProps,
   cursor?: TypeResponsiveBase<>,
 |}>;
+
 export type TypeSystemBorderProps = $ReadOnly<{|
   border?: TypeResponsiveBase<>,
   borderWidth?: TypeResponsiveBase<>,
@@ -84,7 +85,7 @@ export type TypeSystemBorderProps = $ReadOnly<{|
   borderX?: TypeResponsiveBase<>,
   borderY?: TypeResponsiveBase<>,
   boxShadow?: TypeResponsiveBase<>,
-  textShadow?: TypeResponsiveBase<>
+  textShadow?: TypeResponsiveBase<>,
 |}>;
 
 type TypeResponsiveTypeographySize = TypeResponsiveString<TypeTypography>;

package/__flow__/utils/extendTheme.js

@@ -0,0 +1,17 @@
+//@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/Breadcrumb/styles.js

@@ -10,7 +10,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var Nav = _styledComponents.default.nav.withConfig({
   displayName: "styles__Nav",
   componentId: "sc-1ub1apc-0"
-})(["ol{", ";margin:0;font-family:", ";padding:0;display:flex;}li{margin-right:", ";display:flex;}a,button{", ";max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;&:not(.overflow--menu){margin:0;padding:0;}}ol > div + li::before{content:\"/\";margin-right:", ";}li:last-child a,li:last-child button{color:", ";font-weight:bold;}li:not(:last-child)::after{content:\"/\";color:", ";margin-left:", ";}"], function (props) {
+})(["ol{", ";margin:0;font-family:", ";padding:0;display:flex;}li{margin-right:", ";display:flex;}a,button{", ";max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;&:not(.overflow--menu){margin:0;padding:0;}}ol > div + li::before{content:\"/\";margin-right:", ";}li:last-child a,li:last-child button{color:", ";font-weight:bold;}li:not(:last-child) a,li:not(:last-child) button{font-weight:normal;}li:not(:last-child)::after{content:\"/\";color:", ";margin-left:", ";}"], function (props) {
   return props.theme.typography[200];
 }, function (props) {
   return props.theme.fontFamily;

package/commonjs/Button/styles.js

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

package/commonjs/Card/styles.js

@@ -19,7 +19,7 @@ var Container = (0, _styledComponents.default)(_Box.default).withConfig({
 }, function (props) {
   return props.theme.radii[500];
 }, function (props) {
-  return props.theme.shadows.low;
+  return props.theme.shadows[100];
 }, function (props) {
   return props.theme.duration.medium;
 }, function (props) {

package/commonjs/CustomThemeProvider/index.js

@@ -0,0 +1,23 @@
+"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/Drawer/styles.js

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

package/commonjs/KeyboardKey/styles.js

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

package/commonjs/Modal/styles.js

@@ -72,7 +72,7 @@ var Container = (0, _styledComponents.default)(ReactModalAdapter).withConfig({
 }, function (props) {
   return props.theme.radii[500];
 }, function (props) {
-  return props.theme.shadows.medium;
+  return props.theme.shadows[300];
 }, function (props) {
   return props.theme.colors.text.body;
 }, BODY_PADDING, BODY_PADDING, BODY_PADDING, _styledSystem.width, _systemProps.COMMON);

package/commonjs/Popout/index.js

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

package/commonjs/Token/index.js

@@ -33,17 +33,14 @@ 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,
-      _ref$palette = _ref.palette,
-      palette = _ref$palette === void 0 ? "neutral" : _ref$palette,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "closeable", "onClick", "qa", "valid", "disabled", "palette"]);
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "closeable", "onClick", "qa", "valid", "disabled"]);
 
   var textContainer = (0, _hooks.useTextContent)("");
   return /*#__PURE__*/React.createElement(_styles.default, _extends({
     ref: textContainer,
     valid: valid,
-    palette: palette,
-    type: closeable || onClick ? "button" : undefined,
     as: closeable || onClick ? "button" : "div",
+    type: closeable || onClick ? "button" : undefined,
     closeable: closeable || onClick,
     disabled: disabled,
     onClick: onClick,