Simplify theming

[brambow]

Feature Request

Consider publishing a theme that has a simpler design than the Teams theme.

Problem description

Fluent's theming is very powerful, especially Fela's state-driven styling. We don't get that level of flexibility in other CSS-in-JS solutions like Styled System/Rebass. However, creating a custom theme in Fluent is also a giant pain, as there are so many moving parts. I really like some of what I can do, but it's taken me several months of working with Fluent almost every day to get there. It can get confusing where to change values - (colors.js, siteVariables, componentStyles and componentVariables?). I'd wager most people, when theming, just want to be able to easily change or override some colors. So perhaps an example theme that is much simpler than the teams theme would help drive adoption.

I think it'd be smart to look at the SystemUI Theme Specification (https://system-ui.com/theme/) and see if Fluent could draw any lessons from that. That spec is used by many packages and is incredibly easy to write and extend. It doesn't have all the magic of Fluent's Fela-driven theming, but I also don't have to maintain tons of component specific variable and style files either. It's all in once place.

Proposed solution

Consider how to make theming more digestible to new users.