@gitlab/ui 80.9.0 → 80.11.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [80.11.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.10.0...v80.11.0) (2024-05-17)
+
+
+### Features
+
+* **DesignTokens:** Generate SCSS output with CSS custom property values ([3b92239](https://gitlab.com/gitlab-org/gitlab-ui/commit/3b92239aa7d916d4ee2ed64c7ef3220a5fafea08))
+
+# [80.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.9.0...v80.10.0) (2024-05-15)
+
+
+### Features
+
+* **DesignTokens:** Create design token table Storybook story ([a7d97d1](https://gitlab.com/gitlab-org/gitlab-ui/commit/a7d97d11b6fee5e6e942f32785a1e4843ca3924b))
+
 # [80.9.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.8.1...v80.9.0) (2024-05-15)
 
 

package/dist/components/charts/discrete_scatter/discrete_scatter.js

@@ -1,5 +1,5 @@
 import merge from 'lodash/merge';
-import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
+import { GRAY_200 } from '../../../tokens/build/js/tokens';
 import { defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';

package/dist/components/charts/heatmap/heatmap.js

@@ -1,5 +1,5 @@
 import merge from 'lodash/merge';
-import { GRAY_100, WHITE } from '../../../../dist/tokens/js/tokens';
+import { GRAY_100, WHITE } 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';

package/dist/components/charts/legend/legend.js

@@ -1,5 +1,5 @@
 import * as echarts from 'echarts';
-import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
+import { GRAY_200 } from '../../../tokens/build/js/tokens';
 import { defaultFontSize } from '../../../utils/charts/config';
 import { LEGEND_AVERAGE_TEXT, LEGEND_CURRENT_TEXT, LEGEND_MIN_TEXT, LEGEND_MAX_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '../../../utils/charts/constants';
 import { engineeringNotation, average } from '../../../utils/number_utils';

package/dist/components/charts/line/line.js

@@ -1,5 +1,5 @@
 import merge from 'lodash/merge';
-import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
+import { GRAY_200 } from '../../../tokens/build/js/tokens';
 import { symbolSize, lineStyle, getThresholdConfig, generateAnnotationSeries, defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions, mergeAnnotationAxisToOptions, grid } from '../../../utils/charts/config';
 import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';

package/dist/tailwind.css

@@ -1,2 +1,2 @@
-.gl-fixed{position:fixed}.\!gl-absolute{position:absolute!important}.gl-absolute{position:absolute}.gl-relative{position:relative}.gl-bottom-0{bottom:0}.gl-bottom-2{bottom:.25rem}.gl-left-0{left:0}.gl-right-2{right:.25rem}.gl-float-right{float:right}.gl-text-blue-100{color:var(--blue-100,#cbe2f9)}.gl-text-blue-500{color:var(--blue-500,#1f75cb)}.gl-text-blue-900{color:var(--blue-900,#033464)}.gl-text-danger{color:var(--gl-text-color-danger,#c91c00)}.gl-text-gray-400{color:var(--gray-400,#89888d)}.gl-text-gray-500{color:var(--gray-500,#737278)}.gl-text-gray-600{color:var(--gray-600,#626168)}.gl-text-gray-700{color:var(--gray-700,#535158)}.gl-text-gray-900{color:var(--gray-900,#333238)}.gl-text-gray-950{color:var(--gray-950,#1f1e24)}.gl-text-green-500{color:var(--green-500,#108548)}.gl-text-green-600{color:var(--green-600,#217645)}.gl-text-orange-500{color:var(--orange-500,#ab6100)}.gl-text-red-300{color:var(--red-300,#f57f6c)}.gl-text-red-500{color:var(--red-500,#dd2b0e)}.gl-text-red-600{color:var(--red-600,#c91c00)}.gl-text-secondary{color:var(--gl-text-secondary,#737278)}.gl-text-subtle{color:var(--gl-text-color-subtle,#626168)}.gl-text-white{color:var(--white,#fff)}
+.gl-fixed{position:fixed}.\!gl-absolute{position:absolute!important}.gl-absolute{position:absolute}.gl-relative{position:relative}.gl-bottom-0{bottom:0}.gl-bottom-2{bottom:.25rem}.gl-left-0{left:0}.gl-right-2{right:.25rem}.gl-float-right{float:right}.gl-text-blue-100{color:var(--blue-100,#cbe2f9)}.gl-text-blue-500{color:var(--blue-500,#1f75cb)}.gl-text-blue-900{color:var(--blue-900,#033464)}.gl-text-danger{color:var(--gl-text-color-danger,#c91c00)}.gl-text-gray-400{color:var(--gray-400,#89888d)}.gl-text-gray-500{color:var(--gray-500,#737278)}.gl-text-gray-600{color:var(--gray-600,#626168)}.gl-text-gray-700{color:var(--gray-700,#535158)}.gl-text-gray-900{color:var(--gray-900,#333238)}.gl-text-gray-950{color:var(--gray-950,#1f1e24)}.gl-text-green-500{color:var(--green-500,#108548)}.gl-text-green-600{color:var(--green-600,#217645)}.gl-text-orange-500{color:var(--orange-500,#ab6100)}.gl-text-red-300{color:var(--red-300,#f57f6c)}.gl-text-red-500{color:var(--red-500,#dd2b0e)}.gl-text-red-600{color:var(--red-600,#c91c00)}.gl-text-secondary{color:var(--gl-text-secondary,#737278)}.gl-text-strong{color:var(--gl-text-color-strong,#1f1e24)}.gl-text-subtle{color:var(--gl-text-color-subtle,#626168)}.gl-text-white{color:var(--white,#fff)}
 /*# sourceMappingURL=tailwind.css.map */

package/dist/tailwind.css.map

@@ -1 +1 @@
-{"version":3,"sources":["tailwind.css"],"names":[],"mappings":"AAAA,UAAA,cAAmB,CAAnB,eAAA,2BAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,QAAmB,CAAnB,aAAA,aAAmB,CAAnB,WAAA,MAAmB,CAAnB,YAAA,YAAmB,CAAnB,gBAAA,WAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,gBAAA,yCAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,oBAAA,+BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,mBAAA,sCAAmB,CAAnB,gBAAA,yCAAmB,CAAnB,eAAA,uBAAmB","file":"tailwind.css","sourcesContent":["@tailwind utilities;\n"]}
+{"version":3,"sources":["tailwind.css"],"names":[],"mappings":"AAAA,UAAA,cAAmB,CAAnB,eAAA,2BAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,QAAmB,CAAnB,aAAA,aAAmB,CAAnB,WAAA,MAAmB,CAAnB,YAAA,YAAmB,CAAnB,gBAAA,WAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,gBAAA,yCAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,oBAAA,+BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,mBAAA,sCAAmB,CAAnB,gBAAA,yCAAmB,CAAnB,gBAAA,yCAAmB,CAAnB,eAAA,uBAAmB","file":"tailwind.css","sourcesContent":["@tailwind utilities;\n"]}

package/dist/tokens/common_story_options.js

@@ -1,4 +1,4 @@
-import { WHITE, GRAY_950 } from '../../dist/tokens/js/tokens';
+import { WHITE, GRAY_950 } from './build/js/tokens';
 import TokensStory from './tokens_story';
 
 const createDesignTokenStory = function () {

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -0,0 +1,246 @@
+/**
+ * Automatically generated
+ * Do not edit directly
+ */
+
+$data-viz-green-50: var(--data-viz-green-50);
+$data-viz-green-100: var(--data-viz-green-100);
+$data-viz-green-200: var(--data-viz-green-200);
+$data-viz-green-300: var(--data-viz-green-300);
+$data-viz-green-400: var(--data-viz-green-400);
+$data-viz-green-500: var(--data-viz-green-500);
+$data-viz-green-600: var(--data-viz-green-600);
+$data-viz-green-700: var(--data-viz-green-700);
+$data-viz-green-800: var(--data-viz-green-800);
+$data-viz-green-900: var(--data-viz-green-900);
+$data-viz-green-950: var(--data-viz-green-950);
+$data-viz-aqua-50: var(--data-viz-aqua-50);
+$data-viz-aqua-100: var(--data-viz-aqua-100);
+$data-viz-aqua-200: var(--data-viz-aqua-200);
+$data-viz-aqua-300: var(--data-viz-aqua-300);
+$data-viz-aqua-400: var(--data-viz-aqua-400);
+$data-viz-aqua-500: var(--data-viz-aqua-500);
+$data-viz-aqua-600: var(--data-viz-aqua-600);
+$data-viz-aqua-700: var(--data-viz-aqua-700);
+$data-viz-aqua-800: var(--data-viz-aqua-800);
+$data-viz-aqua-900: var(--data-viz-aqua-900);
+$data-viz-aqua-950: var(--data-viz-aqua-950);
+$data-viz-blue-50: var(--data-viz-blue-50);
+$data-viz-blue-100: var(--data-viz-blue-100);
+$data-viz-blue-200: var(--data-viz-blue-200);
+$data-viz-blue-300: var(--data-viz-blue-300);
+$data-viz-blue-400: var(--data-viz-blue-400);
+$data-viz-blue-500: var(--data-viz-blue-500);
+$data-viz-blue-600: var(--data-viz-blue-600);
+$data-viz-blue-700: var(--data-viz-blue-700);
+$data-viz-blue-800: var(--data-viz-blue-800);
+$data-viz-blue-900: var(--data-viz-blue-900);
+$data-viz-blue-950: var(--data-viz-blue-950);
+$data-viz-magenta-50: var(--data-viz-magenta-50);
+$data-viz-magenta-100: var(--data-viz-magenta-100);
+$data-viz-magenta-200: var(--data-viz-magenta-200);
+$data-viz-magenta-300: var(--data-viz-magenta-300);
+$data-viz-magenta-400: var(--data-viz-magenta-400);
+$data-viz-magenta-500: var(--data-viz-magenta-500);
+$data-viz-magenta-600: var(--data-viz-magenta-600);
+$data-viz-magenta-700: var(--data-viz-magenta-700);
+$data-viz-magenta-800: var(--data-viz-magenta-800);
+$data-viz-magenta-900: var(--data-viz-magenta-900);
+$data-viz-magenta-950: var(--data-viz-magenta-950);
+$data-viz-orange-50: var(--data-viz-orange-50);
+$data-viz-orange-100: var(--data-viz-orange-100);
+$data-viz-orange-200: var(--data-viz-orange-200);
+$data-viz-orange-300: var(--data-viz-orange-300);
+$data-viz-orange-400: var(--data-viz-orange-400);
+$data-viz-orange-500: var(--data-viz-orange-500);
+$data-viz-orange-600: var(--data-viz-orange-600);
+$data-viz-orange-700: var(--data-viz-orange-700);
+$data-viz-orange-800: var(--data-viz-orange-800);
+$data-viz-orange-900: var(--data-viz-orange-900);
+$data-viz-orange-950: var(--data-viz-orange-950);
+$theme-indigo-10: var(--theme-indigo-10);
+$theme-indigo-50: var(--theme-indigo-50);
+$theme-indigo-100: var(--theme-indigo-100);
+$theme-indigo-200: var(--theme-indigo-200);
+$theme-indigo-300: var(--theme-indigo-300);
+$theme-indigo-400: var(--theme-indigo-400);
+$theme-indigo-500: var(--theme-indigo-500);
+$theme-indigo-600: var(--theme-indigo-600);
+$theme-indigo-700: var(--theme-indigo-700);
+$theme-indigo-800: var(--theme-indigo-800);
+$theme-indigo-900: var(--theme-indigo-900);
+$theme-indigo-950: var(--theme-indigo-950);
+$theme-blue-10: var(--theme-blue-10);
+$theme-blue-50: var(--theme-blue-50);
+$theme-blue-100: var(--theme-blue-100);
+$theme-blue-200: var(--theme-blue-200);
+$theme-blue-300: var(--theme-blue-300);
+$theme-blue-400: var(--theme-blue-400);
+$theme-blue-500: var(--theme-blue-500);
+$theme-blue-600: var(--theme-blue-600);
+$theme-blue-700: var(--theme-blue-700);
+$theme-blue-800: var(--theme-blue-800);
+$theme-blue-900: var(--theme-blue-900);
+$theme-blue-950: var(--theme-blue-950);
+$theme-light-blue-10: var(--theme-light-blue-10);
+$theme-light-blue-50: var(--theme-light-blue-50);
+$theme-light-blue-100: var(--theme-light-blue-100);
+$theme-light-blue-200: var(--theme-light-blue-200);
+$theme-light-blue-300: var(--theme-light-blue-300);
+$theme-light-blue-400: var(--theme-light-blue-400);
+$theme-light-blue-500: var(--theme-light-blue-500);
+$theme-light-blue-600: var(--theme-light-blue-600);
+$theme-light-blue-700: var(--theme-light-blue-700);
+$theme-light-blue-800: var(--theme-light-blue-800);
+$theme-light-blue-900: var(--theme-light-blue-900);
+$theme-light-blue-950: var(--theme-light-blue-950);
+$theme-green-10: var(--theme-green-10);
+$theme-green-50: var(--theme-green-50);
+$theme-green-100: var(--theme-green-100);
+$theme-green-200: var(--theme-green-200);
+$theme-green-300: var(--theme-green-300);
+$theme-green-400: var(--theme-green-400);
+$theme-green-500: var(--theme-green-500);
+$theme-green-600: var(--theme-green-600);
+$theme-green-700: var(--theme-green-700);
+$theme-green-800: var(--theme-green-800);
+$theme-green-900: var(--theme-green-900);
+$theme-green-950: var(--theme-green-950);
+$theme-red-10: var(--theme-red-10);
+$theme-red-50: var(--theme-red-50);
+$theme-red-100: var(--theme-red-100);
+$theme-red-200: var(--theme-red-200);
+$theme-red-300: var(--theme-red-300);
+$theme-red-400: var(--theme-red-400);
+$theme-red-500: var(--theme-red-500);
+$theme-red-600: var(--theme-red-600);
+$theme-red-700: var(--theme-red-700);
+$theme-red-800: var(--theme-red-800);
+$theme-red-900: var(--theme-red-900);
+$theme-red-950: var(--theme-red-950);
+$theme-light-red-10: var(--theme-light-red-10);
+$theme-light-red-50: var(--theme-light-red-50);
+$theme-light-red-100: var(--theme-light-red-100);
+$theme-light-red-200: var(--theme-light-red-200);
+$theme-light-red-300: var(--theme-light-red-300);
+$theme-light-red-400: var(--theme-light-red-400);
+$theme-light-red-500: var(--theme-light-red-500);
+$theme-light-red-600: var(--theme-light-red-600);
+$theme-light-red-700: var(--theme-light-red-700);
+$theme-light-red-800: var(--theme-light-red-800);
+$theme-light-red-900: var(--theme-light-red-900);
+$theme-light-red-950: var(--theme-light-red-950);
+$black: var(--black);
+$white: var(--white);
+$blue-50: var(--blue-50);
+$blue-100: var(--blue-100);
+$blue-200: var(--blue-200);
+$blue-300: var(--blue-300);
+$blue-400: var(--blue-400);
+$blue-500: var(--blue-500);
+$blue-600: var(--blue-600);
+$blue-700: var(--blue-700);
+$blue-800: var(--blue-800);
+$blue-900: var(--blue-900);
+$blue-950: var(--blue-950);
+$gray-10: var(--gray-10);
+$gray-50: var(--gray-50);
+$gray-100: var(--gray-100);
+$gray-200: var(--gray-200);
+$gray-300: var(--gray-300);
+$gray-400: var(--gray-400);
+$gray-500: var(--gray-500);
+$gray-600: var(--gray-600);
+$gray-700: var(--gray-700);
+$gray-800: var(--gray-800);
+$gray-900: var(--gray-900);
+$gray-950: var(--gray-950);
+$green-50: var(--green-50);
+$green-100: var(--green-100);
+$green-200: var(--green-200);
+$green-300: var(--green-300);
+$green-400: var(--green-400);
+$green-500: var(--green-500);
+$green-600: var(--green-600);
+$green-700: var(--green-700);
+$green-800: var(--green-800);
+$green-900: var(--green-900);
+$green-950: var(--green-950);
+$orange-50: var(--orange-50);
+$orange-100: var(--orange-100);
+$orange-200: var(--orange-200);
+$orange-300: var(--orange-300);
+$orange-400: var(--orange-400);
+$orange-500: var(--orange-500);
+$orange-600: var(--orange-600);
+$orange-700: var(--orange-700);
+$orange-800: var(--orange-800);
+$orange-900: var(--orange-900);
+$orange-950: var(--orange-950);
+$purple-50: var(--purple-50);
+$purple-100: var(--purple-100);
+$purple-200: var(--purple-200);
+$purple-300: var(--purple-300);
+$purple-400: var(--purple-400);
+$purple-500: var(--purple-500);
+$purple-600: var(--purple-600);
+$purple-700: var(--purple-700);
+$purple-800: var(--purple-800);
+$purple-900: var(--purple-900);
+$purple-950: var(--purple-950);
+$red-50: var(--red-50);
+$red-100: var(--red-100);
+$red-200: var(--red-200);
+$red-300: var(--red-300);
+$red-400: var(--red-400);
+$red-500: var(--red-500);
+$red-600: var(--red-600);
+$red-700: var(--red-700);
+$red-800: var(--red-800);
+$red-900: var(--red-900);
+$red-950: var(--red-950);
+$brand-charcoal: var(--brand-charcoal);
+$brand-orange-01: var(--brand-orange-01);
+$brand-orange-02: var(--brand-orange-02);
+$brand-orange-03: var(--brand-orange-03);
+$brand-purple-01: var(--brand-purple-01);
+$brand-purple-02: var(--brand-purple-02);
+$brand-gray-01: var(--brand-gray-01);
+$brand-gray-02: var(--brand-gray-02);
+$brand-gray-03: var(--brand-gray-03);
+$brand-gray-04: var(--brand-gray-04);
+$brand-gray-05: var(--brand-gray-05);
+$t-gray-a-16: var(--t-gray-a-16);
+$t-gray-a-24: var(--t-gray-a-24);
+$t-gray-a-02: var(--t-gray-a-02);
+$t-gray-a-04: var(--t-gray-a-04);
+$t-gray-a-06: var(--t-gray-a-06);
+$t-gray-a-08: var(--t-gray-a-08);
+$t-white-a-16: var(--t-white-a-16);
+$t-white-a-24: var(--t-white-a-24);
+$t-white-a-36: var(--t-white-a-36);
+$t-white-a-02: var(--t-white-a-02);
+$t-white-a-04: var(--t-white-a-04);
+$t-white-a-06: var(--t-white-a-06);
+$t-white-a-08: var(--t-white-a-08);
+$gl-line-height-12: var(--gl-line-height-12);
+$gl-line-height-16: var(--gl-line-height-16);
+$gl-line-height-20: var(--gl-line-height-20);
+$gl-line-height-24: var(--gl-line-height-24);
+$gl-line-height-28: var(--gl-line-height-28);
+$gl-line-height-32: var(--gl-line-height-32);
+$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-text-primary: var(--gl-text-primary);
+$gl-text-secondary: var(--gl-text-secondary);
+$gl-text-tertiary: var(--gl-text-tertiary);
+$gl-text-color-default: var(--gl-text-color-default);
+$gl-text-color-subtle: var(--gl-text-color-subtle);
+$gl-text-color-strong: var(--gl-text-color-strong);
+$gl-text-color-heading: var(--gl-text-color-heading);
+$gl-text-color-link: var(--gl-text-color-link);
+$gl-text-color-danger: var(--gl-text-color-danger);
+$gl-text-color-success: var(--gl-text-color-success);
+$gl-text-color-disabled: var(--gl-text-color-disabled);

package/dist/tokens/tokens_table.js

@@ -0,0 +1,147 @@
+import GlBadge from '../components/base/badge/badge';
+import GlCollapsibleListbox from '../components/base/new_dropdowns/listbox/listbox';
+import GlFormInput from '../components/base/form/form_input/form_input';
+import GlTable from '../components/base/table/table';
+import TOKENS_DEFAULT from './build/json/tokens.json';
+import TOKENS_DARK from './build/json/tokens.dark.json';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'TokensTable',
+  TOKENS_DEFAULT,
+  TOKENS_DARK,
+  components: {
+    GlBadge,
+    GlCollapsibleListbox,
+    GlFormInput,
+    GlTable
+  },
+  fields: [{
+    key: 'description',
+    label: 'Description'
+  }, {
+    key: 'value',
+    label: 'Value'
+  }],
+  data() {
+    return {
+      filter: null,
+      modes: [{
+        value: 'default',
+        text: 'Default'
+      }, {
+        value: 'dark',
+        text: 'Dark'
+      }],
+      selectedMode: 'default',
+      tokens: {
+        default: this.$options.TOKENS_DEFAULT,
+        dark: this.$options.TOKENS_DARK
+      }
+    };
+  },
+  computed: {
+    items() {
+      return this.transformTokensToTableRows(this.tokens[this.selectedMode]);
+    }
+  },
+  methods: {
+    isColor(type) {
+      return type === 'color';
+    },
+    isAliasValue(value) {
+      return typeof value === 'string' && value.includes('{');
+    },
+    isAliasObject(value) {
+      return typeof value === 'object' && Object.values(value).some(val => this.isAliasValue(val));
+    },
+    getAliasValueName(value) {
+      if (this.isAliasValue(value)) {
+        return value.slice(1, -1);
+      }
+      return value;
+    },
+    getValueLabel(token) {
+      const {
+        value
+      } = token.original;
+      if (this.isAliasObject(value)) {
+        return this.getAliasValueName(value[this.selectedMode]);
+      }
+      if (this.isAliasValue(value)) {
+        return this.getAliasValueName(value);
+      }
+      return token.value;
+    },
+    transformTokenToTableColumns(token) {
+      return {
+        name: token.path.filter(Boolean).join('.'),
+        type: token.$type,
+        value: token.value,
+        valueLabel: this.getValueLabel(token),
+        deprecated: token.deprecated,
+        description: token.comment
+      };
+    },
+    transformTokensToTableRows(tokens) {
+      const tokensArray = [];
+      Object.keys(tokens).forEach(key => {
+        const token = tokens[key];
+        if (token.value) {
+          tokensArray.push(this.transformTokenToTableColumns(token));
+        } else {
+          tokensArray.push(...this.transformTokensToTableRows(token));
+        }
+      });
+      return tokensArray;
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-gap-3 gl-mb-5"},[_c('gl-form-input',{attrs:{"placeholder":"Type to search"},model:{value:(_vm.filter),callback:function ($$v) {_vm.filter=$$v;},expression:"filter"}}),_vm._v(" "),_c('gl-collapsible-listbox',{attrs:{"id":"component-listbox","selected":_vm.selectedMode,"items":_vm.modes},on:{"search":function($event){_vm.query = $event;}},model:{value:(_vm.selectedMode),callback:function ($$v) {_vm.selectedMode=$$v;},expression:"selectedMode"}})],1),_vm._v(" "),_c('gl-table',{attrs:{"filter":_vm.filter,"items":_vm.items,"fields":_vm.$options.fields,"tbody-tr-attr":function (item) { return ({ id: item.name }); },"hover":"","stacked":"sm"},scopedSlots:_vm._u([{key:"cell(description)",fn:function(ref){
+var ref_item = ref.item;
+var name = ref_item.name;
+var deprecated = ref_item.deprecated;
+var description = ref_item.description;
+return [_c('code',{staticClass:"gl-font-base gl-text-strong"},[_vm._v("\n        "+_vm._s(name)+"\n        "),(deprecated)?_c('gl-badge',{attrs:{"size":"sm","variant":"neutral"}},[_vm._v("Deprecated")]):_vm._e()],1),_vm._v(" "),(description)?_c('div',{staticClass:"gl-mt-3 gl-text-subtle"},[_vm._v("\n        "+_vm._s(description)+"\n      ")]):_vm._e()]}},{key:"cell(value)",fn:function(ref){
+var ref_item = ref.item;
+var type = ref_item.type;
+var value = ref_item.value;
+var valueLabel = ref_item.valueLabel;
+return [_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-gap-3"},[(_vm.isColor(type))?_c('div',{staticClass:"gl-w-5 gl-h-5 gl-rounded-base",style:({ 'background-color': value })}):_vm._e(),_vm._v(" "),_c('code',{staticClass:"gl-font-base gl-text-strong"},[_vm._v(_vm._s(valueLabel))])])]}}])})],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

package/dist/utils/charts/config.js

@@ -1,6 +1,6 @@
 import castArray from 'lodash/castArray';
 import merge from 'lodash/merge';
-import { BLUE_500 } from '../../../dist/tokens/js/tokens';
+import { BLUE_500 } from '../../tokens/build/js/tokens';
 import { GlBreakpointInstance } from '../breakpoints';
 import { columnOptions } from '../constants';
 import { areDatesEqual } from '../datetime_utility';

package/dist/utils/charts/mock_data.js

@@ -1,4 +1,4 @@
-import { BLUE_500 } from '../../../dist/tokens/js/tokens';
+import { BLUE_500 } from '../../tokens/build/js/tokens';
 import { hexToRgba } from '../utils';
 import { colorFromDefaultPalette } from './theme';
 

package/dist/utils/charts/theme.js

@@ -1,4 +1,4 @@
-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 { 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 { scrollHandleSvgPath } from '../svgs/svg_paths';
 import { hexToRgba } from '../utils';
 

package/package.json

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

package/src/components/base/keyset_pagination/keyset_pagination.md

@@ -29,10 +29,10 @@ Example:
 <gl-keyset-pagination v-bind="pageInfo" :prev-text="__('Prev')" :next-text="__('Next')" />
 ```
 
-**✅ Do** use this component for paginating GraphQL requests<sup>1</sup> (or any
+**✅ Do** use this component for paginating GraphQL requests[^1] (or any
 endpoint that uses keyset pagination).
 
-**❌ Don't** use this component for paginating REST requests<sup>1</sup> (or any
+**❌ Don't** use this component for paginating REST requests[^1] (or any
 endpoint that uses offset pagination).
 
 For offset pagination, use the [`GlPagination`
@@ -42,12 +42,7 @@ For more information on the difference between offset and keyset pagination see
 [our documentation on GraphQL
 pagination](https://docs.gitlab.com/ee/development/graphql_guide/pagination.html).
 
-<small><sup>1</sup>There's no intrinsic reason why GraphQL endpoints can't
-support offset pagination (in fact, [the official
-documentation](https://graphql.org/learn/pagination/#pagination-and-edges) shows
-an example offset pagination implementation) or why REST endpoints can't support
-keyset pagination. This is simply how we've chosen to implement our REST and
-GraphQL endpoints at GitLab.</small>
+[^1]: There's no intrinsic reason why GraphQL endpoints can't support offset pagination (in fact, [the official documentation](https://graphql.org/learn/pagination/#pagination-and-edges) shows an example offset pagination implementation) or why REST endpoints can't support keyset pagination. This is simply how we've chosen to implement our REST and GraphQL endpoints at GitLab.
 
 ## Pajamas reference
 

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 { DATA_VIZ_AQUA_500, DATA_VIZ_ORANGE_600 } from '../../../../dist/tokens/js/tokens';
+import { DATA_VIZ_AQUA_500, DATA_VIZ_ORANGE_600 } from '../../../tokens/build/js/tokens';
 import { timeSeriesDateFormatter } from '../../../utils/charts/utils';
 import { generateTimeSeries } from '../../../utils/data_utils';
 import { disableControls } from '../../../utils/stories_utils';

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

@@ -1,6 +1,6 @@
 <script>
 import merge from 'lodash/merge';
-import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
+import { GRAY_200 } from '../../../tokens/build/js/tokens';
 import {
   defaultChartOptions,
   dataZoomAdjustments,

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 '../../../../dist/tokens/js/tokens';
+import { WHITE, GRAY_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';

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 { GRAY_200 } from '../../../../dist/tokens/js/tokens';
+import { GRAY_200 } from '../../../tokens/build/js/tokens';
 import readme from './legend.md';
 
 const generateOptions = (seriesLength, seriesNameType) => {

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 { GRAY_200 } from '../../../../dist/tokens/js/tokens';
+import { GRAY_200 } from '../../../tokens/build/js/tokens';
 import { defaultFontSize } from '../../../utils/charts/config';
 import {
   LEGEND_LAYOUT_INLINE,

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

@@ -19,7 +19,7 @@
  */
 
 import merge from 'lodash/merge';
-import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
+import { GRAY_200 } from '../../../tokens/build/js/tokens';
 import {
   defaultChartOptions,
   grid,

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

@@ -11,7 +11,7 @@ import {
   DATA_VIZ_AQUA_500,
   DATA_VIZ_GREEN_600,
   DATA_VIZ_MAGENTA_500,
-} from '../../../../dist/tokens/js/tokens';
+} from '../../../tokens/build/js/tokens';
 import readme from './stacked_column.md';
 
 const template = `

package/src/scss/tokens.scss

@@ -1,2 +1,2 @@
-@import '../../dist/tokens/css/tokens';
-@import '../../dist/tokens/css/tokens.dark';
+@import '../tokens/build/css/tokens';
+@import '../tokens/build/css/tokens.dark';

package/src/scss/variables.scss

@@ -1,5 +1,5 @@
 @import 'functions';
-@import '../../dist/tokens/scss/tokens';
+@import '../tokens/build/scss/tokens';
 
 // Layout
 $grid-size: px-to-rem(8px);

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -0,0 +1,246 @@
+/**
+ * Automatically generated
+ * Do not edit directly
+ */
+
+$data-viz-green-50: var(--data-viz-green-50);
+$data-viz-green-100: var(--data-viz-green-100);
+$data-viz-green-200: var(--data-viz-green-200);
+$data-viz-green-300: var(--data-viz-green-300);
+$data-viz-green-400: var(--data-viz-green-400);
+$data-viz-green-500: var(--data-viz-green-500);
+$data-viz-green-600: var(--data-viz-green-600);
+$data-viz-green-700: var(--data-viz-green-700);
+$data-viz-green-800: var(--data-viz-green-800);
+$data-viz-green-900: var(--data-viz-green-900);
+$data-viz-green-950: var(--data-viz-green-950);
+$data-viz-aqua-50: var(--data-viz-aqua-50);
+$data-viz-aqua-100: var(--data-viz-aqua-100);
+$data-viz-aqua-200: var(--data-viz-aqua-200);
+$data-viz-aqua-300: var(--data-viz-aqua-300);
+$data-viz-aqua-400: var(--data-viz-aqua-400);
+$data-viz-aqua-500: var(--data-viz-aqua-500);
+$data-viz-aqua-600: var(--data-viz-aqua-600);
+$data-viz-aqua-700: var(--data-viz-aqua-700);
+$data-viz-aqua-800: var(--data-viz-aqua-800);
+$data-viz-aqua-900: var(--data-viz-aqua-900);
+$data-viz-aqua-950: var(--data-viz-aqua-950);
+$data-viz-blue-50: var(--data-viz-blue-50);
+$data-viz-blue-100: var(--data-viz-blue-100);
+$data-viz-blue-200: var(--data-viz-blue-200);
+$data-viz-blue-300: var(--data-viz-blue-300);
+$data-viz-blue-400: var(--data-viz-blue-400);
+$data-viz-blue-500: var(--data-viz-blue-500);
+$data-viz-blue-600: var(--data-viz-blue-600);
+$data-viz-blue-700: var(--data-viz-blue-700);
+$data-viz-blue-800: var(--data-viz-blue-800);
+$data-viz-blue-900: var(--data-viz-blue-900);
+$data-viz-blue-950: var(--data-viz-blue-950);
+$data-viz-magenta-50: var(--data-viz-magenta-50);
+$data-viz-magenta-100: var(--data-viz-magenta-100);
+$data-viz-magenta-200: var(--data-viz-magenta-200);
+$data-viz-magenta-300: var(--data-viz-magenta-300);
+$data-viz-magenta-400: var(--data-viz-magenta-400);
+$data-viz-magenta-500: var(--data-viz-magenta-500);
+$data-viz-magenta-600: var(--data-viz-magenta-600);
+$data-viz-magenta-700: var(--data-viz-magenta-700);
+$data-viz-magenta-800: var(--data-viz-magenta-800);
+$data-viz-magenta-900: var(--data-viz-magenta-900);
+$data-viz-magenta-950: var(--data-viz-magenta-950);
+$data-viz-orange-50: var(--data-viz-orange-50);
+$data-viz-orange-100: var(--data-viz-orange-100);
+$data-viz-orange-200: var(--data-viz-orange-200);
+$data-viz-orange-300: var(--data-viz-orange-300);
+$data-viz-orange-400: var(--data-viz-orange-400);
+$data-viz-orange-500: var(--data-viz-orange-500);
+$data-viz-orange-600: var(--data-viz-orange-600);
+$data-viz-orange-700: var(--data-viz-orange-700);
+$data-viz-orange-800: var(--data-viz-orange-800);
+$data-viz-orange-900: var(--data-viz-orange-900);
+$data-viz-orange-950: var(--data-viz-orange-950);
+$theme-indigo-10: var(--theme-indigo-10);
+$theme-indigo-50: var(--theme-indigo-50);
+$theme-indigo-100: var(--theme-indigo-100);
+$theme-indigo-200: var(--theme-indigo-200);
+$theme-indigo-300: var(--theme-indigo-300);
+$theme-indigo-400: var(--theme-indigo-400);
+$theme-indigo-500: var(--theme-indigo-500);
+$theme-indigo-600: var(--theme-indigo-600);
+$theme-indigo-700: var(--theme-indigo-700);
+$theme-indigo-800: var(--theme-indigo-800);
+$theme-indigo-900: var(--theme-indigo-900);
+$theme-indigo-950: var(--theme-indigo-950);
+$theme-blue-10: var(--theme-blue-10);
+$theme-blue-50: var(--theme-blue-50);
+$theme-blue-100: var(--theme-blue-100);
+$theme-blue-200: var(--theme-blue-200);
+$theme-blue-300: var(--theme-blue-300);
+$theme-blue-400: var(--theme-blue-400);
+$theme-blue-500: var(--theme-blue-500);
+$theme-blue-600: var(--theme-blue-600);
+$theme-blue-700: var(--theme-blue-700);
+$theme-blue-800: var(--theme-blue-800);
+$theme-blue-900: var(--theme-blue-900);
+$theme-blue-950: var(--theme-blue-950);
+$theme-light-blue-10: var(--theme-light-blue-10);
+$theme-light-blue-50: var(--theme-light-blue-50);
+$theme-light-blue-100: var(--theme-light-blue-100);
+$theme-light-blue-200: var(--theme-light-blue-200);
+$theme-light-blue-300: var(--theme-light-blue-300);
+$theme-light-blue-400: var(--theme-light-blue-400);
+$theme-light-blue-500: var(--theme-light-blue-500);
+$theme-light-blue-600: var(--theme-light-blue-600);
+$theme-light-blue-700: var(--theme-light-blue-700);
+$theme-light-blue-800: var(--theme-light-blue-800);
+$theme-light-blue-900: var(--theme-light-blue-900);
+$theme-light-blue-950: var(--theme-light-blue-950);
+$theme-green-10: var(--theme-green-10);
+$theme-green-50: var(--theme-green-50);
+$theme-green-100: var(--theme-green-100);
+$theme-green-200: var(--theme-green-200);
+$theme-green-300: var(--theme-green-300);
+$theme-green-400: var(--theme-green-400);
+$theme-green-500: var(--theme-green-500);
+$theme-green-600: var(--theme-green-600);
+$theme-green-700: var(--theme-green-700);
+$theme-green-800: var(--theme-green-800);
+$theme-green-900: var(--theme-green-900);
+$theme-green-950: var(--theme-green-950);
+$theme-red-10: var(--theme-red-10);
+$theme-red-50: var(--theme-red-50);
+$theme-red-100: var(--theme-red-100);
+$theme-red-200: var(--theme-red-200);
+$theme-red-300: var(--theme-red-300);
+$theme-red-400: var(--theme-red-400);
+$theme-red-500: var(--theme-red-500);
+$theme-red-600: var(--theme-red-600);
+$theme-red-700: var(--theme-red-700);
+$theme-red-800: var(--theme-red-800);
+$theme-red-900: var(--theme-red-900);
+$theme-red-950: var(--theme-red-950);
+$theme-light-red-10: var(--theme-light-red-10);
+$theme-light-red-50: var(--theme-light-red-50);
+$theme-light-red-100: var(--theme-light-red-100);
+$theme-light-red-200: var(--theme-light-red-200);
+$theme-light-red-300: var(--theme-light-red-300);
+$theme-light-red-400: var(--theme-light-red-400);
+$theme-light-red-500: var(--theme-light-red-500);
+$theme-light-red-600: var(--theme-light-red-600);
+$theme-light-red-700: var(--theme-light-red-700);
+$theme-light-red-800: var(--theme-light-red-800);
+$theme-light-red-900: var(--theme-light-red-900);
+$theme-light-red-950: var(--theme-light-red-950);
+$black: var(--black);
+$white: var(--white);
+$blue-50: var(--blue-50);
+$blue-100: var(--blue-100);
+$blue-200: var(--blue-200);
+$blue-300: var(--blue-300);
+$blue-400: var(--blue-400);
+$blue-500: var(--blue-500);
+$blue-600: var(--blue-600);
+$blue-700: var(--blue-700);
+$blue-800: var(--blue-800);
+$blue-900: var(--blue-900);
+$blue-950: var(--blue-950);
+$gray-10: var(--gray-10);
+$gray-50: var(--gray-50);
+$gray-100: var(--gray-100);
+$gray-200: var(--gray-200);
+$gray-300: var(--gray-300);
+$gray-400: var(--gray-400);
+$gray-500: var(--gray-500);
+$gray-600: var(--gray-600);
+$gray-700: var(--gray-700);
+$gray-800: var(--gray-800);
+$gray-900: var(--gray-900);
+$gray-950: var(--gray-950);
+$green-50: var(--green-50);
+$green-100: var(--green-100);
+$green-200: var(--green-200);
+$green-300: var(--green-300);
+$green-400: var(--green-400);
+$green-500: var(--green-500);
+$green-600: var(--green-600);
+$green-700: var(--green-700);
+$green-800: var(--green-800);
+$green-900: var(--green-900);
+$green-950: var(--green-950);
+$orange-50: var(--orange-50);
+$orange-100: var(--orange-100);
+$orange-200: var(--orange-200);
+$orange-300: var(--orange-300);
+$orange-400: var(--orange-400);
+$orange-500: var(--orange-500);
+$orange-600: var(--orange-600);
+$orange-700: var(--orange-700);
+$orange-800: var(--orange-800);
+$orange-900: var(--orange-900);
+$orange-950: var(--orange-950);
+$purple-50: var(--purple-50);
+$purple-100: var(--purple-100);
+$purple-200: var(--purple-200);
+$purple-300: var(--purple-300);
+$purple-400: var(--purple-400);
+$purple-500: var(--purple-500);
+$purple-600: var(--purple-600);
+$purple-700: var(--purple-700);
+$purple-800: var(--purple-800);
+$purple-900: var(--purple-900);
+$purple-950: var(--purple-950);
+$red-50: var(--red-50);
+$red-100: var(--red-100);
+$red-200: var(--red-200);
+$red-300: var(--red-300);
+$red-400: var(--red-400);
+$red-500: var(--red-500);
+$red-600: var(--red-600);
+$red-700: var(--red-700);
+$red-800: var(--red-800);
+$red-900: var(--red-900);
+$red-950: var(--red-950);
+$brand-charcoal: var(--brand-charcoal);
+$brand-orange-01: var(--brand-orange-01);
+$brand-orange-02: var(--brand-orange-02);
+$brand-orange-03: var(--brand-orange-03);
+$brand-purple-01: var(--brand-purple-01);
+$brand-purple-02: var(--brand-purple-02);
+$brand-gray-01: var(--brand-gray-01);
+$brand-gray-02: var(--brand-gray-02);
+$brand-gray-03: var(--brand-gray-03);
+$brand-gray-04: var(--brand-gray-04);
+$brand-gray-05: var(--brand-gray-05);
+$t-gray-a-16: var(--t-gray-a-16);
+$t-gray-a-24: var(--t-gray-a-24);
+$t-gray-a-02: var(--t-gray-a-02);
+$t-gray-a-04: var(--t-gray-a-04);
+$t-gray-a-06: var(--t-gray-a-06);
+$t-gray-a-08: var(--t-gray-a-08);
+$t-white-a-16: var(--t-white-a-16);
+$t-white-a-24: var(--t-white-a-24);
+$t-white-a-36: var(--t-white-a-36);
+$t-white-a-02: var(--t-white-a-02);
+$t-white-a-04: var(--t-white-a-04);
+$t-white-a-06: var(--t-white-a-06);
+$t-white-a-08: var(--t-white-a-08);
+$gl-line-height-12: var(--gl-line-height-12);
+$gl-line-height-16: var(--gl-line-height-16);
+$gl-line-height-20: var(--gl-line-height-20);
+$gl-line-height-24: var(--gl-line-height-24);
+$gl-line-height-28: var(--gl-line-height-28);
+$gl-line-height-32: var(--gl-line-height-32);
+$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-text-primary: var(--gl-text-primary);
+$gl-text-secondary: var(--gl-text-secondary);
+$gl-text-tertiary: var(--gl-text-tertiary);
+$gl-text-color-default: var(--gl-text-color-default);
+$gl-text-color-subtle: var(--gl-text-color-subtle);
+$gl-text-color-strong: var(--gl-text-color-strong);
+$gl-text-color-heading: var(--gl-text-color-heading);
+$gl-text-color-link: var(--gl-text-color-link);
+$gl-text-color-danger: var(--gl-text-color-danger);
+$gl-text-color-success: var(--gl-text-color-success);
+$gl-text-color-disabled: var(--gl-text-color-disabled);

package/src/tokens/color.dark.tokens.stories.js

@@ -1,4 +1,4 @@
-import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
+import COMPILED_TOKENS from './build/json/tokens.dark.json';
 import { createDesignTokenStory } from './common_story_options';
 
 export const Default = createDesignTokenStory({

package/src/tokens/color.data_viz.dark.tokens.stories.js

@@ -1,4 +1,4 @@
-import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
+import COMPILED_TOKENS from './build/json/tokens.dark.json';
 import { createDesignTokenStory } from './common_story_options';
 
 export const DataVizGreen = createDesignTokenStory({ tokens: COMPILED_TOKENS['data-viz'].green });

package/src/tokens/color.data_viz.tokens.stories.js

@@ -1,4 +1,4 @@
-import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
+import COMPILED_TOKENS from './build/json/tokens.json';
 import { createDesignTokenStory } from './common_story_options';
 
 export const DataVizGreen = createDesignTokenStory({ tokens: COMPILED_TOKENS['data-viz'].green });

package/src/tokens/color.theme.dark.tokens.stories.js

@@ -1,4 +1,4 @@
-import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
+import COMPILED_TOKENS from './build/json/tokens.dark.json';
 import { createDesignTokenStory } from './common_story_options';
 
 export const ThemeIndigo = createDesignTokenStory({ tokens: COMPILED_TOKENS.theme.indigo });

package/src/tokens/color.theme.tokens.stories.js

@@ -1,4 +1,4 @@
-import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
+import COMPILED_TOKENS from './build/json/tokens.json';
 import { createDesignTokenStory } from './common_story_options';
 
 export const ThemeIndigo = createDesignTokenStory({ tokens: COMPILED_TOKENS.theme.indigo });

package/src/tokens/color.tokens.stories.js

@@ -1,4 +1,4 @@
-import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
+import COMPILED_TOKENS from './build/json/tokens.json';
 import { createDesignTokenStory } from './common_story_options';
 
 export const Default = createDesignTokenStory({

package/src/tokens/color.transparency.tokens.stories.js

@@ -1,4 +1,4 @@
-import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
+import COMPILED_TOKENS from './build/json/tokens.json';
 import { createDesignTokenStory } from './common_story_options';
 
 export const Gray = createDesignTokenStory({ tokens: COMPILED_TOKENS['t-gray-a'] });

package/src/tokens/common_story_options.js

@@ -1,4 +1,4 @@
-import { WHITE, GRAY_950 } from '../../dist/tokens/js/tokens';
+import { WHITE, GRAY_950 } from './build/js/tokens';
 import TokensStory from './tokens_story.vue';
 
 export const createDesignTokenStory = ({

package/src/tokens/text.dark.tokens.stories.js

@@ -1,4 +1,4 @@
-import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
+import COMPILED_TOKENS from './build/json/tokens.dark.json';
 import { createDesignTokenStory } from './common_story_options';
 
 export const Default = createDesignTokenStory({

package/src/tokens/text.tokens.stories.js

@@ -1,4 +1,4 @@
-import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
+import COMPILED_TOKENS from './build/json/tokens.json';
 import { createDesignTokenStory } from './common_story_options';
 
 export const Default = createDesignTokenStory({

package/src/tokens/tokens.stories.js

@@ -0,0 +1,16 @@
+import TokensTable from './tokens_table.vue';
+
+const Template = () => ({
+  components: {
+    TokensTable,
+  },
+  template: `<tokens-table />`,
+});
+
+export const Default = Template.bind({});
+
+export default {
+  title: 'tokens/all',
+  component: TokensTable,
+  tags: ['skip-visual-test'],
+};

package/src/tokens/tokens_table.vue

@@ -0,0 +1,151 @@
+<script>
+import GlBadge from '../components/base/badge/badge.vue';
+import GlCollapsibleListbox from '../components/base/new_dropdowns/listbox/listbox.vue';
+import GlFormInput from '../components/base/form/form_input/form_input.vue';
+import GlTable from '../components/base/table/table.vue';
+import TOKENS_DEFAULT from './build/json/tokens.json';
+import TOKENS_DARK from './build/json/tokens.dark.json';
+
+export default {
+  name: 'TokensTable',
+  TOKENS_DEFAULT,
+  TOKENS_DARK,
+  components: {
+    GlBadge,
+    GlCollapsibleListbox,
+    GlFormInput,
+    GlTable,
+  },
+  fields: [
+    {
+      key: 'description',
+      label: 'Description',
+    },
+    {
+      key: 'value',
+      label: 'Value',
+    },
+  ],
+  data() {
+    return {
+      filter: null,
+      modes: [
+        {
+          value: 'default',
+          text: 'Default',
+        },
+        {
+          value: 'dark',
+          text: 'Dark',
+        },
+      ],
+      selectedMode: 'default',
+      tokens: {
+        default: this.$options.TOKENS_DEFAULT,
+        dark: this.$options.TOKENS_DARK,
+      },
+    };
+  },
+  computed: {
+    items() {
+      return this.transformTokensToTableRows(this.tokens[this.selectedMode]);
+    },
+  },
+  methods: {
+    isColor(type) {
+      return type === 'color';
+    },
+    isAliasValue(value) {
+      return typeof value === 'string' && value.includes('{');
+    },
+    isAliasObject(value) {
+      return (
+        typeof value === 'object' && Object.values(value).some((val) => this.isAliasValue(val))
+      );
+    },
+    getAliasValueName(value) {
+      if (this.isAliasValue(value)) {
+        return value.slice(1, -1);
+      }
+      return value;
+    },
+    getValueLabel(token) {
+      const { value } = token.original;
+      if (this.isAliasObject(value)) {
+        return this.getAliasValueName(value[this.selectedMode]);
+      }
+      if (this.isAliasValue(value)) {
+        return this.getAliasValueName(value);
+      }
+      return token.value;
+    },
+    transformTokenToTableColumns(token) {
+      return {
+        name: token.path.filter(Boolean).join('.'),
+        type: token.$type,
+        value: token.value,
+        valueLabel: this.getValueLabel(token),
+        deprecated: token.deprecated,
+        description: token.comment,
+      };
+    },
+    transformTokensToTableRows(tokens) {
+      const tokensArray = [];
+
+      Object.keys(tokens).forEach((key) => {
+        const token = tokens[key];
+        if (token.value) {
+          tokensArray.push(this.transformTokenToTableColumns(token));
+        } else {
+          tokensArray.push(...this.transformTokensToTableRows(token));
+        }
+      });
+
+      return tokensArray;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="gl-display-flex gl-align-items-center gl-gap-3 gl-mb-5">
+      <gl-form-input v-model="filter" placeholder="Type to search" />
+      <gl-collapsible-listbox
+        id="component-listbox"
+        v-model="selectedMode"
+        :selected="selectedMode"
+        :items="modes"
+        @search="query = $event"
+      />
+    </div>
+    <gl-table
+      :filter="filter"
+      :items="items"
+      :fields="$options.fields"
+      :tbody-tr-attr="(item) => ({ id: item.name })"
+      hover
+      stacked="sm"
+    >
+      <template #cell(description)="{ item: { name, deprecated, description } }">
+        <code class="gl-font-base gl-text-strong">
+          {{ name }}
+          <gl-badge v-if="deprecated" size="sm" variant="neutral">Deprecated</gl-badge>
+        </code>
+        <div v-if="description" class="gl-mt-3 gl-text-subtle">
+          {{ description }}
+        </div>
+      </template>
+      <template #cell(value)="{ item: { type, value, valueLabel } }">
+        <div class="gl-display-flex gl-align-items-center gl-gap-3">
+          <div
+            v-if="isColor(type)"
+            class="gl-w-5 gl-h-5 gl-rounded-base"
+            :style="{ 'background-color': value }"
+          ></div>
+          <code class="gl-font-base gl-text-strong">{{ valueLabel }}</code>
+        </div>
+      </template>
+    </gl-table>
+  </div>
+</template>

package/src/utils/charts/config.js

@@ -1,6 +1,6 @@
 import castArray from 'lodash/castArray';
 import merge from 'lodash/merge';
-import { BLUE_500 } from '../../../dist/tokens/js/tokens';
+import { BLUE_500 } from '../../tokens/build/js/tokens';
 import { GlBreakpointInstance } from '../breakpoints';
 import { columnOptions } from '../constants';
 import { areDatesEqual } from '../datetime_utility';

package/src/utils/charts/mock_data.js

@@ -1,4 +1,4 @@
-import { BLUE_500 } from '../../../dist/tokens/js/tokens';
+import { BLUE_500 } from '../../tokens/build/js/tokens';
 import { hexToRgba } from '../utils';
 import { colorFromDefaultPalette } from './theme';
 

package/src/utils/charts/theme.js

@@ -63,7 +63,7 @@ import {
   DATA_VIZ_ORANGE_800,
   DATA_VIZ_ORANGE_950,
   DATA_VIZ_ORANGE_900,
-} from '../../../dist/tokens/js/tokens';
+} from '../../tokens/build/js/tokens';
 import { scrollHandleSvgPath } from '../svgs/svg_paths';
 import { hexToRgba } from '../utils';