@gitlab/ui 64.16.0 → 64.18.0

package/dist/utils/charts/config.js

@@ -1,5 +1,6 @@
 import castArray from 'lodash/castArray';
 import merge from 'lodash/merge';
+import { BLUE_500 } from '../../../dist/tokens/js/tokens';
 import { GlBreakpointInstance } from '../breakpoints';
 import { columnOptions } from '../constants';
 import { areDatesEqual } from '../datetime_utility';
@@ -7,8 +8,6 @@ import { engineeringNotation } from '../number_utils';
 import { hexToRgba } from '../utils';
 import { arrowSymbol, ANNOTATIONS_SERIES_NAME, CHART_TYPE_BAR, CHART_TYPE_LINE } from './constants';
 
-const blue500 = '#1f75cb';
-
 const defaultAreaOpacity = 0.2;
 const defaultFontSize = 12;
 const defaultHeight = 400;
@@ -353,14 +352,14 @@ const getAnnotationsConfig = annotations => {
   return {
     markLine: {
       lineStyle: {
-        color: blue500
+        color: BLUE_500
       },
       silent: true,
       data: lines
     },
     markPoint: {
       itemStyle: {
-        color: blue500
+        color: BLUE_500
       },
       symbol: arrowSymbol,
       symbolSize: '8',

package/dist/utils/charts/mock_data.js

@@ -1,8 +1,7 @@
+import { BLUE_500 } from '../../../dist/tokens/js/tokens';
 import { hexToRgba } from '../utils';
 import { colorFromDefaultPalette } from './theme';
 
-const blue500 = '#1f75cb';
-
 const mockDefaultDataZoomConfig = {
   dataZoom: [{
     bottom: 22,
@@ -70,7 +69,7 @@ const mockAnnotationsSeries = {
     data: [],
     markLine: {
       lineStyle: {
-        color: blue500
+        color: BLUE_500
       },
       data: [{
         xAxis: '2018-01-25T01:00:00.000Z'
@@ -85,7 +84,7 @@ const mockAnnotationsSeries = {
       symbolSize: '8',
       symbolOffset: [0, ' 60%'],
       itemStyle: {
-        color: blue500
+        color: BLUE_500
       },
       data: [{
         name: 'annotations',

package/dist/utils/charts/theme.js

@@ -1,78 +1,14 @@
+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 '../../../dist/tokens/js/tokens';
 import { scrollHandleSvgPath } from '../svgs/svg_paths';
 import { hexToRgba } from '../utils';
 
-const white = '#fff';
-const whiteNormal = '#f0f0f0';
-const red500 = '#dd2b0e';
-const gray50 = '#ececef';
-const gray100 = '#dcdcde';
-const gray200 = '#bfbfc3';
-const gray300 = '#a4a3a8';
-const gray500 = '#737278';
-const gray600 = '#626168';
-const gray900 = '#333238';
-const dataVizGreen50 = '#ddfab7';
-const dataVizGreen100 = '#c6ed94';
-const dataVizGreen200 = '#b0d97b';
-const dataVizGreen300 = '#94c25e';
-const dataVizGreen400 = '#81ac41';
-const dataVizGreen500 = '#619025';
-const dataVizGreen600 = '#4e7f0e';
-const dataVizGreen700 = '#366800';
-const dataVizGreen800 = '#275600';
-const dataVizGreen900 = '#1a4500';
-const dataVizGreen950 = '#133a03';
-const dataVizAqua50 = '#b5fefd';
-const dataVizAqua100 = '#93f2ef';
-const dataVizAqua200 = '#5edee3';
-const dataVizAqua300 = '#32c5d2';
-const dataVizAqua400 = '#00acc4';
-const dataVizAqua500 = '#0090b1';
-const dataVizAqua600 = '#007b9b';
-const dataVizAqua700 = '#006381';
-const dataVizAqua800 = '#00516c';
-const dataVizAqua900 = '#004059';
-const dataVizAqua950 = '#00344b';
-const dataVizBlue50 = '#e9ebff';
-const dataVizBlue100 = '#d2dcff';
-const dataVizBlue200 = '#b7c6ff';
-const dataVizBlue300 = '#97acff';
-const dataVizBlue400 = '#7992f5';
-const dataVizBlue500 = '#617ae2';
-const dataVizBlue600 = '#4e65cd';
-const dataVizBlue700 = '#3f51ae';
-const dataVizBlue800 = '#374291';
-const dataVizBlue900 = '#303470';
-const dataVizBlue950 = '#2a2b59';
-const dataVizMagenta50 = '#ffe3eb';
-const dataVizMagenta100 = '#ffccdb';
-const dataVizMagenta200 = '#fcacc5';
-const dataVizMagenta300 = '#f88aaf';
-const dataVizMagenta400 = '#e86e9a';
-const dataVizMagenta500 = '#cf4d81';
-const dataVizMagenta600 = '#b93d71';
-const dataVizMagenta700 = '#9a2e5d';
-const dataVizMagenta800 = '#7c214f';
-const dataVizMagenta900 = '#661e3a';
-const dataVizMagenta950 = '#541d31';
-const dataVizOrange50 = '#fae8d1';
-const dataVizOrange100 = '#f5d6b3';
-const dataVizOrange200 = '#eebd8c';
-const dataVizOrange300 = '#e99b60';
-const dataVizOrange400 = '#e07e41';
-const dataVizOrange500 = '#c95d2e';
-const dataVizOrange600 = '#b14f18';
-const dataVizOrange700 = '#92430a';
-const dataVizOrange800 = '#6f3500';
-const dataVizOrange900 = '#5e2f05';
-const dataVizOrange950 = '#4b2707';
 const glBorderRadiusBase = '0.25rem';
 
 const themeName = 'gitlab';
-const heatmapHues = [gray100, dataVizBlue200, dataVizBlue400, dataVizBlue600, dataVizBlue800];
-const gaugeNeutralHues = [gray900, gray500];
-const gaugeSafeHues = [dataVizBlue500, dataVizBlue900];
-const gaugeWarningHue = dataVizOrange500;
+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;
 
 /**
  * The default palette is based on the Categorical data palette
@@ -80,15 +16,15 @@ const gaugeWarningHue = dataVizOrange500;
  * differentiate qualitative data, and lightness to differentiate quantitive data.
  * More info: https://design.gitlab.com/data-visualization/color#categorical-data
  */
-const colorPaletteDefault = [dataVizBlue500, dataVizOrange600, dataVizAqua500, dataVizGreen600, dataVizMagenta500, dataVizBlue700, dataVizOrange800, dataVizAqua700, dataVizGreen800, dataVizMagenta700, dataVizBlue900, dataVizOrange950, dataVizAqua900, dataVizGreen950, dataVizMagenta900, dataVizBlue600, dataVizOrange700, dataVizAqua600, dataVizGreen700, dataVizMagenta600, dataVizBlue800, dataVizOrange900, dataVizAqua800, dataVizGreen900, dataVizMagenta800, dataVizBlue950, dataVizOrange500, dataVizAqua950, dataVizGreen500, dataVizMagenta950];
+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 colorFromDefaultPalette = index => colorPaletteDefault[index % colorPaletteDefault.length];
-const colorPaletteDark = [dataVizBlue500, dataVizOrange400, dataVizAqua500, dataVizGreen400, dataVizMagenta500, dataVizBlue300, dataVizOrange200, dataVizAqua300, dataVizGreen200, dataVizMagenta300, dataVizBlue100, dataVizOrange50, dataVizAqua100, dataVizGreen50, dataVizMagenta100, dataVizBlue400, dataVizOrange300, dataVizAqua400, dataVizGreen300, dataVizMagenta400, dataVizBlue200, dataVizOrange100, dataVizAqua200, dataVizGreen100, dataVizMagenta200, dataVizBlue50, dataVizOrange500, dataVizAqua50, dataVizGreen500, dataVizMagenta50];
+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 colorFromDarkPalette = index => colorPaletteDark[index % colorPaletteDark.length];
 const axes = {
   axisLabel: {
     margin: 8,
     show: true,
-    color: gray600,
+    color: GRAY_600,
     hideOverlap: true
   },
   axisLine: {
@@ -97,7 +33,7 @@ const axes = {
   axisPointer: {
     lineStyle: {
       type: 'solid',
-      color: gray600
+      color: GRAY_600
     },
     label: {
       show: false
@@ -107,7 +43,7 @@ const axes = {
     show: true,
     alignWithLabel: true,
     lineStyle: {
-      color: gray200
+      color: GRAY_200
     }
   },
   nameGap: 30,
@@ -116,13 +52,13 @@ const axes = {
   },
   splitLine: {
     lineStyle: {
-      color: [gray200]
+      color: [GRAY_200]
     }
   },
   splitArea: {
     show: false,
     areaStyle: {
-      color: [hexToRgba(whiteNormal, 0.3), hexToRgba(gray300, 0.3)]
+      color: [hexToRgba(GRAY_50, 0.3), hexToRgba(GRAY_300, 0.3)]
     }
   }
 };
@@ -133,7 +69,7 @@ const createTheme = function () {
     color: colorPaletteDefault,
     backgroundColor: 'transparent',
     textStyle: {
-      color: gray900
+      color: GRAY_900
     },
     markLine: {
       silent: true,
@@ -142,7 +78,7 @@ const createTheme = function () {
         show: false
       },
       lineStyle: {
-        color: red500,
+        color: RED_500,
         width: 1,
         type: 'dashed'
       }
@@ -150,7 +86,7 @@ const createTheme = function () {
     markArea: {
       silent: true,
       itemStyle: {
-        color: hexToRgba(red500, 0.1)
+        color: hexToRgba(RED_500, 0.1)
       }
     },
     dataZoom: {
@@ -160,27 +96,27 @@ const createTheme = function () {
       dataBackground: {
         lineStyle: {
           width: 2,
-          color: gray200,
+          color: GRAY_200,
           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: gray50,
+          color: GRAY_50,
           opacity: 1
         }
       },
-      fillerColor: hexToRgba(gray200, 0.23),
+      fillerColor: hexToRgba(GRAY_200, 0.23),
       handleIcon: scrollHandleSvgPath,
       handleStyle: {
         borderColor: 'transparent',
-        color: gray500
+        color: GRAY_500
       },
       handleSize: '50%',
       labelFormatter: () => null,
       textStyle: {
-        color: gray600
+        color: GRAY_600
       }
     },
     toolbox: {
@@ -190,14 +126,14 @@ const createTheme = function () {
       emphasis: {
         iconStyle: {
           borderWidth: 0,
-          color: gray900,
-          textBackgroundColor: white,
+          color: GRAY_900,
+          textBackgroundColor: WHITE,
           textBorderRadius: glBorderRadiusBase,
           textPadding: [8, 12]
         }
       },
       iconStyle: {
-        color: gray500,
+        color: GRAY_500,
         borderWidth: 0
       },
       itemGap: 8,
@@ -221,12 +157,12 @@ const createTheme = function () {
       label: {
         normal: {
           textStyle: {
-            color: whiteNormal
+            color: GRAY_50
           }
         },
         emphasis: {
           textStyle: {
-            color: whiteNormal
+            color: GRAY_50
           }
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "64.16.0",
+  "version": "64.18.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -21,20 +21,21 @@
   ],
   "scripts": {
     "build": "NODE_ENV=production rollup -c",
-    "prebuild": "run-s build-scss-variables generate-utilities",
-    "prepare": "run-s build-scss-variables generate-utilities",
+    "prebuild": "run-s build-tokens build-scss-variables generate-utilities",
+    "prepare": "run-s build-tokens build-scss-variables generate-utilities",
     "generate-utilities": "make src/scss/utilities.scss",
     "copy-fonts": "make copy-fonts",
     "build-scss-variables": "make scss_to_js/scss_variables.js",
+    "build-tokens": "node ./bin/build_tokens.js",
     "clean": "rm -r dist storybook scss_to_js/scss_variables.* src/scss/utilities.scss",
     "cy:edge": "cypress run --browser edge",
     "cy:run": "cypress run --browser firefox",
     "start": "yarn storybook",
     "storybook": "yarn storybook-prep && storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
     "storybook-vue3": "yarn storybook-prep && VUE_VERSION=3 storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
-    "storybook-prep": "run-s generate-utilities build-scss-variables copy-fonts",
+    "storybook-prep": "run-s copy-fonts build-tokens generate-utilities build-scss-variables",
     "storybook-static": "yarn storybook-prep && storybook build -c .storybook -o storybook",
-    "pretest:unit": "yarn build-scss-variables",
+    "pretest:unit": "yarn build-tokens build-scss-variables",
     "test": "run-s test:unit test:visual",
     "test:integration": "NODE_ENV=test start-server-and-test start http://${STORYBOOK_HOST:-localhost}:9001/iframe.html cy:run",
     "test:unit": "NODE_ENV=test jest --testPathIgnorePatterns storyshots.spec.js",
@@ -117,7 +118,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "12.14.0",
+    "cypress": "12.16.0",
     "emoji-regex": "^10.0.0",
     "eslint": "8.42.0",
     "eslint-import-resolver-jest": "3.0.2",
@@ -155,6 +156,7 @@
     "start-server-and-test": "^1.10.6",
     "storybook": "7.0.23",
     "storybook-dark-mode": "3.0.0",
+    "style-dictionary": "^3.8.0",
     "stylelint": "14.9.1",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-prettier": "3.0.0",

package/src/components/charts/area/area.stories.js

@@ -2,7 +2,7 @@ import times from 'lodash/times';
 import { GlAreaChart } from '../../../charts';
 import { mockAnnotationsSeries, mockAnnotationsConfigs } from '../../../utils/charts/mock_data';
 import { toolbox } from '../../../utils/charts/story_config';
-import { dataVizAqua500, dataVizOrange600 } from '../../../../scss_to_js/scss_variables';
+import { DATA_VIZ_AQUA_500, DATA_VIZ_ORANGE_600 } from '../../../../dist/tokens/js/tokens';
 import { timeSeriesDateFormatter } from '../../../utils/charts/utils';
 import { generateTimeSeries } from '../../../utils/data_utils';
 import { disableControls } from '../../../utils/stories_utils';
@@ -163,13 +163,13 @@ WithCustomLegendItems.args = generateProps({
     {
       name: 'Custom Legend Item 1',
       type: 'solid',
-      color: dataVizOrange600,
+      color: DATA_VIZ_ORANGE_600,
       data: [10, 20],
     },
     {
       name: 'Custom Legend Item 2',
       type: 'solid',
-      color: dataVizAqua500,
+      color: DATA_VIZ_AQUA_500,
       data: [30, 50],
     },
   ],

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

@@ -1,6 +1,6 @@
 <script>
 import merge from 'lodash/merge';
-import { gray200 } from '../../../../scss_to_js/scss_variables'; // eslint-disable-line import/no-unresolved
+import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
 import {
   defaultChartOptions,
   dataZoomAdjustments,
@@ -108,7 +108,7 @@ export default {
               alignWithLabel: true,
               show: true,
               lineStyle: {
-                color: gray200,
+                color: GRAY_200,
               },
             },
             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, gray100 } from '../../../../scss_to_js/scss_variables';
+import { WHITE, GRAY_100 } from '../../../../dist/tokens/js/tokens';
 import { getDefaultTooltipContent } from '../../../utils/charts/config';
 import { TOOLTIP_LEFT_OFFSET, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
@@ -138,7 +138,7 @@ export default {
             right: '32px',
             show: true,
             borderWidth: 0,
-            backgroundColor: gray100,
+            backgroundColor: GRAY_100,
           },
           visualMap: {
             min,
@@ -162,7 +162,7 @@ export default {
               show: true,
               interval: 0,
               lineStyle: {
-                color: white,
+                color: WHITE,
                 width: 2,
               },
             },
@@ -189,7 +189,7 @@ export default {
               show: true,
               interval: 0,
               lineStyle: {
-                color: white,
+                color: WHITE,
                 width: 2,
               },
             },

package/src/components/charts/legend/legend.stories.js

@@ -6,7 +6,7 @@ import {
   SERIES_NAME_LONG,
   SERIES_NAME_LONG_WITHOUT_SPACES,
 } from '../../../utils/stories_constants';
-import { gray200 } from '../../../../scss_to_js/scss_variables';
+import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
 import readme from './legend.md';
 
 const generateOptions = (seriesLength, seriesNameType) => {
@@ -84,7 +84,7 @@ const baseStoryOptions = {
 const disabledLegendItem = {
   type: 'solid',
   name: 'Disabled Item',
-  color: gray200,
+  color: GRAY_200,
   disabled: true,
 };
 

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

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

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

@@ -19,7 +19,7 @@
  */
 
 import merge from 'lodash/merge';
-import { gray200 } from '../../../../scss_to_js/scss_variables'; // eslint-disable-line import/no-unresolved
+import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
 import {
   defaultChartOptions,
   grid,
@@ -202,7 +202,7 @@ export default {
             alignWithLabel: true,
             show: true,
             lineStyle: {
-              color: gray200,
+              color: GRAY_200,
             },
           },
         },

package/src/scss/utilities.scss

@@ -1149,6 +1149,14 @@
   border-left-color: transparent !important;
 }
 
+.gl-border-gray-10 {
+  border-color: $gray-10;
+}
+
+.gl-border-gray-10\! {
+  border-color: $gray-10 !important;
+}
+
 .gl-border-gray-50 {
   border-color: $gray-50;
 }

package/src/scss/utility-mixins/border.scss

@@ -119,6 +119,10 @@
   border-left-color: transparent;
 }
 
+@mixin gl-border-gray-10 {
+  border-color: $gray-10;
+}
+
 @mixin gl-border-gray-50 {
   border-color: $gray-50;
 }