@gitlab/ui 91.6.0 → 91.7.0

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

@@ -611,7 +611,7 @@ const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#428fdc'; // Used for the selec
 const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)'; // Used for form control (input, radio button, checkbox, textarea) default background.
 const GL_CONTROL_BACKGROUND_COLOR_DISABLED = 'rgba(255, 255, 255, 0.04)'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 const GL_CONTROL_BACKGROUND_COLOR_CONCATENATION = 'rgba(255, 255, 255, 0.04)'; // Used for the background of static content that prepends or appends a text input.
-const GL_CONTROL_BACKGROUND_COLOR_READONLY = '#28272d'; // Used for the background of static content that prepends or appends a text input.
+const GL_CONTROL_BACKGROUND_COLOR_READONLY = 'rgba(255, 255, 255, 0.08)'; // Used for the background of static content that prepends or appends a text input.
 const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#63a6e9'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
 const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.

package/dist/tokens/build/js/tokens.js

@@ -611,7 +611,7 @@ const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#1f75cb'; // Used for the selec
 const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for form control (input, radio button, checkbox, textarea) default background.
 const GL_CONTROL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 const GL_CONTROL_BACKGROUND_COLOR_CONCATENATION = '#fbfafd'; // Used for the background of static content that prepends or appends a text input.
-const GL_CONTROL_BACKGROUND_COLOR_READONLY = '#fbfafd'; // Used for the background of static content that prepends or appends a text input.
+const GL_CONTROL_BACKGROUND_COLOR_READONLY = 'rgba(05, 05, 06, 0.02)'; // Used for the background of static content that prepends or appends a text input.
 const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#1f75cb'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
 const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.

package/dist/tokens/css/tokens.css

@@ -492,7 +492,7 @@
   --gl-control-background-color-selected-focus: var(--gl-color-blue-700); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
   --gl-control-background-color-selected-hover: var(--gl-color-blue-700); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
   --gl-control-background-color-selected-default: var(--gl-color-blue-500); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background. */
-  --gl-control-background-color-readonly: var(--gl-color-neutral-10); /* Used for the background of static content that prepends or appends a text input. */
+  --gl-control-background-color-readonly: var(--gl-color-alpha-dark-2); /* Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-concatenation: var(--gl-color-neutral-10); /* Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-disabled: var(--gl-color-neutral-10); /* Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-default: var(--gl-color-neutral-0); /* Used for form control (input, radio button, checkbox, textarea) default background. */

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

@@ -492,7 +492,7 @@
   --gl-control-background-color-selected-focus: var(--gl-color-blue-200); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
   --gl-control-background-color-selected-hover: var(--gl-color-blue-200); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
   --gl-control-background-color-selected-default: var(--gl-color-blue-300); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background. */
-  --gl-control-background-color-readonly: var(--gl-color-neutral-900); /* Used for the background of static content that prepends or appends a text input. */
+  --gl-control-background-color-readonly: var(--gl-color-alpha-light-8); /* Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-concatenation: var(--gl-color-alpha-light-4); /* Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-disabled: var(--gl-color-alpha-light-4); /* Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-default: var(--gl-color-alpha-dark-40); /* Used for form control (input, radio button, checkbox, textarea) default background. */

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

@@ -611,7 +611,7 @@ export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#428fdc'; // Used for th
 export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)'; // Used for form control (input, radio button, checkbox, textarea) default background.
 export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = 'rgba(255, 255, 255, 0.04)'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 export const GL_CONTROL_BACKGROUND_COLOR_CONCATENATION = 'rgba(255, 255, 255, 0.04)'; // Used for the background of static content that prepends or appends a text input.
-export const GL_CONTROL_BACKGROUND_COLOR_READONLY = '#28272d'; // Used for the background of static content that prepends or appends a text input.
+export const GL_CONTROL_BACKGROUND_COLOR_READONLY = 'rgba(255, 255, 255, 0.08)'; // Used for the background of static content that prepends or appends a text input.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#63a6e9'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.

package/dist/tokens/js/tokens.js

@@ -611,7 +611,7 @@ export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#1f75cb'; // Used for th
 export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for form control (input, radio button, checkbox, textarea) default background.
 export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 export const GL_CONTROL_BACKGROUND_COLOR_CONCATENATION = '#fbfafd'; // Used for the background of static content that prepends or appends a text input.
-export const GL_CONTROL_BACKGROUND_COLOR_READONLY = '#fbfafd'; // Used for the background of static content that prepends or appends a text input.
+export const GL_CONTROL_BACKGROUND_COLOR_READONLY = 'rgba(05, 05, 06, 0.02)'; // Used for the background of static content that prepends or appends a text input.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#1f75cb'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.

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

