@gitlab/ui 111.0.0 → 111.1.0

package/dist/tokens/json/tokens.json

@@ -13350,6 +13350,177 @@
       }
     }
   },
+  "chart": {
+    "axis": {
+      "pointer": {
+        "color": {
+          "$value": "#626168",
+          "$type": "color",
+          "$description": "Used in charts for the color of the reference line and axis value under mouse pointer.",
+          "filePath": "src/tokens/contextual/chart.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{icon.color.subtle}",
+            "$type": "color",
+            "$description": "Used in charts for the color of the reference line and axis value under mouse pointer."
+          },
+          "name": "CHART_AXIS_POINTER_COLOR",
+          "attributes": {},
+          "path": [
+            "chart",
+            "axis",
+            "pointer",
+            "color"
+          ]
+        }
+      },
+      "line": {
+        "color": {
+          "$value": "#bfbfc3",
+          "$type": "color",
+          "$description": "Used in charts for axis line color.",
+          "filePath": "src/tokens/contextual/chart.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.neutral.200}",
+              "dark": "{color.neutral.700}"
+            },
+            "$type": "color",
+            "$description": "Used in charts for axis line color."
+          },
+          "name": "CHART_AXIS_LINE_COLOR",
+          "attributes": {},
+          "path": [
+            "chart",
+            "axis",
+            "line",
+            "color"
+          ]
+        }
+      },
+      "text": {
+        "color": {
+          "$value": "#626168",
+          "$type": "color",
+          "$description": "Used in charts for the text color of axis titles and labels.",
+          "filePath": "src/tokens/contextual/chart.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{text.color.subtle}",
+            "$type": "color",
+            "$description": "Used in charts for the text color of axis titles and labels."
+          },
+          "name": "CHART_AXIS_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "chart",
+            "axis",
+            "text",
+            "color"
+          ]
+        }
+      }
+    },
+    "threshold": {
+      "area": {
+        "color": {
+          "$value": "rgba(221,43,14,0.1)",
+          "$type": "color",
+          "$description": "Used in charts to delineate a threshold area in a chart.",
+          "filePath": "src/tokens/contextual/chart.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "rgba(221,43,14,0.1)",
+            "$type": "color",
+            "$description": "Used in charts to delineate a threshold area in a chart."
+          },
+          "name": "CHART_THRESHOLD_AREA_COLOR",
+          "attributes": {},
+          "path": [
+            "chart",
+            "threshold",
+            "area",
+            "color"
+          ]
+        }
+      },
+      "line": {
+        "color": {
+          "$value": "#dd2b0e",
+          "$type": "color",
+          "$description": "Used in charts to divide a threshold area in a chart from other data.",
+          "filePath": "src/tokens/contextual/chart.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.red.500}",
+              "dark": "{color.red.600}"
+            },
+            "$type": "color",
+            "$description": "Used in charts to divide a threshold area in a chart from other data."
+          },
+          "name": "CHART_THRESHOLD_LINE_COLOR",
+          "attributes": {},
+          "path": [
+            "chart",
+            "threshold",
+            "line",
+            "color"
+          ]
+        }
+      }
+    },
+    "zoom": {
+      "filler": {
+        "color": {
+          "$value": "rgba(05, 05, 06, 0.08)",
+          "$type": "color",
+          "$description": "Used in charts for the overlay color when zooming in on a specific area of data.",
+          "filePath": "src/tokens/contextual/chart.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.alpha.dark.8}",
+              "dark": "{color.alpha.light.16}"
+            },
+            "$type": "color",
+            "$description": "Used in charts for the overlay color when zooming in on a specific area of data."
+          },
+          "name": "CHART_ZOOM_FILLER_COLOR",
+          "attributes": {},
+          "path": [
+            "chart",
+            "zoom",
+            "filler",
+            "color"
+          ]
+        }
+      },
+      "handle": {
+        "color": {
+          "$value": "#626168",
+          "$type": "color",
+          "$description": "Used in charts for the handle color when zooming in on a specific area of data.",
+          "filePath": "src/tokens/contextual/chart.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{icon.color.subtle}",
+            "$type": "color",
+            "$description": "Used in charts for the handle color when zooming in on a specific area of data."
+          },
+          "name": "CHART_ZOOM_HANDLE_COLOR",
+          "attributes": {},
+          "path": [
+            "chart",
+            "zoom",
+            "handle",
+            "color"
+          ]
+        }
+      }
+    }
+  },
   "datepicker": {
     "background": {
       "color": {

package/dist/tokens/scss/_tokens.dark.scss

@@ -242,6 +242,7 @@ $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for ava
 $gl-avatar-fallback-background-color-green: #91d4a83d; // Green background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-orange: #e9be743d; // Orange background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-neutral: #bfbfc33d; // Neutral background for avatar fallback with no particular meaning.
+$gl-chart-threshold-area-color: rgba(221,43,14,0.1); // Used in charts to delineate a threshold area in a chart.
 $gl-illustration-stroke-color-default: #e3e3e8; // Default stroke color to define shape and provide essential detail.
 $gl-illustration-stroke-width-default: 0.09375rem; // Default stroke width to define shape and provide essential detail.
 $gl-illustration-fill-color-default: #423f4f; // Default fill color for an element where specific meaning or emphasis is not required.
@@ -748,6 +749,9 @@ $gl-button-selected-border-color-active: $gl-color-alpha-0; // Used for the bord
 $gl-button-disabled-foreground-color: $gl-color-neutral-400; // Used for the foreground of a disabled button.
 $gl-button-disabled-background-color: rgba(137, 136, 141, 0.16); // Used for the background of a disabled button.
 $gl-button-disabled-border-color: $gl-color-alpha-0; // Used for the border of a disabled button.
+$gl-chart-axis-line-color: $gl-color-neutral-700; // Used in charts for axis line color.
+$gl-chart-threshold-line-color: $gl-color-red-600; // Used in charts to divide a threshold area in a chart from other data.
+$gl-chart-zoom-filler-color: $gl-color-alpha-light-16; // Used in charts for the overlay color when zooming in on a specific area of data.
 $gl-datepicker-background-color: $gl-color-neutral-900; // Used for the background color of datepicker.
 $gl-dropdown-option-background-color-unselected-default: $gl-action-neutral-background-color-default; // Used for the background of an unselected dropdown option in the default state.
 $gl-dropdown-option-background-color-unselected-hover: $gl-action-neutral-background-color-hover; // Used for the background of an unselected dropdown option in the hover state.
@@ -951,6 +955,7 @@ $gl-button-selected-foreground-color-default: $gl-color-neutral-900; // Used for
 $gl-button-selected-background-color-hover: $gl-color-neutral-200; // Used for the background of a selected button in the hover state.
 $gl-button-selected-background-color-active: $gl-color-neutral-400; // Used for the background of a selected button in the active state.
 $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover; // Used for the border of a selected button in the focus state.
+$gl-chart-axis-text-color: $gl-text-color-subtle; // Used in charts for the text color of axis titles and labels.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
 $gl-dropdown-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
 $gl-dropdown-border-color: $gl-border-color-default; // Used for the border of a dropdown.
@@ -1025,6 +1030,8 @@ $gl-button-selected-foreground-color-hover: $gl-color-neutral-950; // Used for t
 $gl-button-selected-foreground-color-focus: $gl-color-neutral-950; // Used for the foreground of a selected button in the focus state.
 $gl-button-selected-foreground-color-active: $gl-color-neutral-950; // Used for the foreground of a selected button in the active state.
 $gl-button-selected-background-color-focus: $gl-color-neutral-200; // Used for the background of a selected button in the focus state.
+$gl-chart-axis-pointer-color: $gl-icon-color-subtle; // Used in charts for the color of the reference line and axis value under mouse pointer.
+$gl-chart-zoom-handle-color: $gl-icon-color-subtle; // Used in charts for the handle color when zooming in on a specific area of data.
 $gl-dropdown-option-text-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.
 $gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
 $gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.

package/dist/tokens/scss/_tokens.scss

@@ -242,6 +242,7 @@ $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for ava
 $gl-avatar-fallback-background-color-green: #91d4a83d; // Green background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-orange: #e9be743d; // Orange background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-neutral: #bfbfc33d; // Neutral background for avatar fallback with no particular meaning.
+$gl-chart-threshold-area-color: rgba(221,43,14,0.1); // Used in charts to delineate a threshold area in a chart.
 $gl-illustration-stroke-color-default: #171321; // Default stroke color to define shape and provide essential detail.
 $gl-illustration-stroke-width-default: 0.125rem; // Default stroke width to define shape and provide essential detail.
 $gl-illustration-fill-color-default: #fff; // Default fill color for an element where specific meaning or emphasis is not required.
@@ -748,6 +749,9 @@ $gl-button-selected-border-color-active: $gl-color-neutral-600; // Used for the
 $gl-button-disabled-foreground-color: $gl-color-neutral-500; // Used for the foreground of a disabled button.
 $gl-button-disabled-background-color: $gl-color-neutral-10; // Used for the background of a disabled button.
 $gl-button-disabled-border-color: $gl-color-neutral-100; // Used for the border of a disabled button.
+$gl-chart-axis-line-color: $gl-color-neutral-200; // Used in charts for axis line color.
+$gl-chart-threshold-line-color: $gl-color-red-500; // Used in charts to divide a threshold area in a chart from other data.
+$gl-chart-zoom-filler-color: $gl-color-alpha-dark-8; // Used in charts for the overlay color when zooming in on a specific area of data.
 $gl-datepicker-background-color: $gl-color-neutral-0; // Used for the background color of datepicker.
 $gl-dropdown-option-background-color-unselected-default: $gl-action-neutral-background-color-default; // Used for the background of an unselected dropdown option in the default state.
 $gl-dropdown-option-background-color-unselected-hover: $gl-action-neutral-background-color-hover; // Used for the background of an unselected dropdown option in the hover state.
@@ -951,6 +955,7 @@ $gl-button-selected-foreground-color-default: $gl-button-default-primary-foregro
 $gl-button-selected-background-color-hover: $gl-button-default-primary-background-color-hover; // Used for the background of a selected button in the hover state.
 $gl-button-selected-background-color-active: $gl-button-default-primary-background-color-active; // Used for the background of a selected button in the active state.
 $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover; // Used for the border of a selected button in the focus state.
+$gl-chart-axis-text-color: $gl-text-color-subtle; // Used in charts for the text color of axis titles and labels.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
 $gl-dropdown-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
 $gl-dropdown-border-color: $gl-border-color-strong; // Used for the border of a dropdown.
@@ -1025,6 +1030,8 @@ $gl-button-selected-foreground-color-hover: $gl-button-default-primary-foregroun
 $gl-button-selected-foreground-color-focus: $gl-button-default-primary-foreground-color-focus; // Used for the foreground of a selected button in the focus state.
 $gl-button-selected-foreground-color-active: $gl-button-default-primary-foreground-color-active; // Used for the foreground of a selected button in the active state.
 $gl-button-selected-background-color-focus: $gl-button-default-primary-background-color-focus; // Used for the background of a selected button in the focus state.
+$gl-chart-axis-pointer-color: $gl-icon-color-subtle; // Used in charts for the color of the reference line and axis value under mouse pointer.
+$gl-chart-zoom-handle-color: $gl-icon-color-subtle; // Used in charts for the handle color when zooming in on a specific area of data.
 $gl-dropdown-option-text-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.
 $gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
 $gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -624,6 +624,13 @@ $gl-button-selected-border-color-active: var(--gl-button-selected-border-color-a
 $gl-button-disabled-foreground-color: var(--gl-button-disabled-foreground-color);
 $gl-button-disabled-background-color: var(--gl-button-disabled-background-color);
 $gl-button-disabled-border-color: var(--gl-button-disabled-border-color);
+$gl-chart-axis-pointer-color: var(--gl-chart-axis-pointer-color);
+$gl-chart-axis-line-color: var(--gl-chart-axis-line-color);
+$gl-chart-axis-text-color: var(--gl-chart-axis-text-color);
+$gl-chart-threshold-area-color: var(--gl-chart-threshold-area-color);
+$gl-chart-threshold-line-color: var(--gl-chart-threshold-line-color);
+$gl-chart-zoom-filler-color: var(--gl-chart-zoom-filler-color);
+$gl-chart-zoom-handle-color: var(--gl-chart-zoom-handle-color);
 $gl-datepicker-background-color: var(--gl-datepicker-background-color);
 $gl-datepicker-date-text-color-selected: var(--gl-datepicker-date-text-color-selected);
 $gl-dropdown-background-color: var(--gl-dropdown-background-color);

package/dist/utils/charts/theme.js

@@ -1,13 +1,12 @@
-import { GRAY_600, GRAY_200, GRAY_50, GRAY_300, GRAY_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_800, GRAY_900, GRAY_500, DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_900, DATA_VIZ_ORANGE_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_ORANGE_950, DATA_VIZ_AQUA_900, DATA_VIZ_GREEN_950, DATA_VIZ_MAGENTA_900, DATA_VIZ_ORANGE_700, DATA_VIZ_AQUA_600, DATA_VIZ_GREEN_700, DATA_VIZ_MAGENTA_600, DATA_VIZ_ORANGE_900, DATA_VIZ_AQUA_800, DATA_VIZ_GREEN_900, DATA_VIZ_MAGENTA_800, DATA_VIZ_BLUE_950, DATA_VIZ_AQUA_950, DATA_VIZ_GREEN_500, DATA_VIZ_MAGENTA_950, DATA_VIZ_ORANGE_400, DATA_VIZ_GREEN_400, 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_ORANGE_300, DATA_VIZ_AQUA_400, DATA_VIZ_GREEN_300, DATA_VIZ_MAGENTA_400, DATA_VIZ_ORANGE_100, DATA_VIZ_AQUA_200, DATA_VIZ_GREEN_100, DATA_VIZ_MAGENTA_200, DATA_VIZ_BLUE_50, DATA_VIZ_AQUA_50, DATA_VIZ_MAGENTA_50, RED_500, WHITE } from '../../tokens/build/js/tokens';
+import { GL_COLOR_NEUTRAL_100, GL_COLOR_DATA_BLUE_200, GL_COLOR_DATA_BLUE_400, GL_COLOR_DATA_BLUE_600, GL_COLOR_DATA_BLUE_800, GL_COLOR_NEUTRAL_900, GL_COLOR_NEUTRAL_500, GL_COLOR_DATA_BLUE_500, GL_COLOR_DATA_BLUE_900, GL_COLOR_DATA_ORANGE_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_ORANGE_950, GL_COLOR_DATA_AQUA_900, GL_COLOR_DATA_GREEN_950, GL_COLOR_DATA_MAGENTA_900, GL_COLOR_DATA_ORANGE_700, GL_COLOR_DATA_AQUA_600, GL_COLOR_DATA_GREEN_700, GL_COLOR_DATA_MAGENTA_600, 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_AQUA_950, GL_COLOR_DATA_GREEN_500, GL_COLOR_DATA_MAGENTA_950, GL_COLOR_DATA_ORANGE_400, GL_COLOR_DATA_GREEN_400, 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_ORANGE_300, GL_COLOR_DATA_AQUA_400, GL_COLOR_DATA_GREEN_300, GL_COLOR_DATA_MAGENTA_400, 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_AQUA_50, GL_COLOR_DATA_MAGENTA_50, GL_COLOR_NEUTRAL_50 } from '../../tokens/build/js/tokens';
 import { scrollHandleSvgPath, marqueeSelectionSvgPath, redoSvgPath, clearAllSvgPath, downloadSvgPath } from '../svgs/svg_paths';
-import { hexToRgba } from '../utils';
 
 const GL_BORDER_RADIUS_BASE = '0.25rem';
 const themeName = 'gitlab';
-const heatmapHues = [GRAY_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_800];
-const gaugeNeutralHues = [GRAY_900, GRAY_500];
-const gaugeSafeHues = [DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_900];
-const gaugeWarningHue = DATA_VIZ_ORANGE_500;
+const heatmapHues = [GL_COLOR_NEUTRAL_100, GL_COLOR_DATA_BLUE_200, GL_COLOR_DATA_BLUE_400, GL_COLOR_DATA_BLUE_600, GL_COLOR_DATA_BLUE_800];
+const gaugeNeutralHues = [GL_COLOR_NEUTRAL_900, GL_COLOR_NEUTRAL_500];
+const gaugeSafeHues = [GL_COLOR_DATA_BLUE_500, GL_COLOR_DATA_BLUE_900];
+const gaugeWarningHue = GL_COLOR_DATA_ORANGE_500;
 
 /**
  * The default palette is based on the Categorical data palette
@@ -15,15 +14,15 @@ const gaugeWarningHue = DATA_VIZ_ORANGE_500;
  * differentiate qualitative data, and lightness to differentiate quantitive data.
  * More info: https://design.gitlab.com/data-visualization/color#categorical-data
  */
-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];
+const colorPaletteDefault = [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];
 const colorFromDefaultPalette = index => colorPaletteDefault[index % colorPaletteDefault.length];
-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];
+const colorPaletteDark = [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];
 const colorFromDarkPalette = index => colorPaletteDark[index % colorPaletteDark.length];
 const axes = {
   axisLabel: {
     margin: 8,
     show: true,
-    color: `var(--gray-600, ${GRAY_600})`,
+    color: 'var(--gl-chart-axis-text-color)',
     hideOverlap: true
   },
   axisLine: {
@@ -32,7 +31,7 @@ const axes = {
   axisPointer: {
     lineStyle: {
       type: 'solid',
-      color: GRAY_600
+      color: 'var(--gl-chart-axis-pointer-color)'
     },
     label: {
       show: false
@@ -42,7 +41,7 @@ const axes = {
     show: true,
     alignWithLabel: true,
     lineStyle: {
-      color: GRAY_200
+      color: 'var(--gl-chart-axis-line-color)'
     }
   },
   nameGap: 30,
@@ -51,14 +50,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)]
-    }
+    show: false
   }
 };
 const isLineChartWithoutArea = options => Array.isArray(options === null || options === void 0 ? void 0 : options.series) && options.series.some(series => series.type === 'line' && !series.areaStyle);
@@ -68,7 +64,7 @@ const createTheme = function () {
     color: colorPaletteDefault,
     backgroundColor: 'transparent',
     textStyle: {
-      color: `var(--gl-text-color, ${GRAY_900})`
+      color: 'var(--gl-text-color-default)'
     },
     markLine: {
       silent: true,
@@ -77,7 +73,7 @@ const createTheme = function () {
         show: false
       },
       lineStyle: {
-        color: RED_500,
+        color: 'var(--gl-chart-threshold-line-color)',
         width: 1,
         type: 'dashed'
       }
@@ -85,7 +81,7 @@ const createTheme = function () {
     markArea: {
       silent: true,
       itemStyle: {
-        color: hexToRgba(RED_500, 0.1)
+        color: 'var(--gl-chart-threshold-area-color)'
       }
     },
     dataZoom: {
@@ -95,27 +91,32 @@ const createTheme = function () {
       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
         // more details: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2364#note_666637306
         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: {
@@ -125,14 +126,15 @@ const createTheme = function () {
       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,
@@ -162,12 +164,12 @@ const createTheme = function () {
       label: {
         normal: {
           textStyle: {
-            color: GRAY_50
+            color: GL_COLOR_NEUTRAL_50
           }
         },
         emphasis: {
           textStyle: {
-            color: GRAY_50
+            color: GL_COLOR_NEUTRAL_50
           }
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "111.0.0",
+  "version": "111.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/charts/discrete_scatter/discrete_scatter.vue

@@ -1,6 +1,5 @@
 <script>
 import merge from 'lodash/merge';
-import { GRAY_200 } from '../../../tokens/build/js/tokens';
 import {
   defaultChartOptions,
   dataZoomAdjustments,
@@ -112,7 +111,7 @@ export default {
               alignWithLabel: true,
               show: true,
               lineStyle: {
-                color: GRAY_200,
+                color: 'var(--gl-chart-axis-line-color)',
               },
             },
             axisLabel: {

package/src/components/charts/heatmap/heatmap.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import merge from 'lodash/merge';
-import { WHITE, GRAY_100 } from '../../../tokens/build/js/tokens';
+import { GL_COLOR_NEUTRAL_0, GL_COLOR_NEUTRAL_100 } 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';
@@ -140,7 +140,7 @@ export default {
             right: '32px',
             show: true,
             borderWidth: 0,
-            backgroundColor: GRAY_100,
+            backgroundColor: GL_COLOR_NEUTRAL_100,
           },
           visualMap: {
             min,
@@ -164,7 +164,7 @@ export default {
               show: true,
               interval: 0,
               lineStyle: {
-                color: WHITE,
+                color: GL_COLOR_NEUTRAL_0,
                 width: 2,
               },
             },
@@ -191,7 +191,7 @@ export default {
               show: true,
               interval: 0,
               lineStyle: {
-                color: WHITE,
+                color: GL_COLOR_NEUTRAL_0,
                 width: 2,
               },
             },

package/src/components/charts/legend/legend.vue

@@ -1,7 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import * as echarts from 'echarts';
-import { GRAY_200 } from '../../../tokens/build/js/tokens';
 import { defaultFontSize } from '../../../utils/charts/config';
 import {
   LEGEND_LAYOUT_INLINE,
@@ -146,7 +145,7 @@ export default {
       this.chart.dispatchAction({ type: 'downplay', seriesName: name });
     },
     getColor(color, key) {
-      return this.disabledSeries[key] ? GRAY_200 : color;
+      return this.disabledSeries[key] ? 'var(--gl-chart-axis-line-color)' : color;
     },
     suppressLastActiveSeriesLabelToggle({ selected }) {
       const selectedSeriesLabels = Object.entries(selected).filter(([, isSelected]) =>

package/src/components/charts/line/line.vue

@@ -19,7 +19,6 @@
  */
 
 import merge from 'lodash/merge';
-import { GRAY_200 } from '../../../tokens/build/js/tokens';
 import {
   defaultChartOptions,
   grid,
@@ -193,7 +192,7 @@ export default {
             alignWithLabel: true,
             show: true,
             lineStyle: {
-              color: GRAY_200,
+              color: 'var(--gl-chart-axis-line-color)',
             },
           },
         },

package/src/tokens/build/css/tokens.css

@@ -244,6 +244,7 @@
   --gl-avatar-fallback-background-color-green: #91d4a83d; /* Green background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-orange: #e9be743d; /* Orange background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-neutral: #bfbfc33d; /* Neutral background for avatar fallback with no particular meaning. */
+  --gl-chart-threshold-area-color: rgba(221,43,14,0.1); /* Used in charts to delineate a threshold area in a chart. */
   --gl-illustration-stroke-color-default: #171321; /* Default stroke color to define shape and provide essential detail. */
   --gl-illustration-stroke-width-default: 0.125rem; /* Default stroke width to define shape and provide essential detail. */
   --gl-illustration-fill-color-default: #fff; /* Default fill color for an element where specific meaning or emphasis is not required. */
@@ -750,6 +751,9 @@
   --gl-button-disabled-foreground-color: var(--gl-color-neutral-500); /* Used for the foreground of a disabled button. */
   --gl-button-disabled-background-color: var(--gl-color-neutral-10); /* Used for the background of a disabled button. */
   --gl-button-disabled-border-color: var(--gl-color-neutral-100); /* Used for the border of a disabled button. */
+  --gl-chart-axis-line-color: var(--gl-color-neutral-200); /* Used in charts for axis line color. */
+  --gl-chart-threshold-line-color: var(--gl-color-red-500); /* Used in charts to divide a threshold area in a chart from other data. */
+  --gl-chart-zoom-filler-color: var(--gl-color-alpha-dark-8); /* Used in charts for the overlay color when zooming in on a specific area of data. */
   --gl-datepicker-background-color: var(--gl-color-neutral-0); /* Used for the background color of datepicker. */
   --gl-dropdown-option-background-color-unselected-default: var(--gl-action-neutral-background-color-default); /* Used for the background of an unselected dropdown option in the default state. */
   --gl-dropdown-option-background-color-unselected-hover: var(--gl-action-neutral-background-color-hover); /* Used for the background of an unselected dropdown option in the hover state. */
@@ -953,6 +957,7 @@
   --gl-button-selected-background-color-hover: var(--gl-button-default-primary-background-color-hover); /* Used for the background of a selected button in the hover state. */
   --gl-button-selected-background-color-active: var(--gl-button-default-primary-background-color-active); /* Used for the background of a selected button in the active state. */
   --gl-button-selected-border-color-focus: var(--gl-button-selected-border-color-hover); /* Used for the border of a selected button in the focus state. */
+  --gl-chart-axis-text-color: var(--gl-text-color-subtle); /* Used in charts for the text color of axis titles and labels. */
   --gl-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /* Used for the datepicker date text color state indicators. */
   --gl-dropdown-background-color: var(--gl-background-color-overlap); /* Used for the background of a dropdown. */
   --gl-dropdown-border-color: var(--gl-border-color-strong); /* Used for the border of a dropdown. */
@@ -1027,6 +1032,8 @@
   --gl-button-selected-foreground-color-focus: var(--gl-button-default-primary-foreground-color-focus); /* Used for the foreground of a selected button in the focus state. */
   --gl-button-selected-foreground-color-active: var(--gl-button-default-primary-foreground-color-active); /* Used for the foreground of a selected button in the active state. */
   --gl-button-selected-background-color-focus: var(--gl-button-default-primary-background-color-focus); /* Used for the background of a selected button in the focus state. */
+  --gl-chart-axis-pointer-color: var(--gl-icon-color-subtle); /* Used in charts for the color of the reference line and axis value under mouse pointer. */
+  --gl-chart-zoom-handle-color: var(--gl-icon-color-subtle); /* Used in charts for the handle color when zooming in on a specific area of data. */
   --gl-dropdown-option-text-color-hover: var(--gl-action-neutral-foreground-color-hover); /* Used for the text of a dropdown option in the hover state. */
   --gl-dropdown-option-text-color-focus: var(--gl-action-neutral-foreground-color-focus); /* Used for the text of a dropdown option in the focus state. */
   --gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /* Used for the text of a dropdown option in the active state. */

package/src/tokens/build/css/tokens.dark.css

@@ -244,6 +244,7 @@
   --gl-avatar-fallback-background-color-green: #91d4a83d; /* Green background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-orange: #e9be743d; /* Orange background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-neutral: #bfbfc33d; /* Neutral background for avatar fallback with no particular meaning. */
+  --gl-chart-threshold-area-color: rgba(221,43,14,0.1); /* Used in charts to delineate a threshold area in a chart. */
   --gl-illustration-stroke-color-default: #e3e3e8; /* Default stroke color to define shape and provide essential detail. */
   --gl-illustration-stroke-width-default: 0.09375rem; /* Default stroke width to define shape and provide essential detail. */
   --gl-illustration-fill-color-default: #423f4f; /* Default fill color for an element where specific meaning or emphasis is not required. */
@@ -750,6 +751,9 @@
   --gl-button-disabled-foreground-color: var(--gl-color-neutral-400); /* Used for the foreground of a disabled button. */
   --gl-button-disabled-background-color: rgba(137, 136, 141, 0.16); /* Used for the background of a disabled button. */
   --gl-button-disabled-border-color: var(--gl-color-alpha-0); /* Used for the border of a disabled button. */
+  --gl-chart-axis-line-color: var(--gl-color-neutral-700); /* Used in charts for axis line color. */
+  --gl-chart-threshold-line-color: var(--gl-color-red-600); /* Used in charts to divide a threshold area in a chart from other data. */
+  --gl-chart-zoom-filler-color: var(--gl-color-alpha-light-16); /* Used in charts for the overlay color when zooming in on a specific area of data. */
   --gl-datepicker-background-color: var(--gl-color-neutral-900); /* Used for the background color of datepicker. */
   --gl-dropdown-option-background-color-unselected-default: var(--gl-action-neutral-background-color-default); /* Used for the background of an unselected dropdown option in the default state. */
   --gl-dropdown-option-background-color-unselected-hover: var(--gl-action-neutral-background-color-hover); /* Used for the background of an unselected dropdown option in the hover state. */
@@ -953,6 +957,7 @@
   --gl-button-selected-background-color-hover: var(--gl-color-neutral-200); /* Used for the background of a selected button in the hover state. */
   --gl-button-selected-background-color-active: var(--gl-color-neutral-400); /* Used for the background of a selected button in the active state. */
   --gl-button-selected-border-color-focus: var(--gl-button-selected-border-color-hover); /* Used for the border of a selected button in the focus state. */
+  --gl-chart-axis-text-color: var(--gl-text-color-subtle); /* Used in charts for the text color of axis titles and labels. */
   --gl-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /* Used for the datepicker date text color state indicators. */
   --gl-dropdown-background-color: var(--gl-background-color-overlap); /* Used for the background of a dropdown. */
   --gl-dropdown-border-color: var(--gl-border-color-default); /* Used for the border of a dropdown. */
@@ -1027,6 +1032,8 @@
   --gl-button-selected-foreground-color-focus: var(--gl-color-neutral-950); /* Used for the foreground of a selected button in the focus state. */
   --gl-button-selected-foreground-color-active: var(--gl-color-neutral-950); /* Used for the foreground of a selected button in the active state. */
   --gl-button-selected-background-color-focus: var(--gl-color-neutral-200); /* Used for the background of a selected button in the focus state. */
+  --gl-chart-axis-pointer-color: var(--gl-icon-color-subtle); /* Used in charts for the color of the reference line and axis value under mouse pointer. */
+  --gl-chart-zoom-handle-color: var(--gl-icon-color-subtle); /* Used in charts for the handle color when zooming in on a specific area of data. */
   --gl-dropdown-option-text-color-hover: var(--gl-action-neutral-foreground-color-hover); /* Used for the text of a dropdown option in the hover state. */
   --gl-dropdown-option-text-color-focus: var(--gl-action-neutral-foreground-color-focus); /* Used for the text of a dropdown option in the focus state. */
   --gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /* Used for the text of a dropdown option in the active state. */

package/src/tokens/build/js/tokens.dark.js

@@ -624,6 +624,13 @@ export const GL_BUTTON_SELECTED_BORDER_COLOR_ACTIVE = 'transparent';
 export const GL_BUTTON_DISABLED_FOREGROUND_COLOR = '#89888d';
 export const GL_BUTTON_DISABLED_BACKGROUND_COLOR = 'rgba(137, 136, 141, 0.16)';
 export const GL_BUTTON_DISABLED_BORDER_COLOR = 'transparent';
+export const GL_CHART_AXIS_POINTER_COLOR = '#bfbfc3';
+export const GL_CHART_AXIS_LINE_COLOR = '#4c4b51';
+export const GL_CHART_AXIS_TEXT_COLOR = '#bfbfc3';
+export const GL_CHART_THRESHOLD_AREA_COLOR = 'rgba(221,43,14,0.1)';
+export const GL_CHART_THRESHOLD_LINE_COLOR = '#c91c00';
+export const GL_CHART_ZOOM_FILLER_COLOR = 'rgba(255, 255, 255, 0.16)';
+export const GL_CHART_ZOOM_HANDLE_COLOR = '#bfbfc3';
 export const GL_DATEPICKER_BACKGROUND_COLOR = '#28272d';
 export const GL_DATEPICKER_DATE_TEXT_COLOR_SELECTED = '#18171d';
 export const GL_DROPDOWN_BACKGROUND_COLOR = '#28272d';