@spaced-out/ui-design-system 0.1.86 → 0.1.87-beta.0

package/lib/components/LineChart/LineChart.js.flow

@@ -0,0 +1,85 @@
+// @flow strict
+
+import * as React from 'react';
+//$FlowFixMe[untyped-import]
+import Highcharts from 'highcharts';
+//$FlowFixMe[untyped-import]
+import HighchartsReact from 'highcharts-react-official';
+
+import {
+  getDataVizColor,
+  getLineChartOptions,
+  mergeChartUserOptions,
+} from '../../utils/charts';
+import classify from '../../utils/classify';
+import type {ChartWrapperClassNames, ExportOptionType} from '../ChartWrapper';
+import {ChartWrapper} from '../ChartWrapper';
+
+import css from './LineChart.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  ...ChartWrapperClassNames,
+  highChart?: string,
+}>;
+
+type LineSeriesItem = {
+  name: string,
+  data: [],
+};
+
+export type LineChartProps = {
+  classNames?: ClassNames,
+  cardTitle?: string,
+  customExportOptions?: Array<ExportOptionType> | null,
+  series: Array<LineSeriesItem>,
+  headerActions?: React.Node,
+  ...
+};
+
+export const LineChart = ({
+  classNames,
+  cardTitle,
+  customExportOptions,
+  series,
+  headerActions,
+  ...userOptions
+}: LineChartProps): React.Node => {
+  const chartRef = React.createRef();
+
+  const lineChartSeries = series.map((seriesItem, index) => ({
+    ...seriesItem,
+    name: seriesItem.name,
+    data: seriesItem.data,
+    color: getDataVizColor(index),
+  }));
+
+  const defaultLineChartOptions = getLineChartOptions();
+
+  //$FlowFixMe[cannot-spread-inexact]
+  const chartOptions = mergeChartUserOptions(defaultLineChartOptions, {
+    series: lineChartSeries,
+    ...userOptions,
+  });
+
+  const {highChart, ...wrapperClassNames} = classNames || {};
+
+  return (
+    <ChartWrapper
+      title={cardTitle}
+      ref={chartRef}
+      classNames={wrapperClassNames}
+      customExportOptions={customExportOptions}
+      headerActions={headerActions}
+    >
+      <HighchartsReact
+        highcharts={Highcharts}
+        containerProps={{
+          className: classify(css.lineChartContainer, highChart),
+        }}
+        ref={chartRef}
+        options={chartOptions}
+      />
+    </ChartWrapper>
+  );
+};

package/lib/components/LineChart/LineChart.module.css

@@ -0,0 +1,17 @@
+@value (colorFillPrimary) from '../../styles/variables/_color.css';
+@value (size400, size660, sizeFluid) from  '../../styles/variables/_size.css';
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.lineChartContainer {
+  width: sizeFluid;
+  min-width: size660;
+  min-height: size400;
+  max-height: size400;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/lib/components/LineChart/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _LineChart = require("./LineChart");
+Object.keys(_LineChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _LineChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _LineChart[key];
+    }
+  });
+});

package/lib/components/LineChart/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './LineChart';