@@ -13516,15 +13516,15 @@
           ]
         },
         "readonly": {
-          "value": "#28272d",
+          "value": "rgba(255, 255, 255, 0.08)",
           "$type": "color",
           "comment": "Used for the background of static content that prepends or appends a text input.",
           "filePath": "src/tokens/control.tokens.json",
           "isSource": true,
           "original": {
             "value": {
-              "default": "{color.neutral.10}",
-              "dark": "{color.neutral.900}"
+              "default": "{color.alpha.dark.2}",
+              "dark": "{color.alpha.light.8}"
             },
             "$type": "color",
             "comment": "Used for the background of static content that prepends or appends a text input."

package/dist/tokens/json/tokens.json

@@ -13516,15 +13516,15 @@
           ]
         },
         "readonly": {
-          "value": "#fbfafd",
+          "value": "rgba(05, 05, 06, 0.02)",
           "$type": "color",
           "comment": "Used for the background of static content that prepends or appends a text input.",
           "filePath": "src/tokens/control.tokens.json",
           "isSource": true,
           "original": {
             "value": {
-              "default": "{color.neutral.10}",
-              "dark": "{color.neutral.900}"
+              "default": "{color.alpha.dark.2}",
+              "dark": "{color.alpha.light.8}"
             },
             "$type": "color",
             "comment": "Used for the background of static content that prepends or appends a text input."

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

@@ -490,7 +490,7 @@ $gl-control-border-color-default: $gl-color-neutral-500; // Used for form contro
 $gl-control-background-color-selected-focus: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 $gl-control-background-color-selected-hover: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 $gl-control-background-color-selected-default: $gl-color-blue-300; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
-$gl-control-background-color-readonly: $gl-color-neutral-900; // Used for the background of static content that prepends or appends a text input.
+$gl-control-background-color-readonly: $gl-color-alpha-light-8; // Used for the background of static content that prepends or appends a text input.
 $gl-control-background-color-concatenation: $gl-color-alpha-light-4; // Used for the background of static content that prepends or appends a text input.
 $gl-control-background-color-disabled: $gl-color-alpha-light-4; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-default: $gl-color-alpha-dark-40; // Used for form control (input, radio button, checkbox, textarea) default background.

package/dist/tokens/scss/_tokens.scss

@@ -490,7 +490,7 @@ $gl-control-border-color-default: $gl-color-neutral-400; // Used for form contro
 $gl-control-background-color-selected-focus: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 $gl-control-background-color-selected-hover: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 $gl-control-background-color-selected-default: $gl-color-blue-500; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
-$gl-control-background-color-readonly: $gl-color-neutral-10; // Used for the background of static content that prepends or appends a text input.
+$gl-control-background-color-readonly: $gl-color-alpha-dark-2; // Used for the background of static content that prepends or appends a text input.
 $gl-control-background-color-concatenation: $gl-color-neutral-10; // Used for the background of static content that prepends or appends a text input.
 $gl-control-background-color-disabled: $gl-color-neutral-10; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-default: $gl-color-neutral-0; // Used for form control (input, radio button, checkbox, textarea) default background.

package/package.json

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

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.vue

@@ -1,13 +1,15 @@
 <script>
 import { translate } from '../../../../../../../utils/i18n';
 import GlCard from '../../../../../../base/card/card.vue';
-import GlDuoChatContextItemSelections from '../duo_chat_context_item_selections/duo_chat_context_item_selections.vue';
 import { categoriesValidator, contextItemsValidator } from '../utils';
+import GlDuoChatContextItemSelections from '../duo_chat_context_item_selections/duo_chat_context_item_selections.vue';
+import GlDuoChatContextItemMenuCategoryItems from './duo_chat_context_item_menu_category_items.vue';
 
 export default {
   name: 'GlDuoChatContextItemMenu',
   components: {
     GlCard,
+    GlDuoChatContextItemMenuCategoryItems,
     GlDuoChatContextItemSelections,
   },
   props: {
@@ -60,6 +62,7 @@ export default {
   },
   data() {
     return {
+      activeIndex: 0,
       selectedCategory: null,
     };
   },
@@ -78,6 +81,7 @@ export default {
   methods: {
     selectCategory(category) {
       this.selectedCategory = category;
+      this.activeIndex = 0;
 
       /**
        * Emitted when a search should be performed.
@@ -119,6 +123,7 @@ export default {
     },
     resetSelection() {
       this.selectedCategory = null;
+      this.activeIndex = 0;
     },
   },
   i18n: {
@@ -147,12 +152,13 @@ export default {
       body-class="!gl-p-2"
       data-testid="context-item-menu"
     >
-      <ul v-if="showCategorySelection" data-testid="context-menu-category-items">
-        <!-- Placeholder for GlDuoChatContextItemMenuCategoryItems component coming in a future iteration -->
-        <li v-for="category of categories" :key="category.value" @click="selectCategory(category)">
-          {{ category.label }}
-        </li>
-      </ul>
+      <gl-duo-chat-context-item-menu-category-items
+        v-if="showCategorySelection"
+        :active-index="activeIndex"
+        :categories="categories"
+        @select="selectCategory"
+        @active-index-change="activeIndex = $event"
+      />
       <div v-else data-testid="context-menu-search-items">
         <!-- Placeholder for GlDuoChatContextItemMenuSearchItem component coming in a future iteration -->
         <template v-if="loading">Loading...</template>

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_category_items.vue

@@ -0,0 +1,45 @@
+<script>
+import GlDropdownItem from '../../../../../../base/dropdown/dropdown_item.vue';
+import GlIcon from '../../../../../../base/icon/icon.vue';
+import { categoriesValidator } from '../utils';
+
+export default {
+  name: 'GlDuoChatContextItemMenuCategoryItems',
+  components: { GlIcon, GlDropdownItem },
+  props: {
+    categories: {
+      type: Array,
+      required: true,
+      validator: categoriesValidator,
+    },
+    activeIndex: {
+      type: Number,
+      required: true,
+    },
+  },
+  methods: {
+    selectCategory(category) {
+      this.$emit('select', category);
+    },
+    setActiveIndex(index) {
+      this.$emit('active-index-change', index);
+    },
+  },
+};
+</script>
+<template>
+  <ul class="gl-mb-0 gl-list-none gl-pl-0">
+    <gl-dropdown-item
+      v-for="(category, index) in categories"
+      :key="category.value"
+      :class="{ 'active-command': index === activeIndex }"
+      data-testid="category-item"
+      @click="selectCategory(category)"
+    >
+      <div class="gl-flex gl-items-center" @mouseenter="setActiveIndex(index)">
+        <gl-icon :name="category.icon" class="gl-mr-2" />
+        {{ category.label }}
+      </div>
+    </gl-dropdown-item>
+  </ul>
+</template>

package/src/tokens/build/css/tokens.css

@@ -492,7 +492,7 @@
   --gl-control-background-color-selected-focus: var(--gl-color-blue-700); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
   --gl-control-background-color-selected-hover: var(--gl-color-blue-700); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
   --gl-control-background-color-selected-default: var(--gl-color-blue-500); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background. */
-  --gl-control-background-color-readonly: var(--gl-color-neutral-10); /* Used for the background of static content that prepends or appends a text input. */
+  --gl-control-background-color-readonly: var(--gl-color-alpha-dark-2); /* Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-concatenation: var(--gl-color-neutral-10); /* Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-disabled: var(--gl-color-neutral-10); /* Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-default: var(--gl-color-neutral-0); /* Used for form control (input, radio button, checkbox, textarea) default background. */

package/src/tokens/build/css/tokens.dark.css

@@ -492,7 +492,7 @@
   --gl-control-background-color-selected-focus: var(--gl-color-blue-200); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
   --gl-control-background-color-selected-hover: var(--gl-color-blue-200); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover. */
   --gl-control-background-color-selected-default: var(--gl-color-blue-300); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) background. */
-  --gl-control-background-color-readonly: var(--gl-color-neutral-900); /* Used for the background of static content that prepends or appends a text input. */
+  --gl-control-background-color-readonly: var(--gl-color-alpha-light-8); /* Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-concatenation: var(--gl-color-alpha-light-4); /* Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-disabled: var(--gl-color-alpha-light-4); /* Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-default: var(--gl-color-alpha-dark-40); /* Used for form control (input, radio button, checkbox, textarea) default background. */

package/src/tokens/build/js/tokens.dark.js

@@ -611,7 +611,7 @@ export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#428fdc'; // Used for th
 export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)'; // Used for form control (input, radio button, checkbox, textarea) default background.
 export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = 'rgba(255, 255, 255, 0.04)'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 export const GL_CONTROL_BACKGROUND_COLOR_CONCATENATION = 'rgba(255, 255, 255, 0.04)'; // Used for the background of static content that prepends or appends a text input.
-export const GL_CONTROL_BACKGROUND_COLOR_READONLY = '#28272d'; // Used for the background of static content that prepends or appends a text input.
+export const GL_CONTROL_BACKGROUND_COLOR_READONLY = 'rgba(255, 255, 255, 0.08)'; // Used for the background of static content that prepends or appends a text input.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#63a6e9'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.

package/src/tokens/build/js/tokens.js

@@ -611,7 +611,7 @@ export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#1f75cb'; // Used for th
 export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for form control (input, radio button, checkbox, textarea) default background.
 export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 export const GL_CONTROL_BACKGROUND_COLOR_CONCATENATION = '#fbfafd'; // Used for the background of static content that prepends or appends a text input.
-export const GL_CONTROL_BACKGROUND_COLOR_READONLY = '#fbfafd'; // Used for the background of static content that prepends or appends a text input.
+export const GL_CONTROL_BACKGROUND_COLOR_READONLY = 'rgba(05, 05, 06, 0.02)'; // Used for the background of static content that prepends or appends a text input.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#1f75cb'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.

package/src/tokens/build/json/tokens.dark.json

@@ -13516,15 +13516,15 @@
           ]
         },
         "readonly": {
-          "value": "#28272d",
+          "value": "rgba(255, 255, 255, 0.08)",
           "$type": "color",
           "comment": "Used for the background of static content that prepends or appends a text input.",
           "filePath": "src/tokens/control.tokens.json",
           "isSource": true,
           "original": {
             "value": {
-              "default": "{color.neutral.10}",
-              "dark": "{color.neutral.900}"
+              "default": "{color.alpha.dark.2}",
+              "dark": "{color.alpha.light.8}"
             },
             "$type": "color",
             "comment": "Used for the background of static content that prepends or appends a text input."

package/src/tokens/build/json/tokens.json

@@ -13516,15 +13516,15 @@
           ]
         },
         "readonly": {
-          "value": "#fbfafd",
+          "value": "rgba(05, 05, 06, 0.02)",
           "$type": "color",
           "comment": "Used for the background of static content that prepends or appends a text input.",
           "filePath": "src/tokens/control.tokens.json",
           "isSource": true,
           "original": {
             "value": {
-              "default": "{color.neutral.10}",
-              "dark": "{color.neutral.900}"
+              "default": "{color.alpha.dark.2}",
+              "dark": "{color.alpha.light.8}"
             },
             "$type": "color",
             "comment": "Used for the background of static content that prepends or appends a text input."

package/src/tokens/build/scss/_tokens.dark.scss

@@ -490,7 +490,7 @@ $gl-control-border-color-default: $gl-color-neutral-500; // Used for form contro
 $gl-control-background-color-selected-focus: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 $gl-control-background-color-selected-hover: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 $gl-control-background-color-selected-default: $gl-color-blue-300; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
-$gl-control-background-color-readonly: $gl-color-neutral-900; // Used for the background of static content that prepends or appends a text input.
+$gl-control-background-color-readonly: $gl-color-alpha-light-8; // Used for the background of static content that prepends or appends a text input.
 $gl-control-background-color-concatenation: $gl-color-alpha-light-4; // Used for the background of static content that prepends or appends a text input.
 $gl-control-background-color-disabled: $gl-color-alpha-light-4; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-default: $gl-color-alpha-dark-40; // Used for form control (input, radio button, checkbox, textarea) default background.

package/src/tokens/build/scss/_tokens.scss

@@ -490,7 +490,7 @@ $gl-control-border-color-default: $gl-color-neutral-400; // Used for form contro
 $gl-control-background-color-selected-focus: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 $gl-control-background-color-selected-hover: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 $gl-control-background-color-selected-default: $gl-color-blue-500; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
-$gl-control-background-color-readonly: $gl-color-neutral-10; // Used for the background of static content that prepends or appends a text input.
+$gl-control-background-color-readonly: $gl-color-alpha-dark-2; // Used for the background of static content that prepends or appends a text input.
 $gl-control-background-color-concatenation: $gl-color-neutral-10; // Used for the background of static content that prepends or appends a text input.
 $gl-control-background-color-disabled: $gl-color-neutral-10; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-default: $gl-color-neutral-0; // Used for form control (input, radio button, checkbox, textarea) default background.

package/src/tokens/control.tokens.json

@@ -28,8 +28,8 @@
         },
         "readonly": {
           "$value": {
-            "default": "{color.neutral.10}",
-            "dark": "{color.neutral.900}"
+            "default": "{color.alpha.dark.2}",
+            "dark": "{color.alpha.light.8}"
           },
           "$type": "color",
           "$description": "Used for the background of static content that prepends or appends a text input."