material-theme-builder icon indicating copy to clipboard operation
material-theme-builder copied to clipboard
verified publisher icon material-foundation

Add support for Material 3 Expressive tokens

Open boswelja opened this issue 6 months ago • 2 comments

Is your feature request related to a problem? Please describe.

Material 3 Expressive introduces a series of new color and type tokens, as well as all-new shape tokens. However, the current theme builder seems to ignore these.

Describe the solution you'd like

Theme builder updated to generate Expressive themes

Describe alternatives you've considered

Potentially have a toggle or a separate website for generating non-Expressive themes alongside Expressive ones

Additional context

https://m3.material.io/blog/building-with-m3-expressive

boswelja avatar Jun 14 '25 02:06 boswelja

For reference, the Wear OS color tokens are here:

https://developer.android.com/design/ui/wear/guides/styles/color/roles-tokens

I believe they are slightly different to the mobile color tokens. (Also, there is no "light" variant.)

It would be useful if the tool supported all form factors that have adopted Material 3 Expressive.

ithinkihaveacat avatar Jul 04 '25 09:07 ithinkihaveacat

Material Color Utilities

The Material Color Utilities libraries for Java and TypeScript have been updated to support the new 2025 color spec version with the "dim" colors as well as with a new watch platform which makes the background colors be pure black like a few months ago. But the problem is that Material Theme Builder is supposedly built with Flutter, but the Material Color Utilities dart library hasn't yet been updated for the new 2025 color spec.

Now, replying to the statements previous commenters made:

Potentially have a toggle or a separate website for generating non-Expressive themes alongside Expressive ones

Material Color Utilities already support generating both 2021 (non-Expressive, or simply Baseline) or 2025 (Expressive) color schemes.

For reference, the Wear OS color tokens are here: https://developer.android.com/design/ui/wear/guides/styles/color/roles-tokens I believe they are slightly different to the mobile color tokens. (Also, there is no "light" variant.)

Material Color Utilities support generating "pure black" / "WearOS" / "watch" themes via the new platform option in the constructors of the DynamicScheme structure. Generating light color schemes with the "watch" platform gives strange results: the accent colors respond to theme mode changes (light / dark), but the background colors always stay dark, more like pure black. This behavior means that it's not intended to generate light color themes with the "watch" platform, plus the 2021 color spec doesn't support or recognize the "watch" platform, which narrows down possible theme mode / platform / color spec version combinations down to 5:

  • light 2021 phone
  • dark 2021 phone
  • light 2025 phone
  • dark 2025 phone
  • dark 2025 watch

Alternatives to Material Theme Builder

If you want something close to Material Theme Builder, there are two options for now.

MaterialKolor and MaterialKolor Builder

Use MaterialKolor Builder to preview the new 2025 color spec changes (no watch platform support though) or to export it for use in Jetpack Compose Material 3 apps.

Ports of Material Color Utilities

I've made my own effort in porting the Material Color Utilities libraries to two programming languages they haven't yet been updated on / ported to: Dart and Rust. The libraries are complete except for the image quantization features (which are required for extracting the most dominant color out the provided image), but the problem is they are unofficial and the Material Color Utilities repository doesn't currently accept external contributions.

I have also made a few accompanying scripts for my libraries which allow generating JSON files for **Material Theme Builder Figma plugin. Using those scripts, I have successfully generated schemes for two templates: "Baseline" (standard Material 3 seed color) and "Now in Android" (seed colors from a Google design case study of the same name). Each template has JSON files for 9 variants, 2 platforms (phone and watch), 2 color spec versions (2021 and 2025).

The only problem I have noticed is that after importing JSON files with custom colors into Figma using the Material Theme Builder plugin, certain colors are seem to be overridden or harmonized by the plugin, not matching the values generated by the script, but it looks close enough, so I usually don't bother during the designing period. I haven't yet found a reliable and "standard" way of importing color styles into Figma (using third-party plugins, each of which has its own input format, I do not consider as being reliable).

As for the links:

If you have any questions, feel free to ask them! I'll try my best to give definitive answers.

Disclaimer I am not a Google employee. I am not an expert.

deminearchiver avatar Jul 05 '25 15:07 deminearchiver