@gitlab/ui 77.3.0 → 77.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "77.3.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/scss/utilities.scss

@@ -3915,6 +3915,18 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   }
 }
 
+.gl-md-justify-content-center {
+  @include gl-media-breakpoint-up(md) {
+  justify-content: center;
+  }
+}
+
+.gl-md-justify-content-center\! {
+  @include gl-media-breakpoint-up(md) {
+  justify-content: center !important;
+  }
+}
+
 .gl-md-justify-content-end {
   @include gl-media-breakpoint-up(md) {
   justify-content: flex-end;

package/src/scss/utility-mixins/flex.scss

@@ -271,6 +271,12 @@
   }
 }
 
+@mixin gl-md-justify-content-center {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-justify-content-center;
+  }
+}
+
 @mixin gl-md-justify-content-end {
   @include gl-media-breakpoint-up(md) {
     @include gl-justify-content-end;

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,
+    },
   },
 };