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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 8.7.1
+
+### Patch Changes
+
+- 1cf97da: Remove font weight rule from Breadcrumbs styles
+
 ## 8.7.0
 
 ### Minor Changes

package/__flow__/Breadcrumb/styles.js

@@ -42,11 +42,6 @@ const Nav: StyledComponent<{ ... }, TypeTheme, *> = styled.nav`
     font-weight: bold;
   }
 
-  li:not(:last-child) a,
-  li:not(:last-child) button {
-    font-weight: normal;
-  }
-
   li:not(:last-child)::after {
     content: "/";
     color: ${(props) => props.theme.colors.text.body};

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.low : "none"};
+      props.appearance === "placeholder" ? props.theme.shadows[100] : "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.low};
+    box-shadow: ${(props) => props.theme.shadows[100]};
     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.high};
+  box-shadow: ${(props) => props.theme.shadows[400]};
   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.low};
+  box-shadow: ${(props) => props.theme.shadows[100]};
   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="medium"
+      boxShadow={300}
       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 #2733333D;
+  box-shadow: 0px 8px 16px rgba(39,51,51,.24);
   -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.medium};
+    box-shadow: ${(props) => props.theme.shadows[300]};
     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="medium"
+    boxShadow={300}
     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="medium"
+    boxShadow={300}
     border={500}
     borderColor="container.border.base"
     // $FlowIssue - upgrade v0.112.0

package/__flow__/themes/_themes.scss

@@ -0,0 +1,140 @@
+// Inspired by https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
+// This file is excluded from stylelint, because stylelint is only set up to lint styled-components at the moment.
+
+// 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";
+
+// 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")
+);
+
+// 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-map: () !global;
+      @each $key, $submap in $map {
+        $value: map-get(map-get($themes, $theme), "#{$key}");
+        $theme-map: map-merge($theme-map, ($key: $value)) !global;
+      }
+      @content;
+      $theme-map: null !global;
+    }
+  }
+}
+
+// FUNCTIONS
+// 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, ".");
+  @return _map-deep-get($theme-map, $keys);
+}
+
+// These 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, ".");
+  @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, ".");
+  @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, ".");
+  @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, ".");
+  @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, ".");
+  @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, ".");
+  @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, ".");
+  @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, ".");
+  @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, ".");
+  @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, ".");
+  @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.
+
+// Via https://stackoverflow.com/a/42295154
+// Only works with a single-character separator
+@function _string-split($string, $separator) {
+  // empty array/list
+  $split-arr: ();
+  // first index of separator in string
+  $index : str-index($string, $separator);
+  // loop through string
+  @while $index != null {
+    // get the substring from the first character to the separator
+    $item: str-slice($string, 1, $index - 1);
+    // push item to array
+    $split-arr: append($split-arr, $item);
+    // remove item and separator from string
+    $string: str-slice($string, $index + 1);
+    // find new index of separator
+    $index : str-index($string, $separator);
+  }
+  // add the remaining string to list (the last item)
+  $split-arr: append($split-arr, $string);
+
+  @return $split-arr;
+}
+
+// Adapted from https://css-tricks.com/snippets/sass/deep-getset-maps/
+// Iterates over a list of keys to read multi-level maps
+@function _map-deep-get($map, $keys) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+  @return $map;
+}

package/__flow__/themes/dark/theme.js

@@ -1,7 +1,6 @@
 // @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 {
@@ -14,200 +13,188 @@ import {
   neutral,
 } from "./decorative-palettes";
 
-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,
-    },
-    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: {
+const darkTheme = {
+  ...defaultTheme,
+  colors: {
+    ...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,
-      },
-      border: {
-        base: "transparent",
-      },
-      text: {
-        base: COLORS.COLOR_NEUTRAL_100,
-        hover: COLORS.COLOR_NEUTRAL_0,
+    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,
+        },
       },
     },
-    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,
-      },
+    link: {
+      base: COLORS.COLOR_BLUE_400,
+      hover: COLORS.COLOR_BLUE_300,
     },
-    placeholder: {
+    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,
+        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,
+        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,
     },
+    ...datavizPalette,
   },
-  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,9 +194,6 @@ 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,
@@ -303,9 +300,10 @@ export const borderWidths = {
 };
 
 export const 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 const easing = {
@@ -344,7 +342,10 @@ const theme = {
   },
   borders,
   borderWidths,
-  shadows,
+  shadows: {
+    ...shadows,
+    shadows,
+  },
   easing,
   duration,
 };

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

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

package/commonjs/Breadcrumb/styles.js

@@ -10,7 +10,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var Nav = _styledComponents.default.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;