@sproutsocial/racine 8.6.4-dar10.3 → 8.7.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 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__/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/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/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/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/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.7.0",
   "license": "MIT",
   "files": [
     "__flow__",