@sproutsocial/racine 8.6.4-dar10.3 → 8.8.0-dar35-beta.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 8.7.1
+
+### Patch Changes
+
+- 1cf97da: Remove font weight rule from Breadcrumbs styles
+
+## 8.7.0
+
+### Minor Changes
+
+- bcfb6eb: Export themes as scss variables
+
+## 8.6.3
+
+### Patch Changes
+
+- 777fcd7: Unset inverted icon color when menu item is hovered and active
+
 ## 8.6.2
 
 ### Patch 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__/Listbox/__snapshots__/index.test.js.snap

@@ -413,6 +413,11 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
   background-color: #f3f4f4;
 }
 
+.c6:focus .Icon-svg,
+.c6:hover .Icon-svg {
+  color: unset;
+}
+
 .c6:hover {
   cursor: pointer;
 }
@@ -446,6 +451,11 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
   background-color: #f3f4f4;
 }
 
+.c4:focus .Icon-svg,
+.c4:hover .Icon-svg {
+  color: unset;
+}
+
 .c4:hover {
   cursor: pointer;
 }
@@ -698,6 +708,11 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
   background-color: #f3f4f4;
 }
 
+.c7:focus .Icon-svg,
+.c7:hover .Icon-svg {
+  color: unset;
+}
+
 .c7:hover {
   cursor: pointer;
 }
@@ -731,6 +746,11 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
   background-color: #f3f4f4;
 }
 
+.c5:focus .Icon-svg,
+.c5:hover .Icon-svg {
+  color: unset;
+}
+
 .c5:hover {
   cursor: pointer;
 }

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

@@ -47,6 +47,11 @@ exports[`Menu AsMenu should match snapshot 1`] = `
   background-color: #f3f4f4;
 }
 
+.c7:focus .Icon-svg,
+.c7:hover .Icon-svg {
+  color: unset;
+}
+
 .c7:hover {
   cursor: pointer;
 }
@@ -80,6 +85,11 @@ exports[`Menu AsMenu should match snapshot 1`] = `
   background-color: #f3f4f4;
 }
 
+.c6:focus .Icon-svg,
+.c6:hover .Icon-svg {
+  color: unset;
+}
+
 .c6:hover {
   cursor: pointer;
 }

package/__flow__/Menu/index.stories.js

@@ -5,6 +5,7 @@ import OverflowList from "../OverflowList";
 import Icon from "../Icon";
 import { names } from "./names";
 import Text from "../Text";
+import Box from "../Box";
 
 const fruit = ["Apple", "Banana", "Orange"];
 const maybeFruit = ["Tomato", "Cucumber", "Squash"];
