search

material-foundation / material-theme-builder

Visualize dynamic color and create a custom Material Theme.
https://material-foundation.github.io/material-theme-builder/
Apache License 2.0
361 stars 27 forks source link

State Layers #215

Closed deepdisco closed 6 months ago

deepdisco commented 9 months ago

I selected "Turn on State Layers" within settings. Using a component from the Material Design Kit when I swap from my orange theme to blue theme the hover & focus states of the component remain orange. is there something I am missing?

margeeta commented 9 months ago

Hi! Could you provide steps to reproduce? Sometimes the selection size is too large for the plugin to swap everything, especially with the size of the design kit.

deepdisco commented 9 months ago

Certainly, and thanks so much for the response.

  1. Copy an instance of a Material 3 Design Kit component (in this case, a Chip) from the Assets Panel into my work. It has a color theme which we'll call Orange.
  2. Open the Material Theme Builder plugin and select a new theme which we'll call Blue. Generate State Layers has been selected in the settings
  3. Select the Chip and click the Swap button in Material Theme Builder. The visible state (outlined, label only, enabled) changes colour.
  4. When I run the prototype and interact with the Chip, the hover and selected states remain Orange (the previous theme)
margeeta commented 9 months ago

Thank you for providing the steps! If the state-layers are generated and updated they should be swappable. The component states are different variants, so it sounds like some of the state variants didn't get swapped. Screenshot 2023-09-12 at 12 04 56 PM