Fluent UI React Insights: Theming in v9

The Fluent UI Insights series offers an in-depth look at the design decisions and processes behind the creation of the Fluent UI design system. In the fifth episode, the Fluent UI team discusses the implementation of theming in Fluent UI React v9, as well as previous approaches, limitations, and performance challenges.
🔗 Links:
github.com/microsoft/fluentui
react.fluentui.dev/
📚 Chapters:
00:00 - Introduction
00:21 - What is theming?
00:53 - What is in the v0 theme?
03:05 - What is in the v8 theme?
03:25 - What is in the v9 theme?
04:45 - Theme shape
07:20 - Performance challenges
09:18 - Are tokens flexible enough?
12:19 - High contrast
12:50 - Outro
12:55 - Bloopers
💡 References:
#1 Debugging of styles in Fluent UI React v0 fluentsite.z22.web.core.windo...
#2 Support matrix for CSS Variables caniuse.com/css-variables
#3 Color tokens in Fluent UI React v9 react.fluentui.dev/?path=/doc...
#4 Fluent UI token pipeline microsoft.github.io/fluentui-...
#5 RFC: Remove global color tokens from themes in Fluent UI React v9 github.com/microsoft/fluentui...
#6 RFC: Custom styling in Fluent UI React v9 github.com/microsoft/fluentui...

[@Feronom]

I didn't catch if you answered: should we override tokens in order to apply it globally? For example overrid borderRadiusSmall 2px -> 4px so everything can be more rounded. Is that valid approach or is it gonna mess up something?

[@raresnandra2145]

if im using fluent ui for a teams tab app how do i access the color pallete of the current theme in teams from fluent ui, if i want to se the colorNeutralForeground1 for the backgroundColor how would i do that cause the only way i found is by importing the tokens and assigning the token to the backgroundColor property but i cant access the color itself only get the css var name

[@facundoaldasoro]

Good work!

[@x1z53]

Why first man is Oleksandr? Isn't it Aleksandr like Alex?

[@rahulbhardwaj4568]

worst UI framework!!