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

package/lib/themes/default/theme.js

@@ -0,0 +1,306 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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 var breakpoints = ["900px", "1200px", "1500px", "1800px"];
+
+var colors = _extends({
+  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 var 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 var fontFamily = TYPOGRAPHY.TYPOGRAPHY_FAMILY;
+export var fontWeights = {
+  normal: TYPOGRAPHY.TYPOGRAPHY_WEIGHT_NORMAL,
+  semibold: TYPOGRAPHY.TYPOGRAPHY_WEIGHT_SEMIBOLD,
+  bold: TYPOGRAPHY.TYPOGRAPHY_WEIGHT_BOLD,
+  extrabold: TYPOGRAPHY.TYPOGRAPHY_WEIGHT_EXTRA_BOLD
+};
+export var 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 var 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 var borders = {
+  "500": BORDER.BORDER_WIDTH_500 + " solid"
+};
+export var borderWidths = {
+  "500": BORDER.BORDER_WIDTH_500
+};
+export var shadows = {
+  "100": DEPTH.ELEVATION_LEVEL_100,
+  "200": DEPTH.ELEVATION_LEVEL_200,
+  "300": DEPTH.ELEVATION_LEVEL_300,
+  "400": DEPTH.ELEVATION_LEVEL_400
+};
+export var easing = {
+  ease_in: MOTION.MOTION_EASE_IN,
+  ease_out: MOTION.MOTION_EASE_OUT,
+  ease_inout: MOTION.MOTION_EASE_INOUT
+};
+export var duration = {
+  fast: MOTION.MOTION_DURATION_FAST,
+  medium: MOTION.MOTION_DURATION_MEDIUM,
+  slow: MOTION.MOTION_DURATION_SLOW
+};
+var theme = {
+  breakpoints: breakpoints,
+  colors: colors,
+  typography: _extends({}, typography, {
+    typography: typography
+  }),
+  fontFamily: fontFamily,
+  fontWeights: fontWeights,
+  space: _extends({}, space, {
+    space: space,
+    "-space": Object.keys(space).reduce(function (negativeSpace, key) {
+      // The values are strings (eg 24px) so we concatenate a negative sign
+      negativeSpace[key] = "-" + space[key];
+      return negativeSpace;
+    }, {})
+  }),
+  radii: _extends({}, radii, {
+    radii: radii
+  }),
+  borders: borders,
+  borderWidths: borderWidths,
+  shadows: _extends({}, shadows, {
+    shadows: shadows
+  }),
+  easing: easing,
+  duration: duration
+};
+console.log(theme.space);
+export default theme;

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

@@ -0,0 +1 @@
+import literalColors from "../themes/default/literal-colors";

package/lib/types/theme.flow.js

@@ -1 +1 @@
-import theme, { breakpoints, fontWeights, easing, duration } from "../utils/theme";
+import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from "../themes/default/theme";

package/lib/utils/mixins.js

@@ -1,5 +1,5 @@
 import { css } from "styled-components";
-import theme from "./theme";
+import theme from "../themes/default/theme";
 import { transparentize } from "polished";
 export var svgToDataURL = function svgToDataURL(svgStr) {
   var encoded = encodeURIComponent(svgStr).replace(/'/g, "%27").replace(/"/g, "%22");
@@ -8,6 +8,6 @@ export var svgToDataURL = function svgToDataURL(svgStr) {
   return dataUrl;
 };
 export var visuallyHidden = css(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;"]);
-export var focusRing = css(["box-shadow:0 0 0 1px ", ",0 0px 0px 4px ", ";outline:none;&::-moz-focus-inner{border:0;}"], theme.colors.cta.primary.background, transparentize(0.7, theme.colors.cta.primary.background));
+export var focusRing = css(["box-shadow:0 0 0 1px ", ",0 0px 0px 4px ", ";outline:none;&::-moz-focus-inner{border:0;}"], theme.colors.button.primary.background.base, transparentize(0.7, theme.colors.button.primary.background.base));
 export var pill = css(["min-width:", ";min-height:", ";padding:", " ", ";border-radius:", ";"], theme.space[600], theme.space[600], theme.space[300], theme.space[350], theme.radii.pill);
 export var disabled = css(["opacity:0.4;pointer-events:none;"]);

package/lib/utils/responsiveProps/index.js

@@ -1,4 +1,4 @@
-import theme from "../theme";
+import theme from "../../themes/default/theme";
 var breakpoints = theme.breakpoints;
 var LENGTH = breakpoints.length + 1;
 export var normalizeResponsiveProp = function normalizeResponsiveProp(value) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "7.7.0-beta-collapsible.0",
+  "version": "8.0.0-beta-dark-mode.3",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -43,7 +43,7 @@
     "new": "node ./bin/scaffold.js",
     "playground": "node ./bin/scaffold-playground.js && yarn start",
     "release": "yarn test && yarn changeset publish",
-    "storybook": "start-storybook -c .storybook -p 9999",
+    "storybook": "start-storybook -c .storybook",
     "build-storybook": "build-storybook --quiet -c .storybook -o .storybook-dist",
     "icon-lint": "node bin/icon-lint/cli",
     "playroom:start": "playroom start",

package/__flow__/themes/dark.js

@@ -1,133 +0,0 @@
-// @flow
-
-import COLORS from "@sproutsocial/seeds-color";
-import defaultTheme from "../utils/theme";
-
-const darkTheme = {
-  ...defaultTheme,
-  colors: {
-    ...defaultTheme.colors,
-    background: {
-      app: COLORS.COLOR_NEUTRAL_1000,
-      container: COLORS.COLOR_NEUTRAL_900,
-    },
-    forms: {
-      placeholderColor: COLORS.COLOR_NEUTRAL_800,
-      borderColor: COLORS.COLOR_NEUTRAL_400,
-      hoverBorderColor: COLORS.COLOR_NEUTRAL_600,
-    },
-    cta: {
-      default: {
-        color: COLORS.COLOR_NEUTRAL_100,
-        background: "transparent",
-        hoverColor: COLORS.COLOR_NEUTRAL_0,
-        hoverBackground: undefined,
-        activeBackground: undefined,
-        borderColor: "transparent",
-      },
-      primary: {
-        color: COLORS.COLOR_NEUTRAL_800,
-        background: COLORS.COLOR_BLUE_400,
-        hoverColor: COLORS.COLOR_NEUTRAL_800,
-        hoverBackground: COLORS.COLOR_BLUE_300,
-        activeBackground: COLORS.COLOR_BLUE_200,
-        borderColor: "transparent",
-      },
-      secondary: {
-        color: COLORS.COLOR_NEUTRAL_0,
-        background: "transparent",
-        hoverColor: COLORS.COLOR_NEUTRAL_800,
-        hoverBackground: COLORS.COLOR_NEUTRAL_0,
-        activeBackground: COLORS.COLOR_NEUTRAL_0,
-        borderColor: COLORS.COLOR_NEUTRAL_0,
-      },
-      pill: {
-        color: COLORS.COLOR_NEUTRAL_100,
-        background: "transparent",
-        hoverColor: COLORS.COLOR_NEUTRAL_0,
-        hoverBackground: COLORS.COLOR_NEUTRAL_1000,
-        activeBackground: COLORS.COLOR_NEUTRAL_1000,
-        borderColor: "transparent",
-      },
-      destructive: {
-        color: COLORS.COLOR_NEUTRAL_0,
-        background: COLORS.COLOR_RED_800,
-        hoverColor: COLORS.COLOR_NEUTRAL_0,
-        hoverBackground: COLORS.COLOR_RED_700,
-        activeBackground: COLORS.COLOR_RED_600,
-        borderColor: "transparent",
-      },
-      placeholder: {
-        color: COLORS.COLOR_BLUE_400,
-        background: "transparent",
-        hoverColor: COLORS.COLOR_BLUE_400,
-        hoverBackground: COLORS.COLOR_NEUTRAL_1100,
-        activeBackground: COLORS.COLOR_NEUTRAL_1100,
-        borderColor: COLORS.COLOR_NEUTRAL_500,
-      },
-      link: {
-        color: COLORS.COLOR_BLUE_700,
-        background: "transparent",
-        hoverColor: COLORS.COLOR_BLUE_800,
-        hoverBackground: "transparent",
-        activeBackground: "transparent",
-        borderColor: "transparent",
-      },
-    },
-    text: {
-      body: COLORS.COLOR_NEUTRAL_100,
-      headline: COLORS.COLOR_NEUTRAL_0,
-      subtext: COLORS.COLOR_NEUTRAL_300,
-      inverse: COLORS.COLOR_NEUTRAL_800,
-    },
-    icon: {
-      primary: COLORS.COLOR_NEUTRAL_100,
-      inverse: COLORS.COLOR_NEUTRAL_800,
-    },
-    error: {
-      background: COLORS.COLOR_RED_800,
-      border: COLORS.COLOR_RED_400,
-      icon: COLORS.COLOR_RED_100,
-      color: COLORS.COLOR_RED_500,
-    },
-    danger: {
-      background: COLORS.COLOR_RED_800,
-      border: COLORS.COLOR_RED_400,
-      icon: COLORS.COLOR_RED_100,
-      color: COLORS.COLOR_RED_500,
-    },
-    warning: {
-      background: COLORS.COLOR_YELLOW_800,
-      border: COLORS.COLOR_YELLOW_400,
-      icon: COLORS.COLOR_YELLOW_100,
-      color: COLORS.COLOR_YELLOW_600,
-    },
-    success: {
-      background: COLORS.COLOR_GREEN_800,
-      border: COLORS.COLOR_GREEN_400,
-      icon: COLORS.COLOR_GREEN_100,
-      color: COLORS.COLOR_GREEN_400,
-    },
-    info: {
-      background: COLORS.COLOR_BLUE_800,
-      border: COLORS.COLOR_BLUE_400,
-      icon: COLORS.COLOR_BLUE_100,
-      color: COLORS.COLOR_BLUE_400,
-    },
-    opportunity: {
-      background: COLORS.COLOR_PURPLE_800,
-      border: COLORS.COLOR_PURPLE_400,
-      icon: COLORS.COLOR_PURPLE_100,
-      color: COLORS.COLOR_PURPLE_400,
-    },
-    border: COLORS.COLOR_NEUTRAL_1100,
-    selection: {
-      color: COLORS.COLOR_NEUTRAL_900,
-      disabledColor: COLORS.COLOR_NEUTRAL_600,
-      background: COLORS.COLOR_NEUTRAL_0,
-      border: COLORS.COLOR_NEUTRAL_0,
-    },
-  },
-};
-
-export default darkTheme;

package/__flow__/themes/light.js

@@ -1,7 +0,0 @@
-import defaultTheme from "../utils/theme";
-
-// const lightTheme = {
-//   ...defaultTheme,
-// };
-
-export default defaultTheme;