@sproutsocial/racine 8.8.0 → 9.0.2

package/lib/themes/dark/theme.js

@@ -1,190 +1,207 @@
 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 darkTheme = _extends({}, defaultTheme, {
-  colors: _extends({}, defaultTheme.colors, {
-    app: {
+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: {
       background: {
-        base: COLORS.COLOR_NEUTRAL_1000
+        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
       }
     },
-    container: {
+    secondary: {
       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
+        base: "transparent",
+        hover: COLORS.COLOR_NEUTRAL_100,
+        active: 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
+        base: COLORS.COLOR_NEUTRAL_0
+      },
+      text: {
+        base: COLORS.COLOR_NEUTRAL_0,
+        hover: COLORS.COLOR_NEUTRAL_800
       }
     },
-    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
       },
-      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_100,
+        hover: COLORS.COLOR_NEUTRAL_0
+      }
+    },
+    destructive: {
+      background: {
+        base: COLORS.COLOR_RED_400,
+        hover: COLORS.COLOR_RED_300,
+        active: COLORS.COLOR_RED_200
       },
-      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
-        }
+      border: {
+        base: "transparent"
       },
-      unstyled: {
-        background: {
-          base: "transparent"
-        },
-        border: {
-          base: "transparent"
-        },
-        text: {
-          base: COLORS.COLOR_NEUTRAL_300,
-          hover: COLORS.COLOR_NEUTRAL_200
-        }
+      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
-    },
-    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: {
+    placeholder: {
       background: {
-        base: COLORS.COLOR_NEUTRAL_900,
-        selected: COLORS.COLOR_NEUTRAL_0
+        base: "transparent",
+        hover: COLORS.COLOR_NEUTRAL_1100,
+        active: COLORS.COLOR_NEUTRAL_1100
       },
       border: {
-        base: COLORS.COLOR_NEUTRAL_500,
-        error: red.highlight,
-        warning: yellow.highlight,
-        selected: COLORS.COLOR_NEUTRAL_0
-      },
-      placeholder: {
         base: COLORS.COLOR_NEUTRAL_500
+      },
+      text: {
+        base: COLORS.COLOR_BLUE_400,
+        hover: COLORS.COLOR_BLUE_300
       }
     },
-    listItem: {
+    unstyled: {
       background: {
-        base: "transparent",
-        hover: COLORS.COLOR_NEUTRAL_800,
-        selected: COLORS.COLOR_NEUTRAL_0
+        base: "transparent"
+      },
+      border: {
+        base: "transparent"
+      },
+      text: {
+        base: COLORS.COLOR_NEUTRAL_300,
+        hover: COLORS.COLOR_NEUTRAL_200
       }
+    }
+  },
+  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
     },
-    dataviz: {
-      map: datavizPalette.DATAVIZ_COLORS_MAP,
-      list: datavizPalette.DATAVIZ_COLORS_LIST
+    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
     }
-  }, datavizPalette),
-  mode: "dark"
+  },
+  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
 });
 
 export default darkTheme;

package/lib/themes/default/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 = "default-light";
 
 var colors = _extends({
   app: {
@@ -185,6 +187,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,
@@ -266,10 +271,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,
@@ -282,6 +286,9 @@ export var duration = {
   slow: MOTION.MOTION_DURATION_SLOW
 };
 var theme = {
+  utils: {
+    interact: interact(MODE)
+  },
   breakpoints: breakpoints,
   colors: colors,
   typography: _extends({}, typography, {
@@ -302,10 +309,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 === "default-dark") {
+      return lighten(0.2, themeValue);
+    } else {
+      return darken(0.2, themeValue);
+    }
+  };
+};
+
+export default interact;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "8.8.0",
+  "version": "9.0.2",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -92,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",
@@ -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 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>
-`;