@sproutsocial/seeds-react-theme 1.0.0

package/__flow__/types/theme.flow.js

@@ -0,0 +1,372 @@
+// @flow strict-local
+import type { TypeFontFamilyString } from "../light/theme.flow";
+import type { TypeColors } from "./theme.colors.flow";
+export type TypeNavigationTheme = {|
+  main: {
+    background: {
+      base: string,
+      overflowGradient: string,
+      ...
+    },
+    border: {
+      base: string,
+      ...
+    },
+    ...
+  },
+  secondary: {
+    background: {
+      base: string,
+      ...
+    },
+    widget: {
+      background: {
+        base: string,
+        ...
+      },
+      ...
+    },
+    accordion: {
+      background: {
+        base: string,
+        ...
+      },
+      ...
+    },
+    ...
+  },
+  settings: {
+    listItem: {
+      background: {
+        base: string,
+        hover: string,
+        selected: string,
+        ...
+      },
+      ...
+    },
+    ...
+  },
+  text: {
+    base: string,
+    hover: string,
+    ...
+  },
+  icon: {
+    base: string,
+    hover: string,
+    ...
+  },
+  listItem: {
+    background: {
+      base: string,
+      hover: string,
+      selected: string,
+      ...
+    },
+    ...
+  },
+|};
+export type TypeDatePickerTheme = {|
+  comparison: {
+    background: {
+      base: string,
+      ...
+    },
+    text: {
+      base: string,
+      ...
+    },
+    ...
+  }
+|};
+export type TypeAnalyticsTheme = {|
+  trend: {
+    positive: string,
+    neutral: string,
+    negative: string,
+    ...
+  },
+  overlay: {
+    background: {
+      base: string,
+      ...
+    },
+    ...
+  },
+|};
+export type TypeListeningTheme = {|
+  chart: {
+    indicator: {
+      default: {
+        primary: string,
+        secondary: string,
+        ...
+      },
+      hover: {
+        primary: string,
+        secondary: string,
+        ...
+      },
+      ...
+    },
+    spike: {
+      background: {
+        base: string,
+        ...
+      },
+      icon: {
+        base: string,
+        ...
+      },
+      ...
+    },
+    ...
+  },
+  topicTypes: {
+    customTopic: string,
+    brandHealth: string,
+    industryInsights: string,
+    competitiveAnalysis: string,
+    campaignAnalysis: string,
+    eventMonitoring: string,
+    featuredTopic: string,
+    ...
+  },
+  worldMap: {
+    empty: string,
+    q0: string,
+    q1: string,
+    q2: string,
+    q3: string,
+    q4: string,
+    q5: string,
+    q6: string,
+    q7: string,
+    ...
+  },
+|};
+export type TypeGrowthTheme = {|
+  carousel: {
+    indicator: {
+      active: string,
+      inactive: string,
+      ...
+    },
+    ...
+  },
+  education: {
+    decorative: {
+      aqua: string,
+      teal: string,
+      ...
+    },
+    ...
+  },
+  opportunity: {
+    background: {
+      base: string,
+      secondary: string,
+      hover: string,
+      ...
+    },
+    button: {
+      primary: {
+        base: string,
+        hover: string,
+        ...
+      },
+      ...
+    },
+    badge: {
+      background: {
+        base: string,
+        active: string,
+        ...
+      },
+      icon: {
+        base: string,
+        active: string,
+        ...
+      },
+      text: {
+        base: string,
+        ...
+      },
+      ...
+    },
+    decorative: {
+      // confetti
+      green: string,
+      lightAqua: string,
+      darkAqua: string,
+      purple: string,
+      ...
+    },
+    ...
+  },
+  featuredDemo: {
+    background: {
+      primary: {
+        base: string,
+        hover: string,
+        ...
+      },
+      secondary: {
+        base: string,
+        hover: string,
+        ...
+      },
+      ...
+    },
+    ...
+  },
+  darkModal: {
+    background: {
+      base: string,
+      ...
+    },
+    text: {
+      base: string,
+      ...
+    },
+    cards: {
+      background: {
+        base: string,
+        hover: string,
+        ...
+      },
+      text: {
+        base: string,
+        hover: string,
+        ...
+      },
+      border: {
+        base: string,
+        hover: string,
+        ...
+      },
+      ...
+    },
+    ...
+  },
+  user: {
+    status: {
+      online: string,
+      ...
+    },
+    ...
+  },
+|};
+export type TypeCardControlTheme = {|
+  background: {
+    base: string,
+    selected: string,
+    hover: string,
+    ...
+  },
+  text: {
+    selected: string,
+    ...
+  },
+|};
+export type TypeThemeMode = "light" | "dark";
+export type TypeBreakpoint = string[];
+type TypeTypographyValue = {|
+  fontSize: string | number,
+  lineHeight: string | number,
+|};
+export type TypeTypography = {|
+  "100": TypeTypographyValue,
+  "200": TypeTypographyValue,
+  "300": TypeTypographyValue,
+  "400": TypeTypographyValue,
+  "500": TypeTypographyValue,
+  "600": TypeTypographyValue,
+  "700": TypeTypographyValue,
+  "800": TypeTypographyValue,
+  "900": TypeTypographyValue,
+  "1000": TypeTypographyValue,
+  "1100": TypeTypographyValue,
+  "1200": TypeTypographyValue,
+|};
+export type TypeFontWeight = {|
+  normal: string,
+  semibold: string,
+  bold: string,
+  extrabold: string,
+|};
+export type TypeFontFamily = TypeFontFamilyString;
+export type TypeSpace = {|
+  "0": string,
+  "100": string,
+  "200": string,
+  "300": string,
+  "350": string,
+  "400": string,
+  "450": string,
+  "500": string,
+  "600": string,
+|};
+export type TypeColor = TypeColors;
+export type TypeRadii = {|
+  "400": string,
+  "500": string,
+  "600": string,
+  "1000": string,
+  inner: string,
+  outer: string,
+  pill: string,
+|};
+export type TypeBorder = {|
+  "500": string
+|};
+export type TypeBorderWidth = {|
+  "500": string
+|};
+export type TypeShadow = {|
+  high: string,
+  low: string,
+  medium: string,
+|};
+export type TypeEasing = {|
+  ease_in: string,
+  ease_inout: string,
+  ease_out: string,
+|};
+export type TypeDuration = {|
+  fast: string,
+  medium: string,
+  slow: string,
+|};
+export type TypeTheme = {
+  mode: TypeThemeMode,
+  breakpoints: TypeBreakpoint,
+  colors: TypeColor,
+  typography: TypeTypography,
+  fontWeights: TypeFontWeight,
+  fontFamily: TypeFontFamily,
+  space: TypeSpace,
+  radii: TypeRadii,
+  borders: TypeBorder,
+  borderWidths: TypeBorderWidth,
+  shadows: TypeShadow,
+  easing: TypeEasing,
+  duration: TypeDuration,
+  ...
+};
+
+// Extended themes
+export type TypeSproutTheme = {
+  ...$Exact<TypeTheme>,
+  colors: {|
+    ...$Exact<TypeColor>,
+    navigation: TypeNavigationTheme,
+    datePicker: TypeDatePickerTheme,
+    analytics: TypeAnalyticsTheme,
+    listening: TypeListeningTheme,
+    growth: TypeGrowthTheme,
+    cardControl: TypeCardControlTheme,
+  |},
+  ...
+};

