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
362 stars 28 forks source link

Theme Builder Styles and Chroma Control Problems #113

Closed pbroom closed 1 year ago

pbroom commented 1 year ago

name: Bug report about: Weird color outputs title: '' labels: bug assignees: ''


Describe the bug This might encapsulate multiple bugs. I have noted these behaviors while operating the MTB plugin in the Material Design-provided Material 3 and Customizing Material color Figma files.

  1. The plugin styling seems to have regressed since the last update.
  2. The output color styles in Figma do not respect the Chroma input.
  3. Manipulating the Chroma slider will immediately lock the output of that color into a specific color range.
  4. Setting Chroma to zero does not create a 100% black/grey/white, but instead changes the manipulated color to a vivid teal color regardless of what Hue value is set. I am not able to output 100% greyscale styles from MTB.

To Reproduce Steps to reproduce...

...the styling behavior:

  1. Go to 'Material Theme Builder' in 'Plugins'
  2. Click 'Run' Screenshot 2023-01-24 at 12 15 07 PM

...the Chroma slider behavior:

  1. In MTB, click on the 'Custom' tab
  2. Click on the swatch for the 'Secondary' color to edit it Screenshot 2023-01-24 at 12 15 33 PM
  3. Using the slider handle or the 'down' arrow in the Chroma number field, reduce the Chroma to a value between 0 and the default 16.37180328499101. The color output styles will jump up in Chroma to match the Primary, regardless of what is set for the Secondary color. Screenshot 2023-01-24 at 12 16 13 PM
  4. After the styles have updated in the Figma file, reduce the Chroma to zero. The output color styles will now jump to a teal color (something close to #97F0FF). Screenshot 2023-01-24 at 12 16 25 PM

Expected behavior

Screencapture Screen Recording

Desktop: