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

Function Custom Theme builder does not work properly for Figma #101

Closed dorobiro closed 1 year ago

dorobiro commented 1 year ago

Dear Material Design Theme,

I want to design an app for Alpenverein Österreich, where the primary, secondary and error colour code is precisely defined: primary: HEX 59AF31 secondary: HEX 4F5259 error: HEX B12820

Please see attached screenshot where I numbered the issues I`ll describe: image

The issues:

  1. I define the primary color, which in my opinion should be exactly the primary color for the light mode. Why does it pick "Primary40" as primary color? And not just the pre-defined primary color?
  2. The secondary color is a grey tone. Why does it become blue as secondary? It seems that the shades are changing in Chroma (HCT Color Picker), and not in the Tone, as they do for the primary color.
  3. I have a pre-defined error color, why I cannot change this in the customization? I can only change the tertiary and neutral tones.

Are these issues already known? Are you fixing these? At the moment, the theme builder is useless for me if I can`t fine tune these colors.

Thank you in advance!

Br Doro

margeeta commented 1 year ago

Hi @dorobiro, thank you for the feedback! The Material Theme Builder is designed to utilize the latest M3 dynamic color system to create a fully accessible color scheme using HCT(Hue, Chroma, Tone) that is tied to the Material tokens. This allows to visualize colors generated from user wallpapers and create a custom theme using the same algorithm.

The key color inputs are used to generate out the tonal palette from using Hue, but may not reflect what is used for the Primary Color Role. Primary will always be Primary40, same Hue, but the Tonal value of 40. #59AF31 (Hue of 138) has a tone of 64, so it falls onto the P60 range. Screenshot 2023-01-10 at 3 50 17 PM

The color algorithm also adjusts chroma to fall above a certain range, so the Secondary key color grey is being adjusted up pushing into a blue. For more on M3 color: Color System

Both fall into working as intended, but we are addressing the need for more true to source colors approach! Currently, within Figma the style properties can be updated to match source color for mockups and values can be manually updated if needed in exports.