@sproutsocial/racine 7.5.0 → 8.0.0-beta-dark-mode.1

package/lib/utils/theme.js

@@ -1,402 +0,0 @@
-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 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 = {
-  background: {
-    app: COLORS.COLOR_NEUTRAL_100,
-    container: COLORS.COLOR_NEUTRAL_0
-  },
-  forms: {
-    placeholderColor: COLORS.COLOR_NEUTRAL_600,
-    borderColor: COLORS.COLOR_NEUTRAL_400,
-    hoverBorderColor: COLORS.COLOR_NEUTRAL_600
-  },
-  cta: {
-    default: {
-      color: COLORS.COLOR_NEUTRAL_700,
-      background: "transparent",
-      hoverColor: COLORS.COLOR_NEUTRAL_900,
-      hoverBackground: undefined,
-      activeBackground: undefined,
-      borderColor: "transparent"
-    },
-    primary: {
-      color: COLORS.COLOR_NEUTRAL_0,
-      background: COLORS.COLOR_BLUE_700,
-      hoverColor: COLORS.COLOR_NEUTRAL_0,
-      hoverBackground: COLORS.COLOR_BLUE_800,
-      activeBackground: COLORS.COLOR_BLUE_900,
-      borderColor: "transparent"
-    },
-    secondary: {
-      color: COLORS.COLOR_NEUTRAL_800,
-      background: "transparent",
-      hoverColor: COLORS.COLOR_NEUTRAL_0,
-      hoverBackground: COLORS.COLOR_NEUTRAL_800,
-      activeBackground: COLORS.COLOR_NEUTRAL_800,
-      borderColor: COLORS.COLOR_NEUTRAL_800
-    },
-    pill: {
-      color: COLORS.COLOR_NEUTRAL_800,
-      background: "transparent",
-      hoverColor: COLORS.COLOR_NEUTRAL_900,
-      hoverBackground: COLORS.COLOR_NEUTRAL_100,
-      activeBackground: COLORS.COLOR_NEUTRAL_100,
-      borderColor: "transparent"
-    },
-    destructive: {
-      color: COLORS.COLOR_NEUTRAL_0,
-      background: COLORS.COLOR_RED_800,
-      hoverColor: COLORS.COLOR_NEUTRAL_0,
-      hoverBackground: COLORS.COLOR_RED_900,
-      activeBackground: COLORS.COLOR_RED_1000,
-      borderColor: "transparent"
-    },
-    placeholder: {
-      color: COLORS.COLOR_BLUE_700,
-      background: "transparent",
-      hoverColor: COLORS.COLOR_BLUE_800,
-      hoverBackground: COLORS.COLOR_NEUTRAL_0,
-      activeBackground: COLORS.COLOR_NEUTRAL_0,
-      borderColor: COLORS.COLOR_NEUTRAL_500
-    },
-    link: {
-      color: COLORS.COLOR_BLUE_800,
-      background: "transparent",
-      hoverColor: COLORS.COLOR_BLUE_900,
-      hoverBackground: "transparent",
-      activeBackground: "transparent",
-      borderColor: "transparent"
-    }
-  },
-  text: {
-    body: COLORS.COLOR_NEUTRAL_800,
-    headline: COLORS.COLOR_NEUTRAL_900,
-    subtext: COLORS.COLOR_NEUTRAL_700,
-    inverse: COLORS.COLOR_NEUTRAL_0
-  },
-  icon: {
-    primary: COLORS.COLOR_NEUTRAL_800,
-    inverse: COLORS.COLOR_NEUTRAL_0
-  },
-  error: {
-    background: COLORS.COLOR_RED_100,
-    border: COLORS.COLOR_RED_400,
-    icon: COLORS.COLOR_RED_800,
-    color: COLORS.COLOR_RED_800
-  },
-  danger: {
-    background: COLORS.COLOR_RED_100,
-    border: COLORS.COLOR_RED_400,
-    icon: COLORS.COLOR_RED_800,
-    color: COLORS.COLOR_RED_800
-  },
-  warning: {
-    background: COLORS.COLOR_YELLOW_100,
-    border: COLORS.COLOR_YELLOW_400,
-    icon: COLORS.COLOR_YELLOW_800,
-    color: COLORS.COLOR_YELLOW_900
-  },
-  success: {
-    background: COLORS.COLOR_GREEN_100,
-    border: COLORS.COLOR_GREEN_400,
-    icon: COLORS.COLOR_GREEN_800,
-    color: COLORS.COLOR_GREEN_900
-  },
-  info: {
-    background: COLORS.COLOR_BLUE_100,
-    border: COLORS.COLOR_BLUE_400,
-    icon: COLORS.COLOR_BLUE_800,
-    color: COLORS.COLOR_BLUE_700
-  },
-  opportunity: {
-    background: COLORS.COLOR_PURPLE_100,
-    border: COLORS.COLOR_PURPLE_400,
-    icon: COLORS.COLOR_PURPLE_800,
-    color: COLORS.COLOR_PURPLE_800
-  },
-  // @TODO: make border a object with properties defalt and dotted?
-  border: COLORS.COLOR_NEUTRAL_200,
-  selection: {
-    color: COLORS.COLOR_NEUTRAL_0,
-    disabledColor: COLORS.COLOR_NEUTRAL_300,
-    background: COLORS.COLOR_NEUTRAL_800,
-    border: COLORS.COLOR_NEUTRAL_800
-  },
-  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
-  },
-  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
-  }
-};
-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
-};
-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
-};
-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
-};
-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
-};
-var borders = {
-  "500": BORDER.BORDER_WIDTH_500 + " solid"
-};
-var borderWidths = {
-  "500": BORDER.BORDER_WIDTH_500
-};
-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
-};
-export default theme;