Fluent UI React Insights: Theming in v9

From the creator

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: https://github.com/microsoft/fluentui https://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 https://fluentsite.z22.web.core.windows.net/debugging #2 Support matrix for CSS Variables https://caniuse.com/css-variables #3 Color tokens in Fluent UI React v9 https://react.fluentui.dev/?path=/docs/theme-colors--page #4 Fluent UI token pipeline https://microsoft.github.io/fluentui-token-pipeline/ #5 RFC: Remove global color tokens from themes in Fluent UI React v9 https://github.com/microsoft/fluentui/pull/19752 #6 RFC: Custom styling in Fluent UI React v9 https://github.com/microsoft/fluentui/pull/25333

Published 2023-04-03 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.