@gitlab/ui 79.1.1 → 79.3.0

package/dist/tokens/css/tokens.css

@@ -1,12 +1,20 @@
 /**
  * Do not edit directly
- * Generated on Wed, 24 Apr 2024 14:36:20 GMT
+ * Generated on Thu, 25 Apr 2024 08:42:27 GMT
  */
 
 :root {
-  --gl-text-tertiary: #89888d;
-  --gl-text-secondary: #737278;
-  --gl-text-primary: #333238;
+  --gl-text-color-disabled: #89888d; /* Used for disabled text. */
+  --gl-text-color-success: #217645; /* Used for text indicating success or validity. */
+  --gl-text-color-danger: #c91c00; /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
+  --gl-text-color-link: #0b5cad; /* Used for default text links. */
+  --gl-text-color-heading: #1f1e24; /* Used for headings level 1-6. */
+  --gl-text-color-strong: #1f1e24; /* Used for text with the highest contrast. */
+  --gl-text-color-subtle: #626168; /* Used for supplemental text that doesn't need to be as prominent as other text. */
+  --gl-text-color-default: #434248; /* Used for the default text color. */
+  --gl-text-tertiary: #89888d; /* Use text.color.disabled instead */
+  --gl-text-secondary: #737278; /* Use text.color.subtle instead */
+  --gl-text-primary: #333238; /* Use text.color.strong instead */
   --gl-line-height-52: 3.25rem;
   --gl-line-height-44: 2.75rem;
   --gl-line-height-42: 2.625rem;

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

@@ -1,12 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Wed, 24 Apr 2024 14:36:21 GMT
+ * Generated on Thu, 25 Apr 2024 08:42:27 GMT
  */
 
 :root.gl-dark {
-  --gl-text-tertiary: #737278;
-  --gl-text-secondary: #89888d;
-  --gl-text-primary: #ececef;
+  --gl-text-color-disabled: #89888d; /* Used for disabled text. */
+  --gl-text-color-link: #63a6e9; /* Used for default text links. */
+  --gl-text-color-heading: #fff; /* Used for headings level 1-6. */
+  --gl-text-color-strong: #fff; /* Used for text with the highest contrast. */
+  --gl-text-color-subtle: #bfbfc3; /* Used for supplemental text that doesn't need to be as prominent as other text. */
+  --gl-text-color-default: #ececef; /* Used for the default text color. */
+  --gl-text-tertiary: #737278; /* Use text.color.disabled instead */
+  --gl-text-secondary: #89888d; /* Use text.color.subtle instead */
+  --gl-text-primary: #ececef; /* Use text.color.strong instead */
   --red-950: #fff4f3;
   --red-900: #fcf1ef;
   --red-800: #fdd4cd;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 24 Apr 2024 14:36:21 GMT
+ * Generated on Thu, 25 Apr 2024 08:42:27 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";
@@ -199,6 +199,12 @@ export const RED_700 = "#fcb5aa";
 export const RED_800 = "#fdd4cd";
 export const RED_900 = "#fcf1ef";
 export const RED_950 = "#fff4f3";
-export const GL_TEXT_PRIMARY = "#ececef";
-export const GL_TEXT_SECONDARY = "#89888d";
-export const GL_TEXT_TERTIARY = "#737278";
+export const GL_TEXT_PRIMARY = "#ececef"; // Use text.color.strong instead
+export const GL_TEXT_SECONDARY = "#89888d"; // Use text.color.subtle instead
+export const GL_TEXT_TERTIARY = "#737278"; // Use text.color.disabled instead
+export const GL_TEXT_COLOR_DEFAULT = "#ececef"; // Used for the default text color.
+export const GL_TEXT_COLOR_SUBTLE = "#bfbfc3"; // Used for supplemental text that doesn't need to be as prominent as other text.
+export const GL_TEXT_COLOR_STRONG = "#fff"; // Used for text with the highest contrast.
+export const GL_TEXT_COLOR_HEADING = "#fff"; // Used for headings level 1-6.
+export const GL_TEXT_COLOR_LINK = "#63a6e9"; // Used for default text links.
+export const GL_TEXT_COLOR_DISABLED = "#89888d"; // Used for disabled text.

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 24 Apr 2024 14:36:20 GMT
+ * Generated on Thu, 25 Apr 2024 08:42:27 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";
@@ -233,6 +233,14 @@ export const GL_LINE_HEIGHT_36 = "2.25rem";
 export const GL_LINE_HEIGHT_42 = "2.625rem";
 export const GL_LINE_HEIGHT_44 = "2.75rem";
 export const GL_LINE_HEIGHT_52 = "3.25rem";
-export const GL_TEXT_PRIMARY = "#333238";
-export const GL_TEXT_SECONDARY = "#737278";
-export const GL_TEXT_TERTIARY = "#89888d";
+export const GL_TEXT_PRIMARY = "#333238"; // Use text.color.strong instead
+export const GL_TEXT_SECONDARY = "#737278"; // Use text.color.subtle instead
+export const GL_TEXT_TERTIARY = "#89888d"; // Use text.color.disabled instead
+export const GL_TEXT_COLOR_DEFAULT = "#434248"; // Used for the default text color.
+export const GL_TEXT_COLOR_SUBTLE = "#626168"; // Used for supplemental text that doesn't need to be as prominent as other text.
+export const GL_TEXT_COLOR_STRONG = "#1f1e24"; // Used for text with the highest contrast.
+export const GL_TEXT_COLOR_HEADING = "#1f1e24"; // Used for headings level 1-6.
+export const GL_TEXT_COLOR_LINK = "#0b5cad"; // Used for default text links.
+export const GL_TEXT_COLOR_DANGER = "#c91c00"; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
+export const GL_TEXT_COLOR_SUCCESS = "#217645"; // Used for text indicating success or validity.
+export const GL_TEXT_COLOR_DISABLED = "#89888d"; // Used for disabled text.

package/dist/tokens/json/tokens.dark.grouped.json

@@ -222,7 +222,15 @@
     "t-white-a-08": "rgba(255, 255, 255, 0.08)",
     "text-primary": "#ececef",
     "text-secondary": "#89888d",
-    "text-tertiary": "#737278"
+    "text-tertiary": "#737278",
+    "text-color-default": "#ececef",
+    "text-color-subtle": "#bfbfc3",
+    "text-color-strong": "#fff",
+    "text-color-heading": "#fff",
+    "text-color-link": "#63a6e9",
+    "text-color-danger": "#c91c00",
+    "text-color-success": "#217645",
+    "text-color-disabled": "#89888d"
   },
   "dimension": {
     "line-height-12": "0.75rem",

package/dist/tokens/json/tokens.dark.json

@@ -4800,12 +4800,16 @@
     "primary": {
       "value": "#ececef",
       "$type": "color",
+      "comment": "Use text.color.strong instead",
+      "deprecated": true,
       "themeable": true,
       "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
       "isSource": true,
       "original": {
         "value": "#ececef",
         "$type": "color",
+        "comment": "Use text.color.strong instead",
+        "deprecated": true,
         "themeable": true
       },
       "name": "TEXT_PRIMARY",
@@ -4818,12 +4822,16 @@
     "secondary": {
       "value": "#89888d",
       "$type": "color",
+      "comment": "Use text.color.subtle instead",
+      "deprecated": true,
       "themeable": true,
       "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
       "isSource": true,
       "original": {
         "value": "#89888d",
         "$type": "color",
+        "comment": "Use text.color.subtle instead",
+        "deprecated": true,
         "themeable": true
       },
       "name": "TEXT_SECONDARY",
@@ -4836,12 +4844,16 @@
     "tertiary": {
       "value": "#737278",
       "$type": "color",
+      "comment": "Use text.color.disabled instead",
+      "deprecated": true,
       "themeable": true,
       "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
       "isSource": true,
       "original": {
         "value": "#737278",
         "$type": "color",
+        "comment": "Use text.color.disabled instead",
+        "deprecated": true,
         "themeable": true
       },
       "name": "TEXT_TERTIARY",
@@ -4850,6 +4862,176 @@
         "text",
         "tertiary"
       ]
+    },
+    "color": {
+      "default": {
+        "value": "#ececef",
+        "$type": "color",
+        "comment": "Used for the default text color.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#ececef",
+          "$type": "color",
+          "comment": "Used for the default text color.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_DEFAULT",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "default"
+        ]
+      },
+      "subtle": {
+        "value": "#bfbfc3",
+        "$type": "color",
+        "comment": "Used for supplemental text that doesn't need to be as prominent as other text.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#bfbfc3",
+          "$type": "color",
+          "comment": "Used for supplemental text that doesn't need to be as prominent as other text.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_SUBTLE",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "subtle"
+        ]
+      },
+      "strong": {
+        "value": "#fff",
+        "$type": "color",
+        "comment": "Used for text with the highest contrast.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#fff",
+          "$type": "color",
+          "comment": "Used for text with the highest contrast.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_STRONG",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "strong"
+        ]
+      },
+      "heading": {
+        "value": "#fff",
+        "$type": "color",
+        "comment": "Used for headings level 1-6.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#fff",
+          "$type": "color",
+          "comment": "Used for headings level 1-6.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_HEADING",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "heading"
+        ]
+      },
+      "link": {
+        "value": "#63a6e9",
+        "$type": "color",
+        "comment": "Used for default text links.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#63a6e9",
+          "$type": "color",
+          "comment": "Used for default text links.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_LINK",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "link"
+        ]
+      },
+      "danger": {
+        "value": "#c91c00",
+        "$type": "color",
+        "comment": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+        "isSource": false,
+        "original": {
+          "value": "#c91c00",
+          "$type": "color",
+          "comment": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_DANGER",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "danger"
+        ]
+      },
+      "success": {
+        "value": "#217645",
+        "$type": "color",
+        "comment": "Used for text indicating success or validity.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+        "isSource": false,
+        "original": {
+          "value": "#217645",
+          "$type": "color",
+          "comment": "Used for text indicating success or validity.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_SUCCESS",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "success"
+        ]
+      },
+      "disabled": {
+        "value": "#89888d",
+        "$type": "color",
+        "comment": "Used for disabled text.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#89888d",
+          "$type": "color",
+          "comment": "Used for disabled text.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_DISABLED",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "disabled"
+        ]
+      }
     }
   }
 }

