Theme not detected for components from Material 3 Design Kit

[AnneKok]

Components from the Material 3 Design Kit for Figma (https://www.figma.com/community/file/1035203688168086460) use a different hierarchy of color styles than those created by the Material Theme Builder. Apparently because of this, when I open Material Theme Builder and select a component from the Design Kit, no theme is detected and I cannot Swap the theme.

The differences I found and what I did to make sure the Theme Builder correctly detects the theme:

• Theme Builder color styles have the style sys > light/dark > scrim which Design Kit component color styles don't have. I manually added this to the Design Kit color styles (#000000).
• Design Kit component color styles have the folder state-layers, which Theme Builder color styles don't have. I moved the state-layers folder to a separate color style folder, but it's problematic that this is not included in the Theme Builder styles because now I have to manually update ALL state-layers color styles (dozens of them) whenever I want to use a component in another project (with different color theme).
• Design Kit component color styles have the style sys > light/dark > surface-tint-color which Theme Builder color styles don't have. I removed this color from the Design Kit components, replacing it by surface-tint because it was the same hex value. I am unsure if it was used in any of the Design Kit components.
• Design Kit component color styles have the following styles which Theme Builder styles don't have. I removed these from the Design Kit color styles, they were not used in any of the Design Kit components as far as I could tell.
  • key-colors
  • error
  • neutral-variant
  • source
  • Seed
  • Primary
  • Secondary
  • Tertiary
  • Neutral
  • Neutral Variant
  • Error

Note that I'm not sure if every single one of these steps is necessary to get the Material Theme Builder working with the Material 3 Design Kit components; I did all of it and then tried again and it worked.

There is one more difference between the styles that doesn't seem to affect the working of Theme Builder:

• Theme Builder color styles have for each folder in the ref folder the colors with 5, 25, 35, and 98 suffixes, which are not included in the Design Kit component color styles.

This issue means you can't use the Material Theme Builder plugin to swap the themes on the components from the Material 3 Design Kit. This is a crucial workflow and it's very strange that this was apparently not tested / is not supported.

[margeeta]

Hello, expect an update from Design Kit soon.

[margeeta]

Design kit update expected this week.