@gitlab/ui 111.0.0 → 111.1.0

package/src/utils/charts/theme.js

@@ -1,68 +1,63 @@
 import {
-  WHITE,
-  GRAY_50,
-  GRAY_100,
-  GRAY_200,
-  GRAY_300,
-  GRAY_500,
-  GRAY_600,
-  GRAY_900,
-  RED_500,
-  DATA_VIZ_AQUA_50,
-  DATA_VIZ_AQUA_100,
-  DATA_VIZ_AQUA_200,
-  DATA_VIZ_AQUA_300,
-  DATA_VIZ_AQUA_400,
-  DATA_VIZ_AQUA_500,
-  DATA_VIZ_AQUA_600,
-  DATA_VIZ_AQUA_700,
-  DATA_VIZ_AQUA_800,
-  DATA_VIZ_AQUA_900,
-  DATA_VIZ_AQUA_950,
-  DATA_VIZ_BLUE_50,
-  DATA_VIZ_BLUE_100,
-  DATA_VIZ_BLUE_200,
-  DATA_VIZ_BLUE_300,
-  DATA_VIZ_BLUE_400,
-  DATA_VIZ_BLUE_500,
-  DATA_VIZ_BLUE_600,
-  DATA_VIZ_BLUE_700,
-  DATA_VIZ_BLUE_800,
-  DATA_VIZ_BLUE_900,
-  DATA_VIZ_BLUE_950,
-  DATA_VIZ_GREEN_50,
-  DATA_VIZ_GREEN_100,
-  DATA_VIZ_GREEN_200,
-  DATA_VIZ_GREEN_300,
-  DATA_VIZ_GREEN_400,
-  DATA_VIZ_GREEN_500,
-  DATA_VIZ_GREEN_600,
-  DATA_VIZ_GREEN_700,
-  DATA_VIZ_GREEN_800,
-  DATA_VIZ_GREEN_900,
-  DATA_VIZ_GREEN_950,
-  DATA_VIZ_MAGENTA_50,
-  DATA_VIZ_MAGENTA_100,
-  DATA_VIZ_MAGENTA_200,
-  DATA_VIZ_MAGENTA_300,
-  DATA_VIZ_MAGENTA_400,
-  DATA_VIZ_MAGENTA_500,
-  DATA_VIZ_MAGENTA_600,
-  DATA_VIZ_MAGENTA_700,
-  DATA_VIZ_MAGENTA_800,
-  DATA_VIZ_MAGENTA_900,
-  DATA_VIZ_MAGENTA_950,
-  DATA_VIZ_ORANGE_50,
-  DATA_VIZ_ORANGE_100,
-  DATA_VIZ_ORANGE_200,
-  DATA_VIZ_ORANGE_300,
-  DATA_VIZ_ORANGE_400,
-  DATA_VIZ_ORANGE_500,
-  DATA_VIZ_ORANGE_600,
-  DATA_VIZ_ORANGE_700,
-  DATA_VIZ_ORANGE_800,
-  DATA_VIZ_ORANGE_950,
-  DATA_VIZ_ORANGE_900,
+  GL_COLOR_NEUTRAL_50,
+  GL_COLOR_NEUTRAL_100,
+  GL_COLOR_NEUTRAL_500,
+  GL_COLOR_NEUTRAL_900,
+  GL_COLOR_DATA_AQUA_50,
+  GL_COLOR_DATA_AQUA_100,
+  GL_COLOR_DATA_AQUA_200,
+  GL_COLOR_DATA_AQUA_300,
+  GL_COLOR_DATA_AQUA_400,
+  GL_COLOR_DATA_AQUA_500,
+  GL_COLOR_DATA_AQUA_600,
+  GL_COLOR_DATA_AQUA_700,
+  GL_COLOR_DATA_AQUA_800,
+  GL_COLOR_DATA_AQUA_900,
+  GL_COLOR_DATA_AQUA_950,
+  GL_COLOR_DATA_BLUE_50,
+  GL_COLOR_DATA_BLUE_100,
+  GL_COLOR_DATA_BLUE_200,
+  GL_COLOR_DATA_BLUE_300,
+  GL_COLOR_DATA_BLUE_400,
+  GL_COLOR_DATA_BLUE_500,
+  GL_COLOR_DATA_BLUE_600,
+  GL_COLOR_DATA_BLUE_700,
+  GL_COLOR_DATA_BLUE_800,
+  GL_COLOR_DATA_BLUE_900,
+  GL_COLOR_DATA_BLUE_950,
+  GL_COLOR_DATA_GREEN_50,
+  GL_COLOR_DATA_GREEN_100,
+  GL_COLOR_DATA_GREEN_200,
+  GL_COLOR_DATA_GREEN_300,
+  GL_COLOR_DATA_GREEN_400,
+  GL_COLOR_DATA_GREEN_500,
+  GL_COLOR_DATA_GREEN_600,
+  GL_COLOR_DATA_GREEN_700,
+  GL_COLOR_DATA_GREEN_800,
+  GL_COLOR_DATA_GREEN_900,
+  GL_COLOR_DATA_GREEN_950,
+  GL_COLOR_DATA_MAGENTA_50,
+  GL_COLOR_DATA_MAGENTA_100,
+  GL_COLOR_DATA_MAGENTA_200,
+  GL_COLOR_DATA_MAGENTA_300,
+  GL_COLOR_DATA_MAGENTA_400,
+  GL_COLOR_DATA_MAGENTA_500,
+  GL_COLOR_DATA_MAGENTA_600,
+  GL_COLOR_DATA_MAGENTA_700,
+  GL_COLOR_DATA_MAGENTA_800,
+  GL_COLOR_DATA_MAGENTA_900,
+  GL_COLOR_DATA_MAGENTA_950,
+  GL_COLOR_DATA_ORANGE_50,
+  GL_COLOR_DATA_ORANGE_100,
+  GL_COLOR_DATA_ORANGE_200,
+  GL_COLOR_DATA_ORANGE_300,
+  GL_COLOR_DATA_ORANGE_400,
+  GL_COLOR_DATA_ORANGE_500,
+  GL_COLOR_DATA_ORANGE_600,
+  GL_COLOR_DATA_ORANGE_700,
+  GL_COLOR_DATA_ORANGE_800,
+  GL_COLOR_DATA_ORANGE_950,
+  GL_COLOR_DATA_ORANGE_900,
 } from '../../tokens/build/js/tokens';
 import {
   scrollHandleSvgPath,
@@ -71,23 +66,22 @@ import {
   clearAllSvgPath,
   downloadSvgPath,
 } from '../svgs/svg_paths';
-import { hexToRgba } from '../utils';
 
 const GL_BORDER_RADIUS_BASE = '0.25rem';
 
 export const themeName = 'gitlab';
 
 export const heatmapHues = [
-  GRAY_100,
-  DATA_VIZ_BLUE_200,
-  DATA_VIZ_BLUE_400,
-  DATA_VIZ_BLUE_600,
-  DATA_VIZ_BLUE_800,
+  GL_COLOR_NEUTRAL_100,
+  GL_COLOR_DATA_BLUE_200,
+  GL_COLOR_DATA_BLUE_400,
+  GL_COLOR_DATA_BLUE_600,
+  GL_COLOR_DATA_BLUE_800,
 ];
 
-export const gaugeNeutralHues = [GRAY_900, GRAY_500];
-export const gaugeSafeHues = [DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_900];
-export const gaugeWarningHue = DATA_VIZ_ORANGE_500;
+export const gaugeNeutralHues = [GL_COLOR_NEUTRAL_900, GL_COLOR_NEUTRAL_500];
+export const gaugeSafeHues = [GL_COLOR_DATA_BLUE_500, GL_COLOR_DATA_BLUE_900];
+export const gaugeWarningHue = GL_COLOR_DATA_ORANGE_500;
 
 /**
  * The default palette is based on the Categorical data palette
@@ -96,71 +90,71 @@ export const gaugeWarningHue = DATA_VIZ_ORANGE_500;
  * More info: https://design.gitlab.com/data-visualization/color#categorical-data
  */
 export const colorPaletteDefault = [
-  DATA_VIZ_BLUE_500,
-  DATA_VIZ_ORANGE_600,
-  DATA_VIZ_AQUA_500,
-  DATA_VIZ_GREEN_600,
-  DATA_VIZ_MAGENTA_500,
-  DATA_VIZ_BLUE_700,
-  DATA_VIZ_ORANGE_800,
-  DATA_VIZ_AQUA_700,
-  DATA_VIZ_GREEN_800,
-  DATA_VIZ_MAGENTA_700,
-  DATA_VIZ_BLUE_900,
-  DATA_VIZ_ORANGE_950,
-  DATA_VIZ_AQUA_900,
-  DATA_VIZ_GREEN_950,
-  DATA_VIZ_MAGENTA_900,
-  DATA_VIZ_BLUE_600,
-  DATA_VIZ_ORANGE_700,
-  DATA_VIZ_AQUA_600,
-  DATA_VIZ_GREEN_700,
-  DATA_VIZ_MAGENTA_600,
-  DATA_VIZ_BLUE_800,
-  DATA_VIZ_ORANGE_900,
-  DATA_VIZ_AQUA_800,
-  DATA_VIZ_GREEN_900,
-  DATA_VIZ_MAGENTA_800,
-  DATA_VIZ_BLUE_950,
-  DATA_VIZ_ORANGE_500,
-  DATA_VIZ_AQUA_950,
-  DATA_VIZ_GREEN_500,
-  DATA_VIZ_MAGENTA_950,
+  GL_COLOR_DATA_BLUE_500,
+  GL_COLOR_DATA_ORANGE_600,
+  GL_COLOR_DATA_AQUA_500,
+  GL_COLOR_DATA_GREEN_600,
+  GL_COLOR_DATA_MAGENTA_500,
+  GL_COLOR_DATA_BLUE_700,
+  GL_COLOR_DATA_ORANGE_800,
+  GL_COLOR_DATA_AQUA_700,
+  GL_COLOR_DATA_GREEN_800,
+  GL_COLOR_DATA_MAGENTA_700,
+  GL_COLOR_DATA_BLUE_900,
+  GL_COLOR_DATA_ORANGE_950,
+  GL_COLOR_DATA_AQUA_900,
+  GL_COLOR_DATA_GREEN_950,
+  GL_COLOR_DATA_MAGENTA_900,
+  GL_COLOR_DATA_BLUE_600,
+  GL_COLOR_DATA_ORANGE_700,
+  GL_COLOR_DATA_AQUA_600,
+  GL_COLOR_DATA_GREEN_700,
+  GL_COLOR_DATA_MAGENTA_600,
+  GL_COLOR_DATA_BLUE_800,
+  GL_COLOR_DATA_ORANGE_900,
+  GL_COLOR_DATA_AQUA_800,
+  GL_COLOR_DATA_GREEN_900,
+  GL_COLOR_DATA_MAGENTA_800,
+  GL_COLOR_DATA_BLUE_950,
+  GL_COLOR_DATA_ORANGE_500,
+  GL_COLOR_DATA_AQUA_950,
+  GL_COLOR_DATA_GREEN_500,
+  GL_COLOR_DATA_MAGENTA_950,
 ];
 export const colorFromDefaultPalette = (index) =>
   colorPaletteDefault[index % colorPaletteDefault.length];
 
 export const colorPaletteDark = [
-  DATA_VIZ_BLUE_500,
-  DATA_VIZ_ORANGE_400,
-  DATA_VIZ_AQUA_500,
-  DATA_VIZ_GREEN_400,
-  DATA_VIZ_MAGENTA_500,
-  DATA_VIZ_BLUE_300,
-  DATA_VIZ_ORANGE_200,
-  DATA_VIZ_AQUA_300,
-  DATA_VIZ_GREEN_200,
-  DATA_VIZ_MAGENTA_300,
-  DATA_VIZ_BLUE_100,
-  DATA_VIZ_ORANGE_50,
-  DATA_VIZ_AQUA_100,
-  DATA_VIZ_GREEN_50,
-  DATA_VIZ_MAGENTA_100,
-  DATA_VIZ_BLUE_400,
-  DATA_VIZ_ORANGE_300,
-  DATA_VIZ_AQUA_400,
-  DATA_VIZ_GREEN_300,
-  DATA_VIZ_MAGENTA_400,
-  DATA_VIZ_BLUE_200,
-  DATA_VIZ_ORANGE_100,
-  DATA_VIZ_AQUA_200,
-  DATA_VIZ_GREEN_100,
-  DATA_VIZ_MAGENTA_200,
-  DATA_VIZ_BLUE_50,
-  DATA_VIZ_ORANGE_500,
-  DATA_VIZ_AQUA_50,
-  DATA_VIZ_GREEN_500,
-  DATA_VIZ_MAGENTA_50,
+  GL_COLOR_DATA_BLUE_500,
+  GL_COLOR_DATA_ORANGE_400,
+  GL_COLOR_DATA_AQUA_500,
+  GL_COLOR_DATA_GREEN_400,
+  GL_COLOR_DATA_MAGENTA_500,
+  GL_COLOR_DATA_BLUE_300,
+  GL_COLOR_DATA_ORANGE_200,
+  GL_COLOR_DATA_AQUA_300,
+  GL_COLOR_DATA_GREEN_200,
+  GL_COLOR_DATA_MAGENTA_300,
+  GL_COLOR_DATA_BLUE_100,
+  GL_COLOR_DATA_ORANGE_50,
+  GL_COLOR_DATA_AQUA_100,
+  GL_COLOR_DATA_GREEN_50,
+  GL_COLOR_DATA_MAGENTA_100,
+  GL_COLOR_DATA_BLUE_400,
+  GL_COLOR_DATA_ORANGE_300,
+  GL_COLOR_DATA_AQUA_400,
+  GL_COLOR_DATA_GREEN_300,
+  GL_COLOR_DATA_MAGENTA_400,
+  GL_COLOR_DATA_BLUE_200,
+  GL_COLOR_DATA_ORANGE_100,
+  GL_COLOR_DATA_AQUA_200,
+  GL_COLOR_DATA_GREEN_100,
+  GL_COLOR_DATA_MAGENTA_200,
+  GL_COLOR_DATA_BLUE_50,
+  GL_COLOR_DATA_ORANGE_500,
+  GL_COLOR_DATA_AQUA_50,
+  GL_COLOR_DATA_GREEN_500,
+  GL_COLOR_DATA_MAGENTA_50,
 ];
 
 export const colorFromDarkPalette = (index) => colorPaletteDark[index % colorPaletteDark.length];
@@ -169,7 +163,7 @@ const axes = {
   axisLabel: {
     margin: 8,
     show: true,
-    color: `var(--gray-600, ${GRAY_600})`,
+    color: 'var(--gl-chart-axis-text-color)',
     hideOverlap: true,
   },
   axisLine: {
@@ -178,7 +172,7 @@ const axes = {
   axisPointer: {
     lineStyle: {
       type: 'solid',
-      color: GRAY_600,
+      color: 'var(--gl-chart-axis-pointer-color)',
     },
     label: {
       show: false,
@@ -188,7 +182,7 @@ const axes = {
     show: true,
     alignWithLabel: true,
     lineStyle: {
-      color: GRAY_200,
+      color: 'var(--gl-chart-axis-line-color)',
     },
   },
   nameGap: 30,
@@ -197,14 +191,11 @@ const axes = {
   },
   splitLine: {
     lineStyle: {
-      color: [GRAY_200],
+      color: ['var(--gl-chart-axis-line-color)'],
     },
   },
   splitArea: {
     show: false,
-    areaStyle: {
-      color: [hexToRgba(GRAY_50, 0.3), hexToRgba(GRAY_300, 0.3)],
-    },
   },
 };
 
@@ -216,7 +207,7 @@ export const createTheme = (options = {}) => ({
   color: colorPaletteDefault,
   backgroundColor: 'transparent',
   textStyle: {
-    color: `var(--gl-text-color, ${GRAY_900})`,
+    color: 'var(--gl-text-color-default)',
   },
   markLine: {
     silent: true,
@@ -225,7 +216,7 @@ export const createTheme = (options = {}) => ({
       show: false,
     },
     lineStyle: {
-      color: RED_500,
+      color: 'var(--gl-chart-threshold-line-color)',
       width: 1,
       type: 'dashed',
     },
@@ -233,7 +224,7 @@ export const createTheme = (options = {}) => ({
   markArea: {
     silent: true,
     itemStyle: {
-      color: hexToRgba(RED_500, 0.1),
+      color: 'var(--gl-chart-threshold-area-color)',
     },
   },
   dataZoom: {
@@ -243,7 +234,7 @@ export const createTheme = (options = {}) => ({
     dataBackground: {
       lineStyle: {
         width: 2,
-        color: GRAY_200,
+        color: 'var(--gl-chart-axis-line-color)',
         opacity: 1,
       },
       // render unfilled zoom-graph if the series is a line chart without area styles
@@ -251,20 +242,25 @@ export const createTheme = (options = {}) => ({
       areaStyle: isLineChartWithoutArea(options)
         ? {} // Use empty object instead of null, see https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2185#note_707711029 for more context
         : {
-            color: GRAY_50,
+            color: 'var(--gl-background-color-strong)',
             opacity: 1,
           },
     },
-    fillerColor: hexToRgba(GRAY_200, 0.23),
+    fillerColor: 'var(--gl-chart-zoom-filler-color)',
     handleIcon: scrollHandleSvgPath,
+    emphasis: {
+      handleStyle: {
+        color: 'var(--gl-chart-zoom-handle-color)',
+      },
+    },
     handleStyle: {
       borderColor: 'transparent',
-      color: GRAY_500,
+      color: 'var(--gl-chart-zoom-handle-color)',
     },
     handleSize: '50%',
     labelFormatter: () => null,
     textStyle: {
-      color: GRAY_600,
+      color: 'var(--gl-chart-axis-text-color)',
     },
   },
   toolbox: {
@@ -274,14 +270,15 @@ export const createTheme = (options = {}) => ({
     emphasis: {
       iconStyle: {
         borderWidth: 0,
-        color: GRAY_900,
-        textBackgroundColor: WHITE,
+        color: 'var(--gl-icon-color-default)',
+        textFill: 'var(--gl-feedback-strong-text-color)',
+        textBackgroundColor: 'var(--gl-feedback-strong-background-color)',
         textBorderRadius: GL_BORDER_RADIUS_BASE,
         textPadding: [8, 12],
       },
     },
     iconStyle: {
-      color: GRAY_500,
+      color: 'var(--gl-icon-color-default)',
       borderWidth: 0,
     },
     itemGap: 8,
@@ -311,12 +308,12 @@ export const createTheme = (options = {}) => ({
     label: {
       normal: {
         textStyle: {
-          color: GRAY_50,
+          color: GL_COLOR_NEUTRAL_50,
         },
       },
       emphasis: {
         textStyle: {
-          color: GRAY_50,
+          color: GL_COLOR_NEUTRAL_50,
         },
       },
     },