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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 7.6.0
+
+### Minor Changes
+
+- b69f92a: fix(token) hover styling for invalid tokens
+
+## 7.5.0
+
+### Minor Changes
+
+- 6700ead: This change allows consumers to specify whether or not a Link should be underlined. This work is part of our accessibility initiatives.
+
 ## 7.4.2
 
 ### Patch Changes

package/README.md

@@ -23,7 +23,7 @@
 
 ## Installation
 
-Install Racine and its peer dependencies using npm or yarn:
+Install Racine using npm or yarn:
 
 ```sh
 $ yarn add @sproutsocial/racine react styled-components
@@ -31,6 +31,23 @@ $ yarn add @sproutsocial/racine react styled-components
 $ npm install @sproutsocial/racine react styled-components
 ```
 
+You may also require specific peer dependencies when starting a new project or sandbox environment:
+
+```js
+@sproutsocial/seeds-border
+@sproutsocial/seeds-color
+@sproutsocial/seeds-depth
+@sproutsocial/seeds-motion
+@sproutsocial/seeds-networkcolor
+@sproutsocial/seeds-space
+@sproutsocial/seeds-typography
+moment
+prop-types
+react
+react-dates
+styled-components
+```
+
 Then, wrap your app's React root in Racine's `ThemeProvider` component:
 
 ```js

package/__flow__/Badge/styles.js

@@ -15,8 +15,10 @@ const colors = {
   suggestion: "colors.neutral.900",
 };
 
+console.log(themeGet(colors["secondary"]));
+
 const backgroundColors = {
-  primary: "colors.cta.primary",
+  primary: "colors.blue.700",
   secondary: "colors.yellow.500",
   passive: "colors.neutral.200",
   common: "colors.aqua.600",

package/__flow__/Banner/index.js

@@ -45,7 +45,8 @@ export default class Banner extends React.Component<TypeProps> {
     const { type, text, ...rest } = this.props;
     return (
       <Container
-        type={type}
+        // danger needs to be properly deprecated and removed DS-1094
+        type={type === "danger" ? "error" : type}
         data-qa-alert={""}
         data-qa-alert-type={type}
         data-qa-alert-text={text}

package/__flow__/Banner/styles.js

@@ -15,28 +15,31 @@ const Container: StyledComponent<TypeProps, TypeTheme, *> = styled.div(
     overflow: hidden;
     align-items: center;
     justify-content: space-between;
-    color: ${props.theme.colors.text.headline};
+    color: ${props.theme.colors.text.body};
     border-radius: ${props.theme.radii.outer};
     font-family: ${props.theme.fontFamily};
     ${props.theme.typography[200]}
     padding: ${props.theme.space[300]};
-    border: 1px solid ${props.theme.colors[props.type].border};
-    background-color: ${props.theme.colors[props.type].background};
+    border: 1px solid ${props.theme.colors.container.border[props.type]};
+    background-color: ${props.theme.colors.container.background[props.type]};
 
     .Icon {
       align-self: flex-start;
       margin-top: 3px;
       margin-right: ${props.theme.space[400]};
       min-width: 16px;
-      color: ${props.theme.colors[props.type].icon};
+      color: ${props.theme.colors.icon[props.type]};
     }
 
     a,
     button {
       font-weight: ${props.theme.fontWeights.semibold};
-      color: ${props.theme.colors.text.headline};
+      color: ${props.theme.colors.text.body};
       font-size: inherit;
-      text-decoration: underline;
+      &:hover {
+        color: ${props.theme.colors.text.body};
+        text-decoration: underline;
+      }
     }
 
     > span:not(.Icon) {

package/__flow__/Box/index.stories.js

@@ -3,7 +3,7 @@ import { css } from "styled-components";
 import { text } from "@storybook/addon-knobs";
 import Box from "./index";
 import useMeasure from "use-measure";
-import theme from "../utils/theme";
+import theme from "../themes/default/theme";
 
 export default {
   title: "Box",
@@ -67,7 +67,7 @@ export const Responsive = () => {
               top: 0;
               bottom: 0;
               width: 324px;
-              background: ${(p) => p.theme.colors.background.container};
+              background: ${(p) => p.theme.colors.container.background.base};
             }
 
             &:after {
@@ -78,7 +78,7 @@ export const Responsive = () => {
               bottom: 0;
               width: 64px;
               background: white;
-              border: 1px solid ${(p) => p.theme.colors.border};
+              border: 1px solid ${(p) => p.theme.colors.container.border.base};
             }
           `}
         >

