Theming

The title of this Sara Soueidan article speaks to me. I'm a big fan of the idea that some CSS is best applied globally, and some CSS is best applied

CSS variables let you define values for reuse throughout a CSS file , opening the door to more efficient theming capabilities — no preprocessors necessary.

We posted not long ago about the difference between native CSS variables (custom properties) and preprocessor variables. There are a few esoteric things

How to use CSS Custom Properties to create a scalable theming system for a project.

Did you know that you can build custom dynamic color themes without the use of JavaScript or a CSS preprocessor!? Read on! | on Una Kravets' Blog

I'm by no means a designer, but with a bit of research into color contrast and accessibility, making I was able to build out a design that I was happy with.

Before the advent of CSS custom properties (we might call them “variables” in this article as that’s the spirit of them), implementing multiple color

Setting CSS variables to theme a design system can be tricky: if they are too scoped, the system will lose consistency. If they are too global, you lose granularity. Maybe we can fix both issues. I’d like to try to boil design system variables down to two types: Global and Component variables. Global variables will give us consistency across components. Component variables will give us granularity and isolation. Let me show you how to do it by taking a fairly simple component as an example.