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

package/__flow__/themes/dark/theme.js

@@ -0,0 +1,195 @@
+// @flow strict-local
+
+import COLORS from "@sproutsocial/seeds-color";
+import defaultTheme from "../default/theme";
+import {
+  green,
+  blue,
+  purple,
+  yellow,
+  orange,
+  red,
+  neutral,
+} from "./decorative-palettes";
+
+const darkTheme = {
+  ...defaultTheme,
+  colors: {
+    ...defaultTheme.colors,
+    app: {
+      background: {
+        base: COLORS.COLOR_NEUTRAL_1000,
+      },
+    },
+    container: {
+      background: {
+        base: COLORS.COLOR_NEUTRAL_900,
+        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_0,
+      },
+      border: {
+        base: COLORS.COLOR_NEUTRAL_1100,
+        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_0,
+      },
+    },
+    button: {
+      primary: {
+        background: {
+          base: COLORS.COLOR_BLUE_400,
+          hover: COLORS.COLOR_BLUE_300,
+          active: COLORS.COLOR_BLUE_200,
+        },
+        border: {
+          base: "transparent",
+        },
+        text: {
+          base: COLORS.COLOR_NEUTRAL_900,
+          hover: COLORS.COLOR_NEUTRAL_1000,
+        },
+      },
+      secondary: {
+        background: {
+          base: "transparent",
+          hover: COLORS.COLOR_NEUTRAL_100,
+          active: COLORS.COLOR_NEUTRAL_0,
+        },
+        border: {
+          base: COLORS.COLOR_NEUTRAL_0,
+        },
+        text: {
+          base: COLORS.COLOR_NEUTRAL_0,
+          hover: COLORS.COLOR_NEUTRAL_800,
+        },
+      },
+      pill: {
+        background: {
+          base: "transparent",
+          hover: COLORS.COLOR_NEUTRAL_1000,
+          active: COLORS.COLOR_NEUTRAL_900,
+        },
+        border: {
+          base: "transparent",
+        },
+        text: {
+          base: COLORS.COLOR_NEUTRAL_100,
+          hover: COLORS.COLOR_NEUTRAL_0,
+        },
+      },
+      destructive: {
+        background: {
+          base: COLORS.COLOR_RED_400,
+          hover: COLORS.COLOR_RED_300,
+          active: COLORS.COLOR_RED_200,
+        },
+        border: {
+          base: "transparent",
+        },
+        text: {
+          base: COLORS.COLOR_NEUTRAL_900,
+          hover: COLORS.COLOR_NEUTRAL_1000,
+        },
+      },
+      placeholder: {
+        background: {
+          base: "transparent",
+          hover: COLORS.COLOR_NEUTRAL_1100,
+          active: COLORS.COLOR_NEUTRAL_1100,
+        },
+        border: {
+          base: COLORS.COLOR_NEUTRAL_500,
+        },
+        text: {
+          base: COLORS.COLOR_BLUE_400,
+          hover: COLORS.COLOR_BLUE_300,
+        },
+      },
+      unstyled: {
+        background: {
+          base: "transparent",
+        },
+        border: {
+          base: "transparent",
+        },
+        text: {
+          base: COLORS.COLOR_NEUTRAL_300,
+          hover: COLORS.COLOR_NEUTRAL_200,
+        },
+      },
+    },
+    link: {
+      base: COLORS.COLOR_BLUE_400,
+      hover: COLORS.COLOR_BLUE_300,
+    },
+    text: {
+      headline: COLORS.COLOR_NEUTRAL_0,
+      subtext: COLORS.COLOR_NEUTRAL_300,
+      body: COLORS.COLOR_NEUTRAL_100,
+      inverse: COLORS.COLOR_NEUTRAL_900,
+      error: COLORS.COLOR_RED_400,
+    },
+    icon: {
+      base: COLORS.COLOR_NEUTRAL_100,
+      inverse: COLORS.COLOR_NEUTRAL_900,
+      success: green.foreground,
+      warning: yellow.foreground,
+      error: red.foreground,
+      danger: red.foreground,
+      info: blue.foreground,
+      opportunity: purple.foreground,
+    },
+    form: {
+      background: {
+        base: COLORS.COLOR_NEUTRAL_900,
+        selected: COLORS.COLOR_NEUTRAL_0,
+      },
+      border: {
+        base: COLORS.COLOR_NEUTRAL_500,
+        error: red.highlight,
+        warning: yellow.highlight,
+        selected: COLORS.COLOR_NEUTRAL_0,
+      },
+      placeholder: {
+        base: COLORS.COLOR_NEUTRAL_500,
+      },
+    },
+    listItem: {
+      background: {
+        base: "transparent",
+        hover: COLORS.COLOR_NEUTRAL_800,
+        selected: COLORS.COLOR_NEUTRAL_0,
+      },
+    },
+  },
+  mode: "dark",
+};
+
+export default darkTheme;

package/__flow__/themes/default/decorative-palettes.js

@@ -0,0 +1,43 @@
+import COLORS from "@sproutsocial/seeds-color";
+
+export const green = {
+  background: COLORS.COLOR_GREEN_100,
+  highlight: COLORS.COLOR_GREEN_500,
+  foreground: COLORS.COLOR_GREEN_900,
+};
+
+export const blue = {
+  background: COLORS.COLOR_BLUE_100,
+  highlight: COLORS.COLOR_BLUE_600,
+  foreground: COLORS.COLOR_BLUE_900,
+};
+
+export const purple = {
+  background: COLORS.COLOR_PURPLE_100,
+  highlight: COLORS.COLOR_PURPLE_500,
+  foreground: COLORS.COLOR_PURPLE_800,
+};
+
+export const yellow = {
+  background: COLORS.COLOR_YELLOW_100,
+  highlight: COLORS.COLOR_YELLOW_600,
+  foreground: COLORS.COLOR_YELLOW_900,
+};
+
+export const orange = {
+  background: COLORS.COLOR_ORANGE_100,
+  highlight: COLORS.COLOR_ORANGE_600,
+  foreground: COLORS.COLOR_ORANGE_900,
+};
+
+export const red = {
+  background: COLORS.COLOR_RED_100,
+  highlight: COLORS.COLOR_RED_600,
+  foreground: COLORS.COLOR_RED_900,
+};
+
+export const neutral = {
+  background: COLORS.COLOR_NEUTRAL_100,
+  highlight: COLORS.COLOR_NEUTRAL_500,
+  foreground: COLORS.COLOR_NEUTRAL_900,
+};

package/__flow__/themes/default/literal-colors.js

@@ -0,0 +1,160 @@
+// @flow strict-local
+
+import COLORS from "@sproutsocial/seeds-color";
+
+const literalColors = {
+  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,
+  },
+};
+
+export default literalColors;