@gitlab/ui 79.2.0 → 79.3.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [79.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v79.2.0...v79.3.0) (2024-04-25)
+
+
+### Features
+
+* **DesignTokens:** add new text colors and deprecate pilot text colors ([818f109](https://gitlab.com/gitlab-org/gitlab-ui/commit/818f109b4151319a7d51025a8eae9bcf2a6e37e4))
+
 # [79.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v79.1.1...v79.2.0) (2024-04-24)
 
 

package/dist/components/base/pagination/pagination.js

@@ -358,13 +358,13 @@ const __vue_script__ = script;
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isVisible)?_c('nav',{staticClass:"gl-pagination text-nowrap",attrs:{"aria-label":"Pagination"}},[_c('ul',{staticClass:"pagination",class:_vm.wrapperClasses},[_c('li',{staticClass:"page-item",class:{
         disabled: _vm.prevPageIsDisabled,
         'flex-fill': _vm.isFillAlign,
-      },attrs:{"aria-hidden":_vm.prevPageIsDisabled}},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link prev-page-item gl-display-flex",attrs:{"aria-label":_vm.prevPageAriaLabel,"href":_vm.prevPageHref},on:{"click":function($event){return _vm.handlePrevious($event, _vm.value - 1)}}},[_vm._t("previous",function(){return [_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.prevText))])]},null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,staticClass:"page-item",class:{
+      },attrs:{"data-testid":"page-item","aria-hidden":_vm.prevPageIsDisabled}},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link prev-page-item gl-display-flex",attrs:{"data-testid":"page-link","aria-label":_vm.prevPageAriaLabel,"href":_vm.prevPageHref},on:{"click":function($event){return _vm.handlePrevious($event, _vm.value - 1)}}},[_vm._t("previous",function(){return [_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.prevText))])]},null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,staticClass:"page-item",class:{
         disabled: item.disabled,
         'flex-fill': _vm.isFillAlign,
-      }},[_c(item.component,_vm._g(_vm._b({tag:"component",staticClass:"page-link",attrs:{"size":"md","aria-disabled":item.disabled}},'component',item.attrs,false),item.listeners),[_vm._t(item.slot,function(){return [_vm._v(_vm._s(item.content))]},null,item.slotData)],2)],1)}),_vm._v(" "),_c('li',{staticClass:"page-item",class:{
+      },attrs:{"data-testid":"page-item"}},[_c(item.component,_vm._g(_vm._b({tag:"component",staticClass:"page-link",attrs:{"data-testid":"page-link","size":"md","aria-disabled":item.disabled}},'component',item.attrs,false),item.listeners),[_vm._t(item.slot,function(){return [_vm._v(_vm._s(item.content))]},null,item.slotData)],2)],1)}),_vm._v(" "),_c('li',{staticClass:"page-item",class:{
         disabled: _vm.nextPageIsDisabled,
         'flex-fill': _vm.isFillAlign,
-      },attrs:{"aria-hidden":_vm.nextPageIsDisabled}},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link next-page-item gl-display-flex",attrs:{"aria-label":_vm.nextPageAriaLabel,"href":_vm.nextPageHref},on:{"click":function($event){return _vm.handleNext($event, _vm.value + 1)}}},[_vm._t("next",function(){return [_c('span',[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})]},null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2)]):_vm._e()};
+      },attrs:{"data-testid":"page-item","aria-hidden":_vm.nextPageIsDisabled}},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link next-page-item gl-display-flex",attrs:{"data-testid":"page-link","aria-label":_vm.nextPageAriaLabel,"href":_vm.nextPageHref},on:{"click":function($event){return _vm.handleNext($event, _vm.value + 1)}}},[_vm._t("next",function(){return [_c('span',[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})]},null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2)]):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/tokens/css/tokens.css

@@ -1,12 +1,20 @@
 /**
  * Do not edit directly
- * Generated on Wed, 24 Apr 2024 16:36:49 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 16:36:49 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 16:36:49 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 16:36:49 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 16:36:49 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 16:36:49 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 */

package/package.json

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

package/src/components/base/pagination/pagination.vue

