@gitlab/ui 107.0.0 → 107.1.0

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -220,7 +220,7 @@ export default {
       >
         <template #header>
           <div
-            class="gl-search-box-by-click-history-header gl-flex gl-min-h-8 gl-grow gl-items-center gl-border-b-1 gl-border-b-dropdown !gl-p-4 gl-text-sm gl-font-bold gl-border-b-solid"
+            class="gl-search-box-by-click-history-header gl-flex gl-min-h-8 gl-grow gl-items-center gl-border-b-1 gl-border-b-dropdown-divider !gl-p-4 gl-text-sm gl-font-bold gl-border-b-solid"
           >
             {{ recentSearchesHeader }}
           </div>
@@ -245,7 +245,7 @@ export default {
 
         <template v-if="historyItems.length" #footer>
           <div
-            class="gl-flex gl-flex-col gl-border-t-1 gl-border-t-dropdown gl-p-2 gl-border-t-solid"
+            class="gl-flex gl-flex-col gl-border-t-1 gl-border-t-dropdown-divider gl-p-2 gl-border-t-solid"
           >
             <gl-button
               ref="clearHistory"

package/src/components/charts/tooltip/tooltip.scss

@@ -1,7 +1,7 @@
 .gl-chart-tooltip {
   position: absolute;
 
-  > .popover {
+  .popover {
     @apply gl-min-w-0;
     @apply gl-w-max;
     max-width: $chart-tooltip-max-width;

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

@@ -695,14 +695,13 @@
   --gl-button-disabled-background-color: var(--gl-color-neutral-10); /* Used for the background of a disabled button. */
   --gl-button-disabled-border-color: var(--gl-color-neutral-100); /* Used for the border of a disabled button. */
   --gl-datepicker-background-color: var(--gl-color-neutral-0); /* Used for the background color of datepicker. */
-  --gl-dropdown-border-color: var(--gl-color-neutral-200); /* Used for the border of a dropdown. */
-  --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-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-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-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-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-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-active: var(--gl-color-neutral-200); /* Used for the background of a selected dropdown option in the active state. */
+  --gl-dropdown-search-background-color: var(--gl-color-alpha-dark-2); /* Used for the background of a search input in a dropdown listbox. */
   --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-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-data-background-color-default: var(--gl-color-neutral-100); /* Used for the filtered search data background color in the default state. */
@@ -909,11 +908,14 @@
   --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-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /* Used for the datepicker date text color state indicators. */
   --gl-dropdown-background-color: var(--gl-background-color-overlap); /* Used for the background of a dropdown. */
+  --gl-dropdown-border-color: var(--gl-border-color-strong); /* Used for the border of a dropdown. */
+  --gl-dropdown-divider-color: var(--gl-border-color-default);
   --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-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-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-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-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-active: var(--gl-control-background-color-selected-focus); /* Used for the dropdown selected option indicator in the active 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-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-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /* Used for the indicator color for the primary progress-bar variant. */

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

@@ -695,14 +695,13 @@
   --gl-button-disabled-background-color: rgba(137, 136, 141, 0.16); /* Used for the background of a disabled button. */
   --gl-button-disabled-border-color: var(--gl-color-alpha-0); /* Used for the border of a disabled button. */
   --gl-datepicker-background-color: var(--gl-color-neutral-900); /* Used for the background color of datepicker. */
-  --gl-dropdown-border-color: var(--gl-color-neutral-700); /* Used for the border of a dropdown. */
-  --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-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-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-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-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-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-active: var(--gl-color-neutral-900); /* Used for the background of a selected dropdown option in the active state. */
+  --gl-dropdown-search-background-color: var(--gl-color-alpha-dark-24); /* Used for the background of a search input in a dropdown listbox. */
   --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-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-data-background-color-default: var(--gl-color-neutral-800); /* Used for the filtered search data background color in the default state. */
@@ -909,11 +908,14 @@
   --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-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /* Used for the datepicker date text color state indicators. */
   --gl-dropdown-background-color: var(--gl-background-color-overlap); /* Used for the background of a dropdown. */
+  --gl-dropdown-border-color: var(--gl-border-color-default); /* Used for the border of a dropdown. */
+  --gl-dropdown-divider-color: var(--gl-border-color-subtle);
   --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-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-indicator-color-selected-default: var(--gl-color-neutral-0); /* Used for the dropdown selected option indicator in the default 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-focus: var(--gl-color-neutral-0); /* Used for the dropdown selected option indicator in the focus 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-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-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-active: var(--gl-control-background-color-selected-focus); /* Used for the dropdown selected option indicator in the active 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-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-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /* Used for the indicator color for the primary progress-bar variant. */

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

@@ -628,15 +628,16 @@ export const GL_DATEPICKER_BACKGROUND_COLOR = '#28272d';
 export const GL_DATEPICKER_DATE_TEXT_COLOR_SELECTED = '#18171d';
 export const GL_DROPDOWN_BACKGROUND_COLOR = '#28272d';
 export const GL_DROPDOWN_BORDER_COLOR = '#4c4b51';
+export const GL_DROPDOWN_DIVIDER_COLOR = '#3a383f';
 export const GL_DROPDOWN_OPTION_TEXT_COLOR_DEFAULT = '#ececef';
 export const GL_DROPDOWN_OPTION_TEXT_COLOR_HOVER = '#ececef';
 export const GL_DROPDOWN_OPTION_TEXT_COLOR_FOCUS = '#ececef';
 export const GL_DROPDOWN_OPTION_TEXT_COLOR_ACTIVE = '#ececef';
 export const GL_DROPDOWN_OPTION_TEXT_COLOR_DISABLED = '#737278';
-export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_DEFAULT = '#fff';
-export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_HOVER = '#fff';
-export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_FOCUS = '#fff';
-export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_ACTIVE = '#dcdcde';
+export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_DEFAULT = '#63a6e9';
+export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_HOVER = '#9dc7f1';
+export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_FOCUS = '#9dc7f1';
+export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_ACTIVE = '#9dc7f1';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_DEFAULT = 'rgba(137, 136, 141, 0.0)';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_HOVER = 'rgba(137, 136, 141, 0.4)';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_FOCUS = 'rgba(137, 136, 141, 0.4)';
@@ -645,6 +646,7 @@ export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_DEFAULT = '#3a383f';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_HOVER = '#4c4b51';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_FOCUS = '#4c4b51';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_ACTIVE = '#28272d';
+export const GL_DROPDOWN_SEARCH_BACKGROUND_COLOR = 'rgba(05, 05, 06, 0.24)';
 export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_DEFAULT = '#28272d';
 export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER = '#3a383f';
 export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT = '#3a383f';

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

@@ -628,6 +628,7 @@ export const GL_DATEPICKER_BACKGROUND_COLOR = '#fff';
 export const GL_DATEPICKER_DATE_TEXT_COLOR_SELECTED = '#fff';
 export const GL_DROPDOWN_BACKGROUND_COLOR = '#fff';
 export const GL_DROPDOWN_BORDER_COLOR = '#bfbfc3';
+export const GL_DROPDOWN_DIVIDER_COLOR = '#dcdcde';
 export const GL_DROPDOWN_OPTION_TEXT_COLOR_DEFAULT = '#28272d';
 export const GL_DROPDOWN_OPTION_TEXT_COLOR_HOVER = '#28272d';
 export const GL_DROPDOWN_OPTION_TEXT_COLOR_FOCUS = '#28272d';
@@ -645,6 +646,7 @@ export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_DEFAULT = '#ececef';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_HOVER = '#dcdcde';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_FOCUS = '#dcdcde';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_ACTIVE = '#bfbfc3';
+export const GL_DROPDOWN_SEARCH_BACKGROUND_COLOR = 'rgba(05, 05, 06, 0.02)';
 export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_DEFAULT = '#ececef';
 export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER = '#dcdcde';
 export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT = '#dcdcde';

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

@@ -13797,8 +13797,8 @@
         "isSource": true,
         "original": {
           "$value": {
-            "default": "{color.neutral.200}",
-            "dark": "{color.neutral.700}"
+            "default": "{border.color.strong}",
+            "dark": "{border.color.default}"
           },
           "$type": "color",
           "$description": "Used for the border of a dropdown."
@@ -13812,6 +13812,26 @@
         ]
       }
     },
+    "divider": {
+      "color": {
+        "$value": "#3a383f",
+        "filePath": "src/tokens/contextual/dropdown.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": {
+            "default": "{border.color.default}",
+            "dark": "{border.color.subtle}"
+          }
+        },
+        "name": "DROPDOWN_DIVIDER_COLOR",
+        "attributes": {},
+        "path": [
+          "dropdown",
+          "divider",
+          "color"
+        ]
+      }
+    },
     "option": {
       "text": {
         "color": {
@@ -13926,16 +13946,13 @@
         "color": {
           "selected": {
             "default": {
-              "$value": "#fff",
+              "$value": "#63a6e9",
               "$type": "color",
               "$description": "Used for the dropdown selected option indicator in the default state.",
               "filePath": "src/tokens/contextual/dropdown.tokens.json",
               "isSource": true,
               "original": {
-                "$value": {
-                  "default": "{control.background.color.selected.default}",
-                  "dark": "{color.neutral.0}"
-                },
+                "$value": "{control.background.color.selected.default}",
                 "$type": "color",
                 "$description": "Used for the dropdown selected option indicator in the default state."
               },
@@ -13951,16 +13968,13 @@
               ]
             },
             "hover": {
-              "$value": "#fff",
+              "$value": "#9dc7f1",
               "$type": "color",
               "$description": "Used for the dropdown selected option indicator in the hover state.",
               "filePath": "src/tokens/contextual/dropdown.tokens.json",
               "isSource": true,
               "original": {
-                "$value": {
-                  "default": "{control.background.color.selected.hover}",
-                  "dark": "{color.neutral.0}"
-                },
+                "$value": "{control.background.color.selected.hover}",
                 "$type": "color",
                 "$description": "Used for the dropdown selected option indicator in the hover state."
               },
@@ -13976,16 +13990,13 @@
               ]
             },
             "focus": {
-              "$value": "#fff",
+              "$value": "#9dc7f1",
               "$type": "color",
               "$description": "Used for the dropdown selected option indicator in the focus state.",
               "filePath": "src/tokens/contextual/dropdown.tokens.json",
               "isSource": true,
               "original": {
-                "$value": {
-                  "default": "{control.background.color.selected.focus}",
-                  "dark": "{color.neutral.0}"
-                },
+                "$value": "{control.background.color.selected.focus}",
                 "$type": "color",
                 "$description": "Used for the dropdown selected option indicator in the focus state."
               },
@@ -14001,16 +14012,13 @@
               ]
             },
             "active": {
-              "$value": "#dcdcde",
+              "$value": "#9dc7f1",
               "$type": "color",
               "$description": "Used for the dropdown selected option indicator in the active state.",
               "filePath": "src/tokens/contextual/dropdown.tokens.json",
               "isSource": true,
               "original": {
-                "$value": {
-                  "default": "{color.blue.700}",
-                  "dark": "{color.neutral.100}"
-                },
+                "$value": "{control.background.color.selected.focus}",
                 "$type": "color",
                 "$description": "Used for the dropdown selected option indicator in the active state."
               },
@@ -14221,6 +14229,33 @@
           }
         }
       }
+    },
+    "search": {
+      "background": {
+        "color": {
+          "$value": "rgba(05, 05, 06, 0.24)",
+          "$type": "color",
+          "$description": "Used for the background of a search input in a dropdown listbox.",
+          "filePath": "src/tokens/contextual/dropdown.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.alpha.dark.2}",
+              "dark": "{color.alpha.dark.24}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of a search input in a dropdown listbox."
+          },
+          "name": "DROPDOWN_SEARCH_BACKGROUND_COLOR",
+          "attributes": {},
+          "path": [
+            "dropdown",
+            "search",
+            "background",
+            "color"
+          ]
+        }
+      }
     }
   },
   "filtered-search": {

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

@@ -13797,8 +13797,8 @@
         "isSource": true,
         "original": {
           "$value": {
-            "default": "{color.neutral.200}",
-            "dark": "{color.neutral.700}"
+            "default": "{border.color.strong}",
+            "dark": "{border.color.default}"
           },
           "$type": "color",
           "$description": "Used for the border of a dropdown."
@@ -13812,6 +13812,26 @@
         ]
       }
     },
