@gitlab/ui 110.1.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/dist/utils/constants.js

@@ -1,3 +1,4 @@
+import Vue from 'vue';
 import { POSITION } from '../components/utilities/truncate/constants';
 
 const COMMA = ',';
@@ -316,5 +317,6 @@ const loadingIconVariants = {
   spinner: 'spinner',
   dots: 'dots'
 };
+const isVue3 = Boolean(Vue.Fragment);
 
-export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, animatedIconVariantOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, breadCrumbSizeOptions, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownItemVariantOptions, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, iconSizeOptions, iconVariantOptions, keyboard, labelColorOptions, linkVariantOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, progressBarVariantOptions, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, viewModeOptions };
+export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, animatedIconVariantOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, breadCrumbSizeOptions, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownItemVariantOptions, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, iconSizeOptions, iconVariantOptions, isVue3, keyboard, labelColorOptions, linkVariantOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, progressBarVariantOptions, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, viewModeOptions };

package/dist/utils/is_slot_empty.js

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { isVue3 } from './constants';
 
 // Fragment will be available only in Vue.js 3
 const {
@@ -30,7 +31,6 @@ function isVnodeEmpty(vnode) {
 }
 function isSlotEmpty(vueInstance, slot, slotArgs) {
   var _vueInstance$$scopedS, _vueInstance$$scopedS2;
-  const isVue3 = Boolean(Fragment);
   const slotContent = isVue3 ?
   // we need to check both $slots and $scopedSlots due to https://github.com/vuejs/core/issues/8869
   // additionally, in @vue/compat $slot might be a function instead of array of vnodes (sigh)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "110.1.0",
+  "version": "111.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -36,9 +36,8 @@
     "build-tokens": "make tokens",
     "build-migration-script": "esbuild --bundle --platform=node --target=esnext --outfile=bin/migrate_custom_utils_to_tw.bundled.mjs --format=esm --banner:js=\"import { createRequire as __gl__createRequire } from 'node:module'; const require = __gl__createRequire(import.meta.url);\" bin/migrate_custom_utils_to_tw.mjs",
     "clean": "rm -r dist storybook",
-    "cy:a11y": "cypress run --browser chrome --env grepTags=@a11y",
-    "cy:edge": "cypress run --browser edge --env grepTags=-@a11y+-@storybook",
-    "cy:run": "cypress run --browser firefox --env grepTags=-@a11y+-@storybook",
+    "cy:edge": "cypress run --browser edge --env grepTags=-@storybook",
+    "cy:run": "cypress run --browser firefox --env grepTags=-@storybook",
     "start": "yarn storybook",
     "storybook": "yarn storybook:prepare && storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port ${STORYBOOK_PORT:-9001} -c .storybook",
     "storybook-vue3": "yarn storybook:prepare && VUE_VERSION=3 storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port ${STORYBOOK_PORT:-9001} -c .storybook",
@@ -49,7 +48,7 @@
     "storybook:run": "npx http-server -bgs -p ${STORYBOOK_PORT:-9001} ./storybook",
     "pretest:unit": "yarn build-tokens",
     "test": "run-s test:unit test:visual",
-    "test:integration": "yarn run test:integration:server 'yarn cy:run && yarn cy:edge && yarn cy:a11y'",
+    "test:integration": "yarn run test:integration:server 'yarn cy:run && yarn cy:edge'",
     "test:integration:server": "NODE_ENV=test start-test storybook:run http-get://${STORYBOOK_HOST:-localhost}:${STORYBOOK_PORT:-9001}/iframe.html",
     "test:unit": "NODE_ENV=test jest",
     "test:unit:watch": "yarn test:unit --watch",
@@ -140,12 +139,10 @@
     "acorn": "^8.11.3",
     "acorn-walk": "^8.3.2",
     "autoprefixer": "^9.7.6",
-    "axe-core": "^4.2.3",
     "axe-playwright": "^2.1.0",
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
     "cypress": "14.1.0",
-    "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.0.0",
@@ -173,8 +170,8 @@
     "npm-run-all": "^4.1.5",
     "patch-package": "^8.0.0",
     "pikaday": "^1.8.0",
-    "playwright": "^1.50.1",
-    "playwright-core": "^1.50.1",
+    "playwright": "^1.51.0",
+    "playwright-core": "^1.51.0",
     "postcss": "8.4.28",
     "postcss-loader": "^7.0.2",
     "postcss-scss": "4.0.4",
@@ -208,11 +205,6 @@
     "yargs": "^17.3.1",
     "yarn-deduplicate": "^6.0.2"
   },
-  "overrides": {
-    "cypress-axe": {
-      "axe-core": "4.2.3"
-    }
-  },
   "release": {
     "branches": [
       "main"

package/src/components/base/link/link.md

@@ -18,6 +18,115 @@
 - **Mention**: Indicates when a user is "@" mentioned in the content. The username links to the
   user's profile. A mention link can be within body or meta content.
 
+Use `<gl-link>` to render links. It can render standard `<a>` elements,
+and also Vue Router and Nuxt links.
+
+```html
+<gl-link href="#foo">Link</gl-link>
+```
+
+## Link type
+
+By specifying a value in the `href` prop, a standard link (`<a>`) element will be rendered. To
+generate a `<router-link>` instead, specify the route location via the `to` prop.
+
+### Router links
+
+Router links support various additional props.
+
+If your app is running under [Nuxt.js](https://nuxtjs.org), the
+[`<nuxt-link>`](https://nuxtjs.org/api/components-nuxt-link) component will be used instead of
+`<router-link>`. The `<nuxt-link>` component supports all the same features as `<router-link>` (as
+it is a wrapper component for `<router-link>`) and more.
+
+#### `to`
+
+- type: `string | Location`
+- required to generate a `<router-link>`
+
+Denotes the target route of the link. When clicked, the value of the `to` prop will be passed to
+`router.push()` internally, so the value can be either a string or a location descriptor object.
+
+```html
+<!-- Literal string -->
+<gl-link to="home">Home</gl-link>
+<!-- Renders to -->
+<a href="home">Home</a>
+
+<!-- Omitting `v-bind` is fine, just as binding any other prop -->
+<gl-link :to="'home'">Home</gl-link>
+
+<!-- Same as above -->
+<gl-link :to="{ path: 'home' }">Home</gl-link>
+
+<!-- Named route -->
+<gl-link :to="{ name: 'user', params: { userId: 123 } }">User</gl-link>
+
+<!-- With query, resulting in `/register?plan=private` -->
+<gl-link :to="{ path: 'register', query: { plan: 'private' } }">Register</gl-link>
+
+<!-- Render a non-router link by omitting `to` and specifying an `href` -->
+<gl-link href="/home">Home</gl-link>
+```
+
+#### `replace`
+
+- type: `boolean`
+- default: `false`
+
+Setting `replace` prop will call `router.replace()` instead of `router.push()` when clicked, so the
+navigation will not leave a history record.
+
+```html
+<gl-link :to="{ path: '/abc'}" replace></gl-link>
+```
+
+#### `active-class`
+
+- type: `string`
+- default: `'router-link-active'` (`'nuxt-link-active'` when using Nuxt.js)
+
+Configure the active CSS class applied when the link is active. Note the default value can also be
+configured globally via the `linkActiveClass`
+[router constructor option](https://router.vuejs.org/api/#linkactiveclass).
+
+With components that support router links (have a `to` prop), you will want to set this to the class
+`'active'` (or a space separated string that includes `'active'`) to apply Bootstrap's active
+styling on the component when the current route matches the `to` prop.
+
+#### `exact-active-class`
+
+- type: `string`
+- default: `'router-link-exact-active'` (`'nuxt-link-exact-active'` when using Nuxt.js)
+- availability: Vue Router 2.5.0+
+
+Configure the active CSS class applied when the link is active with exact match. Note the default
+value can also be configured globally via the `linkExactActiveClass`
+[router constructor option](https://router.vuejs.org/api/#linkexactactiveclass).
+
+With components that support router links (have a `to` prop), you will want to set this to the class
+`'active'` (or a space separated string that includes `'active'`) to apply Bootstrap's active
+styling on the component when the current route matches the `to` prop.
+
+## Links with `href="#"`
+
+Typically `<a href="#">` will cause the document to scroll to the top of page when clicked.
+`<gl-link>` addresses this by preventing the default action (scroll to top) when `href` is set to
+`#`.
+
+If you need scroll to top behaviour, use a standard `<a href="#">...</a>` tag.
+
+## Link disabled state
+
+Disable link functionality by setting the `disabled` prop to true.
+
+```html
+<gl-link href="#foo" disabled>Disabled Link</gl-link>
+```
+
+Disabling a link handles stopping event propagation, preventing the default action from occurring,
+and removing the link from the document tab sequence (`tabindex="-1"`).
+
 ## Security
 
 This component implements a few security measures to make it as safe as possible by default.