@gitlab/ui 94.6.0 → 94.7.0

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

@@ -13742,6 +13742,463 @@
       }
     }
   },
+  "dropdown": {
+    "background": {
+      "color": {
+        "value": "#fff",
+        "$type": "color",
+        "comment": "Used for the background of a dropdown.",
+        "filePath": "src/tokens/contextual/dropdown.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{background.color.overlap}",
+          "$type": "color",
+          "comment": "Used for the background of a dropdown."
+        },
+        "name": "DROPDOWN_BACKGROUND_COLOR",
+        "attributes": {},
+        "path": [
+          "dropdown",
+          "background",
+          "color"
+        ]
+      }
+    },
+    "border": {
+      "color": {
+        "value": "#bfbfc3",
+        "$type": "color",
+        "comment": "Used for the border of a dropdown.",
+        "filePath": "src/tokens/contextual/dropdown.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.200}",
+            "dark": "{color.neutral.700}"
+          },
+          "$type": "color",
+          "comment": "Used for the border of a dropdown."
+        },
+        "name": "DROPDOWN_BORDER_COLOR",
+        "attributes": {},
+        "path": [
+          "dropdown",
+          "border",
+          "color"
+        ]
+      }
+    },
+    "option": {
+      "text": {
+        "color": {
+          "default": {
+            "value": "#28272d",
+            "$type": "color",
+            "comment": "Used for the text of a dropdown option in the default state.",
+            "filePath": "src/tokens/contextual/dropdown.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{action.neutral.foreground.color.default}",
+              "$type": "color",
+              "comment": "Used for the text of a dropdown option in the default state."
+            },
+            "name": "DROPDOWN_OPTION_TEXT_COLOR_DEFAULT",
+            "attributes": {},
+            "path": [
+              "dropdown",
+              "option",
+              "text",
+              "color",
+              "default"
+            ]
+          },
+          "hover": {
+            "value": "#28272d",
+            "$type": "color",
+            "comment": "Used for the text of a dropdown option in the hover state.",
+            "filePath": "src/tokens/contextual/dropdown.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{action.neutral.foreground.color.hover}",
+              "$type": "color",
+              "comment": "Used for the text of a dropdown option in the hover state."
+            },
+            "name": "DROPDOWN_OPTION_TEXT_COLOR_HOVER",
+            "attributes": {},
+            "path": [
+              "dropdown",
+              "option",
+              "text",
+              "color",
+              "hover"
+            ]
+          },
+          "focus": {
+            "value": "#28272d",
+            "$type": "color",
+            "comment": "Used for the text of a dropdown option in the focus state.",
+            "filePath": "src/tokens/contextual/dropdown.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{action.neutral.foreground.color.focus}",
+              "$type": "color",
+              "comment": "Used for the text of a dropdown option in the focus state."
+            },
+            "name": "DROPDOWN_OPTION_TEXT_COLOR_FOCUS",
+            "attributes": {},
+            "path": [
+              "dropdown",
+              "option",
+              "text",
+              "color",
+              "focus"
+            ]
+          },
+          "active": {
+            "value": "#28272d",
+            "$type": "color",
+            "comment": "Used for the text of a dropdown option in the active state.",
+            "filePath": "src/tokens/contextual/dropdown.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{action.neutral.foreground.color.active}",
+              "$type": "color",
+              "comment": "Used for the text of a dropdown option in the active state."
+            },
+            "name": "DROPDOWN_OPTION_TEXT_COLOR_ACTIVE",
+            "attributes": {},
+            "path": [
+              "dropdown",
+              "option",
+              "text",
+              "color",
+              "active"
+            ]
+          },
+          "disabled": {
+            "value": "#89888d",
+            "$type": "color",
+            "comment": "Used for the text of a dropdown option in the disabled state.",
+            "filePath": "src/tokens/contextual/dropdown.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{action.disabled.foreground.color}",
+              "$type": "color",
+              "comment": "Used for the text of a dropdown option in the disabled state."
+            },
+            "name": "DROPDOWN_OPTION_TEXT_COLOR_DISABLED",
+            "attributes": {},
+            "path": [
+              "dropdown",
+              "option",
+              "text",
+              "color",
+              "disabled"
+            ]
+          }
+        }
+      },
+      "indicator": {
+        "color": {
+          "selected": {
+            "default": {
+              "value": "#1f75cb",
+              "$type": "color",
+              "comment": "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}"
+                },
+                "$type": "color",
+                "comment": "Used for the dropdown selected option indicator in the default state."
+              },
+              "name": "DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_DEFAULT",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "indicator",
+                "color",
+                "selected",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#0b5cad",
+              "$type": "color",
+              "comment": "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}"
+                },
+                "$type": "color",
+                "comment": "Used for the dropdown selected option indicator in the hover state."
+              },
+              "name": "DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_HOVER",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "indicator",
+                "color",
+                "selected",
+                "hover"
+              ]
+            },
+            "focus": {
+              "value": "#0b5cad",
+              "$type": "color",
+              "comment": "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}"
+                },
+                "$type": "color",
+                "comment": "Used for the dropdown selected option indicator in the focus state."
+              },
+              "name": "DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_FOCUS",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "indicator",
+                "color",
+                "selected",
+                "focus"
+              ]
+            },
+            "active": {
+              "value": "#0b5cad",
+              "$type": "color",
+              "comment": "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}"
+                },
+                "$type": "color",
+                "comment": "Used for the dropdown selected option indicator in the active state."
+              },
+              "name": "DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_ACTIVE",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "indicator",
+                "color",
+                "selected",
+                "active"
+              ]
+            }
+          }
+        }
+      },
+      "background": {
+        "color": {
+          "unselected": {
+            "default": {
+              "value": "rgba(164, 163, 168, 0.0)",
+              "$type": "color",
+              "comment": "Used for the background of an unselected dropdown option in the default state.",
+              "filePath": "src/tokens/contextual/dropdown.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.neutral.background.color.default}",
+                "$type": "color",
+                "comment": "Used for the background of an unselected dropdown option in the default state."
+              },
+              "name": "DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_DEFAULT",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "background",
+                "color",
+                "unselected",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "rgba(164, 163, 168, 0.16)",
+              "$type": "color",
+              "comment": "Used for the background of an unselected dropdown option in the hover state.",
+              "filePath": "src/tokens/contextual/dropdown.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.neutral.background.color.hover}",
+                "$type": "color",
+                "comment": "Used for the background of an unselected dropdown option in the hover state."
+              },
+              "name": "DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_HOVER",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "background",
+                "color",
+                "unselected",
+                "hover"
+              ]
+            },
+            "focus": {
+              "value": "rgba(164, 163, 168, 0.16)",
+              "$type": "color",
+              "comment": "Used for the background of an unselected dropdown option in the focus state.",
+              "filePath": "src/tokens/contextual/dropdown.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.neutral.background.color.focus}",
+                "$type": "color",
+                "comment": "Used for the background of an unselected dropdown option in the focus state."
+              },
+              "name": "DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_FOCUS",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "background",
+                "color",
+                "unselected",
+                "focus"
+              ]
+            },
+            "active": {
+              "value": "rgba(83, 81, 88, 0.24)",
+              "$type": "color",
+              "comment": "Used for the background of an unselected dropdown option in the active state.",
+              "filePath": "src/tokens/contextual/dropdown.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.neutral.background.color.active}",
+                "$type": "color",
+                "comment": "Used for the background of an unselected dropdown option in the active state."
+              },
+              "name": "DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_ACTIVE",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "background",
+                "color",
+                "unselected",
+                "active"
+              ]
+            }
+          },
+          "selected": {
+            "default": {
+              "value": "#ececef",
+              "$type": "color",
+              "comment": "Used for the background of a selected dropdown option in the default state.",
+              "filePath": "src/tokens/contextual/dropdown.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.50}",
+                  "dark": "{color.neutral.800}"
+                },
+                "$type": "color",
+                "comment": "Used for the background of a selected dropdown option in the default state."
+              },
+              "name": "DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_DEFAULT",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "background",
+                "color",
+                "selected",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#dcdcde",
+              "$type": "color",
+              "comment": "Used for the background of a selected dropdown option in the hover state.",
+              "filePath": "src/tokens/contextual/dropdown.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.100}",
+                  "dark": "{color.neutral.700}"
+                },
+                "$type": "color",
+                "comment": "Used for the background of a selected dropdown option in the hover state."
+              },
+              "name": "DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_HOVER",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "background",
+                "color",
+                "selected",
+                "hover"
+              ]
+            },
+            "focus": {
+              "value": "#dcdcde",
+              "$type": "color",
+              "comment": "Used for the background of a selected dropdown option in the focus state.",
+              "filePath": "src/tokens/contextual/dropdown.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{dropdown.option.background.color.selected.hover}",
+                "$type": "color",
+                "comment": "Used for the background of a selected dropdown option in the focus state."
+              },
+              "name": "DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_FOCUS",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "background",
+                "color",
+                "selected",
+                "focus"
+              ]
+            },
+            "active": {
+              "value": "#bfbfc3",
+              "$type": "color",
+              "comment": "Used for the background of a selected dropdown option in the active state.",
+              "filePath": "src/tokens/contextual/dropdown.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.200}",
+                  "dark": "{color.neutral.900}"
+                },
+                "$type": "color",
+                "comment": "Used for the background of a selected dropdown option in the active state."
+              },
+              "name": "DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_ACTIVE",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "background",
+                "color",
+                "selected",
+                "active"
+              ]
+            }
+          }
+        }
+      }
+    }
+  },
   "filtered-search": {
     "token": {
       "type": {

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

@@ -525,6 +525,14 @@ $gl-filtered-search-token-data-background-color-hover: $gl-color-neutral-700; //
 $gl-filtered-search-token-data-background-color-default: $gl-color-neutral-800; // Used for the filtered search data 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-type-background-color-default: $gl-color-neutral-900; // Used for the filtered search type token background color in the default 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-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-default: $gl-color-neutral-800; // Used for the background of a selected dropdown option in the default 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-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-default: $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: $gl-color-neutral-100; // Used for the dropdown selected option indicator in the active state.
+$gl-dropdown-border-color: $gl-color-neutral-700; // Used for the border of a dropdown.
 $gl-datepicker-background-color: $gl-color-neutral-900; // Used for the background color of datepicker.
 $gl-button-disabled-border-color: $gl-color-neutral-800; // Used for the border of a disabled button.
 $gl-button-disabled-background-color: $gl-color-neutral-950; // Used for the background of a disabled button.
@@ -771,6 +779,14 @@ $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover 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-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-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-hover: $gl-color-neutral-0; // Used for the dropdown selected option indicator in the hover 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-text-color-disabled: $gl-action-disabled-foreground-color; // Used for the text of a dropdown option in the disabled state.
+$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-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
 $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-button-selected-background-color-active: $gl-button-default-primary-background-color-active; // Used for the background of a selected button in the active state.
@@ -870,6 +886,9 @@ $gl-action-selected-border-color-hover: $gl-action-selected-background-color-hov
 $gl-action-selected-border-color-default: $gl-action-selected-background-color-default; // Used for the border of a selected action in the default state.
 $gl-action-selected-background-color-focus: $gl-action-selected-background-color-hover; // Used for the background of a selected action in the focus state.
 $gl-action-selected-foreground-color-hover: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected action in the hover state.
+$gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
+$gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
+$gl-dropdown-option-text-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.
 $gl-button-selected-background-color-focus: $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: $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: $gl-button-default-primary-foreground-color-focus; // Used for the foreground of a selected button in the focus state.

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

@@ -525,6 +525,14 @@ $gl-filtered-search-token-data-background-color-hover: $gl-color-neutral-200; //
 $gl-filtered-search-token-data-background-color-default: $gl-color-neutral-100; // Used for the filtered search data 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-type-background-color-default: $gl-color-neutral-50; // Used for the filtered search type token background color in the default 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-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-default: $gl-color-neutral-50; // Used for the background of a selected dropdown option in the default 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-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-default: $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: $gl-color-blue-700; // Used for the dropdown selected option indicator in the active state.
+$gl-dropdown-border-color: $gl-color-neutral-200; // Used for the border of a dropdown.
 $gl-datepicker-background-color: $gl-color-neutral-0; // Used for the background color of datepicker.
 $gl-button-disabled-border-color: $gl-color-neutral-100; // Used for the border of a disabled button.
 $gl-button-disabled-background-color: $gl-color-neutral-10; // Used for the background of a disabled button.
@@ -771,6 +779,14 @@ $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover 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-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-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-hover: $gl-control-background-color-selected-hover; // Used for the dropdown selected option indicator in the hover 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-text-color-disabled: $gl-action-disabled-foreground-color; // Used for the text of a dropdown option in the disabled state.
+$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-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
 $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-button-selected-background-color-active: $gl-button-default-primary-background-color-active; // Used for the background of a selected button in the active state.
@@ -870,6 +886,9 @@ $gl-action-selected-border-color-hover: $gl-action-selected-background-color-hov
 $gl-action-selected-border-color-default: $gl-action-selected-background-color-default; // Used for the border of a selected action in the default state.
 $gl-action-selected-background-color-focus: $gl-action-selected-background-color-hover; // Used for the background of a selected action in the focus state.
 $gl-action-selected-foreground-color-hover: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected action in the hover state.
+$gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
+$gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
+$gl-dropdown-option-text-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.
 $gl-button-selected-background-color-focus: $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: $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: $gl-button-default-primary-foreground-color-focus; // Used for the foreground of a selected button in the focus state.

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

@@ -627,6 +627,25 @@ $gl-button-disabled-background-color: var(--gl-button-disabled-background-color)
 $gl-button-disabled-border-color: var(--gl-button-disabled-border-color);
 $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-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);
+$gl-dropdown-option-text-color-active: var(--gl-dropdown-option-text-color-active);
+$gl-dropdown-option-text-color-disabled: var(--gl-dropdown-option-text-color-disabled);
+$gl-dropdown-option-indicator-color-selected-default: var(--gl-dropdown-option-indicator-color-selected-default);
+$gl-dropdown-option-indicator-color-selected-hover: var(--gl-dropdown-option-indicator-color-selected-hover);
+$gl-dropdown-option-indicator-color-selected-focus: var(--gl-dropdown-option-indicator-color-selected-focus);
+$gl-dropdown-option-indicator-color-selected-active: var(--gl-dropdown-option-indicator-color-selected-active);
+$gl-dropdown-option-background-color-unselected-default: var(--gl-dropdown-option-background-color-unselected-default);
+$gl-dropdown-option-background-color-unselected-hover: var(--gl-dropdown-option-background-color-unselected-hover);
+$gl-dropdown-option-background-color-unselected-focus: var(--gl-dropdown-option-background-color-unselected-focus);
+$gl-dropdown-option-background-color-unselected-active: var(--gl-dropdown-option-background-color-unselected-active);
+$gl-dropdown-option-background-color-selected-default: var(--gl-dropdown-option-background-color-selected-default);
+$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-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

@@ -303,11 +303,13 @@ const colors = {
 const backgroundColor = {
   ...colors,
   ...backgroundColors,
+  dropdown: 'var(--gl-dropdown-background-color, var(--gl-background-color-overlap, #fff))',
 };
 
 const borderColor = {
   ...colors,
   ...borderColors,
+  dropdown: 'var(--gl-dropdown-border-color, var(--gl-color-neutral-200, #bfbfc3))',
 };
 
 const fill = {