Revise color palette & theming

[GBKS]

I've been wanting to extend the color palette for a while. While designing, I've just needed a few extra colors to work with, so this comes from a very practical need. Instead of a palette of 5 colors (orange, red, green, blue, purple) with orange being the primary, I'd like to go for 12 accent color system like Apple has defined in their Human Interface Guidelines, plus 1 primary color.

I also looked at Material Design, but it's extremely complicated. On the surface, you pick one color, and it derives a palette for you. But you end up with 50 different, yet very similar, colors. If you try their Figma Theme Builder plug-in, the first thing it does is add 180 color styles to the file. Not sure how you can properly work with that...

Using the plug-in as defined in #49, we also don't need separate light and dark modes anymore. You simply apply a color set, and that may be light or dark or have a pastel palette or neon colors, etc. That simplifies color name. For example, instead of "Light/Red" and "Dark/Red" we just have "Red". So this change is both an addition and a removal.

Here's what that looks like. This shows two color sets, one being light and the other being dark. Using the plugin you can select one and apply it with a click.

[GBKS]

BTW, the color names are not meant to be 100% accurate. Especially if we get into theme variations via style sets, the colors can slightly shift into neighboring ranges. But what can you do...

[GBKS]

So this system is live on Figma with the latest update and the plugin is also available. I'd like to flesh out the theming system further, to provide designers with more options for quickly putting together very different styles.