@sproutsocial/racine 8.8.0-dar35-beta.0 → 9.1.0-beta-pr-1290.0

package/__flow__/Token/styles.js

@@ -6,68 +6,78 @@ import { focusRing } from "../utils/mixins";
 import type { TypeTheme } from "../types/theme.flow";
 
 const Container: StyledComponent<any, TypeTheme, *> = styled.button`
-  font-family: ${(props) => props.theme.fontFamily};
-  ${(props) => props.theme.typography[200]};
   position: relative;
   display: inline-block;
-  padding: ${(props) => props.theme.space[200]}
-    ${(props) => props.theme.space[300]};
   margin: 0;
-  color: ${(props) => props.theme.colors.text.body};
-  background: ${(props) => props.theme.colors.container.background.base};
-  border: 1px solid ${(props) => props.theme.colors.container.border.base};
-  font-weight: ${(props) => props.theme.fontWeights.normal};
   line-height: 1;
   vertical-align: middle;
-  border-radius: ${(props) => props.theme.radii[500]};
   outline: none;
-  transition: all ${(props) => props.theme.duration.fast}
-    ${(props) => props.theme.easing.ease_inout};
+  /* Theme Properties */
+  ${({ theme }) => css`
+    ${theme.typography[200]}
+    font-family: ${theme.fontFamily};
+    font-weight: ${theme.fontWeights.normal};
+    border: 1px solid ${theme.colors.container.border.base};
+    border-radius: ${theme.radii[500]};
+    color: ${theme.colors.text.body};
+    background: ${theme.colors.container.background.base};
+    padding: ${theme.space[200]} ${theme.space[300]};
+    transition: all ${theme.duration.fast} ${theme.easing.ease_inout};
+  `}
 
   &:focus {
     ${focusRing}
   }
 
-  ${(props) =>
-    props.closeable &&
+  ${({ theme, palette }) =>
+    palette === "blue" &&
     css`
-      cursor: pointer;
+      color: ${theme.colors.text.body};
+      background: ${theme.colors.container.background.decorative.blue};
+      border: 1px solid ${theme.colors.container.border.decorative.blue};
+      &:hover,
+      &:active {
+        cursor: pointer;
+        box-shadow: ${theme.shadows.low};
+        border: 1px solid
+          ${theme.utils.interact(theme.colors.container.border.decorative.blue)};
+      }
+    `}
 
+  ${({ closeable, theme }) =>
+    closeable &&
+    css`
+      cursor: pointer;
       &:hover,
       &:active {
-        color: ${(props) => props.theme.colors.text.body};
+        box-shadow: ${theme.shadows.low};
         border: 1px solid
-          ${(props) => props.theme.colors.container.border.decorative.neutral};
-        background-color: ${(props) =>
-          props.theme.colors.container.background.decorative.neutral};
+          ${theme.utils.interact(theme.colors.container.border.base)};
       }
     `}
 
-  ${(props) =>
-    props.disabled &&
+  ${({ disabled, theme }) =>
+    disabled &&
     css`
       opacity: 0.4;
       cursor: not-allowed;
       &:hover,
       &:active {
-        background: ${(props) => props.theme.colors.container.background.base};
-        border: 1px solid ${(props) => props.theme.colors.container.border.base};
+        box-shadow: none;
+        border: 1px solid ${theme.colors.container.border.base};
       }
     `}
-
-  ${(props) =>
-    !props.valid &&
+    
+  ${({ valid, theme }) =>
+    !valid &&
     css`
-      color: ${(props) => props.theme.colors.text.body};
-      border-color: ${(props) => props.theme.colors.container.border.error};
-      background: ${(props) => props.theme.colors.container.background.error};
-
+      color: ${theme.colors.text.error};
+      background: ${theme.colors.container.background.error};
+      border: 1px solid ${theme.colors.container.border.error};
       &:hover {
-        color: ${(props) => props.theme.colors.text.body};
+        box-shadow: ${theme.shadows.low};
         border: 1px solid
-          ${(props) => props.theme.colors.container.border.error};
-        background-color: ${(props) =>
-          props.theme.colors.container.background.error};
+          ${theme.utils.interact(theme.colors.container.border.error)};
       }
     `}
 

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/_themes.scss

@@ -3,25 +3,21 @@
 
 // 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";
+@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: (
-        default: map-get($default, "default"),
-        dark: map-get($dark, "default")
+   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 {
-    // ~ selects siblings to the specified selector, * selects all children of those siblings,
-    // which makes ~ * a kind of nephew selector. Thus we can target all elements on the page even if they are
-    // not a direct descendent of the element that we apply the theme classname to.
-    // This is important for pop-ups and modals, since they are often mounted directly to the body.
-    .theme--#{$theme} ~ * & {
+    .theme--#{$theme} & {
       $theme-map: () !global;
       @each $key, $submap in $map {
         $value: map-get(map-get($themes, $theme), "#{$key}");
@@ -37,78 +33,79 @@ $themes: (
 // 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: _string-split($key, ".");
+  $keys: _str-split($key, ".");
   @return _map-deep-get($theme-map, $keys);
 }
 
-// These functions are convenience methods to get theme values for subsets of the theme.
+// 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: _string-split($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: _string-split($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: _string-split($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: _string-split($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: _string-split($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: _string-split($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: _string-split($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: _string-split($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: _string-split($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: _string-split($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, they will not be included.
+// If you import this file with @use, these functions will be excluded because they are private.
 
 // Via https://stackoverflow.com/a/42295154
-// Only works with a single-character separator
-@function _string-split($string, $separator) {
+// 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
@@ -131,7 +128,8 @@ $themes: (
 }
 
 // Adapted from https://css-tricks.com/snippets/sass/deep-getset-maps/
-// Iterates over a list of keys to read multi-level 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);

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,189 +14,208 @@ import {
   neutral,
 } from "./decorative-palettes";
 
-const darkTheme = {
-  ...defaultTheme,
-  colors: {
-    ...defaultTheme.colors,
-    app: {
-      background: {
-        base: COLORS.COLOR_NEUTRAL_1000,
+import interact from "../utils/interact";
+
+const MODE = "default-dark";
+
+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,
+  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,
     },
-    container: {
+  },
+  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,
+      },
+    },
+  },
+  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,
     },
-    ...datavizPalette,
   },
-  mode: "dark",
+  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: MODE,
 };
 
 export default darkTheme;

package/__flow__/themes/default/theme.js

@@ -19,8 +19,12 @@ import DEPTH from "@sproutsocial/seeds-depth";
 import MOTION from "@sproutsocial/seeds-motion";
 import BORDER from "@sproutsocial/seeds-border";
 
+import interact from "../utils/interact";
+
 export const breakpoints = ["900px", "1200px", "1500px", "1800px"];
 
+const MODE = "default-light";
+
 const colors = {
   app: {
     background: {
@@ -194,6 +198,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,
@@ -300,10 +307,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 = {
@@ -319,6 +325,9 @@ export const duration = {
 };
 
 const theme = {
+  utils: {
+    interact: interact(MODE),
+  },
   breakpoints,
   colors,
   typography: {
@@ -342,12 +351,10 @@ const theme = {
   },
   borders,
   borderWidths,
-  shadows: {
-    ...shadows,
-    shadows,
-  },
+  shadows,
   easing,
   duration,
+  mode: MODE,
 };
 
 export default theme;