package/dist/tokens/json/tokens.grouped.json

@@ -222,7 +222,15 @@
     "t-white-a-08": "rgba(255, 255, 255, 0.08)",
     "text-primary": "#333238",
     "text-secondary": "#737278",
-    "text-tertiary": "#89888d"
+    "text-tertiary": "#89888d",
+    "text-color-default": "#434248",
+    "text-color-subtle": "#626168",
+    "text-color-strong": "#1f1e24",
+    "text-color-heading": "#1f1e24",
+    "text-color-link": "#0b5cad",
+    "text-color-danger": "#c91c00",
+    "text-color-success": "#217645",
+    "text-color-disabled": "#89888d"
   },
   "dimension": {
     "line-height-12": "0.75rem",

package/dist/tokens/json/tokens.json

@@ -4800,12 +4800,16 @@
     "primary": {
       "value": "#333238",
       "$type": "color",
+      "comment": "Use text.color.strong instead",
+      "deprecated": true,
       "themeable": true,
       "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
       "isSource": false,
       "original": {
         "value": "#333238",
         "$type": "color",
+        "comment": "Use text.color.strong instead",
+        "deprecated": true,
         "themeable": true
       },
       "name": "TEXT_PRIMARY",
@@ -4818,12 +4822,16 @@
     "secondary": {
       "value": "#737278",
       "$type": "color",
+      "comment": "Use text.color.subtle instead",
+      "deprecated": true,
       "themeable": true,
       "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
       "isSource": false,
       "original": {
         "value": "#737278",
         "$type": "color",
+        "comment": "Use text.color.subtle instead",
+        "deprecated": true,
         "themeable": true
       },
       "name": "TEXT_SECONDARY",
@@ -4836,12 +4844,16 @@
     "tertiary": {
       "value": "#89888d",
       "$type": "color",
+      "comment": "Use text.color.disabled instead",
+      "deprecated": true,
       "themeable": true,
       "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
       "isSource": false,
       "original": {
         "value": "#89888d",
         "$type": "color",
+        "comment": "Use text.color.disabled instead",
+        "deprecated": true,
         "themeable": true
       },
       "name": "TEXT_TERTIARY",
@@ -4850,6 +4862,176 @@
         "text",
         "tertiary"
       ]
+    },
+    "color": {
+      "default": {
+        "value": "#434248",
+        "$type": "color",
+        "comment": "Used for the default text color.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+        "isSource": false,
+        "original": {
+          "value": "#434248",
+          "$type": "color",
+          "comment": "Used for the default text color.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_DEFAULT",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "default"
+        ]
+      },
+      "subtle": {
+        "value": "#626168",
+        "$type": "color",
+        "comment": "Used for supplemental text that doesn't need to be as prominent as other text.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+        "isSource": false,
+        "original": {
+          "value": "#626168",
+          "$type": "color",
+          "comment": "Used for supplemental text that doesn't need to be as prominent as other text.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_SUBTLE",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "subtle"
+        ]
+      },
+      "strong": {
+        "value": "#1f1e24",
+        "$type": "color",
+        "comment": "Used for text with the highest contrast.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+        "isSource": false,
+        "original": {
+          "value": "#1f1e24",
+          "$type": "color",
+          "comment": "Used for text with the highest contrast.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_STRONG",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "strong"
+        ]
+      },
+      "heading": {
+        "value": "#1f1e24",
+        "$type": "color",
+        "comment": "Used for headings level 1-6.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+        "isSource": false,
+        "original": {
+          "value": "#1f1e24",
+          "$type": "color",
+          "comment": "Used for headings level 1-6.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_HEADING",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "heading"
+        ]
+      },
+      "link": {
+        "value": "#0b5cad",
+        "$type": "color",
+        "comment": "Used for default text links.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+        "isSource": false,
+        "original": {
+          "value": "#0b5cad",
+          "$type": "color",
+          "comment": "Used for default text links.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_LINK",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "link"
+        ]
+      },
+      "danger": {
+        "value": "#c91c00",
+        "$type": "color",
+        "comment": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+        "isSource": false,
+        "original": {
+          "value": "#c91c00",
+          "$type": "color",
+          "comment": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_DANGER",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "danger"
+        ]
+      },
+      "success": {
+        "value": "#217645",
+        "$type": "color",
+        "comment": "Used for text indicating success or validity.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+        "isSource": false,
+        "original": {
+          "value": "#217645",
+          "$type": "color",
+          "comment": "Used for text indicating success or validity.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_SUCCESS",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "success"
+        ]
+      },
+      "disabled": {
+        "value": "#89888d",
+        "$type": "color",
+        "comment": "Used for disabled text.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+        "isSource": false,
+        "original": {
+          "value": "#89888d",
+          "$type": "color",
+          "comment": "Used for disabled text.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_DISABLED",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "disabled"
+        ]
+      }
     }
   }
 }

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

