@gitlab/ui 77.4.0 → 77.5.0

package/dist/tokens/css/tokens.css

@@ -1,9 +1,12 @@
 /**
  * Do not edit directly
- * Generated on Wed, 28 Feb 2024 13:41:10 GMT
+ * Generated on Fri, 01 Mar 2024 12:16:54 GMT
  */
 
 :root {
+  --gl-text-tertiary: #89888d;
+  --gl-text-secondary: #737278;
+  --gl-text-primary: #333238;
   --gl-line-height-52: 3.25rem;
   --gl-line-height-44: 2.75rem;
   --gl-line-height-42: 2.625rem;
@@ -234,7 +237,4 @@
   --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,9 +1,12 @@
 /**
  * Do not edit directly
- * Generated on Wed, 28 Feb 2024 13:41:11 GMT
+ * Generated on Fri, 01 Mar 2024 12:16:54 GMT
  */
 
 :root.gl-dark {
+  --gl-text-tertiary: #737278;
+  --gl-text-secondary: #89888d;
+  --gl-text-primary: #ececef;
   --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, 28 Feb 2024 13:41:11 GMT
+ * Generated on Fri, 01 Mar 2024 12:16:54 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";
@@ -199,3 +199,6 @@ 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";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 28 Feb 2024 13:41:10 GMT
+ * Generated on Fri, 01 Mar 2024 12:16:54 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

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

@@ -4801,10 +4801,10 @@
       "value": "#ececef",
       "$type": "color",
       "themeable": true,
-      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
-      "isSource": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
+      "isSource": true,
       "original": {
-        "value": "{gray.900}",
+        "value": "#ececef",
         "$type": "color",
         "themeable": true
       },
@@ -4819,10 +4819,10 @@
       "value": "#89888d",
       "$type": "color",
       "themeable": true,
-      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
-      "isSource": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
+      "isSource": true,
       "original": {
-        "value": "{gray.500}",
+        "value": "#89888d",
         "$type": "color",
         "themeable": true
       },
@@ -4837,10 +4837,10 @@
       "value": "#737278",
       "$type": "color",
       "themeable": true,
-      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
-      "isSource": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
+      "isSource": true,
       "original": {
-        "value": "{gray.400}",
+        "value": "#737278",
         "$type": "color",
         "themeable": true
       },

package/dist/tokens/json/tokens.json

@@ -4804,7 +4804,7 @@
       "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
       "isSource": false,
       "original": {
-        "value": "{gray.900}",
+        "value": "#333238",
         "$type": "color",
         "themeable": true
       },
@@ -4822,7 +4822,7 @@
       "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
       "isSource": false,
       "original": {
-        "value": "{gray.500}",
+        "value": "#737278",
         "$type": "color",
         "themeable": true
       },
@@ -4840,7 +4840,7 @@
       "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
       "isSource": false,
       "original": {
-        "value": "{gray.400}",
+        "value": "#89888d",
         "$type": "color",
         "themeable": true
       },

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

@@ -1,7 +1,10 @@
 
 // Do not edit directly
-// Generated on Wed, 28 Feb 2024 13:41:11 GMT
+// Generated on Fri, 01 Mar 2024 12:16:54 GMT
 
+$gl-text-tertiary: #737278 !default;
+$gl-text-secondary: #89888d !default;
+$gl-text-primary: #ececef !default;
 $red-950: #fff4f3;
 $red-900: #fcf1ef;
 $red-800: #fdd4cd;

package/dist/tokens/scss/_tokens.scss

@@ -1,7 +1,10 @@
 
 // Do not edit directly
-// Generated on Wed, 28 Feb 2024 13:41:10 GMT
+// Generated on Fri, 01 Mar 2024 12:16:54 GMT
 
+$gl-text-tertiary: #89888d !default;
+$gl-text-secondary: #737278 !default;
+$gl-text-primary: #333238 !default;
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;
 $gl-line-height-42: 2.625rem;
@@ -232,6 +235,3 @@ $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": "77.4.0",
+  "version": "77.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/experimental/duo/chat/duo_chat.scss

@@ -17,6 +17,7 @@
     transition: none;
   }
 
+  /* TODO: Avoid mixing duo-chat styles with other GitLab UI components not intended as utilities. Refactor and remove all `gl-drawer` instances out of this file. */
   .gl-drawer-body-scrim-on-footer {
     &::before {
       background: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10);
@@ -26,6 +27,11 @@
   .gl-drawer-body {
     overflow-y: auto;
   }
+
+  .gl-drawer-header,
+  .gl-drawer-body > * {
+    @include gl-p-5;
+  }
 }
 
 .duo-chat-history {

package/src/components/experimental/duo/chat/duo_chat.vue

@@ -355,7 +355,7 @@ export default {
   <aside
     v-if="!isHidden"
     id="chat-component"
-    class="markdown-code-block gl-drawer gl-drawer-default gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat"
+    class="markdown-code-block gl-drawer gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat"
     role="complementary"
     data-testid="chat-component"
   >

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

@@ -0,0 +1,19 @@
+{
+  "text": {
+    "primary": {
+      "$value": "#ececef",
+      "$type": "color",
+      "themeable": true
+    },
+    "secondary": {
+      "$value": "#89888d",
+      "$type": "color",
+      "themeable": true
+    },
+    "tertiary": {
+      "$value": "#737278",
+      "$type": "color",
+      "themeable": true
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
+import { createDesignTokenStory } from './common_story_options';
+
+export const Default = createDesignTokenStory({
+  containerClass: 'gl-bg-gray-950',
+  tokens: COMPILED_TOKENS.text,
+  isBackgroundColorStory: false,
+});
+
+// eslint-disable-next-line storybook/csf-component
+export default {
+  title: 'tokens/text/dark',
+};

package/src/tokens/text.tokens.json

@@ -1,17 +1,17 @@
 {
   "text": {
     "primary": {
-      "$value": "{gray.900}",
+      "$value": "#333238",
       "$type": "color",
       "themeable": true
     },
     "secondary": {
-      "$value": "{gray.500}",
+      "$value": "#737278",
       "$type": "color",
       "themeable": true
     },
     "tertiary": {
-      "$value": "{gray.400}",
+      "$value": "#89888d",
       "$type": "color",
       "themeable": true
     }

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

@@ -8,5 +8,5 @@ export const Default = createDesignTokenStory({
 
 // eslint-disable-next-line storybook/csf-component
 export default {
-  title: 'tokens/text',
+  title: 'tokens/text/light',
 };

package/tailwind.defaults.js

@@ -1,23 +1,36 @@
-const baseColorTokens = require('./src/tokens/color.tokens.json');
-const themeColorTokens = require('./src/tokens/color.theme.tokens.json');
+const COMPILED_TOKENS = require('./dist/tokens/json/tokens.json');
+
+const cssCustomPropertyWithValue = (token) => {
+  const path = [token.prefix !== false ? 'gl' : false, ...token.path].filter(Boolean);
+  return `var(--${path.join('-')}, ${token.value})`;
+};
 
 const baseColors = ['blue', 'gray', 'green', 'orange', 'purple', 'red'].reduce((acc, color) => {
-  acc[color] = {};
-  Object.entries(baseColorTokens[color]).forEach(([shade, { $value }]) => {
-    acc[color][shade] = `var(--${color}-${shade}, ${$value})`;
+  Object.entries(COMPILED_TOKENS[color]).forEach(([, token]) => {
+    acc[token.path.join('-')] = cssCustomPropertyWithValue(token);
   });
   return acc;
 }, {});
 
-const themeColors = Object.entries(themeColorTokens.theme).reduce((acc, [color, shades]) => {
-  const colorKey = `theme-${color}`;
-  acc[colorKey] = {};
-  Object.entries(shades).forEach(([shade, { $value }]) => {
-    acc[colorKey][shade] = `var(--${colorKey}-${shade}, ${$value})`;
+const themeColors = Object.entries(COMPILED_TOKENS.theme).reduce((acc, [, scales]) => {
+  Object.entries(scales).forEach(([, token]) => {
+    acc[token.path.join('-')] = cssCustomPropertyWithValue(token);
   });
   return acc;
 }, {});
 
+const textColors = Object.entries(COMPILED_TOKENS.text).reduce((acc, [scale, token]) => {
+  acc[scale] = cssCustomPropertyWithValue(token);
+  return acc;
+}, {});
+
+const colors = {
+  white: cssCustomPropertyWithValue(COMPILED_TOKENS.white),
+  black: cssCustomPropertyWithValue(COMPILED_TOKENS.black),
+  ...baseColors,
+  ...themeColors,
+};
+
 const gridSize = 0.5; // rem
 const spacing = {
   0: '0',
@@ -65,12 +78,7 @@ module.exports = {
       lg: '992px',
       xl: '1200px',
     },
-    colors: {
-      white: `var(--white, ${baseColorTokens.white.$value})`,
-      black: `var(--black, ${baseColorTokens.black.$value})`,
-      ...baseColors,
-      ...themeColors,
-    },
+    colors,
     spacing,
     fontSize: {
       xs: '0.625rem',
@@ -85,5 +93,9 @@ module.exports = {
       semibold: 500,
       bold: 600,
     },
+    textColor: {
+      ...colors,
+      ...textColors,
+    },
   },
 };