material-foundation / material-color-utilities

Color libraries for Material You
Apache License 2.0
1.57k stars 134 forks source link

Web: Select tokens seem to be missing #142

Open Elias-Graf opened 3 months ago

Elias-Graf commented 3 months ago

I have used the following code (mostly from this README), to generate and apply the color scheme:

// Get the theme from a hex color
const theme = themeFromSourceColor(argbFromHex("#FF0000"));

// Apply the theme to the body by updating custom properties for material tokens
applyTheme(theme, { target: document.body, dark: true });

And the styles seem to be missing for the panel of the select:

image

image

Reproduction: https://stackblitz.com/edit/vitejs-vite-6qdvam?file=src%2FApp.svelte

  "dependencies": {
    "@material/material-color-utilities": "^0.2.7",
    "@material/web": "^1.3.0"
  }
Elias-Graf commented 3 months ago

After further investigation, although I'm not 100% certain, I don't think the issue is with this repository. As far as I understand, from skimming though the code, the utilities set tokens starting with --md-sys. Further tokens, seem to be the responsibility of the web components themselves. Such as the container element md-outlined-field. This component doesn't seem to set any tokens regarding menus on it. I suspect, they are missing, since I don't think I have found any other "floating" menus implemented for the web in the documentation: https://m3.material.io/components. In fact, there doesn't even seem to be an entry for the select components. Only menus, which are "Planned". But I found documentation on them, in this repository: https://github.com/material-components/material-web/blob/main/docs/components/select.md.

If the issue is not on my side, I would kindly request this issue to be moved to the correct place, if possible :). Of course, I will gladly copy it to the correct place, if pointed out.

Edit:

I have found the markdown documentation on the menu, and as I suspected, it suffers from the same issue: image

I have added the menu to the reproduction.

voi99 commented 3 months ago

Encountering the same issue, (container-color) tokens for elevated button are not being generated

image