@@ -1,10 +1,16 @@
 
 // Do not edit directly
-// Generated on Wed, 24 Apr 2024 14:36:21 GMT
+// Generated on Thu, 25 Apr 2024 08:42:27 GMT
 
-$gl-text-tertiary: #737278 !default;
-$gl-text-secondary: #89888d !default;
-$gl-text-primary: #ececef !default;
+$gl-text-color-disabled: #89888d !default; // Used for disabled text.
+$gl-text-color-link: #63a6e9 !default; // Used for default text links.
+$gl-text-color-heading: #fff !default; // Used for headings level 1-6.
+$gl-text-color-strong: #fff !default; // Used for text with the highest contrast.
+$gl-text-color-subtle: #bfbfc3 !default; // Used for supplemental text that doesn't need to be as prominent as other text.
+$gl-text-color-default: #ececef !default; // Used for the default text color.
+$gl-text-tertiary: #737278 !default; // Use text.color.disabled instead
+$gl-text-secondary: #89888d !default; // Use text.color.subtle instead
+$gl-text-primary: #ececef !default; // Use text.color.strong instead
 $red-950: #fff4f3;
 $red-900: #fcf1ef;
 $red-800: #fdd4cd;

package/dist/tokens/scss/_tokens.scss

@@ -1,10 +1,18 @@
 
 // Do not edit directly
