@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/themes/light/theme.js

@@ -1,32 +1,17 @@
 // @flow strict-local
 
+import { transparentize } from 'polished';
 import COLORS from '@sproutsocial/seeds-color';
-import literalColors from './literal-colors';
-import {datavizPalette} from './dataviz-palette';
-import {
-  green,
-  blue,
-  purple,
-  yellow,
-  orange,
-  red,
-  neutral,
-  magenta,
-  pink,
-  aqua,
-  teal,
-} 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';
-import {transparentize} from 'polished';
-import type {TypeSpaceLiterals as StackTypeSpaceLiterals} from '../../Stack/TypeSpaceLiterals';
-
+import literalColors from "./literal-colors";
+import { datavizPalette } from "./dataviz-palette";
+import { green, blue, purple, yellow, orange, red, neutral, magenta, pink, aqua, teal } from "./decorative-palettes";
 export const breakpoints = ['900px', '1200px', '1500px', '1800px'];
-
 const MODE = 'light';
 
 // If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
@@ -34,8 +19,8 @@ const MODE = 'light';
 const colors = {
   app: {
     background: {
-      base: COLORS.COLOR_NEUTRAL_100,
-    },
+      base: COLORS.COLOR_NEUTRAL_100
+    }
   },
   container: {
     background: {
@@ -58,12 +43,12 @@ const colors = {
         magenta: magenta.background,
         pink: pink.background,
         aqua: aqua.background,
-        teal: teal.background,
+        teal: teal.background
       },
       selected: COLORS.COLOR_NEUTRAL_800,
       positive_sentiment: COLORS.COLOR_BLUE_500,
       negative_sentiment: COLORS.COLOR_RED_500,
-      neutral_sentiment: COLORS.COLOR_NEUTRAL_300,
+      neutral_sentiment: COLORS.COLOR_NEUTRAL_300
     },
     border: {
       base: COLORS.COLOR_NEUTRAL_200,
@@ -85,98 +70,98 @@ const colors = {
         magenta: magenta.highlight,
         pink: pink.highlight,
         aqua: aqua.highlight,
-        teal: teal.highlight,
+        teal: teal.highlight
       },
-      selected: COLORS.COLOR_NEUTRAL_800,
-    },
+      selected: COLORS.COLOR_NEUTRAL_800
+    }
   },
   button: {
     primary: {
       background: {
         base: COLORS.COLOR_BLUE_700,
         hover: COLORS.COLOR_BLUE_800,
-        active: COLORS.COLOR_BLUE_900,
+        active: COLORS.COLOR_BLUE_900
       },
       border: {
-        base: 'transparent',
+        base: 'transparent'
       },
       text: {
         base: COLORS.COLOR_NEUTRAL_0,
-        hover: COLORS.COLOR_NEUTRAL_0,
-      },
+        hover: COLORS.COLOR_NEUTRAL_0
+      }
     },
     secondary: {
       background: {
         base: 'transparent',
         hover: COLORS.COLOR_NEUTRAL_800,
-        active: COLORS.COLOR_NEUTRAL_900,
+        active: COLORS.COLOR_NEUTRAL_900
       },
       border: {
-        base: COLORS.COLOR_NEUTRAL_800,
+        base: COLORS.COLOR_NEUTRAL_800
       },
       text: {
         base: COLORS.COLOR_NEUTRAL_800,
-        hover: COLORS.COLOR_NEUTRAL_0,
-      },
+        hover: COLORS.COLOR_NEUTRAL_0
+      }
     },
     pill: {
       background: {
         base: 'transparent',
         hover: COLORS.COLOR_NEUTRAL_100,
-        active: COLORS.COLOR_NEUTRAL_200,
+        active: COLORS.COLOR_NEUTRAL_200
       },
       border: {
-        base: 'transparent',
+        base: 'transparent'
       },
       text: {
         base: COLORS.COLOR_NEUTRAL_800,
-        hover: COLORS.COLOR_NEUTRAL_900,
-      },
+        hover: COLORS.COLOR_NEUTRAL_900
+      }
     },
     destructive: {
       background: {
         base: COLORS.COLOR_RED_800,
         hover: COLORS.COLOR_RED_900,
-        active: COLORS.COLOR_RED_1000,
+        active: COLORS.COLOR_RED_1000
       },
       border: {
-        base: 'transparent',
+        base: 'transparent'
       },
       text: {
         base: COLORS.COLOR_NEUTRAL_0,
-        hover: COLORS.COLOR_NEUTRAL_0,
-      },
+        hover: COLORS.COLOR_NEUTRAL_0
+      }
     },
     placeholder: {
       background: {
         base: 'transparent',
         hover: COLORS.COLOR_NEUTRAL_0,
-        active: COLORS.COLOR_NEUTRAL_0,
+        active: COLORS.COLOR_NEUTRAL_0
       },
       border: {
-        base: COLORS.COLOR_NEUTRAL_500,
+        base: COLORS.COLOR_NEUTRAL_500
       },
       text: {
         base: COLORS.COLOR_BLUE_700,
-        hover: COLORS.COLOR_BLUE_800,
-      },
+        hover: COLORS.COLOR_BLUE_800
+      }
     },
     unstyled: {
       background: {
-        base: 'transparent',
+        base: 'transparent'
       },
       border: {
-        base: 'transparent',
+        base: 'transparent'
       },
       text: {
         base: COLORS.COLOR_NEUTRAL_700,
-        hover: COLORS.COLOR_NEUTRAL_900,
-      },
-    },
+        hover: COLORS.COLOR_NEUTRAL_900
+      }
+    }
   },
   link: {
     base: COLORS.COLOR_BLUE_800,
-    hover: COLORS.COLOR_BLUE_900,
+    hover: COLORS.COLOR_BLUE_900
   },
   text: {
     headline: COLORS.COLOR_NEUTRAL_900,
@@ -186,8 +171,8 @@ const colors = {
     error: COLORS.COLOR_RED_800,
     background: {
       highlight: COLORS.COLOR_YELLOW_200,
-      selection: COLORS.COLOR_BLUE_300,
-    },
+      selection: COLORS.COLOR_BLUE_300
+    }
   },
   icon: {
     base: COLORS.COLOR_NEUTRAL_800,
@@ -202,54 +187,53 @@ const colors = {
     applied: COLORS.COLOR_BLUE_700,
     positive_sentiment: COLORS.COLOR_BLUE_600,
     negative_sentiment: COLORS.COLOR_RED_600,
-    neutral_sentiment: COLORS.COLOR_NEUTRAL_500,
+    neutral_sentiment: COLORS.COLOR_NEUTRAL_500
   },
   form: {
     background: {
       base: COLORS.COLOR_NEUTRAL_0,
-      selected: COLORS.COLOR_NEUTRAL_800,
+      selected: COLORS.COLOR_NEUTRAL_800
     },
     border: {
       base: COLORS.COLOR_NEUTRAL_400,
       error: red.highlight,
       warning: yellow.highlight,
-      selected: COLORS.COLOR_NEUTRAL_800,
+      selected: COLORS.COLOR_NEUTRAL_800
     },
     placeholder: {
-      base: COLORS.COLOR_NEUTRAL_600,
-    },
+      base: COLORS.COLOR_NEUTRAL_600
+    }
   },
   listItem: {
     background: {
       base: 'transparent',
       hover: COLORS.COLOR_NEUTRAL_100,
-      selected: COLORS.COLOR_NEUTRAL_800,
-    },
+      selected: COLORS.COLOR_NEUTRAL_800
+    }
   },
   overlay: {
     background: {
-      base: transparentize(0.44, COLORS.COLOR_NEUTRAL_1000),
+      base: transparentize(0.44, COLORS.COLOR_NEUTRAL_1000)
     },
     text: {
-      base: COLORS.COLOR_NEUTRAL_0,
+      base: COLORS.COLOR_NEUTRAL_0
     },
     icon: {
-      base: COLORS.COLOR_NEUTRAL_0,
-    },
+      base: COLORS.COLOR_NEUTRAL_0
+    }
   },
   elevation: {
-    base: `${COLORS.COLOR_NEUTRAL_900}3D`,
+    base: `${COLORS.COLOR_NEUTRAL_900}3D`
   },
   illustration: {
     fill: COLORS.COLOR_BLUE_400,
-    stroke: neutral.foreground,
+    stroke: neutral.foreground
   },
   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,
