Update on WinUI 2/3 token availability

[riverar]

Hi @TravisSpomer, can you provide an update on the availability of WinUI 2/3 tokens for desktop development? I was doing some preliminary planning to translate between their styles and these intermediate tokens but don't want to duplicate existing efforts if any.

[TravisSpomer]

Hi Rafael! I'm afraid I don't have any news for you there. I can say that some people are working on merging the version of Fluent used in Windows and the version used in other Microsoft things—they are largely unrelated systems but produce similar visual results.

Here's what I can say that might be useful to you:

• The tokens in the src/demo folder of this repo are a very incomplete draft from a couple of years ago now that I use as a test case, so definitely don't depend on those!
• We have the latest version of the Fluent design tokens in a separate repo that's currently more locked-down—not because it's a secret, but just because we're still making breaking changes and don't want anyone depending on them in this state. But they're getting pretty close.
  • I'll eventually be able to make that repo public, and when that happens, it'll just be a bunch of JSON files in the (draft) W3C Design Token Community Group format. So you won't need this hacky little tool to read them; you can use your favorite JSON parser or token transformer. Think of this repo as a tool that we're using internally until that standard token format becomes a thing—I don't expect anyone else to need to use it.
• Your best source for current token definitions for Windows desktop development right now are probably the ones that come with WinUI, like ButtonBorderBrush.
  • Fluent UI React v9 shipped recently with the latest version of the Fluent tokens at that time (transformed with this tool), so it's pretty close. But also not helpful to someone making a desktop app.
  • The shipping WinUI styles were not generated with this tool.

So my best answer for you is that if you want to best match Windows UI as it is today, use the stuff from WinUI.

• The supported way to consume tokens will be through the libraries (WinUI, Fluent UI React, Fluent UI React Native, etc.) and through the Figma UI kits.
• At some point I'll be able to flip the switch and make our tokens repo public. But that'll be more of a "this might be convenient for people like Rafael" thing, not a supported product.