-// Generated on Wed, 24 Apr 2024 14:36:20 GMT
+// Generated on Thu, 25 Apr 2024 08:42:27 GMT
 
-$gl-text-tertiary: #89888d !default;
-$gl-text-secondary: #737278 !default;
-$gl-text-primary: #333238 !default;
+$gl-text-color-disabled: #89888d !default; // Used for disabled text.
+$gl-text-color-success: #217645 !default; // Used for text indicating success or validity.
+$gl-text-color-danger: #c91c00 !default; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
+$gl-text-color-link: #0b5cad !default; // Used for default text links.
+$gl-text-color-heading: #1f1e24 !default; // Used for headings level 1-6.
+$gl-text-color-strong: #1f1e24 !default; // Used for text with the highest contrast.
+$gl-text-color-subtle: #626168 !default; // Used for supplemental text that doesn't need to be as prominent as other text.
+$gl-text-color-default: #434248 !default; // Used for the default text color.
+$gl-text-tertiary: #89888d !default; // Use text.color.disabled instead
+$gl-text-secondary: #737278 !default; // Use text.color.subtle instead
+$gl-text-primary: #333238 !default; // Use text.color.strong instead
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;
 $gl-line-height-42: 2.625rem;

package/dist/tokens/tokens_story.js

@@ -1,12 +1,18 @@
 import { colorFromBackground } from '../utils/utils';
