@gitlab/ui 122.4.0 → 122.6.0

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

@@ -237,6 +237,38 @@ $gl-line-height-36: 2.25rem;
 $gl-line-height-42: 2.625rem;
 $gl-line-height-44: 2.75rem;
 $gl-line-height-52: 3.25rem;
+$gl-spacing-scale-0: 0;
+$gl-spacing-scale-1: 0.125rem;
+$gl-spacing-scale-2: 0.25rem;
+$gl-spacing-scale-3: 0.5rem;
+$gl-spacing-scale-4: 0.75rem;
+$gl-spacing-scale-5: 1rem;
+$gl-spacing-scale-6: 1.5rem;
+$gl-spacing-scale-7: 2rem;
+$gl-spacing-scale-8: 2.5rem;
+$gl-spacing-scale-9: 3rem;
+$gl-spacing-scale-10: 3.5rem;
+$gl-spacing-scale-11: 4rem;
+$gl-spacing-scale-12: 5rem;
+$gl-spacing-scale-13: 6rem;
+$gl-spacing-scale-15: 7.5rem;
+$gl-spacing-scale-18: 9rem;
+$gl-spacing-scale-20: 10rem;
+$gl-spacing-scale-26: 13rem;
+$gl-spacing-scale-28: 14rem;
+$gl-spacing-scale-30: 15rem;
+$gl-spacing-scale-31: 15.5rem;
+$gl-spacing-scale-33: 16.5rem;
+$gl-spacing-scale-34: 17rem;
+$gl-spacing-scale-37: 18.5rem;
+$gl-spacing-scale-48: 24rem;
+$gl-spacing-scale-62: 31rem;
+$gl-spacing-scale-75: 37.5rem;
+$gl-spacing-scale-80: 40rem;
+$gl-spacing-scale-88: 44rem;
+$gl-spacing-scale-px: 1px;
+$gl-spacing-scale-2-5: 0.375rem;
+$gl-spacing-scale-11-5: 4.5rem;
 $gl-avatar-fallback-background-color-red: #fcb5aa3d; // Red background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-purple: #cbbbf23d; // Purple background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for avatar fallback with no particular meaning.

package/dist/tokens/scss/_tokens.scss

@@ -237,6 +237,38 @@ $gl-line-height-36: 2.25rem;
 $gl-line-height-42: 2.625rem;
 $gl-line-height-44: 2.75rem;
 $gl-line-height-52: 3.25rem;
+$gl-spacing-scale-0: 0;
+$gl-spacing-scale-1: 0.125rem;
+$gl-spacing-scale-2: 0.25rem;
+$gl-spacing-scale-3: 0.5rem;
+$gl-spacing-scale-4: 0.75rem;
+$gl-spacing-scale-5: 1rem;
+$gl-spacing-scale-6: 1.5rem;
+$gl-spacing-scale-7: 2rem;
+$gl-spacing-scale-8: 2.5rem;
+$gl-spacing-scale-9: 3rem;
+$gl-spacing-scale-10: 3.5rem;
+$gl-spacing-scale-11: 4rem;
+$gl-spacing-scale-12: 5rem;
+$gl-spacing-scale-13: 6rem;
+$gl-spacing-scale-15: 7.5rem;
+$gl-spacing-scale-18: 9rem;
+$gl-spacing-scale-20: 10rem;
+$gl-spacing-scale-26: 13rem;
+$gl-spacing-scale-28: 14rem;
+$gl-spacing-scale-30: 15rem;
+$gl-spacing-scale-31: 15.5rem;
+$gl-spacing-scale-33: 16.5rem;
+$gl-spacing-scale-34: 17rem;
+$gl-spacing-scale-37: 18.5rem;
+$gl-spacing-scale-48: 24rem;
+$gl-spacing-scale-62: 31rem;
+$gl-spacing-scale-75: 37.5rem;
+$gl-spacing-scale-80: 40rem;
+$gl-spacing-scale-88: 44rem;
+$gl-spacing-scale-px: 1px;
+$gl-spacing-scale-2-5: 0.375rem;
+$gl-spacing-scale-11-5: 4.5rem;
 $gl-avatar-fallback-background-color-red: #fcb5aa3d; // Red background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-purple: #cbbbf23d; // Purple background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for avatar fallback with no particular meaning.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -238,6 +238,38 @@ $gl-line-height-36: var(--gl-line-height-36);
 $gl-line-height-42: var(--gl-line-height-42);
 $gl-line-height-44: var(--gl-line-height-44);
 $gl-line-height-52: var(--gl-line-height-52);
