@sproutsocial/racine 7.5.0 → 8.0.0-beta-dark-mode.1

package/__flow__/Input/styles.js

@@ -14,7 +14,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
     width: 100%;
     border: 1px solid transparent;
     border-radius: ${(props) => props.theme.radii[500]};
-    background-color: ${(props) => props.theme.colors.background.container};
+    background-color: ${(props) => props.theme.colors.form.background.base};
     color: ${(props) => props.theme.colors.text.body};
     outline: none;
     transition: border-color ${(props) => props.theme.duration.fast}
@@ -70,7 +70,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
     }
 
     &:placeholder {
-      color: ${(props) => props.theme.colors.forms.placeholderColor};
+      color: ${(props) => props.theme.colors.form.placeholder.base};
     }
 
     ${(props) =>
@@ -100,7 +100,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
     props.appearance === "primary" &&
     css`
       input {
-        border: 1px solid ${(props) => props.theme.colors.forms.borderColor};
+        border: 1px solid ${(props) => props.theme.colors.form.border.base};
       }
     `}
 
@@ -108,7 +108,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
     props.invalid &&
     css`
       input {
-        border-color: ${(props) => props.theme.colors.error.color};
+        border-color: ${(props) => props.theme.colors.form.border.error};
       }
     `}
 
@@ -116,7 +116,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
     props.warning &&
     css`
       input {
-        border-color: ${(props) => props.theme.colors.warning.color};
+        border-color: ${(props) => props.theme.colors.form.border.warning};
       }
     `}
 
@@ -127,7 +127,7 @@ export const Accessory: StyledComponent<any, TypeTheme, *> = styled.div`
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  color: ${(props) => props.theme.colors.icon.primary};
+  color: ${(props) => props.theme.colors.icon.base};
   display: flex;
   align-items: center;
 

package/__flow__/KeyboardKey/styles.js

@@ -7,8 +7,8 @@ import type { TypeTheme } from "../types/theme.flow";
 const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.div`
   display: inline-flex;
   color: ${(props) => props.theme.colors.text.body};
-  background-color: ${(props) => props.theme.colors.background.container};
-  border: 1px solid ${(props) => props.theme.colors.border};
+  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]};
   padding: 0 ${(props) => props.theme.space[200]};

package/__flow__/Link/styles.js

@@ -9,8 +9,6 @@ import type { TypeTheme } from "../types/theme.flow";
 const Container = styled<typeof Text, TypeTheme, any>(Text)`
   border: 0;
   font-family: ${(props) => props.theme.fontFamily};
-  transition: all ${(props) => props.theme.duration.fast}
-    ${(props) => props.theme.easing.ease_inout};
   text-decoration: ${(props) => (props.underline ? "underline" : "none")};
   appearance: none;
   cursor: pointer;
@@ -21,15 +19,15 @@ const Container = styled<typeof Text, TypeTheme, any>(Text)`
       cursor: not-allowed;
     `}
   font-weight: ${(props) => props.theme.fontWeights.semibold};
-  color: ${(props) => props.theme.colors.cta.link.color};
+  color: ${(props) => props.theme.colors.link.base};
 
   &:hover {
-    color: ${(props) => props.theme.colors.cta.link.color};
+    color: ${(props) => props.theme.colors.link.hover};
     text-decoration: underline;
   }
 
   &:active {
-    color: ${(props) => props.theme.colors.cta.link.hoverColor};
+    color: ${(props) => props.theme.colors.link.hover};
   }
 
   &:focus {

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

@@ -409,6 +409,7 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
 
 .c6:focus,
 .c6:hover {
+  color: #364141;
   background-color: #f3f4f4;
 }
 
@@ -431,11 +432,13 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
   outline: 0;
   font-size: 13px;
   line-height: 21.333333333333332px;
-  background-color: #f3f4f4;
+  color: #FFFFFF;
+  background-color: #364141;
 }
 
 .c4:focus,
 .c4:hover {
+  color: #364141;
   background-color: #f3f4f4;
 }
 
@@ -687,6 +690,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
 
 .c7:focus,
 .c7:hover {
+  color: #364141;
   background-color: #f3f4f4;
 }
 
@@ -709,11 +713,13 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
   outline: 0;
   font-size: 13px;
   line-height: 21.333333333333332px;
-  background-color: #f3f4f4;
+  color: #FFFFFF;
+  background-color: #364141;
 }
 
 .c5:focus,
 .c5:hover {
+  color: #364141;
   background-color: #f3f4f4;
 }
 

package/__flow__/Listbox/index.js

@@ -33,9 +33,9 @@ export const ListboxButtonContainer = styled<typeof MenuButton, TypeTheme, *>(
 )`
   position: relative;
   width: 100%;