package/commonjs/dark/dataviz-palette.flow.js

@@ -0,0 +1 @@
+"use strict";

package/commonjs/dark/dataviz-palette.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.datavizPalette = void 0;
+var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var datavizPalette = exports.datavizPalette = {
+  DATAVIZ_COLORS_LIST: [_seedsColor.default.COLOR_TEAL_400, _seedsColor.default.COLOR_PURPLE_400, _seedsColor.default.COLOR_PINK_400, _seedsColor.default.COLOR_YELLOW_500, _seedsColor.default.COLOR_BLUE_400, _seedsColor.default.COLOR_MAGENTA_400, _seedsColor.default.COLOR_GREEN_400, _seedsColor.default.COLOR_ORANGE_400, _seedsColor.default.COLOR_RED_700, _seedsColor.default.COLOR_TEAL_700, _seedsColor.default.COLOR_PURPLE_700, _seedsColor.default.COLOR_PINK_700, _seedsColor.default.COLOR_YELLOW_800, _seedsColor.default.COLOR_BLUE_700, _seedsColor.default.COLOR_MAGENTA_700, _seedsColor.default.COLOR_GREEN_700, _seedsColor.default.COLOR_ORANGE_700, _seedsColor.default.COLOR_RED_400, _seedsColor.default.COLOR_GREEN_200, _seedsColor.default.COLOR_YELLOW_200],
+  DATAVIZ_COLORS_MAP: {
+    "1": _seedsColor.default.COLOR_TEAL_400,
+    "2": _seedsColor.default.COLOR_PURPLE_400,
+    "3": _seedsColor.default.COLOR_PINK_400,
+    "4": _seedsColor.default.COLOR_YELLOW_500,
+    "5": _seedsColor.default.COLOR_BLUE_400,
+    "6": _seedsColor.default.COLOR_MAGENTA_400,
+    "7": _seedsColor.default.COLOR_GREEN_400,
+    "8": _seedsColor.default.COLOR_ORANGE_400,
+    "9": _seedsColor.default.COLOR_RED_700,
+    "10": _seedsColor.default.COLOR_TEAL_700,
+    "11": _seedsColor.default.COLOR_PURPLE_700,
+    "12": _seedsColor.default.COLOR_PINK_700,
+    "13": _seedsColor.default.COLOR_YELLOW_800,
+    "14": _seedsColor.default.COLOR_BLUE_700,
+    "15": _seedsColor.default.COLOR_MAGENTA_700,
+    "16": _seedsColor.default.COLOR_GREEN_700,
+    "17": _seedsColor.default.COLOR_ORANGE_700,
+    "18": _seedsColor.default.COLOR_RED_400,
+    "19": _seedsColor.default.COLOR_GREEN_200,
+    "20": _seedsColor.default.COLOR_YELLOW_200
+  }
+};