package/lib/components/SpiderChart/SpiderChart.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpiderChart = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _highcharts = _interopRequireDefault(require("highcharts"));
+var _highchartsMore = _interopRequireDefault(require("highcharts/highcharts-more"));
+var _highchartsReactOfficial = _interopRequireDefault(require("highcharts-react-official"));
+var _charts = require("../../utils/charts");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _ChartWrapper = require("../ChartWrapper");
+var _SpiderChartModule = _interopRequireDefault(require("./SpiderChart.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+//$FlowFixMe[untyped-import]
+
+//$FlowFixMe[untyped-import]
+
+//$FlowFixMe[untyped-import]
+
+(0, _highchartsMore.default)(_highcharts.default);
+const SpiderChart = _ref => {
+  let {
+    classNames,
+    cardTitle,
+    customExportOptions,
+    headerActions,
+    legend,
+    series,
+    xAxis: {
+      categories,
+      tickmarkPlacement = 'on',
+      lineWidth: xAxisLineWidth = 0,
+      ...xAxisProps
+    } = {},
+    yAxis: {
+      gridLineInterpolation = 'polygon',
+      lineWidth: yAxisLineWidth = 0,
+      min: yAxisMin = 0,
+      ...yAxisProps
+    } = {},
+    ...userOptions
+  } = _ref;
+  const chartRef = React.useRef(null);
+  const [chartWidth, setChartWidth] = React.useState(0);
+  React.useLayoutEffect(() => {
+    setChartWidth(chartRef.current?.chart.plotWidth);
+  }, []);
+  const spiderSeries = series.map((seriesItem, index) => ({
+    ...seriesItem,
+    name: seriesItem.name,
+    data: seriesItem.data,
+    pointPlacement: 'on',
+    color: (0, _charts.getDataVizColor)(index)
+  }));
+  const defaultSpiderChartOptions = (0, _charts.getSpiderChartOptions)();
+
+  //$FlowFixMe[cannot-spread-inexact]
+  const chartOptions = (0, _charts.mergeChartUserOptions)(defaultSpiderChartOptions, {
+    series: spiderSeries,
+    ...userOptions
+  });
+  const {
+    highChart,
+    ...wrapperClassNames
+  } = classNames || {};
+  return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
+    title: cardTitle
+    //$FlowFixMe[incompatible-type]
+    ,
+    ref: chartRef,
+    customExportOptions: customExportOptions,
+    classNames: wrapperClassNames,
+    headerActions: headerActions
+  }, /*#__PURE__*/React.createElement(_highchartsReactOfficial.default, {
+    highcharts: _highcharts.default,
+    ref: chartRef,
+    containerProps: {
+      className: (0, _classify.default)(_SpiderChartModule.default.spiderChartContainer, highChart)
+    },
+    options: chartOptions
+  }));
+};
+exports.SpiderChart = SpiderChart;

package/lib/components/SpiderChart/SpiderChart.js.flow

@@ -0,0 +1,123 @@
+// @flow strict
+
+import * as React from 'react';
+//$FlowFixMe[untyped-import]
+import Highcharts from 'highcharts';
+//$FlowFixMe[untyped-import]
+import HighChartsMore from 'highcharts/highcharts-more';
+//$FlowFixMe[untyped-import]
+import HighchartsReact from 'highcharts-react-official';
+
+import {
+  getDataVizColor,
+  getSpiderChartOptions,
+  mergeChartUserOptions,
+} from '../../utils/charts';
+import classify from '../../utils/classify';
+import type {ChartWrapperClassNames, ExportOptionType} from '../ChartWrapper';
+import {ChartWrapper} from '../ChartWrapper';
+
+import css from './SpiderChart.module.css';
+
+
+HighChartsMore(Highcharts);
+
+type ClassNames = $ReadOnly<{
+  ...ChartWrapperClassNames,
+  highChart?: string,
+}>;
+
+type SpiderSeriesItem = {
+  name: string,
+  data: [],
+};
+
+export type SpiderChartProps = {
+  classNames?: ClassNames,
+  cardTitle?: React.Node,
+  customExportOptions?: Array<ExportOptionType> | null,
+  headerActions?: React.Node,
+  series: Array<SpiderSeriesItem>,
+  legend: {...},
+  xAxis: {
+    categories: Array<string>,
+    tickmarkPlacement: string,
+    lineWidth: number,
+    ...
+  },
+  yAxis: {
+    gridLineInterpolation: 'circle' | 'polygon',
+    lineWidth: 0,
+    min: 0,
+    ...
+  },
+  ...
+};
+
+export const SpiderChart = ({
+  classNames,
+  cardTitle,
+  customExportOptions,
+  headerActions,
+  legend,
+  series,
+  xAxis: {
+    categories,
+    tickmarkPlacement = 'on',
+    lineWidth: xAxisLineWidth = 0,
+    ...xAxisProps
+  } = {},
+  yAxis: {
+    gridLineInterpolation = 'polygon',
+    lineWidth: yAxisLineWidth = 0,
+    min: yAxisMin = 0,
+    ...yAxisProps
+  } = {},
+
+  ...userOptions
+}: SpiderChartProps): React.Node => {
+  const chartRef = React.useRef(null);
+  const [chartWidth, setChartWidth] = React.useState(0);
+
+  React.useLayoutEffect(() => {
+    setChartWidth(chartRef.current?.chart.plotWidth);
+  }, []);
+
+  const spiderSeries = series.map((seriesItem, index) => ({
+    ...seriesItem,
+    name: seriesItem.name,
+    data: seriesItem.data,
+    pointPlacement: 'on',
+    color: getDataVizColor(index),
+  }));
+
+  const defaultSpiderChartOptions = getSpiderChartOptions();
+
+  //$FlowFixMe[cannot-spread-inexact]
+  const chartOptions = mergeChartUserOptions(defaultSpiderChartOptions, {
+    series: spiderSeries,
+    ...userOptions,
+  });
+
+  const {highChart, ...wrapperClassNames} = classNames || {};
+
+  return (
+    <ChartWrapper
+      title={cardTitle}
+      //$FlowFixMe[incompatible-type]
+      ref={chartRef}
+      customExportOptions={customExportOptions}
+      classNames={wrapperClassNames}
+      headerActions={headerActions}
+    >
+      <HighchartsReact
+        highcharts={Highcharts}
+        ref={chartRef}
+        containerProps={{
+          className: classify(css.spiderChartContainer, highChart),
+        }}
+        options={chartOptions}
+      />
+    </ChartWrapper>
+  );
+};

