@gitlab/ui 94.6.0 → 94.7.0

package/dist/vendor/bootstrap-vue/src/utils/string.js

@@ -1,4 +1,4 @@
-import { RX_HYPHENATE, RX_UN_KEBAB, RX_UNDERSCORE, RX_LOWER_UPPER, RX_START_SPACE_WORD, RX_REGEXP_REPLACE, RX_TRIM_LEFT, RX_TRIM_RIGHT } from '../constants/regex';
+import { RX_HYPHENATE, RX_UNDERSCORE, RX_LOWER_UPPER, RX_START_SPACE_WORD, RX_REGEXP_REPLACE, RX_TRIM_LEFT, RX_TRIM_RIGHT } from '../constants/regex';
 import { isString, isUndefinedOrNull, isArray, isPlainObject } from './inspect';
 
 // String utilities
@@ -10,12 +10,6 @@ const kebabCase = str => {
   return str.replace(RX_HYPHENATE, '-$1').toLowerCase();
 };
 
-// Converts a kebab-case or camelCase string to PascalCase
-const pascalCase = str => {
-  str = kebabCase(str).replace(RX_UN_KEBAB, (_, c) => c ? c.toUpperCase() : '');
-  return str.charAt(0).toUpperCase() + str.slice(1);
-};
-
 // Converts a string, including strings in camelCase or snake_case, into Start Case
 // It keeps original single quote and hyphen in the word
 // https://github.com/UrbanCompass/to-start-case
@@ -50,4 +44,4 @@ const trim = str => toString(str).trim();
 // Lower case a string
 const lowerCase = str => toString(str).toLowerCase();
 
-export { escapeRegExp, kebabCase, lowerCase, pascalCase, startCase, toString, trim, trimLeft, trimRight, upperFirst };
+export { escapeRegExp, kebabCase, lowerCase, startCase, toString, trim, trimLeft, trimRight, upperFirst };

