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

package/__flow__/themes/default/theme.js

@@ -0,0 +1,336 @@
+// @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 type TypeFontFamilyString = string;
+
+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,
+};
+
+console.log(theme.space);
+
+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<>,

package/__flow__/types/theme.colors.flow.js

@@ -0,0 +1,244 @@
+// @flow strict-local
+
+import literalColors from "../themes/default/literal-colors";
+
+type TypeAppColors = {|
+  app: {
+    background: {
+      base: string,
+    },
+  },
+|};
+
+type TypeContainerColors = {|
+  container: {
+    background: {
+      base: string,
+      success: string,
+      warning: string,
+      error: string,
+      info: string,
+      opportunity: string,
+      danger: string,
+      decorative: {
+        green: string,
+        blue: string,
+        purple: string,
+        yellow: string,
+        orange: string,
+        red: string,
+        neutral: string,
+      },
+      selected: string,
+    },
+    border: {
+      base: string,
+      success: string,
+      warning: string,
+      error: string,
+      danger: string,
+      info: string,
+      opportunity: string,
+      decorative: {
+        green: string,
+        blue: string,
+        purple: string,
+        yellow: string,
+        orange: string,
+        red: string,
+        neutral: string,
+      },
+      selected: string,
+    },
+  },
+|};
+
+type TypeButtonColors = {|
+  button: {
+    primary: {
+      background: {
+        base: string,
+        hover: string,
+        active: string,
+      },
+      border: {
+        base: string,
+      },
+      text: {
+        base: string,
+        hover: string,
+      },
+    },
+    secondary: {
+      background: {
+        base: string,
+        hover: string,
+        active: string,
+      },
+      border: {
+        base: string,
+      },
+      text: {
+        base: string,
+        hover: string,
+      },
+    },
+    pill: {
+      background: {
+        base: string,
+        hover: string,
+        active: string,
+      },
+      border: {
+        base: string,
+      },
+      text: {
+        base: string,
+        hover: string,
+      },
+    },
+    destructive: {
+      background: {
+        base: string,
+        hover: string,
+        active: string,
+      },
+      border: {
+        base: string,
+      },
+      text: {
+        base: string,
+        hover: string,
+      },
+    },
+    placeholder: {
+      background: {
+        base: string,
+        hover: string,
+        active: string,
+      },
+      border: {
+        base: string,
+      },
+      text: {
+        base: string,
+        hover: string,
+      },
+    },
+    unstyled: {
+      background: {
+        base: string,
+      },
+      border: {
+        base: string,
+      },
+      text: {
+        base: string,
+        hover: string,
+      },
+    },
+  },
+|};
+
+type TypeLinkColors = {|
+  link: {
+    base: string,
+    hover: string,
+  },
+|};
+
+type TypeTextColors = {|
+  text: {
+    headline: string,
+    subtext: string,
+    body: string,
+    inverse: string,
+    error: string,
+  },
+|};
+
+type TypeIconColors = {|
+  icon: {
+    base: string,
+    inverse: string,
+    success: string,
+    warning: string,
+    error: string,
+    danger: string,
+    info: string,
+    opportunity: string,
+  },
+|};
+
+type TypeFormColors = {|
+  form: {
+    background: {
+      base: string,
+      selected: string,
+    },
+    border: {
+      base: string,
+      error: string,
+      warning: string,
+      selected: string,
+    },
+    placeholder: {
+      base: string,
+    },
+  },
+|};
+
+type TypeListItemColors = {|
+  listItem: {
+    background: {
+      base: string,
+      hover: string,
+      selected: string,
+    },
+  },
+|};
+
+type TypeNetworkColors = {|
+  network: {
+    twitter: string,
+    twitter_like: string,
+    facebook: string,
+    facebook_audience_network: string,
+    linkedin: string,
+    instagram: string,
+    feedly: string,
+    analytics: string,
+    youtube: string,
+    messenger: string,
+    snapchat: string,
+    pinterest: string,
+    tumblr: string,
+    reddit: string,
+    tripadvisor: string,
+    glassdoor: string,
+    google_my_business: string,
+    google_business_messages: string,
+    salesforce: string,
+    zendesk: string,
+    hubspot: string,
+    microsoft_dynamics: string,
+    yelp: string,
+    whatsapp: string,
+  },
+|};
+
+type TypeLiteralColors = typeof literalColors;
+
+export type TypeColors = {
+  ...TypeAppColors,
+  ...TypeContainerColors,
+  ...TypeButtonColors,
+  ...TypeLinkColors,
+  ...TypeLinkColors,
+  ...TypeTextColors,
+  ...TypeIconColors,
+  ...TypeFormColors,
+  ...TypeListItemColors,
+  ...TypeNetworkColors,
+  ...TypeLiteralColors,
+};