@gitlab/ui/src/tokens/contextual/dropdown.tokens.json

GitLab UI Components

{
  "dropdown": {
    "background": {
      "color": {
        "$value": "{background.color.overlap}",
        "$type": "color",
        "$description": "Used for the background of a dropdown."
      }
    },
    "border": {
      "color": {
        "$value": {
          "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}"
        },
        "$type": "color",
        "$description": "Used for the divider of a dropdown."
      }
    },
    "option": {
      "text": {
        "color": {
          "default": {
            "$value": "{action.neutral.foreground.color.default}",
            "$type": "color",
            "$description": "Used for the text of a dropdown option in the default state."
          },
          "hover": {
            "$value": "{action.neutral.foreground.color.hover}",
            "$type": "color",
            "$description": "Used for the text of a dropdown option in the hover state."
          },
          "focus": {
            "$value": "{action.neutral.foreground.color.focus}",
            "$type": "color",
            "$description": "Used for the text of a dropdown option in the focus state."
          },
          "active": {
            "$value": "{action.neutral.foreground.color.active}",
            "$type": "color",
            "$description": "Used for the text of a dropdown option in the active state."
          },
          "disabled": {
            "$value": "{action.disabled.foreground.color}",
            "$type": "color",
            "$description": "Used for the text of a dropdown option in the disabled state."
          }
        }
      },
      "indicator": {
        "color": {
          "selected": {
            "default": {
              "$value": "{control.background.color.selected.default}",
              "$type": "color",
              "$description": "Used for the dropdown selected option indicator in the default state."
            },
            "hover": {
              "$value": "{control.background.color.selected.hover}",
              "$type": "color",
              "$description": "Used for the dropdown selected option indicator in the hover state."
            },
            "focus": {
              "$value": "{control.background.color.selected.focus}",
              "$type": "color",
              "$description": "Used for the dropdown selected option indicator in the focus state."
            },
            "active": {
              "$value": "{control.background.color.selected.focus}",
              "$type": "color",
              "$description": "Used for the dropdown selected option indicator in the active state."
            }
          }
        }
      },
      "background": {
        "color": {
          "unselected": {
            "default": {
              "$value": "{action.neutral.background.color.default}",
              "$type": "color",
              "$description": "Used for the background of an unselected dropdown option in the default state."
            },
            "hover": {
              "$value": "{action.neutral.background.color.hover}",
              "$type": "color",
              "$description": "Used for the background of an unselected dropdown option in the hover state."
            },
            "focus": {
              "$value": "{action.neutral.background.color.focus}",
              "$type": "color",
              "$description": "Used for the background of an unselected dropdown option in the focus state."
            },
            "active": {
              "$value": "{action.neutral.background.color.active}",
              "$type": "color",
              "$description": "Used for the background of an unselected dropdown option in the active state."
            }
          },
          "selected": {
            "default": {
              "$value": {
                "default": "{color.neutral.50}",
                "dark": "{color.neutral.800}"
              },
              "$type": "color",
              "$description": "Used for the background of a selected dropdown option in the default state."
            },
            "hover": {
              "$value": {
                "default": "{color.neutral.100}",
                "dark": "{color.neutral.700}"
              },
              "$type": "color",
              "$description": "Used for the background of a selected dropdown option in the hover state."
            },
            "focus": {
              "$value": "{dropdown.option.background.color.selected.hover}",
              "$type": "color",
              "$description": "Used for the background of a selected dropdown option in the focus state."
            },
            "active": {
              "$value": {
                "default": "{color.neutral.200}",
                "dark": "{color.neutral.900}"
              },
              "$type": "color",
              "$description": "Used for the background of a selected dropdown option in the active state."
            }
          }
        }
      }
    },
    "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."
        }
      }
    }
  }
}