@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/themes/dark/theme.js

@@ -1,30 +1,18 @@
 // @flow strict-local
-
+/* eslint-disable no-restricted-imports */
+import { transparentize } from 'polished';
 import COLORS from '@sproutsocial/seeds-color';
 import DEPTH from '@sproutsocial/seeds-depth';
-import lightTheme from '../light/theme';
-import {datavizPalette} from './dataviz-palette';
-import {
-  green,
-  blue,
-  purple,
-  yellow,
-  orange,
-  red,
-  neutral,
-  magenta,
-  pink,
-  aqua,
-  teal,
-} from './decorative-palettes';
-import {transparentize} from 'polished';
-
+// json-to-scss is not working with the alias right now
+//import {theme as lightTheme} from '@src';
+import lightTheme from "../light/theme";
+import { datavizPalette } from "./dataviz-palette";
+import { green, blue, purple, yellow, orange, red, neutral, magenta, pink, aqua, teal } from "./decorative-palettes";
 const MODE = 'dark';
-
 export const shadows = {
   low: `${DEPTH.ELEVATION_LEVEL_100} ${COLORS.COLOR_NEUTRAL_1100}FF`,
   medium: `${DEPTH.ELEVATION_LEVEL_300} ${COLORS.COLOR_NEUTRAL_1100}FF`,
-  high: `${DEPTH.ELEVATION_LEVEL_400} ${COLORS.COLOR_NEUTRAL_1100}FF`,
+  high: `${DEPTH.ELEVATION_LEVEL_400} ${COLORS.COLOR_NEUTRAL_1100}FF`
 };
 
 // If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
