@gitlab/ui 72.11.1 → 72.12.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [72.12.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.12.0...v72.12.1) (2024-01-24)
+
+
+### Bug Fixes
+
+* Building of `dist/` folder ([6592727](https://gitlab.com/gitlab-org/gitlab-ui/commit/6592727b7b2de66a5d40111d37fd331ca65e2411))
+
+# [72.12.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.11.1...v72.12.0) (2024-01-24)
+
+
+### Features
+
+* **DesignTokens:** create GlColorContrast component ([17dfa56](https://gitlab.com/gitlab-org/gitlab-ui/commit/17dfa56d0839681a741195910a86debeaede491b))
+
 ## [72.11.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.11.0...v72.11.1) (2024-01-23)
 
 

package/dist/tokens/common_story_options.js

@@ -1,29 +1,16 @@
-import { colorFromBackground, relativeLuminance, rgbFromHex } from '../utils/utils';
 import { WHITE, GRAY_950 } from '../../dist/tokens/js/tokens';
+import { colorFromBackground } from '../utils/utils';
+import GlColorContrast from '../internal/color_contrast/color_contrast';
 
-const CONTRAST_LEVELS = [{
-  grade: 'F',
-  min: 0,
-  max: 3
-}, {
-  grade: 'AA+',
-  min: 3,
-  max: 4.5
-}, {
-  grade: 'AA',
-  min: 4.5,
-  max: 7
-}, {
-  grade: 'AAA',
-  min: 7,
-  max: 22
-}];
+const components = {
+  GlColorContrast
+};
 const methods = {
   isAlpha(value) {
     return value.startsWith('rgba(');
   },
-  getTokenName(name, key) {
-    return [name, key].filter(Boolean).join('.');
+  getTokenName(token) {
+    return token.path.filter(Boolean).join('.');
   },
   getTextColorClass(value) {
     if (this.isAlpha(value)) return '';
@@ -32,78 +19,36 @@ const methods = {
       'gl-text-gray-950': textColorVariant === 'dark',
       'gl-text-white': textColorVariant === 'light'
     };
-  },
-  getColorContrast() {
-    let foreground = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
-    let background = arguments.length > 1 ? arguments[1] : undefined;
-    const foregroundColor = {
-      light: WHITE,
-      dark: GRAY_950
-    };
-    // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
-    const foregroundLuminance = relativeLuminance(rgbFromHex(foregroundColor[foreground])) + 0.05;
-    const backgroundLuminance = relativeLuminance(rgbFromHex(background)) + 0.05;
-    let score = foregroundLuminance / backgroundLuminance;
-    if (backgroundLuminance > foregroundLuminance) {
-      score = 1 / score;
-    }
-    const level = CONTRAST_LEVELS.find(_ref => {
-      let {
-        min,
-        max
-      } = _ref;
-      return score >= min && score < max;
-    });
-    return {
-      score: (Math.round(score * 10) / 10).toFixed(1),
-      level
-    };
-  },
-  getColorContrastClass(foreground, background) {
-    const {
-      grade
-    } = this.getColorContrast(foreground, background).level;
-    const isFail = grade === 'F';
-    const classes = {
-      light: isFail ? 'gl-inset-border-1-red-500 gl-text-red-500' : 'gl-text-gray-950',
-      dark: isFail ? 'gl-inset-border-1-red-300 gl-text-red-300' : 'gl-text-white'
-    };
-    return classes[foreground];
   }
 };
-const template = `
+const template = function () {
+  let lightBackground = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : WHITE;
+  let darkBackground = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : GRAY_950;
+  return `
   <ul
     class="gl-list-style-none gl-m-0 gl-p-0"
   >
     <li
-      v-for="(token, key) in tokens"
-      :key="key"
+      v-for="token in tokens"
+      :key="token.name"
       class="gl-display-flex gl-flex-wrap gl-align-items-center gl-justify-content-space-between gl-gap-3 gl-p-3"
-      :class="getTextColorClass(token.$value)"
-      :style="{ backgroundColor: token.$value }"
+      :class="getTextColorClass(token.value)"
+      :style="{ backgroundColor: token.value }"
     >
-      <code class="gl-reset-color">{{ getTokenName(name, key) }}</code>
+      <code class="gl-reset-color">{{ getTokenName(token) }}</code>
       <div class="gl-display-flex gl-align-items-center gl-gap-3">
-        <code class="gl-reset-color">{{ token.$value }}</code>
-        <code
-          v-if="!isAlpha(token.$value)"
-          class="gl-w-10 gl-text-center gl-rounded-base gl-font-xs gl-p-2 gl-bg-gray-950"
-          :class="getColorContrastClass('dark', token.$value)"
-        >
-          {{ getColorContrast('dark', token.$value).level.grade }}
-          {{ getColorContrast('dark', token.$value).score }}
-        </code>
-        <code
-          v-if="!isAlpha(token.$value)"
-          class="gl-w-10 gl-text-center gl-rounded-base gl-font-xs gl-p-2 gl-bg-white"
-          :class="getColorContrastClass('light', token.$value)"
-        >
-          {{ getColorContrast('light', token.$value).level.grade }}
-          {{ getColorContrast('light', token.$value).score }}
-        </code>
+        <code class="gl-reset-color">{{ token.value }}</code>
+        <gl-color-contrast v-if="!isAlpha(token.value)" :foreground="token.value" background="${darkBackground}" />
+        <gl-color-contrast v-if="!isAlpha(token.value)" :foreground="token.value" background="${lightBackground}" />
       </div>
     </li>
   </ul>
 `;
+};
+const colorTokenStoryOptions = {
+  components,
+  methods,
+  template: template()
+};
 
-export { methods, template };
+export { colorTokenStoryOptions, components, methods, template };

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jan 2024 17:14:57 GMT
+ * Generated on Wed, 24 Jan 2024 12:28:35 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jan 2024 17:14:57 GMT
+ * Generated on Wed, 24 Jan 2024 12:28:35 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jan 2024 17:14:58 GMT
+ * Generated on Wed, 24 Jan 2024 12:28:35 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jan 2024 17:14:57 GMT
+ * Generated on Wed, 24 Jan 2024 12:28:35 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 23 Jan 2024 17:14:58 GMT
+// Generated on Wed, 24 Jan 2024 12:28:35 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 23 Jan 2024 17:14:57 GMT
+// Generated on Wed, 24 Jan 2024 12:28:35 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/dist/utils/constants.js

@@ -7,6 +7,24 @@ function appendDefaultOption(options) {
   };
 }
 const COMMA = ',';
+const CONTRAST_LEVELS = [{
+  grade: 'F',
+  min: 0,
+  max: 3
+}, {
+  grade: 'AA+',
+  min: 3,
+  max: 4.5
+}, {
+  grade: 'AA',
+  min: 4.5,
+  max: 7
+}, {
+  grade: 'AAA',
+  min: 7,
+  max: 22
+}];
+const HEX_REGEX = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
 const LEFT_MOUSE_BUTTON = 0;
 const glThemes = ['indigo', 'blue', 'light-blue', 'green', 'red', 'light-red'];
 const variantOptions = {
@@ -267,4 +285,4 @@ const loadingIconVariants = {
   dots: 'dots'
 };
 
-export { COMMA, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };
+export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };

package/dist/utils/utils.js

@@ -1,5 +1,5 @@
 import { isVisible } from 'bootstrap-vue/esm/utils/dom';
-import { COMMA, labelColorOptions, focusableTags } from './constants';
+import { COMMA, labelColorOptions, CONTRAST_LEVELS, focusableTags } from './constants';
 
 function debounceByAnimationFrame(fn) {
   let requestId;
@@ -78,6 +78,26 @@ function colorFromBackground(backgroundColor) {
   // as this will solve weird color combinations in the mid tones
   return contrastLight >= contrastRatio || contrastLight > contrastDark ? labelColorOptions.light : labelColorOptions.dark;
 }
+function getColorContrast(foreground, background) {
+  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+  const backgroundLuminance = relativeLuminance(rgbFromHex(background)) + 0.05;
+  const foregroundLuminance = relativeLuminance(rgbFromHex(foreground)) + 0.05;
+  let score = backgroundLuminance / foregroundLuminance;
+  if (foregroundLuminance > backgroundLuminance) {
+    score = 1 / score;
+  }
+  const level = CONTRAST_LEVELS.find(_ref => {
+    let {
+      min,
+      max
+    } = _ref;
+    return score >= min && score < max;
+  });
+  return {
+    score: (Math.round(score * 10) / 10).toFixed(1),
+    level
+  };
+}
 function uid() {
   return Math.random().toString(36).substring(2);
 }
@@ -174,4 +194,4 @@ function filterVisible(els) {
   return (els || []).filter(el => isVisible(el));
 }
 
-export { colorFromBackground, debounceByAnimationFrame, filterVisible, focusFirstFocusableElement, hexToRgba, isDev, isElementFocusable, isElementTabbable, logWarning, relativeLuminance, rgbFromHex, rgbFromString, stopEvent, throttle, toSrgb, uid };
+export { colorFromBackground, debounceByAnimationFrame, filterVisible, focusFirstFocusableElement, getColorContrast, hexToRgba, isDev, isElementFocusable, isElementTabbable, logWarning, relativeLuminance, rgbFromHex, rgbFromString, stopEvent, throttle, toSrgb, uid };

package/package.json

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

package/src/internal/color_contrast/color_contrast.md

@@ -0,0 +1,8 @@
+## Usage
+
+`GlColorContrast` is an **internal** component to display color contrast
+scores and levels for design token stories.
+
+`GlColorContrast` accepts `foreground` and `background` color props to
+calculate a contrast score (e.g. `4.5`) and level (e.g. `AA`) consistent
+with [WCAG 2.1 1.4.3: Contrast (Minimum) level](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html).

package/src/internal/color_contrast/color_contrast.spec.js

@@ -0,0 +1,34 @@
+import { shallowMount } from '@vue/test-utils';
+import ColorContrast from './color_contrast.vue';
+
+describe('color contrast component', () => {
+  let wrapper;
+
+  const createComponent = (props) => {
+    wrapper = shallowMount(ColorContrast, {
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  it('renders AAA level and score', () => {
+    createComponent({ foreground: '#000', background: '#fff' });
+    expect(wrapper.text()).toBe('AAA 21.0');
+  });
+
+  it('renders AA level and score', () => {
+    createComponent({ foreground: '#666', background: '#fff' });
+    expect(wrapper.text()).toBe('AA 5.7');
+  });
+
+  it('renders AA+ level and score', () => {
+    createComponent({ foreground: '#888', background: '#fff' });
+    expect(wrapper.text()).toBe('AA+ 3.5');
+  });
+
+  it('renders F level and score', () => {
+    createComponent({ foreground: '#999', background: '#fff' });
+    expect(wrapper.text()).toBe('F 2.8');
+  });
+});

package/src/internal/color_contrast/color_contrast.stories.js

@@ -0,0 +1,41 @@
+import GlColorContrast from './color_contrast.vue';
+import readme from './color_contrast.md';
+
+const components = { GlColorContrast };
+
+const generateProps = ({ foreground = '#ffffff', background = '#1f75cb' } = {}) => ({
+  foreground,
+  background,
+});
+
+export const Default = (args, { argTypes }) => ({
+  components,
+  props: Object.keys(argTypes),
+  template: `
+    <gl-color-contrast
+      :foreground="foreground"
+      :background="background"
+    />
+  `,
+});
+Default.args = generateProps();
+
+export default {
+  title: 'internal/color_contrast',
+  component: GlColorContrast,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    foreground: {
+      control: 'color',
+    },
+    background: {
+      control: 'color',
+    },
+  },
+};

package/src/internal/color_contrast/color_contrast.vue

@@ -0,0 +1,52 @@
+<script>
+import { HEX_REGEX } from '../../utils/constants';
+import { getColorContrast } from '../../utils/utils';
+
+export default {
+  name: 'GlColorContrast',
+  props: {
+    foreground: {
+      type: String,
+      required: true,
+      validator: (value) => HEX_REGEX.test(value),
+    },
+    background: {
+      type: String,
+      required: true,
+      validator: (value) => HEX_REGEX.test(value),
+    },
+  },
+  computed: {
+    isValidColorCombination() {
+      return HEX_REGEX.test(this.foreground) && HEX_REGEX.test(this.background);
+    },
+    classes() {
+      if (!this.isValidColorCombination) return 'gl-text-gray-950';
+      const { grade } = this.contrast.level;
+      const isFail = grade === 'F';
+      const contrastScore = getColorContrast('#fff', this.background).score > 4.5;
+      const textClass = contrastScore ? 'gl-text-white' : 'gl-text-gray-950';
+      const failClasses = contrastScore
+        ? 'gl-inset-border-1-red-300 gl-text-red-300'
+        : 'gl-inset-border-1-red-500 gl-text-red-500';
+      return [textClass, isFail ? failClasses : ''];
+    },
+    contrast() {
+      return getColorContrast(this.foreground, this.background);
+    },
+  },
+};
+</script>
+
+<template>
+  <code
+    class="gl-w-10 gl-text-center gl-rounded-base gl-font-xs gl-p-2"
+    :class="classes"
+    :style="{ backgroundColor: background }"
+  >
+    <template v-if="isValidColorCombination">
+      {{ contrast.level.grade }} {{ contrast.score }}
+    </template>
+    <template v-else>???</template>
+  </code>
+</template>

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

@@ -1,40 +1,54 @@
-import { methods, template } from './common_story_options';
-import colorTokens from './color.dark.tokens.json';
+import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
+import { colorTokenStoryOptions } from './common_story_options';
 
-const generateProps = ({ name = '', tokens = colorTokens } = {}) => ({
-  name,
-  tokens,
-});
+const generateProps = ({ tokens = {} } = {}) => ({ tokens });
 
 export const Default = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
 Default.args = generateProps({
   tokens: {
-    white: colorTokens.white,
-    black: colorTokens.black,
+    white: COMPILED_TOKENS.white,
+    black: COMPILED_TOKENS.black,
   },
 });
 
-export const Gray = (args, { argTypes }) => ({ props: Object.keys(argTypes), methods, template });
-Gray.args = generateProps({ name: 'gray', tokens: colorTokens.gray });
+export const Gray = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...colorTokenStoryOptions,
+});
+Gray.args = generateProps({ tokens: COMPILED_TOKENS.gray });
 
-export const Blue = (args, { argTypes }) => ({ props: Object.keys(argTypes), methods, template });
-Blue.args = generateProps({ name: 'blue', tokens: colorTokens.blue });
+export const Blue = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...colorTokenStoryOptions,
+});
+Blue.args = generateProps({ tokens: COMPILED_TOKENS.blue });
 
-export const Green = (args, { argTypes }) => ({ props: Object.keys(argTypes), methods, template });
-Green.args = generateProps({ name: 'green', tokens: colorTokens.green });
+export const Green = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...colorTokenStoryOptions,
+});
+Green.args = generateProps({ tokens: COMPILED_TOKENS.green });
 
-export const Orange = (args, { argTypes }) => ({ props: Object.keys(argTypes), methods, template });
-Orange.args = generateProps({ name: 'orange', tokens: colorTokens.orange });
+export const Orange = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...colorTokenStoryOptions,
+});
+Orange.args = generateProps({ tokens: COMPILED_TOKENS.orange });
 
-export const Red = (args, { argTypes }) => ({ props: Object.keys(argTypes), methods, template });
-Red.args = generateProps({ name: 'red', tokens: colorTokens.red });
+export const Red = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...colorTokenStoryOptions,
+});
+Red.args = generateProps({ tokens: COMPILED_TOKENS.red });
 
-export const Purple = (args, { argTypes }) => ({ props: Object.keys(argTypes), methods, template });
-Purple.args = generateProps({ name: 'purple', tokens: colorTokens.purple });
+export const Purple = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...colorTokenStoryOptions,
+});
+Purple.args = generateProps({ tokens: COMPILED_TOKENS.purple });
 
 // eslint-disable-next-line storybook/csf-component
 export default {

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

@@ -1,54 +1,37 @@
-import { methods, template } from './common_story_options';
-import colorTokens from './color.data_viz.dark.tokens.json';
+import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
+import { colorTokenStoryOptions } from './common_story_options';
 
-const generateProps = ({ name = '', tokens = colorTokens } = {}) => ({
-  name,
-  tokens,
-});
+const generateProps = ({ tokens = {} } = {}) => ({ tokens });
 
 export const DataVizGreen = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
-});
-DataVizGreen.args = generateProps({
-  name: 'data-viz.green',
-  tokens: colorTokens['data-viz'].green,
+  ...colorTokenStoryOptions,
 });
+DataVizGreen.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].green });
 
 export const DataVizAqua = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-DataVizAqua.args = generateProps({ name: 'data-viz.aqua', tokens: colorTokens['data-viz'].aqua });
+DataVizAqua.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].aqua });
 
 export const DataVizBlue = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-DataVizBlue.args = generateProps({ name: 'data-viz.blue', tokens: colorTokens['data-viz'].blue });
+DataVizBlue.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].blue });
 
 export const DataVizMagenta = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
-});
-DataVizMagenta.args = generateProps({
-  name: 'data-viz.magenta',
-  tokens: colorTokens['data-viz'].magenta,
+  ...colorTokenStoryOptions,
 });
+DataVizMagenta.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].magenta });
 
 export const DataVizOrange = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
-});
-DataVizOrange.args = generateProps({
-  name: 'data-viz.orange',
-  tokens: colorTokens['data-viz'].orange,
+  ...colorTokenStoryOptions,
 });
+DataVizOrange.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].orange });
 
 // eslint-disable-next-line storybook/csf-component
 export default {

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

@@ -1,54 +1,37 @@
-import { methods, template } from './common_story_options';
-import colorTokens from './color.data_viz.tokens.json';
+import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
+import { colorTokenStoryOptions } from './common_story_options';
 
-const generateProps = ({ name = '', tokens = colorTokens } = {}) => ({
-  name,
-  tokens,
-});
+const generateProps = ({ tokens = {} } = {}) => ({ tokens });
 
 export const DataVizGreen = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
-});
-DataVizGreen.args = generateProps({
-  name: 'data-viz.green',
-  tokens: colorTokens['data-viz'].green,
+  ...colorTokenStoryOptions,
 });
+DataVizGreen.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].green });
 
 export const DataVizAqua = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-DataVizAqua.args = generateProps({ name: 'data-viz.aqua', tokens: colorTokens['data-viz'].aqua });
+DataVizAqua.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].aqua });
 
 export const DataVizBlue = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-DataVizBlue.args = generateProps({ name: 'data-viz.blue', tokens: colorTokens['data-viz'].blue });
+DataVizBlue.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].blue });
 
 export const DataVizMagenta = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
-});
-DataVizMagenta.args = generateProps({
-  name: 'data-viz.magenta',
-  tokens: colorTokens['data-viz'].magenta,
+  ...colorTokenStoryOptions,
 });
+DataVizMagenta.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].magenta });
 
 export const DataVizOrange = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
-});
-DataVizOrange.args = generateProps({
-  name: 'data-viz.orange',
-  tokens: colorTokens['data-viz'].orange,
+  ...colorTokenStoryOptions,
 });
+DataVizOrange.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].orange });
 
 // eslint-disable-next-line storybook/csf-component
 export default {

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

@@ -1,58 +1,43 @@
-import { methods, template } from './common_story_options';
-import colorTokens from './color.theme.dark.tokens.json';
+import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
+import { colorTokenStoryOptions } from './common_story_options';
 
-const generateProps = ({ name = '', tokens = colorTokens } = {}) => ({
-  name,
-  tokens,
-});
+const generateProps = ({ tokens = {} } = {}) => ({ tokens });
 
 export const ThemeIndigo = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-ThemeIndigo.args = generateProps({ name: 'theme.indigo', tokens: colorTokens.theme.indigo });
+ThemeIndigo.args = generateProps({ tokens: COMPILED_TOKENS.theme.indigo });
 
 export const ThemeBlue = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-ThemeBlue.args = generateProps({ name: 'theme.blue', tokens: colorTokens.theme.blue });
+ThemeBlue.args = generateProps({ tokens: COMPILED_TOKENS.theme.blue });
 
 export const ThemeLightBlue = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
-});
-ThemeLightBlue.args = generateProps({
-  name: 'theme.light-blue',
-  tokens: colorTokens.theme['light-blue'],
+  ...colorTokenStoryOptions,
 });
+ThemeLightBlue.args = generateProps({ tokens: COMPILED_TOKENS.theme['light-blue'] });
 
 export const ThemeGreen = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-ThemeGreen.args = generateProps({ name: 'theme.green', tokens: colorTokens.theme.green });
+ThemeGreen.args = generateProps({ tokens: COMPILED_TOKENS.theme.green });
 
 export const ThemeRed = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-ThemeRed.args = generateProps({ name: 'theme.red', tokens: colorTokens.theme.red });
+ThemeRed.args = generateProps({ tokens: COMPILED_TOKENS.theme.red });
 
 export const ThemeLightRed = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
-});
-ThemeLightRed.args = generateProps({
-  name: 'theme.light-red',
-  tokens: colorTokens.theme['light-red'],
+  ...colorTokenStoryOptions,
 });
+ThemeLightRed.args = generateProps({ tokens: COMPILED_TOKENS.theme['light-red'] });
 
 // eslint-disable-next-line storybook/csf-component
 export default {

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

@@ -1,58 +1,43 @@
-import { methods, template } from './common_story_options';
-import colorTokens from './color.theme.tokens.json';
+import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
+import { colorTokenStoryOptions } from './common_story_options';
 
-const generateProps = ({ name = '', tokens = colorTokens } = {}) => ({
-  name,
-  tokens,
-});
+const generateProps = ({ tokens = {} } = {}) => ({ tokens });
 
 export const ThemeIndigo = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-ThemeIndigo.args = generateProps({ name: 'theme.indigo', tokens: colorTokens.theme.indigo });
+ThemeIndigo.args = generateProps({ tokens: COMPILED_TOKENS.theme.indigo });
 
 export const ThemeBlue = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-ThemeBlue.args = generateProps({ name: 'theme.blue', tokens: colorTokens.theme.blue });
+ThemeBlue.args = generateProps({ tokens: COMPILED_TOKENS.theme.blue });
 
 export const ThemeLightBlue = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
-});
-ThemeLightBlue.args = generateProps({
-  name: 'theme.light-blue',
-  tokens: colorTokens.theme['light-blue'],
+  ...colorTokenStoryOptions,
 });
+ThemeLightBlue.args = generateProps({ tokens: COMPILED_TOKENS.theme['light-blue'] });
 
 export const ThemeGreen = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-ThemeGreen.args = generateProps({ name: 'theme.green', tokens: colorTokens.theme.green });
+ThemeGreen.args = generateProps({ tokens: COMPILED_TOKENS.theme.green });
 
 export const ThemeRed = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-ThemeRed.args = generateProps({ name: 'theme.red', tokens: colorTokens.theme.red });
+ThemeRed.args = generateProps({ tokens: COMPILED_TOKENS.theme.red });
 
 export const ThemeLightRed = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
-});
-ThemeLightRed.args = generateProps({
-  name: 'theme.light-red',
-  tokens: colorTokens.theme['light-red'],
+  ...colorTokenStoryOptions,
 });
+ThemeLightRed.args = generateProps({ tokens: COMPILED_TOKENS.theme['light-red'] });
 
 // eslint-disable-next-line storybook/csf-component
 export default {

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

@@ -1,40 +1,54 @@
-import { methods, template } from './common_story_options';
-import colorTokens from './color.tokens.json';
+import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
+import { colorTokenStoryOptions } from './common_story_options';
 
-const generateProps = ({ name = '', tokens = colorTokens } = {}) => ({
-  name,
-  tokens,
-});
+const generateProps = ({ tokens = {} } = {}) => ({ tokens });
 
 export const Default = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
 Default.args = generateProps({
   tokens: {
-    white: colorTokens.white,
-    black: colorTokens.black,
+    white: COMPILED_TOKENS.white,
+    black: COMPILED_TOKENS.black,
   },
 });
 
-export const Gray = (args, { argTypes }) => ({ props: Object.keys(argTypes), methods, template });
-Gray.args = generateProps({ name: 'gray', tokens: colorTokens.gray });
+export const Gray = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...colorTokenStoryOptions,
+});
+Gray.args = generateProps({ tokens: COMPILED_TOKENS.gray });
 
-export const Blue = (args, { argTypes }) => ({ props: Object.keys(argTypes), methods, template });
-Blue.args = generateProps({ name: 'blue', tokens: colorTokens.blue });
+export const Blue = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...colorTokenStoryOptions,
+});
+Blue.args = generateProps({ tokens: COMPILED_TOKENS.blue });
 
-export const Green = (args, { argTypes }) => ({ props: Object.keys(argTypes), methods, template });
-Green.args = generateProps({ name: 'green', tokens: colorTokens.green });
+export const Green = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...colorTokenStoryOptions,
+});
+Green.args = generateProps({ tokens: COMPILED_TOKENS.green });
 
-export const Orange = (args, { argTypes }) => ({ props: Object.keys(argTypes), methods, template });
-Orange.args = generateProps({ name: 'orange', tokens: colorTokens.orange });
+export const Orange = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...colorTokenStoryOptions,
+});
+Orange.args = generateProps({ tokens: COMPILED_TOKENS.orange });
 
-export const Red = (args, { argTypes }) => ({ props: Object.keys(argTypes), methods, template });
-Red.args = generateProps({ name: 'red', tokens: colorTokens.red });
+export const Red = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...colorTokenStoryOptions,
+});
+Red.args = generateProps({ tokens: COMPILED_TOKENS.red });
 
-export const Purple = (args, { argTypes }) => ({ props: Object.keys(argTypes), methods, template });
-Purple.args = generateProps({ name: 'purple', tokens: colorTokens.purple });
+export const Purple = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...colorTokenStoryOptions,
+});
+Purple.args = generateProps({ tokens: COMPILED_TOKENS.purple });
 
 // eslint-disable-next-line storybook/csf-component
 export default {

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

@@ -1,24 +1,21 @@
-import { methods, template } from './common_story_options';
-import colorTokens from './color.transparency.tokens.json';
+import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
+import { colorTokenStoryOptions } from './common_story_options';
 
-const generateProps = ({ name = '', tokens = colorTokens } = {}) => ({
-  name,
-  tokens,
-});
+const generateProps = ({ tokens = {} } = {}) => ({ tokens });
 
 export const Gray = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-Gray.args = generateProps({ name: 't-gray-a', tokens: colorTokens['t-gray-a'] });
+Gray.args = generateProps({ tokens: COMPILED_TOKENS['t-gray-a'] });
 
 export const White = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template: `<div class="gl-bg-gray-900 gl-text-white">${template}</div>`,
+  components: colorTokenStoryOptions.components,
+  methods: colorTokenStoryOptions.methods,
+  template: `<div class="gl-bg-gray-900 gl-text-white">${colorTokenStoryOptions.template}</div>`,
 });
-White.args = generateProps({ name: 't-white-a', tokens: colorTokens['t-white-a'] });
+White.args = generateProps({ tokens: COMPILED_TOKENS['t-white-a'] });
 
 // eslint-disable-next-line storybook/csf-component
 export default {

package/src/tokens/common_story_options.js

@@ -1,35 +1,17 @@
-import { colorFromBackground, relativeLuminance, rgbFromHex } from '../utils/utils';
 import { WHITE, GRAY_950 } from '../../dist/tokens/js/tokens';
+import { colorFromBackground } from '../utils/utils';
+import GlColorContrast from '../internal/color_contrast/color_contrast.vue';
 
-const CONTRAST_LEVELS = [
-  {
-    grade: 'F',
-    min: 0,
-    max: 3,
-  },
-  {
-    grade: 'AA+',
-    min: 3,
-    max: 4.5,
-  },
-  {
-    grade: 'AA',
-    min: 4.5,
-    max: 7,
-  },
-  {
-    grade: 'AAA',
-    min: 7,
-    max: 22,
-  },
-];
+export const components = {
+  GlColorContrast,
+};
 
 export const methods = {
   isAlpha(value) {
     return value.startsWith('rgba(');
   },
-  getTokenName(name, key) {
-    return [name, key].filter(Boolean).join('.');
+  getTokenName(token) {
+    return token.path.filter(Boolean).join('.');
   },
   getTextColorClass(value) {
     if (this.isAlpha(value)) return '';
@@ -39,71 +21,31 @@ export const methods = {
       'gl-text-white': textColorVariant === 'light',
     };
   },
-  getColorContrast(foreground = 'light', background) {
-    const foregroundColor = {
-      light: WHITE,
-      dark: GRAY_950,
-    };
-    // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
-    const foregroundLuminance = relativeLuminance(rgbFromHex(foregroundColor[foreground])) + 0.05;
-    const backgroundLuminance = relativeLuminance(rgbFromHex(background)) + 0.05;
-
-    let score = foregroundLuminance / backgroundLuminance;
-    if (backgroundLuminance > foregroundLuminance) {
-      score = 1 / score;
-    }
-
-    const level = CONTRAST_LEVELS.find(({ min, max }) => {
-      return score >= min && score < max;
-    });
-
-    return {
-      score: (Math.round(score * 10) / 10).toFixed(1),
-      level,
-    };
-  },
-  getColorContrastClass(foreground, background) {
-    const { grade } = this.getColorContrast(foreground, background).level;
-    const isFail = grade === 'F';
-    const classes = {
-      light: isFail ? 'gl-inset-border-1-red-500 gl-text-red-500' : 'gl-text-gray-950',
-      dark: isFail ? 'gl-inset-border-1-red-300 gl-text-red-300' : 'gl-text-white',
-    };
-    return classes[foreground];
-  },
 };
 
-export const template = `
+export const template = (lightBackground = WHITE, darkBackground = GRAY_950) => `
   <ul
     class="gl-list-style-none gl-m-0 gl-p-0"
   >
     <li
-      v-for="(token, key) in tokens"
-      :key="key"
+      v-for="token in tokens"
+      :key="token.name"
       class="gl-display-flex gl-flex-wrap gl-align-items-center gl-justify-content-space-between gl-gap-3 gl-p-3"
-      :class="getTextColorClass(token.$value)"
-      :style="{ backgroundColor: token.$value }"
+      :class="getTextColorClass(token.value)"
+      :style="{ backgroundColor: token.value }"
     >
-      <code class="gl-reset-color">{{ getTokenName(name, key) }}</code>
+      <code class="gl-reset-color">{{ getTokenName(token) }}</code>
       <div class="gl-display-flex gl-align-items-center gl-gap-3">
-        <code class="gl-reset-color">{{ token.$value }}</code>
-        <code
-          v-if="!isAlpha(token.$value)"
-          class="gl-w-10 gl-text-center gl-rounded-base gl-font-xs gl-p-2 gl-bg-gray-950"
-          :class="getColorContrastClass('dark', token.$value)"
-        >
-          {{ getColorContrast('dark', token.$value).level.grade }}
-          {{ getColorContrast('dark', token.$value).score }}
-        </code>
-        <code
-          v-if="!isAlpha(token.$value)"
-          class="gl-w-10 gl-text-center gl-rounded-base gl-font-xs gl-p-2 gl-bg-white"
-          :class="getColorContrastClass('light', token.$value)"
-        >
-          {{ getColorContrast('light', token.$value).level.grade }}
-          {{ getColorContrast('light', token.$value).score }}
-        </code>
+        <code class="gl-reset-color">{{ token.value }}</code>
+        <gl-color-contrast v-if="!isAlpha(token.value)" :foreground="token.value" background="${darkBackground}" />
+        <gl-color-contrast v-if="!isAlpha(token.value)" :foreground="token.value" background="${lightBackground}" />
       </div>
     </li>
   </ul>
 `;
+
+export const colorTokenStoryOptions = {
+  components,
+  methods,
+  template: template(),
+};

package/src/utils/constants.js

@@ -6,6 +6,31 @@ function appendDefaultOption(options) {
 
 export const COMMA = ',';
 
+export const CONTRAST_LEVELS = [
+  {
+    grade: 'F',
+    min: 0,
+    max: 3,
+  },
+  {
+    grade: 'AA+',
+    min: 3,
+    max: 4.5,
+  },
+  {
+    grade: 'AA',
+    min: 4.5,
+    max: 7,
+  },
+  {
+    grade: 'AAA',
+    min: 7,
+    max: 22,
+  },
+];
+
+export const HEX_REGEX = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+
 export const LEFT_MOUSE_BUTTON = 0;
 
 export const glThemes = ['indigo', 'blue', 'light-blue', 'green', 'red', 'light-red'];

package/src/utils/utils.js

@@ -1,5 +1,5 @@
 import { isVisible } from 'bootstrap-vue/src/utils/dom';
-import { COMMA, labelColorOptions, focusableTags } from './constants';
+import { COMMA, CONTRAST_LEVELS, labelColorOptions, focusableTags } from './constants';
 
 export function debounceByAnimationFrame(fn) {
   let requestId;
@@ -90,6 +90,26 @@ export function colorFromBackground(backgroundColor, contrastRatio = 2.4) {
     : labelColorOptions.dark;
 }
 
+export function getColorContrast(foreground, background) {
+  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+  const backgroundLuminance = relativeLuminance(rgbFromHex(background)) + 0.05;
+  const foregroundLuminance = relativeLuminance(rgbFromHex(foreground)) + 0.05;
+
+  let score = backgroundLuminance / foregroundLuminance;
+  if (foregroundLuminance > backgroundLuminance) {
+    score = 1 / score;
+  }
+
+  const level = CONTRAST_LEVELS.find(({ min, max }) => {
+    return score >= min && score < max;
+  });
+
+  return {
+    score: (Math.round(score * 10) / 10).toFixed(1),
+    level,
+  };
+}
+
 export function uid() {
   return Math.random().toString(36).substring(2);
 }