-  border: 1px solid ${(props) => props.theme.colors.forms.borderColor};
+  border: 1px solid ${(props) => props.theme.colors.form.border.base};
   border-radius: ${(props) => props.theme.radii[500]};
-  background-color: ${(props) => props.theme.colors.background.container};
+  background-color: ${(props) => props.theme.colors.form.background.base};
   color: ${(props) => props.theme.colors.text.body};
   cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
   outline: none;
@@ -77,9 +77,9 @@ export const ListboxButtonContainer = styled<typeof MenuButton, TypeTheme, *>(
   ${(props) =>
     props.invalid &&
     css`
-      border-color: ${(props) => props.theme.colors.error.border};
+      border-color: ${(props) => props.theme.colors.form.border.error};
       ${Arrow} {
-        color: ${(props) => props.theme.colors.error.color};
+        color: ${(props) => props.theme.colors.icon.error};
       }
     `}
 `;

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

@@ -43,6 +43,7 @@ exports[`Menu AsMenu should match snapshot 1`] = `
 
 .c7:focus,
 .c7:hover {
+  color: #364141;
   background-color: #f3f4f4;
 }
 
@@ -65,11 +66,13 @@ exports[`Menu AsMenu should match snapshot 1`] = `
   outline: 0;
   font-size: 13px;
   line-height: 21.333333333333332px;
-  background-color: #f3f4f4;
+  color: #FFFFFF;
+  background-color: #364141;
 }
 
 .c6:focus,
 .c6:hover {
+  color: #364141;
   background-color: #f3f4f4;
 }
 
@@ -310,7 +313,7 @@ html .c3 {
 
 .c1:active {
   color: #FFFFFF;
-  background: #364141;
+  background: #273333;
   -webkit-transform: translateY(1px);
   -ms-transform: translateY(1px);
   transform: translateY(1px);

package/__flow__/Menu/index.js

@@ -273,7 +273,12 @@ export const MenuGroup = ({
 }: TypeMenuGroupProps) => (
   <>
     {title && (
-      <Box pl={400} borderTop="1px solid" borderColor="border" mt="-1px">
+      <Box
+        pl={400}
+        borderTop="1px solid"
+        borderColor="container.border.base"
+        mt="-1px"
+      >
         <Text
           forwardedAs={titleAs || "div"}
           fontSize={200}
@@ -297,7 +302,7 @@ export const MenuDivider = (props: any) => (
     as="li"
     role="separator"
     borderTop="1px solid"
-    borderColor="border"
+    borderColor="container.border.base"
     {...props}
   />
 );

package/__flow__/Menu/styles.js

@@ -22,7 +22,7 @@ export const MenuItemContainer = styled<
     `};
   width: 100%;
   border-radius: ${(props) => props.theme.radii[500]};
-  background-color: transparent;
+  background-color: ${(props) => props.theme.colors.listItem.background.base};
   border: none;
   text-align: left;
   color: ${(props) => props.theme.colors.text.body};
@@ -39,7 +39,8 @@ export const MenuItemContainer = styled<
     props.active &&
     !props.disabled &&
     css`
-      background-color: ${props.theme.colors.background.app};
+      color: ${(props) => props.theme.colors.text.inverse};
+      background-color: ${props.theme.colors.listItem.background.selected};
     `}
 
   ${(props) =>
@@ -54,7 +55,9 @@ export const MenuItemContainer = styled<
     css`
       &:focus,
       &:hover {
-        background-color: ${(props) => props.theme.colors.background.app};
+        color: ${(props) => props.theme.colors.text.body};
+        background-color: ${(props) =>
+          props.theme.colors.listItem.background.hover};
       }
     `}
 

package/__flow__/Message/index.js