package/lib/components/SpiderChart/SpiderChart.module.css

@@ -0,0 +1,17 @@
+@value (colorFillPrimary) from '../../styles/variables/_color.css';
+@value (size400, size540, size660, size880, sizeFluid) from '../../styles/variables/_size.css';
+
+.wrapper {
+  display: flex;
+}
+
+.spiderChartContainer {
+  width: sizeFluid;
+  min-width: size660;
+  max-width: size880;
+  min-height: size400;
+  max-height: size540;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/lib/components/SpiderChart/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _SpiderChart = require("./SpiderChart");
+Object.keys(_SpiderChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SpiderChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SpiderChart[key];
+    }
+  });
+});

package/lib/components/SpiderChart/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './SpiderChart';

package/lib/components/index.js

@@ -102,6 +102,17 @@ Object.keys(_Card).forEach(function (key) {
     }
   });
 });
+var _Charts = require("./Charts");
+Object.keys(_Charts).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Charts[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Charts[key];
+    }
+  });
+});
 var _Checkbox = require("./Checkbox");
 Object.keys(_Checkbox).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -9,6 +9,7 @@ export * from './Button';
 export * from './ButtonDropdown';
 export * from './ButtonTabs';
 export * from './Card';
+export * from './Charts';
 export * from './Checkbox';
 export * from './Chip';
 export * from './CircularLoader';

package/lib/styles/index.css

@@ -128,6 +128,22 @@
 
 @value colorSubMenuStar: #DFBD0D;
 
+@value colorDataViz1: #8dbaf8;
+
+@value colorDataViz2: #b4a2e8;
+
+@value colorDataViz3: #8bcfad;
+
+@value colorDataViz4: #f0c48f;
+
+@value colorDataViz5: #f297ad;
+
+@value colorDataViz6: #B0F0E3;
+
+@value colorDataViz7: #F5B8E1;
+
+@value colorDataViz8: #F5EBB4;
+
 @value colorGrayLightest: #EBEBEB;
 
 @value colorNeutral: #706F9B;
@@ -194,7 +210,7 @@
 
 @value elevationToast: 60;
 
-@value fontFamilyCentra: "Centra No2";
+@value fontFamilyCentra: "Centra No 2";
 
 @value fontWeightBook: 400;
 
@@ -400,6 +416,8 @@
 
 @value size160: 160px;
 
+@value size180: 180px;
+
 @value size228: 228px;
 
 @value size240: 240px;
@@ -422,12 +440,18 @@
 
 @value size500: 500px;
 
+@value size540: 540px;
+
 @value size580: 580px;
 
 @value size640: 640px;
 
+@value size660: 660px;
+
 @value size720: 720px;
 
+@value size880: 880px;
+
 @value size960: 960px;
 
 @value size1280: 1280px;

