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

package/__flow__/Switch/styles.js

@@ -17,13 +17,13 @@ const Container: StyledComponent<{checked: boolean, disabled: boolean }, TypeThe
     ${(props) => props.theme.space[200]};
   vertical-align: middle;
   appearance: none;
-  background-color: ${(props) => props.theme.colors.background.container};
+  background-color: ${(props) => props.theme.colors.form.background.base};
   border-radius: 11px;
   outline: none;
   cursor: pointer;
   transition: background-color ${(props) => props.theme.duration.fast}
     ${(props) => props.theme.easing.ease_inout};
-  border: 1px solid ${(props) => props.theme.colors.forms.borderColor};
+  border: 1px solid ${(props) => props.theme.colors.form.border.base};
   white-space: nowrap;
   overflow: hidden;
 
@@ -33,7 +33,8 @@ const Container: StyledComponent<{checked: boolean, disabled: boolean }, TypeThe
     left: 0;
     width: 14px;
     height: 14px;
-    background-color: ${(props) => props.theme.colors.forms.borderColor};
+    background-color: ${(props) => props.theme.colors.icon.base};
+    opacity: 0.64;
     border-radius: 50%;
     content: "";
     transition: transform ${(props) => props.theme.duration.fast}
@@ -48,13 +49,14 @@ const Container: StyledComponent<{checked: boolean, disabled: boolean }, TypeThe
   ${(props) => {
     if (props.checked) {
       return css`
-        color: ${props.theme.colors.selection.color};
+        color: ${props.theme.colors.text.body};
         text-align: left;
-        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};
 
         &::after {
-          background-color: ${props.theme.colors.background.container};
+          background-color: ${props.theme.colors.icon.inverse};
+          opacity: 1;
           transform: translate(17px, -50%);
         }
 
@@ -63,15 +65,15 @@ const Container: StyledComponent<{checked: boolean, disabled: boolean }, TypeThe
           top: 50%;
           left: 4px;
           transform: translate(0, -50%);
-          color: ${props.theme.colors.background.container};
+          color: ${props.theme.colors.icon.inverse};
         }
       `;
     } else {
       return `
         &:hover,
         &:focus {
-          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};
         }
         &:hover {
           &::after {
@@ -92,7 +94,7 @@ const Container: StyledComponent<{checked: boolean, disabled: boolean }, TypeThe
         &:hover,
         &:focus {
           background-color: ${(props) =>
-            props.theme.colors.selection.background};
+            props.theme.colors.container.background.selected};
         }
       }
     `}

package/__flow__/Table/styles.js

@@ -14,7 +14,8 @@ const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.table`
 
   tr,
   thead {
-    border-bottom: 1px solid ${(props) => props.theme.colors.border};
+    border-bottom: 1px solid
+      ${(props) => props.theme.colors.container.border.base};
   }
 
   ${COMMON}

package/__flow__/TableCell/index.stories.js

@@ -11,6 +11,7 @@ export const defaultStory = () => (
   <TableCell
     content={text("content", "🍔 Bacon Smokehouse Burger")}
     id={text("id", "bacon_smokehouse")}
+    color="text.body"
   />
 );
 
@@ -25,6 +26,7 @@ export const additionalProps = () => (
     width={number("width", 300)}
     colSpan={number("colSpan", 2)}
     align={text("align", "center")}
+    color="text.body"
   />
 );
 

package/__flow__/TableHeaderCell/index.stories.js

@@ -11,6 +11,7 @@ export const defaultStory = () => (
   <TableHeaderCell
     content={text("content", "Food Item")}
     id={text("id", "1")}
+    color="text.headline"
   />
 );
 
@@ -23,6 +24,7 @@ export const sortable = () => (
     isSortable={boolean("isSortable", true)}
     content={text("content", "Food Item")}
     id={text("id", "1")}
+    color="text.headline"
   />
 );
 
@@ -37,6 +39,7 @@ export const additionalProps = () => (
     id={text("id", "2")}
     align={text("align", "center")}
     width={number("width", 100)}
+    color="text.headline"
   />
 );
 

package/__flow__/TableRowAccordion/styles.js

@@ -5,7 +5,8 @@ import { COMMON } from "../utils/system-props";
 import type { TypeTheme } from "../types/theme.flow";
 
 const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.tbody`
-  border-bottom: 1px solid ${(props) => props.theme.colors.border};
+  border-bottom: 1px solid
+    ${(props) => props.theme.colors.container.border.base};
 
   ${COMMON}
 `;

package/__flow__/Tabs/styles.js

@@ -12,7 +12,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.ul`
   padding: 0;
   list-style: none;
   border-bottom: ${(props) => props.theme.borders[500]}
-    ${(props) => props.theme.colors.border};
+    ${(props) => props.theme.colors.container.border.base};
 
   ${COMMON}
 `;
@@ -37,7 +37,7 @@ export const TabItem: StyledComponent<any, TypeTheme, *> = styled.li`
     props.isSelected &&
     css`
       box-shadow: ${(props) =>
-        `inset 0 -3px 0 0 ${props.theme.colors.cta.primary.background}`};
+        `inset 0 -3px 0 0 ${props.theme.colors.button.primary.background.base}`};
     `};
 
   &:hover {
@@ -45,7 +45,7 @@ export const TabItem: StyledComponent<any, TypeTheme, *> = styled.li`
       props.isSelected &&
       css`
         box-shadow: ${(props) =>
-          `inset 0 -3px 0 0 ${props.theme.colors.cta.primary.hoverBackground}`};
+          `inset 0 -3px 0 0 ${props.theme.colors.button.primary.background.hover}`};
       `};
   }
 `;
@@ -59,14 +59,14 @@ export const TabButton: StyledComponent<{ ... }, TypeTheme, *> = styled(Button)`
   ${(props) =>
     props.isSelected &&
     css`
-      color: ${(props) => props.theme.colors.cta.link.color};
+      color: ${(props) => props.theme.colors.link.base};
     `};
 
   &:hover {
     ${(props) =>
       props.isSelected &&
       css`
-        color: ${(props) => props.theme.colors.cta.link.hoverColor};
+        color: ${(props) => props.theme.colors.link.hover};
       `};
   }
 

package/__flow__/Textarea/styles.js

@@ -14,9 +14,9 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
     display: block;
     width: 100%;
     padding: ${(props) => props.theme.space[300]};
-    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};
     outline: none;
     resize: none;
@@ -34,7 +34,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) =>
@@ -70,7 +70,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
     props.invalid &&
     css`
       textarea {
-        border-color: ${(props) => props.theme.colors.error.color};
+        border-color: ${(props) => props.theme.colors.form.border.error};
       }
     `}
 
@@ -79,7 +79,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
 
 export const Accessory: StyledComponent<any, TypeTheme, *> = styled.div`
   position: absolute;
-  color: ${(props) => props.theme.colors.icon.primary};
+  color: ${(props) => props.theme.colors.icon.base};
 
   ${(props) =>
     props.before &&

package/__flow__/ThemeProvider/index.js

@@ -1,9 +1,9 @@
 // @flow strict-local
 import * as React from "react";
 import { ThemeProvider as BaseThemeProvider } from "styled-components";
-import theme from "../utils/theme";
+import theme from "../themes/default/theme";
 
-import typeof { default as TypeTheme } from "../utils/theme";
+import typeof { default as TypeTheme } from "../themes/default/theme";
 
 type TypeProps = $ReadOnly<{|
   theme?: TypeTheme,

package/__flow__/Toast/index.js

@@ -136,7 +136,7 @@ const Toast = ({ content, theme, color, icon }: TypeProps) => {
         </Box>
 
         <IconBox>
-          <Icon name="x" ml={400} color="neutral.800" />
+          <Icon name="x" ml={400} color="icon.base" />
         </IconBox>
       </Box>
     </Container>

package/__flow__/Toast/styles.js

@@ -18,14 +18,14 @@ const Container = styled<typeof Box, TypeTheme, TypeProps>(Box)`
   font-family: ${(p) => p.theme.fontFamily};
   ${(p) => p.theme.typography[200]}
   position: relative;
-  background: ${(p) => p.theme.colors.background.container};
-  border-left: 2px solid ${(p) => p.theme.colors[p.type].border};
+  background: ${(p) => p.theme.colors.container.background.base};
+  border-left: 2px solid ${(p) => p.theme.colors.container.border[p.type]};
 `;
 
 export const CustomIcon = styled<typeof Icon, TypeTheme, TypeProps>(Icon)`
   margin-right: ${(props) => props.theme.space[400]};
   transform: translateY(4px);
-  color: ${(p) => (p.customColor ? undefined : p.theme.colors[p.type].icon)};
+  color: ${(p) => (p.customColor ? undefined : p.theme.colors.icon[p.type])};
 `;
 
 export const GlobalToastStyles = createGlobalStyle`

package/__flow__/Token/styles.js

@@ -14,8 +14,8 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
     ${(props) => props.theme.space[300]};
   margin: 0;
   color: ${(props) => props.theme.colors.text.body};
-  background: ${(props) => props.theme.colors.background.container};
-  border: 1px solid ${(props) => props.theme.colors.forms.borderColor};
+  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;
@@ -36,8 +36,10 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
       &:hover,
       &:active {
         color: ${(props) => props.theme.colors.text.body};
-        border: 1px solid ${(props) => props.theme.colors.forms.borderColor};
-        background-color: ${(props) => props.theme.colors.background.app};
+        border: 1px solid
+          ${(props) => props.theme.colors.container.border.decorative.neutral};
+        background-color: ${(props) =>
+          props.theme.colors.container.background.decorative.neutral};
       }
     `}
 
@@ -46,19 +48,26 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
     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};
+      }
     `}
 
   ${(props) =>
     !props.valid &&
     css`
-      color: ${(props) => props.theme.colors.text.inverse};
-      border-color: ${(props) => props.theme.colors.error.color};
-      background: ${(props) => props.theme.colors.error.color};
+      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 {
-        color: ${(props) => props.theme.colors.text.inverse};
-        border-color: ${(props) => props.theme.colors.red[900]};
-        background: ${(props) => props.theme.colors.red[900]};
+        color: ${(props) => props.theme.colors.text.body};
+        border: 1px solid
+          ${(props) => props.theme.colors.container.border.error};
+        background-color: ${(props) =>
+          props.theme.colors.container.background.error};
       }
     `}
 

package/__flow__/TokenInput/index.js

@@ -255,7 +255,7 @@ export default class TokenInput extends React.Component<TypeProps, TypeState> {
   };
 
   renderToken(token: TypeTokenSpec): React.Node {
-    const { iconName: defaultIconName } = this.props;
+    const { iconName: defaultIconName, disabled } = this.props;
     const activeId = this.state.activeToken;
     const { id, iconName: tokenIconName, value, valid } = token;
     const iconName = tokenIconName || defaultIconName;
@@ -267,6 +267,7 @@ export default class TokenInput extends React.Component<TypeProps, TypeState> {
         onClick={(e) => this.handleClickToken(e, token)}
         valid={valid}
         active={isActive}
+        disabled={disabled}
       >
         <Box display="flex" alignItems="center">
           {iconName && <Icon name={iconName} size="mini" pr={300} />}

package/__flow__/TokenInput/styles.js

@@ -14,12 +14,12 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   align-content: center;
   cursor: text;
   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]};
   margin: 0;
   padding: ${(props) => props.theme.space[300]};
   padding-top: ${(props) => props.theme.space[200]};
-  background-color: ${(props) => props.theme.colors.background.container};
+  background-color: ${(props) => props.theme.colors.form.background.base};
   color: ${(props) => props.theme.colors.text.body};
   transition: border-color ${(props) => props.theme.duration.fast}
       ${(props) => props.theme.easing.ease_in},
@@ -46,7 +46,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
       ${(props) => props.theme.space[300]} ${(props) => props.theme.space[100]}
       0;
     color: ${(props) => props.theme.colors.text.body};
-    background-color: ${(props) => props.theme.colors.background.container};
+    background-color: ${(props) => props.theme.colors.form.background.base};
     /** This matches the height of the token so size does not change as tokens are added */
     min-height: 20px;
 
@@ -68,10 +68,18 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
     &:not(output):not(:focus):-moz-ui-invalid {
       box-shadow: none;
     }
+
+    ${(props) =>
+      props.disabled &&
+      css`
+        opacity: 0.4;
+
+        cursor: not-allowed;
+      `}
   }
 
   &:placeholder {
-    color: ${(props) => props.theme.colors.forms.placeholderColor};
+    color: ${(props) => props.theme.colors.form.placeholder.base};
   }
 
   ${(props) =>
@@ -104,13 +112,13 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   ${(props) =>
     props.invalid &&
     css`
-      border-color: ${(props) => props.theme.colors.error.color};
+      border-color: ${(props) => props.theme.colors.form.border.error};
     `}
 
 	${(props) =>
     props.warning &&
     css`
-      border-color: ${(props) => props.theme.colors.warning.color};
+      border-color: ${(props) => props.theme.colors.form.border.warning};
     `}
 
   ${COMMON}

package/__flow__/Tooltip/index.js

@@ -158,10 +158,10 @@ const Content = ({
     py={appearance === "box" ? 400 : 200}
     m={200}
     color="text.body"
-    bg="background.container"
+    bg="container.background.base"
     boxShadow={300}
     border={500}
-    borderColor="border"
+    borderColor="container.border.base"
     // $FlowIssue - upgrade v0.112.0
     {...rest}
   >

package/__flow__/index.js

@@ -3,8 +3,8 @@ export type { EnumIconNames } from "./EnumIconNames";
 export type { TypeTheme } from "./types/theme.flow";
 export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
 export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
-export { default as theme } from "./utils/theme";
-export { default as darkTheme } from "./themes/dark";
+export { default as theme } from "./themes/default/theme";
+export { default as darkTheme } from "./themes/dark/theme";
 export { default as Icon } from "./Icon";
 // DEPRECATED: Alert has been renamed to Banner
 export { default as Alert } from "./Banner";

package/__flow__/themes/dark/decorative-palettes.js

@@ -0,0 +1,43 @@
+import COLORS from "@sproutsocial/seeds-color";
+
+export const green = {
+  background: COLORS.COLOR_GREEN_900,
+  highlight: COLORS.COLOR_GREEN_500,
+  foreground: COLORS.COLOR_GREEN_100,
+};
+
+export const blue = {
+  background: COLORS.COLOR_BLUE_900,
+  highlight: COLORS.COLOR_BLUE_600,
+  foreground: COLORS.COLOR_BLUE_100,
+};
+
+export const purple = {
+  background: COLORS.COLOR_PURPLE_800,
+  highlight: COLORS.COLOR_PURPLE_500,
+  foreground: COLORS.COLOR_PURPLE_100,
+};
+
+export const yellow = {
+  background: COLORS.COLOR_YELLOW_900,
+  highlight: COLORS.COLOR_YELLOW_600,
+  foreground: COLORS.COLOR_YELLOW_100,
+};
+
+export const orange = {
+  background: COLORS.COLOR_ORANGE_900,
+  highlight: COLORS.COLOR_ORANGE_600,
+  foreground: COLORS.COLOR_ORANGE_100,
+};
+
+export const red = {
+  background: COLORS.COLOR_RED_900,
+  highlight: COLORS.COLOR_RED_600,
+  foreground: COLORS.COLOR_RED_100,
+};
+
+export const neutral = {
+  background: COLORS.COLOR_NEUTRAL_900,
+  highlight: COLORS.COLOR_NEUTRAL_500,
+  foreground: COLORS.COLOR_NEUTRAL_100,
+};

package/__flow__/themes/dark/theme.js

@@ -0,0 +1,195 @@
+// @flow strict-local
+
+import COLORS from "@sproutsocial/seeds-color";
+import defaultTheme from "../default/theme";
+import {
+  green,
+  blue,
+  purple,
+  yellow,
+  orange,
+  red,
+  neutral,
+} from "./decorative-palettes";
+
+const darkTheme = {
+  ...defaultTheme,
+  colors: {
+    ...defaultTheme.colors,
+    app: {
+      background: {
+        base: COLORS.COLOR_NEUTRAL_1000,
+      },
+    },
+    container: {
+      background: {
+        base: COLORS.COLOR_NEUTRAL_900,
+        success: green.background,
+        warning: yellow.background,
+        error: red.background,
+        info: blue.background,
+        opportunity: purple.background,
+        danger: red.background,
+        decorative: {
+          green: green.background,
+          blue: blue.background,
+          purple: purple.background,
+          yellow: yellow.background,
+          orange: orange.background,
+          red: red.background,
+          neutral: neutral.background,
+        },
+        selected: COLORS.COLOR_NEUTRAL_0,
+      },
+      border: {
+        base: COLORS.COLOR_NEUTRAL_1100,
+        success: green.highlight,
+        warning: yellow.highlight,
+        error: red.highlight,
+        danger: red.highlight,
+        info: blue.highlight,
+        opportunity: purple.highlight,
+        decorative: {
+          green: green.highlight,
+          blue: blue.highlight,
+          purple: purple.highlight,
+          yellow: yellow.highlight,
+          orange: orange.highlight,
+          red: red.highlight,
+          neutral: neutral.highlight,
+        },
+        selected: COLORS.COLOR_NEUTRAL_0,
+      },
+    },
+    button: {
+      primary: {
+        background: {
+          base: COLORS.COLOR_BLUE_400,
+          hover: COLORS.COLOR_BLUE_300,
+          active: COLORS.COLOR_BLUE_200,
+        },
+        border: {
+          base: "transparent",
+        },
+        text: {
+          base: COLORS.COLOR_NEUTRAL_900,
+          hover: COLORS.COLOR_NEUTRAL_1000,
+        },
+      },
+      secondary: {
+        background: {
+          base: "transparent",
+          hover: COLORS.COLOR_NEUTRAL_100,
+          active: COLORS.COLOR_NEUTRAL_0,
+        },
+        border: {
+          base: COLORS.COLOR_NEUTRAL_0,
+        },
+        text: {
+          base: COLORS.COLOR_NEUTRAL_0,
+          hover: COLORS.COLOR_NEUTRAL_800,
+        },
+      },
+      pill: {
+        background: {
+          base: "transparent",
+          hover: COLORS.COLOR_NEUTRAL_1000,
+          active: COLORS.COLOR_NEUTRAL_900,
+        },
+        border: {
+          base: "transparent",
+        },
+        text: {
+          base: COLORS.COLOR_NEUTRAL_100,
+          hover: COLORS.COLOR_NEUTRAL_0,
+        },
+      },
+      destructive: {
+        background: {
+          base: COLORS.COLOR_RED_400,
+          hover: COLORS.COLOR_RED_300,
+          active: COLORS.COLOR_RED_200,
+        },
+        border: {
+          base: "transparent",
+        },
+        text: {
+          base: COLORS.COLOR_NEUTRAL_900,
+          hover: COLORS.COLOR_NEUTRAL_1000,
+        },
+      },
+      placeholder: {
+        background: {
+          base: "transparent",
+          hover: COLORS.COLOR_NEUTRAL_1100,
+          active: COLORS.COLOR_NEUTRAL_1100,
+        },
+        border: {
+          base: COLORS.COLOR_NEUTRAL_500,
+        },
+        text: {
+          base: COLORS.COLOR_BLUE_400,
+          hover: COLORS.COLOR_BLUE_300,
+        },
+      },
+      unstyled: {
+        background: {
+          base: "transparent",
+        },
+        border: {
+          base: "transparent",
+        },
+        text: {
+          base: COLORS.COLOR_NEUTRAL_300,
+          hover: COLORS.COLOR_NEUTRAL_200,
+        },
+      },
+    },
+    link: {
+      base: COLORS.COLOR_BLUE_400,
+      hover: COLORS.COLOR_BLUE_300,
+    },
+    text: {
+      headline: COLORS.COLOR_NEUTRAL_0,
+      subtext: COLORS.COLOR_NEUTRAL_300,
+      body: COLORS.COLOR_NEUTRAL_100,
+      inverse: COLORS.COLOR_NEUTRAL_900,
+      error: COLORS.COLOR_RED_400,
+    },
+    icon: {
+      base: COLORS.COLOR_NEUTRAL_100,
+      inverse: COLORS.COLOR_NEUTRAL_900,
+      success: green.foreground,
+      warning: yellow.foreground,
+      error: red.foreground,
+      danger: red.foreground,
+      info: blue.foreground,
+      opportunity: purple.foreground,
+    },
+    form: {
+      background: {
+        base: COLORS.COLOR_NEUTRAL_900,
+        selected: COLORS.COLOR_NEUTRAL_0,
+      },
+      border: {
+        base: COLORS.COLOR_NEUTRAL_500,
+        error: red.highlight,
+        warning: yellow.highlight,
+        selected: COLORS.COLOR_NEUTRAL_0,
+      },
+      placeholder: {
+        base: COLORS.COLOR_NEUTRAL_500,
+      },
+    },
+    listItem: {
+      background: {
+        base: "transparent",
+        hover: COLORS.COLOR_NEUTRAL_800,
+        selected: COLORS.COLOR_NEUTRAL_0,
+      },
+    },
+  },
+  mode: "dark",
+};
+
+export default darkTheme;