@gitlab/ui 76.0.0 → 76.1.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [76.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v76.0.1...v76.1.0) (2024-02-27)
+
+
+### Features
+
+* **DesignTokens:** add text design tokens ([7eb5a49](https://gitlab.com/gitlab-org/gitlab-ui/commit/7eb5a49ef97ba40a9d0c1ceb4e2d23b156dc7863))
+
+## [76.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v76.0.0...v76.0.1) (2024-02-27)
+
+
+### Bug Fixes
+
+* **tailwind:** add font sizes to the preset ([02f26b3](https://gitlab.com/gitlab-org/gitlab-ui/commit/02f26b34c39bd0d84e86cec938eefa1f3a15e003))
+* **tailwind:** add font weights to the preset ([84fe175](https://gitlab.com/gitlab-org/gitlab-ui/commit/84fe175a0dfcaf704ab6041479444b58e3608a7e))
+
 # [76.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v75.2.0...v76.0.0) (2024-02-22)
 
 

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 Thu, 22 Feb 2024 15:02:54 GMT
+ * Generated on Tue, 27 Feb 2024 14:33:51 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 Thu, 22 Feb 2024 15:02:54 GMT
+ * Generated on Tue, 27 Feb 2024 14:33:51 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 22 Feb 2024 15:02:54 GMT
+ * Generated on Tue, 27 Feb 2024 14:33:51 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 22 Feb 2024 15:02:54 GMT
+ * Generated on Tue, 27 Feb 2024 14:33:51 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 Thu, 22 Feb 2024 15:02:54 GMT
+// Generated on Tue, 27 Feb 2024 14:33:51 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 22 Feb 2024 15:02:54 GMT
+// Generated on Tue, 27 Feb 2024 14:33:51 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "76.0.0",
+  "version": "76.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -102,23 +102,23 @@
     "@gitlab/eslint-plugin": "19.4.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.84.0",
+    "@gitlab/svgs": "3.85.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "^7.6.16",
-    "@storybook/addon-docs": "^7.6.16",
-    "@storybook/addon-essentials": "^7.6.16",
-    "@storybook/addon-interactions": "^7.6.16",
-    "@storybook/addon-viewport": "^7.6.16",
-    "@storybook/builder-webpack5": "^7.6.16",
-    "@storybook/test": "^7.6.16",
+    "@storybook/addon-a11y": "^7.6.17",
+    "@storybook/addon-docs": "^7.6.17",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-viewport": "^7.6.17",
+    "@storybook/builder-webpack5": "^7.6.17",
+    "@storybook/test": "^7.6.17",
     "@storybook/test-runner": "0.16.0",
-    "@storybook/theming": "^7.6.16",
-    "@storybook/vue": "^7.6.16",
-    "@storybook/vue-webpack5": "^7.6.16",
-    "@storybook/vue3": "^7.6.16",
-    "@storybook/vue3-webpack5": "^7.6.16",
+    "@storybook/theming": "^7.6.17",
+    "@storybook/vue": "^7.6.17",
+    "@storybook/vue-webpack5": "^7.6.17",
+    "@storybook/vue3": "^7.6.17",
+    "@storybook/vue3-webpack5": "^7.6.17",
     "@types/jest-image-snapshot": "^6.4.0",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
@@ -131,7 +131,7 @@
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
     "bootstrap": "4.6.2",
-    "cypress": "13.6.4",
+    "cypress": "13.6.6",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.0.0",
@@ -170,7 +170,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "^7.6.16",
+    "storybook": "^7.6.17",
     "storybook-dark-mode": "3.0.3",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",

package/src/directives/safe_html/safe_html.stories.js

@@ -1,5 +1,5 @@
 import DOMPurify from 'dompurify';
-import GlSafeHtml from './safe_html';
+import { SafeHtmlDirective as SafeHtml } from './safe_html';
 import readme from './safe_html.md';
 
 const { sanitize } = DOMPurify;
@@ -12,7 +12,7 @@ const generateProps = ({
 
 export const Default = (_args, { argTypes }) => ({
   directives: {
-    GlSafeHtml,
+    SafeHtml,
   },
   props: Object.keys(argTypes),
   computed: {
@@ -38,7 +38,7 @@ export const Default = (_args, { argTypes }) => ({
       <tr>
         <td><strong>v-safe-html</strong></td>
         <td><code>{{ sanitizedHtml }}</code></td>
-        <td v-gl-safe-html="unsafeHTML"></td>
+        <td v-safe-html="unsafeHTML"></td>
       </tr>
     </tbody>
   </table>
@@ -48,7 +48,7 @@ Default.args = generateProps();
 
 export default {
   title: 'directives/safe-html-directive',
-  component: GlSafeHtml,
+  component: SafeHtml,
   tags: ['skip-visual-test'],
   parameters: {
     docs: {

package/src/scss/variables.scss

@@ -18,6 +18,7 @@ $gl-spacing-scale-11-5: 9 * $grid-size;
 $gl-spacing-scale-12: 10 * $grid-size;
 $gl-spacing-scale-13: 12 * $grid-size;
 $gl-spacing-scale-15: 15 * $grid-size;
+$gl-spacing-scale-18: 18 * $grid-size;
 $gl-spacing-scale-20: 20 * $grid-size;
 $gl-spacing-scale-26: 26 * $grid-size;
 $gl-spacing-scale-28: 28 * $grid-size;

package/src/tokens/common_story_options.js

@@ -10,20 +10,34 @@ export 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 };
+  },
 };
 
-export const template = (lightBackground = WHITE, darkBackground = GRAY_950) => `
+const colorTemplate = (
+  property = 'backgroundColor',
+  lightBackground = WHITE,
+  darkBackground = GRAY_950
+) => `
   <ul
     class="gl-list-style-none gl-m-0 gl-p-0"
   >
@@ -31,8 +45,8 @@ export const template = (lightBackground = WHITE, darkBackground = GRAY_950) =>
       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">
@@ -47,5 +61,11 @@ export const template = (lightBackground = WHITE, darkBackground = GRAY_950) =>
 export const colorTokenStoryOptions = {
   components,
   methods,
-  template: template(),
+  template: colorTemplate('backgroundColor'),
+};
+
+export const colorTextTokenStoryOptions = {
+  components,
+  methods,
+  template: colorTemplate('color'),
 };

package/src/tokens/text.tokens.json

@@ -0,0 +1,19 @@
+{
+  "text": {
+    "primary": {
+      "$value": "{gray.900}",
+      "$type": "color",
+      "themeable": true
+    },
+    "secondary": {
+      "$value": "{gray.500}",
+      "$type": "color",
+      "themeable": true
+    },
+    "tertiary": {
+      "$value": "{gray.400}",
+      "$type": "color",
+      "themeable": true
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
+import { colorTextTokenStoryOptions } from './common_story_options';
+
+const generateProps = ({ tokens = {} } = {}) => ({ tokens });
+
+export const Default = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...colorTextTokenStoryOptions,
+});
+Default.args = generateProps({ name: 'text', tokens: COMPILED_TOKENS.text });
+
+// eslint-disable-next-line storybook/csf-component
+export default {
+  title: 'tokens/text',
+};

package/tailwind.defaults.js

@@ -66,5 +66,18 @@ module.exports = {
       ...themeColors,
     },
     spacing,
+    fontSize: {
+      xs: '0.625rem',
+      sm: '0.75rem',
+      base: '0.875rem',
+      lg: '1rem',
+    },
+    fontWeight: {
+      100: 100,
+      300: 300,
+      normal: 400,
+      semibold: 500,
+      bold: 600,
+    },
   },
 };