+$gl-spacing-scale-0: var(--gl-spacing-scale-0);
+$gl-spacing-scale-1: var(--gl-spacing-scale-1);
+$gl-spacing-scale-2: var(--gl-spacing-scale-2);
+$gl-spacing-scale-3: var(--gl-spacing-scale-3);
+$gl-spacing-scale-4: var(--gl-spacing-scale-4);
+$gl-spacing-scale-5: var(--gl-spacing-scale-5);
+$gl-spacing-scale-6: var(--gl-spacing-scale-6);
+$gl-spacing-scale-7: var(--gl-spacing-scale-7);
+$gl-spacing-scale-8: var(--gl-spacing-scale-8);
+$gl-spacing-scale-9: var(--gl-spacing-scale-9);
+$gl-spacing-scale-10: var(--gl-spacing-scale-10);
+$gl-spacing-scale-11: var(--gl-spacing-scale-11);
+$gl-spacing-scale-12: var(--gl-spacing-scale-12);
+$gl-spacing-scale-13: var(--gl-spacing-scale-13);
+$gl-spacing-scale-15: var(--gl-spacing-scale-15);
+$gl-spacing-scale-18: var(--gl-spacing-scale-18);
+$gl-spacing-scale-20: var(--gl-spacing-scale-20);
+$gl-spacing-scale-26: var(--gl-spacing-scale-26);
+$gl-spacing-scale-28: var(--gl-spacing-scale-28);
+$gl-spacing-scale-30: var(--gl-spacing-scale-30);
+$gl-spacing-scale-31: var(--gl-spacing-scale-31);
+$gl-spacing-scale-33: var(--gl-spacing-scale-33);
+$gl-spacing-scale-34: var(--gl-spacing-scale-34);
+$gl-spacing-scale-37: var(--gl-spacing-scale-37);
+$gl-spacing-scale-48: var(--gl-spacing-scale-48);
+$gl-spacing-scale-62: var(--gl-spacing-scale-62);
+$gl-spacing-scale-75: var(--gl-spacing-scale-75);
+$gl-spacing-scale-80: var(--gl-spacing-scale-80);
+$gl-spacing-scale-88: var(--gl-spacing-scale-88);
+$gl-spacing-scale-px: var(--gl-spacing-scale-px);
+$gl-spacing-scale-2-5: var(--gl-spacing-scale-2-5);
+$gl-spacing-scale-11-5: var(--gl-spacing-scale-11-5);
 $gl-alert-neutral-title-color: var(--gl-alert-neutral-title-color);
 $gl-alert-neutral-background-color: var(--gl-alert-neutral-background-color);
 $gl-alert-neutral-border-top-color: var(--gl-alert-neutral-border-top-color);

package/dist/tokens/tailwind/tokens.cjs

@@ -20,6 +20,7 @@
   const feedbackBackgroundColors = {"feedback-strong":"var(--gl-feedback-strong-background-color, var(--gl-color-neutral-800, #3a383f))","feedback-neutral":"var(--gl-feedback-neutral-background-color, var(--gl-color-neutral-50, #ececef))","feedback-info":"var(--gl-feedback-info-background-color, var(--gl-color-blue-50, #e9f3fc))","feedback-success":"var(--gl-feedback-success-background-color, var(--gl-color-green-50, #ecf4ee))","feedback-warning":"var(--gl-feedback-warning-background-color, var(--gl-color-orange-50, #fdf1dd))","feedback-danger":"var(--gl-feedback-danger-background-color, var(--gl-color-red-50, #fcf1ef))"};
   const feedbackTextColors = {"feedback-strong":"var(--gl-feedback-strong-text-color, var(--gl-color-neutral-0, #fff))","feedback-neutral":"var(--gl-feedback-neutral-text-color, var(--gl-color-neutral-700, #4c4b51))","feedback-info":"var(--gl-feedback-info-text-color, var(--gl-color-blue-700, #2f5ca0))","feedback-success":"var(--gl-feedback-success-text-color, var(--gl-color-green-700, #306440))","feedback-warning":"var(--gl-feedback-warning-text-color, var(--gl-color-orange-700, #894b16))","feedback-danger":"var(--gl-feedback-danger-text-color, var(--gl-color-red-700, #a32c12))"};
   const feedbackIconColors = {"feedback-strong":"var(--gl-feedback-strong-icon-color, var(--gl-color-neutral-0, #fff))","feedback-neutral":"var(--gl-feedback-neutral-icon-color, var(--gl-color-neutral-600, #626168))","feedback-info":"var(--gl-feedback-info-icon-color, var(--gl-color-blue-600, #2f68b4))","feedback-success":"var(--gl-feedback-success-icon-color, var(--gl-color-green-600, #2f7549))","feedback-warning":"var(--gl-feedback-warning-icon-color, var(--gl-color-orange-600, #995715))","feedback-danger":"var(--gl-feedback-danger-icon-color, var(--gl-color-red-600, #c02f12))"};