package/__flow__/Box/styles.js

@@ -32,15 +32,15 @@ export type TypeContainerProps = $ReadOnly<{|
 
 type TypeBoxContainer = StyledComponent<TypeContainerProps, TypeTheme, *>;
 const Container: TypeBoxContainer = styled.div`
-    box-sizing: border-box;
-    font-family: ${({ theme }) => theme.fontFamily};
+  box-sizing: border-box;
+  font-family: ${({ theme }) => theme.fontFamily};
 
-    ${COMMON}
-    ${BORDER}
-    ${LAYOUT}
-    ${POSITION}
-    ${FLEXBOX}
-    ${GRID}
-  `;
+  ${COMMON}
+  ${BORDER}
+  ${LAYOUT}
+  ${POSITION}
+  ${FLEXBOX}
+  ${GRID}
+`;
 
 export default Container;

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

@@ -23,7 +23,7 @@ exports[`Racine Button should render in active state 1`] = `
   padding: 8px;
   font-size: 13px;
   color: #FFFFFF !important;
-  background: #364141 !important;
+  background: #273333 !important;
 }
 
 .c0:visited {
@@ -40,7 +40,7 @@ exports[`Racine Button should render in active state 1`] = `
 
 .c0:active {
   color: #FFFFFF;
-  background: #364141;
+  background: #273333;
   -webkit-transform: translateY(1px);
   -ms-transform: translateY(1px);
   transform: translateY(1px);
@@ -257,7 +257,7 @@ exports[`Racine Button should render in large size 1`] = `
 
 .c0:active {
   color: #FFFFFF;
-  background: #364141;
+  background: #273333;
   -webkit-transform: translateY(1px);
   -ms-transform: translateY(1px);
   transform: translateY(1px);
@@ -475,7 +475,7 @@ exports[`Racine Button should render in secondary style 1`] = `
 
 .c0:active {
   color: #FFFFFF;
-  background: #364141;
+  background: #273333;
   -webkit-transform: translateY(1px);
   -ms-transform: translateY(1px);
   transform: translateY(1px);

package/__flow__/Button/index.js

@@ -6,12 +6,14 @@ export type TypeProps = {
   /** If the button is being used as an anchor, this prop will cause the link to open in a new tab. */
   external?: boolean,
   size?: "large" | "default",
+  /** What the button looks like. "default" is deprecated in favor of "unstyled" */
   appearance?:
     | "primary"
     | "secondary"
     | "pill"
     | "destructive"
     | "default"
+    | "unstyled"
     | "placeholder",
   /** Set the button to display in its active state */
   active?: boolean,
@@ -33,7 +35,7 @@ export type TypeProps = {
 
 const Button = ({
   href,
-  appearance = "default",
+  appearance = "unstyled",
   active = false,
   disabled,
   external,
@@ -53,6 +55,9 @@ const Button = ({
     );
   }
 
+  // plans to properly deprecate captured in DS-1096
+  const appearanceCheck = appearance === "default" ? "unstyled" : appearance;
+
   return (
     <Container
       title={title}
@@ -65,7 +70,7 @@ const Button = ({
       aria-disabled={disabled ? disabled : undefined}
       disabled={disabled}
       buttonSize={size}
-      appearance={appearance}
+      appearance={appearanceCheck}
       ref={innerRef}
       onClick={onClick}
       data-qa-button={title || ""}

package/__flow__/Button/index.stories.js

@@ -9,7 +9,12 @@ export default {
 };
 
 export const defaultStory = () => (
-  <Button onClick={() => alert("Testing...")}>Default</Button>
+  <Button
+    appearance={text("appearance", "default")}
+    onClick={() => alert("Testing...")}
+  >
+    Default
+  </Button>
 );
 
 defaultStory.story = {

package/__flow__/Button/styles.js

@@ -12,12 +12,13 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
   text-align: center;
   font-family: ${(props) => props.theme.fontFamily};
   border: 1px solid
-    ${(props) => props.theme.colors.cta[props.appearance].borderColor};
+    ${(props) => props.theme.colors.button[props.appearance].border.base};
   border-radius: ${(props) => props.theme.radii[500]};
   border-style: ${(props) =>
     props.appearance === "placeholder" ? "dashed" : "solid"};
-  background: ${(props) => props.theme.colors.cta[props.appearance].background};
-  color: ${(props) => props.theme.colors.cta[props.appearance].color};
+  background: ${(props) =>
+    props.theme.colors.button[props.appearance].background.base};
+  color: ${(props) => props.theme.colors.button[props.appearance].text.base};
   cursor: pointer;
   text-decoration: none;
   /**
@@ -41,22 +42,22 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
       : props.theme.typography[300].fontSize};
 
   &:visited {
-    color: ${(props) => props.theme.colors.cta[props.appearance].color};
+    color: ${(props) => props.theme.colors.button[props.appearance].text.base};
   }
 
   &:hover {
-    color: ${(props) => props.theme.colors.cta[props.appearance].hoverColor};
+    color: ${(props) => props.theme.colors.button[props.appearance].text.hover};
     background: ${(props) =>
-      props.theme.colors.cta[props.appearance].hoverBackground};
+      props.theme.colors.button[props.appearance].background.hover};
     text-decoration: none;
     box-shadow: ${(props) =>
       props.appearance === "placeholder" ? props.theme.shadows[100] : "none"};
   }
 
   &:active {
-    color: ${(props) => props.theme.colors.cta[props.appearance].hoverColor};
+    color: ${(props) => props.theme.colors.button[props.appearance].text.hover};
     background: ${(props) =>
-      props.theme.colors.cta[props.appearance].activeBackground};
+      props.theme.colors.button[props.appearance].background.active};
     transform: translateY(1px);
   }
 
@@ -71,9 +72,10 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
   ${(props) =>
     props.active &&
     css`
-      color: ${props.theme.colors.cta[props.appearance].hoverColor} !important;
-      background: ${props.theme.colors.cta[props.appearance]
-        .activeBackground} !important;
+      color: ${props.theme.colors.button[props.appearance].text
+        .hover} !important;
+      background: ${props.theme.colors.button[props.appearance].background
+        .active} !important;
     `}
 
   ${(props) => props.disabled && disabled}
@@ -84,7 +86,8 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      mix-blend-mode: multiply;
+      /* This solution is temporary. DS-1095 */
+      mix-blend-mode: ${props.theme.mode ? "screen" : "multiply"};
 
       ${pill}
     `}
@@ -98,3 +101,5 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
 `;
 
 export default Container;
+
+//${props.theme.mode === "dark" ? "screen" : "multiply"}

package/__flow__/Card/index.js

@@ -26,9 +26,9 @@ const Card = ({
   ariaLabel,
   buttonProps = {},
   border = 500,
-  borderColor = "border",
+  borderColor = "container.border.base",
   color = "text.body",
-  bg = "background.container",
+  bg = "container.background.base",
   ...rest
 }: TypeProps) => {
   return (

package/__flow__/CharacterCounter/styles.js

@@ -12,7 +12,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   font-variant-numeric: tabular-nums;
   color: ${(props) =>
     props.overlimit
-      ? props.theme.colors.error.color
+      ? props.theme.colors.text.error
       : props.theme.colors.text.subtext};
 
   ${(p) =>

package/__flow__/ChartLegend/styles.js

@@ -25,13 +25,13 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   ${(props) =>
     props.inline &&
     css`
-    display: flex;
-    justify-content: center;
+      display: flex;
+      justify-content: center;
 
-    ${Label} + ${Label} {
-      margin-left: ${(props) => props.theme.space[450]};
-    }
-  `}
+      ${Label} + ${Label} {
+        margin-left: ${(props) => props.theme.space[450]};
+      }
+    `}
 
   ${COMMON}
   ${LAYOUT}

