@gitlab/ui 111.0.0 → 111.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [111.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v111.0.0...v111.1.0) (2025-03-13)
+
+
+### Features
+
+* **DesignTokens:** define chart contextual design tokens ([57eafc4](https://gitlab.com/gitlab-org/gitlab-ui/commit/57eafc435b47fdec3a57ed8f2e0a6be4ac585ca3))
+
 # [111.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v110.1.0...v111.0.0) (2025-03-12)
 
 

package/dist/components/charts/discrete_scatter/discrete_scatter.js

@@ -1,5 +1,4 @@
 import merge from 'lodash/merge';
-import { GRAY_200 } from '../../../tokens/build/js/tokens';
 import { defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
@@ -98,7 +97,7 @@ var script = {
             alignWithLabel: true,
             show: true,
             lineStyle: {
-              color: GRAY_200
+              color: 'var(--gl-chart-axis-line-color)'
             }
           },
           axisLabel: {

package/dist/components/charts/heatmap/heatmap.js

@@ -1,5 +1,5 @@
 import merge from 'lodash/merge';
-import { GRAY_100, WHITE } from '../../../tokens/build/js/tokens';
+import { GL_COLOR_NEUTRAL_100, GL_COLOR_NEUTRAL_0 } from '../../../tokens/build/js/tokens';
 import { getTooltipTitle, getTooltipContent } from '../../../utils/charts/config';
 import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
@@ -139,7 +139,7 @@ var script = {
           right: '32px',
           show: true,
           borderWidth: 0,
-          backgroundColor: GRAY_100
+          backgroundColor: GL_COLOR_NEUTRAL_100
         },
         visualMap: {
           min,
@@ -163,7 +163,7 @@ var script = {
             show: true,
             interval: 0,
             lineStyle: {
-              color: WHITE,
+              color: GL_COLOR_NEUTRAL_0,
               width: 2
             }
           },
@@ -190,7 +190,7 @@ var script = {
             show: true,
             interval: 0,
             lineStyle: {
-              color: WHITE,
+              color: GL_COLOR_NEUTRAL_0,
               width: 2
             }
           }

package/dist/components/charts/legend/legend.js

@@ -1,5 +1,4 @@
 import * as echarts from 'echarts';
-import { GRAY_200 } from '../../../tokens/build/js/tokens';
 import { defaultFontSize } from '../../../utils/charts/config';
 import { LEGEND_AVERAGE_TEXT, LEGEND_CURRENT_TEXT, LEGEND_MIN_TEXT, LEGEND_MAX_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '../../../utils/charts/constants';
 import { engineeringNotation, average } from '../../../utils/number_utils';
@@ -155,7 +154,7 @@ var script = {
       });
     },
     getColor(color, key) {
-      return this.disabledSeries[key] ? GRAY_200 : color;
+      return this.disabledSeries[key] ? 'var(--gl-chart-axis-line-color)' : color;
     },
     suppressLastActiveSeriesLabelToggle(_ref2) {
       let {

package/dist/components/charts/line/line.js

@@ -1,5 +1,4 @@
 import merge from 'lodash/merge';
-import { GRAY_200 } from '../../../tokens/build/js/tokens';
 import { symbolSize, lineStyle, getThresholdConfig, generateAnnotationSeries, defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions, mergeAnnotationAxisToOptions, grid } from '../../../utils/charts/config';
 import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
@@ -153,7 +152,7 @@ var script = {
             alignWithLabel: true,
             show: true,
             lineStyle: {
-              color: GRAY_200
+              color: 'var(--gl-chart-axis-line-color)'
             }
           }
         },