@sproutsocial/racine 8.5.2 → 8.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 8.6.0
+
+### Minor Changes
+
+- d1c8003: Adds data-viz color rotation to the theme file to support data-viz across dark mode and future themes.
+
 ## 8.5.2
 
 ### Patch Changes

package/__flow__/dataviz/dataviz.stories.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { DataVizRotation } from ".";
+
+export default {
+  title: "Dataviz color rotation",
+};
+
+export const JSdataviz = () => <DataVizRotation />;
+
+JSdataviz.story = {
+  name: "JS dataviz rotation",
+};

package/__flow__/dataviz/index.js

@@ -0,0 +1,13 @@
+import React from "react";
+import Box from "../Box";
+import { withTheme } from "styled-components";
+
+export const DataVizRotation = withTheme((p) => {
+  return p.theme.colors.DATAVIZ_COLORS_LIST.map((color, i) => {
+    return (
+      <Box key={color} py={300} px={400} bg={color}>
+        {i + 1}
+      </Box>
+    );
+  });
+});

package/__flow__/themes/dark/dataviz-palette.js

@@ -0,0 +1,50 @@
+// @flow strict-local
+
+import COLORS from "@sproutsocial/seeds-color";
+
+export const datavizPalette = {
+  DATAVIZ_COLORS_LIST: [
+    COLORS.COLOR_TEAL_400,
+    COLORS.COLOR_PURPLE_400,
+    COLORS.COLOR_PINK_400,
+    COLORS.COLOR_YELLOW_500,
+    COLORS.COLOR_BLUE_400,
+    COLORS.COLOR_MAGENTA_400,
+    COLORS.COLOR_GREEN_400,
+    COLORS.COLOR_ORANGE_400,
+    COLORS.COLOR_RED_700,
+    COLORS.COLOR_TEAL_700,
+    COLORS.COLOR_PURPLE_700,
+    COLORS.COLOR_PINK_700,
+    COLORS.COLOR_YELLOW_800,
+    COLORS.COLOR_BLUE_700,
+    COLORS.COLOR_MAGENTA_700,
+    COLORS.COLOR_GREEN_700,
+    COLORS.COLOR_ORANGE_700,
+    COLORS.COLOR_RED_400,
+    COLORS.COLOR_GREEN_200,
+    COLORS.COLOR_YELLOW_200,
+  ],
+  DATAVIZ_COLORS_MAP: {
+    "1": COLORS.COLOR_TEAL_400,
+    "2": COLORS.COLOR_PURPLE_400,
+    "3": COLORS.COLOR_PINK_400,
+    "4": COLORS.COLOR_YELLOW_500,
+    "5": COLORS.COLOR_BLUE_400,
+    "6": COLORS.COLOR_MAGENTA_400,
+    "7": COLORS.COLOR_GREEN_400,
+    "8": COLORS.COLOR_ORANGE_400,
+    "9": COLORS.COLOR_RED_700,
+    "10": COLORS.COLOR_TEAL_700,
+    "11": COLORS.COLOR_PURPLE_700,
+    "12": COLORS.COLOR_PINK_700,
+    "13": COLORS.COLOR_YELLOW_800,
+    "14": COLORS.COLOR_BLUE_700,
+    "15": COLORS.COLOR_MAGENTA_700,
+    "16": COLORS.COLOR_GREEN_700,
+    "17": COLORS.COLOR_ORANGE_700,
+    "18": COLORS.COLOR_RED_400,
+    "19": COLORS.COLOR_GREEN_200,
+    "20": COLORS.COLOR_YELLOW_200,
+  },
+};

package/__flow__/themes/dark/theme.js

@@ -2,6 +2,7 @@
 
 import COLORS from "@sproutsocial/seeds-color";
 import defaultTheme from "../default/theme";
+import { datavizPalette } from "./dataviz-palette";
 import {
   green,
   blue,
@@ -188,6 +189,7 @@ const darkTheme = {
         selected: COLORS.COLOR_NEUTRAL_0,
       },
     },
+    ...datavizPalette,
   },
   mode: "dark",
 };

package/__flow__/themes/default/dataviz-palette.js

