@gitlab/ui 71.10.0 → 71.11.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [71.11.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v71.10.0...v71.11.0) (2023-12-14)
+
+
+### Features
+
+* **DesignTokens:** add transparency values as design tokens ([c4f5232](https://gitlab.com/gitlab-org/gitlab-ui/commit/c4f523206e3c4cbc607bea6445c16e4069c835f0))
+* **GlDuoChat:** promote "/" commands ([8d3239b](https://gitlab.com/gitlab-org/gitlab-ui/commit/8d3239b85b0dd68a79ee4e7e61162ddad15f5e72))
+
 # [71.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v71.9.1...v71.10.0) (2023-12-13)
 
 

package/dist/components/experimental/duo/chat/duo_chat.js

@@ -24,7 +24,8 @@ const i18n = {
   CHAT_LEGAL_GENERATED_BY_AI: 'Responses generated by AI',
   CHAT_EMPTY_STATE_TITLE: 'Ask a question',
   CHAT_EMPTY_STATE_DESC: 'AI generated explanations will appear here.',
-  CHAT_PROMPT_PLACEHOLDER: 'GitLab Duo Chat',
+  CHAT_PROMPT_PLACEHOLDER_DEFAULT: 'GitLab Duo Chat',
+  CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: 'Type "/" for slash commands',
   CHAT_SUBMIT_LABEL: 'Send chat message.',
   CHAT_LEGAL_DISCLAIMER: "May provide inappropriate responses not representative of GitLab's views. Do not input personal data.",
   CHAT_DEFAULT_PREDEFINED_PROMPTS: ['How do I change my password in GitLab?', 'How do I fork a project?', 'How do I clone a repository?', 'How do I create a template?']
@@ -36,15 +37,15 @@ const slashCommands = [{
 }, {
   name: '/tests',
   shouldSubmit: false,
-  description: 'Write tests for the code snippet.'
+  description: 'Write tests for the selected snippet.'
 }, {
   name: '/refactor',
   shouldSubmit: false,
-  description: 'Refactor the code snippet.'
+  description: 'Refactor the selected snippet.'
 }, {
   name: '/explain',
   shouldSubmit: false,
-  description: 'Explain the code snippet.'
+  description: 'Explain the selected snippet.'
 }];
 const isMessage = item => Boolean(item) && (item === null || item === void 0 ? void 0 : item.role);
 const itemsValidator = items => items.every(isMessage);
@@ -193,6 +194,9 @@ var script = {
       const startsWithSlash = caseInsensitivePrompt.startsWith('/');
       const startsWithSlashCommand = slashCommands.some(c => caseInsensitivePrompt.startsWith(c.name));
       return startsWithSlash && this.filteredSlashCommands.length && !startsWithSlashCommand;
+    },
+    inputPlaceholder() {
+      return this.withSlashCommands ? i18n.CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS : i18n.CHAT_PROMPT_PLACEHOLDER_DEFAULT;
     }
   },
   watch: {
@@ -317,7 +321,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
           {
             'gl-h-full': !_vm.hasMessages,
             'gl-h-auto': _vm.hasMessages,
-          } ],attrs:{"tag":"div","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('gl-duo-chat-conversation',{key:("conversation-" + index),attrs:{"messages":conversation,"show-delimiter":index > 0},on:{"track-feedback":_vm.onTrackFeedback}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('div',{key:"empty-state",staticClass:"gl-display-flex gl-flex-grow-1 gl-mr-auto gl-ml-auto"},[_c('gl-empty-state',{staticClass:"gl-align-self-center",attrs:{"svg-path":_vm.$options.emptySvg,"svg-height":145,"title":_vm.$options.i18n.CHAT_EMPTY_STATE_TITLE,"description":_vm.$options.i18n.CHAT_EMPTY_STATE_DESC}})],1),_vm._v(" "),_c('gl-duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})]:_vm._e()],2),_vm._v(" "),_c('transition',{attrs:{"name":"loader"}},[(_vm.isLoading)?_c('gl-duo-chat-loader',{staticClass:"gl-px-0!",attrs:{"tool-name":_vm.toolName}}):_vm._e()],1)],1)],2),_vm._v(" "),(_vm.isChatAvailable)?_c('footer',{staticClass:"gl-drawer-footer gl-drawer-footer-sticky gl-p-5 gl-border-t gl-bg-gray-10",class:{ 'gl-drawer-body-scrim-on-footer': !_vm.scrolledToBottom },attrs:{"data-testid":"chat-footer"}},[_c('gl-form',{attrs:{"data-testid":"chat-prompt-form"},on:{"submit":function($event){$event.stopPropagation();$event.preventDefault();return _vm.sendChatPrompt.apply(null, arguments)}}},[_c('gl-form-input-group',{scopedSlots:_vm._u([{key:"append",fn:function(){return [_c('gl-button',{staticClass:"gl-absolute! gl-bottom-2 gl-right-2 gl-rounded-base!",attrs:{"icon":"paper-airplane","category":"primary","variant":"confirm","type":"submit","aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL,"disabled":_vm.isLoading}})]},proxy:true}],null,false,2232229068)},[_c('div',{staticClass:"duo-chat-input gl-flex-grow-1 gl-vertical-align-top gl-max-w-full gl-min-h-8 gl-inset-border-1-gray-400 gl-rounded-base gl-bg-white",attrs:{"data-value":_vm.prompt}},[(_vm.shouldShowSlashCommands)?_c('gl-card',{ref:"commands",staticClass:"slash-commands gl-absolute! gl-translate-y-n100 gl-list-style-none gl-pl-0 gl-w-full gl-shadow-md",attrs:{"body-class":"gl-p-2!"}},_vm._l((_vm.filteredSlashCommands),function(command,index){return _c('gl-dropdown-item',{key:command.name,class:{ 'active-command': index === _vm.activeCommandIndex },on:{"click":function($event){return _vm.selectSlashCommand(index)}},nativeOn:{"mouseenter":function($event){_vm.activeCommandIndex = index;}}},[_c('span',{staticClass:"gl-display-flex gl-justify-content-space-between"},[_c('span',{staticClass:"gl-display-block"},[_vm._v(_vm._s(command.name))]),_vm._v(" "),_c('small',{staticClass:"gl-text-gray-500 gl-font-style-italic gl-text-right gl-pl-3"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",staticClass:"gl-absolute gl-h-full! gl-py-4! gl-bg-transparent! gl-rounded-top-right-none gl-rounded-bottom-right-none gl-shadow-none!",class:{ 'gl-text-truncate': !_vm.prompt },attrs:{"data-testid":"chat-prompt-input","placeholder":_vm.$options.i18n.CHAT_PROMPT_PLACEHOLDER,"disabled":_vm.isLoading,"autofocus":""},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }$event.preventDefault();},"keyup":function($event){return _vm.onInputKeyup.apply(null, arguments)}},model:{value:(_vm.prompt),callback:function ($$v) {_vm.prompt=$$v;},expression:"prompt"}})],1)]),_vm._v(" "),_c('gl-form-text',{staticClass:"gl-text-gray-400 gl-line-height-20 gl-mt-3",attrs:{"data-testid":"chat-legal-disclaimer"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_DISCLAIMER))])],1)],1):_vm._e()]):_vm._e()};
+          } ],attrs:{"tag":"div","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('gl-duo-chat-conversation',{key:("conversation-" + index),attrs:{"messages":conversation,"show-delimiter":index > 0},on:{"track-feedback":_vm.onTrackFeedback}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('div',{key:"empty-state",staticClass:"gl-display-flex gl-flex-grow-1 gl-mr-auto gl-ml-auto"},[_c('gl-empty-state',{staticClass:"gl-align-self-center",attrs:{"svg-path":_vm.$options.emptySvg,"svg-height":145,"title":_vm.$options.i18n.CHAT_EMPTY_STATE_TITLE,"description":_vm.$options.i18n.CHAT_EMPTY_STATE_DESC}})],1),_vm._v(" "),_c('gl-duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})]:_vm._e()],2),_vm._v(" "),_c('transition',{attrs:{"name":"loader"}},[(_vm.isLoading)?_c('gl-duo-chat-loader',{staticClass:"gl-px-0!",attrs:{"tool-name":_vm.toolName}}):_vm._e()],1)],1)],2),_vm._v(" "),(_vm.isChatAvailable)?_c('footer',{staticClass:"gl-drawer-footer gl-drawer-footer-sticky gl-p-5 gl-border-t gl-bg-gray-10",class:{ 'gl-drawer-body-scrim-on-footer': !_vm.scrolledToBottom },attrs:{"data-testid":"chat-footer"}},[_c('gl-form',{attrs:{"data-testid":"chat-prompt-form"},on:{"submit":function($event){$event.stopPropagation();$event.preventDefault();return _vm.sendChatPrompt.apply(null, arguments)}}},[_c('gl-form-input-group',{scopedSlots:_vm._u([{key:"append",fn:function(){return [_c('gl-button',{staticClass:"gl-absolute! gl-bottom-2 gl-right-2 gl-rounded-base!",attrs:{"icon":"paper-airplane","category":"primary","variant":"confirm","type":"submit","aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL,"disabled":_vm.isLoading}})]},proxy:true}],null,false,2232229068)},[_c('div',{staticClass:"duo-chat-input gl-flex-grow-1 gl-vertical-align-top gl-max-w-full gl-min-h-8 gl-inset-border-1-gray-400 gl-rounded-base gl-bg-white",attrs:{"data-value":_vm.prompt}},[(_vm.shouldShowSlashCommands)?_c('gl-card',{ref:"commands",staticClass:"slash-commands gl-absolute! gl-translate-y-n100 gl-list-style-none gl-pl-0 gl-w-full gl-shadow-md",attrs:{"body-class":"gl-p-2!"}},_vm._l((_vm.filteredSlashCommands),function(command,index){return _c('gl-dropdown-item',{key:command.name,class:{ 'active-command': index === _vm.activeCommandIndex },on:{"click":function($event){return _vm.selectSlashCommand(index)}},nativeOn:{"mouseenter":function($event){_vm.activeCommandIndex = index;}}},[_c('span',{staticClass:"gl-display-flex gl-justify-content-space-between"},[_c('span',{staticClass:"gl-display-block"},[_vm._v(_vm._s(command.name))]),_vm._v(" "),_c('small',{staticClass:"gl-text-gray-500 gl-font-style-italic gl-text-right gl-pl-3"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",staticClass:"gl-absolute gl-h-full! gl-py-4! gl-bg-transparent! gl-rounded-top-right-none gl-rounded-bottom-right-none gl-shadow-none!",class:{ 'gl-text-truncate': !_vm.prompt },attrs:{"data-testid":"chat-prompt-input","placeholder":_vm.inputPlaceholder,"disabled":_vm.isLoading,"autofocus":""},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }$event.preventDefault();},"keyup":function($event){return _vm.onInputKeyup.apply(null, arguments)}},model:{value:(_vm.prompt),callback:function ($$v) {_vm.prompt=$$v;},expression:"prompt"}})],1)]),_vm._v(" "),_c('gl-form-text',{staticClass:"gl-text-gray-400 gl-line-height-20 gl-mt-3",attrs:{"data-testid":"chat-legal-disclaimer"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_DISCLAIMER))])],1)],1):_vm._e()]):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/tokens/common_story_options.js

@@ -5,6 +5,7 @@ const methods = {
     return [name, key].filter(Boolean).join('.');
   },
   getTextColorClass(value) {
+    if (value.startsWith('rgba(')) return '';
     const textColorVariant = colorFromBackground(value, 4.5);
     return {
       'gl-text-gray-950': textColorVariant === 'dark',

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Dec 2023 16:29:09 GMT
+ * Generated on Thu, 14 Dec 2023 19:07:24 GMT
  */
 
 :root {
@@ -14,6 +14,19 @@
   --gl-line-height-20: 1.25rem;
   --gl-line-height-16: 1rem;
   --gl-line-height-12: 0.75rem;
+  --t-white-a-08: rgba(255, 255, 255, 0.08);
+  --t-white-a-06: rgba(255, 255, 255, 0.06);
+  --t-white-a-04: rgba(255, 255, 255, 0.04);
+  --t-white-a-02: rgba(255, 255, 255, 0.02);
+  --t-white-a-36: rgba(255, 255, 255, 0.36);
+  --t-white-a-24: rgba(255, 255, 255, 0.24);
+  --t-white-a-16: rgba(255, 255, 255, 0.16);
+  --t-gray-a-08: rgba(31, 30, 36, 0.08);
+  --t-gray-a-06: rgba(31, 30, 36, 0.06);
+  --t-gray-a-04: rgba(31, 30, 36, 0.04);
+  --t-gray-a-02: rgba(31, 30, 36, 0.02);
+  --t-gray-a-24: rgba(31, 30, 36, 0.24);
+  --t-gray-a-16: rgba(31, 30, 36, 0.16);
   --brand-gray-05: #2b2838;
   --brand-gray-04: #45424d;
   --brand-gray-03: #74717a;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Dec 2023 16:29:09 GMT
+ * Generated on Thu, 14 Dec 2023 19:07:24 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Dec 2023 16:29:09 GMT
+ * Generated on Thu, 14 Dec 2023 19:07:24 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Dec 2023 16:29:09 GMT
+ * Generated on Thu, 14 Dec 2023 19:07:24 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";
@@ -204,6 +204,19 @@ export const BRAND_GRAY_02 = "#a2a1a6";
 export const BRAND_GRAY_03 = "#74717a";
 export const BRAND_GRAY_04 = "#45424d";
 export const BRAND_GRAY_05 = "#2b2838";
+export const T_GRAY_A_16 = "rgba(31, 30, 36, 0.16)";
+export const T_GRAY_A_24 = "rgba(31, 30, 36, 0.24)";
+export const T_GRAY_A_02 = "rgba(31, 30, 36, 0.02)";
+export const T_GRAY_A_04 = "rgba(31, 30, 36, 0.04)";
+export const T_GRAY_A_06 = "rgba(31, 30, 36, 0.06)";
+export const T_GRAY_A_08 = "rgba(31, 30, 36, 0.08)";
+export const T_WHITE_A_16 = "rgba(255, 255, 255, 0.16)";
+export const T_WHITE_A_24 = "rgba(255, 255, 255, 0.24)";
+export const T_WHITE_A_36 = "rgba(255, 255, 255, 0.36)";
+export const T_WHITE_A_02 = "rgba(255, 255, 255, 0.02)";
+export const T_WHITE_A_04 = "rgba(255, 255, 255, 0.04)";
+export const T_WHITE_A_06 = "rgba(255, 255, 255, 0.06)";
+export const T_WHITE_A_08 = "rgba(255, 255, 255, 0.08)";
 export const GL_LINE_HEIGHT_12 = "0.75rem";
 export const GL_LINE_HEIGHT_16 = "1rem";
 export const GL_LINE_HEIGHT_20 = "1.25rem";

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

@@ -200,7 +200,20 @@
     "brand-gray-02": "#a2a1a6",
     "brand-gray-03": "#74717a",
     "brand-gray-04": "#45424d",
-    "brand-gray-05": "#2b2838"
+    "brand-gray-05": "#2b2838",
+    "t-gray-a-16": "rgba(31, 30, 36, 0.16)",
+    "t-gray-a-24": "rgba(31, 30, 36, 0.24)",
+    "t-gray-a-02": "rgba(31, 30, 36, 0.02)",
+    "t-gray-a-04": "rgba(31, 30, 36, 0.04)",
+    "t-gray-a-06": "rgba(31, 30, 36, 0.06)",
+    "t-gray-a-08": "rgba(31, 30, 36, 0.08)",
+    "t-white-a-16": "rgba(255, 255, 255, 0.16)",
+    "t-white-a-24": "rgba(255, 255, 255, 0.24)",
+    "t-white-a-36": "rgba(255, 255, 255, 0.36)",
+    "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)"
   },
   "dimension": {
     "line-height-12": "0.75rem",

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

@@ -4194,6 +4194,270 @@
       }
     }
   },
+  "t-gray-a": {
+    "16": {
+      "value": "rgba(31, 30, 36, 0.16)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(31, 30, 36, 0.16)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "RAY_A_16",
+      "attributes": {},
+      "path": [
+        "t-gray-a",
+        "16"
+      ]
+    },
+    "24": {
+      "value": "rgba(31, 30, 36, 0.24)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(31, 30, 36, 0.24)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "RAY_A_24",
+      "attributes": {},
+      "path": [
+        "t-gray-a",
+        "24"
+      ]
+    },
+    "02": {
+      "value": "rgba(31, 30, 36, 0.02)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(31, 30, 36, 0.02)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "RAY_A_02",
+      "attributes": {},
+      "path": [
+        "t-gray-a",
+        "02"
+      ]
+    },
+    "04": {
+      "value": "rgba(31, 30, 36, 0.04)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(31, 30, 36, 0.04)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "RAY_A_04",
+      "attributes": {},
+      "path": [
+        "t-gray-a",
+        "04"
+      ]
+    },
+    "06": {
+      "value": "rgba(31, 30, 36, 0.06)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(31, 30, 36, 0.06)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "RAY_A_06",
+      "attributes": {},
+      "path": [
+        "t-gray-a",
+        "06"
+      ]
+    },
+    "08": {
+      "value": "rgba(31, 30, 36, 0.08)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(31, 30, 36, 0.08)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "RAY_A_08",
+      "attributes": {},
+      "path": [
+        "t-gray-a",
+        "08"
+      ]
+    }
+  },
+  "t-white-a": {
+    "16": {
+      "value": "rgba(255, 255, 255, 0.16)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(255, 255, 255, 0.16)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "HITE_A_16",
+      "attributes": {},
+      "path": [
+        "t-white-a",
+        "16"
+      ]
+    },
+    "24": {
+      "value": "rgba(255, 255, 255, 0.24)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(255, 255, 255, 0.24)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "HITE_A_24",
+      "attributes": {},
+      "path": [
+        "t-white-a",
+        "24"
+      ]
+    },
+    "36": {
+      "value": "rgba(255, 255, 255, 0.36)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(255, 255, 255, 0.36)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "HITE_A_36",
+      "attributes": {},
+      "path": [
+        "t-white-a",
+        "36"
+      ]
+    },
+    "02": {
+      "value": "rgba(255, 255, 255, 0.02)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(255, 255, 255, 0.02)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "HITE_A_02",
+      "attributes": {},
+      "path": [
+        "t-white-a",
+        "02"
+      ]
+    },
+    "04": {
+      "value": "rgba(255, 255, 255, 0.04)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(255, 255, 255, 0.04)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "HITE_A_04",
+      "attributes": {},
+      "path": [
+        "t-white-a",
+        "04"
+      ]
+    },
+    "06": {
+      "value": "rgba(255, 255, 255, 0.06)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(255, 255, 255, 0.06)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "HITE_A_06",
+      "attributes": {},
+      "path": [
+        "t-white-a",
+        "06"
+      ]
+    },
+    "08": {
+      "value": "rgba(255, 255, 255, 0.08)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(255, 255, 255, 0.08)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "HITE_A_08",
+      "attributes": {},
+      "path": [
+        "t-white-a",
+        "08"
+      ]
+    }
+  },
   "line-height": {
     "12": {
       "value": "0.75rem",

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

@@ -200,7 +200,20 @@
     "brand-gray-02": "#a2a1a6",
     "brand-gray-03": "#74717a",
     "brand-gray-04": "#45424d",
-    "brand-gray-05": "#2b2838"
+    "brand-gray-05": "#2b2838",
+    "t-gray-a-16": "rgba(31, 30, 36, 0.16)",
+    "t-gray-a-24": "rgba(31, 30, 36, 0.24)",
+    "t-gray-a-02": "rgba(31, 30, 36, 0.02)",
+    "t-gray-a-04": "rgba(31, 30, 36, 0.04)",
+    "t-gray-a-06": "rgba(31, 30, 36, 0.06)",
+    "t-gray-a-08": "rgba(31, 30, 36, 0.08)",
+    "t-white-a-16": "rgba(255, 255, 255, 0.16)",
+    "t-white-a-24": "rgba(255, 255, 255, 0.24)",
+    "t-white-a-36": "rgba(255, 255, 255, 0.36)",
+    "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)"
   },
   "dimension": {
     "line-height-12": "0.75rem",

package/dist/tokens/json/tokens.json

@@ -4194,6 +4194,270 @@
       }
     }
   },
+  "t-gray-a": {
+    "16": {
+      "value": "rgba(31, 30, 36, 0.16)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(31, 30, 36, 0.16)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "RAY_A_16",
+      "attributes": {},
+      "path": [
+        "t-gray-a",
+        "16"
+      ]
+    },
+    "24": {
+      "value": "rgba(31, 30, 36, 0.24)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(31, 30, 36, 0.24)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "RAY_A_24",
+      "attributes": {},
+      "path": [
+        "t-gray-a",
+        "24"
+      ]
+    },
+    "02": {
+      "value": "rgba(31, 30, 36, 0.02)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(31, 30, 36, 0.02)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "RAY_A_02",
+      "attributes": {},
+      "path": [
+        "t-gray-a",
+        "02"
+      ]
+    },
+    "04": {
+      "value": "rgba(31, 30, 36, 0.04)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(31, 30, 36, 0.04)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "RAY_A_04",
+      "attributes": {},
+      "path": [
+        "t-gray-a",
+        "04"
+      ]
+    },
+    "06": {
+      "value": "rgba(31, 30, 36, 0.06)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(31, 30, 36, 0.06)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "RAY_A_06",
+      "attributes": {},
+      "path": [
+        "t-gray-a",
+        "06"
+      ]
+    },
+    "08": {
+      "value": "rgba(31, 30, 36, 0.08)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(31, 30, 36, 0.08)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "RAY_A_08",
+      "attributes": {},
+      "path": [
+        "t-gray-a",
+        "08"
+      ]
+    }
+  },
+  "t-white-a": {
+    "16": {
+      "value": "rgba(255, 255, 255, 0.16)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(255, 255, 255, 0.16)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "HITE_A_16",
+      "attributes": {},
+      "path": [
+        "t-white-a",
+        "16"
+      ]
+    },
+    "24": {
+      "value": "rgba(255, 255, 255, 0.24)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(255, 255, 255, 0.24)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "HITE_A_24",
+      "attributes": {},
+      "path": [
+        "t-white-a",
+        "24"
+      ]
+    },
+    "36": {
+      "value": "rgba(255, 255, 255, 0.36)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(255, 255, 255, 0.36)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "HITE_A_36",
+      "attributes": {},
+      "path": [
+        "t-white-a",
+        "36"
+      ]
+    },
+    "02": {
+      "value": "rgba(255, 255, 255, 0.02)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(255, 255, 255, 0.02)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "HITE_A_02",
+      "attributes": {},
+      "path": [
+        "t-white-a",
+        "02"
+      ]
+    },
+    "04": {
+      "value": "rgba(255, 255, 255, 0.04)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(255, 255, 255, 0.04)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "HITE_A_04",
+      "attributes": {},
+      "path": [
+        "t-white-a",
+        "04"
+      ]
+    },
+    "06": {
+      "value": "rgba(255, 255, 255, 0.06)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(255, 255, 255, 0.06)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "HITE_A_06",
+      "attributes": {},
+      "path": [
+        "t-white-a",
+        "06"
+      ]
+    },
+    "08": {
+      "value": "rgba(255, 255, 255, 0.08)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.transparency.tokens.json",
+      "isSource": false,
+      "original": {
+        "value": "rgba(255, 255, 255, 0.08)",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
+      "name": "HITE_A_08",
+      "attributes": {},
+      "path": [
+        "t-white-a",
+        "08"
+      ]
+    }
+  },
   "line-height": {
     "12": {
       "value": "0.75rem",

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 13 Dec 2023 16:29:09 GMT
+// Generated on Thu, 14 Dec 2023 19:07:24 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 13 Dec 2023 16:29:09 GMT
+// Generated on Thu, 14 Dec 2023 19:07:24 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;
@@ -12,6 +12,19 @@ $gl-line-height-24: 1.5rem;
 $gl-line-height-20: 1.25rem;
 $gl-line-height-16: 1rem;
 $gl-line-height-12: 0.75rem;
+$t-white-a-08: rgba(255, 255, 255, 0.08) !default;
+$t-white-a-06: rgba(255, 255, 255, 0.06) !default;
+$t-white-a-04: rgba(255, 255, 255, 0.04) !default;
+$t-white-a-02: rgba(255, 255, 255, 0.02) !default;
+$t-white-a-36: rgba(255, 255, 255, 0.36) !default;
+$t-white-a-24: rgba(255, 255, 255, 0.24) !default;
+$t-white-a-16: rgba(255, 255, 255, 0.16) !default;
+$t-gray-a-08: rgba(31, 30, 36, 0.08) !default;
+$t-gray-a-06: rgba(31, 30, 36, 0.06) !default;
+$t-gray-a-04: rgba(31, 30, 36, 0.04) !default;
+$t-gray-a-02: rgba(31, 30, 36, 0.02) !default;
+$t-gray-a-24: rgba(31, 30, 36, 0.24) !default;
+$t-gray-a-16: rgba(31, 30, 36, 0.16) !default;
 $brand-gray-05: #2b2838 !default;
 $brand-gray-04: #45424d !default;
 $brand-gray-03: #74717a !default;

package/package.json

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

package/src/components/experimental/duo/chat/duo_chat.spec.js

@@ -444,6 +444,15 @@ describe('GlDuoChat', () => {
           await nextTick();
           expect(findSlashCommandsCard().exists()).toBe(false);
         });
+
+        it('shows default placeholder in the chat input', () => {
+          createComponent({
+            propsData: {
+              withSlashCommands: false,
+            },
+          });
+          expect(findChatInput().attributes('placeholder')).toBe('GitLab Duo Chat');
+        });
       });
 
       describe('with the `withSlashCommands` enabled', () => {
@@ -478,6 +487,15 @@ describe('GlDuoChat', () => {
           });
         });
 
+        it('shows the correct placeholder in the chat input', () => {
+          createComponent({
+            propsData: {
+              withSlashCommands: true,
+            },
+          });
+          expect(findChatInput().attributes('placeholder')).toBe('Type "/" for slash commands');
+        });
+
         describe('when the prompt includes the "/" character or no characters', () => {
           it.each(['', '//', '\\', 'foo', '/foo'])(
             'does not render the slash commands if prompt is "$prompt"',

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

@@ -24,7 +24,8 @@ export const i18n = {
   CHAT_LEGAL_GENERATED_BY_AI: 'Responses generated by AI',
   CHAT_EMPTY_STATE_TITLE: 'Ask a question',
   CHAT_EMPTY_STATE_DESC: 'AI generated explanations will appear here.',
-  CHAT_PROMPT_PLACEHOLDER: 'GitLab Duo Chat',
+  CHAT_PROMPT_PLACEHOLDER_DEFAULT: 'GitLab Duo Chat',
+  CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: 'Type "/" for slash commands',
   CHAT_SUBMIT_LABEL: 'Send chat message.',
   CHAT_LEGAL_DISCLAIMER:
     "May provide inappropriate responses not representative of GitLab's views. Do not input personal data.",
@@ -45,17 +46,17 @@ export const slashCommands = [
   {
     name: '/tests',
     shouldSubmit: false,
-    description: 'Write tests for the code snippet.',
+    description: 'Write tests for the selected snippet.',
   },
   {
     name: '/refactor',
     shouldSubmit: false,
-    description: 'Refactor the code snippet.',
+    description: 'Refactor the selected snippet.',
   },
   {
     name: '/explain',
     shouldSubmit: false,
-    description: 'Explain the code snippet.',
+    description: 'Explain the selected snippet.',
   },
 ];
 
@@ -215,6 +216,11 @@ export default {
       );
       return startsWithSlash && this.filteredSlashCommands.length && !startsWithSlashCommand;
     },
+    inputPlaceholder() {
+      return this.withSlashCommands
+        ? i18n.CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS
+        : i18n.CHAT_PROMPT_PLACEHOLDER_DEFAULT;
+    },
   },
   watch: {
     isLoading() {
@@ -471,7 +477,7 @@ export default {
               data-testid="chat-prompt-input"
               class="gl-absolute gl-h-full! gl-py-4! gl-bg-transparent! gl-rounded-top-right-none gl-rounded-bottom-right-none gl-shadow-none!"
               :class="{ 'gl-text-truncate': !prompt }"
-              :placeholder="$options.i18n.CHAT_PROMPT_PLACEHOLDER"
+              :placeholder="inputPlaceholder"
               :disabled="isLoading"
               autofocus
               @keydown.enter.exact.native.prevent

package/src/scss/variables.scss

@@ -58,13 +58,6 @@ $white-dark: #eaeaea !default;
 $white-transparent: rgba(255, 255, 255, 0.8) !default;
 $transparent-rgba: rgba($white, 0);
 
-$t-gray-a-02: rgba($gray-950, 0.02) !default;
-$t-gray-a-04: rgba($gray-950, 0.04) !default;
-$t-gray-a-06: rgba($gray-950, 0.06) !default;
-$t-gray-a-08: rgba($gray-950, 0.08) !default;
-$t-gray-a-16: rgba($gray-950, 0.16) !default;
-$t-gray-a-24: rgba($gray-950, 0.24) !default;
-
 // Text
 $gl-text-color: $gray-900 !default;
 $gl-text-color-secondary: $gray-500 !default;

package/src/tokens/color.transparency.tokens.json

@@ -0,0 +1,84 @@
+{
+  "t-gray-a": {
+    "02": {
+      "$value": "rgba(31, 30, 36, 0.02)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    },
+    "04": {
+      "$value": "rgba(31, 30, 36, 0.04)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    },
+    "06": {
+      "$value": "rgba(31, 30, 36, 0.06)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    },
+    "08": {
+      "$value": "rgba(31, 30, 36, 0.08)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    },
+    "16": {
+      "$value": "rgba(31, 30, 36, 0.16)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    },
+    "24": {
+      "$value": "rgba(31, 30, 36, 0.24)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    }
+  },
+  "t-white-a": {
+    "02": {
+      "$value": "rgba(255, 255, 255, 0.02)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    },
+    "04": {
+      "$value": "rgba(255, 255, 255, 0.04)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    },
+    "06": {
+      "$value": "rgba(255, 255, 255, 0.06)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    },
+    "08": {
+      "$value": "rgba(255, 255, 255, 0.08)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    },
+    "16": {
+      "$value": "rgba(255, 255, 255, 0.16)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    },
+    "24": {
+      "$value": "rgba(255, 255, 255, 0.24)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    },
+    "36": {
+      "$value": "rgba(255, 255, 255, 0.36)",
+      "$type": "color",
+      "themeable": true,
+      "prefix": false
+    }
+  }
+}

package/src/tokens/color.transparency.tokens.stories.js

@@ -0,0 +1,26 @@
+import { methods, template } from './common_story_options';
+import colorTokens from './color.transparency.tokens.json';
+
+const generateProps = ({ name = '', tokens = colorTokens } = {}) => ({
+  name,
+  tokens,
+});
+
+export const Gray = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  methods,
+  template,
+});
+Gray.args = generateProps({ name: 't-gray-a', tokens: colorTokens['t-gray-a'] });
+
+export const White = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  methods,
+  template: `<div class="gl-bg-gray-900 gl-text-white">${template}</div>`,
+});
+White.args = generateProps({ name: 't-white-a', tokens: colorTokens['t-white-a'] });
+
+// eslint-disable-next-line storybook/csf-component
+export default {
+  title: 'tokens/color/transparency',
+};

package/src/tokens/common_story_options.js

@@ -5,6 +5,7 @@ export const methods = {
     return [name, key].filter(Boolean).join('.');
   },
   getTextColorClass(value) {
+    if (value.startsWith('rgba(')) return '';
     const textColorVariant = colorFromBackground(value, 4.5);
     return {
       'gl-text-gray-950': textColorVariant === 'dark',