@@ -33,8 +21,8 @@ const colors = {
   ...lightTheme.colors,
   app: {
     background: {
-      base: COLORS.COLOR_NEUTRAL_1000,
-    },
+      base: COLORS.COLOR_NEUTRAL_1000
+    }
   },
   container: {
     background: {
@@ -57,12 +45,12 @@ const colors = {
         magenta: magenta.background,
         pink: pink.background,
         aqua: aqua.background,
-        teal: teal.background,
+        teal: teal.background
       },
       selected: COLORS.COLOR_NEUTRAL_0,
       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_1100,
@@ -84,99 +72,99 @@ const colors = {
         magenta: magenta.highlight,
         pink: pink.highlight,
         aqua: aqua.highlight,
-        teal: teal.highlight,
+        teal: teal.highlight
       },
-      selected: COLORS.COLOR_NEUTRAL_0,
-    },
+      selected: COLORS.COLOR_NEUTRAL_0
+    }
   },
   button: {
     primary: {
       background: {
         base: COLORS.COLOR_BLUE_400,
         hover: COLORS.COLOR_BLUE_300,
-        active: COLORS.COLOR_BLUE_200,
+        active: COLORS.COLOR_BLUE_200
       },
       border: {
-        base: 'transparent',
+        base: 'transparent'
       },
       text: {
         base: COLORS.COLOR_NEUTRAL_900,
-        hover: COLORS.COLOR_NEUTRAL_1000,
-      },
+        hover: COLORS.COLOR_NEUTRAL_1000
+      }
     },
     secondary: {
       background: {
         base: 'transparent',
         hover: COLORS.COLOR_NEUTRAL_100,
-        active: COLORS.COLOR_NEUTRAL_0,
+        active: COLORS.COLOR_NEUTRAL_0
       },
       border: {
-        base: COLORS.COLOR_NEUTRAL_0,
+        base: COLORS.COLOR_NEUTRAL_0
       },
       text: {
         base: COLORS.COLOR_NEUTRAL_0,
-        hover: COLORS.COLOR_NEUTRAL_800,
-      },
+        hover: COLORS.COLOR_NEUTRAL_800
+      }
     },
     pill: {
       background: {
         base: 'transparent',
         hover: COLORS.COLOR_NEUTRAL_1000,
-        active: COLORS.COLOR_NEUTRAL_900,
+        active: COLORS.COLOR_NEUTRAL_900
       },
       border: {
         base: 'transparent',
-        hover: COLORS.COLOR_NEUTRAL_0,
+        hover: COLORS.COLOR_NEUTRAL_0
       },
       text: {
         base: COLORS.COLOR_NEUTRAL_100,
-        hover: COLORS.COLOR_NEUTRAL_0,
-      },
+        hover: COLORS.COLOR_NEUTRAL_0
+      }
     },
     destructive: {
       background: {
         base: COLORS.COLOR_RED_400,
         hover: COLORS.COLOR_RED_300,
-        active: COLORS.COLOR_RED_200,
+        active: COLORS.COLOR_RED_200
       },
       border: {
-        base: 'transparent',
+        base: 'transparent'
       },
       text: {
         base: COLORS.COLOR_NEUTRAL_900,
-        hover: COLORS.COLOR_NEUTRAL_1000,
-      },
+        hover: COLORS.COLOR_NEUTRAL_1000
+      }
     },
     placeholder: {
       background: {
         base: 'transparent',
         hover: COLORS.COLOR_NEUTRAL_1100,
-        active: COLORS.COLOR_NEUTRAL_1100,
+        active: COLORS.COLOR_NEUTRAL_1100
       },
       border: {
-        base: COLORS.COLOR_NEUTRAL_500,
+        base: COLORS.COLOR_NEUTRAL_500
       },
       text: {
         base: COLORS.COLOR_BLUE_400,
-        hover: COLORS.COLOR_BLUE_300,
-      },
+        hover: COLORS.COLOR_BLUE_300
+      }
     },
     unstyled: {
       background: {
-        base: 'transparent',
+        base: 'transparent'
       },
       border: {
-        base: 'transparent',
+        base: 'transparent'
       },
       text: {
         base: COLORS.COLOR_NEUTRAL_300,
-        hover: COLORS.COLOR_NEUTRAL_200,
-      },
-    },
+        hover: COLORS.COLOR_NEUTRAL_200
+      }
+    }
   },
   link: {
     base: COLORS.COLOR_BLUE_400,
-    hover: COLORS.COLOR_BLUE_300,
+    hover: COLORS.COLOR_BLUE_300
   },
   text: {
     headline: COLORS.COLOR_NEUTRAL_0,
@@ -186,8 +174,8 @@ const colors = {
     error: COLORS.COLOR_RED_400,
     background: {
       highlight: COLORS.COLOR_YELLOW_900,
-      selection: COLORS.COLOR_BLUE_800,
-    },
+      selection: COLORS.COLOR_BLUE_800
+    }
   },
   icon: {
     base: COLORS.COLOR_NEUTRAL_100,
@@ -202,61 +190,59 @@ const colors = {
     applied: COLORS.COLOR_BLUE_400,
     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_900,
-      selected: COLORS.COLOR_NEUTRAL_0,
+      selected: COLORS.COLOR_NEUTRAL_0
     },
     border: {
       base: COLORS.COLOR_NEUTRAL_500,
       error: red.highlight,
       warning: yellow.highlight,
-      selected: COLORS.COLOR_NEUTRAL_0,
+      selected: COLORS.COLOR_NEUTRAL_0
     },
     placeholder: {
-      base: COLORS.COLOR_NEUTRAL_500,
-    },
+      base: COLORS.COLOR_NEUTRAL_500
+    }
   },
   listItem: {
     background: {
       base: 'transparent',
       hover: COLORS.COLOR_NEUTRAL_800,
-      selected: COLORS.COLOR_NEUTRAL_0,
-    },
+      selected: COLORS.COLOR_NEUTRAL_0
+    }
   },
   overlay: {
     background: {
-      base: transparentize(0.28, COLORS.COLOR_NEUTRAL_1000),
+      base: transparentize(0.28, 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_1100,
+    base: COLORS.COLOR_NEUTRAL_1100
   },
   illustration: {
     fill: COLORS.COLOR_BLUE_400,
-    stroke: neutral.foreground,
+    stroke: neutral.foreground
   },
   dataviz: {
     map: datavizPalette.DATAVIZ_COLORS_MAP,
-    list: datavizPalette.DATAVIZ_COLORS_LIST,
+    list: datavizPalette.DATAVIZ_COLORS_LIST
   },
   // Remove this in a future version in favor of the above object
-  ...datavizPalette,
+  ...datavizPalette
 };
-
 const darkTheme = {
   ...lightTheme,
   colors,
   shadows,
-  mode: MODE,
+  mode: MODE
 };
-
-export default darkTheme;
+export default darkTheme;

package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -1,86 +1,85 @@
 // @flow strict-local
-import {transparentize} from 'polished';
-import baseDarkTheme from '../../../dark/theme';
-import type {TypeSproutTheme} from '../../../../types/theme.flow';
-
+/* eslint-disable no-restricted-imports */
+import { transparentize } from 'polished';
+// json-to-scss is not working with the alias right now
+//import {darkTheme as baseDarkTheme, type TypeSproutTheme} from '@src';
+import baseDarkTheme from "../../../dark/theme";
+import type { TypeSproutTheme } from "../../../../types/theme.flow";
 export const navigation = {
   main: {
     background: {
       base: baseDarkTheme.colors.neutral[1000],
-      overflowGradient: baseDarkTheme.colors.neutral[1100],
+      overflowGradient: baseDarkTheme.colors.neutral[1100]
     },
     border: {
-      base: baseDarkTheme.colors.neutral[1100],
-    },
+      base: baseDarkTheme.colors.neutral[1100]
+    }
   },
   secondary: {
     background: {
-      base: baseDarkTheme.colors.neutral[900],
+      base: baseDarkTheme.colors.neutral[900]
     },
     widget: {
       background: {
-        base: baseDarkTheme.colors.neutral[800],
-      },
+        base: baseDarkTheme.colors.neutral[800]
+      }
     },
     accordion: {
       background: {
         // Uses hexicimal to change the opacity of the color
         // Adding 'A3' at end to make this color have a 64% opacity
         // Reference https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
-        base: `${baseDarkTheme.colors.neutral[1000]}A3`,
-      },
-    },
+        base: `${baseDarkTheme.colors.neutral[1000]}A3`
+      }
+    }
   },
   settings: {
     listItem: {
       background: {
         base: 'transparent',
         hover: baseDarkTheme.colors.neutral[1100],
-        selected: baseDarkTheme.colors.neutral[800],
-      },
-    },
+        selected: baseDarkTheme.colors.neutral[800]
+      }
+    }
   },
   text: {
     base: baseDarkTheme.colors.neutral[0],
-    hover: baseDarkTheme.colors.neutral[0],
+    hover: baseDarkTheme.colors.neutral[0]
   },
   icon: {
     base: baseDarkTheme.colors.neutral[0],
-    hover: baseDarkTheme.colors.neutral[0],
+    hover: baseDarkTheme.colors.neutral[0]
   },
   listItem: {
     background: {
       base: baseDarkTheme.colors.neutral[1000],
       hover: baseDarkTheme.colors.neutral[1100],
-      selected: baseDarkTheme.colors.neutral[700],
-    },
-  },
+      selected: baseDarkTheme.colors.neutral[700]
+    }
+  }
 };
