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

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;

package/lib/styles/variables/_color.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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 = void 0;
+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 = void 0;
 
 const colorTextPrimary = '#17172A';
 exports.colorTextPrimary = colorTextPrimary;
@@ -111,6 +111,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';

package/lib/styles/variables/_color.js.flow

@@ -106,6 +106,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';

package/lib/styles/variables/_font.css

@@ -1,4 +1,4 @@
-@value fontFamilyCentra: "Centra No2";
+@value fontFamilyCentra: "Centra No 2";
 
 @value fontWeightBook: 400;
 

package/lib/styles/variables/_font.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 = void 0;
 
-const fontFamilyCentra = '"Centra No2"';
+const fontFamilyCentra = '"Centra No 2"';
 exports.fontFamilyCentra = fontFamilyCentra;
 const fontWeightBook = '400';
 exports.fontWeightBook = fontWeightBook;

package/lib/styles/variables/_font.js.flow

@@ -1,6 +1,6 @@
 // @flow strict
 
-export const fontFamilyCentra = '"Centra No2"';
+export const fontFamilyCentra = '"Centra No 2"';
 
 export const fontWeightBook = '400';
 

package/lib/styles/variables/_size.css

@@ -54,6 +54,8 @@
 
 @value size160: 160px;
 
+@value size180: 180px;
+
 @value size228: 228px;
 
 @value size240: 240px;
@@ -76,12 +78,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/variables/_size.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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 = 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 = void 0;
+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 = 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 = void 0;
 
 const size2 = '2px';
 exports.size2 = size2;
@@ -61,6 +61,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';
@@ -83,12 +85,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/variables/_size.js.flow

@@ -56,6 +56,8 @@ export const size140 = '140px';
 
 export const size160 = '160px';
 
+export const size180 = '180px';
+
 export const size228 = '228px';
 
 export const size240 = '240px';
@@ -78,12 +80,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/types/charts.js.flow

@@ -0,0 +1,151 @@
+// @flow strict
+
+export type ChartOptions = {
+  chart?: {
+    polar?: boolean,
+    type?: string,
+    spacing?: Array<number>,
+    margin?: Array<number>,
+    style?: CSSObject,
+    ...
+  },
+  title?: {
+    text: string | null,
+  },
+  exporting?: {
+    buttons: {
+      contextButton: {
+        enabled: boolean,
+      },
+    },
+  },
+  credits?: {
+    enabled: boolean,
+  },
+  tooltip?: Tooltip,
+  xAxis?: AxisOptions,
+  yAxis?: AxisOptions,
+  drilldown?: Drilldown,
+  legend?: LegendOptionsType,
+  plotOptions?: PlotOptionsType,
+  series?: Array<SeriesOptionsType>,
+  subtitle?: {
+    useHTML: true,
+    text?: string,
+    verticalAlign: 'middle',
+    align: string,
+    style: CSSObject,
+    x?: number,
+  },
+  pane?: {
+    center: [string, string],
+    size: string,
+  },
+  ...
+};
+
+export type AxisOptions = {
+  categories?: Array<string>,
+  gridLineInterpolation?: 'circle' | 'polygon',
+  lineWidth?: number,
+  tickmarkPlacement?: string,
+  labels?: {
+    align?: string,
+    distance?: number,
+    style?: CSSObject,
+  },
+  title?: {
+    margin?: number,
+    style: ?CSSObject,
+  },
+};
+
+export type BreadcrumbsOptions = {
+  floating?: boolean,
+  style?: CSSObject,
+  ...
+};
+
+export type LegendOptionsType = {
+  layout?: string,
+  align?: string,
+  verticalAlign?: string,
+  itemMarginBottom?: number,
+  padding?: number,
+  itemStyle?: CSSObject,
+  enabled?: boolean,
+  symbolHeight?: number,
+  symbolWidth?: number,
+  ...
+};
+
+export type CSSObject = {
+  alignItems?: string,
+  color?: string,
+  display?: string,
+  fontFamily?: string,
+  fontSize?: string,
+  fontStyle?: string,
+  fontWeight?: string,
+  letterSpacing?: string,
+  lineHeight?: string,
+  margin?: number,
+  textAlign?: string,
+  minWidth?: string,
+  maxWidth?: string,
+  minHeight?: string,
+  maxHeight?: string,
+  alignContent?: string,
+  overflow?: string,
+  textOverflow?: string,
+  zIndex?: number,
+  ...
+};
+
+export type DataOptionsType = {y: number, name: string, color: string, ...};
+
+export type SeriesOptionsType = {
+  id?: string,
+  name?: string,
+  data: Array<DataOptionsType>,
+  ...
+};
+
+export type Drilldown = {
+  activeAxisLabelStyle?: CSSObject,
+  activeDataLabelStyle?: CSSObject,
+  series?: Array<SeriesOptionsType>,
+  breadcrumbs?: BreadcrumbsOptions,
+};
+
+export type PlotOptionsType = {
+  ['pie' | 'line']: {
+    innerSize: string,
+    allowPointSelect: boolean,
+    cursor: 'pointer',
+    dataLabels: {
+      enabled?: boolean,
+      distance?: number,
+      connectorColor?: string,
+    },
+    showInLegend: boolean,
+    center: [string, string],
+    size: string,
+    minSize?: number | string,
+    borderWidth: number,
+    borderRadius: number,
+    ...
+  },
+};
+
+export type Tooltip = {
+  useHTML?: boolean,
+  followPointer?: boolean,
+  backgroundColor?: string,
+  style?: CSSObject,
+  outside?: boolean,
+  headerFormat?: string,
+  pointFormat?: string,
+  shared?: boolean,
+  ...
+};