package/package.json

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

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -121,8 +121,9 @@ export default {
       this.overflowingItems = [];
     },
     async measureAndMakeBreadcrumbsFit() {
-      this.resizeDone = false;
       this.resetItems();
+      if (!this.autoResize) return;
+      this.resizeDone = false;
 
       // Wait for DOM update so all items get rendered and can be measured.
       await this.$nextTick();

package/src/components/base/dropdown/dropdown.scss

@@ -1,8 +1,8 @@
 .gl-dropdown {
   .dropdown-menu {
-    @apply gl-border-1 gl-border-gray-200;
+    @apply gl-border-1 gl-border-dropdown;
     @apply gl-rounded-base;
-    @apply gl-bg-white;
+    @apply gl-bg-dropdown;
     @apply gl-mt-2;
     @apply gl-mb-2;
     @apply gl-p-0;
@@ -38,9 +38,10 @@
   }
 
   .gl-dropdown-header-top {
-    @apply gl-border-1 gl-border-b-solid gl-border-gray-200;
+    @apply gl-border-1 gl-border-b-solid gl-border-dropdown;
     @apply gl-flex;
     @apply gl-text-base;
+    @apply gl-text-heading;
     @apply gl-font-bold;
     @apply gl-justify-center;
     @apply gl-leading-normal;
@@ -51,11 +52,11 @@
   }
 
   .gl-dropdown-header {
-    @apply gl-border-b-1 gl-border-b-solid gl-border-b-gray-200;
+    @apply gl-border-b-1 gl-border-b-solid gl-border-b-dropdown;
   }
 
   .gl-dropdown-footer {
-    @apply gl-border-t-1 gl-border-t-solid gl-border-t-gray-200;
+    @apply gl-border-t-1 gl-border-t-solid gl-border-t-dropdown;
     @apply gl-py-3;
   }
 
@@ -95,10 +96,6 @@
       @include mask-chevron-down;
     }
 
-    &.btn-default:not(:disabled)::after {
-      @apply gl-border-gray-500;
-    }
-
     &.btn-confirm,
     &.btn-info,
     &.btn-success,

package/src/components/base/dropdown/dropdown.vue

@@ -279,7 +279,7 @@ export default {
           class="gl-justify-content-flex-start gl-flex gl-grow"
           :class="highlightedItemsTitleClass"
         >
-          <span class="gl-font-bold" data-testid="highlighted-items-title">{{
+          <span class="gl-font-bold gl-text-strong" data-testid="highlighted-items-title">{{
             highlightedItemsTitle
           }}</span>
         </div>

package/src/components/base/dropdown/dropdown_divider.scss

@@ -4,7 +4,7 @@
   @apply gl-my-2;
   @apply gl-mx-0;
   @apply gl-p-0;
-  @apply gl-border-t-1 gl-border-t-solid gl-border-t-gray-200;
+  @apply gl-border-t-1 gl-border-t-solid gl-border-t-dropdown;
 }
 
 /* Styling when the component is used on its own */

package/src/components/base/dropdown/dropdown_item.scss

@@ -11,7 +11,7 @@
   position: relative;
   @apply gl-rounded-none;
   @apply gl-shadow-none;
-  @apply gl-text-gray-900;
+  color: var(--gl-dropdown-option-text-color-default);
   @apply gl-text-left;
   @apply gl-w-full;
   @apply gl-whitespace-normal;
@@ -30,7 +30,7 @@
     .gl-dropdown-item-check-icon {
       @apply gl-shrink-0;
       @apply gl-mr-3;
-      @apply gl-text-gray-700;
+      color: var(--gl-dropdown-option-indicator-color-selected-default);
     }
 
     .gl-dropdown-item-icon {
@@ -44,7 +44,7 @@
 
     .gl-dropdown-item-text-secondary {
       @apply gl-m-0;
-      @apply gl-text-gray-700;
+      @apply gl-text-subtle;
     }
 
     .gl-dropdown-item-text-wrapper {
@@ -56,7 +56,7 @@
 
     // make sure the text color is not overridden
     &.text-danger {
-      @apply gl-text-red-500;
+      @apply gl-text-danger;
     }
 
     &.disable-hover {
@@ -64,7 +64,7 @@
     }
 
     &:disabled {
-      @apply gl-text-gray-500;
+      @apply gl-text-disabled;
 
       .gl-new-dropdown-item-check-icon {
         @apply gl-text-inherit;
@@ -83,17 +83,13 @@
     &:active,
     &:focus,
     &.is-focused {
-      @apply gl-bg-gray-50;
+      background-color: var(--gl-dropdown-option-background-color-unselected-hover);
       @apply gl-no-underline;
-      @apply gl-text-gray-900;
+      color: var(--gl-dropdown-option-text-color-default);
 
       // make sure the text color is not overridden
       &.text-danger {
-        @apply gl-text-red-500;
-      }
-
-      .avatar {
-        @apply gl-border-white;
+        @apply gl-text-danger;
       }
     }
 

package/src/components/base/dropdown/dropdown_item.vue

@@ -68,7 +68,7 @@ export default {
       return href || to ? BDropdownItem : BDropdownItemButton;
     },
     iconColorCss() {
-      return variantCssColorMap[this.iconColor] || 'gl-text-gray-700';
+      return variantCssColorMap[this.iconColor] || 'gl-fill-icon-default';
     },
     shouldShowCheckIcon() {
       return this.isChecked || this.isCheckItem;

package/src/components/base/dropdown/dropdown_section_header.scss

@@ -1,6 +1,6 @@
 @mixin gl-tmp-dropdown-section-header-style {
   @apply gl-text-base;
-  @apply gl-text-gray-900;
+  @apply gl-text-heading;
   @apply gl-leading-normal;
   @apply gl-text-left;
   @apply gl-font-bold;

package/src/components/base/filtered_search/filtered_search_suggestion.scss

@@ -3,9 +3,9 @@
 }
 
 .gl-filtered-search-suggestion-active {
-  @apply gl-bg-gray-100;
+  background-color: var(--gl-dropdown-option-background-color-selected-default);
   @apply gl-no-underline;
-  @apply gl-text-gray-900;
+  color: var(--gl-dropdown-option-text-color-default);
   @apply gl-outline-none;
   @include gl-focus($inset: true);
 }

package/src/components/base/filtered_search/filtered_search_suggestion_list.scss

@@ -5,7 +5,8 @@
   @apply gl-block;
   width: $gl-dropdown-width;
   @apply gl-p-2;
-  @apply gl-border-gray-200;
+  @apply gl-bg-dropdown;
+  @apply gl-border-dropdown;
   @apply gl-rounded-lg;
   @apply gl-shadow-md;
 }

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.scss

@@ -7,7 +7,7 @@
     .gl-new-dropdown-item-content {
       &:disabled,
       &[disabled] {
-        @apply gl-text-gray-500;
+        color: var(--gl-dropdown-option-text-color-disabled);
         cursor: not-allowed;
         background: none;
         text-decoration: none;

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.vue

@@ -8,8 +8,8 @@ import {
 } from './constants';
 
 export const BORDER_CLASSES = {
-  [borderPositions.top]: 'gl-border-t gl-border-t-gray-200 gl-pt-2 gl-mt-2',
-  [borderPositions.bottom]: 'gl-border-b gl-border-b-gray-200 gl-pb-2 gl-mb-2',
+  [borderPositions.top]: 'gl-border-t gl-border-t-dropdown gl-pt-2 gl-mt-2',
+  [borderPositions.bottom]: 'gl-border-b gl-border-b-dropdown gl-pb-2 gl-mb-2',
 };
 
 export default {
@@ -81,7 +81,7 @@ export default {
       v-if="showHeader"
       :id="nameId"
       aria-hidden="true"
-      class="gl-py-2 gl-pl-4 gl-text-sm gl-font-bold"
+      class="gl-py-2 gl-pl-4 gl-text-sm gl-font-bold gl-text-strong"
     >
       <slot name="group-label">{{ group.name }}</slot>
     </div>

package/src/components/base/new_dropdowns/dropdown.scss

@@ -14,8 +14,8 @@
 
   .gl-new-dropdown-panel {
     @apply gl-hidden;
-    @apply gl-bg-white;
-    @apply gl-border-1 gl-border-solid gl-border-gray-200;
+    @apply gl-bg-dropdown;
+    @apply gl-border-1 gl-border-solid gl-border-dropdown;
     @apply gl-rounded-lg;
     @apply gl-shadow-md;
     top: 0;
@@ -154,12 +154,12 @@
         &.top-scrim-light {
           height: 2.25rem;
           border-radius: 0.375rem 0.375rem 0 0;
-          background: linear-gradient(180deg, $white 0%, $transparent-rgba);
+          background: linear-gradient(180deg, var(--gl-dropdown-background-color) 0%, var(--gl-color-alpha-0));
         }
 
         &.top-scrim-dark {
           height: 0.25rem;
-          background: linear-gradient(180deg, $t-gray-a-16 0%, $transparent-rgba 100%);
+          background: linear-gradient(180deg, var(--gl-shadow-color-default) 0%, var(--gl-color-alpha-0) 100%);
         }
       }
     }
@@ -173,7 +173,7 @@
         position: relative;
         top: calc(-2.25rem + #{$dropdown-content-padding});
         border-radius: 0 0 0.375rem 0.375rem;
-        background: linear-gradient(180deg, $transparent-rgba 0%, $white);
+        background: linear-gradient(180deg, var(--gl-color-alpha-0) 0%, var(--gl-dropdown-background-color));
       }
     }
 

package/src/components/base/new_dropdowns/dropdown_item.scss

@@ -16,44 +16,61 @@
     @apply gl-mb-0;
   }
 
-  &:hover,
+  &:hover {
+    .gl-new-dropdown-item-content {
+      color: var(--gl-dropdown-option-text-color-hover);
+      background-color: var(--gl-dropdown-option-background-color-unselected-hover);
+    }
+  }
+
   &:focus {
     .gl-new-dropdown-item-content {
-      @apply gl-bg-gray-50;
+      color: var(--gl-dropdown-option-text-color-focus);
+      background-color: var(--gl-dropdown-option-background-color-unselected-focus);
     }
   }
 
   &:active,
   &:focus:active {
     .gl-new-dropdown-item-content {
-      @apply gl-bg-gray-100;
+      color: var(--gl-dropdown-option-text-color-active);
+      background-color: var(--gl-dropdown-option-background-color-unselected-active);
     }
   }
 
   &[aria-selected="true"] {
     .gl-new-dropdown-item-content {
-      @apply gl-bg-gray-50;
+      background-color: var(--gl-dropdown-option-background-color-selected-default);
+    }
+
+    &:hover {
+      .gl-new-dropdown-item-content {
+        background-color: var(--gl-dropdown-option-background-color-selected-hover);
+      }
+
+      .gl-new-dropdown-item-check-icon {
+        color: var(--gl-dropdown-option-indicator-color-selected-hover);
+      }
     }
 
-    &:hover,
     &:focus {
       .gl-new-dropdown-item-content {
-        @apply gl-bg-gray-100;
+        background-color: var(--gl-dropdown-option-background-color-selected-focus);
       }
 
       .gl-new-dropdown-item-check-icon {
-        @apply gl-text-blue-600
+        color: var(--gl-dropdown-option-indicator-color-selected-focus);
       }
     }
 
     &:active,
     &:focus:active {
       .gl-new-dropdown-item-content {
-        @apply gl-bg-gray-200;
+        background-color: var(--gl-dropdown-option-background-color-selected-active);
       }
 
       .gl-new-dropdown-item-check-icon {
-        @apply gl-text-blue-700
+        color: var(--gl-dropdown-option-indicator-color-selected-active);
       }
     }
   }
@@ -80,7 +97,7 @@
     @apply gl-rounded-base;
     @apply gl-border-0;
     @apply gl-w-full;
-    @apply gl-bg-transparent;
+    background-color: var(--gl-dropdown-option-background-color-unselected-default);
     @apply gl-items-center;
     @apply gl-flex;
     @apply gl-text-base;
@@ -90,7 +107,7 @@
     @apply gl-py-0;
     position: relative;
     @apply gl-no-underline;
-    @apply gl-text-gray-900;
+    color: var(--gl-dropdown-option-text-color-default);
     @apply gl-text-left;
     @apply gl-whitespace-normal;
     @include gl-prefers-reduced-motion-transition;
@@ -100,7 +117,7 @@
     .gl-new-dropdown-item-check-icon {
       @apply gl-shrink-0;
       @apply gl-mr-3;
-      @apply gl-text-blue-500;
+      color: var(--gl-dropdown-option-indicator-color-selected-default);
     }
 
     .gl-new-dropdown-item-icon {

package/src/components/base/new_dropdowns/listbox/listbox.scss

@@ -20,7 +20,7 @@ $clear-button-size: 24px;
     }
 
     &::placeholder {
-      @apply gl-text-gray-400;
+      color: var(--gl-control-placeholder-color);
     }
 
     &::-webkit-search-cancel-button {
@@ -42,7 +42,7 @@ $clear-button-size: 24px;
     position: absolute;
     top: calc(50% - #{$search-icon-size} / 2);
     left: $gl-spacing-scale-4;
-    @apply gl-text-gray-500;
+    color: var(--gl-icon-color-subtle);
   }
 
   .gl-listbox-search-clear-button {

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -33,8 +33,8 @@ import GlListboxGroup from './listbox_group.vue';
 import { isOption, itemsValidator, flattenedOptions } from './utils';
 
 export const ITEM_SELECTOR = '[role="option"]';
-const HEADER_ITEMS_BORDER_CLASSES = ['gl-border-b-1', 'gl-border-b-solid', 'gl-border-b-gray-200'];
-const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-border-t-gray-200', 'gl-pt-1', 'gl-mt-2'];
+const HEADER_ITEMS_BORDER_CLASSES = ['gl-border-b-1', 'gl-border-b-solid', 'gl-border-b-dropdown'];
+const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-border-t-dropdown', 'gl-pt-1', 'gl-mt-2'];
 export const SEARCH_INPUT_SELECTOR = '.gl-listbox-search-input';
 
 export default {
@@ -462,7 +462,7 @@ export default {
       const toggleClasses = [this.toggleClass];
 
       if (!this.hasSelection) {
-        toggleClasses.push('!gl-text-gray-500');
+        toggleClasses.push('!gl-text-subtle');
       }
       return toggleClasses;
     },
@@ -785,7 +785,7 @@ export default {
     >
       <div
         :id="headerId"
-        class="gl-grow gl-pr-2 gl-text-sm gl-font-bold"
+        class="gl-grow gl-pr-2 gl-text-sm gl-font-bold gl-text-strong"
         data-testid="listbox-header-text"
       >
         {{ headerText }}
@@ -927,7 +927,7 @@ export default {
     <div
       v-else-if="showNoResultsText"
       aria-live="assertive"
-      class="gl-py-3 gl-pl-7 gl-pr-5 gl-text-base gl-text-gray-600"
+      class="gl-py-3 gl-pl-7 gl-pr-5 gl-text-base gl-text-subtle"
       data-testid="listbox-no-results-text"
     >
       {{ noResultsText }}

package/src/components/base/new_dropdowns/listbox/listbox_group.vue

@@ -25,7 +25,7 @@ export default {
     <li
       :id="nameId"
       role="presentation"
-      class="gl-pb-2 gl-pl-4 gl-pt-3 gl-text-sm gl-font-bold"
+      class="gl-pb-2 gl-pl-4 gl-pt-3 gl-text-sm gl-font-bold gl-text-strong"
       :class="{ 'gl-sr-only': textSrOnly }"
     >
       <slot name="group-label">{{ name }}</slot>

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

@@ -527,6 +527,14 @@
   --gl-filtered-search-token-data-background-color-default: var(--gl-color-neutral-100); /* Used for the filtered search data background color in the default state. */
   --gl-filtered-search-token-type-background-color-hover: var(--gl-color-neutral-100); /* Used for the filtered search type token background color in the hover state. */
   --gl-filtered-search-token-type-background-color-default: var(--gl-color-neutral-50); /* Used for the filtered search type token background color in the default state. */
+  --gl-dropdown-option-background-color-selected-active: var(--gl-color-neutral-200); /* Used for the background of a selected dropdown option in the active state. */
+  --gl-dropdown-option-background-color-selected-hover: var(--gl-color-neutral-100); /* Used for the background of a selected dropdown option in the hover state. */
+  --gl-dropdown-option-background-color-selected-default: var(--gl-color-neutral-50); /* Used for the background of a selected dropdown option in the default state. */
+  --gl-dropdown-option-background-color-unselected-active: var(--gl-action-neutral-background-color-active); /* Used for the background of an unselected dropdown option in the active state. */
+  --gl-dropdown-option-background-color-unselected-hover: var(--gl-action-neutral-background-color-hover); /* Used for the background of an unselected dropdown option in the hover state. */
+  --gl-dropdown-option-background-color-unselected-default: var(--gl-action-neutral-background-color-default); /* Used for the background of an unselected dropdown option in the default state. */
+  --gl-dropdown-option-indicator-color-selected-active: var(--gl-color-blue-700); /* Used for the dropdown selected option indicator in the active state. */
+  --gl-dropdown-border-color: var(--gl-color-neutral-200); /* Used for the border of a dropdown. */
   --gl-datepicker-background-color: var(--gl-color-neutral-0); /* Used for the background color of datepicker. */
   --gl-button-disabled-border-color: var(--gl-color-neutral-100); /* Used for the border of a disabled button. */
   --gl-button-disabled-background-color: var(--gl-color-neutral-10); /* Used for the background of a disabled button. */
@@ -773,6 +781,14 @@
   --gl-token-foreground-color: var(--gl-text-color-default); /* Used for the token foreground color. */
   --gl-table-sorting-icon-color: var(--gl-text-color-heading); /* Used for the color of the sorting icons in the column headers. */
   --gl-table-row-background-color-hover: var(--gl-background-color-subtle); /* Used for the background of a table row in hover state. */
+  --gl-dropdown-option-background-color-selected-focus: var(--gl-dropdown-option-background-color-selected-hover); /* Used for the background of a selected dropdown option in the focus state. */
+  --gl-dropdown-option-background-color-unselected-focus: var(--gl-action-neutral-background-color-focus); /* Used for the background of an unselected dropdown option in the focus state. */
+  --gl-dropdown-option-indicator-color-selected-focus: var(--gl-control-background-color-selected-focus); /* Used for the dropdown selected option indicator in the focus state. */
+  --gl-dropdown-option-indicator-color-selected-hover: var(--gl-control-background-color-selected-hover); /* Used for the dropdown selected option indicator in the hover state. */
+  --gl-dropdown-option-indicator-color-selected-default: var(--gl-control-background-color-selected-default); /* Used for the dropdown selected option indicator in the default state. */
+  --gl-dropdown-option-text-color-disabled: var(--gl-action-disabled-foreground-color); /* Used for the text of a dropdown option in the disabled state. */
+  --gl-dropdown-option-text-color-default: var(--gl-action-neutral-foreground-color-default); /* Used for the text of a dropdown option in the default state. */
+  --gl-dropdown-background-color: var(--gl-background-color-overlap); /* Used for the background of a dropdown. */
   --gl-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /* Used for the datepicker date text color state indicators. */
   --gl-button-selected-border-color-focus: var(--gl-button-selected-border-color-hover); /* Used for the border of a selected button in the focus state. */
   --gl-button-selected-background-color-active: var(--gl-button-default-primary-background-color-active); /* Used for the background of a selected button in the active state. */
@@ -872,6 +888,9 @@
   --gl-action-selected-border-color-default: var(--gl-action-selected-background-color-default); /* Used for the border of a selected action in the default state. */
   --gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-hover); /* Used for the background of a selected action in the focus state. */
   --gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-default); /* Used for the foreground of a selected action in the hover state. */
+  --gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /* Used for the text of a dropdown option in the active state. */
+  --gl-dropdown-option-text-color-focus: var(--gl-action-neutral-foreground-color-focus); /* Used for the text of a dropdown option in the focus state. */
+  --gl-dropdown-option-text-color-hover: var(--gl-action-neutral-foreground-color-hover); /* Used for the text of a dropdown option in the hover state. */
   --gl-button-selected-background-color-focus: var(--gl-button-default-primary-background-color-focus); /* Used for the background of a selected button in the focus state. */
   --gl-button-selected-foreground-color-active: var(--gl-button-default-primary-foreground-color-active); /* Used for the foreground of a selected button in the active state. */
   --gl-button-selected-foreground-color-focus: var(--gl-button-default-primary-foreground-color-focus); /* Used for the foreground of a selected button in the focus state. */

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

@@ -527,6 +527,14 @@
   --gl-filtered-search-token-data-background-color-default: var(--gl-color-neutral-800); /* Used for the filtered search data background color in the default state. */
   --gl-filtered-search-token-type-background-color-hover: var(--gl-color-neutral-800); /* Used for the filtered search type token background color in the hover state. */
   --gl-filtered-search-token-type-background-color-default: var(--gl-color-neutral-900); /* Used for the filtered search type token background color in the default state. */
+  --gl-dropdown-option-background-color-selected-active: var(--gl-color-neutral-900); /* Used for the background of a selected dropdown option in the active state. */
+  --gl-dropdown-option-background-color-selected-hover: var(--gl-color-neutral-700); /* Used for the background of a selected dropdown option in the hover state. */
+  --gl-dropdown-option-background-color-selected-default: var(--gl-color-neutral-800); /* Used for the background of a selected dropdown option in the default state. */
+  --gl-dropdown-option-background-color-unselected-active: var(--gl-action-neutral-background-color-active); /* Used for the background of an unselected dropdown option in the active state. */
+  --gl-dropdown-option-background-color-unselected-hover: var(--gl-action-neutral-background-color-hover); /* Used for the background of an unselected dropdown option in the hover state. */
+  --gl-dropdown-option-background-color-unselected-default: var(--gl-action-neutral-background-color-default); /* Used for the background of an unselected dropdown option in the default state. */
+  --gl-dropdown-option-indicator-color-selected-active: var(--gl-color-neutral-100); /* Used for the dropdown selected option indicator in the active state. */
+  --gl-dropdown-border-color: var(--gl-color-neutral-700); /* Used for the border of a dropdown. */
   --gl-datepicker-background-color: var(--gl-color-neutral-900); /* Used for the background color of datepicker. */
   --gl-button-disabled-border-color: var(--gl-color-neutral-800); /* Used for the border of a disabled button. */
   --gl-button-disabled-background-color: var(--gl-color-neutral-950); /* Used for the background of a disabled button. */
@@ -773,6 +781,14 @@
   --gl-token-foreground-color: var(--gl-text-color-default); /* Used for the token foreground color. */
   --gl-table-sorting-icon-color: var(--gl-text-color-heading); /* Used for the color of the sorting icons in the column headers. */
   --gl-table-row-background-color-hover: var(--gl-background-color-subtle); /* Used for the background of a table row in hover state. */
+  --gl-dropdown-option-background-color-selected-focus: var(--gl-dropdown-option-background-color-selected-hover); /* Used for the background of a selected dropdown option in the focus state. */
+  --gl-dropdown-option-background-color-unselected-focus: var(--gl-action-neutral-background-color-focus); /* Used for the background of an unselected dropdown option in the focus state. */
+  --gl-dropdown-option-indicator-color-selected-focus: var(--gl-color-neutral-0); /* Used for the dropdown selected option indicator in the focus state. */
+  --gl-dropdown-option-indicator-color-selected-hover: var(--gl-color-neutral-0); /* Used for the dropdown selected option indicator in the hover state. */
+  --gl-dropdown-option-indicator-color-selected-default: var(--gl-color-neutral-0); /* Used for the dropdown selected option indicator in the default state. */
+  --gl-dropdown-option-text-color-disabled: var(--gl-action-disabled-foreground-color); /* Used for the text of a dropdown option in the disabled state. */
+  --gl-dropdown-option-text-color-default: var(--gl-action-neutral-foreground-color-default); /* Used for the text of a dropdown option in the default state. */
+  --gl-dropdown-background-color: var(--gl-background-color-overlap); /* Used for the background of a dropdown. */
   --gl-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /* Used for the datepicker date text color state indicators. */
   --gl-button-selected-border-color-focus: var(--gl-button-selected-border-color-hover); /* Used for the border of a selected button in the focus state. */
   --gl-button-selected-background-color-active: var(--gl-button-default-primary-background-color-active); /* Used for the background of a selected button in the active state. */
@@ -872,6 +888,9 @@
   --gl-action-selected-border-color-default: var(--gl-action-selected-background-color-default); /* Used for the border of a selected action in the default state. */
   --gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-hover); /* Used for the background of a selected action in the focus state. */
   --gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-default); /* Used for the foreground of a selected action in the hover state. */
+  --gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /* Used for the text of a dropdown option in the active state. */
+  --gl-dropdown-option-text-color-focus: var(--gl-action-neutral-foreground-color-focus); /* Used for the text of a dropdown option in the focus state. */
+  --gl-dropdown-option-text-color-hover: var(--gl-action-neutral-foreground-color-hover); /* Used for the text of a dropdown option in the hover state. */
   --gl-button-selected-background-color-focus: var(--gl-button-default-primary-background-color-focus); /* Used for the background of a selected button in the focus state. */
   --gl-button-selected-foreground-color-active: var(--gl-button-default-primary-foreground-color-active); /* Used for the foreground of a selected button in the active state. */
   --gl-button-selected-foreground-color-focus: var(--gl-button-default-primary-foreground-color-focus); /* Used for the foreground of a selected button in the focus state. */

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

@@ -627,6 +627,25 @@ export const GL_BUTTON_DISABLED_BACKGROUND_COLOR = '#18171d'; // Used for the ba
 export const GL_BUTTON_DISABLED_BORDER_COLOR = '#3a383f'; // Used for the border of a disabled button.
 export const GL_DATEPICKER_BACKGROUND_COLOR = '#28272d'; // Used for the background color of datepicker.
 export const GL_DATEPICKER_DATE_TEXT_COLOR_SELECTED = '#18171d'; // Used for the datepicker date text color state indicators.
+export const GL_DROPDOWN_BACKGROUND_COLOR = '#28272d'; // Used for the background of a dropdown.
+export const GL_DROPDOWN_BORDER_COLOR = '#4c4b51'; // Used for the border of a dropdown.
+export const GL_DROPDOWN_OPTION_TEXT_COLOR_DEFAULT = '#ececef'; // Used for the text of a dropdown option in the default state.
+export const GL_DROPDOWN_OPTION_TEXT_COLOR_HOVER = '#ececef'; // Used for the text of a dropdown option in the hover state.
+export const GL_DROPDOWN_OPTION_TEXT_COLOR_FOCUS = '#ececef'; // Used for the text of a dropdown option in the focus state.
+export const GL_DROPDOWN_OPTION_TEXT_COLOR_ACTIVE = '#ececef'; // Used for the text of a dropdown option in the active state.
+export const GL_DROPDOWN_OPTION_TEXT_COLOR_DISABLED = '#737278'; // Used for the text of a dropdown option in the disabled state.
+export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_DEFAULT = '#fff'; // Used for the dropdown selected option indicator in the default state.
+export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_HOVER = '#fff'; // Used for the dropdown selected option indicator in the hover state.
+export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_FOCUS = '#fff'; // Used for the dropdown selected option indicator in the focus state.
+export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_ACTIVE = '#dcdcde'; // Used for the dropdown selected option indicator in the active state.
+export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_DEFAULT = 'rgba(137, 136, 141, 0.0)'; // Used for the background of an unselected dropdown option in the default state.
+export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_HOVER = 'rgba(137, 136, 141, 0.4)'; // Used for the background of an unselected dropdown option in the hover state.
+export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_FOCUS = 'rgba(137, 136, 141, 0.4)'; // Used for the background of an unselected dropdown option in the focus state.
+export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_ACTIVE = 'rgba(137, 136, 141, 0.16)'; // Used for the background of an unselected dropdown option in the active state.
+export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_DEFAULT = '#3a383f'; // Used for the background of a selected dropdown option in the default state.
+export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_HOVER = '#4c4b51'; // Used for the background of a selected dropdown option in the hover state.
+export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_FOCUS = '#4c4b51'; // Used for the background of a selected dropdown option in the focus state.
+export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_ACTIVE = '#28272d'; // Used for the background of a selected dropdown option in the active state.
 export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the filtered search type token background color in the default state.
 export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER = '#3a383f'; // Used for the filtered search type token background color in the hover state.
 export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT = '#3a383f'; // Used for the filtered search data background color in the default state.

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

@@ -627,6 +627,25 @@ export const GL_BUTTON_DISABLED_BACKGROUND_COLOR = '#fbfafd'; // Used for the ba
 export const GL_BUTTON_DISABLED_BORDER_COLOR = '#dcdcde'; // Used for the border of a disabled button.
 export const GL_DATEPICKER_BACKGROUND_COLOR = '#fff'; // Used for the background color of datepicker.
 export const GL_DATEPICKER_DATE_TEXT_COLOR_SELECTED = '#fff'; // Used for the datepicker date text color state indicators.
+export const GL_DROPDOWN_BACKGROUND_COLOR = '#fff'; // Used for the background of a dropdown.
+export const GL_DROPDOWN_BORDER_COLOR = '#bfbfc3'; // Used for the border of a dropdown.
+export const GL_DROPDOWN_OPTION_TEXT_COLOR_DEFAULT = '#28272d'; // Used for the text of a dropdown option in the default state.
+export const GL_DROPDOWN_OPTION_TEXT_COLOR_HOVER = '#28272d'; // Used for the text of a dropdown option in the hover state.
+export const GL_DROPDOWN_OPTION_TEXT_COLOR_FOCUS = '#28272d'; // Used for the text of a dropdown option in the focus state.
+export const GL_DROPDOWN_OPTION_TEXT_COLOR_ACTIVE = '#28272d'; // Used for the text of a dropdown option in the active state.
+export const GL_DROPDOWN_OPTION_TEXT_COLOR_DISABLED = '#89888d'; // Used for the text of a dropdown option in the disabled state.
+export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_DEFAULT = '#1f75cb'; // Used for the dropdown selected option indicator in the default state.
+export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_HOVER = '#0b5cad'; // Used for the dropdown selected option indicator in the hover state.
+export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_FOCUS = '#0b5cad'; // Used for the dropdown selected option indicator in the focus state.
+export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_ACTIVE = '#0b5cad'; // Used for the dropdown selected option indicator in the active state.
+export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_DEFAULT = 'rgba(164, 163, 168, 0.0)'; // Used for the background of an unselected dropdown option in the default state.
+export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_HOVER = 'rgba(164, 163, 168, 0.16)'; // Used for the background of an unselected dropdown option in the hover state.
+export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_FOCUS = 'rgba(164, 163, 168, 0.16)'; // Used for the background of an unselected dropdown option in the focus state.
+export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_ACTIVE = 'rgba(83, 81, 88, 0.24)'; // Used for the background of an unselected dropdown option in the active state.
+export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_DEFAULT = '#ececef'; // Used for the background of a selected dropdown option in the default state.
+export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_HOVER = '#dcdcde'; // Used for the background of a selected dropdown option in the hover state.
+export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_FOCUS = '#dcdcde'; // Used for the background of a selected dropdown option in the focus state.
+export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_ACTIVE = '#bfbfc3'; // Used for the background of a selected dropdown option in the active state.
 export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_DEFAULT = '#ececef'; // Used for the filtered search type token background color in the default state.
 export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER = '#dcdcde'; // Used for the filtered search type token background color in the hover state.
 export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT = '#dcdcde'; // Used for the filtered search data background color in the default state.