+    facebook_audience_network: NETWORKCOLORS.NETWORK_COLOR_FACEBOOK_AUDIENCE_NETWORK,
     linkedin: NETWORKCOLORS.NETWORK_COLOR_LINKEDIN,
     instagram: NETWORKCOLORS.NETWORK_COLOR_INSTAGRAM,
     feedly: NETWORKCOLORS.NETWORK_COLOR_FEEDLY,
@@ -263,25 +247,23 @@ const colors = {
     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,
+    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,
-    tiktok: NETWORKCOLORS.NETWORK_COLOR_TIKTOK,
+    tiktok: NETWORKCOLORS.NETWORK_COLOR_TIKTOK
   },
   dataviz: {
     map: datavizPalette.DATAVIZ_COLORS_MAP,
-    list: datavizPalette.DATAVIZ_COLORS_LIST,
+    list: datavizPalette.DATAVIZ_COLORS_LIST
   },
   ...literalColors,
   // Remove this in a future version in favor of the above object
-  ...datavizPalette,
+  ...datavizPalette
 };
-
 export const typography = {
   '100': TYPOGRAPHY.TYPOGRAPHY_SIZE_100,
   '200': TYPOGRAPHY.TYPOGRAPHY_SIZE_200,
@@ -294,26 +276,16 @@ export const typography = {
   '900': TYPOGRAPHY.TYPOGRAPHY_SIZE_900,
   '1000': TYPOGRAPHY.TYPOGRAPHY_SIZE_1000,
   '1100': TYPOGRAPHY.TYPOGRAPHY_SIZE_1100,
-  '1200': TYPOGRAPHY.TYPOGRAPHY_SIZE_1200,
+  '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,
+  extrabold: TYPOGRAPHY.TYPOGRAPHY_WEIGHT_EXTRA_BOLD
 };
-
-/**
- * @deprecated
- * Import from `Stack/TypeSpaceLiterals` instead.
- */
-export type TypeSpaceLiterals = StackTypeSpaceLiterals;
-
 export const space = {
   '0': SPACE.SPACE_SIZE_0,
   '100': SPACE.SPACE_SIZE_100,
@@ -323,9 +295,8 @@ export const space = {
   '400': SPACE.SPACE_SIZE_400,
   '450': SPACE.SPACE_SIZE_450,
   '500': SPACE.SPACE_SIZE_500,
-  '600': SPACE.SPACE_SIZE_600,
+  '600': SPACE.SPACE_SIZE_600
 };
-
 export const radii = {
   '400': BORDER.BORDER_RADIUS_400,
   '500': BORDER.BORDER_RADIUS_500,
@@ -333,41 +304,35 @@ export const radii = {
   '1000': BORDER.BORDER_RADIUS_1000,
   inner: BORDER.BORDER_RADIUS_500,
   outer: BORDER.BORDER_RADIUS_600,
-  pill: BORDER.BORDER_RADIUS_1000,
+  pill: BORDER.BORDER_RADIUS_1000
 };
-
 export const borders = {
-  '500': `${BORDER.BORDER_WIDTH_500} solid`,
+  '500': `${BORDER.BORDER_WIDTH_500} solid`
 };
-
 export const borderWidths = {
-  '500': BORDER.BORDER_WIDTH_500,
+  '500': BORDER.BORDER_WIDTH_500
 };
-
 export const shadows = {
   low: `${DEPTH.ELEVATION_LEVEL_100} ${COLORS.COLOR_NEUTRAL_900}3D`,
   medium: `${DEPTH.ELEVATION_LEVEL_300} ${COLORS.COLOR_NEUTRAL_900}3D`,
-  high: `${DEPTH.ELEVATION_LEVEL_400} ${COLORS.COLOR_NEUTRAL_900}3D`,
+  high: `${DEPTH.ELEVATION_LEVEL_400} ${COLORS.COLOR_NEUTRAL_900}3D`
 };
-
 export const easing = {
   ease_in: MOTION.MOTION_EASE_IN,
   ease_out: MOTION.MOTION_EASE_OUT,
-  ease_inout: MOTION.MOTION_EASE_INOUT,
+  ease_inout: MOTION.MOTION_EASE_INOUT
 };
-
 export const duration = {
   fast: MOTION.MOTION_DURATION_FAST,
   medium: MOTION.MOTION_DURATION_MEDIUM,
-  slow: MOTION.MOTION_DURATION_SLOW,
+  slow: MOTION.MOTION_DURATION_SLOW
 };
-
 const theme = {
   breakpoints,
   colors,
   typography: {
     ...typography,
-    typography,
+    typography
   },
   fontFamily,
   fontWeights,
@@ -378,18 +343,17 @@ const theme = {
       // The values are strings (eg 24px) so we concatenate a negative sign
       negativeSpace[key] = `-${space[key]}`;
       return negativeSpace;
-    }, {}),
+    }, {})
   },
   radii: {
     ...radii,
-    radii,
+    radii
   },
   borders,
   borderWidths,
   shadows,
   easing,
   duration,