-
 export const datePicker = {
   comparison: {
     background: {
-      base: baseDarkTheme.colors.neutral[400],
+      base: baseDarkTheme.colors.neutral[400]
     },
     text: {
-      base: baseDarkTheme.colors.neutral[800],
-    },
-  },
+      base: baseDarkTheme.colors.neutral[800]
+    }
+  }
 };
-
 export const analytics = {
   trend: {
     positive: baseDarkTheme.colors.teal[500],
     neutral: baseDarkTheme.colors.neutral[100],
-    negative: baseDarkTheme.colors.neutral[100],
+    negative: baseDarkTheme.colors.neutral[100]
   },
   overlay: {
     background: {
-      base: transparentize(0.2, baseDarkTheme.colors.neutral[900]),
-    },
-  },
+      base: transparentize(0.2, baseDarkTheme.colors.neutral[900])
+    }
+  }
 };
-
 export const listening = {
   topicTypes: {
     customTopic: baseDarkTheme.colors.teal[400],
@@ -89,7 +88,7 @@ export const listening = {
     competitiveAnalysis: baseDarkTheme.colors.yellow[400],
     campaignAnalysis: baseDarkTheme.colors.magenta[400],
     eventMonitoring: baseDarkTheme.colors.aqua[400],
-    featuredTopic: baseDarkTheme.colors.green[400],
+    featuredTopic: baseDarkTheme.colors.green[400]
   },
   worldMap: {
     empty: baseDarkTheme.colors.neutral[200],
@@ -100,102 +99,99 @@ export const listening = {
     q4: baseDarkTheme.colors.purple[600],
     q5: baseDarkTheme.colors.purple[700],
     q6: baseDarkTheme.colors.purple[800],
-    q7: baseDarkTheme.colors.purple[900],
-  },
+    q7: baseDarkTheme.colors.purple[900]
+  }
 };
-
 export const growth = {
   education: {
     decorative: {
       aqua: baseDarkTheme.colors.aqua[600],
-      teal: baseDarkTheme.colors.teal[500],
-    },
+      teal: baseDarkTheme.colors.teal[500]
+    }
   },
   opportunity: {
     background: {
       base: baseDarkTheme.colors.purple[700],
       secondary: baseDarkTheme.colors.neutral[700],
-      hover: baseDarkTheme.colors.purple[500],
+      hover: baseDarkTheme.colors.purple[500]
     },
     button: {
       primary: {
         base: baseDarkTheme.colors.purple[400],
-        hover: baseDarkTheme.colors.purple[300],
-      },
+        hover: baseDarkTheme.colors.purple[300]
+      }
     },
     badge: {
       background: {
         base: baseDarkTheme.colors.purple[700],
-        active: baseDarkTheme.colors.purple[100],
+        active: baseDarkTheme.colors.purple[100]
       },
       icon: {
         base: baseDarkTheme.colors.purple[200],
-        active: baseDarkTheme.colors.purple[800],
+        active: baseDarkTheme.colors.purple[800]
       },
       text: {
-        base: baseDarkTheme.colors.purple[200],
-      },
+        base: baseDarkTheme.colors.purple[200]
+      }
     },
     decorative: {
       // confetti
       green: baseDarkTheme.colors.green[700],
       lightAqua: baseDarkTheme.colors.aqua[600],
       darkAqua: baseDarkTheme.colors.aqua[1100],
-      purple: baseDarkTheme.colors.purple[700],
-    },
+      purple: baseDarkTheme.colors.purple[700]
+    }
   },
   featuredDemo: {
     background: {
       primary: {
         base: baseDarkTheme.colors.blue[400],
-        hover: baseDarkTheme.colors.blue[100],
+        hover: baseDarkTheme.colors.blue[100]
       },
       secondary: {
         base: baseDarkTheme.colors.purple[500],
-        hover: baseDarkTheme.colors.purple[100],
-      },
-    },
+        hover: baseDarkTheme.colors.purple[100]
+      }
+    }
   },
   darkModal: {
     background: {
-      base: baseDarkTheme.colors.aqua[1100],
+      base: baseDarkTheme.colors.aqua[1100]
     },
     text: {
-      base: baseDarkTheme.colors.neutral[0],
+      base: baseDarkTheme.colors.neutral[0]
     },
     cards: {
       background: {
         base: baseDarkTheme.colors.neutral[0],
-        hover: baseDarkTheme.colors.purple[100],
+        hover: baseDarkTheme.colors.purple[100]
       },
       text: {
         base: baseDarkTheme.colors.neutral[800],
-        hover: baseDarkTheme.colors.neutral[900],
+        hover: baseDarkTheme.colors.neutral[900]
       },
       border: {
         base: baseDarkTheme.colors.neutral[0],
-        hover: baseDarkTheme.colors.purple[700],
-      },
-    },
+        hover: baseDarkTheme.colors.purple[700]
+      }
+    }
   },
   user: {
     status: {
-      online: baseDarkTheme.colors.green[700],
-    },
-  },
+      online: baseDarkTheme.colors.green[700]
+    }
+  }
 };
-
 export const cardControl = {
   background: {
     base: baseDarkTheme.colors.neutral[900],
     selected: baseDarkTheme.colors.neutral[700],
-    hover: baseDarkTheme.colors.neutral[800],
+    hover: baseDarkTheme.colors.neutral[800]
   },
   text: {
-    selected: baseDarkTheme.colors.text.body,
-  },
+    selected: baseDarkTheme.colors.text.body
+  }
 };
-
 const darkTheme: TypeSproutTheme = {
   ...baseDarkTheme,
   colors: {
@@ -205,8 +201,7 @@ const darkTheme: TypeSproutTheme = {
     analytics,
     listening,
     growth,
-    cardControl,
-  },
+    cardControl
+  }
 };
-
-export default darkTheme;
+export default darkTheme;

package/__flow__/themes/extendedThemes/sproutTheme/index.js

@@ -1,3 +1,3 @@
 // @flow
-export {default as sproutLightTheme} from './light/theme';
-export {default as sproutDarkTheme} from './dark/theme';
+export { default as sproutLightTheme } from "./light/theme";
+export { default as sproutDarkTheme } from "./dark/theme";