+    "divider": {
+      "color": {
+        "$value": "#dcdcde",
+        "filePath": "src/tokens/contextual/dropdown.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": {
+            "default": "{border.color.default}",
+            "dark": "{border.color.subtle}"
+          }
+        },
+        "name": "DROPDOWN_DIVIDER_COLOR",
+        "attributes": {},
+        "path": [
+          "dropdown",
+          "divider",
+          "color"
+        ]
+      }
+    },
     "option": {
       "text": {
         "color": {
@@ -13932,10 +13952,7 @@
               "filePath": "src/tokens/contextual/dropdown.tokens.json",
               "isSource": true,
               "original": {
-                "$value": {
-                  "default": "{control.background.color.selected.default}",
-                  "dark": "{color.neutral.0}"
-                },
+                "$value": "{control.background.color.selected.default}",
                 "$type": "color",
                 "$description": "Used for the dropdown selected option indicator in the default state."
               },
@@ -13957,10 +13974,7 @@
               "filePath": "src/tokens/contextual/dropdown.tokens.json",
               "isSource": true,
               "original": {
-                "$value": {
-                  "default": "{control.background.color.selected.hover}",
-                  "dark": "{color.neutral.0}"
-                },
+                "$value": "{control.background.color.selected.hover}",
                 "$type": "color",
                 "$description": "Used for the dropdown selected option indicator in the hover state."
               },
@@ -13982,10 +13996,7 @@
               "filePath": "src/tokens/contextual/dropdown.tokens.json",
               "isSource": true,
               "original": {
-                "$value": {
-                  "default": "{control.background.color.selected.focus}",
-                  "dark": "{color.neutral.0}"
-                },
+                "$value": "{control.background.color.selected.focus}",
                 "$type": "color",
                 "$description": "Used for the dropdown selected option indicator in the focus state."
               },
@@ -14007,10 +14018,7 @@
               "filePath": "src/tokens/contextual/dropdown.tokens.json",
               "isSource": true,
               "original": {
-                "$value": {
-                  "default": "{color.blue.700}",
-                  "dark": "{color.neutral.100}"
-                },
+                "$value": "{control.background.color.selected.focus}",
                 "$type": "color",
                 "$description": "Used for the dropdown selected option indicator in the active state."
               },
@@ -14221,6 +14229,33 @@
           }
         }
       }
