@gitlab/ui 87.2.0 → 87.3.0

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

@@ -6,7 +6,7 @@
 const GL_ACTION_DISABLED_FOREGROUND_COLOR = '#737278'; // Used for the foreground of a disabled action.
 const GL_ACTION_DISABLED_BACKGROUND_COLOR = '#28272d'; // Used for the background of a disabled action.
 const GL_ACTION_DISABLED_BORDER_COLOR = '#3a383f'; // Used for the border of a disabled action.
-const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#ececef'; // Used for the foreground of outlined and borderless neutral actions.
+const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#ececef'; // Used for the foreground of a neutral action in the default state.
 const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_HOVER = '#ececef'; // Used for the foreground of a neutral action in the hover state.
 const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#ececef'; // Used for the foreground of a neutral action in the focus state.
 const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_ACTIVE = '#ececef'; // Used for the foreground of a neutral action in the active state.

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

@@ -6,7 +6,7 @@
 const GL_ACTION_DISABLED_FOREGROUND_COLOR = '#89888d'; // Used for the foreground of a disabled action.
 const GL_ACTION_DISABLED_BACKGROUND_COLOR = '#ececef'; // Used for the background of a disabled action.
 const GL_ACTION_DISABLED_BORDER_COLOR = '#dcdcde'; // Used for the border of a disabled action.
-const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#28272d'; // Used for the foreground of outlined and borderless neutral actions.
+const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#28272d'; // Used for the foreground of a neutral action in the default state.
 const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_HOVER = '#28272d'; // Used for the foreground of a neutral action in the hover state.
 const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#28272d'; // Used for the foreground of a neutral action in the focus state.
 const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_ACTIVE = '#28272d'; // Used for the foreground of a neutral action in the active state.

package/dist/tokens/css/tokens.css

@@ -595,7 +595,7 @@
   --gl-action-confirm-foreground-color-default: var(--gl-color-blue-500); /* Used for the foreground of a confirm (positive) action in the default state. */
   --gl-action-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a neutral action in the default state. */
   --gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-hover); /* Used for the background of a neutral action in the focus state. */
-  --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-900); /* Used for the foreground of outlined and borderless neutral actions. */
+  --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-900); /* Used for the foreground of a neutral action in the default state. */
   --gl-action-disabled-border-color: var(--gl-color-neutral-100); /* Used for the border of a disabled action. */
   --gl-action-disabled-background-color: var(--gl-color-neutral-50); /* Used for the background of a disabled action. */
   --gl-action-disabled-foreground-color: var(--gl-color-neutral-400); /* Used for the foreground of a disabled action. */

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

@@ -595,7 +595,7 @@
   --gl-action-confirm-foreground-color-default: var(--gl-color-blue-400); /* Used for the foreground of a confirm (positive) action in the default state. */
   --gl-action-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a neutral action in the default state. */
   --gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-hover); /* Used for the background of a neutral action in the focus state. */
-  --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-50); /* Used for the foreground of outlined and borderless neutral actions. */
+  --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-50); /* Used for the foreground of a neutral action in the default state. */
   --gl-action-disabled-border-color: var(--gl-color-neutral-800); /* Used for the border of a disabled action. */
   --gl-action-disabled-background-color: var(--gl-color-neutral-900); /* Used for the background of a disabled action. */
   --gl-action-disabled-foreground-color: var(--gl-color-neutral-500); /* Used for the foreground of a disabled action. */

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

@@ -6,7 +6,7 @@
 export const GL_ACTION_DISABLED_FOREGROUND_COLOR = '#737278'; // Used for the foreground of a disabled action.
 export const GL_ACTION_DISABLED_BACKGROUND_COLOR = '#28272d'; // Used for the background of a disabled action.
 export const GL_ACTION_DISABLED_BORDER_COLOR = '#3a383f'; // Used for the border of a disabled action.
