@sproutsocial/racine 8.6.3 → 8.6.4-dar10.2

package/CHANGELOG.md

@@ -1,11 +1,5 @@
 # Change Log
 
-## 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,11 +413,6 @@ 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;
 }
@@ -451,11 +446,6 @@ 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;
 }
@@ -708,11 +698,6 @@ 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;
 }
@@ -746,11 +731,6 @@ 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,11 +47,6 @@ exports[`Menu AsMenu should match snapshot 1`] = `
   background-color: #f3f4f4;
 }
 
-.c7:focus .Icon-svg,
-.c7:hover .Icon-svg {
-  color: unset;
-}
-
 .c7:hover {
   cursor: pointer;
 }
@@ -85,11 +80,6 @@ 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,7 +5,6 @@ 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"];
@@ -208,28 +207,19 @@ export const MenuWithCheckboxes = (props) => {
 // Specifically testing that icons with a color inverse when active like the text does.
 export const MenuWithIcons = (props) => {
   return (
-    <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>
+    <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>
   );
 };

package/__flow__/Menu/styles.js

@@ -62,10 +62,6 @@ 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/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:", ";.Icon-svg{color:unset;}}"], function (props) {
+  return !props.disabled && (0, _styledComponents.css)(["&:focus,&:hover{color:", ";background-color:", ";}"], function (props) {
     return props.theme.colors.text.body;
   }, function (props) {
     return props.theme.colors.listItem.background.hover;

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:", ";.Icon-svg{color:unset;}}"], function (props) {
+  return !props.disabled && css(["&:focus,&:hover{color:", ";background-color:", ";}"], function (props) {
     return props.theme.colors.text.body;
   }, function (props) {
     return props.theme.colors.listItem.background.hover;

package/lib/themes/dark/dark.scss

@@ -0,0 +1,569 @@
+$dark: (
+  __esModule: true,
+  default: (
+    breakpoints: (900px, 1200px, 1500px, 1800px),
+    colors: (
+      app: (
+        background: (
+          base: #162020
+        )
+      ),
+      container: (
+        background: (
+          base: #273333,
+          success: #006b40,
+          warning: #944c0c,
+          error: #992222,
+          info: #0c5689,
+          opportunity: #5e4eba,
+          danger: #992222,
+          decorative: (
+            green: #006b40,
+            blue: #0c5689,
+            purple: #5e4eba,
+            yellow: #944c0c,
+            orange: #962c0b,
+            red: #992222,
+            neutral: #273333
+          ),
+          selected: #FFFFFF
+        ),
+        border: (
+          base: #040404,
+          success: #59cb59,
+          warning: #ffbc00,
+          error: #ed4c42,
+          danger: #ed4c42,
+          info: #2b87d3,
+          opportunity: #9180f4,
+          decorative: (
+            green: #59cb59,
+            blue: #2b87d3,
+            purple: #9180f4,
+            yellow: #ffbc00,
+            orange: #f57d33,
+            red: #ed4c42,
+            neutral: #929a9b
+          ),
+          selected: #FFFFFF
+        )
+      ),
+      button: (
+        primary: (
+          background: (
+            base: #56adf5,
+            hover: #a1d2f8,
+            active: #c7e4f9
+          ),
+          border: (
+            base: transparent
+          ),
+          text: (
+            base: #273333,
+            hover: #162020
+          )
+        ),
+        secondary: (
+          background: (
+            base: transparent,
+            hover: #f3f4f4,
+            active: #FFFFFF
+          ),
+          border: (
+            base: #FFFFFF
+          ),
+          text: (
+            base: #FFFFFF,
+            hover: #364141
+          )
+        ),
+        pill: (
+          background: (
+            base: transparent,
+            hover: #162020,
+            active: #273333
+          ),
+          border: (
+            base: transparent
+          ),
+          text: (
+            base: #f3f4f4,
+            hover: #FFFFFF
+          )
+        ),
+        destructive: (
+          background: (
+            base: #ff7f6e,
+            hover: #ff9c8f,
+            active: #ffb8b1
+          ),
+          border: (
+            base: transparent
+          ),
+          text: (
+            base: #273333,
+            hover: #162020
+          )
+        ),
+        placeholder: (
+          background: (
+            base: transparent,
+            hover: #040404,
+            active: #040404
+          ),
+          border: (
+            base: #929a9b
+          ),
+          text: (
+            base: #56adf5,
+            hover: #a1d2f8
+          )
+        ),
+        unstyled: (
+          background: (
+            base: transparent
+          ),
+          border: (
+            base: transparent
+          ),
+          text: (
+            base: #c8cccc,
+            hover: #dee1e1
+          )
+        )
+      ),
+      link: (
+        base: #56adf5,
+        hover: #a1d2f8
+      ),
+      text: (
+        headline: #FFFFFF,
+        subtext: #c8cccc,
+        body: #f3f4f4,
+        inverse: #273333,
+        error: #ff7f6e
+      ),
+      icon: (
+        base: #f3f4f4,
+        inverse: #273333,
+        success: #d7f4d7,
+        warning: #fdefcd,
+        error: #ffd5d2,
+        danger: #ffd5d2,
+        info: #dcf2ff,
+        opportunity: #eaeaf9
+      ),
+      form: (
+        background: (
+          base: #273333,
+          selected: #FFFFFF
+        ),
+        border: (
+          base: #929a9b,
+          error: #ed4c42,
+          warning: #ffbc00,
+          selected: #FFFFFF
+        ),
+        placeholder: (
+          base: #929a9b
+        )
+      ),
+      listItem: (
+        background: (
+          base: transparent,
+          hover: #364141,
+          selected: #FFFFFF
+        )
+      ),
+      network: (
+        twitter: #1da1f2,
+        twitter_like: #e0245e,
+        facebook: #217bee,
+        facebook_audience_network: #58409B,
+        linkedin: #0A66C2,
+        instagram: #e4405f,
+        feedly: #2bb24c,
+        analytics: #ef6c00,
+        youtube: #ff0000,
+        messenger: #0084ff,
+        snapchat: #fffc00,
+        pinterest: #E60023,
+        tumblr: #35465c,
+        reddit: #ff4500,
+        tripadvisor: #00B087,
+        glassdoor: #0CAA41,
+        google_my_business: #4285F4,
+        google_business_messages: #1A73EA,
+        salesforce: #1589EE,
+        zendesk: #03363D,
+        hubspot: #FF7A59,
+        microsoft_dynamics: #002050,
+        yelp: #FF1A1A,
+        whatsapp: #25D366,
+        tiktok: #000000
+      ),
+      neutral: (
+        0: #FFFFFF,
+        100: #f3f4f4,
+        200: #dee1e1,
+        300: #c8cccc,
+        400: #b0b6b7,
+        500: #929a9b,
+        600: #6e797a,
+        700: #515e5f,
+        800: #364141,
+        900: #273333,
+        1000: #162020
+      ),
+      green: (
+        0: #ebf9eb,
+        100: #d7f4d7,
+        200: #c2f2bd,
+        300: #98e58e,
+        400: #75dd66,
+        500: #59cb59,
+        600: #2bb656,
+        700: #0ca750,
+        800: #008b46,
+        900: #006b40,
+        1000: #08422f,
+        1100: #002b20
+      ),
+      red: (
+        0: #ffeae9,
+        100: #ffd5d2,
+        200: #ffb8b1,
+        300: #ff9c8f,
+        400: #ff7f6e,
+        500: #f76054,
+        600: #ed4c42,
+        700: #db3e3e,
+        800: #c63434,
+        900: #992222,
+        1000: #6d1313
+      ),
+      blue: (
+        0: #e9f8ff,
+        100: #dcf2ff,
+        200: #c7e4f9,
+        300: #a1d2f8,
+        400: #56adf5,
+        500: #3896e3,
+        600: #2b87d3,
+        700: #2079c3,
+        800: #116daa,
+        900: #0c5689,
+        1000: #0a3960,
+        1100: #002138
+      ),
+      teal: (
+        0: #e5f9f5,
+        100: #cdf7ef,
+        200: #b3f2e6,
+        300: #7dead5,
+        400: #24e0c5,
+        500: #08c4b2,
+        600: #00a99c,
+        700: #0b968f,
+        800: #067c7c,
+        900: #026661,
+        1000: #083f3f,
+        1100: #002528
+      ),
+      aqua: (
+        0: #d9fcfb,
+        100: #c5f9f9,
+        200: #a5f2f2,
+        300: #76e5e2,
+        400: #33d6e2,
+        500: #17b8ce,
+        600: #0797ae,
+        700: #0b8599,
+        800: #0f6e84,
+        900: #035e73,
+        1000: #083d4f,
+        1100: #002838
+      ),
+      purple: (
+        0: #f2f2f9,
+        100: #eaeaf9,
+        200: #d8d7f9,
+        300: #c1c1f7,
+        400: #a193f2,
+        500: #9180f4,
+        600: #816fea,
+        700: #6f5ed3,
+        800: #5e4eba,
+        900: #483a9c,
+        1000: #2d246b,
+        1100: #1d1d38
+      ),
+      magenta: (
+        0: #fef0ff,
+        100: #f9e3fc,
+        200: #f4c4f7,
+        300: #edadf2,
+        400: #f282f5,
+        500: #db61db,
+        600: #c44eb9,
+        700: #ac44a8,
+        800: #8f3896,
+        900: #6c2277,
+        1000: #451551,
+        1100: #29192d
+      ),
+      yellow: (
+        0: #fff8e2,
+        100: #fdefcd,
+        200: #ffe99a,
+        300: #ffe16e,
+        400: #ffd943,
+        500: #ffcd1c,
+        600: #ffbc00,
+        700: #dd9903,
+        800: #ba7506,
+        900: #944c0c,
+        1000: #542a00,
+        1100: #2d1a05
+      ),
+      pink: (
+        0: #ffe9f3,
+        100: #fcdbeb,
+        200: #ffb5d5,
+        300: #ff95c1,
+        400: #ff76ae,
+        500: #ef588b,
+        600: #e0447c,
+        700: #ce3665,
+        800: #b22f5b,
+        900: #931847,
+        1000: #561231,
+        1100: #2b1721
+      ),
+      orange: (
+        0: #ffede3,
+        100: #fcdccc,
+        200: #ffc6a4,
+        300: #ffb180,
+        400: #ff9c5d,
+        500: #fc8943,
+        600: #f57d33,
+        700: #ed7024,
+        800: #ce5511,
+        900: #962c0b,
+        1000: #601700,
+        1100: #2d130e
+      ),
+      DATAVIZ_COLORS_LIST: (#24e0c5, #a193f2, #ff76ae, #ffcd1c, #56adf5, #f282f5, #75dd66, #ff9c5d, #db3e3e, #0b968f, #6f5ed3, #ce3665, #ba7506, #2079c3, #ac44a8, #0ca750, #ed7024, #ff7f6e, #c2f2bd, #ffe99a),
+      DATAVIZ_COLORS_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
+      )
+    ),
+    typography: (
+      100: (
+        fontSize: 11px,
+        lineHeight: 18.666666666666668px
+      ),
+      200: (
+        fontSize: 13px,
+        lineHeight: 21.333333333333332px
+      ),
+      300: (
+        fontSize: 16px,
+        lineHeight: 24px
+      ),
+      400: (
+        fontSize: 18px,
+        lineHeight: 26.666666666666668px
+      ),
+      500: (
+        fontSize: 21px,
+        lineHeight: 29.333333333333332px
+      ),
+      600: (
+        fontSize: 24px,
+        lineHeight: 32px
+      ),
+      700: (
+        fontSize: 32px,
+        lineHeight: 40px
+      ),
+      800: (
+        fontSize: 43px,
+        lineHeight: 50.666666666666664px
+      ),
+      900: (
+        fontSize: 57px,
+        lineHeight: 64px
+      ),
+      1000: (
+        fontSize: 76px,
+        lineHeight: 80px
+      ),
+      1100: (
+        fontSize: 101px,
+        lineHeight: 101.33333333333333px
+      ),
+      1200: (
+        fontSize: 135px,
+        lineHeight: 125.33333333333333px
+      ),
+      typography: (
+        100: (
+          fontSize: 11px,
+          lineHeight: 18.666666666666668px
+        ),
+        200: (
+          fontSize: 13px,
+          lineHeight: 21.333333333333332px
+        ),
+        300: (
+          fontSize: 16px,
+          lineHeight: 24px
+        ),
+        400: (
+          fontSize: 18px,
+          lineHeight: 26.666666666666668px
+        ),
+        500: (
+          fontSize: 21px,
+          lineHeight: 29.333333333333332px
+        ),
+        600: (
+          fontSize: 24px,
+          lineHeight: 32px
+        ),
+        700: (
+          fontSize: 32px,
+          lineHeight: 40px
+        ),
+        800: (
+          fontSize: 43px,
+          lineHeight: 50.666666666666664px
+        ),
+        900: (
+          fontSize: 57px,
+          lineHeight: 64px
+        ),
+        1000: (
+          fontSize: 76px,
+          lineHeight: 80px
+        ),
+        1100: (
+          fontSize: 101px,
+          lineHeight: 101.33333333333333px
+        ),
+        1200: (
+          fontSize: 135px,
+          lineHeight: 125.33333333333333px
+        )
+      )
+    ),
+    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif",
+    fontWeights: (
+      normal: 400,
+      semibold: 600,
+      bold: 700,
+      extrabold: 800
+    ),
+    space: (
+      0: 0px,
+      100: 2px,
+      200: 4px,
+      300: 8px,
+      350: 12px,
+      400: 16px,
+      450: 24px,
+      500: 32px,
+      600: 40px,
+      space: (
+        0: 0px,
+        100: 2px,
+        200: 4px,
+        300: 8px,
+        350: 12px,
+        400: 16px,
+        450: 24px,
+        500: 32px,
+        600: 40px
+      ),
+      -space: (
+        0: -0px,
+        100: -2px,
+        200: -4px,
+        300: -8px,
+        350: -12px,
+        400: -16px,
+        450: -24px,
+        500: -32px,
+        600: -40px
+      )
+    ),
+    radii: (
+      400: 4px,
+      500: 6px,
+      600: 8px,
+      1000: 999999px,
+      inner: 6px,
+      outer: 8px,
+      pill: 999999px,
+      radii: (
+        400: 4px,
+        500: 6px,
+        600: 8px,
+        1000: 999999px,
+        inner: 6px,
+        outer: 8px,
+        pill: 999999px
+      )
+    ),
+    borders: (
+      500: 1px solid
+    ),
+    borderWidths: (
+      500: 1px
+    ),
+    shadows: (
+      100: 0px 2px 4px rgba(39,51,51,.24),
+      200: 0px 4px 8px rgba(39,51,51,.24),
+      300: 0px 8px 16px rgba(39,51,51,.24),
+      400: 0px 16px 32px rgba(39,51,51,.24),
+      shadows: (
+        100: 0px 2px 4px rgba(39,51,51,.24),
+        200: 0px 4px 8px rgba(39,51,51,.24),
+        300: 0px 8px 16px rgba(39,51,51,.24),
+        400: 0px 16px 32px rgba(39,51,51,.24)
+      )
+    ),
+    easing: (
+      ease_in: cubic-bezier(.4, 0, .7, .2),
+      ease_out: cubic-bezier(0, 0, .2, 1),
+      ease_inout: cubic-bezier(.4, 0, .2, 1)
+    ),
+    duration: (
+      fast: .15s,
+      medium: .3s,
+      slow: .6s
+    ),
+    mode: dark
+  )
+);

package/lib/themes/default/default.scss

@@ -0,0 +1,668 @@
+$default: (
+  __esModule: true,
+  breakpoints: (900px, 1200px, 1500px, 1800px),
+  typography: (
+    100: (
+      fontSize: 11px,
+      lineHeight: 18.666666666666668px
+    ),
+    200: (
+      fontSize: 13px,
+      lineHeight: 21.333333333333332px
+    ),
+    300: (
+      fontSize: 16px,
+      lineHeight: 24px
+    ),
+    400: (
+      fontSize: 18px,
+      lineHeight: 26.666666666666668px
+    ),
+    500: (
+      fontSize: 21px,
+      lineHeight: 29.333333333333332px
+    ),
+    600: (
+      fontSize: 24px,
+      lineHeight: 32px
+    ),
+    700: (
+      fontSize: 32px,
+      lineHeight: 40px
+    ),
+    800: (
+      fontSize: 43px,
+      lineHeight: 50.666666666666664px
+    ),
+    900: (
+      fontSize: 57px,
+      lineHeight: 64px
+    ),
+    1000: (
+      fontSize: 76px,
+      lineHeight: 80px
+    ),
+    1100: (
+      fontSize: 101px,
+      lineHeight: 101.33333333333333px
+    ),
+    1200: (
+      fontSize: 135px,
+      lineHeight: 125.33333333333333px
+    )
+  ),
+  fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif",
+  fontWeights: (
+    normal: 400,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800
+  ),
+  space: (
+    0: 0px,
+    100: 2px,
+    200: 4px,
+    300: 8px,
+    350: 12px,
+    400: 16px,
+    450: 24px,
+    500: 32px,
+    600: 40px
+  ),
+  radii: (
+    400: 4px,
+    500: 6px,
+    600: 8px,
+    1000: 999999px,
+    inner: 6px,
+    outer: 8px,
+    pill: 999999px
+  ),
+  borders: (
+    500: 1px solid
+  ),
+  borderWidths: (
+    500: 1px
+  ),
+  shadows: (
+    100: 0px 2px 4px rgba(39,51,51,.24),
+    200: 0px 4px 8px rgba(39,51,51,.24),
+    300: 0px 8px 16px rgba(39,51,51,.24),
+    400: 0px 16px 32px rgba(39,51,51,.24)
+  ),
+  easing: (
+    ease_in: cubic-bezier(.4, 0, .7, .2),
+    ease_out: cubic-bezier(0, 0, .2, 1),
+    ease_inout: cubic-bezier(.4, 0, .2, 1)
+  ),
+  duration: (
+    fast: .15s,
+    medium: .3s,
+    slow: .6s
+  ),
+  default: (
+    breakpoints: (900px, 1200px, 1500px, 1800px),
+    colors: (
+      app: (
+        background: (
+          base: #f3f4f4
+        )
+      ),
+      container: (
+        background: (
+          base: #FFFFFF,
+          success: #d7f4d7,
+          warning: #fdefcd,
+          error: #ffd5d2,
+          info: #dcf2ff,
+          opportunity: #eaeaf9,
+          danger: #ffd5d2,
+          decorative: (
+            green: #d7f4d7,
+            blue: #dcf2ff,
+            purple: #eaeaf9,
+            yellow: #fdefcd,
+            orange: #fcdccc,
+            red: #ffd5d2,
+            neutral: #f3f4f4
+          ),
+          selected: #364141
+        ),
+        border: (
+          base: #dee1e1,
+          success: #59cb59,
+          warning: #ffbc00,
+          error: #ed4c42,
+          danger: #ed4c42,
+          info: #2b87d3,
+          opportunity: #9180f4,
+          decorative: (
+            green: #59cb59,
+            blue: #2b87d3,
+            purple: #9180f4,
+            yellow: #ffbc00,
+            orange: #f57d33,
+            red: #ed4c42,
+            neutral: #929a9b
+          ),
+          selected: #364141
+        )
+      ),
+      button: (
+        primary: (
+          background: (
+            base: #2079c3,
+            hover: #116daa,
+            active: #0c5689
+          ),
+          border: (
+            base: transparent
+          ),
+          text: (
+            base: #FFFFFF,
+            hover: #FFFFFF
+          )
+        ),
+        secondary: (
+          background: (
+            base: transparent,
+            hover: #364141,
+            active: #273333
+          ),
+          border: (
+            base: #364141
+          ),
+          text: (
+            base: #364141,
+            hover: #FFFFFF
+          )
+        ),
+        pill: (
+          background: (
+            base: transparent,
+            hover: #f3f4f4,
+            active: #dee1e1
+          ),
+          border: (
+            base: transparent
+          ),
+          text: (
+            base: #364141,
+            hover: #273333
+          )
+        ),
+        destructive: (
+          background: (
+            base: #c63434,
+            hover: #992222,
+            active: #6d1313
+          ),
+          border: (
+            base: transparent
+          ),
+          text: (
+            base: #FFFFFF,
+            hover: #FFFFFF
+          )
+        ),
+        placeholder: (
+          background: (
+            base: transparent,
+            hover: #FFFFFF,
+            active: #FFFFFF
+          ),
+          border: (
+            base: #929a9b
+          ),
+          text: (
+            base: #2079c3,
+            hover: #116daa
+          )
+        ),
+        unstyled: (
+          background: (
+            base: transparent
+          ),
+          border: (
+            base: transparent
+          ),
+          text: (
+            base: #515e5f,
+            hover: #273333
+          )
+        )
+      ),
+      link: (
+        base: #116daa,
+        hover: #0c5689
+      ),
+      text: (
+        headline: #273333,
+        subtext: #515e5f,
+        body: #364141,
+        inverse: #FFFFFF,
+        error: #c63434
+      ),
+      icon: (
+        base: #364141,
+        inverse: #FFFFFF,
+        success: #006b40,
+        warning: #944c0c,
+        error: #992222,
+        danger: #992222,
+        info: #0c5689,
+        opportunity: #5e4eba
+      ),
+      form: (
+        background: (
+          base: #FFFFFF,
+          selected: #364141
+        ),
+        border: (
+          base: #b0b6b7,
+          error: #ed4c42,
+          warning: #ffbc00,
+          selected: #364141
+        ),
+        placeholder: (
+          base: #6e797a
+        )
+      ),
+      listItem: (
+        background: (
+          base: transparent,
+          hover: #f3f4f4,
+          selected: #364141
+        )
+      ),
+      network: (
+        twitter: #1da1f2,
+        twitter_like: #e0245e,
+        facebook: #217bee,
+        facebook_audience_network: #58409B,
+        linkedin: #0A66C2,
+        instagram: #e4405f,
+        feedly: #2bb24c,
+        analytics: #ef6c00,
+        youtube: #ff0000,
+        messenger: #0084ff,
+        snapchat: #fffc00,
+        pinterest: #E60023,
+        tumblr: #35465c,
+        reddit: #ff4500,
+        tripadvisor: #00B087,
+        glassdoor: #0CAA41,
+        google_my_business: #4285F4,
+        google_business_messages: #1A73EA,
+        salesforce: #1589EE,
+        zendesk: #03363D,
+        hubspot: #FF7A59,
+        microsoft_dynamics: #002050,
+        yelp: #FF1A1A,
+        whatsapp: #25D366,
+        tiktok: #000000
+      ),
+      neutral: (
+        0: #FFFFFF,
+        100: #f3f4f4,
+        200: #dee1e1,
+        300: #c8cccc,
+        400: #b0b6b7,
+        500: #929a9b,
+        600: #6e797a,
+        700: #515e5f,
+        800: #364141,
+        900: #273333,
+        1000: #162020
+      ),
+      green: (
+        0: #ebf9eb,
+        100: #d7f4d7,
+        200: #c2f2bd,
+        300: #98e58e,
+        400: #75dd66,
+        500: #59cb59,
+        600: #2bb656,
+        700: #0ca750,
+        800: #008b46,
+        900: #006b40,
+        1000: #08422f,
+        1100: #002b20
+      ),
+      red: (
+        0: #ffeae9,
+        100: #ffd5d2,
+        200: #ffb8b1,
+        300: #ff9c8f,
+        400: #ff7f6e,
+        500: #f76054,
+        600: #ed4c42,
+        700: #db3e3e,
+        800: #c63434,
+        900: #992222,
+        1000: #6d1313
+      ),
+      blue: (
+        0: #e9f8ff,
+        100: #dcf2ff,
+        200: #c7e4f9,
+        300: #a1d2f8,
+        400: #56adf5,
+        500: #3896e3,
+        600: #2b87d3,
+        700: #2079c3,
+        800: #116daa,
+        900: #0c5689,
+        1000: #0a3960,
+        1100: #002138
+      ),
+      teal: (
+        0: #e5f9f5,
+        100: #cdf7ef,
+        200: #b3f2e6,
+        300: #7dead5,
+        400: #24e0c5,
+        500: #08c4b2,
+        600: #00a99c,
+        700: #0b968f,
+        800: #067c7c,
+        900: #026661,
+        1000: #083f3f,
+        1100: #002528
+      ),
+      aqua: (
+        0: #d9fcfb,
+        100: #c5f9f9,
+        200: #a5f2f2,
+        300: #76e5e2,
+        400: #33d6e2,
+        500: #17b8ce,
+        600: #0797ae,
+        700: #0b8599,
+        800: #0f6e84,
+        900: #035e73,
+        1000: #083d4f,
+        1100: #002838
+      ),
+      purple: (
+        0: #f2f2f9,
+        100: #eaeaf9,
+        200: #d8d7f9,
+        300: #c1c1f7,
+        400: #a193f2,
+        500: #9180f4,
+        600: #816fea,
+        700: #6f5ed3,
+        800: #5e4eba,
+        900: #483a9c,
+        1000: #2d246b,
+        1100: #1d1d38
+      ),
+      magenta: (
+        0: #fef0ff,
+        100: #f9e3fc,
+        200: #f4c4f7,
+        300: #edadf2,
+        400: #f282f5,
+        500: #db61db,
+        600: #c44eb9,
+        700: #ac44a8,
+        800: #8f3896,
+        900: #6c2277,
+        1000: #451551,
+        1100: #29192d
+      ),
+      yellow: (
+        0: #fff8e2,
+        100: #fdefcd,
+        200: #ffe99a,
+        300: #ffe16e,
+        400: #ffd943,
+        500: #ffcd1c,
+        600: #ffbc00,
+        700: #dd9903,
+        800: #ba7506,
+        900: #944c0c,
+        1000: #542a00,
+        1100: #2d1a05
+      ),
+      pink: (
+        0: #ffe9f3,
+        100: #fcdbeb,
+        200: #ffb5d5,
+        300: #ff95c1,
+        400: #ff76ae,
+        500: #ef588b,
+        600: #e0447c,
+        700: #ce3665,
+        800: #b22f5b,
+        900: #931847,
+        1000: #561231,
+        1100: #2b1721
+      ),
+      orange: (
+        0: #ffede3,
+        100: #fcdccc,
+        200: #ffc6a4,
+        300: #ffb180,
+        400: #ff9c5d,
+        500: #fc8943,
+        600: #f57d33,
+        700: #ed7024,
+        800: #ce5511,
+        900: #962c0b,
+        1000: #601700,
+        1100: #2d130e
+      ),
+      DATAVIZ_COLORS_LIST: (#08c4b2, #6f5ed3, #ce3665, #ffcd1c, #3896e3, #db61db, #59cb59, #fc8943, #db3e3e, #026661, #a193f2, #931847, #944c0c, #0c5689, #6c2277, #006b40, #962c0b, #ff7f6e, #0ca750, #ba7506),
+      DATAVIZ_COLORS_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
+      )
+    ),
+    typography: (
+      100: (
+        fontSize: 11px,
+        lineHeight: 18.666666666666668px
+      ),
+      200: (
+        fontSize: 13px,
+        lineHeight: 21.333333333333332px
+      ),
+      300: (
+        fontSize: 16px,
+        lineHeight: 24px
+      ),
+      400: (
+        fontSize: 18px,
+        lineHeight: 26.666666666666668px
+      ),
+      500: (
+        fontSize: 21px,
+        lineHeight: 29.333333333333332px
+      ),
+      600: (
+        fontSize: 24px,
+        lineHeight: 32px
+      ),
+      700: (
+        fontSize: 32px,
+        lineHeight: 40px
+      ),
+      800: (
+        fontSize: 43px,
+        lineHeight: 50.666666666666664px
+      ),
+      900: (
+        fontSize: 57px,
+        lineHeight: 64px
+      ),
+      1000: (
+        fontSize: 76px,
+        lineHeight: 80px
+      ),
+      1100: (
+        fontSize: 101px,
+        lineHeight: 101.33333333333333px
+      ),
+      1200: (
+        fontSize: 135px,
+        lineHeight: 125.33333333333333px
+      ),
+      typography: (
+        100: (
+          fontSize: 11px,
+          lineHeight: 18.666666666666668px
+        ),
+        200: (
+          fontSize: 13px,
+          lineHeight: 21.333333333333332px
+        ),
+        300: (
+          fontSize: 16px,
+          lineHeight: 24px
+        ),
+        400: (
+          fontSize: 18px,
+          lineHeight: 26.666666666666668px
+        ),
+        500: (
+          fontSize: 21px,
+          lineHeight: 29.333333333333332px
+        ),
+        600: (
+          fontSize: 24px,
+          lineHeight: 32px
+        ),
+        700: (
+          fontSize: 32px,
+          lineHeight: 40px
+        ),
+        800: (
+          fontSize: 43px,
+          lineHeight: 50.666666666666664px
+        ),
+        900: (
+          fontSize: 57px,
+          lineHeight: 64px
+        ),
+        1000: (
+          fontSize: 76px,
+          lineHeight: 80px
+        ),
+        1100: (
+          fontSize: 101px,
+          lineHeight: 101.33333333333333px
+        ),
+        1200: (
+          fontSize: 135px,
+          lineHeight: 125.33333333333333px
+        )
+      )
+    ),
+    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif",
+    fontWeights: (
+      normal: 400,
+      semibold: 600,
+      bold: 700,
+      extrabold: 800
+    ),
+    space: (
+      0: 0px,
+      100: 2px,
+      200: 4px,
+      300: 8px,
+      350: 12px,
+      400: 16px,
+      450: 24px,
+      500: 32px,
+      600: 40px,
+      space: (
+        0: 0px,
+        100: 2px,
+        200: 4px,
+        300: 8px,
+        350: 12px,
+        400: 16px,
+        450: 24px,
+        500: 32px,
+        600: 40px
+      ),
+      -space: (
+        0: -0px,
+        100: -2px,
+        200: -4px,
+        300: -8px,
+        350: -12px,
+        400: -16px,
+        450: -24px,
+        500: -32px,
+        600: -40px
+      )
+    ),
+    radii: (
+      400: 4px,
+      500: 6px,
+      600: 8px,
+      1000: 999999px,
+      inner: 6px,
+      outer: 8px,
+      pill: 999999px,
+      radii: (
+        400: 4px,
+        500: 6px,
+        600: 8px,
+        1000: 999999px,
+        inner: 6px,
+        outer: 8px,
+        pill: 999999px
+      )
+    ),
+    borders: (
+      500: 1px solid
+    ),
+    borderWidths: (
+      500: 1px
+    ),
+    shadows: (
+      100: 0px 2px 4px rgba(39,51,51,.24),
+      200: 0px 4px 8px rgba(39,51,51,.24),
+      300: 0px 8px 16px rgba(39,51,51,.24),
+      400: 0px 16px 32px rgba(39,51,51,.24),
+      shadows: (
+        100: 0px 2px 4px rgba(39,51,51,.24),
+        200: 0px 4px 8px rgba(39,51,51,.24),
+        300: 0px 8px 16px rgba(39,51,51,.24),
+        400: 0px 16px 32px rgba(39,51,51,.24)
+      )
+    ),
+    easing: (
+      ease_in: cubic-bezier(.4, 0, .7, .2),
+      ease_out: cubic-bezier(0, 0, .2, 1),
+      ease_inout: cubic-bezier(.4, 0, .2, 1)
+    ),
+    duration: (
+      fast: .15s,
+      medium: .3s,
+      slow: .6s
+    )
+  )
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "8.6.3",
+  "version": "8.6.4-dar10.2",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -143,6 +143,7 @@
     "jest-dom": "^3.5.0",
     "jest-styled-components": "7.0.0-beta.1",
     "jscodeshift": "^0.6.4",
+    "json-to-scss": "^1.6.2",
     "lint-staged": "^10.2.11",
     "moment": "^2.29.1",
     "npm-run-all": "^4.1.2",