phase2 / outline

Tooling infrastructure for modern web component development.
https://outline.phase2tech.com
MIT License
128 stars 27 forks source link

[Bug]: outline-dropdown has hard-coded colors #349

Open mike-potter opened 2 years ago

mike-potter commented 2 years ago

Describe the bug

The outline-dropdown component doesn't define its own color cssvars and instead is using gray and black colors:

  border-color: var(--outline-gray-400);
  background-color: var(--outline-gray-200);
  color: var(--outline-black);

Expected behavior Sites using outline-dropdown should be able to set their own cssvars for these colors without overriding the gray and black base colors.

Ran into this when using outline-dropdown for the main menu items.

Actually, there might need to be variants to handle different color schemes. I could see outline-dropdown being used for a simple Select list of items, which is different than using it for the menu dropdown elements. Probably can't have a single color variable for both situations. So similar to buttons, might need to have variants like menu or select dropdowns?

mike-potter commented 2 years ago

Related to this, the outline-dropdown has a hardcoded min-width of 350px that makes it difficult to use with menus that might have wider menu items. See the IDB for an older outline-dropdown that doesn't have these issues. Probably need some sort of width property or variant as mentioned above.