-export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#ececef'; // Used for the foreground of outlined and borderless neutral actions.
+export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#ececef'; // Used for the foreground of a neutral action in the default state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_HOVER = '#ececef'; // Used for the foreground of a neutral action in the hover state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#ececef'; // Used for the foreground of a neutral action in the focus state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_ACTIVE = '#ececef'; // Used for the foreground of a neutral action in the active state.

package/dist/tokens/js/tokens.js

@@ -6,7 +6,7 @@
 export const GL_ACTION_DISABLED_FOREGROUND_COLOR = '#89888d'; // Used for the foreground of a disabled action.
 export const GL_ACTION_DISABLED_BACKGROUND_COLOR = '#ececef'; // Used for the background of a disabled action.
 export const GL_ACTION_DISABLED_BORDER_COLOR = '#dcdcde'; // Used for the border of a disabled action.
-export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#28272d'; // Used for the foreground of outlined and borderless neutral actions.
+export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#28272d'; // Used for the foreground of a neutral action in the default state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_HOVER = '#28272d'; // Used for the foreground of a neutral action in the hover state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#28272d'; // Used for the foreground of a neutral action in the focus state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_ACTIVE = '#28272d'; // Used for the foreground of a neutral action in the active state.

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

@@ -83,7 +83,7 @@
           "default": {
             "value": "#ececef",
             "$type": "color",
-            "comment": "Used for the foreground of outlined and borderless neutral actions.",
+            "comment": "Used for the foreground of a neutral action in the default state.",
             "filePath": "src/tokens/action.tokens.json",
             "isSource": true,
             "original": {
@@ -92,7 +92,7 @@
                 "dark": "{color.neutral.50}"
               },
               "$type": "color",
-              "comment": "Used for the foreground of outlined and borderless neutral actions."
+              "comment": "Used for the foreground of a neutral action in the default state."
             },
             "name": "ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT",
             "attributes": {},

package/dist/tokens/json/tokens.json

@@ -83,7 +83,7 @@
           "default": {
             "value": "#28272d",
             "$type": "color",
-            "comment": "Used for the foreground of outlined and borderless neutral actions.",
+            "comment": "Used for the foreground of a neutral action in the default state.",
             "filePath": "src/tokens/action.tokens.json",
             "isSource": true,
             "original": {
@@ -92,7 +92,7 @@
                 "dark": "{color.neutral.50}"
               },
               "$type": "color",
-              "comment": "Used for the foreground of outlined and borderless neutral actions."
+              "comment": "Used for the foreground of a neutral action in the default state."
             },
             "name": "ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT",
             "attributes": {},

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

@@ -593,7 +593,7 @@ $gl-action-confirm-foreground-color-hover: $gl-color-blue-200; // Used for the f
 $gl-action-confirm-foreground-color-default: $gl-color-blue-400; // Used for the foreground of a confirm (positive) action in the default state.
 $gl-action-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a neutral action in the default state.
 $gl-action-neutral-background-color-focus: $gl-action-neutral-background-color-hover; // Used for the background of a neutral action in the focus state.
-$gl-action-neutral-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of outlined and borderless neutral actions.
+$gl-action-neutral-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a neutral action in the default state.
 $gl-action-disabled-border-color: $gl-color-neutral-800; // Used for the border of a disabled action.
 $gl-action-disabled-background-color: $gl-color-neutral-900; // Used for the background of a disabled action.
 $gl-action-disabled-foreground-color: $gl-color-neutral-500; // Used for the foreground of a disabled action.

package/dist/tokens/scss/_tokens.scss

@@ -593,7 +593,7 @@ $gl-action-confirm-foreground-color-hover: $gl-color-blue-700; // Used for the f
 $gl-action-confirm-foreground-color-default: $gl-color-blue-500; // Used for the foreground of a confirm (positive) action in the default state.
 $gl-action-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a neutral action in the default state.
 $gl-action-neutral-background-color-focus: $gl-action-neutral-background-color-hover; // Used for the background of a neutral action in the focus state.