@@ -47,7 +47,7 @@ export type TypeProps = {
 // $FlowIssue Upgrade 0.111.1
 const MessageContext = React.createContext({
   density: MESSAGE_DENSITIES.SMALL,
-  borderColor: "border",
+  borderColor: "container.border.base",
   bg: "background.container",
   indentContent: true,
 });
@@ -55,7 +55,7 @@ const MessageContext = React.createContext({
 const Message = ({
   children,
   density = MESSAGE_DENSITIES.SMALL,
-  borderColor = "border",
+  borderColor = "container.border.base",
   bg = "background.container",
   indentContent = true,
   innerRef,

package/__flow__/Message/index.stories.js

@@ -15,7 +15,7 @@ export const defaultStory = ({
     "condensed"
   ),
 }) => (
-  <Message density={density}>
+  <Message density={density} bg="container.background.base">
     <Message.Header>
       <Box display="flex" alignItems="center">
         <Message.Avatar

package/__flow__/Modal/index.js

@@ -74,7 +74,7 @@ type TypeModalFooterProps = {
 
 const ModalFooter = (props: TypeModalFooterProps) => (
   // $FlowIssue - upgrade v0.112.0
-  <Footer borderTop={500} borderColor="border" {...props} />
+  <Footer borderTop={500} borderColor="container.border.base" {...props} />
 );
 
 ModalFooter.defaultProps = {

package/__flow__/Modal/index.stories.js

@@ -3,9 +3,9 @@ import Component from "@reach/component-component";
 import Modal from "./";
 import Box from "../Box";
 import Button from "../Button";
-import Label from "../Label";
 import Input from "../Input";
 import Text from "../Text";
+import FormField from "../FormField";
 
 export default {
   title: "Modal",
@@ -335,12 +335,18 @@ export const withForm = () => (
               subtitle="Anyone with this link will be able to view its contents."
             />
             <Modal.Content>
-              <Label htmlFor="title">Title</Label>
-              <Text color="neutral.700">
-                The title is the link’s name and will appear on your link’s
-                generated page.
-              </Text>
-              <Input name="title" id="title" />
+              <FormField
+                label="Label"
+                helperText="This is some helpful helper text"
+              >
+                {(props) => (
+                  <Input
+                    placeholder="Type the things..."
+                    name="title"
+                    id="title"
+                  />
+                )}
+              </FormField>
             </Modal.Content>
             <Modal.Footer>
               <Box display="flex" justifyContent="flex-end">
@@ -366,7 +372,7 @@ export const customBackgroundColor = () => (
           Open Modal
         </button>
         <Modal
-          bg="purple.300"
+          bg="container.background.decorative.purple"
           width="500px"
           appElementSelector="#root"
           isOpen={state.isOpen}

package/__flow__/Modal/styles.js

@@ -82,7 +82,7 @@ export const Container: StyledComponent<any, TypeTheme, *> = styled(ReactModalAd
   &__Content {
     display: flex;
     flex-direction: column;
-    background: ${(props) => props.theme.colors.background.container};
+    background: ${(props) => props.theme.colors.container.background.base};
     border-radius: ${(props) => props.theme.radii[500]};
     box-shadow: ${(props) => props.theme.shadows[300]};
     filter: blur(0);
@@ -133,7 +133,7 @@ export const Header = styled<typeof HeaderContainer, TypeTheme, any>(HeaderConta
   flex: 0 0 auto;
   border-bottom-width: ${(props) => props.theme.borderWidths[500]};
   border-bottom-color: ${(props) =>
-    props.bordered ? props.theme.colors.border : "transparent"};
+    props.bordered ? props.theme.colors.container.border.base : "transparent"};
   border-bottom-style: solid;
 `;
 

package/__flow__/Numeral/styles.js

@@ -10,5 +10,6 @@ export const Container = styled<typeof Text, TypeTheme>(Text)`
 
 export const AbbrContainer = styled<typeof Text, TypeTheme>(Text)`
   font-variant-numeric: tabular-nums;
-  border-bottom: 1px dotted ${(props) => props.theme.colors.border};
+  border-bottom: 1px dotted
+    ${(props) => props.theme.colors.container.border.base};
 `;

package/__flow__/OverflowList/index.stories.js

@@ -1,6 +1,7 @@
 import React from "react";
 import OverflowList from "./index";
 import Box from "../Box";
+import Text from "../Text";
 import { names } from "../Menu/names";
 
 export default {
@@ -10,7 +11,9 @@ export default {
 export const defaultStory = () => (
   <OverflowList height={300} width={200}>
     {names.map((name) => (
-      <Box key={name}>{name}</Box>
+      <Box key={name}>
+        <Text color="text.body">{name}</Text>
+      </Box>
     ))}
   </OverflowList>
 );
@@ -26,7 +29,11 @@ export const PropGetters = () => {
       width={200}
       items={names}
       getItemProps={({ item }) => ({ key: item, item })}
-      ItemComponent={({ item }) => <Box>{item}</Box>}
+      ItemComponent={({ item }) => (
+        <Box>
+          <Text color="text.body">{item}</Text>
+        </Box>
+      )}
     />
   );
 };
@@ -38,23 +45,23 @@ export const FlexBox = () => {
       width="100%"
       display="flex"
       border="1px solid"
-      borderColor="border"
+      borderColor="container.border.base"
       flexDirection="column"
     >
-      <Box p={300} borderBottom="1px solid" borderColor="border">
-        item 1
+      <Box p={300} borderBottom="1px solid" borderColor="container.border.base">
+        <Text color="text.body">item 1</Text>
       </Box>
       <Box flex="1">
         <OverflowList height="100%" width="100%" containerProps={{ p: 300 }}>
           {names.map((name) => (
             <Box key={name} py={200}>
-              {name}
+              <Text color="text.body">{name}</Text>
             </Box>
           ))}
         </OverflowList>
       </Box>
-      <Box p={300} borderTop="1px solid" borderColor="border">
-        item 2
+      <Box p={300} borderTop="1px solid" borderColor="container.border.base">
+        <Text color="text.body">item 2</Text>
       </Box>
     </Box>
   );

package/__flow__/Popout/index.js

@@ -390,11 +390,11 @@ export default function Popout({
 type TypePopoutContentProps = React.ElementConfig<typeof Box>;
 Popout.Content = ({ children, ...rest }: TypePopoutContentProps) => (
   <Box
-    bg="background.container"
+    bg="container.background.base"
     color="text.body"
     border={500}
-    borderColor={"border"}
-    borderRadius={"outer"}
+    borderColor="container.border.base"
+    borderRadius="outer"
     boxShadow={300}
     p={400}
     m={300}

package/__flow__/Radio/styles.js

@@ -26,9 +26,9 @@ export const Input: StyledComponent<any, TypeTheme, *> = styled.input`
   margin: 0;
   appearance: none;
   cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
-  border: 1px solid ${(props) => props.theme.colors.forms.borderColor};
+  border: 1px solid ${(props) => props.theme.colors.form.border.base};
   border-radius: 50%;
-  background-color: ${(props) => props.theme.colors.background.container};
+  background-color: ${(props) => props.theme.colors.form.background.base};
   transition: border-color ${(props) => props.theme.duration.fast}
       ${(props) => props.theme.easing.ease_in},
     background-color ${(props) => props.theme.duration.fast}
@@ -72,13 +72,13 @@ export const InputWrapper: StyledComponent<any, TypeTheme, *> = styled.span`
       &:hover,
       &:focus {
         ${Input} {
-          border-color: ${props.theme.colors.forms.borderColor};
-          background-color: ${props.theme.colors.background.container};
+          border-color: ${props.theme.colors.form.border.base};
+          background-color: ${props.theme.colors.form.background.base};
         }
 
         &:before {
           opacity: ${props.disabled ? 0 : 1};
-          background-color: ${props.theme.colors.forms.borderColor};
+          background-color: ${props.theme.colors.form.background.base};
         }
       }
     `}
@@ -87,13 +87,13 @@ export const InputWrapper: StyledComponent<any, TypeTheme, *> = styled.span`
     props.checked &&
     css`
       ${Input} {
-        border-color: ${props.theme.colors.selection.border};
-        background-color: ${props.theme.colors.selection.background};
+        border-color: ${props.theme.colors.form.border.selected};
+        background-color: ${props.theme.colors.form.background.selected};
       }
 
       &:before {
         opacity: 1;
-        background-color: ${props.theme.colors.background.container};
+        background-color: ${props.theme.colors.form.background.base};
       }
     `}
 `;

package/__flow__/SegmentedControl/styles.js

@@ -8,7 +8,8 @@ import type { TypeTheme } from "../types/theme.flow";
 
 // eslint-disable-next-line prettier/prettier
 export const SegmentedControlContainer = styled<typeof Box, TypeTheme, {disabled?: boolean, ...}>(Box)`
-  border: 1px solid ${(props) => props.theme.colors.selection.border};
+  border: 1px solid
+    ${(props) => props.theme.colors.button.secondary.border.base};
   border-radius: ${(props) => props.theme.radii.outer};
   padding: ${(props) => props.theme.space[100]};
 
@@ -61,17 +62,20 @@ export const SegmentedControlLabel = styled<typeof Text, TypeTheme, any>(Text)`
   transition: all ${(props) => props.theme.duration.fast};
 
   &:hover {
-    background-color: ${(props) => props.theme.colors.border};
+    background-color: ${(props) =>
+      props.theme.colors.listItem.background.hover};
   }
 
   ${(props) =>
     props.isActive &&
     css`
-      color: ${(props) => props.theme.colors.background.container};
-      background-color: ${(props) => props.theme.colors.selection.background};
+      color: ${(props) => props.theme.colors.text.inverse};
+      background-color: ${(props) =>
+        props.theme.colors.listItem.background.selected};
 
       &:hover {
-        background-color: ${(props) => props.theme.colors.selection.background};
+        background-color: ${(props) =>
+          props.theme.colors.listItem.background.selected};
       }
     `}
 `;

package/__flow__/Select/styles.js

@@ -12,9 +12,9 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   select {
     box-sizing: border-box;
     width: 100%;
-    border: 1px solid ${(props) => props.theme.colors.forms.borderColor};
+    border: 1px solid ${(props) => props.theme.colors.form.border.base};
     border-radius: ${(props) => props.theme.radii[500]};
-    background-color: ${(props) => props.theme.colors.background.container};
+    background-color: ${(props) => props.theme.colors.form.background.base};
     color: ${(props) => props.theme.colors.text.body};
     cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
     outline: none;
@@ -85,11 +85,11 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
     props.invalid &&
     css`
       select {
-        border-color: ${(props) => props.theme.colors.error.color};
+        border-color: ${(props) => props.theme.colors.form.border.error};
       }
 
       ${Arrow} {
-        color: ${(props) => props.theme.colors.error.color};
+        color: ${(props) => props.theme.colors.icon.error};
       }
     `}
 
@@ -111,7 +111,7 @@ export const Arrow: StyledComponent<any, TypeTheme, *> = styled.span`
     }
   }};
   transform: translateY(-50%);
-  color: ${(props) => props.theme.colors.icon.primary};
+  color: ${(props) => props.theme.colors.icon.base};
   pointer-events: none;
 `;
 

package/__flow__/Skeleton/index.js

@@ -6,13 +6,13 @@ import { transparentize } from "polished";
 import type { TypeTheme } from "../types/theme.flow";
 
 const Skeleton = styled<typeof Box, TypeTheme>(Box)`
-  background: ${(p) => p.theme.colors.background.app};
+  background: ${(p) => p.theme.colors.app.background.base};
   background-image: ${(props) =>
     `linear-gradient(
       288deg,
-      ${transparentize(0.7, props.theme.colors.border)} 32%,
-      ${transparentize(0.05, props.theme.colors.border)},
-      ${transparentize(0.7, props.theme.colors.border)} 68%
+      ${transparentize(0.7, props.theme.colors.container.border.base)} 32%,
+      ${transparentize(0.05, props.theme.colors.container.border.base)},
+      ${transparentize(0.7, props.theme.colors.container.border.base)} 68%
     );`};
   background-size: 400%;
   background-repeat: no-repeat;

package/__flow__/Skeleton/index.stories.js

@@ -13,7 +13,7 @@ const CardExample = () => {
       p={400}
       borderRadius="outer"
       border={500}
-      borderColor="border"
+      borderColor="container.border.base"
     >
       <Skeleton borderRadius="pill" height={48} width={48} mb={400} />
       <Skeleton borderRadius="inner" height={16} width="100%" mb={400} />

package/__flow__/Stack/index.stories.js

@@ -3,7 +3,9 @@ import Stack from "./index";
 import Text from "../Text";
 import { select } from "@storybook/addon-knobs";
 
-const Item = (props) => <Text as="div" bg="neutral.0" {...props} />;
+const Item = (props) => (
+  <Text as="div" color="text.body" bg="container.background.base" {...props} />
+);
 
 const alignmentOptions = ["left", "center", "right", "stretch"];
 const directionOptions = ["horizontal", "vertical"];