@sproutsocial/racine 7.7.0-beta-collapsible.0 → 8.0.0-beta-dark-mode.3

package/__flow__/Collapsible/styles.js

@@ -4,35 +4,9 @@ import Box from "../Box";
 
 import type { TypeTheme } from "../types/theme.flow";
 
-export const CollapsingBox = styled<typeof Box, TypeTheme, *>(Box)`
+export const CollapsingBox = styled<typeof Box, TypeTheme>(Box)`
   transition: max-height ${(p) => p.theme.duration.medium}
     ${(p) => p.theme.easing.ease_inout};
   will-change: max-height;
-  position: relative;
-  overflow: auto;
-  background:  /* Shadow covers */ linear-gradient(
-      ${(p) => p.theme.colors.neutral[100]} 30%,
-      rgba(255, 255, 255, 0)
-    ),
-    linear-gradient(
-        rgba(255, 255, 255, 0),
-        ${(p) => p.theme.colors.neutral[100]} 70%
-      )
-      0 100%,
-    /* Shadows */
-      radial-gradient(
-        farthest-side at 50% 0,
-        rgb(39 51 51 / 5%),
-        rgba(0, 0, 0, 0)
-      ),
-    radial-gradient(
-        farthest-side at 50% 100%,
-        rgb(39 51 51 / 5%),
-        rgba(0, 0, 0, 0)
-      )
-      0 100%;
-  background-repeat: no-repeat;
-  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
-  background-attachment: local, local, scroll, scroll;
-  ${({ scrollable }) => (scrollable ? `overflow: auto` : `overflow: hidden`)};
+  overflow: hidden;
 `;

package/__flow__/DatePicker/styles.js

@@ -2,6 +2,7 @@
 import styled, { createGlobalStyle, css } from "styled-components";
 import moment from "moment";
 import Box from "../Box";
+import { disabled } from "../utils/mixins";
 import type { TypeTheme } from "../types/theme.flow";
 
 /*
@@ -61,8 +62,8 @@ export const CalendarDay = styled<typeof Box, TypeTheme, *>(Box)`
   ${({ modifiers, day, theme }) => {
     if (isSelected(modifiers)) {
       return css`
-        background-color: ${theme.colors.selection.background};
-        color: ${theme.colors.selection.color};
+        background-color: ${theme.colors.container.background.selected};
+        color: ${theme.colors.text.inverse};
         margin-left: ${shouldHaveLeftPill(modifiers, day) && theme.space[200]};
         margin-right: ${shouldHaveRightPill(modifiers, day) &&
         theme.space[200]};
@@ -81,11 +82,12 @@ export const CalendarDay = styled<typeof Box, TypeTheme, *>(Box)`
       return css`
         margin: 0 ${theme.space[200]};
         border-radius: ${theme.radii.pill};
-        border: 1px solid ${theme.colors.selection.border};
+        border: 1px solid ${theme.colors.container.border.selected};
       `;
     } else if (isOutOfRange(modifiers)) {
       return css`
-        color: ${theme.colors.selection.disabledColor};
+        color: ${theme.colors.text.subtext};
+        ${disabled};
       `;
     }
   }};
@@ -107,7 +109,7 @@ export const ReactDatesCssOverrides = createGlobalStyle`
 
 		&_weekHeader {
 			color: ${({ theme }) => theme.colors.text.headline};
-			border-bottom: 1px solid ${({ theme }) => theme.colors.border};
+			border-bottom: 1px solid ${({ theme }) => theme.colors.container.border.base};
 
  			/* Magic number to match position of .CalendarMonth_caption */
 			top: 26px;
@@ -134,7 +136,7 @@ export const ReactDatesCssOverrides = createGlobalStyle`
 
 		&__horizontal {
 			box-shadow: none;
-			background: ${({ theme }) => theme.colors.background.container};
+			background: ${({ theme }) => theme.colors.container.background.base};
 		}
 	}
 
@@ -157,7 +159,7 @@ export const ReactDatesCssOverrides = createGlobalStyle`
 
     .CalendarMonth {
 		${({ theme }) => theme.typography[200]}
-		background: ${({ theme }) => theme.colors.background.container};
+		background: ${({ theme }) => theme.colors.container.background.base};
 
  		/* spacing between visible months and months off canvas */
 		padding: 0 15px;
@@ -166,7 +168,7 @@ export const ReactDatesCssOverrides = createGlobalStyle`
 			${({ theme }) => theme.typography[200]}
 			color: ${({ theme }) => theme.colors.text.headline};
 			padding-top: 0;