-  mode: MODE,
+  mode: MODE
 };
-
-export default theme;
+export default theme;

package/__flow__/types/styled-components.flow.js

@@ -5,4 +5,4 @@ export type TypeStyledComponentsCommonProps = $ReadOnly<{|
   forwardAs?: React$ElementType,
   className?: ?string,
   ref?: React$Ref<any>,
-|}>;
+|}>;

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

@@ -1,36 +1,22 @@
 'no babel-plugin-flow-react-proptypes';
-// @flow strict-local
-import type {
-  FlexDirectionProperty,
-  FlexWrapProperty,
-  PositionProperty,
-  TextAlignProperty,
-  ZIndexProperty,
-} from 'csstype';
 
-import type {TypeTypography} from '../types/theme.flow';
+// @flow strict-local
+import type { FlexDirectionProperty, FlexWrapProperty, PositionProperty, TextAlignProperty, ZIndexProperty } from 'csstype';
+import type { TypeTypography } from "./theme.flow";
 
 /* eslint-disable prettier/prettier */
 
 // helper types
-export type TypeResponsive<T> =
-  | T
-  | [T]
-  | [T, T]
-  | [T, T, T]
-  | [T, T, T, T]
-  | [T, T, T, T, T];
+export type TypeResponsive<T> = T | [T] | [T, T] | [T, T, T] | [T, T, T, T] | [T, T, T, T, T];
 type TypeBase<T = 0> = T | string | number | ?boolean;
 type TypeResponsiveString<T = string> = TypeResponsive<T | string | ?boolean>;
 type TypeResponsiveBase<T = 0> = TypeResponsive<TypeBase<T>>;
