@gitlab/ui 110.1.0 → 111.1.0

package/src/components/base/link/link.vue

@@ -1,17 +1,128 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { BLink } from '../../../vendor/bootstrap-vue/src/components/link/link';
-import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
-import { isExternalURL } from '../../../directives/safe_link/safe_link';
-import { linkVariantOptions } from '../../../utils/constants';
+import isFunction from 'lodash/isFunction';
+import isString from 'lodash/isString';
+import isObject from 'lodash/isObject';
+import toString from 'lodash/toString';
+import isBoolean from 'lodash/isBoolean';
+import concat from 'lodash/concat';
+import { SafeLinkDirective, isExternalURL } from '../../../directives/safe_link/safe_link';
+import { stopEvent } from '../../../utils/utils';
+import { isEvent } from '../../../vendor/bootstrap-vue/src/utils/inspect';
+import { stringifyQueryObj } from '../../../vendor/bootstrap-vue/src/utils/router';
+import { safeVueInstance } from '../../../vendor/bootstrap-vue/src/utils/safe-vue-instance';
+import { attemptFocus, attemptBlur } from '../../../vendor/bootstrap-vue/src/utils/dom';
+import { linkVariantOptions, isVue3 } from '../../../utils/constants';
+
+const ANCHOR_TAG = 'a';
+const NUXT_LINK_TAG = 'nuxt-link';
+const VUE_ROUTER_LINK_TAG = 'router-link';
 
 export default {
   name: 'GlLink',
-  components: {
-    BLink,
+  directives: {
+    SafeLink: SafeLinkDirective,
   },
-  mixins: [SafeLinkMixin],
   props: {
+    /**
+     * Denotes the target URL of the link for standard links.
+     */
+    href: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * When set to `true`, disables the component's functionality and places it in a disabled state.
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Skips sanitization of href if true. This should be used sparingly.
+     * Consult security team before setting to true.
+     */
+    isUnsafeLink: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Sets the 'rel' attribute on the rendered link.
+     */
+    rel: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * Sets the 'target' attribute on the rendered link.
+     */
+    target: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * When set to `true`, places the component in the active state with active styling
+     */
+    active: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * <router-link> prop: 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.
+     */
+    to: {
+      type: [Object, String],
+      required: false,
+      default: undefined,
+    },
+    /**
+     * <router-link> prop: Configure the active CSS class applied when the link is active.
+     */
+    activeClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * <router-link> prop: Configure the active CSS class applied when the link is active with exact match.
+     */
+    exactActiveClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * <router-link> prop: Setting the replace prop will call `router.replace()` instead of `router.push()`
+     * when clicked, so the navigation will not leave a history record.
+     */
+    replace: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * <nuxt-link> prop: To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport,
+     * Nuxt.js will automatically prefetch the code splitted page. Setting `prefetch` to `true` or `false` will overwrite the default value of `router.prefetchLinks`
+     */
+    prefetch: {
+      type: Boolean,
+      required: false,
+      // Must be `null` to fall back to the value defined in the
+      // `nuxt.config.js` configuration file for `router.prefetchLinks`
+      // We convert `null` to `undefined`, so that Nuxt.js will use the
+      // compiled default
+      // Vue treats `undefined` as default of `false` for Boolean props,
+      // so we must set it as `null` here to be a true tri-state prop
+      default: null,
+    },
     /**
      * If inline variant, controls ↗ character visibility
      */
@@ -31,33 +142,187 @@ export default {
     },
   },
   computed: {
+    safeLinkConfig() {
+      return {
+        skipSanitization: this.isUnsafeLink,
+      };
+    },
+    tag() {
+      const hasRouter = Boolean(safeVueInstance(this).$router);
+      const hasNuxt = Boolean(safeVueInstance(this).$nuxt);
+
+      if (!hasRouter || this.disabled || !this.to) {
+        return ANCHOR_TAG;
+      }
+
+      return hasNuxt ? NUXT_LINK_TAG : VUE_ROUTER_LINK_TAG;
+    },
+    isRouterLink() {
+      return this.tag !== ANCHOR_TAG;
+    },
+    isVue3RouterLink() {
+      return this.tag === VUE_ROUTER_LINK_TAG && isVue3;
+    },
     isInlineAndHasExternalIcon() {
       return (
         this.showExternalIcon &&
         this.variant === 'inline' &&
-        this.$attrs.href &&
-        isExternalURL(this.target, this.$attrs.href)
+        this.href &&
+        isExternalURL(this.target, this.href)
       );
     },
-    linkClasses() {
+    computedHref() {
+      const fallback = '#';
+      const toFallback = '/';
+      const { to } = this;
+
+      // Return `href` when explicitly provided
+      if (this.href) {
+        return this.href;
+      }
+
+      if (isString(to)) {
+        return to || toFallback;
+      }
+
+      // Fallback to `to.path' + `to.query` + `to.hash` prop (if `to` is an object)
+      if (isObject(to) && (to.path || to.query || to.hash)) {
+        const path = toString(to.path);
+        const query = stringifyQueryObj(to.query);
+        let hash = toString(to.hash);
+        hash = !hash || hash.charAt(0) === '#' ? hash : `#${hash}`;
+        return `${path}${query}${hash}` || fallback;
+      }
+
+      return fallback;
+    },
+    computedProps() {
+      if (this.isRouterLink) {
+        return {
+          to: this.to,
+          activeClass: this.activeClass,
+          exactActiveClass: this.exactActiveClass,
+          replace: this.replace,
+          ...(isBoolean(this.prefetch) ? { prefetch: this.prefetch } : {}),
+        };
+      }
+
+      return {
+        disabled: this.disabled,
+        ...(this.disabled ? { 'aria-disabled': 'true', tabindex: '-1' } : {}),
+        rel: this.rel,
+        target: this.target,
+        href: this.computedHref,
+      };
+    },
+    computedListeners() {
+      const { click, ...listenersWithoutClick } = this.$listeners;
+
+      return listenersWithoutClick;
+    },
+    computedClass() {
       return [
         'gl-link',
         linkVariantOptions[this.variant],
-        { 'gl-link-inline-external': this.isInlineAndHasExternalIcon },
+        {
+          disabled: this.disabled,
+          active: this.active,
+          'gl-link-inline-external': this.isInlineAndHasExternalIcon,
+        },
       ];
     },
   },
+  methods: {
+    onClick(event, navigate) {
+      const eventIsEvent = isEvent(event);
+      const suppliedHandler = this.$listeners.click;
+
+      if (eventIsEvent && this.disabled) {
+        // Stop event from bubbling up
+        // Kill the event loop attached to this specific `EventTarget`
+        // Needed to prevent `vue-router` from navigating
+        stopEvent(event, { immediatePropagation: true });
+      } else {
+        // Router links do not emit instance `click` events, so we
+        // add in an `$emit('click', event)` on its Vue instance
+        //
+        // seems not to be required for Vue3 compat build
+        if (this.isRouterLink) {
+          // eslint-disable-next-line no-underscore-dangle
+          event.currentTarget.__vue__?.$emit('click', event);
+        }
+
+        // Call the suppliedHandler(s), if any provided
+        concat([], suppliedHandler)
+          .filter((h) => isFunction(h))
+          .forEach((handler) => {
+            // eslint-disable-next-line prefer-rest-params
+            handler(...arguments);
+          });
+
+        // this navigate function comes from Vue 3 router
+        // See https://router.vuejs.org/guide/advanced/extending-router-link.html#Extending-RouterLink
+        if (isFunction(navigate)) {
+          navigate(event);
+        }
+
+        // TODO: Remove deprecated 'clicked::link' event
+        this.$root.$emit('clicked::link', event);
+      }
+      // Stop scroll-to-top behavior or navigation on
+      // regular links when href is just '#'
+      if (eventIsEvent && !this.isRouterLink && this.computedHref === '#') {
+        stopEvent(event, { stopPropagation: false });
+      }
+    },
+    focus() {
+      attemptFocus(this.$el);
+    },
+    blur() {
+      attemptBlur(this.$el);
+    },
+  },
 };
 </script>
+
 <template>
-  <b-link
+  <component
+    :is="tag"
+    v-if="isVue3RouterLink"
+    #default="{ href: routerLinkHref, isActive, isExactActive, navigate }"
+    v-bind="computedProps"
+    custom
+  >
+    <a
+      v-safe-link:[safeLinkConfig]
+      :class="[computedClass, { [activeClass]: isActive, [exactActiveClass]: isExactActive }]"
+      :href="routerLinkHref"
+      v-on="computedListeners"
+      @click="onClick($event, navigate)"
+    >
+      <slot></slot>
+    </a>
+  </component>
+  <component
+    :is="tag"
+    v-else-if="isRouterLink"
+    v-safe-link:[safeLinkConfig]
+    v-bind="computedProps"
+    :class="computedClass"
+    v-on="computedListeners"
+    @click.native="onClick"
+  >
+    <slot></slot>
+  </component>
+  <component
+    :is="tag"
+    v-else
     v-safe-link:[safeLinkConfig]
-    v-bind="$attrs"
-    :target="target"
-    :class="linkClasses"
-    v-on="$listeners"
+    v-bind="computedProps"
+    :class="computedClass"
+    v-on="computedListeners"
+    @click="onClick"
   >
-    <!-- @slot The link to display. -->
     <slot></slot>
-  </b-link>
+  </component>
 </template>

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/directives/safe_link/safe_link.js

@@ -5,8 +5,12 @@ const getBaseURL = () => {
   return `${protocol}//${host}`;
 };
 
+const isTargetBlank = (target) => {
+  return target === '_blank';
+};
+
 export const isExternalURL = (target, hostname) => {
-  return target === '_blank' && hostname !== window.location.hostname;
+  return isTargetBlank(target) && hostname !== window.location.hostname;
 };
 
 const secureRel = (rel) => {
@@ -35,13 +39,13 @@ const transform = (el, { arg: { skipSanitization = false } = {} } = {}) => {
     return;
   }
 
-  const { href, target, rel, hostname } = el;
+  const { href, target, rel } = el;
 
   if (!isSafeURL(href)) {
     el.href = 'about:blank';
   }
 
-  if (isExternalURL(target, hostname)) {
+  if (isTargetBlank(target)) {
     el.rel = secureRel(rel);
   }
 };

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';

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';