@sproutsocial/racine 9.1.0-beta-pr-1290.0 → 9.1.1-theme-extension.1

package/lib/themes/dark/theme.js

@@ -1,207 +1,186 @@
 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 COLORS from "@sproutsocial/seeds-color";
-import DEPTH from "@sproutsocial/seeds-depth";
 import defaultTheme from "../default/theme";
 import { datavizPalette } from "./dataviz-palette";
 import { green, blue, purple, yellow, orange, red, neutral } from "./decorative-palettes";
-import interact from "../utils/interact";
-var MODE = "default-dark";
-export var 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"
-};
 
-var colors = _extends({}, 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: {
+var darkTheme = _extends({}, defaultTheme, {
+  colors: _extends({}, 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
+    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
+        }
       },
-      border: {
-        base: "transparent"
+      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
+        }
       },
-      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
+      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
+        }
       },
-      border: {
-        base: "transparent"
+      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
+        }
       },
-      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
+        }
       }
     },
-    placeholder: {
+    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: "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
+        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
+        base: "transparent",
+        hover: COLORS.COLOR_NEUTRAL_800,
+        selected: COLORS.COLOR_NEUTRAL_0
       }
     }
-  },
-  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);
-
-var darkTheme = _extends({}, defaultTheme, {
-  colors: colors,
-  shadows: shadows,
-  mode: MODE
+  }, datavizPalette),
+  mode: "dark"
 });
 
 export default darkTheme;

package/lib/themes/default/theme.js

@@ -10,9 +10,7 @@ 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 = "default-light";
 
 var colors = _extends({
   app: {
@@ -187,9 +185,6 @@ 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,
@@ -216,10 +211,6 @@ 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);
 
@@ -271,9 +262,10 @@ export var borderWidths = {
   "500": BORDER.BORDER_WIDTH_500
 };
 export var 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 var easing = {
   ease_in: MOTION.MOTION_EASE_IN,
@@ -286,9 +278,6 @@ export var duration = {
   slow: MOTION.MOTION_DURATION_SLOW
 };
 var theme = {
-  utils: {
-    interact: interact(MODE)
-  },
   breakpoints: breakpoints,
   colors: colors,
   typography: _extends({}, typography, {
@@ -309,9 +298,10 @@ var theme = {
   }),
   borders: borders,
   borderWidths: borderWidths,
-  shadows: shadows,
+  shadows: _extends({}, shadows, {
+    shadows: shadows
+  }),
   easing: easing,
-  duration: duration,
-  mode: MODE
+  duration: duration
 };
 export default theme;

package/lib/themes/sprout/theme.js

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,12 @@
+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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "9.1.0-beta-pr-1290.0",
+  "version": "9.1.1-theme-extension.1",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -64,6 +64,7 @@
   "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",
@@ -92,7 +93,7 @@
     "@reach/component-component": "^0.1.3",
     "@sproutsocial/seeds-border": "^1.1.0",
     "@sproutsocial/seeds-color": "^1.5.3",
-    "@sproutsocial/seeds-depth": "^3.0.0",
+    "@sproutsocial/seeds-depth": "^1.1.1",
     "@sproutsocial/seeds-motion": "^1.2.0",
     "@sproutsocial/seeds-networkcolor": "^2.9.0",
     "@sproutsocial/seeds-space": "^0.4.7",
@@ -140,7 +141,6 @@
     "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__/themes/_themes.scss

@@ -1,138 +0,0 @@
-// 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/default.scss";
-@import "../../dist/themes/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.
-$themes: (
-   light: map-get($default, "default"),
-   dark: map-get($dark, "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}");
-        $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/__flow__/themes/utils/interact.js

@@ -1,12 +0,0 @@
-//@flow strict-local
-import { darken, lighten } from "polished";
-
-const interact = (mode: string) => (themeValue: string) => {
-  if (mode === "default-dark") {
-    return lighten(0.2, themeValue);
-  } else {
-    return darken(0.2, themeValue);
-  }
-};
-
-export default interact;

package/commonjs/themes/utils/interact.js

@@ -1,19 +0,0 @@
-"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;