+  const spacingScale = {"0":"var(--gl-spacing-scale-0, 0)","1":"var(--gl-spacing-scale-1, 0.125rem)","2":"var(--gl-spacing-scale-2, 0.25rem)","3":"var(--gl-spacing-scale-3, 0.5rem)","4":"var(--gl-spacing-scale-4, 0.75rem)","5":"var(--gl-spacing-scale-5, 1rem)","6":"var(--gl-spacing-scale-6, 1.5rem)","7":"var(--gl-spacing-scale-7, 2rem)","8":"var(--gl-spacing-scale-8, 2.5rem)","9":"var(--gl-spacing-scale-9, 3rem)","10":"var(--gl-spacing-scale-10, 3.5rem)","11":"var(--gl-spacing-scale-11, 4rem)","12":"var(--gl-spacing-scale-12, 5rem)","13":"var(--gl-spacing-scale-13, 6rem)","15":"var(--gl-spacing-scale-15, 7.5rem)","18":"var(--gl-spacing-scale-18, 9rem)","20":"var(--gl-spacing-scale-20, 10rem)","26":"var(--gl-spacing-scale-26, 13rem)","28":"var(--gl-spacing-scale-28, 14rem)","30":"var(--gl-spacing-scale-30, 15rem)","31":"var(--gl-spacing-scale-31, 15.5rem)","33":"var(--gl-spacing-scale-33, 16.5rem)","34":"var(--gl-spacing-scale-34, 17rem)","37":"var(--gl-spacing-scale-37, 18.5rem)","48":"var(--gl-spacing-scale-48, 24rem)","62":"var(--gl-spacing-scale-62, 31rem)","75":"var(--gl-spacing-scale-75, 37.5rem)","80":"var(--gl-spacing-scale-80, 40rem)","88":"var(--gl-spacing-scale-88, 44rem)","px":"var(--gl-spacing-scale-px, 1px)","2-5":"var(--gl-spacing-scale-2-5, 0.375rem)","11-5":"var(--gl-spacing-scale-11-5, 4.5rem)"};
 
   const colors = {
     inherit: 'inherit',
@@ -99,5 +100,6 @@
     outlineColor,
     textColor,
     fill,
+    spacing: spacingScale,
   }
   

package/dist/utils/charts/config.js

@@ -468,24 +468,44 @@ const generateLineSeries = _ref5 => {
     }
   };
 };