+    },
+    "search": {
+      "background": {
+        "color": {
+          "$value": "rgba(05, 05, 06, 0.02)",
+          "$type": "color",
+          "$description": "Used for the background of a search input in a dropdown listbox.",
+          "filePath": "src/tokens/contextual/dropdown.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.alpha.dark.2}",
+              "dark": "{color.alpha.dark.24}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of a search input in a dropdown listbox."
+          },
+          "name": "DROPDOWN_SEARCH_BACKGROUND_COLOR",
+          "attributes": {},
+          "path": [
+            "dropdown",
+            "search",
+            "background",
+            "color"
+          ]
+        }
+      }
     }
   },
   "filtered-search": {

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

@@ -693,14 +693,13 @@ $gl-button-disabled-foreground-color: $gl-color-neutral-400; // Used for the for
 $gl-button-disabled-background-color: rgba(137, 136, 141, 0.16); // Used for the background of a disabled button.
 $gl-button-disabled-border-color: $gl-color-alpha-0; // Used for the border of a disabled button.
 $gl-datepicker-background-color: $gl-color-neutral-900; // Used for the background color of datepicker.
-$gl-dropdown-border-color: $gl-color-neutral-700; // Used for the border of a dropdown.
-$gl-dropdown-option-indicator-color-selected-active: $gl-color-neutral-100; // Used for the dropdown selected option indicator in the active state.
 $gl-dropdown-option-background-color-unselected-default: $gl-action-neutral-background-color-default; // Used for the background of an unselected dropdown option in the default state.
 $gl-dropdown-option-background-color-unselected-hover: $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-active: $gl-action-neutral-background-color-active; // Used for the background of an unselected dropdown option in the active state.
 $gl-dropdown-option-background-color-selected-default: $gl-color-neutral-800; // Used for the background of a selected dropdown option in the default state.
 $gl-dropdown-option-background-color-selected-hover: $gl-color-neutral-700; // Used for the background of a selected dropdown option in the hover state.
 $gl-dropdown-option-background-color-selected-active: $gl-color-neutral-900; // Used for the background of a selected dropdown option in the active state.
+$gl-dropdown-search-background-color: $gl-color-alpha-dark-24; // Used for the background of a search input in a dropdown listbox.
 $gl-filtered-search-token-type-background-color-default: $gl-color-neutral-900; // Used for the filtered search type token background color in the default state.
 $gl-filtered-search-token-type-background-color-hover: $gl-color-neutral-800; // Used for the filtered search type token background color in the hover state.
 $gl-filtered-search-token-data-background-color-default: $gl-color-neutral-800; // Used for the filtered search data background color in the default state.
@@ -907,11 +906,14 @@ $gl-button-selected-background-color-active: $gl-button-default-primary-backgrou
 $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover; // Used for the border of a selected button in the focus state.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
 $gl-dropdown-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
+$gl-dropdown-border-color: $gl-border-color-default; // Used for the border of a dropdown.
+$gl-dropdown-divider-color: $gl-border-color-subtle;
 $gl-dropdown-option-text-color-default: $gl-action-neutral-foreground-color-default; // Used for the text of a dropdown option in the default state.
 $gl-dropdown-option-text-color-disabled: $gl-action-disabled-foreground-color; // Used for the text of a dropdown option in the disabled state.
-$gl-dropdown-option-indicator-color-selected-default: $gl-color-neutral-0; // Used for the dropdown selected option indicator in the default state.
-$gl-dropdown-option-indicator-color-selected-hover: $gl-color-neutral-0; // Used for the dropdown selected option indicator in the hover state.
-$gl-dropdown-option-indicator-color-selected-focus: $gl-color-neutral-0; // Used for the dropdown selected option indicator in the focus state.
+$gl-dropdown-option-indicator-color-selected-default: $gl-control-background-color-selected-default; // Used for the dropdown selected option indicator in the default state.
+$gl-dropdown-option-indicator-color-selected-hover: $gl-control-background-color-selected-hover; // Used for the dropdown selected option indicator in the hover state.
+$gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the focus state.
+$gl-dropdown-option-indicator-color-selected-active: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the active state.
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
 $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.

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

@@ -693,14 +693,13 @@ $gl-button-disabled-foreground-color: $gl-color-neutral-500; // Used for the for
 $gl-button-disabled-background-color: $gl-color-neutral-10; // Used for the background of a disabled button.
 $gl-button-disabled-border-color: $gl-color-neutral-100; // Used for the border of a disabled button.
 $gl-datepicker-background-color: $gl-color-neutral-0; // Used for the background color of datepicker.
-$gl-dropdown-border-color: $gl-color-neutral-200; // Used for the border of a dropdown.
-$gl-dropdown-option-indicator-color-selected-active: $gl-color-blue-700; // Used for the dropdown selected option indicator in the active state.
 $gl-dropdown-option-background-color-unselected-default: $gl-action-neutral-background-color-default; // Used for the background of an unselected dropdown option in the default state.
 $gl-dropdown-option-background-color-unselected-hover: $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-active: $gl-action-neutral-background-color-active; // Used for the background of an unselected dropdown option in the active state.
 $gl-dropdown-option-background-color-selected-default: $gl-color-neutral-50; // Used for the background of a selected dropdown option in the default state.
 $gl-dropdown-option-background-color-selected-hover: $gl-color-neutral-100; // Used for the background of a selected dropdown option in the hover state.
 $gl-dropdown-option-background-color-selected-active: $gl-color-neutral-200; // Used for the background of a selected dropdown option in the active state.
+$gl-dropdown-search-background-color: $gl-color-alpha-dark-2; // Used for the background of a search input in a dropdown listbox.
 $gl-filtered-search-token-type-background-color-default: $gl-color-neutral-50; // Used for the filtered search type token background color in the default state.
 $gl-filtered-search-token-type-background-color-hover: $gl-color-neutral-100; // Used for the filtered search type token background color in the hover state.
 $gl-filtered-search-token-data-background-color-default: $gl-color-neutral-100; // Used for the filtered search data background color in the default state.
@@ -907,11 +906,14 @@ $gl-button-selected-background-color-active: $gl-button-default-primary-backgrou
 $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover; // Used for the border of a selected button in the focus state.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
 $gl-dropdown-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
+$gl-dropdown-border-color: $gl-border-color-strong; // Used for the border of a dropdown.
+$gl-dropdown-divider-color: $gl-border-color-default;
 $gl-dropdown-option-text-color-default: $gl-action-neutral-foreground-color-default; // Used for the text of a dropdown option in the default state.
 $gl-dropdown-option-text-color-disabled: $gl-action-disabled-foreground-color; // Used for the text of a dropdown option in the disabled state.
 $gl-dropdown-option-indicator-color-selected-default: $gl-control-background-color-selected-default; // Used for the dropdown selected option indicator in the default state.
 $gl-dropdown-option-indicator-color-selected-hover: $gl-control-background-color-selected-hover; // Used for the dropdown selected option indicator in the hover state.
 $gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the focus state.
+$gl-dropdown-option-indicator-color-selected-active: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the active state.
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
 $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -628,6 +628,7 @@ $gl-datepicker-background-color: var(--gl-datepicker-background-color);
 $gl-datepicker-date-text-color-selected: var(--gl-datepicker-date-text-color-selected);
 $gl-dropdown-background-color: var(--gl-dropdown-background-color);
 $gl-dropdown-border-color: var(--gl-dropdown-border-color);
+$gl-dropdown-divider-color: var(--gl-dropdown-divider-color);
 $gl-dropdown-option-text-color-default: var(--gl-dropdown-option-text-color-default);
 $gl-dropdown-option-text-color-hover: var(--gl-dropdown-option-text-color-hover);
 $gl-dropdown-option-text-color-focus: var(--gl-dropdown-option-text-color-focus);
@@ -645,6 +646,7 @@ $gl-dropdown-option-background-color-selected-default: var(--gl-dropdown-option-
 $gl-dropdown-option-background-color-selected-hover: var(--gl-dropdown-option-background-color-selected-hover);
 $gl-dropdown-option-background-color-selected-focus: var(--gl-dropdown-option-background-color-selected-focus);
 $gl-dropdown-option-background-color-selected-active: var(--gl-dropdown-option-background-color-selected-active);
+$gl-dropdown-search-background-color: var(--gl-dropdown-search-background-color);
 $gl-filtered-search-token-type-background-color-default: var(--gl-filtered-search-token-type-background-color-default);
 $gl-filtered-search-token-type-background-color-hover: var(--gl-filtered-search-token-type-background-color-hover);
 $gl-filtered-search-token-data-background-color-default: var(--gl-filtered-search-token-data-background-color-default);

package/src/tokens/build/tailwind/tokens.cjs

@@ -381,7 +381,8 @@ const backgroundColor = {
 const borderColor = {
   ...colors,
   ...borderColors,
-  dropdown: 'var(--gl-dropdown-border-color, var(--gl-color-neutral-200, #bfbfc3))',
+  dropdown: 'var(--gl-dropdown-border-color, var(--gl-border-color-strong, #bfbfc3))',
+  'dropdown-divider': 'var(--gl-dropdown-divider-color, var(--gl-border-color-default, #dcdcde))',
 };
 
 const outlineColor = {

package/src/tokens/contextual/dropdown.tokens.json

@@ -10,13 +10,21 @@
     "border": {
       "color": {
         "$value": {
-          "default": "{color.neutral.200}",
-          "dark": "{color.neutral.700}"
+          "default": "{border.color.strong}",
+          "dark": "{border.color.default}"
         },
         "$type": "color",
         "$description": "Used for the border of a dropdown."
       }
     },
+    "divider": {
+      "color": {
+        "$value": {
+          "default": "{border.color.default}",
+          "dark": "{border.color.subtle}"
+        },
+      }
+    },
     "option": {
       "text": {
         "color": {
@@ -51,34 +59,22 @@
         "color": {
           "selected": {
             "default": {
-              "$value": {
-                "default": "{control.background.color.selected.default}",
-                "dark": "{color.neutral.0}"
-              },
+              "$value": "{control.background.color.selected.default}",
               "$type": "color",
               "$description": "Used for the dropdown selected option indicator in the default state."
             },
             "hover": {
-              "$value": {
-                "default": "{control.background.color.selected.hover}",
-                "dark": "{color.neutral.0}"
-              },
+              "$value": "{control.background.color.selected.hover}",
               "$type": "color",
               "$description": "Used for the dropdown selected option indicator in the hover state."
             },
             "focus": {
-              "$value": {
-                "default": "{control.background.color.selected.focus}",
-                "dark": "{color.neutral.0}"
-              },
+              "$value": "{control.background.color.selected.focus}",
               "$type": "color",
               "$description": "Used for the dropdown selected option indicator in the focus state."
             },
             "active": {
-              "$value": {
-                "default": "{color.blue.700}",
-                "dark": "{color.neutral.100}"
-              },
+              "$value": "{control.background.color.selected.focus}",
               "$type": "color",
               "$description": "Used for the dropdown selected option indicator in the active state."
             }
@@ -142,6 +138,18 @@
           }
         }
       }
+    },
+    "search": {
+      "background": {
+        "color": {
+          "$value": {
+            "default": "{color.alpha.dark.2}",
+            "dark": "{color.alpha.dark.24}"
+          },
+          "$type": "color",
+          "$description": "Used for the background of a search input in a dropdown listbox."
+        }
+      }
     }
   }
 }

package/src/utils/constants.js

@@ -127,6 +127,11 @@ export const dropdownVariantOptions = {
   link: 'link',
 };
 
+export const dropdownItemVariantOptions = {
+  default: 'default',
+  danger: 'danger',
+};
+
 export const dropdownPlacements = {
   'right-start': 'right-start',
   'bottom-start': 'bottom-start',