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
419 stars 30 forks source link

State Layers #215

Closed deepdisco closed 11 months ago

deepdisco commented 1 year 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 1 year 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 1 year 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 1 year 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