package/lib/utils/charts/charts.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mergeChartUserOptions = exports.getDataVizColor = exports.commonChartOptions = exports.breadcrumbStyle = exports.DATA_VIZ_COLORS = void 0;
+var _Charts = require("../../components/Charts");
+var _color = require("../../styles/variables/_color");
+var _helpers = require("./helpers");
+var _typography = require("./typography");
+
+const DATA_VIZ_COLORS = [_color.colorDataViz1, _color.colorDataViz2, _color.colorDataViz3, _color.colorDataViz4, _color.colorDataViz5, _color.colorDataViz6, _color.colorDataViz7, _color.colorDataViz8];
+exports.DATA_VIZ_COLORS = DATA_VIZ_COLORS;
+const getDataVizColor = dataIndex => {
+  const colorIndex = dataIndex % DATA_VIZ_COLORS.length;
+  return DATA_VIZ_COLORS[colorIndex];
+};
+exports.getDataVizColor = getDataVizColor;
+const breadcrumbStyle = {
+  ..._typography.subTitleExtraSmall,
+  color: _color.colorTextSecondary
+};
+exports.breadcrumbStyle = breadcrumbStyle;
+const commonChartOptions = {
+  chart: {
+    style: {
+      fontFamily: 'inherit'
+    }
+  },
+  title: {
+    text: null
+  },
+  exporting: {
+    buttons: {
+      contextButton: {
+        enabled: false
+      }
+    }
+  },
+  credits: {
+    enabled: false
+  },
+  tooltip: {
+    followPointer: false,
+    backgroundColor: _color.colorTooltipFill,
+    useHTML: true,
+    outside: true,
+    ..._Charts.tooltipTheme
+  },
+  drilldown: {
+    breadcrumbs: {
+      floating: true,
+      style: breadcrumbStyle,
+      buttonTheme: {
+        style: breadcrumbStyle
+      }
+    }
+  },
+  legend: {
+    useHTML: true,
+    itemStyle: {
+      ..._typography.formLabelSmall,
+      paddingTop: '1px'
+    },
+    symbolHeight: 8,
+    enabled: true
+  }
+};
+exports.commonChartOptions = commonChartOptions;
+const mergeChartUserOptions = (defaultoptions, userOptions) => (0, _helpers.deepMerge)(defaultoptions, userOptions);
+exports.mergeChartUserOptions = mergeChartUserOptions;

package/lib/utils/charts/charts.js.flow

@@ -0,0 +1,89 @@
+// @flow strict
+
+import {tooltipTheme} from '../../components/Charts';
+import {
+  colorDataViz1,
+  colorDataViz2,
+  colorDataViz3,
+  colorDataViz4,
+  colorDataViz5,
+  colorDataViz6,
+  colorDataViz7,
+  colorDataViz8,
+  colorTextSecondary,
+  colorTooltipFill,
+} from '../../styles/variables/_color';
+import type {ChartOptions} from '../../types/charts';
+
+import {deepMerge} from './helpers';
+import {formLabelSmall, subTitleExtraSmall} from './typography';
+
+
+export const DATA_VIZ_COLORS = [
+  colorDataViz1,
+  colorDataViz2,
+  colorDataViz3,
+  colorDataViz4,
+  colorDataViz5,
+  colorDataViz6,
+  colorDataViz7,
+  colorDataViz8,
+];
+
+export const getDataVizColor = (dataIndex: number): string => {
+  const colorIndex = dataIndex % DATA_VIZ_COLORS.length;
+  return DATA_VIZ_COLORS[colorIndex];
+};
+
+export const breadcrumbStyle = {
+  ...subTitleExtraSmall,
+  color: colorTextSecondary,
+};
+
+export const commonChartOptions: $Shape<ChartOptions> = {
+  chart: {
+    style: {
+      fontFamily: 'inherit',
+    },
+  },
+  title: {
+    text: null,
+  },
+  exporting: {
+    buttons: {
+      contextButton: {
+        enabled: false,
+      },
+    },
+  },
+  credits: {
+    enabled: false,
+  },
+  tooltip: {
+    followPointer: false,
+    backgroundColor: colorTooltipFill,
+    useHTML: true,
+    outside: true,
+    ...tooltipTheme,
+  },
+  drilldown: {
+    breadcrumbs: {
+      floating: true,
+      style: breadcrumbStyle,
+      buttonTheme: {
+        style: breadcrumbStyle,
+      },
+    },
+  },
+  legend: {
+    useHTML: true,
+    itemStyle: {...formLabelSmall, paddingTop: '1px'},
+    symbolHeight: 8,
+    enabled: true,
+  },
+};
+
+export const mergeChartUserOptions = (
+  defaultoptions: ChartOptions,
+  userOptions: ChartOptions,
+): ChartOptions => deepMerge(defaultoptions, userOptions);