+import { GlTooltipDirective } from '../directives/tooltip';
+import GlBadge from '../components/base/badge/badge';
 import GlColorContrast from '../internal/color_contrast/color_contrast';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   name: 'TokensStory',
   components: {
+    GlBadge,
     GlColorContrast
   },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
   inject: ['isBackgroundColorStory', 'lightBackground', 'darkBackground', 'containerClass'],
   props: {
     tokens: {
@@ -48,7 +54,7 @@ var 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',{class:_vm.containerClass},[_c('ul',{staticClass:"gl-list-style-none gl-m-0 gl-p-0"},_vm._l((_vm.tokens),function(token){return _c('li',{key:token.name,staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-justify-content-space-between gl-gap-3 gl-p-3",class:_vm.getClasses(token.value),style:(_vm.getStyle(token.value))},[_c('code',{staticClass:"gl-reset-color"},[_vm._v(_vm._s(_vm.getTokenName(token)))]),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-gap-3"},[_c('code',{staticClass:"gl-reset-color"},[_vm._v(_vm._s(token.value))]),_vm._v(" "),(!_vm.isAlpha(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.darkBackground}}):_vm._e(),_vm._v(" "),(!_vm.isAlpha(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.lightBackground}}):_vm._e()],1)])}),0)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.containerClass},[_c('ul',{staticClass:"gl-list-style-none gl-m-0 gl-p-0"},_vm._l((_vm.tokens),function(token){return _c('li',{key:token.name,staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-justify-content-space-between gl-gap-3 gl-p-3",class:_vm.getClasses(token.value),style:(_vm.getStyle(token.value))},[_c('code',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],staticClass:"gl-reset-color",attrs:{"title":token.comment}},[_vm._v("\n        "+_vm._s(_vm.getTokenName(token))+"\n      ")]),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-gap-3"},[(token.deprecated)?_c('gl-badge',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":token.comment,"variant":"danger"}},[_vm._v("\n          Deprecated\n        ")]):_vm._e(),_vm._v(" "),_c('code',{staticClass:"gl-reset-color"},[_vm._v(_vm._s(token.value))]),_vm._v(" "),(!_vm.isAlpha(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.darkBackground}}):_vm._e(),_vm._v(" "),(!_vm.isAlpha(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.lightBackground}}):_vm._e()],1)])}),0)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */