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

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

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

package/__flow__/themes/default/literal-colors.js

@@ -0,0 +1,160 @@
+// @flow strict-local
+
+import COLORS from "@sproutsocial/seeds-color";
+
+const literalColors = {
+  neutral: {
+    "0": COLORS.COLOR_NEUTRAL_0,
+    "100": COLORS.COLOR_NEUTRAL_100,
+    "200": COLORS.COLOR_NEUTRAL_200,
+    "300": COLORS.COLOR_NEUTRAL_300,
+    "400": COLORS.COLOR_NEUTRAL_400,
+    "500": COLORS.COLOR_NEUTRAL_500,
+    "600": COLORS.COLOR_NEUTRAL_600,
+    "700": COLORS.COLOR_NEUTRAL_700,
+    "800": COLORS.COLOR_NEUTRAL_800,
+    "900": COLORS.COLOR_NEUTRAL_900,
+    "1000": COLORS.COLOR_NEUTRAL_1000,
+  },
+  green: {
+    "0": COLORS.COLOR_GREEN_0,
+    "100": COLORS.COLOR_GREEN_100,
+    "200": COLORS.COLOR_GREEN_200,
+    "300": COLORS.COLOR_GREEN_300,
+    "400": COLORS.COLOR_GREEN_400,
+    "500": COLORS.COLOR_GREEN_500,
+    "600": COLORS.COLOR_GREEN_600,
+    "700": COLORS.COLOR_GREEN_700,
+    "800": COLORS.COLOR_GREEN_800,
+    "900": COLORS.COLOR_GREEN_900,
+    "1000": COLORS.COLOR_GREEN_1000,
+    "1100": COLORS.COLOR_GREEN_1100,
+  },
+  red: {
+    "0": COLORS.COLOR_RED_0,
+    "100": COLORS.COLOR_RED_100,
+    "200": COLORS.COLOR_RED_200,
+    "300": COLORS.COLOR_RED_300,
+    "400": COLORS.COLOR_RED_400,
+    "500": COLORS.COLOR_RED_500,
+    "600": COLORS.COLOR_RED_600,
+    "700": COLORS.COLOR_RED_700,
+    "800": COLORS.COLOR_RED_800,
+    "900": COLORS.COLOR_RED_900,
+    "1000": COLORS.COLOR_RED_1000,
+  },
+  blue: {
+    "0": COLORS.COLOR_BLUE_0,
+    "100": COLORS.COLOR_BLUE_100,
+    "200": COLORS.COLOR_BLUE_200,
+    "300": COLORS.COLOR_BLUE_300,
+    "400": COLORS.COLOR_BLUE_400,
+    "500": COLORS.COLOR_BLUE_500,
+    "600": COLORS.COLOR_BLUE_600,
+    "700": COLORS.COLOR_BLUE_700,
+    "800": COLORS.COLOR_BLUE_800,
+    "900": COLORS.COLOR_BLUE_900,
+    "1000": COLORS.COLOR_BLUE_1000,
+    "1100": COLORS.COLOR_BLUE_1100,
+  },
+  teal: {
+    "0": COLORS.COLOR_TEAL_0,
+    "100": COLORS.COLOR_TEAL_100,
+    "200": COLORS.COLOR_TEAL_200,
+    "300": COLORS.COLOR_TEAL_300,
+    "400": COLORS.COLOR_TEAL_400,
+    "500": COLORS.COLOR_TEAL_500,
+    "600": COLORS.COLOR_TEAL_600,
+    "700": COLORS.COLOR_TEAL_700,
+    "800": COLORS.COLOR_TEAL_800,
+    "900": COLORS.COLOR_TEAL_900,
+    "1000": COLORS.COLOR_TEAL_1000,
+    "1100": COLORS.COLOR_TEAL_1100,
+  },
+  aqua: {
+    "0": COLORS.COLOR_AQUA_0,
+    "100": COLORS.COLOR_AQUA_100,
+    "200": COLORS.COLOR_AQUA_200,
+    "300": COLORS.COLOR_AQUA_300,
+    "400": COLORS.COLOR_AQUA_400,
+    "500": COLORS.COLOR_AQUA_500,
+    "600": COLORS.COLOR_AQUA_600,
+    "700": COLORS.COLOR_AQUA_700,
+    "800": COLORS.COLOR_AQUA_800,
+    "900": COLORS.COLOR_AQUA_900,
+    "1000": COLORS.COLOR_AQUA_1000,
+    "1100": COLORS.COLOR_AQUA_1100,
+  },
+  purple: {
+    "0": COLORS.COLOR_PURPLE_0,
+    "100": COLORS.COLOR_PURPLE_100,
+    "200": COLORS.COLOR_PURPLE_200,
+    "300": COLORS.COLOR_PURPLE_300,
+    "400": COLORS.COLOR_PURPLE_400,
+    "500": COLORS.COLOR_PURPLE_500,
+    "600": COLORS.COLOR_PURPLE_600,
+    "700": COLORS.COLOR_PURPLE_700,
+    "800": COLORS.COLOR_PURPLE_800,
+    "900": COLORS.COLOR_PURPLE_900,
+    "1000": COLORS.COLOR_PURPLE_1000,
+    "1100": COLORS.COLOR_PURPLE_1100,
+  },
+  magenta: {
+    "0": COLORS.COLOR_MAGENTA_0,
+    "100": COLORS.COLOR_MAGENTA_100,
+    "200": COLORS.COLOR_MAGENTA_200,
+    "300": COLORS.COLOR_MAGENTA_300,
+    "400": COLORS.COLOR_MAGENTA_400,
+    "500": COLORS.COLOR_MAGENTA_500,
+    "600": COLORS.COLOR_MAGENTA_600,
+    "700": COLORS.COLOR_MAGENTA_700,
+    "800": COLORS.COLOR_MAGENTA_800,
+    "900": COLORS.COLOR_MAGENTA_900,
+    "1000": COLORS.COLOR_MAGENTA_1000,
+    "1100": COLORS.COLOR_MAGENTA_1100,
+  },
+  yellow: {
+    "0": COLORS.COLOR_YELLOW_0,
+    "100": COLORS.COLOR_YELLOW_100,
+    "200": COLORS.COLOR_YELLOW_200,
+    "300": COLORS.COLOR_YELLOW_300,
+    "400": COLORS.COLOR_YELLOW_400,
+    "500": COLORS.COLOR_YELLOW_500,
+    "600": COLORS.COLOR_YELLOW_600,
+    "700": COLORS.COLOR_YELLOW_700,
+    "800": COLORS.COLOR_YELLOW_800,
+    "900": COLORS.COLOR_YELLOW_900,
+    "1000": COLORS.COLOR_YELLOW_1000,
+    "1100": COLORS.COLOR_YELLOW_1100,
+  },
+  pink: {
+    "0": COLORS.COLOR_PINK_0,
+    "100": COLORS.COLOR_PINK_100,
+    "200": COLORS.COLOR_PINK_200,
+    "300": COLORS.COLOR_PINK_300,
+    "400": COLORS.COLOR_PINK_400,
+    "500": COLORS.COLOR_PINK_500,
+    "600": COLORS.COLOR_PINK_600,
+    "700": COLORS.COLOR_PINK_700,
+    "800": COLORS.COLOR_PINK_800,
+    "900": COLORS.COLOR_PINK_900,
+    "1000": COLORS.COLOR_PINK_1000,
+    "1100": COLORS.COLOR_PINK_1100,
+  },
+  orange: {
+    "0": COLORS.COLOR_ORANGE_0,
+    "100": COLORS.COLOR_ORANGE_100,
+    "200": COLORS.COLOR_ORANGE_200,
+    "300": COLORS.COLOR_ORANGE_300,
+    "400": COLORS.COLOR_ORANGE_400,
+    "500": COLORS.COLOR_ORANGE_500,
+    "600": COLORS.COLOR_ORANGE_600,
+    "700": COLORS.COLOR_ORANGE_700,
+    "800": COLORS.COLOR_ORANGE_800,
+    "900": COLORS.COLOR_ORANGE_900,
+    "1000": COLORS.COLOR_ORANGE_1000,
+    "1100": COLORS.COLOR_ORANGE_1100,
+  },
+};
+
+export default literalColors;