@@ -207,19 +208,28 @@ export const MenuWithCheckboxes = (props) => {
 // Specifically testing that icons with a color inverse when active like the text does.
 export const MenuWithIcons = (props) => {
   return (
-    <Menu width="200px" {...props}>
-      <Menu.Item key="positive" onClick={() => alert("positive")}>
-        <Icon name="flat-positive-sentiment" mr={200} color="blue.600" />
-        Positive
-      </Menu.Item>
-      <Menu.Item key="negative" onClick={() => alert("negative")}>
-        <Icon name="flat-negative-sentiment" mr={200} color="red.500" />
-        Negative
-      </Menu.Item>
-      <Menu.Item key="neutral" onClick={() => alert("neutral")}>
-        <Icon name="flat-neutral-sentiment" mr={200} />
-        Neutral
-      </Menu.Item>
-    </Menu>
+    <Box
+      width="200px"
+      border={500}
+      borderRadius="outer"
+      borderColor="container.border.base"
+      boxShadow={300}
+      backgroundColor="container.background.base"
+    >
+      <Menu {...props}>
+        <Menu.Item key="positive" onClick={() => alert("positive")}>
+          <Icon name="flat-positive-sentiment" mr={200} color="icon.info" />
+          Positive
+        </Menu.Item>
+        <Menu.Item key="negative" onClick={() => alert("negative")}>
+          <Icon name="flat-negative-sentiment" mr={200} color="icon.error" />
+          Negative
+        </Menu.Item>
+        <Menu.Item key="neutral" onClick={() => alert("neutral")}>
+          <Icon name="flat-neutral-sentiment" mr={200} />
+          Neutral
+        </Menu.Item>
+      </Menu>
+    </Box>
   );
 };

package/__flow__/Menu/styles.js

@@ -62,6 +62,10 @@ export const MenuItemContainer = styled<
         color: ${(props) => props.theme.colors.text.body};
         background-color: ${(props) =>
           props.theme.colors.listItem.background.hover};
+
+        .Icon-svg {
+          color: unset;
+        }
       }
     `}
 

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

@@ -189,6 +189,10 @@ const darkTheme = {
         selected: COLORS.COLOR_NEUTRAL_0,
       },
     },
+    dataviz: {
+      map: datavizPalette.DATAVIZ_COLORS_MAP,
+      list: datavizPalette.DATAVIZ_COLORS_LIST,
+    },
     ...datavizPalette,
   },
   mode: "dark",

package/__flow__/themes/default/theme.js

@@ -223,6 +223,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,
 };

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;

package/commonjs/Menu/styles.js

@@ -45,7 +45,7 @@ var MenuItemContainer = (0, _styledComponents.default)(_Box.default).withConfig(
     return props.theme.fontWeights.semibold;
   });
 }, function (props) {
-  return !props.disabled && (0, _styledComponents.css)(["&:focus,&:hover{color:", ";background-color:", ";}"], function (props) {
+  return !props.disabled && (0, _styledComponents.css)(["&:focus,&:hover{color:", ";background-color:", ";.Icon-svg{color:unset;}}"], function (props) {
     return props.theme.colors.text.body;
   }, function (props) {
     return props.theme.colors.listItem.background.hover;

package/commonjs/themes/dark/theme.js

@@ -188,6 +188,10 @@ var darkTheme = _extends({}, _theme.default, {
         hover: _seedsColor.default.COLOR_NEUTRAL_800,
         selected: _seedsColor.default.COLOR_NEUTRAL_0
       }
+    },
+    dataviz: {
+      map: _datavizPalette.datavizPalette.DATAVIZ_COLORS_MAP,
+      list: _datavizPalette.datavizPalette.DATAVIZ_COLORS_LIST
     }
   }, _datavizPalette.datavizPalette),
   mode: "dark"

package/commonjs/themes/default/theme.js

@@ -229,6 +229,10 @@ var colors = _extends({
     yelp: _seedsNetworkcolor.default.NETWORK_COLOR_YELP,
     whatsapp: _seedsNetworkcolor.default.NETWORK_COLOR_WHATSAPP,
     tiktok: _seedsNetworkcolor.default.NETWORK_COLOR_TIKTOK
+  },
+  dataviz: {
+    map: _datavizPalette.datavizPalette.DATAVIZ_COLORS_MAP,
+    list: _datavizPalette.datavizPalette.DATAVIZ_COLORS_LIST
   }
 }, _literalColors.default, _datavizPalette.datavizPalette);
 

package/dist/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/dist/themes/dark.scss

@@ -202,6 +202,31 @@ $dark: (
         whatsapp: #25D366,
         tiktok: #000000
       ),
+      dataviz: (
+        map: (
+          1: #24e0c5,
+          2: #a193f2,
+          3: #ff76ae,
+          4: #ffcd1c,
+          5: #56adf5,
+          6: #f282f5,
+          7: #75dd66,
+          8: #ff9c5d,
+          9: #db3e3e,
+          10: #0b968f,
+          11: #6f5ed3,
+          12: #ce3665,
+          13: #ba7506,
+          14: #2079c3,
+          15: #ac44a8,
+          16: #0ca750,
+          17: #ed7024,
+          18: #ff7f6e,
+          19: #c2f2bd,
+          20: #ffe99a
+        ),
+        list: (#24e0c5, #a193f2, #ff76ae, #ffcd1c, #56adf5, #f282f5, #75dd66, #ff9c5d, #db3e3e, #0b968f, #6f5ed3, #ce3665, #ba7506, #2079c3, #ac44a8, #0ca750, #ed7024, #ff7f6e, #c2f2bd, #ffe99a)
+      ),
       neutral: (
         0: #FFFFFF,
         100: #f3f4f4,

package/dist/themes/default.scss

@@ -302,6 +302,31 @@ $default: (
         whatsapp: #25D366,
         tiktok: #000000
       ),
+      dataviz: (
+        map: (
+          1: #08c4b2,
+          2: #6f5ed3,
+          3: #ce3665,
+          4: #ffcd1c,
+          5: #3896e3,
+          6: #db61db,
+          7: #59cb59,
+          8: #fc8943,
+          9: #db3e3e,
+          10: #026661,
+          11: #a193f2,
+          12: #931847,
+          13: #944c0c,
+          14: #0c5689,
+          15: #6c2277,
+          16: #006b40,
+          17: #962c0b,
+          18: #ff7f6e,
+          19: #0ca750,
+          20: #ba7506
+        ),
+        list: (#08c4b2, #6f5ed3, #ce3665, #ffcd1c, #3896e3, #db61db, #59cb59, #fc8943, #db3e3e, #026661, #a193f2, #931847, #944c0c, #0c5689, #6c2277, #006b40, #962c0b, #ff7f6e, #0ca750, #ba7506)
+      ),
       neutral: (
         0: #FFFFFF,
         100: #f3f4f4,

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/Menu/styles.js

@@ -31,7 +31,7 @@ export var MenuItemContainer = styled(Box).withConfig({
     return props.theme.fontWeights.semibold;
   });
 }, function (props) {
-  return !props.disabled && css(["&:focus,&:hover{color:", ";background-color:", ";}"], function (props) {
+  return !props.disabled && css(["&:focus,&:hover{color:", ";background-color:", ";.Icon-svg{color:unset;}}"], function (props) {
     return props.theme.colors.text.body;
   }, function (props) {
     return props.theme.colors.listItem.background.hover;

package/lib/themes/dark/theme.js

@@ -178,6 +178,10 @@ var darkTheme = _extends({}, defaultTheme, {
         hover: COLORS.COLOR_NEUTRAL_800,
         selected: COLORS.COLOR_NEUTRAL_0
       }
+    },
+    dataviz: {
+      map: datavizPalette.DATAVIZ_COLORS_MAP,
+      list: datavizPalette.DATAVIZ_COLORS_LIST
     }
   }, datavizPalette),
   mode: "dark"

package/lib/themes/default/theme.js

@@ -211,6 +211,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);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "8.6.4-dar10.3",
+  "version": "8.8.0-dar35-beta.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": {