@gitlab/ui 76.0.1 → 77.0.0

package/dist/tokens/common_story_options.js

@@ -9,21 +9,36 @@ const methods = {
   isAlpha(value) {
     return value.startsWith('rgba(');
   },
+  isBackgroundColor(property) {
+    return property === 'backgroundColor';
+  },
   getTokenName(token) {
     return token.path.filter(Boolean).join('.');
   },
-  getTextColorClass(value) {
+  getClasses(property, value) {
     if (this.isAlpha(value)) return '';
+    if (!this.isBackgroundColor(property)) return '';
     const textColorVariant = colorFromBackground(value, 4.5);
     return {
       'gl-text-gray-950': textColorVariant === 'dark',
       'gl-text-white': textColorVariant === 'light'
     };
+  },
+  getStyle(property, value) {
+    if (this.isBackgroundColor(property)) {
+      return {
+        backgroundColor: value
+      };
+    }
+    return {
+      color: value
+    };
   }
 };
-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;
+const colorTemplate = function () {
+  let property = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'backgroundColor';
+  let lightBackground = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : WHITE;
+  let darkBackground = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : GRAY_950;
   return `
   <ul
     class="gl-list-style-none gl-m-0 gl-p-0"
@@ -32,8 +47,8 @@ const template = function () {
       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="getClasses('${property}', token.value)"
+      :style="getStyle('${property}', token.value)"
     >
       <code class="gl-reset-color">{{ getTokenName(token) }}</code>
       <div class="gl-display-flex gl-align-items-center gl-gap-3">
@@ -48,7 +63,12 @@ const template = function () {
 const colorTokenStoryOptions = {
   components,
   methods,
-  template: template()
+  template: colorTemplate('backgroundColor')
+};
+const colorTextTokenStoryOptions = {
+  components,
+  methods,
+  template: colorTemplate('color')
 };
 
-export { colorTokenStoryOptions, components, methods, template };
+export { colorTextTokenStoryOptions, colorTokenStoryOptions, components, methods };

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 27 Feb 2024 00:47:04 GMT
+ * Generated on Tue, 27 Feb 2024 15:36:15 GMT
  */
 
 :root {
@@ -234,4 +234,7 @@
   --data-viz-green-200: #b0d97b;
   --data-viz-green-100: #c6ed94;
   --data-viz-green-50: #ddfab7;
+  --gl-text-tertiary: var(--gray-400);
+  --gl-text-secondary: var(--gray-500);
+  --gl-text-primary: var(--gray-900);
 }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 27 Feb 2024 00:47:04 GMT
+ * Generated on Tue, 27 Feb 2024 15:36:15 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 27 Feb 2024 00:47:04 GMT
+ * Generated on Tue, 27 Feb 2024 15:36:15 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, 27 Feb 2024 00:47:04 GMT
+ * Generated on Tue, 27 Feb 2024 15:36:15 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";
@@ -233,3 +233,6 @@ 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";

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

@@ -219,7 +219,10 @@
     "t-white-a-02": "rgba(255, 255, 255, 0.02)",
     "t-white-a-04": "rgba(255, 255, 255, 0.04)",
     "t-white-a-06": "rgba(255, 255, 255, 0.06)",
-    "t-white-a-08": "rgba(255, 255, 255, 0.08)"
+    "t-white-a-08": "rgba(255, 255, 255, 0.08)",
+    "text-primary": "#ececef",
+    "text-secondary": "#89888d",
+    "text-tertiary": "#737278"
   },
   "dimension": {
     "line-height-12": "0.75rem",

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

@@ -4795,5 +4795,61 @@
         "52"
       ]
     }
+  },
+  "text": {
+    "primary": {
+      "value": "#ececef",
+      "$type": "color",
+      "themeable": true,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "{gray.900}",
+        "$type": "color",
+        "themeable": true
+      },
+      "name": "TEXT_PRIMARY",
+      "attributes": {},
+      "path": [
+        "text",
+        "primary"
+      ]
+    },
+    "secondary": {
+      "value": "#89888d",
+      "$type": "color",
+      "themeable": true,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "{gray.500}",
+        "$type": "color",
+        "themeable": true
+      },
+      "name": "TEXT_SECONDARY",
+      "attributes": {},
+      "path": [
+        "text",
+        "secondary"
+      ]
+    },
+    "tertiary": {
+      "value": "#737278",
+      "$type": "color",
+      "themeable": true,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "{gray.400}",
+        "$type": "color",
+        "themeable": true
+      },
+      "name": "TEXT_TERTIARY",
+      "attributes": {},
+      "path": [
+        "text",
+        "tertiary"
+      ]
+    }
   }
 }

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

@@ -219,7 +219,10 @@
     "t-white-a-02": "rgba(255, 255, 255, 0.02)",
     "t-white-a-04": "rgba(255, 255, 255, 0.04)",
     "t-white-a-06": "rgba(255, 255, 255, 0.06)",
-    "t-white-a-08": "rgba(255, 255, 255, 0.08)"
+    "t-white-a-08": "rgba(255, 255, 255, 0.08)",
+    "text-primary": "#333238",
+    "text-secondary": "#737278",
+    "text-tertiary": "#89888d"
   },
   "dimension": {
     "line-height-12": "0.75rem",

package/dist/tokens/json/tokens.json

@@ -4795,5 +4795,61 @@
         "52"
       ]
     }
+  },
+  "text": {
+    "primary": {
+      "value": "#333238",
+      "$type": "color",
+      "themeable": true,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "{gray.900}",
+        "$type": "color",
+        "themeable": true
+      },
+      "name": "TEXT_PRIMARY",
+      "attributes": {},
+      "path": [
+        "text",
+        "primary"
+      ]
+    },
+    "secondary": {
+      "value": "#737278",
+      "$type": "color",
+      "themeable": true,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "{gray.500}",
+        "$type": "color",
+        "themeable": true
+      },
+      "name": "TEXT_SECONDARY",
+      "attributes": {},
+      "path": [
+        "text",
+        "secondary"
+      ]
+    },
+    "tertiary": {
+      "value": "#89888d",
+      "$type": "color",
+      "themeable": true,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "{gray.400}",
+        "$type": "color",
+        "themeable": true
+      },
+      "name": "TEXT_TERTIARY",
+      "attributes": {},
+      "path": [
+        "text",
+        "tertiary"
+      ]
+    }
   }
 }

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 27 Feb 2024 00:47:04 GMT
+// Generated on Tue, 27 Feb 2024 15:36:15 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 27 Feb 2024 00:47:04 GMT
+// Generated on Tue, 27 Feb 2024 15:36:15 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;
@@ -232,3 +232,6 @@ $data-viz-green-300: #94c25e !default;
 $data-viz-green-200: #b0d97b !default;
 $data-viz-green-100: #c6ed94 !default;
 $data-viz-green-50: #ddfab7 !default;
+$gl-text-tertiary: $gray-400 !default;
+$gl-text-secondary: $gray-500 !default;
+$gl-text-primary: $gray-900 !default;