package/commonjs/dark/decorative-palettes.flow.js

@@ -0,0 +1 @@
+"use strict";

package/commonjs/dark/decorative-palettes.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.yellow = exports.teal = exports.red = exports.purple = exports.pink = exports.orange = exports.neutral = exports.magenta = exports.green = exports.blue = exports.aqua = void 0;
+var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var green = exports.green = {
+  background: _seedsColor.default.COLOR_GREEN_900,
+  highlight: _seedsColor.default.COLOR_GREEN_500,
+  foreground: _seedsColor.default.COLOR_GREEN_100
+};
+var blue = exports.blue = {
+  background: _seedsColor.default.COLOR_BLUE_900,
+  highlight: _seedsColor.default.COLOR_BLUE_600,
+  foreground: _seedsColor.default.COLOR_BLUE_100
+};
+var purple = exports.purple = {
+  background: _seedsColor.default.COLOR_PURPLE_900,
+  highlight: _seedsColor.default.COLOR_PURPLE_500,
+  foreground: _seedsColor.default.COLOR_PURPLE_100
+};
+var yellow = exports.yellow = {
+  background: _seedsColor.default.COLOR_YELLOW_900,
+  highlight: _seedsColor.default.COLOR_YELLOW_600,
+  foreground: _seedsColor.default.COLOR_YELLOW_100
+};
+var orange = exports.orange = {
+  background: _seedsColor.default.COLOR_ORANGE_900,
+  highlight: _seedsColor.default.COLOR_ORANGE_600,
+  foreground: _seedsColor.default.COLOR_ORANGE_100
+};
+var red = exports.red = {
+  background: _seedsColor.default.COLOR_RED_900,
+  highlight: _seedsColor.default.COLOR_RED_600,
+  foreground: _seedsColor.default.COLOR_RED_100
+};
+var neutral = exports.neutral = {
+  background: _seedsColor.default.COLOR_NEUTRAL_1000,
+  highlight: _seedsColor.default.COLOR_NEUTRAL_600,
+  foreground: _seedsColor.default.COLOR_NEUTRAL_100
+};
+var magenta = exports.magenta = {
+  background: _seedsColor.default.COLOR_MAGENTA_900,
+  highlight: _seedsColor.default.COLOR_MAGENTA_600,
+  foreground: _seedsColor.default.COLOR_MAGENTA_100
+};
+var pink = exports.pink = {
+  background: _seedsColor.default.COLOR_PINK_900,
+  highlight: _seedsColor.default.COLOR_PINK_600,
+  foreground: _seedsColor.default.COLOR_PINK_100
+};
+var aqua = exports.aqua = {
+  background: _seedsColor.default.COLOR_AQUA_900,
+  highlight: _seedsColor.default.COLOR_AQUA_500,
+  foreground: _seedsColor.default.COLOR_AQUA_100
+};
+var teal = exports.teal = {
+  background: _seedsColor.default.COLOR_TEAL_900,
+  highlight: _seedsColor.default.COLOR_TEAL_500,
+  foreground: _seedsColor.default.COLOR_TEAL_100
+};

package/commonjs/dark/theme.flow.js

@@ -0,0 +1 @@
+"use strict";