package/__flow__/Checkbox/styles.js

@@ -34,11 +34,12 @@ export const InputWrapper = styled<typeof Box, TypeTheme, any>(Box)`
       background-color: transparent;
       transition: all ${(props) => props.theme.duration.fast}
         ${(props) => props.theme.easing.ease_inout};
-      mix-blend-mode: multiply;
+      /* This solution is temporary. DS-1095 */
+      mix-blend-mode: ${props.theme.mode ? "screen" : "multiply"};
       ${pill}
 
       &:hover {
-        background-color: ${props.theme.colors.background.app};
+        background-color: ${props.theme.colors.app.background.base};
       }
 
       ${PillInput} {
@@ -54,9 +55,9 @@ export const CheckboxBox: StyledComponent<{ ... }, TypeTheme, *> = styled.div`
   position: relative;
   width: ${(props) => props.theme.space[400]};
   height: ${(props) => props.theme.space[400]};
-  border: 1px solid ${(props) => props.theme.colors.forms.borderColor};
+  border: 1px solid ${(props) => props.theme.colors.form.border.base};
   border-radius: 4px;
-  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}
@@ -116,7 +117,7 @@ export const PillInput: StyledComponent<any, TypeTheme, *> = styled.input`
       &:focus {
         ~ ${CheckboxBox} ${CheckIcon} {
           opacity: ${(props) => (props.disabled ? 0 : 1)};
-          color: ${props.theme.colors.forms.borderColor};
+          color: ${props.theme.colors.form.border.base};
         }
       }
     `}
