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

Incorrect color mapping for "Primary Container" and "On Primary Container" when using "Color Match". #313

Open dowTR opened 5 months ago

dowTR commented 5 months ago

Thank you for creating the Theme Builder plugin! It's great to have these tools created by the Google design team!

It seems that there is a discrepancy between the assigned colors and the expected tonal palette values when using the "Color Match" feature (I am wanting to keep my brand's color values to generate an M3 theme).

Let's break down the issue:

  1. Primary Container Color:

    • The Material Theme Builder plugin is not correctly assigning the "Primary Container" color from the tonal palette. Instead of the expected "P-90" value (a lighter color), it's using a darker shade.

  2. On Primary Container Color:

    • Similarly, the "On Primary Container" color is also off. It's currently assigned the "P-10" value, which is lighter than the actual "10" value.

This issue is also on the "Secondary Container", "On secondary container", "Tertiary Container", and "On Tertiary Container".

Screenshot 2024-05-30 at 2 39 47 PM

Because this is off, the new UI sliders and progress indicators make it hard to visually distinguish the filled "primary" color form the "container" color (see screenshots)

Screenshot 2024-05-30 at 5 55 33 PM

If I change the Primary Container to a lighter tone, and the On Primary Container to a darker tone (as it indicates it should be), this fixes the new progress indicators and sliders, but now all of my components that are mapped to "Primary Container" no longer appear on brand.

Screenshot 2024-05-31 at 5 48 14 AM

A potential fix: Map the new sliders and progress indicators to something besides the primary container (i.e surface-variant) appears to do the trick.

Screenshot 2024-05-31 at 5 51 39 AM

Request(s):

  1. Please update the Figma (and Web) plugin to generate the correct tonal palettes to brand colors when "color match" is on.
  2. Please update the Figma (and Web) plugin to generate the correct primary container and on primary container colors.
  3. Please map the new UI sliders and progress indicators to something besides the "primary container" (this would need to be done on the Figma file as well as in code). This would keep our branding colors intact on the components and end-users would be able to visually distinguish settings on sliders and decern loading bars, making them both more accessible.

These bugs were seen using the Figma "Material theme builder" version 2.0.1, as well as in the web theme builder tool.

catdumitru commented 5 months ago

I've experienced this as well, the bug is very frustrating. Light theme colors are all off, as @dowTR mentioned P-40 doesn't match Primary40, same for S-40 vs. Secondary40 etc.