@@ -0,0 +1,50 @@
+// @flow strict-local
+
+import COLORS from "@sproutsocial/seeds-color";
+
+export const datavizPalette = {
+  DATAVIZ_COLORS_LIST: [
+    COLORS.COLOR_TEAL_500,
+    COLORS.COLOR_PURPLE_700,
+    COLORS.COLOR_PINK_700,
+    COLORS.COLOR_YELLOW_500,
+    COLORS.COLOR_BLUE_500,
+    COLORS.COLOR_MAGENTA_500,
+    COLORS.COLOR_GREEN_500,
+    COLORS.COLOR_ORANGE_500,
+    COLORS.COLOR_RED_700,
+    COLORS.COLOR_TEAL_900,
+    COLORS.COLOR_PURPLE_400,
+    COLORS.COLOR_PINK_900,
+    COLORS.COLOR_YELLOW_900,
+    COLORS.COLOR_BLUE_900,
+    COLORS.COLOR_MAGENTA_900,
+    COLORS.COLOR_GREEN_900,
+    COLORS.COLOR_ORANGE_900,
+    COLORS.COLOR_RED_400,
+    COLORS.COLOR_GREEN_700,
+    COLORS.COLOR_YELLOW_800,
+  ],
+  DATAVIZ_COLORS_MAP: {
+    "1": COLORS.COLOR_TEAL_500,
+    "2": COLORS.COLOR_PURPLE_700,
+    "3": COLORS.COLOR_PINK_700,
+    "4": COLORS.COLOR_YELLOW_500,
+    "5": COLORS.COLOR_BLUE_500,
+    "6": COLORS.COLOR_MAGENTA_500,
+    "7": COLORS.COLOR_GREEN_500,
+    "8": COLORS.COLOR_ORANGE_500,
+    "9": COLORS.COLOR_RED_700,
+    "10": COLORS.COLOR_TEAL_900,
+    "11": COLORS.COLOR_PURPLE_400,
+    "12": COLORS.COLOR_PINK_900,
+    "13": COLORS.COLOR_YELLOW_900,
+    "14": COLORS.COLOR_BLUE_900,
+    "15": COLORS.COLOR_MAGENTA_900,
+    "16": COLORS.COLOR_GREEN_900,
+    "17": COLORS.COLOR_ORANGE_900,
+    "18": COLORS.COLOR_RED_400,
+    "19": COLORS.COLOR_GREEN_700,
+    "20": COLORS.COLOR_YELLOW_800,
+  },
+};

package/__flow__/themes/default/theme.js

@@ -2,6 +2,7 @@
 
 import COLORS from "@sproutsocial/seeds-color";
 import literalColors from "./literal-colors";
+import { datavizPalette } from "./dataviz-palette";
 import {
   green,
   blue,
@@ -223,6 +224,7 @@ const colors = {
     tiktok: NETWORKCOLORS.NETWORK_COLOR_TIKTOK,
   },
   ...literalColors,
+  ...datavizPalette,
 };
 
 export const typography = {

package/commonjs/dataviz/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+exports.__esModule = true;
+exports.DataVizRotation = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _styledComponents = require("styled-components");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var DataVizRotation = (0, _styledComponents.withTheme)(function (p) {
+  return p.theme.colors.DATAVIZ_COLORS_LIST.map(function (color, i) {
+    return /*#__PURE__*/_react.default.createElement(_Box.default, {
+      key: color,
+      py: 300,
+      px: 400,
+      bg: color
+    }, i + 1);
+  });
+});
+exports.DataVizRotation = DataVizRotation;

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

@@ -0,0 +1,35 @@
+"use strict";
+
+exports.__esModule = true;
+exports.datavizPalette = void 0;
+
+var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var 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
+  }
+};
+exports.datavizPalette = datavizPalette;

package/commonjs/themes/dark/theme.js

@@ -7,6 +7,8 @@ var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
 
 var _theme = _interopRequireDefault(require("../default/theme"));
 
+var _datavizPalette = require("./dataviz-palette");
+
 var _decorativePalettes = require("./decorative-palettes");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -187,7 +189,7 @@ var darkTheme = _extends({}, _theme.default, {
         selected: _seedsColor.default.COLOR_NEUTRAL_0
       }
     }
-  }),
+  }, _datavizPalette.datavizPalette),
   mode: "dark"
 });
 

package/commonjs/themes/default/dataviz-palette.js