-			background: ${({ theme }) => theme.colors.background.container};
+			background: ${({ theme }) => theme.colors.container.background.base};
 
 			strong {
 				font-weight: ${({ theme }) => theme.fontWeights.semibold};
@@ -186,19 +188,19 @@ export const ReactDatesCssOverrides = createGlobalStyle`
 	}
 
 	.CalendarMonthGrid {
-		background: ${({ theme }) => theme.colors.background.container};
+		background: ${({ theme }) => theme.colors.container.background.base};
 	}
 
 	/* Left and Right Arrow Buttons to navigate months */
 	.DayPickerNavigation_button__horizontal {
-		color: ${({ theme }) => theme.colors.cta.pill.color};
+		color: ${({ theme }) => theme.colors.button.pill.text.base};
 		top: -4px;
 		padding: 7px 8px;
 		position: absolute;
 		line-height: 0.78;
 		border-radius: 9999px;
 		border: none;
-		background: ${({ theme }) => theme.colors.cta.pill.background};
+		background: ${({ theme }) => theme.colors.button.pill.background.base};
 
 		&:nth-child(1) {
 			left: 22px;
@@ -208,7 +210,7 @@ export const ReactDatesCssOverrides = createGlobalStyle`
 		}
 
 		&:hover {
-			background: ${({ theme }) => theme.colors.cta.pill.hoverBackground};
+			background: ${({ theme }) => theme.colors.button.pill.background.hover};
 		}
 	}
 `;

package/__flow__/Drawer/styles.js

@@ -16,7 +16,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   top: 0;
   height: 100%;
   width: ${(props) => props.width}px;
-  background-color: ${(props) => props.theme.colors.background.container};
+  background-color: ${(props) => props.theme.colors.container.background.base};
   box-shadow: ${(props) => props.theme.shadows[400]};
   filter: blur(0);
 

package/__flow__/FormField/index.js

@@ -81,7 +81,7 @@ const FormField = ({
         <Text
           as="div"
           fontSize={200}
-          color="error.color"
+          color="text.error"
           mt={300}
           id={errorId}
           data-qa-formfield-error={

package/__flow__/Icon/index.stories.js

@@ -11,21 +11,31 @@ export default {
 };
 
 export const mini12X12 = () => (
-  <Icon name={text("name", "dashboard")} size={text("size", "mini")} />
+  <Icon
+    color="icon.base"
+    name={text("name", "dashboard")}
+    size={text("size", "mini")}
+  />
 );
 
 mini12X12.story = {
   name: "Mini (12 x 12)",
 };
 
-export const default16X16 = () => <Icon name={text("name", "dashboard")} />;
+export const default16X16 = () => (
+  <Icon color="icon.base" name={text("name", "dashboard")} />
+);
 
 default16X16.story = {
   name: "Default (16 x 16)",
 };
 
 export const medium24X24 = () => (
-  <Icon name={text("name", "dashboard")} size={text("size", "medium")} />
+  <Icon
+    color="icon.base"
+    name={text("name", "dashboard")}
+    size={text("size", "medium")}
+  />
 );
 
 medium24X24.story = {
@@ -33,7 +43,11 @@ medium24X24.story = {
 };
 
 export const large32X32 = () => (
-  <Icon name={text("name", "dashboard")} size={text("size", "large")} />
+  <Icon
+    color="icon.base"
+    name={text("name", "dashboard")}
+    size={text("size", "large")}
+  />
 );
 
 large32X32.story = {
@@ -41,7 +55,11 @@ large32X32.story = {
 };
 
 export const jumbo64X64 = () => (
-  <Icon name={text("name", "dashboard")} size={text("size", "jumbo")} />
+  <Icon
+    color="icon.base"
+    name={text("name", "dashboard")}
+    size={text("size", "jumbo")}
+  />
 );
 
 jumbo64X64.story = {
@@ -49,7 +67,7 @@ jumbo64X64.story = {
 };
 
 export const defaultFixedWidth = () => (
-  <Icon name={text("name", "dashboard")} fixedWidth />
+  <Icon color="icon.success" name={text("name", "dashboard")} fixedWidth />
 );
 
 defaultFixedWidth.story = {

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}