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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 8.7.0
+
+### Minor Changes
+
+- bcfb6eb: Export themes as scss variables
+
 ## 8.6.3
 
 ### Patch Changes

package/__flow__/Button/styles.js

@@ -51,7 +51,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
       props.theme.colors.button[props.appearance].background.hover};
     text-decoration: none;
     box-shadow: ${(props) =>
-      props.appearance === "placeholder" ? props.theme.shadows[100] : "none"};
+      props.appearance === "placeholder" ? props.theme.shadows.low : "none"};
   }
 
   &:active {

package/__flow__/Card/styles.js

@@ -19,7 +19,7 @@ const Container = styled<typeof Box, *>(Box)`
     width: 100%;
     height: 100%;
     opacity: 0;
-    box-shadow: ${(props) => props.theme.shadows[100]};
+    box-shadow: ${(props) => props.theme.shadows.low};
     transition: opacity ${(props) => props.theme.duration.medium}
       ${(props) => props.theme.easing.ease_inout};
   }

package/__flow__/Drawer/styles.js

@@ -17,7 +17,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   height: 100%;
   width: ${(props) => props.width}px;
   background-color: ${(props) => props.theme.colors.container.background.base};
-  box-shadow: ${(props) => props.theme.shadows[400]};
+  box-shadow: ${(props) => props.theme.shadows.high};
   filter: blur(0);
 
   ${(props) => css`

package/__flow__/KeyboardKey/styles.js

@@ -10,7 +10,7 @@ const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.div`
   background-color: ${(props) => props.theme.colors.container.background.base};
   border: 1px solid ${(props) => props.theme.colors.container.border.base};
   border-radius: ${(props) => props.theme.radii[500]};
-  box-shadow: ${(props) => props.theme.shadows[100]};
+  box-shadow: ${(props) => props.theme.shadows.low};
   padding: 0 ${(props) => props.theme.space[200]};
   min-width: 20px;
   justify-content: center;

package/__flow__/Menu/index.stories.js

@@ -213,7 +213,7 @@ export const MenuWithIcons = (props) => {
       border={500}
       borderRadius="outer"
       borderColor="container.border.base"
-      boxShadow={300}
+      boxShadow="medium"
       backgroundColor="container.background.base"
     >
       <Menu {...props}>

package/__flow__/Modal/__snapshots__/index.test.js.snap

@@ -45,7 +45,7 @@ exports[`Modal should render properly 1`] = `
   flex-direction: column;
   background: #FFFFFF;
   border-radius: 6px;
-  box-shadow: 0px 8px 16px rgba(39,51,51,.24);
+  box-shadow: 0px 8px 16px #2733333D;
   -webkit-filter: blur(0);
   filter: blur(0);
   color: #364141;

package/__flow__/Modal/styles.js

@@ -84,7 +84,7 @@ export const Container: StyledComponent<any, TypeTheme, *> = styled(ReactModalAd
     flex-direction: column;
     background: ${(props) => props.theme.colors.container.background.base};
     border-radius: ${(props) => props.theme.radii[500]};
-    box-shadow: ${(props) => props.theme.shadows[300]};
+    box-shadow: ${(props) => props.theme.shadows.medium};
     filter: blur(0);
     color: ${(props) => props.theme.colors.text.body};
 

package/__flow__/Popout/index.js

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

package/__flow__/Tooltip/index.js

@@ -159,7 +159,7 @@ const Content = ({
     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/__flow__/themes/dark/theme.js

@@ -1,6 +1,7 @@
 // @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 {
@@ -13,184 +14,200 @@ import {
   neutral,
 } from "./decorative-palettes";
 
-const darkTheme = {
-  ...defaultTheme,
-  colors: {
-    ...defaultTheme.colors,
-    app: {
-      background: {
-        base: COLORS.COLOR_NEUTRAL_1000,
+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,
+  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,
     },
-    container: {
+    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_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: COLORS.COLOR_BLUE_400,
+        hover: COLORS.COLOR_BLUE_300,
+        active: COLORS.COLOR_BLUE_200,
       },
       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: "transparent",
       },
-    },
-    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,
-        },
+      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,
+    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,
+      },
     },
-    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,
+    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,
+      },
     },
-    form: {
+    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,
-        selected: COLORS.COLOR_NEUTRAL_0,
+        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,
-        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,
+      },
+      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,
+};
+
+const darkTheme = {
+  ...defaultTheme,
+  colors,
+  shadows,
   mode: "dark",
 };
 

package/__flow__/themes/default/theme.js

@@ -194,6 +194,9 @@ 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,
@@ -223,6 +226,10 @@ 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,
 };
@@ -296,10 +303,9 @@ export const borderWidths = {
 };
 
 export const 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 const easing = {
@@ -338,10 +344,7 @@ const theme = {
   },
   borders,
   borderWidths,
-  shadows: {
-    ...shadows,
-    shadows,
-  },
+  shadows,
   easing,
   duration,
 };

package/__flow__/types/system-props.flow.js

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

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[100] : "none";
+  return props.appearance === "placeholder" ? props.theme.shadows.low : "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[100];
+  return props.theme.shadows.low;
 }, function (props) {
   return props.theme.duration.medium;
 }, function (props) {

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[400];
+  return props.theme.shadows.high;
 }, 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[100];
+  return props.theme.shadows.low;
 }, 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[300];
+  return props.theme.shadows.medium;
 }, 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: 300,
+    boxShadow: "medium",
     p: 400,
     m: 300
   }, rest), children);

package/commonjs/Tooltip/index.js

@@ -132,7 +132,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