package/lib/styles/index.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fontLetterSpacing0 = exports.fontFamilyCentra = exports.elevationTooltip = exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextFavorite = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = exports.borderWidthTertiary = exports.borderWidthSecondary = exports.borderWidthPrimary = exports.borderWidthNone = exports.borderRadiusXSmall = exports.borderRadiusXLarge = exports.borderRadiusSmall = exports.borderRadiusRadioButton = exports.borderRadiusNone = exports.borderRadiusMedium = exports.borderRadiusLarge = exports.borderRadiusCircle = void 0;
-exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = exports.shadowBoxShadow4Y = exports.shadowBoxShadow4X = exports.shadowBoxShadow4Type = exports.shadowBoxShadow4Spread = exports.shadowBoxShadow4Color = exports.shadowBoxShadow4Blur = exports.shadowBoxShadow3Y = exports.shadowBoxShadow3X = exports.shadowBoxShadow3Type = exports.shadowBoxShadow3Spread = exports.shadowBoxShadow3Color = exports.shadowBoxShadow3Blur = exports.shadowBoxShadow2Y = exports.shadowBoxShadow2X = exports.shadowBoxShadow2Type = exports.shadowBoxShadow2Spread = exports.shadowBoxShadow2Color = exports.shadowBoxShadow2Blur = exports.shadowBoxShadow1Y = exports.shadowBoxShadow1X = exports.shadowBoxShadow1Type = exports.shadowBoxShadow1Spread = exports.shadowBoxShadow1Color = exports.shadowBoxShadow1Blur = exports.opacity95 = exports.opacity90 = exports.opacity85 = exports.opacity80 = exports.opacity70 = exports.opacity60 = exports.opacity50 = exports.opacity5 = exports.opacity40 = exports.opacity30 = exports.opacity20 = exports.opacity15 = exports.opacity100 = exports.opacity10 = exports.opacity0 = exports.motionEaseInEaseOut = exports.motionDurationSlowest = exports.motionDurationSlower = exports.motionDurationSlow = exports.motionDurationNormal = exports.motionDurationFast = exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize36 = exports.fontSize26 = exports.fontSize24 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight125 = exports.fontLineHeight120 = exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus3 = exports.fontLetterSpacingMinus2 = exports.fontLetterSpacingMinus1 = exports.fontLetterSpacing4 = exports.fontLetterSpacing2 = exports.fontLetterSpacing1 = void 0;
-exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size8 = exports.size720 = exports.size70 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = void 0;
+exports.elevationBackdrop = exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextFavorite = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = exports.borderWidthTertiary = exports.borderWidthSecondary = exports.borderWidthPrimary = exports.borderWidthNone = exports.borderRadiusXSmall = exports.borderRadiusXLarge = exports.borderRadiusSmall = exports.borderRadiusRadioButton = exports.borderRadiusNone = exports.borderRadiusMedium = exports.borderRadiusLarge = exports.borderRadiusCircle = void 0;
+exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = exports.shadowBoxShadow4Y = exports.shadowBoxShadow4X = exports.shadowBoxShadow4Type = exports.shadowBoxShadow4Spread = exports.shadowBoxShadow4Color = exports.shadowBoxShadow4Blur = exports.shadowBoxShadow3Y = exports.shadowBoxShadow3X = exports.shadowBoxShadow3Type = exports.shadowBoxShadow3Spread = exports.shadowBoxShadow3Color = exports.shadowBoxShadow3Blur = exports.shadowBoxShadow2Y = exports.shadowBoxShadow2X = exports.shadowBoxShadow2Type = exports.shadowBoxShadow2Spread = exports.shadowBoxShadow2Color = exports.shadowBoxShadow2Blur = exports.shadowBoxShadow1Y = exports.shadowBoxShadow1X = exports.shadowBoxShadow1Type = exports.shadowBoxShadow1Spread = exports.shadowBoxShadow1Color = exports.shadowBoxShadow1Blur = exports.opacity95 = exports.opacity90 = exports.opacity85 = exports.opacity80 = exports.opacity70 = exports.opacity60 = exports.opacity50 = exports.opacity5 = exports.opacity40 = exports.opacity30 = exports.opacity20 = exports.opacity15 = exports.opacity100 = exports.opacity10 = exports.opacity0 = exports.motionEaseInEaseOut = exports.motionDurationSlowest = exports.motionDurationSlower = exports.motionDurationSlow = exports.motionDurationNormal = exports.motionDurationFast = exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize36 = exports.fontSize26 = exports.fontSize24 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight125 = exports.fontLineHeight120 = exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus3 = exports.fontLetterSpacingMinus2 = exports.fontLetterSpacingMinus1 = exports.fontLetterSpacing4 = exports.fontLetterSpacing2 = exports.fontLetterSpacing1 = exports.fontLetterSpacing0 = exports.fontFamilyCentra = exports.elevationTooltip = exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = void 0;
+exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size300 = exports.size30 = exports.size276 = void 0;
 
 const borderWidthNone = '0px';
 exports.borderWidthNone = borderWidthNone;
@@ -137,6 +137,22 @@ const colorSubMenuBackgroundDefault = '#1F1F36';
 exports.colorSubMenuBackgroundDefault = colorSubMenuBackgroundDefault;
 const colorSubMenuStar = '#DFBD0D';
 exports.colorSubMenuStar = colorSubMenuStar;