@@ -0,0 +1,35 @@
+"use strict";
+
+exports.__esModule = true;
+exports.datavizPalette = void 0;
+
+var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var datavizPalette = {
+  DATAVIZ_COLORS_LIST: [_seedsColor.default.COLOR_TEAL_500, _seedsColor.default.COLOR_PURPLE_700, _seedsColor.default.COLOR_PINK_700, _seedsColor.default.COLOR_YELLOW_500, _seedsColor.default.COLOR_BLUE_500, _seedsColor.default.COLOR_MAGENTA_500, _seedsColor.default.COLOR_GREEN_500, _seedsColor.default.COLOR_ORANGE_500, _seedsColor.default.COLOR_RED_700, _seedsColor.default.COLOR_TEAL_900, _seedsColor.default.COLOR_PURPLE_400, _seedsColor.default.COLOR_PINK_900, _seedsColor.default.COLOR_YELLOW_900, _seedsColor.default.COLOR_BLUE_900, _seedsColor.default.COLOR_MAGENTA_900, _seedsColor.default.COLOR_GREEN_900, _seedsColor.default.COLOR_ORANGE_900, _seedsColor.default.COLOR_RED_400, _seedsColor.default.COLOR_GREEN_700, _seedsColor.default.COLOR_YELLOW_800],
+  DATAVIZ_COLORS_MAP: {
+    "1": _seedsColor.default.COLOR_TEAL_500,
+    "2": _seedsColor.default.COLOR_PURPLE_700,
+    "3": _seedsColor.default.COLOR_PINK_700,
+    "4": _seedsColor.default.COLOR_YELLOW_500,
+    "5": _seedsColor.default.COLOR_BLUE_500,
+    "6": _seedsColor.default.COLOR_MAGENTA_500,
+    "7": _seedsColor.default.COLOR_GREEN_500,
+    "8": _seedsColor.default.COLOR_ORANGE_500,
+    "9": _seedsColor.default.COLOR_RED_700,
+    "10": _seedsColor.default.COLOR_TEAL_900,
+    "11": _seedsColor.default.COLOR_PURPLE_400,
+    "12": _seedsColor.default.COLOR_PINK_900,
+    "13": _seedsColor.default.COLOR_YELLOW_900,
+    "14": _seedsColor.default.COLOR_BLUE_900,
+    "15": _seedsColor.default.COLOR_MAGENTA_900,
+    "16": _seedsColor.default.COLOR_GREEN_900,
+    "17": _seedsColor.default.COLOR_ORANGE_900,
+    "18": _seedsColor.default.COLOR_RED_400,
+    "19": _seedsColor.default.COLOR_GREEN_700,
+    "20": _seedsColor.default.COLOR_YELLOW_800
+  }
+};
+exports.datavizPalette = datavizPalette;

package/commonjs/themes/default/theme.js

@@ -7,6 +7,8 @@ var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
 
 var _literalColors = _interopRequireDefault(require("./literal-colors"));
 
+var _datavizPalette = require("./dataviz-palette");
+
 var _decorativePalettes = require("./decorative-palettes");
 
 var _seedsNetworkcolor = _interopRequireDefault(require("@sproutsocial/seeds-networkcolor"));
@@ -228,7 +230,7 @@ var colors = _extends({
     whatsapp: _seedsNetworkcolor.default.NETWORK_COLOR_WHATSAPP,
     tiktok: _seedsNetworkcolor.default.NETWORK_COLOR_TIKTOK
   }
-}, _literalColors.default);
+}, _literalColors.default, _datavizPalette.datavizPalette);
 
 var typography = {
   "100": _seedsTypography.default.TYPOGRAPHY_SIZE_100,

package/lib/dataviz/index.js

@@ -0,0 +1,13 @@
+import React from "react";
+import Box from "../Box";
+import { withTheme } from "styled-components";
+export var DataVizRotation = withTheme(function (p) {
+  return p.theme.colors.DATAVIZ_COLORS_LIST.map(function (color, i) {
+    return /*#__PURE__*/React.createElement(Box, {
+      key: color,
+      py: 300,
+      px: 400,
+      bg: color
+    }, i + 1);
+  });
+});

package/lib/themes/dark/dataviz-palette.js

@@ -0,0 +1,26 @@
+import COLORS from "@sproutsocial/seeds-color";
+export var datavizPalette = {
+  DATAVIZ_COLORS_LIST: [COLORS.COLOR_TEAL_400, COLORS.COLOR_PURPLE_400, COLORS.COLOR_PINK_400, COLORS.COLOR_YELLOW_500, COLORS.COLOR_BLUE_400, COLORS.COLOR_MAGENTA_400, COLORS.COLOR_GREEN_400, COLORS.COLOR_ORANGE_400, COLORS.COLOR_RED_700, COLORS.COLOR_TEAL_700, COLORS.COLOR_PURPLE_700, COLORS.COLOR_PINK_700, COLORS.COLOR_YELLOW_800, COLORS.COLOR_BLUE_700, COLORS.COLOR_MAGENTA_700, COLORS.COLOR_GREEN_700, COLORS.COLOR_ORANGE_700, COLORS.COLOR_RED_400, COLORS.COLOR_GREEN_200, COLORS.COLOR_YELLOW_200],
+  DATAVIZ_COLORS_MAP: {
+    "1": COLORS.COLOR_TEAL_400,
+    "2": COLORS.COLOR_PURPLE_400,
+    "3": COLORS.COLOR_PINK_400,
+    "4": COLORS.COLOR_YELLOW_500,
+    "5": COLORS.COLOR_BLUE_400,
+    "6": COLORS.COLOR_MAGENTA_400,
+    "7": COLORS.COLOR_GREEN_400,
+    "8": COLORS.COLOR_ORANGE_400,
+    "9": COLORS.COLOR_RED_700,
+    "10": COLORS.COLOR_TEAL_700,
+    "11": COLORS.COLOR_PURPLE_700,
+    "12": COLORS.COLOR_PINK_700,
+    "13": COLORS.COLOR_YELLOW_800,
+    "14": COLORS.COLOR_BLUE_700,
+    "15": COLORS.COLOR_MAGENTA_700,
+    "16": COLORS.COLOR_GREEN_700,
+    "17": COLORS.COLOR_ORANGE_700,
+    "18": COLORS.COLOR_RED_400,
+    "19": COLORS.COLOR_GREEN_200,
+    "20": COLORS.COLOR_YELLOW_200
+  }
+};

package/lib/themes/dark/theme.js

@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import COLORS from "@sproutsocial/seeds-color";
 import defaultTheme from "../default/theme";
+import { datavizPalette } from "./dataviz-palette";
 import { green, blue, purple, yellow, orange, red, neutral } from "./decorative-palettes";
 
 var darkTheme = _extends({}, defaultTheme, {
@@ -178,7 +179,7 @@ var darkTheme = _extends({}, defaultTheme, {
         selected: COLORS.COLOR_NEUTRAL_0
       }
     }
-  }),
+  }, datavizPalette),
   mode: "dark"
 });
 