package/__flow__/themes/default/theme.js

@@ -0,0 +1,332 @@
+// @flow strict-local
+
+import COLORS from "@sproutsocial/seeds-color";
+import literalColors from "./literal-colors";
+import {
+  green,
+  blue,
+  purple,
+  yellow,
+  orange,
+  red,
+  neutral,
+} from "./decorative-palettes";
+import NETWORKCOLORS from "@sproutsocial/seeds-networkcolor";
+import TYPOGRAPHY from "@sproutsocial/seeds-typography";
+import SPACE from "@sproutsocial/seeds-space";
+import DEPTH from "@sproutsocial/seeds-depth";
+import MOTION from "@sproutsocial/seeds-motion";
+import BORDER from "@sproutsocial/seeds-border";
+
+export const breakpoints = ["900px", "1200px", "1500px", "1800px"];
+
+const colors = {
+  app: {
+    background: {
+      base: COLORS.COLOR_NEUTRAL_100,
+    },
+  },
+  container: {
+    background: {
+      base: COLORS.COLOR_NEUTRAL_0,
+      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_800,
+    },
+    border: {
+      base: COLORS.COLOR_NEUTRAL_200,
+      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_800,
+    },
+  },
+  button: {
+    primary: {
+      background: {
+        base: COLORS.COLOR_BLUE_700,
+        hover: COLORS.COLOR_BLUE_800,
+        active: COLORS.COLOR_BLUE_900,
+      },
+      border: {
+        base: "transparent",
+      },
+      text: {
+        base: COLORS.COLOR_NEUTRAL_0,
+        hover: COLORS.COLOR_NEUTRAL_0,
+      },
+    },
+    secondary: {
+      background: {
+        base: "transparent",
+        hover: COLORS.COLOR_NEUTRAL_800,
+        active: COLORS.COLOR_NEUTRAL_900,
+      },
+      border: {
+        base: COLORS.COLOR_NEUTRAL_800,
+      },
+      text: {
+        base: COLORS.COLOR_NEUTRAL_800,
+        hover: COLORS.COLOR_NEUTRAL_0,
+      },
+    },
+    pill: {
+      background: {
+        base: "transparent",
+        hover: COLORS.COLOR_NEUTRAL_100,
+        active: COLORS.COLOR_NEUTRAL_200,
+      },
+      border: {
+        base: "transparent",
+      },
+      text: {
+        base: COLORS.COLOR_NEUTRAL_800,
+        hover: COLORS.COLOR_NEUTRAL_900,
+      },
+    },
+    destructive: {
+      background: {
+        base: COLORS.COLOR_RED_800,
+        hover: COLORS.COLOR_RED_900,
+        active: COLORS.COLOR_RED_1000,
+      },
+      border: {
+        base: "transparent",
+      },
+      text: {
+        base: COLORS.COLOR_NEUTRAL_0,
+        hover: COLORS.COLOR_NEUTRAL_0,
+      },
+    },
+    placeholder: {
+      background: {
+        base: "transparent",
+        hover: COLORS.COLOR_NEUTRAL_0,
+        active: COLORS.COLOR_NEUTRAL_0,
+      },
+      border: {
+        base: COLORS.COLOR_NEUTRAL_500,
+      },
+      text: {
+        base: COLORS.COLOR_BLUE_700,
+        hover: COLORS.COLOR_BLUE_800,
+      },
+    },
+    unstyled: {
+      background: {
+        base: "transparent",
+      },
+      border: {
+        base: "transparent",
+      },
+      text: {
+        base: COLORS.COLOR_NEUTRAL_700,
+        hover: COLORS.COLOR_NEUTRAL_900,
+      },
+    },
+  },
+  link: {
+    base: COLORS.COLOR_BLUE_800,
+    hover: COLORS.COLOR_BLUE_900,
+  },
+  text: {
+    headline: COLORS.COLOR_NEUTRAL_900,
+    subtext: COLORS.COLOR_NEUTRAL_700,
+    body: COLORS.COLOR_NEUTRAL_800,
+    inverse: COLORS.COLOR_NEUTRAL_0,
+    error: COLORS.COLOR_RED_800,
+  },
+  icon: {
+    base: COLORS.COLOR_NEUTRAL_800,
+    inverse: COLORS.COLOR_NEUTRAL_0,
+    success: green.foreground,
+    warning: yellow.foreground,
+    error: red.foreground,
+    danger: red.foreground,
+    info: blue.foreground,
+    opportunity: purple.foreground,
+  },
+  form: {
+    background: {
+      base: COLORS.COLOR_NEUTRAL_0,
+      selected: COLORS.COLOR_NEUTRAL_800,
+    },
+    border: {
+      base: COLORS.COLOR_NEUTRAL_400,
+      error: red.highlight,
+      warning: yellow.highlight,
+      selected: COLORS.COLOR_NEUTRAL_800,
+    },
+    placeholder: {
+      base: COLORS.COLOR_NEUTRAL_600,
+    },
+  },
+  listItem: {
+    background: {
+      base: "transparent",
+      hover: COLORS.COLOR_NEUTRAL_100,
+      selected: COLORS.COLOR_NEUTRAL_800,
+    },
+  },
+  network: {
+    twitter: NETWORKCOLORS.NETWORK_COLOR_TWITTER,
+    twitter_like: NETWORKCOLORS.NETWORK_COLOR_TWITTER_LIKE,
+    facebook: NETWORKCOLORS.NETWORK_COLOR_FACEBOOK,
+    facebook_audience_network:
+      NETWORKCOLORS.NETWORK_COLOR_FACEBOOK_AUDIENCE_NETWORK,
+    linkedin: NETWORKCOLORS.NETWORK_COLOR_LINKEDIN,
+    instagram: NETWORKCOLORS.NETWORK_COLOR_INSTAGRAM,
+    feedly: NETWORKCOLORS.NETWORK_COLOR_FEEDLY,
+    analytics: NETWORKCOLORS.NETWORK_COLOR_ANALYTICS,
+    youtube: NETWORKCOLORS.NETWORK_COLOR_YOUTUBE,
+    messenger: NETWORKCOLORS.NETWORK_COLOR_MESSENGER,
+    snapchat: NETWORKCOLORS.NETWORK_COLOR_SNAPCHAT,
+    pinterest: NETWORKCOLORS.NETWORK_COLOR_PINTEREST,
+    tumblr: NETWORKCOLORS.NETWORK_COLOR_TUMBLR,
+    reddit: NETWORKCOLORS.NETWORK_COLOR_REDDIT,
+    tripadvisor: NETWORKCOLORS.NETWORK_COLOR_TRIPADVISOR,
+    glassdoor: NETWORKCOLORS.NETWORK_COLOR_GLASSDOOR,
+    google_my_business: NETWORKCOLORS.NETWORK_COLOR_GOOGLE_MY_BUSINESS,
+    google_business_messages:
+      NETWORKCOLORS.NETWORK_COLOR_GOOGLE_BUSINESS_MESSAGES,
+    salesforce: NETWORKCOLORS.NETWORK_COLOR_SALESFORCE,
+    zendesk: NETWORKCOLORS.NETWORK_COLOR_ZENDESK,
+    hubspot: NETWORKCOLORS.NETWORK_COLOR_HUBSPOT,
+    microsoft_dynamics: NETWORKCOLORS.NETWORK_COLOR_MICROSOFT_DYNAMICS,
+    yelp: NETWORKCOLORS.NETWORK_COLOR_YELP,
+    whatsapp: NETWORKCOLORS.NETWORK_COLOR_WHATSAPP,
+  },
+  ...literalColors,
+};
+
+export const typography = {
+  "100": TYPOGRAPHY.TYPOGRAPHY_SIZE_100,
+  "200": TYPOGRAPHY.TYPOGRAPHY_SIZE_200,
+  "300": TYPOGRAPHY.TYPOGRAPHY_SIZE_300,
+  "400": TYPOGRAPHY.TYPOGRAPHY_SIZE_400,
+  "500": TYPOGRAPHY.TYPOGRAPHY_SIZE_500,
+  "600": TYPOGRAPHY.TYPOGRAPHY_SIZE_600,
+  "700": TYPOGRAPHY.TYPOGRAPHY_SIZE_700,
+  "800": TYPOGRAPHY.TYPOGRAPHY_SIZE_800,
+  "900": TYPOGRAPHY.TYPOGRAPHY_SIZE_900,
+  "1000": TYPOGRAPHY.TYPOGRAPHY_SIZE_1000,
+  "1100": TYPOGRAPHY.TYPOGRAPHY_SIZE_1100,
+  "1200": TYPOGRAPHY.TYPOGRAPHY_SIZE_1200,
+};
+
+export const fontFamily = TYPOGRAPHY.TYPOGRAPHY_FAMILY;
+
+export const fontWeights = {
+  normal: TYPOGRAPHY.TYPOGRAPHY_WEIGHT_NORMAL,
+  semibold: TYPOGRAPHY.TYPOGRAPHY_WEIGHT_SEMIBOLD,
+  bold: TYPOGRAPHY.TYPOGRAPHY_WEIGHT_BOLD,
+  extrabold: TYPOGRAPHY.TYPOGRAPHY_WEIGHT_EXTRA_BOLD,
+};
+
+export const space = {
+  "0": SPACE.SPACE_SIZE_0,
+  "100": SPACE.SPACE_SIZE_100,
+  "200": SPACE.SPACE_SIZE_200,
+  "300": SPACE.SPACE_SIZE_300,
+  "350": SPACE.SPACE_SIZE_350,
+  "400": SPACE.SPACE_SIZE_400,
+  "450": SPACE.SPACE_SIZE_450,
+  "500": SPACE.SPACE_SIZE_500,
+  "600": SPACE.SPACE_SIZE_600,
+};
+
+export const radii = {
+  "400": BORDER.BORDER_RADIUS_400,
+  "500": BORDER.BORDER_RADIUS_500,
+  "600": BORDER.BORDER_RADIUS_600,
+  "1000": BORDER.BORDER_RADIUS_1000,
+  inner: BORDER.BORDER_RADIUS_500,
+  outer: BORDER.BORDER_RADIUS_600,
+  pill: BORDER.BORDER_RADIUS_1000,
+};
+
+export const borders = {
+  "500": `${BORDER.BORDER_WIDTH_500} solid`,
+};
+
+export const borderWidths = {
+  "500": BORDER.BORDER_WIDTH_500,
+};
+
+export const shadows = {
+  "100": DEPTH.ELEVATION_LEVEL_100,
+  "200": DEPTH.ELEVATION_LEVEL_200,
+  "300": DEPTH.ELEVATION_LEVEL_300,
+  "400": DEPTH.ELEVATION_LEVEL_400,
+};
+
+export const easing = {
+  ease_in: MOTION.MOTION_EASE_IN,
+  ease_out: MOTION.MOTION_EASE_OUT,
+  ease_inout: MOTION.MOTION_EASE_INOUT,
+};
+
+export const duration = {
+  fast: MOTION.MOTION_DURATION_FAST,
+  medium: MOTION.MOTION_DURATION_MEDIUM,
+  slow: MOTION.MOTION_DURATION_SLOW,
+};
+
+const theme = {
+  breakpoints,
+  colors,
+  typography: {
+    ...typography,
+    typography,
+  },
+  fontFamily,
+  fontWeights,
+  space: {
+    ...space,
+    space,
+    "-space": Object.keys(space).reduce((negativeSpace, key) => {
+      // The values are strings (eg 24px) so we concatenate a negative sign
+      negativeSpace[key] = `-${space[key]}`;
+      return negativeSpace;
+    }, {}),
+  },
+  radii: {
+    ...radii,
+    radii,
+  },
+  borders,
+  borderWidths,
+  shadows: {
+    ...shadows,
+    shadows,
+  },
+  easing,
+  duration,
+};
+
+export default theme;

package/__flow__/types/system-props.flow.js

@@ -8,7 +8,7 @@ import type {
   ZIndexProperty,
 } from "csstype";
 
-import type { TypeTypographySize } from "../types/theme.flow";
+import type { TypeTypography } from "../types/theme.flow";
 
 /* eslint-disable prettier/prettier */
 
@@ -88,7 +88,7 @@ export type TypeSystemBorderProps = $ReadOnly<{|
   textShadow?: TypeResponsiveBase<>,
 |}>;
 
-type TypeResponsiveTypeographySize = TypeResponsiveString<TypeTypographySize>;
+type TypeResponsiveTypeographySize = TypeResponsiveString<TypeTypography>;
 export type TypeSystemTypographyProps = $ReadOnly<{|
   typeScale?: TypeResponsiveTypeographySize,
   fontFamily?: TypeResponsiveString<>,