+const colorDataViz1 = '#8dbaf8';
+exports.colorDataViz1 = colorDataViz1;
+const colorDataViz2 = '#b4a2e8';
+exports.colorDataViz2 = colorDataViz2;
+const colorDataViz3 = '#8bcfad';
+exports.colorDataViz3 = colorDataViz3;
+const colorDataViz4 = '#f0c48f';
+exports.colorDataViz4 = colorDataViz4;
+const colorDataViz5 = '#f297ad';
+exports.colorDataViz5 = colorDataViz5;
+const colorDataViz6 = '#B0F0E3';
+exports.colorDataViz6 = colorDataViz6;
+const colorDataViz7 = '#F5B8E1';
+exports.colorDataViz7 = colorDataViz7;
+const colorDataViz8 = '#F5EBB4';
+exports.colorDataViz8 = colorDataViz8;
 const colorGrayLightest = '#EBEBEB';
 exports.colorGrayLightest = colorGrayLightest;
 const colorNeutral = '#706F9B';
@@ -203,7 +219,7 @@ const elevationModal = '40';
 exports.elevationModal = elevationModal;
 const elevationToast = '60';
 exports.elevationToast = elevationToast;
-const fontFamilyCentra = '"Centra No2"';
+const fontFamilyCentra = '"Centra No 2"';
 exports.fontFamilyCentra = fontFamilyCentra;
 const fontWeightBook = '400';
 exports.fontWeightBook = fontWeightBook;
@@ -409,6 +425,8 @@ const size140 = '140px';
 exports.size140 = size140;
 const size160 = '160px';
 exports.size160 = size160;
+const size180 = '180px';
+exports.size180 = size180;
 const size228 = '228px';
 exports.size228 = size228;
 const size240 = '240px';
@@ -431,12 +449,18 @@ const size480 = '480px';
 exports.size480 = size480;
 const size500 = '500px';
 exports.size500 = size500;
+const size540 = '540px';
+exports.size540 = size540;
 const size580 = '580px';
 exports.size580 = size580;
 const size640 = '640px';
 exports.size640 = size640;
+const size660 = '660px';
+exports.size660 = size660;
 const size720 = '720px';
 exports.size720 = size720;
+const size880 = '880px';
+exports.size880 = size880;
 const size960 = '960px';
 exports.size960 = size960;
 const size1280 = '1280px';

package/lib/styles/index.js.flow

@@ -130,6 +130,22 @@ export const colorSubMenuBackgroundDefault = '#1F1F36';
 
 export const colorSubMenuStar = '#DFBD0D';
 
+export const colorDataViz1 = '#8dbaf8';
+
+export const colorDataViz2 = '#b4a2e8';
+
+export const colorDataViz3 = '#8bcfad';
+
+export const colorDataViz4 = '#f0c48f';
+
+export const colorDataViz5 = '#f297ad';
+
+export const colorDataViz6 = '#B0F0E3';
+
+export const colorDataViz7 = '#F5B8E1';
+
+export const colorDataViz8 = '#F5EBB4';
+
 export const colorGrayLightest = '#EBEBEB';
 
 export const colorNeutral = '#706F9B';
@@ -196,7 +212,7 @@ export const elevationModal = '40';
 
 export const elevationToast = '60';
 
-export const fontFamilyCentra = '"Centra No2"';
+export const fontFamilyCentra = '"Centra No 2"';
 
 export const fontWeightBook = '400';
 
@@ -402,6 +418,8 @@ export const size140 = '140px';
 
 export const size160 = '160px';
 
+export const size180 = '180px';
+
 export const size228 = '228px';
 
 export const size240 = '240px';
@@ -424,12 +442,18 @@ export const size480 = '480px';
 
 export const size500 = '500px';
 
+export const size540 = '540px';
+
 export const size580 = '580px';
 
 export const size640 = '640px';
 
+export const size660 = '660px';
+
 export const size720 = '720px';
 
+export const size880 = '880px';
+
 export const size960 = '960px';
 
 export const size1280 = '1280px';

package/lib/styles/variables/_color.css

@@ -104,6 +104,22 @@
 
 @value colorSubMenuStar: #DFBD0D;
 
+@value colorDataViz1: #8dbaf8;
+
+@value colorDataViz2: #b4a2e8;
+
+@value colorDataViz3: #8bcfad;
+
+@value colorDataViz4: #f0c48f;
+
+@value colorDataViz5: #f297ad;
+
+@value colorDataViz6: #B0F0E3;
+
+@value colorDataViz7: #F5B8E1;
+
+@value colorDataViz8: #F5EBB4;
+
 @value colorGrayLightest: #EBEBEB;
 
 @value colorNeutral: #706F9B;