package/lib/themes/default/dataviz-palette.js

@@ -0,0 +1,26 @@
+import COLORS from "@sproutsocial/seeds-color";
+export var datavizPalette = {
+  DATAVIZ_COLORS_LIST: [COLORS.COLOR_TEAL_500, COLORS.COLOR_PURPLE_700, COLORS.COLOR_PINK_700, COLORS.COLOR_YELLOW_500, COLORS.COLOR_BLUE_500, COLORS.COLOR_MAGENTA_500, COLORS.COLOR_GREEN_500, COLORS.COLOR_ORANGE_500, COLORS.COLOR_RED_700, COLORS.COLOR_TEAL_900, COLORS.COLOR_PURPLE_400, COLORS.COLOR_PINK_900, COLORS.COLOR_YELLOW_900, COLORS.COLOR_BLUE_900, COLORS.COLOR_MAGENTA_900, COLORS.COLOR_GREEN_900, COLORS.COLOR_ORANGE_900, COLORS.COLOR_RED_400, COLORS.COLOR_GREEN_700, COLORS.COLOR_YELLOW_800],
+  DATAVIZ_COLORS_MAP: {
+    "1": COLORS.COLOR_TEAL_500,
+    "2": COLORS.COLOR_PURPLE_700,
+    "3": COLORS.COLOR_PINK_700,
+    "4": COLORS.COLOR_YELLOW_500,
+    "5": COLORS.COLOR_BLUE_500,
+    "6": COLORS.COLOR_MAGENTA_500,
+    "7": COLORS.COLOR_GREEN_500,
+    "8": COLORS.COLOR_ORANGE_500,
+    "9": COLORS.COLOR_RED_700,
+    "10": COLORS.COLOR_TEAL_900,
+    "11": COLORS.COLOR_PURPLE_400,
+    "12": COLORS.COLOR_PINK_900,
+    "13": COLORS.COLOR_YELLOW_900,
+    "14": COLORS.COLOR_BLUE_900,
+    "15": COLORS.COLOR_MAGENTA_900,
+    "16": COLORS.COLOR_GREEN_900,
+    "17": COLORS.COLOR_ORANGE_900,
+    "18": COLORS.COLOR_RED_400,
+    "19": COLORS.COLOR_GREEN_700,
+    "20": COLORS.COLOR_YELLOW_800
+  }
+};

package/lib/themes/default/theme.js

@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import COLORS from "@sproutsocial/seeds-color";
 import literalColors from "./literal-colors";
+import { datavizPalette } from "./dataviz-palette";
 import { green, blue, purple, yellow, orange, red, neutral } from "./decorative-palettes";
 import NETWORKCOLORS from "@sproutsocial/seeds-networkcolor";
 import TYPOGRAPHY from "@sproutsocial/seeds-typography";
@@ -211,7 +212,7 @@ var colors = _extends({
     whatsapp: NETWORKCOLORS.NETWORK_COLOR_WHATSAPP,
     tiktok: NETWORKCOLORS.NETWORK_COLOR_TIKTOK
   }
-}, literalColors);
+}, literalColors, datavizPalette);
 
 export var typography = {
   "100": TYPOGRAPHY.TYPOGRAPHY_SIZE_100,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "8.5.2",
+  "version": "8.6.0",
   "license": "MIT",
   "files": [
     "__flow__",