@gitlab/ui 64.16.0 → 64.18.0

package/src/utils/charts/config.js

@@ -1,6 +1,6 @@
 import castArray from 'lodash/castArray';
 import merge from 'lodash/merge';
-import { blue500 } from '../../../scss_to_js/scss_variables'; // eslint-disable-line import/no-unresolved
+import { BLUE_500 } from '../../../dist/tokens/js/tokens';
 import { GlBreakpointInstance } from '../breakpoints';
 import { columnOptions } from '../constants';
 import { areDatesEqual } from '../datetime_utility';
@@ -335,14 +335,14 @@ export const getAnnotationsConfig = (annotations) => {
   return {
     markLine: {
       lineStyle: {
-        color: blue500,
+        color: BLUE_500,
       },
       silent: true,
       data: lines,
     },
     markPoint: {
       itemStyle: {
-        color: blue500,
+        color: BLUE_500,
       },
       symbol: arrowSymbol,
       symbolSize: '8',

package/src/utils/charts/mock_data.js

@@ -1,4 +1,4 @@
-import { blue500 } from '../../../scss_to_js/scss_variables'; // eslint-disable-line import/no-unresolved
+import { BLUE_500 } from '../../../dist/tokens/js/tokens';
 import { hexToRgba } from '../utils';
 import { colorFromDefaultPalette } from './theme';
 
@@ -74,7 +74,7 @@ export const mockAnnotationsSeries = {
       data: [],
       markLine: {
         lineStyle: {
-          color: blue500,
+          color: BLUE_500,
         },
         data: [
           { xAxis: '2018-01-25T01:00:00.000Z' },
@@ -87,7 +87,7 @@ export const mockAnnotationsSeries = {
         symbolSize: '8',
         symbolOffset: [0, ' 60%'],
         itemStyle: {
-          color: blue500,
+          color: BLUE_500,
         },
         data: [
           {

package/src/utils/charts/theme.js

@@ -1,87 +1,86 @@
+import { glBorderRadiusBase } from '../../../scss_to_js/scss_variables';
 import {
-  gray50,
-  gray100,
-  gray200,
-  gray300,
-  gray500,
-  gray600,
-  gray900,
-  red500,
-  whiteNormal,
-  dataVizAqua50,
-  dataVizAqua100,
-  dataVizAqua200,
-  dataVizAqua300,
-  dataVizAqua400,
-  dataVizAqua500,
-  dataVizAqua600,
-  dataVizAqua700,
-  dataVizAqua800,
-  dataVizAqua900,
-  dataVizAqua950,
-  dataVizBlue50,
-  dataVizBlue100,
-  dataVizBlue200,
-  dataVizBlue300,
-  dataVizBlue400,
-  dataVizBlue500,
-  dataVizBlue600,
-  dataVizBlue700,
-  dataVizBlue800,
-  dataVizBlue900,
-  dataVizBlue950,
-  dataVizGreen50,
-  dataVizGreen100,
-  dataVizGreen200,
-  dataVizGreen300,
-  dataVizGreen400,
-  dataVizGreen500,
-  dataVizGreen600,
-  dataVizGreen700,
-  dataVizGreen800,
-  dataVizGreen900,
-  dataVizGreen950,
-  dataVizMagenta50,
-  dataVizMagenta100,
-  dataVizMagenta200,
-  dataVizMagenta300,
-  dataVizMagenta400,
-  dataVizMagenta500,
-  dataVizMagenta600,
-  dataVizMagenta700,
-  dataVizMagenta800,
-  dataVizMagenta900,
-  dataVizMagenta950,
-  dataVizOrange50,
-  dataVizOrange100,
-  dataVizOrange200,
-  dataVizOrange300,
-  dataVizOrange400,
-  dataVizOrange500,
-  dataVizOrange600,
-  dataVizOrange700,
-  dataVizOrange800,
-  dataVizOrange950,
-  dataVizOrange900,
-  glBorderRadiusBase,
-  white,
-} from '../../../scss_to_js/scss_variables';
+  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,
+} from '../../../dist/tokens/js/tokens';
 import { scrollHandleSvgPath } from '../svgs/svg_paths';
 import { hexToRgba } from '../utils';
 
 export const themeName = 'gitlab';
 
 export const heatmapHues = [
-  gray100,
-  dataVizBlue200,
-  dataVizBlue400,
-  dataVizBlue600,
-  dataVizBlue800,
+  GRAY_100,
+  DATA_VIZ_BLUE_200,
+  DATA_VIZ_BLUE_400,
+  DATA_VIZ_BLUE_600,
+  DATA_VIZ_BLUE_800,
 ];
 
-export const gaugeNeutralHues = [gray900, gray500];
-export const gaugeSafeHues = [dataVizBlue500, dataVizBlue900];
-export const gaugeWarningHue = dataVizOrange500;
+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;
 
 /**
  * The default palette is based on the Categorical data palette
@@ -90,71 +89,71 @@ export const gaugeWarningHue = dataVizOrange500;
  * More info: https://design.gitlab.com/data-visualization/color#categorical-data
  */
 export const colorPaletteDefault = [
-  dataVizBlue500,
-  dataVizOrange600,
-  dataVizAqua500,
-  dataVizGreen600,
-  dataVizMagenta500,
-  dataVizBlue700,
-  dataVizOrange800,
-  dataVizAqua700,
-  dataVizGreen800,
-  dataVizMagenta700,
-  dataVizBlue900,
-  dataVizOrange950,
-  dataVizAqua900,
-  dataVizGreen950,
-  dataVizMagenta900,
-  dataVizBlue600,
-  dataVizOrange700,
-  dataVizAqua600,
-  dataVizGreen700,
-  dataVizMagenta600,
-  dataVizBlue800,
-  dataVizOrange900,
-  dataVizAqua800,
-  dataVizGreen900,
-  dataVizMagenta800,
-  dataVizBlue950,
-  dataVizOrange500,
-  dataVizAqua950,
-  dataVizGreen500,
-  dataVizMagenta950,
+  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,
 ];
 export const colorFromDefaultPalette = (index) =>
   colorPaletteDefault[index % colorPaletteDefault.length];
 
 export const colorPaletteDark = [
-  dataVizBlue500,
-  dataVizOrange400,
-  dataVizAqua500,
-  dataVizGreen400,
-  dataVizMagenta500,
-  dataVizBlue300,
-  dataVizOrange200,
-  dataVizAqua300,
-  dataVizGreen200,
-  dataVizMagenta300,
-  dataVizBlue100,
-  dataVizOrange50,
-  dataVizAqua100,
-  dataVizGreen50,
-  dataVizMagenta100,
-  dataVizBlue400,
-  dataVizOrange300,
-  dataVizAqua400,
-  dataVizGreen300,
-  dataVizMagenta400,
-  dataVizBlue200,
-  dataVizOrange100,
-  dataVizAqua200,
-  dataVizGreen100,
-  dataVizMagenta200,
-  dataVizBlue50,
-  dataVizOrange500,
-  dataVizAqua50,
-  dataVizGreen500,
-  dataVizMagenta50,
+  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,
 ];
 
 export const colorFromDarkPalette = (index) => colorPaletteDark[index % colorPaletteDark.length];
@@ -163,7 +162,7 @@ const axes = {
   axisLabel: {
     margin: 8,
     show: true,
-    color: gray600,
+    color: GRAY_600,
     hideOverlap: true,
   },
   axisLine: {
@@ -172,7 +171,7 @@ const axes = {
   axisPointer: {
     lineStyle: {
       type: 'solid',
-      color: gray600,
+      color: GRAY_600,
     },
     label: {
       show: false,
@@ -182,7 +181,7 @@ const axes = {
     show: true,
     alignWithLabel: true,
     lineStyle: {
-      color: gray200,
+      color: GRAY_200,
     },
   },
   nameGap: 30,
@@ -191,13 +190,13 @@ const axes = {
   },
   splitLine: {
     lineStyle: {
-      color: [gray200],
+      color: [GRAY_200],
     },
   },
   splitArea: {
     show: false,
     areaStyle: {
-      color: [hexToRgba(whiteNormal, 0.3), hexToRgba(gray300, 0.3)],
+      color: [hexToRgba(GRAY_50, 0.3), hexToRgba(GRAY_300, 0.3)],
     },
   },
 };
@@ -210,7 +209,7 @@ export const createTheme = (options = {}) => ({
   color: colorPaletteDefault,
   backgroundColor: 'transparent',
   textStyle: {
-    color: gray900,
+    color: GRAY_900,
   },
   markLine: {
     silent: true,
@@ -219,7 +218,7 @@ export const createTheme = (options = {}) => ({
       show: false,
     },
     lineStyle: {
-      color: red500,
+      color: RED_500,
       width: 1,
       type: 'dashed',
     },
@@ -227,7 +226,7 @@ export const createTheme = (options = {}) => ({
   markArea: {
     silent: true,
     itemStyle: {
-      color: hexToRgba(red500, 0.1),
+      color: hexToRgba(RED_500, 0.1),
     },
   },
   dataZoom: {
@@ -237,7 +236,7 @@ export const createTheme = (options = {}) => ({
     dataBackground: {
       lineStyle: {
         width: 2,
-        color: gray200,
+        color: GRAY_200,
         opacity: 1,
       },
       // render unfilled zoom-graph if the series is a line chart without area styles
@@ -245,20 +244,20 @@ 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: gray50,
+            color: GRAY_50,
             opacity: 1,
           },
     },
-    fillerColor: hexToRgba(gray200, 0.23),
+    fillerColor: hexToRgba(GRAY_200, 0.23),
     handleIcon: scrollHandleSvgPath,
     handleStyle: {
       borderColor: 'transparent',
-      color: gray500,
+      color: GRAY_500,
     },
     handleSize: '50%',
     labelFormatter: () => null,
     textStyle: {
-      color: gray600,
+      color: GRAY_600,
     },
   },
   toolbox: {
@@ -268,14 +267,14 @@ export const createTheme = (options = {}) => ({
     emphasis: {
       iconStyle: {
         borderWidth: 0,
-        color: gray900,
-        textBackgroundColor: white,
+        color: GRAY_900,
+        textBackgroundColor: WHITE,
         textBorderRadius: glBorderRadiusBase,
         textPadding: [8, 12],
       },
     },
     iconStyle: {
-      color: gray500,
+      color: GRAY_500,
       borderWidth: 0,
     },
     itemGap: 8,
@@ -299,12 +298,12 @@ export const createTheme = (options = {}) => ({
     label: {
       normal: {
         textStyle: {
-          color: whiteNormal,
+          color: GRAY_50,
         },
       },
       emphasis: {
         textStyle: {
-          color: whiteNormal,
+          color: GRAY_50,
         },
       },
     },