search

paqtcom / graphite-design-system

Library of components for the Graphite Design System
https://graphitedesignsystem.com
MIT License
24 stars 6 forks source link

Cannot customize dropdown panel color for `gr-select` #133

Open dermotduffy opened 1 year ago

dermotduffy commented 1 year ago

Hello,

Is it possible to set the color of the dropdown menu for gr-select?

I think not, as:

gr-select ->
  gr-dropdown

and gr-dropdown in its css :host selector has:

  --panel-background-color: var(--gr-color-white);

so even setting --panel-background-color from the outside of the gr-select component will have no impact on the underlying dropdown. Notice the white bars in the below:

Screen Shot 2023-02-06 at 6 44 38 PM

... even though the following variables are set at the top level:

gr-select,
gr-menu-item,
gr-dropdown,
gr-menu {
  --panel-background-color: var(--primary-background-color);
  --background-color: var(--primary-background-color);
  --background-color-hover: var(--secondary-background-color);
  --background-color-focus: var(--secondary-background-color);
  --color: var(--primary-text-color);
}

(--primary-background-color, --secondary-background-color and --primary-text-color are variables from my code that are dark in color in this case).