+const getTooltipAxisConfig = dimensionAxis => {
+  if (!['xAxis', 'yAxis'].includes(dimensionAxis)) {
+    throw new Error(`\`dimensionAxis\` must be "xAxis" or "yAxis", received ${dimensionAxis}`);
+  }
+  if (dimensionAxis === 'xAxis') {
+    return {
+      dimensionIndex: 0,
+      metricIndex: 1,
+      valueAxis: 'yAxis'
+    };
+  }
+  return {
+    dimensionIndex: 1,
+    metricIndex: 0,
+    valueAxis: 'xAxis'
+  };
+};
 const getTooltipTitle = function () {
   let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   let titleAxisName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  let dimensionIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   if (!params) return '';
   const title = params.seriesData.reduce((acc, _ref6) => {
     let {
       value
     } = _ref6;
-    if (acc.includes(value[0])) {
+    const dimension = value[dimensionIndex];
+    if (acc.includes(dimension)) {
       return acc;
     }
-    return [...acc, value[0]];
+    return [...acc, dimension];
   }, []).join(', ');
   return titleAxisName ? `${title} (${titleAxisName})` : title;
 };
 const getTooltipContent = function () {
   let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   let valueAxisName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  let metricIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
   if (!params) {
     return {};
   }
@@ -494,12 +514,12 @@ const getTooltipContent = function () {
   } = params;
   if (seriesData.length === 1) {
     const {
-      value: [, yValue],
+      value,
       seriesName
     } = seriesData[0];
     return {
       [valueAxisName || seriesName]: {
-        value: yValue,
+        value: value[metricIndex],
         color: '' // ignore color when showing a single series
       }
     };
@@ -510,9 +530,8 @@ const getTooltipContent = function () {
       seriesName,
       color
     } = _ref7;
-    const yValue = value[1];
     acc[seriesName] = {
-      value: yValue,
+      value: value[metricIndex],
       color
     };
     return acc;
@@ -560,4 +579,4 @@ const getDefaultTooltipContent = function (params) {
   };
 };
 
-export { annotationsYAxisCoords, axes, dataZoomAdjustments, defaultAreaOpacity, defaultChartOptions, defaultFontSize, defaultHeight, defaultWidth, generateAnnotationSeries, generateBarSeries, generateLineSeries, getAnnotationsConfig, getDataZoomConfig, getDefaultTooltipContent, getThresholdConfig, getTooltipContent, getTooltipTitle, grid, gridWithSecondaryYAxis, lineStyle, mergeAnnotationAxisToOptions, mergeSeriesToOptions, parseAnnotations, symbolSize, toolboxHeight, validRenderers, xAxis, yAxis };
+export { annotationsYAxisCoords, axes, dataZoomAdjustments, defaultAreaOpacity, defaultChartOptions, defaultFontSize, defaultHeight, defaultWidth, generateAnnotationSeries, generateBarSeries, generateLineSeries, getAnnotationsConfig, getDataZoomConfig, getDefaultTooltipContent, getThresholdConfig, getTooltipAxisConfig, getTooltipContent, getTooltipTitle, grid, gridWithSecondaryYAxis, lineStyle, mergeAnnotationAxisToOptions, mergeSeriesToOptions, parseAnnotations, symbolSize, toolboxHeight, validRenderers, xAxis, yAxis };

package/package.json

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

package/src/components/charts/bar/bar.vue

@@ -7,7 +7,6 @@ import { CHART_DEFAULT_SERIES_STACK, HEIGHT_AUTO_CLASSES } from '../../../utils/
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { hexToRgba } from '../../../utils/utils';
-import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartTooltip from '../shared/tooltip/tooltip.vue';
 import { stackedPresentationOptions } from '../../../utils/constants';
@@ -64,7 +63,6 @@ export default {
   components: {
     Chart,
     ChartTooltip,
-    TooltipDefaultFormat,
   },
   inheritAttrs: false,
   props: {
@@ -113,8 +111,6 @@ export default {
   data() {
     return {
       chart: null,
-      tooltipTitle: '',
-      tooltipContent: {},
     };
   },
   computed: {
@@ -162,13 +158,6 @@ export default {
             axisTick: {
               show: true,
             },
-            axisPointer: {
-              show: true,
-              type: 'none',
-              label: {
-                formatter: this.onLabelChange,
-              },
-            },
           },
         },
         this.option,
@@ -187,46 +176,6 @@ export default {
       this.chart = chart;
       this.$emit('created', chart);
     },
-    onLabelChange(params) {
-      const { yLabels, tooltipContent } = this.getTooltipContent(params, this.xAxisTitle);
-
-      this.$set(this, 'tooltipContent', tooltipContent);
-      this.tooltipTitle = yLabels.join(', ');
-    },
-    /**
-     * For bar charts, the tooltip should be against x-axis values.
-     * This method will be removed after https://gitlab.com/gitlab-org/gitlab-ui/-/issues/674
-     *
-     * @param {Object} params series data
-     * @param {String} xAxisTitle x-axis title
-     * @returns {Object} tooltip title and content
-     */
-    getTooltipContent(params, xAxisTitle = null) {
-      const seriesDataLength = params.seriesData.length;
-      const { yLabels, tooltipContent } = params.seriesData.reduce(
-        (acc, chartItem) => {
-          const [value, title] = chartItem.value || [];
-          // The x axis title is used instead of y axis
-          const seriesName =
-            seriesDataLength === 1 && xAxisTitle ? xAxisTitle : chartItem.seriesName;
-          const color = seriesDataLength === 1 ? '' : chartItem.color;
-          acc.tooltipContent[seriesName] = {
-            value,
-            color,
-          };
-          if (!acc.yLabels.includes(title)) {
-            acc.yLabels.push(title);
-          }
-          return acc;
-        },
-        {
-          yLabels: [],
-          tooltipContent: {},
-        },
-      );
-
-      return { yLabels, tooltipContent };
-    },
   },
   HEIGHT_AUTO_CLASSES,
 };
@@ -242,11 +191,21 @@ export default {
       v-on="$listeners"
       @created="onCreated"
     />
-    <chart-tooltip v-if="chart" :chart="chart">
-      <template #title>
-        <div>{{ tooltipTitle }} ({{ yAxisTitle }})</div>
+    <chart-tooltip
+      v-if="chart"
+      :chart="chart"
+      :use-default-tooltip-formatter="true"
+      dimension-axis="yAxis"
+    >
+      <template v-if="$scopedSlots['tooltip-title']" #title="scope">
+        <slot name="tooltip-title" v-bind="scope"></slot>
+      </template>
+      <template v-if="$scopedSlots['tooltip-content']" #default="scope">
+        <slot name="tooltip-content" v-bind="scope"></slot>
+      </template>
+      <template v-if="$scopedSlots['tooltip-value']" #tooltip-value="scope">
+        <slot name="tooltip-value" v-bind="scope"></slot>
       </template>
-      <tooltip-default-format :tooltip-content="tooltipContent" />
     </chart-tooltip>
   </div>
 </template>

package/src/components/charts/shared/tooltip/tooltip.vue

@@ -5,7 +5,11 @@ import { uid, debounceByAnimationFrame } from '../../../../utils/utils';
 import GlPopover from '../../../base/popover/popover.vue';
 import { popoverPlacements } from '../../../../utils/constants';
 import { TOOLTIP_LEFT_OFFSET, TOOLTIP_TOP_OFFSET } from '../../../../utils/charts/constants';
-import { getTooltipTitle, getTooltipContent } from '../../../../utils/charts/config';
+import {
+  getTooltipTitle,
+  getTooltipContent,
+  getTooltipAxisConfig,
+} from '../../../../utils/charts/config';
 
 import TooltipDefaultFormat from './tooltip_default_format/tooltip_default_format.vue';
 
@@ -127,6 +131,20 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Specifies which axis contains the dimensional data used in the tooltip.
+     * When `xAxis`, x-axis value becomes the tooltip's title and
+     * y-axis values become the tooltip's values.
+     * When `yAxis`, roles are reversed.
+     */
+    dimensionAxis: {
+      type: String,
+      required: false,
+      default: 'xAxis',
+      validator(value) {
+        return value === 'xAxis' || value === 'yAxis';
+      },
+    },
   },
   data() {
     return {
@@ -208,17 +226,22 @@ export default {
 
     if (this.useDefaultTooltipFormatter) {
       this.chart.setOption({
-        xAxis: {
+        [this.dimensionAxis]: {
           axisPointer: {
             show: true,
             label: {
               formatter: (params) => {
                 const options = this.chart.getOption();
-                const titleAxisName = options.xAxis?.[0]?.name;
-                const valueAxisName = options.yAxis?.[0]?.name;
 
-                this.title = getTooltipTitle(params, titleAxisName);
-                this.content = getTooltipContent(params, valueAxisName);
+                const { dimensionIndex, metricIndex, valueAxis } = getTooltipAxisConfig(
+                  this.dimensionAxis,
+                );
+
+                const titleAxisName = options[this.dimensionAxis]?.[0]?.name;
+                const valueAxisName = options[valueAxis]?.[0]?.name;
+
+                this.title = getTooltipTitle(params, titleAxisName, dimensionIndex);
+                this.content = getTooltipContent(params, valueAxisName, metricIndex);
                 this.params = params;
               },
             },

package/src/components/dashboards/dashboard_panel/dashboard_panel.vue

@@ -71,12 +71,15 @@ export default {
     },
     /**
      * Configuration object for the title popover. Expected structure:
+     * **Deprecated:** Use slots `#info-popover-content` and `#info-popover-title` instead.
      *
      * - `description`: The popover text content with interpolation placeholders.
      *   Uses `%{linkStart}` and `%{linkEnd}` as markers for where a link should be inserted.
      *
      * - `descriptionLink`: The optional URL that will be used for the link portion
      *   of the description text between the linkStart and linkEnd markers.
+     *
+     * @deprecated Use slots `#info-popover-content` and `#info-popover-title` instead.
      */
     titlePopover: {
       type: Object,
@@ -153,8 +156,18 @@ export default {
     hasTitle() {
       return Boolean(this.title);
     },
+    hasInfoPopoverContentSlot() {
+      return Boolean(this.$scopedSlots['info-popover-content']);
+    },
+    hasInfoPopoverTitleSlot() {
+      return Boolean(this.$scopedSlots['info-popover-title']);
+    },
     hasTitlePopover() {
-      return Boolean(this.titlePopover?.description);
+      return (
+        Boolean(this.titlePopover?.description) ||
+        this.hasInfoPopoverContentSlot ||
+        this.hasInfoPopoverTitleSlot
+      );
     },
     hasTitlePopoverLink() {
       return Boolean(this.titlePopover?.descriptionLink);
@@ -206,15 +219,25 @@ export default {
               boundary="viewport"
               :target="titlePopoverId"
             >
-              <gl-sprintf v-if="hasTitlePopoverLink" :message="titlePopover.description">
-                <template #link="{ content }">
-                  <gl-link :href="titlePopover.descriptionLink" class="gl-text-sm">{{
-                    content
-                  }}</gl-link>
-                </template>
-              </gl-sprintf>
-              <template v-else>
-                {{ titlePopover.description }}
+              <!-- @slot The title of the info popover. -->
+              <template v-if="hasInfoPopoverTitleSlot" #title>
+                <slot name="info-popover-title"></slot>
+              </template>
+
+              <!-- @slot The content of the info popover. -->
+              <template v-if="hasInfoPopoverContentSlot">
+                <slot name="info-popover-content"></slot>
+              </template>
+
+              <template v-if="!hasInfoPopoverContentSlot">
+                <gl-sprintf v-if="hasTitlePopoverLink" :message="titlePopover.description">
+                  <template #link="{ content }">
+                    <gl-link :href="titlePopover.descriptionLink" class="gl-text-sm">{{
+                      content
+                    }}</gl-link>
+                  </template>
+                </gl-sprintf>
+                <template v-else> {{ titlePopover.description }} </template>
               </template>
             </gl-popover>
           </template>

package/src/scss/variables.scss

@@ -4,35 +4,6 @@
 
 // Layout
 $grid-size: px-to-rem(8px);
-$gl-spacing-scale-1: 0.25 * $grid-size;
-$gl-spacing-scale-2: 0.5 * $grid-size;
-$gl-spacing-scale-3: $grid-size;
-$gl-spacing-scale-4: 1.5 * $grid-size;
-$gl-spacing-scale-5: 2 * $grid-size;
-$gl-spacing-scale-6: 3 * $grid-size;
-$gl-spacing-scale-7: 4 * $grid-size;
-$gl-spacing-scale-8: 5 * $grid-size;
-$gl-spacing-scale-9: 6 * $grid-size;
-$gl-spacing-scale-10: 7 * $grid-size;
-$gl-spacing-scale-11: 8 * $grid-size;
-$gl-spacing-scale-11-5: 9 * $grid-size;
-$gl-spacing-scale-12: 10 * $grid-size;
-$gl-spacing-scale-13: 12 * $grid-size;
-$gl-spacing-scale-15: 15 * $grid-size;
-$gl-spacing-scale-18: 18 * $grid-size;
-$gl-spacing-scale-20: 20 * $grid-size;
-$gl-spacing-scale-26: 26 * $grid-size;
-$gl-spacing-scale-28: 28 * $grid-size;
-$gl-spacing-scale-30: 30 * $grid-size;
-$gl-spacing-scale-31: 31 * $grid-size;
-$gl-spacing-scale-33: 33 * $grid-size;
-$gl-spacing-scale-34: 34 * $grid-size;
-$gl-spacing-scale-37: 37 * $grid-size;
-$gl-spacing-scale-48: 48 * $grid-size;
-$gl-spacing-scale-62: 62 * $grid-size;
-$gl-spacing-scale-75: 75 * $grid-size;
-$gl-spacing-scale-80: 80 * $grid-size;
-$gl-spacing-scale-88: 88 * $grid-size;
 
 // Responsive breakpoints
 

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

@@ -239,6 +239,38 @@
   --gl-line-height-42: 2.625rem;
   --gl-line-height-44: 2.75rem;
   --gl-line-height-52: 3.25rem;
+  --gl-spacing-scale-0: 0;
+  --gl-spacing-scale-1: 0.125rem;
+  --gl-spacing-scale-2: 0.25rem;
+  --gl-spacing-scale-3: 0.5rem;
+  --gl-spacing-scale-4: 0.75rem;
+  --gl-spacing-scale-5: 1rem;
+  --gl-spacing-scale-6: 1.5rem;
+  --gl-spacing-scale-7: 2rem;
+  --gl-spacing-scale-8: 2.5rem;
+  --gl-spacing-scale-9: 3rem;
+  --gl-spacing-scale-10: 3.5rem;
+  --gl-spacing-scale-11: 4rem;
+  --gl-spacing-scale-12: 5rem;
+  --gl-spacing-scale-13: 6rem;
+  --gl-spacing-scale-15: 7.5rem;
+  --gl-spacing-scale-18: 9rem;
+  --gl-spacing-scale-20: 10rem;
+  --gl-spacing-scale-26: 13rem;
+  --gl-spacing-scale-28: 14rem;
+  --gl-spacing-scale-30: 15rem;
+  --gl-spacing-scale-31: 15.5rem;
+  --gl-spacing-scale-33: 16.5rem;
+  --gl-spacing-scale-34: 17rem;
+  --gl-spacing-scale-37: 18.5rem;
+  --gl-spacing-scale-48: 24rem;
+  --gl-spacing-scale-62: 31rem;
+  --gl-spacing-scale-75: 37.5rem;
+  --gl-spacing-scale-80: 40rem;
+  --gl-spacing-scale-88: 44rem;
+  --gl-spacing-scale-px: 1px;
+  --gl-spacing-scale-2-5: 0.375rem;
+  --gl-spacing-scale-11-5: 4.5rem;
   --gl-avatar-fallback-background-color-red: #fcb5aa3d; /** Red background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-purple: #cbbbf23d; /** Purple background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-blue: #9dc7f13d; /** Blue background for avatar fallback with no particular meaning. */

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

@@ -239,6 +239,38 @@
   --gl-line-height-42: 2.625rem;
   --gl-line-height-44: 2.75rem;
   --gl-line-height-52: 3.25rem;
+  --gl-spacing-scale-0: 0;
+  --gl-spacing-scale-1: 0.125rem;
+  --gl-spacing-scale-2: 0.25rem;
+  --gl-spacing-scale-3: 0.5rem;
+  --gl-spacing-scale-4: 0.75rem;
+  --gl-spacing-scale-5: 1rem;
+  --gl-spacing-scale-6: 1.5rem;
+  --gl-spacing-scale-7: 2rem;
+  --gl-spacing-scale-8: 2.5rem;
+  --gl-spacing-scale-9: 3rem;
+  --gl-spacing-scale-10: 3.5rem;
+  --gl-spacing-scale-11: 4rem;
+  --gl-spacing-scale-12: 5rem;
+  --gl-spacing-scale-13: 6rem;
+  --gl-spacing-scale-15: 7.5rem;
+  --gl-spacing-scale-18: 9rem;
+  --gl-spacing-scale-20: 10rem;
+  --gl-spacing-scale-26: 13rem;
+  --gl-spacing-scale-28: 14rem;
+  --gl-spacing-scale-30: 15rem;
+  --gl-spacing-scale-31: 15.5rem;
+  --gl-spacing-scale-33: 16.5rem;
+  --gl-spacing-scale-34: 17rem;
+  --gl-spacing-scale-37: 18.5rem;
+  --gl-spacing-scale-48: 24rem;
+  --gl-spacing-scale-62: 31rem;
+  --gl-spacing-scale-75: 37.5rem;
+  --gl-spacing-scale-80: 40rem;
+  --gl-spacing-scale-88: 44rem;
+  --gl-spacing-scale-px: 1px;
+  --gl-spacing-scale-2-5: 0.375rem;
+  --gl-spacing-scale-11-5: 4.5rem;
   --gl-avatar-fallback-background-color-red: #fcb5aa3d; /** Red background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-purple: #cbbbf23d; /** Purple background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-blue: #9dc7f13d; /** Blue background for avatar fallback with no particular meaning. */