@sproutsocial/racine 8.8.0-beta-shadows.0 → 8.8.0-dar35-beta.0

package/dist/themes/default.scss

@@ -85,9 +85,10 @@ $default: (
     500: 1px
   ),
   shadows: (
-    low: 0px 2px 4px rgba(39,51,51,.24) #2733333D,
-    medium: 0px 8px 16px rgba(39,51,51,.24) #2733333D,
-    high: 0px 16px 32px rgba(39,51,51,.24) #2733333D
+    100: 0px 2px 4px rgba(39,51,51,.24),
+    200: 0px 4px 8px rgba(39,51,51,.24),
+    300: 0px 8px 16px rgba(39,51,51,.24),
+    400: 0px 16px 32px rgba(39,51,51,.24)
   ),
   easing: (
     ease_in: cubic-bezier(.4, 0, .7, .2),
@@ -274,9 +275,6 @@ $default: (
           selected: #364141
         )
       ),
-      elevation: (
-        base: #2733333D
-      ),
       network: (
         twitter: #1da1f2,
         twitter_like: #e0245e,
@@ -670,9 +668,16 @@ $default: (
       500: 1px
     ),
     shadows: (
-      low: 0px 2px 4px rgba(39,51,51,.24) #2733333D,
-      medium: 0px 8px 16px rgba(39,51,51,.24) #2733333D,
-      high: 0px 16px 32px rgba(39,51,51,.24) #2733333D
+      100: 0px 2px 4px rgba(39,51,51,.24),
+      200: 0px 4px 8px rgba(39,51,51,.24),
+      300: 0px 8px 16px rgba(39,51,51,.24),
+      400: 0px 16px 32px rgba(39,51,51,.24),
+      shadows: (
+        100: 0px 2px 4px rgba(39,51,51,.24),
+        200: 0px 4px 8px rgba(39,51,51,.24),
+        300: 0px 8px 16px rgba(39,51,51,.24),
+        400: 0px 16px 32px rgba(39,51,51,.24)
+      )
     ),
     easing: (
       ease_in: cubic-bezier(.4, 0, .7, .2),

package/lib/Breadcrumb/styles.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 var Nav = styled.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) a,li:not(:last-child) button{font-weight:normal;}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)::after{content:\"/\";color:", ";margin-left:", ";}"], function (props) {
   return props.theme.typography[200];
 }, function (props) {
   return props.theme.fontFamily;

package/lib/Button/styles.js

@@ -32,7 +32,7 @@ var Container = styled.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/lib/Card/styles.js

@@ -9,7 +9,7 @@ var Container = styled(Box).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/lib/Drawer/styles.js

@@ -13,7 +13,7 @@ var Container = styled.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 css(["", ":", "px;"], props.direction, props.offset);
 }, COMMON);

package/lib/KeyboardKey/styles.js

@@ -12,7 +12,7 @@ var Container = styled.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];
 }, COMMON);

package/lib/Modal/styles.js

@@ -53,7 +53,7 @@ export var Container = styled(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, width, COMMON);

package/lib/Popout/index.js

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

package/lib/Tooltip/index.js

@@ -118,7 +118,7 @@ var Content = function Content(_ref2) {
     m: 200,
     color: "text.body",
     bg: "container.background.base",
-    boxShadow: "medium",
+    boxShadow: 300,
     border: 500,
     borderColor: "container.border.base" // $FlowIssue - upgrade v0.112.0
 

package/lib/themes/dark/theme.js

@@ -1,201 +1,189 @@
 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";
-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, {
-  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
+    dataviz: {
+      map: datavizPalette.DATAVIZ_COLORS_MAP,
+      list: datavizPalette.DATAVIZ_COLORS_LIST
     }
-  },
-  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,
+  }, datavizPalette),
   mode: "dark"
 });
 

package/lib/themes/default/theme.js

@@ -185,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,
@@ -269,9 +266,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,
@@ -304,7 +302,9 @@ var theme = {
   }),
   borders: borders,
   borderWidths: borderWidths,
-  shadows: shadows,
+  shadows: _extends({}, shadows, {
+    shadows: shadows
+  }),
   easing: easing,
   duration: duration
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "8.8.0-beta-shadows.0",
+  "version": "8.8.0-dar35-beta.0",
   "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": "^2.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",