-$gl-action-neutral-foreground-color-default: $gl-color-neutral-900; // Used for the foreground of outlined and borderless neutral actions.
+$gl-action-neutral-foreground-color-default: $gl-color-neutral-900; // Used for the foreground of a neutral action in the default state.
 $gl-action-disabled-border-color: $gl-color-neutral-100; // Used for the border of a disabled action.
 $gl-action-disabled-background-color: $gl-color-neutral-50; // Used for the background of a disabled action.
 $gl-action-disabled-foreground-color: $gl-color-neutral-400; // Used for the foreground of a disabled action.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "87.2.0",
+  "version": "87.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -108,13 +108,13 @@
     "@babel/core": "^7.24.9",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.24.8",
+    "@babel/preset-env": "^7.25.0",
     "@babel/preset-react": "^7.24.7",
     "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "19.6.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.109.0",
+    "@gitlab/svgs": "3.110.0",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
@@ -156,7 +156,7 @@
     "esbuild": "^0.18.0",
     "eslint": "8.57.0",
     "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-cypress": "3.3.0",
+    "eslint-plugin-cypress": "3.4.0",
     "eslint-plugin-storybook": "0.8.0",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "10.3.3",

package/src/components/base/token_selector/token_selector.md

@@ -43,3 +43,36 @@ export default {
   </div>
 </template>
 ```
+
+## User created tokens
+
+This component allows for users to create their own tokens when configured to do so.
+There are two props that support this functionality: `allowUserDefinedTokens` and `showAddNewAlways`.
+
+`allowUserDefinedTokens` is required to enable the functionality
+
+When set to `true` and a user's search text returns nothing,
+they will be presented with an additional dropdown item `Add ...`
+that takes their current search input and emits `@input`.
+The parent component can then handle the event accordingly.
+
+Additionally, there are scenarios where the user may want the ability to add a new token
+even if some search results are returned.  This functionality can be enabled by additionally
+setting `showAddNewAlways` to `true`.
+This will allow for the `Add ...` dropdown item to appear at all times
+whenever a user has inputted text, regardless if results are found.
+
+```html
+<template>
+  <div>
+    <gl-token-selector
+      v-model="selectedTokens"
+      :dropdown-items="dropdownItems"
+      allow-user-defined-items
+      show-ad-new-always
+      @input="onTokenUpdate"
+    />
+    {{ selectedTokens }}
+  </div>
+</template>
+```

package/src/components/base/token_selector/token_selector.vue

@@ -34,6 +34,14 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Shows 'Add new token option' in dropdown even if results are present, requires allowUserDefinedTokens to be true
+     */
+    showAddNewAlways: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     /**
      * Dropdown items are loading, can be used when requesting new dropdown items
      */
@@ -161,7 +169,11 @@ export default {
       return !this.filteredDropdownItems.length;
     },
     userDefinedTokenCanBeAdded() {
-      return this.allowUserDefinedTokens && this.dropdownHasNoItems && this.inputText !== '';
+      if (!this.allowUserDefinedTokens || !this.inputText) {
+        return false;
+      }
+
+      return this.showAddNewAlways || this.dropdownHasNoItems;
     },
     hideDropdown() {
       if (this.userDefinedTokenCanBeAdded) {
@@ -262,9 +274,7 @@ export default {
       });
     },
     handleEnter() {
-      if (this.userDefinedTokenCanBeAdded) {
-        this.addToken();
-      } else if (this.focusedDropdownItem && this.dropdownIsOpen) {
+      if (this.focusedDropdownItem && this.dropdownIsOpen) {
         this.addToken(this.focusedDropdownItem);
       }
     },
@@ -302,21 +312,13 @@ export default {
 
       this.focusTextInput();
     },
-    addToken(dropdownItem = null) {
-      const token =
-        dropdownItem !== null
-          ? dropdownItem
-          : {
-              id: uniqueId('user-defined-token'),
-              name: this.inputText,
-            };
-
+    addToken(dropdownItem) {
       /**
        * Fired when a token is added or removed
        *
        * @property {array} selectedTokens
        */
-      this.$emit('input', [...this.selectedTokens, token]);
+      this.$emit('input', [...this.selectedTokens, dropdownItem]);
 
       this.inputText = '';
       this.closeDropdown();
@@ -326,13 +328,13 @@ export default {
        *
        * @property {object} token
        */
-      this.$emit('token-add', token);
+      this.$emit('token-add', dropdownItem);
     },
     removeToken(token) {
       /**
-       * Fired when user types in the token selector
+       * Fired when a token is added or removed
        *
-       * @property {string} inputText
+       * @property {array} selectedTokens
        */
       this.$emit(
         'input',
@@ -446,7 +448,7 @@ export default {
       :dropdown-items="filteredDropdownItems"
       :selected-tokens="selectedTokens"
       :input-text="inputText"
-      :allow-user-defined-tokens="allowUserDefinedTokens"
+      :user-defined-token-can-be-added="userDefinedTokenCanBeAdded"
       :component-id="$options.componentId"
       :register-dropdown-event-handlers="registerDropdownEventHandlers"
       :register-reset-focused-dropdown-item="registerResetFocusedDropdownItem"
@@ -466,7 +468,7 @@ export default {
       </template>
       <template #no-results-content>
         <!-- @slot Content to display when `dropdown-items` is empty and
-          `allow-user-defined-tokens` is `false`. Default content is "No matches found". -->
+          both `allow-user-defined-tokens` and `show-add-new-always` is `false`. Default content is "No matches found". -->
         <slot name="no-results-content"></slot>
       </template>
       <template #dropdown-item-content="{ dropdownItem }">

package/src/components/base/token_selector/token_selector_dropdown.vue

@@ -1,4 +1,5 @@
 <script>
+import uniqueId from 'lodash/uniqueId';
 import GlDropdownItem from '../dropdown/dropdown_item.vue';
 import { tokensValidator } from './helpers';
 
@@ -30,7 +31,7 @@ export default {
       type: String,
       required: true,
     },
-    allowUserDefinedTokens: {
+    userDefinedTokenCanBeAdded: {
       type: Boolean,
       required: true,
     },
@@ -53,7 +54,30 @@ export default {
     };
   },
   computed: {
+    userDefinedToken() {
+      return {
+        id: uniqueId('user-defined-token'),
+        name: this.inputText,
+      };
+    },
+    dropdownLength() {
+      // Adds an additional dropdown item for the 'Add ... dropdown' item
+      return this.userDefinedTokenCanBeAdded
+        ? this.dropdownItems.length
+        : this.dropdownItems.length - 1;
+    },
+    focusedLastDropdownItem() {
+      return this.focusedDropdownItemIndex === this.dropdownLength;
+    },
+    focusedUserDefinedToken() {
+      // User defined tokens are always the last in the list
+      return this.userDefinedTokenCanBeAdded && this.focusedLastDropdownItem;
+    },
     focusedDropdownItem() {
+      if (this.focusedUserDefinedToken) {
+        return this.userDefinedToken;
+      }
+
       return this.dropdownItems[this.focusedDropdownItemIndex];
     },
   },
@@ -92,10 +116,7 @@ export default {
     handleMousedown(dropdownItem) {
       // `event.relatedTarget` returns `null` on Safari because buttons are not focused on click (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus)
       // Because of this we need to manually focus on the button. We do this in `mousedown` because it is fired before the `blur` event
-      const dropdownItemRef =
-        dropdownItem === null
-          ? this.$refs.userDefinedTokenDropdownItem
-          : this.getDropdownItemRef(dropdownItem);
+      const dropdownItemRef = this.getDropdownItemRef(dropdownItem);
 
       if (dropdownItemRef?.$el) {
         dropdownItemRef.$el.querySelector('button').focus();
@@ -121,7 +142,7 @@ export default {
       }
 
       // Last dropdown item has been reached
-      if (this.focusedDropdownItemIndex === this.dropdownItems.length - 1) {
+      if (this.focusedLastDropdownItem) {
         return;
       }
 
@@ -138,7 +159,7 @@ export default {
       this.focusLastDropdownItem();
     },
     focusLastDropdownItem() {
-      this.focusedDropdownItemIndex = this.dropdownItems.length - 1;
+      this.focusedDropdownItemIndex = this.dropdownLength;
     },
     focusFirstDropdownItem() {
       this.focusedDropdownItemIndex = 0;
@@ -160,6 +181,10 @@ export default {
       return dropdownItem.id === this.focusedDropdownItem.id;
     },
     getDropdownItemRef(dropdownItem) {
+      if (this.focusedUserDefinedToken) {
+        return this.$refs[this.userDefinedToken.id];
+      }
+
       return this.$refs.dropdownItems?.find(
         (ref) => ref.$attrs['data-dropdown-item-id'] === dropdownItem.id
       );
@@ -183,43 +208,49 @@ export default {
       <gl-dropdown-item v-if="loading" disabled>
         <slot name="loading-content">Searching...</slot>
       </gl-dropdown-item>
-      <template v-else-if="dropdownItems.length">
-        <gl-dropdown-item
-          v-for="dropdownItem in dropdownItems"
-          :id="dropdownItemIdAttribute(dropdownItem)"
-          ref="dropdownItems"
-          :key="dropdownItem.id"
-          :data-dropdown-item-id="dropdownItem.id"
-          :active="dropdownItemIsFocused(dropdownItem)"
-          active-class="is-focused"
-          tabindex="-1"
-          @click="handleDropdownItemClick(dropdownItem)"
-        >
-          <div class="-gl-mx-4 -gl-my-3 gl-px-4 gl-py-3" @mousedown="handleMousedown(dropdownItem)">
-            <slot name="dropdown-item-content" :dropdown-item="dropdownItem">
-              {{ dropdownItem.name }}
-            </slot>
-          </div>
-        </gl-dropdown-item>
-      </template>
-      <template v-else>
-        <gl-dropdown-item
-          v-if="allowUserDefinedTokens && inputText !== ''"
-          ref="userDefinedTokenDropdownItem"
-          active
-          active-class="is-focused"
-          @click="handleDropdownItemClick(null)"
+
+      <gl-dropdown-item
+        v-for="dropdownItem in dropdownItems"
+        :id="dropdownItemIdAttribute(dropdownItem)"
+        ref="dropdownItems"
+        :key="dropdownItem.id"
+        :data-dropdown-item-id="dropdownItem.id"
+        :active="dropdownItemIsFocused(dropdownItem)"
+        active-class="is-focused"
+        tabindex="-1"
+        @click="handleDropdownItemClick(dropdownItem)"
+      >
+        <div class="-gl-mx-4 -gl-my-3 gl-px-4 gl-py-3" @mousedown="handleMousedown(dropdownItem)">
+          <slot name="dropdown-item-content" :dropdown-item="dropdownItem">
+            {{ dropdownItem.name }}
+          </slot>
+        </div>
+      </gl-dropdown-item>
+
+      <gl-dropdown-item
+        v-if="userDefinedTokenCanBeAdded"
+        :id="dropdownItemIdAttribute(userDefinedToken)"
+        :ref="userDefinedToken.id"
+        :data-dropdown-item-id="userDefinedToken.id"
+        :active="dropdownItemIsFocused(userDefinedToken)"
+        active-class="is-focused"
+        tabindex="-1"
+        @click="handleDropdownItemClick(userDefinedToken)"
+      >
+        <div
+          class="-gl-mx-4 -gl-my-3 gl-px-4 gl-py-3"
+          @mousedown="handleMousedown(userDefinedToken)"
         >
-          <div class="-gl-mx-4 -gl-my-3 gl-px-4 gl-py-3" @mousedown="handleMousedown(null)">
-            <slot name="user-defined-token-content" :input-text="inputText">
-              Add "{{ inputText }}"
-            </slot>
-          </div>
-        </gl-dropdown-item>
-        <gl-dropdown-item v-else disabled>
-          <slot name="no-results-content">No matches found</slot>
-        </gl-dropdown-item>
-      </template>
+          <slot name="user-defined-token-content" :input-text="inputText">
+            Add "{{ inputText }}"
+          </slot>
+        </div>
+      </gl-dropdown-item>
+
+      <gl-dropdown-item v-else-if="!dropdownItems.length" disabled>
+        <slot name="no-results-content">No matches found</slot>
+      </gl-dropdown-item>
+
       <slot name="dropdown-footer"></slot>
     </ul>
   </div>

package/src/tokens/action.tokens.json

@@ -41,7 +41,7 @@
               "dark": "{color.neutral.50}"
             },
             "$type": "color",
-            "$description": "Used for the foreground of outlined and borderless neutral actions."
+            "$description": "Used for the foreground of a neutral action in the default state."
           },
           "hover": {
             "$value": "{action.neutral.foreground.color.default}",

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

@@ -595,7 +595,7 @@
   --gl-action-confirm-foreground-color-default: var(--gl-color-blue-500); /* Used for the foreground of a confirm (positive) action in the default state. */
   --gl-action-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a neutral action in the default state. */
   --gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-hover); /* Used for the background of a neutral action in the focus state. */
-  --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-900); /* Used for the foreground of outlined and borderless neutral actions. */
+  --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-900); /* Used for the foreground of a neutral action in the default state. */
   --gl-action-disabled-border-color: var(--gl-color-neutral-100); /* Used for the border of a disabled action. */
   --gl-action-disabled-background-color: var(--gl-color-neutral-50); /* Used for the background of a disabled action. */
   --gl-action-disabled-foreground-color: var(--gl-color-neutral-400); /* Used for the foreground of a disabled action. */

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

@@ -595,7 +595,7 @@
   --gl-action-confirm-foreground-color-default: var(--gl-color-blue-400); /* Used for the foreground of a confirm (positive) action in the default state. */
   --gl-action-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a neutral action in the default state. */
   --gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-hover); /* Used for the background of a neutral action in the focus state. */
-  --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-50); /* Used for the foreground of outlined and borderless neutral actions. */
+  --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-50); /* Used for the foreground of a neutral action in the default state. */
   --gl-action-disabled-border-color: var(--gl-color-neutral-800); /* Used for the border of a disabled action. */
   --gl-action-disabled-background-color: var(--gl-color-neutral-900); /* Used for the background of a disabled action. */
   --gl-action-disabled-foreground-color: var(--gl-color-neutral-500); /* Used for the foreground of a disabled action. */

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

@@ -6,7 +6,7 @@
 export const GL_ACTION_DISABLED_FOREGROUND_COLOR = '#737278'; // Used for the foreground of a disabled action.
 export const GL_ACTION_DISABLED_BACKGROUND_COLOR = '#28272d'; // Used for the background of a disabled action.
 export const GL_ACTION_DISABLED_BORDER_COLOR = '#3a383f'; // Used for the border of a disabled action.
-export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#ececef'; // Used for the foreground of outlined and borderless neutral actions.
+export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#ececef'; // Used for the foreground of a neutral action in the default state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_HOVER = '#ececef'; // Used for the foreground of a neutral action in the hover state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#ececef'; // Used for the foreground of a neutral action in the focus state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_ACTIVE = '#ececef'; // Used for the foreground of a neutral action in the active state.

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

@@ -6,7 +6,7 @@
 export const GL_ACTION_DISABLED_FOREGROUND_COLOR = '#89888d'; // Used for the foreground of a disabled action.
 export const GL_ACTION_DISABLED_BACKGROUND_COLOR = '#ececef'; // Used for the background of a disabled action.
 export const GL_ACTION_DISABLED_BORDER_COLOR = '#dcdcde'; // Used for the border of a disabled action.
-export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#28272d'; // Used for the foreground of outlined and borderless neutral actions.
+export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#28272d'; // Used for the foreground of a neutral action in the default state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_HOVER = '#28272d'; // Used for the foreground of a neutral action in the hover state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#28272d'; // Used for the foreground of a neutral action in the focus state.
 export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_ACTIVE = '#28272d'; // Used for the foreground of a neutral action in the active state.

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

@@ -83,7 +83,7 @@
           "default": {
             "value": "#ececef",
             "$type": "color",
-            "comment": "Used for the foreground of outlined and borderless neutral actions.",
+            "comment": "Used for the foreground of a neutral action in the default state.",
             "filePath": "src/tokens/action.tokens.json",
             "isSource": true,
             "original": {
@@ -92,7 +92,7 @@
                 "dark": "{color.neutral.50}"
               },
               "$type": "color",
-              "comment": "Used for the foreground of outlined and borderless neutral actions."
+              "comment": "Used for the foreground of a neutral action in the default state."
             },
             "name": "ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT",
             "attributes": {},

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

@@ -83,7 +83,7 @@
           "default": {
             "value": "#28272d",
             "$type": "color",
-            "comment": "Used for the foreground of outlined and borderless neutral actions.",
+            "comment": "Used for the foreground of a neutral action in the default state.",
             "filePath": "src/tokens/action.tokens.json",
             "isSource": true,
             "original": {
@@ -92,7 +92,7 @@
                 "dark": "{color.neutral.50}"
               },
               "$type": "color",
-              "comment": "Used for the foreground of outlined and borderless neutral actions."
+              "comment": "Used for the foreground of a neutral action in the default state."
             },
             "name": "ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT",
             "attributes": {},

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

@@ -593,7 +593,7 @@ $gl-action-confirm-foreground-color-hover: $gl-color-blue-200; // Used for the f
 $gl-action-confirm-foreground-color-default: $gl-color-blue-400; // Used for the foreground of a confirm (positive) action in the default state.
 $gl-action-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a neutral action in the default state.
 $gl-action-neutral-background-color-focus: $gl-action-neutral-background-color-hover; // Used for the background of a neutral action in the focus state.
-$gl-action-neutral-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of outlined and borderless neutral actions.
+$gl-action-neutral-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a neutral action in the default state.
 $gl-action-disabled-border-color: $gl-color-neutral-800; // Used for the border of a disabled action.
 $gl-action-disabled-background-color: $gl-color-neutral-900; // Used for the background of a disabled action.
 $gl-action-disabled-foreground-color: $gl-color-neutral-500; // Used for the foreground of a disabled action.

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

@@ -593,7 +593,7 @@ $gl-action-confirm-foreground-color-hover: $gl-color-blue-700; // Used for the f
 $gl-action-confirm-foreground-color-default: $gl-color-blue-500; // Used for the foreground of a confirm (positive) action in the default state.
 $gl-action-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a neutral action in the default state.
 $gl-action-neutral-background-color-focus: $gl-action-neutral-background-color-hover; // Used for the background of a neutral action in the focus state.
-$gl-action-neutral-foreground-color-default: $gl-color-neutral-900; // Used for the foreground of outlined and borderless neutral actions.
+$gl-action-neutral-foreground-color-default: $gl-color-neutral-900; // Used for the foreground of a neutral action in the default state.
 $gl-action-disabled-border-color: $gl-color-neutral-100; // Used for the border of a disabled action.
 $gl-action-disabled-background-color: $gl-color-neutral-50; // Used for the background of a disabled action.
 $gl-action-disabled-foreground-color: $gl-color-neutral-400; // Used for the foreground of a disabled action.