@@ -125,8 +126,8 @@ export const PillInput: StyledComponent<any, TypeTheme, *> = styled.input`
     props.checked &&
     css`
       ~ ${CheckboxBox} {
-        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};
       }
       ~ ${CheckboxBox} ${CheckIcon} {
         opacity: 1;
@@ -195,8 +196,8 @@ export const CheckboxContainer: StyledComponent<any, TypeTheme, *> = styled.span
           props.indeterminate ? "indeterminate" : "check",
 
           props.checked
-            ? props.theme.colors.background.container
-            : props.theme.colors.forms.borderColor
+            ? props.theme.colors.form.background.base
+            : props.theme.colors.form.border.base
         )}");
         opacity: ${props.checked ? 1 : 0};
         position: absolute;
@@ -227,9 +228,9 @@ export const CheckboxContainer: StyledComponent<any, TypeTheme, *> = styled.span
         padding: 0;
         width: ${props.theme.space[400]};
         height: ${props.theme.space[400]};
-        border: 1px solid ${props.theme.colors.forms.borderColor};
+        border: 1px solid ${props.theme.colors.form.border.base};
         border-radius: 4px;
-        background-color: ${props.theme.colors.background.container};
+        background-color: ${props.theme.colors.form.background.base};
         transition: all ${props.theme.duration.fast}
           ${props.theme.easing.ease_in};
         cursor: ${props.disabled ? "not-allowed" : "pointer"};
@@ -240,20 +241,21 @@ export const CheckboxContainer: StyledComponent<any, TypeTheme, *> = styled.span
           css`
             border-color: ${props.theme.colors
               .neutral[300]} !important; /* We don't want the focus ring to remove the border */
-            background-color: ${props.theme.colors.background.container};
+            background-color: ${props.theme.colors.form.background.base};
           `}
         }
 
         &:checked {
-          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};
         }
 
         ${props.indeterminate &&
         props.checked &&
         css`
-          border-color: ${props.theme.colors.selection.border} !important;
-          background-color: ${props.theme.colors.selection} !important;
+          border-color: ${props.theme.colors.form.border.selected} !important;
+          background-color: ${props.theme.colors.form.background
+            .selected} !important;
         `}
 
         &:focus {

package/__flow__/Collapsible/index.stories.js

@@ -26,7 +26,7 @@ export default {
 
 export const defaultStory = () => (
   <StatefulCollapse>
-    <Box width="100%" height="200px" bg="neutral.200" p={400}>
+    <Box width="100%" height="200px" bg="container.background.base" p={400}>
       <Button appearance="secondary">A button</Button>
     </Box>
   </StatefulCollapse>
@@ -38,7 +38,7 @@ defaultStory.story = {
 
 export const initialIsOpen = () => (
   <StatefulCollapse initialIsOpen>
-    <Box width="100%" height="200px" bg="neutral.200" p={400}>
+    <Box width="100%" height="200px" bg="container.background.base" p={400}>
       <Button appearance="secondary">A button</Button>
     </Box>
   </StatefulCollapse>
@@ -50,7 +50,13 @@ initialIsOpen.story = {
 
 export const withOffset = () => (
   <StatefulCollapse offset={100}>
-    <Box width="100%" height="200px" bg="neutral.200" p={400} mt="100px">
+    <Box
+      width="100%"
+      height="200px"
+      bg="container.background.base"
+      p={400}
+      mt="100px"
+    >
       <Button appearance="secondary">A button</Button>
     </Box>
   </StatefulCollapse>
@@ -62,7 +68,7 @@ withOffset.story = {
 
 export const withShortContent = () => (
   <StatefulCollapse>
-    <Box width="15%" height="50px" bg="neutral.200" p={400}>
+    <Box width="15%" height="50px" bg="container.background.base" p={400}>
       Hello.
     </Box>
   </StatefulCollapse>
@@ -74,7 +80,7 @@ withShortContent.story = {
 
 export const withTallContent = () => (
   <StatefulCollapse>
-    <Box width="15%" height="200vh" bg="neutral.200" p={400}>
+    <Box width="15%" height="200vh" bg="container.background.base" p={400}>
       Hello.
     </Box>
   </StatefulCollapse>

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={