@gitlab/ui 111.0.0 → 111.1.1

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/is_slot_empty.js

@@ -1,5 +1,4 @@
 import Vue from 'vue';
-import { isVue3 } from './constants';
 
 // Fragment will be available only in Vue.js 3
 const {
@@ -7,9 +6,6 @@ const {
   Comment,
   Text
 } = Vue;
-function callIfNeeded(fnOrResult, args) {
-  return fnOrResult instanceof Function ? fnOrResult(args) : fnOrResult;
-}
 function isVnodeEmpty(vnode) {
   if (!vnode || Comment && vnode.type === Comment) {
     return true;
@@ -31,10 +27,7 @@ function isVnodeEmpty(vnode) {
 }
 function isSlotEmpty(vueInstance, slot, slotArgs) {
   var _vueInstance$$scopedS, _vueInstance$$scopedS2;
-  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)
-  callIfNeeded(vueInstance.$slots[slot] || vueInstance.$scopedSlots[slot], slotArgs) : (_vueInstance$$scopedS = (_vueInstance$$scopedS2 = vueInstance.$scopedSlots)[slot]) === null || _vueInstance$$scopedS === void 0 ? void 0 : _vueInstance$$scopedS.call(_vueInstance$$scopedS2, slotArgs);
+  const slotContent = (_vueInstance$$scopedS = (_vueInstance$$scopedS2 = vueInstance.$scopedSlots)[slot]) === null || _vueInstance$$scopedS === void 0 ? void 0 : _vueInstance$$scopedS.call(_vueInstance$$scopedS2, slotArgs);
 
   // eslint-disable-next-line unicorn/no-array-callback-reference
   return isVnodeEmpty(slotContent);

package/package.json

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

package/src/components/base/token_selector/token_container.vue

@@ -131,11 +131,12 @@ export default {
   <div class="gl-flex gl-w-full gl-flex-nowrap gl-items-start">
     <div
       ref="tokenContainer"
-      class="-gl-mx-1 -gl-my-1 gl-flex gl-w-full gl-flex-wrap gl-items-center"
+      class="-gl-mx-1 -gl-my-1 gl-flex gl-w-auto gl-list-none gl-flex-wrap gl-items-center gl-p-0"
       role="listbox"
       aria-multiselectable="false"
       aria-orientation="horizontal"
       :aria-invalid="state === false && 'true'"
+      aria-label="token list"
       @keydown.left="handleLeftArrow"
       @keydown.right="handleRightArrow"
       @keydown.home="handleHome"
@@ -168,8 +169,8 @@ export default {
           </slot>
         </gl-token>
       </div>
-      <slot name="text-input"></slot>
     </div>
+    <slot name="text-input"></slot>
     <div v-if="showClearAllButton" class="gl-ml-3 gl-p-1">
       <gl-button
         size="small"

package/src/components/base/token_selector/token_selector.scss

@@ -16,6 +16,7 @@
 
 .gl-token-selector-token-container:focus .gl-token {
   background-color: var(--gl-token-selector-token-container-token-background-color-focus);
+  @apply gl-focus;
 }
 
 .gl-token-selector-input {

package/src/components/base/token_selector/token_selector.vue

@@ -330,6 +330,8 @@ export default {
        * @property {object} token
        */
       this.$emit('token-add', dropdownItem);
+
+      this.focusTextInput();
     },
     removeToken(token) {
       /**
@@ -425,6 +427,7 @@ export default {
           <input
             ref="textInput"
             type="text"
+            aria-label="token selector"
             class="gl-token-selector-input gl-h-auto gl-w-4/10 gl-grow gl-border-none gl-bg-transparent gl-px-1 gl-font-regular gl-text-base gl-leading-normal gl-text-default gl-outline-none"
             :value="inputText"
             :autocomplete="autocomplete"

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,10 +957,11 @@
   --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. */
-  --gl-dropdown-divider-color: var(--gl-border-color-default);
+  --gl-dropdown-divider-color: var(--gl-border-color-default); /* Used for the divider of a dropdown. */
   --gl-dropdown-option-text-color-default: var(--gl-action-neutral-foreground-color-default); /* Used for the text of a dropdown option in the default state. */
   --gl-dropdown-option-text-color-disabled: var(--gl-action-disabled-foreground-color); /* Used for the text of a dropdown option in the disabled state. */
   --gl-dropdown-option-indicator-color-selected-default: var(--gl-control-background-color-selected-default); /* Used for the dropdown selected option indicator in the default state. */
@@ -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,10 +957,11 @@
   --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. */
-  --gl-dropdown-divider-color: var(--gl-border-color-subtle);
+  --gl-dropdown-divider-color: var(--gl-border-color-subtle); /* Used for the divider of a dropdown. */
   --gl-dropdown-option-text-color-default: var(--gl-action-neutral-foreground-color-default); /* Used for the text of a dropdown option in the default state. */
   --gl-dropdown-option-text-color-disabled: var(--gl-action-disabled-foreground-color); /* Used for the text of a dropdown option in the disabled state. */
   --gl-dropdown-option-indicator-color-selected-default: var(--gl-control-background-color-selected-default); /* Used for the dropdown selected option indicator in the default state. */
@@ -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';

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

@@ -624,6 +624,13 @@ export const GL_BUTTON_SELECTED_BORDER_COLOR_ACTIVE = '#626168';
 export const GL_BUTTON_DISABLED_FOREGROUND_COLOR = '#737278';
 export const GL_BUTTON_DISABLED_BACKGROUND_COLOR = '#fbfafd';
 export const GL_BUTTON_DISABLED_BORDER_COLOR = '#dcdcde';
+export const GL_CHART_AXIS_POINTER_COLOR = '#626168';
+export const GL_CHART_AXIS_LINE_COLOR = '#bfbfc3';
+export const GL_CHART_AXIS_TEXT_COLOR = '#626168';
+export const GL_CHART_THRESHOLD_AREA_COLOR = 'rgba(221,43,14,0.1)';
+export const GL_CHART_THRESHOLD_LINE_COLOR = '#dd2b0e';
+export const GL_CHART_ZOOM_FILLER_COLOR = 'rgba(05, 05, 06, 0.08)';
+export const GL_CHART_ZOOM_HANDLE_COLOR = '#626168';
 export const GL_DATEPICKER_BACKGROUND_COLOR = '#fff';
 export const GL_DATEPICKER_DATE_TEXT_COLOR_SELECTED = '#fff';
 export const GL_DROPDOWN_BACKGROUND_COLOR = '#fff';