@@ -379,6 +379,7 @@ export default {
     <ul class="pagination" :class="wrapperClasses">
       <li
         class="page-item"
+        data-testid="page-item"
         :class="{
           disabled: prevPageIsDisabled,
           'flex-fill': isFillAlign,
@@ -387,6 +388,7 @@ export default {
       >
         <component
           :is="prevPageIsDisabled ? 'span' : 'a'"
+          data-testid="page-link"
           class="gl-link page-link prev-page-item gl-display-flex"
           :aria-label="prevPageAriaLabel"
           :href="prevPageHref"
@@ -408,6 +410,7 @@ export default {
         v-for="item in visibleItems"
         :key="item.key"
         class="page-item"
+        data-testid="page-item"
         :class="{
           disabled: item.disabled,
           'flex-fill': isFillAlign,
@@ -415,6 +418,7 @@ export default {
       >
         <component
           :is="item.component"
+          data-testid="page-link"
           size="md"
           :aria-disabled="item.disabled"
           class="page-link"
@@ -442,6 +446,7 @@ export default {
 
       <li
         class="page-item"
+        data-testid="page-item"
         :class="{
           disabled: nextPageIsDisabled,
           'flex-fill': isFillAlign,
@@ -450,6 +455,7 @@ export default {
       >
         <component
           :is="nextPageIsDisabled ? 'span' : 'a'"
+          data-testid="page-link"
           class="gl-link page-link next-page-item gl-display-flex"
           :aria-label="nextPageAriaLabel"
           :href="nextPageHref"

package/src/tokens/text.dark.tokens.json

@@ -3,17 +3,61 @@
     "primary": {
       "$value": "#ececef",
       "$type": "color",
+      "$description": "Use text.color.strong instead",
+      "deprecated": true,
       "themeable": true
     },
     "secondary": {
       "$value": "#89888d",
       "$type": "color",
+      "$description": "Use text.color.subtle instead",
+      "deprecated": true,
       "themeable": true
     },
     "tertiary": {
       "$value": "#737278",
       "$type": "color",
+      "$description": "Use text.color.disabled instead",
+      "deprecated": true,
       "themeable": true
+    },
+    "color": {
+      "default": {
+        "$value": "#ececef",
+        "$type": "color",
+        "$description": "Used for the default text color.",
+        "themeable": true
+      },
+      "subtle": {
+        "$value": "#bfbfc3",
+        "$type": "color",
+        "$description": "Used for supplemental text that doesn't need to be as prominent as other text.",
+        "themeable": true
+      },
+      "strong": {
+        "$value": "#fff",
+        "$type": "color",
+        "$description": "Used for text with the highest contrast.",
+        "themeable": true
+      },
+      "heading": {
+        "$value": "#fff",
+        "$type": "color",
+        "$description": "Used for headings level 1-6.",
+        "themeable": true
+      },
+      "link": {
+        "$value": "#63a6e9",
+        "$type": "color",
+        "$description": "Used for default text links.",
+        "themeable": true
+      },
+      "disabled": {
+        "$value": "#89888d",
+        "$type": "color",
+        "$description": "Used for disabled text.",
+        "themeable": true
+      }
     }
   }
 }

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

@@ -3,7 +3,12 @@ import { createDesignTokenStory } from './common_story_options';
 
 export const Default = createDesignTokenStory({
   containerClass: 'gl-bg-gray-950',
-  tokens: COMPILED_TOKENS.text,
+  tokens: {
+    primary: COMPILED_TOKENS.text.primary,
+    secondary: COMPILED_TOKENS.text.secondary,
+    tertiary: COMPILED_TOKENS.text.tertiary,
+    ...COMPILED_TOKENS.text.color,
+  },
   isBackgroundColorStory: false,
 });
 

package/src/tokens/text.tokens.json

@@ -3,17 +3,73 @@
     "primary": {
       "$value": "#333238",
       "$type": "color",
+      "$description": "Use text.color.strong instead",
+      "deprecated": true,
       "themeable": true
     },
     "secondary": {
       "$value": "#737278",
       "$type": "color",
+      "$description": "Use text.color.subtle instead",
+      "deprecated": true,
       "themeable": true
     },
     "tertiary": {
       "$value": "#89888d",
       "$type": "color",
+      "$description": "Use text.color.disabled instead",
+      "deprecated": true,
       "themeable": true
+    },
+    "color": {
+      "default": {
+        "$value": "#434248",
+        "$type": "color",
+        "$description": "Used for the default text color.",
+        "themeable": true
+      },
+      "subtle": {
+        "$value": "#626168",
+        "$type": "color",
+        "$description": "Used for supplemental text that doesn't need to be as prominent as other text.",
+        "themeable": true
+      },
+      "strong": {
+        "$value": "#1f1e24",
+        "$type": "color",
+        "$description": "Used for text with the highest contrast.",
+        "themeable": true
+      },
+      "heading": {
+        "$value": "#1f1e24",
+        "$type": "color",
+        "$description": "Used for headings level 1-6.",
+        "themeable": true
+      },
+      "link": {
+        "$value": "#0b5cad",
+        "$type": "color",
+        "$description": "Used for default text links.",
+        "themeable": true
+      },
+      "danger": {
+        "$value": "#c91c00",
+        "$type": "color",
+        "$description": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.",
+        "themeable": true
+      },
+      "success": {
+        "$value": "#217645",
+        "$type": "color",
+        "$description": "Used for text indicating success or validity.",
+        "themeable": true
+      },
+      "disabled": {
+        "$value": "#89888d",
+        "$type": "color",
+        "$description": "Used for disabled text.",
+        "themeable": true
+      }
     }
   }
 }

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

@@ -2,7 +2,12 @@ import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
 import { createDesignTokenStory } from './common_story_options';
 
 export const Default = createDesignTokenStory({
-  tokens: COMPILED_TOKENS.text,
+  tokens: {
+    primary: COMPILED_TOKENS.text.primary,
+    secondary: COMPILED_TOKENS.text.secondary,
+    tertiary: COMPILED_TOKENS.text.tertiary,
+    ...COMPILED_TOKENS.text.color,
+  },
   isBackgroundColorStory: false,
 });
 

package/src/tokens/tokens_story.vue

@@ -1,12 +1,18 @@
 <script>
 import { colorFromBackground } from '../utils/utils';
+import { GlTooltipDirective } from '../directives/tooltip';
+import GlBadge from '../components/base/badge/badge.vue';
 import GlColorContrast from '../internal/color_contrast/color_contrast.vue';
 
 export default {
   name: 'TokensStory',
   components: {
+    GlBadge,
     GlColorContrast,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   inject: ['isBackgroundColorStory', 'lightBackground', 'darkBackground', 'containerClass'],
   props: {
     tokens: {
@@ -53,8 +59,13 @@ export default {
         :class="getClasses(token.value)"
         :style="getStyle(token.value)"
       >
-        <code class="gl-reset-color">{{ getTokenName(token) }}</code>
+        <code v-gl-tooltip :title="token.comment" class="gl-reset-color">
+          {{ getTokenName(token) }}
+        </code>
         <div class="gl-display-flex gl-align-items-center gl-gap-3">
+          <gl-badge v-if="token.deprecated" v-gl-tooltip :title="token.comment" variant="danger">
+            Deprecated
+          </gl-badge>
           <code class="gl-reset-color">{{ token.value }}</code>
           <gl-color-contrast
             v-if="!isAlpha(token.value)"

package/tailwind.defaults.js

@@ -26,7 +26,7 @@ const dataVizColors = Object.entries(COMPILED_TOKENS['data-viz']).reduce((acc, [
   return acc;
 }, {});
 
-const textColors = Object.entries(COMPILED_TOKENS.text).reduce((acc, [scale, token]) => {
+const textColors = Object.entries(COMPILED_TOKENS.text.color).reduce((acc, [scale, token]) => {
   acc[scale] = cssCustomPropertyWithValue(token);
   return acc;
 }, {});
@@ -40,6 +40,14 @@ const colors = {
   ...dataVizColors,
 };
 
+const textColor = {
+  ...colors,
+  ...textColors,
+  primary: cssCustomPropertyWithValue(COMPILED_TOKENS.text.primary),
+  secondary: cssCustomPropertyWithValue(COMPILED_TOKENS.text.secondary),
+  tertiary: cssCustomPropertyWithValue(COMPILED_TOKENS.text.tertiary),
+};
+
 const gridSize = 0.5; // rem
 const spacing = {
   0: '0',
@@ -102,9 +110,6 @@ module.exports = {
       semibold: 500,
       bold: 600,
     },
-    textColor: {
-      ...colors,
-      ...textColors,
-    },
+    textColor,
   },
 };