@sproutsocial/racine 9.1.0-token-beta.0 → 9.1.1-theme-extension.0

package/CHANGELOG.md

@@ -1,33 +1,5 @@
 # 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
-
-- 1cf97da: Remove font weight rule from Breadcrumbs styles
-
-## 8.7.0
-
-### Minor Changes
-
-- bcfb6eb: Export themes as scss variables
-
 ## 8.6.3
 
 ### Patch Changes

package/__flow__/Breadcrumb/styles.js

@@ -42,6 +42,11 @@ 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/index.stories.js

@@ -15,6 +15,7 @@ export const AsButton = () => (
     px={400}
     py={350}
     ariaLabel="Click to do something"
+    bg="container.background.error.hover"
   >
     This is an interactive Card.
   </Card>

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__/CustomThemeProvider/index.js

@@ -0,0 +1,16 @@
+// @flow strict-local
+import * as React from "react";
+import { ThemeProvider } from "styled-components";
+
+import typeof { default as TypeTheme } from "../themes/default/theme";
+
+type TypeProps = {|
+  theme?: TypeTheme,
+  children: React.Node,
+|};
+
+const CustomThemeProvider = (props: TypeProps) => (
+  <ThemeProvider theme={props.theme} {...props} />
+);
+
+export default CustomThemeProvider;

package/__flow__/Drawer/index.stories.js

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

@@ -5,10 +5,10 @@ import theme from "../themes/default/theme";
 
 import typeof { default as TypeTheme } from "../themes/default/theme";
 
-type TypeProps = $ReadOnly<{|
+type TypeProps = {|
   theme?: TypeTheme,
   children: React.Node,
-|}>;
+|};
 
 const ThemeProvider = (props: TypeProps) => (
   <BaseThemeProvider {...props} theme={props.theme || theme} />

package/__flow__/Token/index.js

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

package/__flow__/Token/index.stories.js

@@ -80,14 +80,3 @@ 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,78 +6,68 @@ 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;
-  /* 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};
-  `}
+  transition: all ${(props) => props.theme.duration.fast}
+    ${(props) => props.theme.easing.ease_inout};
 
   &:focus {
     ${focusRing}
   }
 
-  ${({ theme, palette }) =>
-    palette === "blue" &&
-    css`
-      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 &&
+  ${(props) =>
+    props.closeable &&
     css`
       cursor: pointer;
+
       &:hover,
       &:active {
-        box-shadow: ${theme.shadows.low};
+        color: ${(props) => props.theme.colors.text.body};
         border: 1px solid
-          ${theme.utils.interact(theme.colors.container.border.base)};
+          ${(props) => props.theme.colors.container.border.decorative.neutral};
+        background-color: ${(props) =>
+          props.theme.colors.container.background.decorative.neutral};
       }
     `}
 
-  ${({ disabled, theme }) =>
-    disabled &&
+  ${(props) =>
+    props.disabled &&
     css`
       opacity: 0.4;
       cursor: not-allowed;
       &:hover,
       &:active {
-        box-shadow: none;
-        border: 1px solid ${theme.colors.container.border.base};
+        background: ${(props) => props.theme.colors.container.background.base};
+        border: 1px solid ${(props) => props.theme.colors.container.border.base};
       }
     `}
-    
-  ${({ valid, theme }) =>
-    !valid &&
+
+  ${(props) =>
+    !props.valid &&
     css`
-      color: ${theme.colors.text.error};
-      background: ${theme.colors.container.background.error};
-      border: 1px solid ${theme.colors.container.border.error};
+      color: ${(props) => props.theme.colors.text.body};
+      border-color: ${(props) => props.theme.colors.container.border.error};
+      background: ${(props) => props.theme.colors.container.background.error};
+
       &:hover {
-        box-shadow: ${theme.shadows.low};
+        color: ${(props) => props.theme.colors.text.body};
         border: 1px solid
-          ${theme.utils.interact(theme.colors.container.border.error)};
+          ${(props) => props.theme.colors.container.border.error};
+        background-color: ${(props) =>
+          props.theme.colors.container.background.error};
       }
     `}
 

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__/index.js

@@ -43,6 +43,7 @@ export { default as Modal } from "./Modal";
 export { default as Popout } from "./Popout";
 export type { EnumPlacements } from "./Popout";
 export { default as ThemeProvider } from "./ThemeProvider";
+export { default as CustomThemeProvider } from "./CustomThemeProvider";
 export { default as Tooltip } from "./Tooltip";
 export { default as Drawer } from "./Drawer";
 export { default as LoaderButton } from "./LoaderButton";