Sign in to confirm you’re not a bot
This helps protect our community. Learn more

Fluent UI React Insights: Theming in v9

Microsoft Developer
588K subscribers
<__slot-el>
<__slot-el>
4K views 2 years ago
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.windo... #2 Support matrix for CSS Variables https://caniuse.com/css-variables #3 Color tokens in Fluent UI React v9 https://react.fluentui.dev/?path=/doc... #4 Fluent UI token pipeline https://microsoft.github.io/fluentui-... #5 RFC: Remove global color tokens from themes in Fluent UI React v9 https://github.com/microsoft/fluentui... #6 RFC: Custom styling in Fluent UI React v9 https://github.com/microsoft/fluentui... ...more
...more
Fluent UI React Insights: Theming in v9
56Likes
4,011Views
2023Apr 3
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.windo... #2 Support matrix for CSS Variables https://caniuse.com/css-variables #3 Color tokens in Fluent UI React v9 https://react.fluentui.dev/?path=/doc... #4 Fluent UI token pipeline https://microsoft.github.io/fluentui-... #5 RFC: Remove global color tokens from themes in Fluent UI React v9 https://github.com/microsoft/fluentui... #6 RFC: Custom styling in Fluent UI React v9 https://github.com/microsoft/fluentui...

Follow along using the transcript.

Microsoft Developer

588K subscribers