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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 9.0.0
+
+### Major Changes
+
+- a71802f: convert shadow tokens to semantic tokens
+
+## 8.8.0
+
+### Minor Changes
+
+- 2746920: Add SCSS themed mixin and functions
+
+### Patch Changes
+
+- 69ddb8e: Replace instances of Icon colors with semantic names
+
 ## 8.7.1
 
 ### Patch Changes

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[100] : "none"};
+      props.appearance === "placeholder" ? props.theme.shadows.low : "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[100]};
+    box-shadow: ${(props) => props.theme.shadows.low};
     transition: opacity ${(props) => props.theme.duration.medium}
       ${(props) => props.theme.easing.ease_inout};
   }

package/__flow__/Drawer/index.stories.js

@@ -51,7 +51,7 @@ const DrawerComponent = ({ direction, offset }) => {
         padding={300}
       >
         <Button onClick={onOpen}>
-          <Icon color="neutral.0" name="notifications" />
+          <Icon color="icon.inverse" name="notifications" />
         </Button>
       </Box>
       <Drawer
@@ -105,10 +105,10 @@ const NectarDrawerComponent = ({ direction, offset }) => {
         <Button
           onClick={isNotificationsOpen ? closeNotifications : openNotifications}
         >
-          <Icon color="neutral.800" name="notifications" />
+          <Icon color="icon.base" name="notifications" />
         </Button>
         <Button onClick={isPoplarOpen ? closePoplar : openPoplar} mt={400}>
-          <Icon color="neutral.800" name="link" />
+          <Icon color="icon.base" name="link" />
         </Button>
       </Box>
       <Drawer

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[400]};
+  box-shadow: ${(props) => props.theme.shadows.high};
   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[100]};
+  box-shadow: ${(props) => props.theme.shadows.low};
   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={300}
+      boxShadow="medium"
       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 rgba(39,51,51,.24);
+  box-shadow: 0px 8px 16px #2733333D;
   -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[300]};
+    box-shadow: ${(props) => props.theme.shadows.medium};
     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={300}
+    boxShadow="medium"
     p={400}
     m={300}
     {...rest}

package/__flow__/Token/index.js

@@ -15,6 +15,7 @@ export type TypeProps = {
   valid?: boolean,
   /** Indicates whether the token is disabled */
   disabled?: boolean,
+  palette?: "neutral" | "blue",
 };
 
 const Token = ({
@@ -24,6 +25,7 @@ const Token = ({
   qa,
   valid = true,
   disabled = false,
+  palette = "neutral",
   ...rest
 }: TypeProps) => {
   const textContainer = useTextContent("");
@@ -32,8 +34,9 @@ const Token = ({
     <Container
       ref={textContainer}
       valid={valid}
-      as={closeable || onClick ? "button" : "div"}
+      palette={palette}
       type={closeable || onClick ? "button" : undefined}
+      as={closeable || onClick ? "button" : "div"}
       closeable={closeable || onClick}
       disabled={disabled}
       onClick={onClick}

package/__flow__/Token/index.stories.js

@@ -80,3 +80,14 @@ export const staticWithIcon = () => (
 staticWithIcon.story = {
   name: "Static with icon",
 };
+
+export const bluePalette = () => (
+  <Token palette="blue" closeable={boolean("closeable", false)}>
+    <Icon size="mini" name="twitter" pr={300} />
+    <span>I'm blue</span>
+  </Token>
+);
+
+bluePalette.story = {
+  name: "Palette Variation",
+};

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);