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

package/lib/Popout/index.js

@@ -267,7 +267,7 @@ Popout.Content = function (_ref4) {
     border: 500,
     borderColor: "container.border.base",
     borderRadius: "outer",
-    boxShadow: 300,
+    boxShadow: "medium",
     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: 300,
+    boxShadow: "medium",
     border: 500,
     borderColor: "container.border.base" // $FlowIssue - upgrade v0.112.0
 

package/lib/themes/dark/theme.js

@@ -1,185 +1,201 @@
 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 darkTheme = _extends({}, defaultTheme, {
-  colors: _extends({}, defaultTheme.colors, {
-    app: {
+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: {
       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
       }
     }
-  }, 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);
+
+var darkTheme = _extends({}, defaultTheme, {
+  colors: colors,
+  shadows: shadows,
   mode: "dark"
 });
 

package/lib/themes/default/theme.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "8.6.3",
+  "version": "8.8.0-beta-shadows.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -52,16 +52,13 @@
   },
   "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": {
@@ -95,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": "^2.0.0",
     "@sproutsocial/seeds-motion": "^1.2.0",
     "@sproutsocial/seeds-networkcolor": "^2.9.0",
     "@sproutsocial/seeds-space": "^0.4.7",
@@ -143,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",