-
 type TypeColorProps = $ReadOnly<{|
   backgroundColor?: TypeResponsiveBase<>,
   bg?: TypeResponsiveBase<>,
   color?: TypeResponsiveBase<>,
   opacity?: TypeResponsiveBase<>,
 |}>;
-
 type TypeSpaceProps = $ReadOnly<{|
   m?: TypeResponsiveBase<>,
   margin?: TypeResponsiveBase<>,
@@ -61,7 +47,6 @@ type TypeSpaceProps = $ReadOnly<{|
   py?: TypeResponsiveBase<>,
   paddingY?: TypeResponsiveBase<>,
 |}>;
-
 export type TypeSystemCommonProps = $ReadOnly<{|
   ...TypeColorProps,
   ...TypeSpaceProps,
@@ -86,7 +71,6 @@ export type TypeSystemBorderProps = $ReadOnly<{|
   boxShadow?: TypeResponsiveBase<>,
   textShadow?: TypeResponsiveBase<>,
 |}>;
-
 type TypeResponsiveTypeographySize = TypeResponsiveString<TypeTypography>;
 export type TypeSystemTypographyProps = $ReadOnly<{|
   typeScale?: TypeResponsiveTypeographySize,
@@ -98,7 +82,6 @@ export type TypeSystemTypographyProps = $ReadOnly<{|
   textAlign?: TypeResponsive<TextAlignProperty>,
   fontStyle?: TypeResponsiveString<>,
 |}>;
-
 export type TypeSystemLayoutProps = $ReadOnly<{|
   width?: TypeResponsiveBase<>,
   height?: TypeResponsiveBase<>,
@@ -111,7 +94,6 @@ export type TypeSystemLayoutProps = $ReadOnly<{|
   display?: TypeResponsiveString<>,
   verticalAlign?: TypeResponsiveString<>,
 |}>;
-
 export type TypeSystemPositionProps = $ReadOnly<{|
   position?: TypeResponsive<PositionProperty>,
   zIndex?: TypeResponsive<ZIndexProperty>,
@@ -120,7 +102,6 @@ export type TypeSystemPositionProps = $ReadOnly<{|
   bottom?: TypeResponsiveBase<>,
   left?: TypeResponsiveBase<>,
 |}>;
-
 export type TypeSystemFlexboxProps = $ReadOnly<{|
   alignItems?: TypeResponsiveString<>,
   alignContent?: TypeResponsiveString<>,
@@ -136,7 +117,6 @@ export type TypeSystemFlexboxProps = $ReadOnly<{|
   alignSelf?: TypeResponsiveString<>,
   order?: TypeResponsiveBase<>,
 |}>;
-
 export type TypeSystemGridProps = $ReadOnly<{|
   gridArea?: TypeResponsiveBase<>,
   gridAutoColumns?: TypeResponsiveBase<>,
@@ -150,4 +130,4 @@ export type TypeSystemGridProps = $ReadOnly<{|
   gridTemplateAreas?: TypeResponsiveBase<>,
   gridTemplateColumns?: TypeResponsiveBase<>,
   gridTemplateRows?: TypeResponsiveBase<>,
-|}>;
+|}>;