I've been using semantic variables for years, but they were always defined in Sass/LESS. With this approach and using CSS variables, it's really easy to have the same semantic palette, but then define different themes. Nice!
Particularly like the section on "why not invert?"
> In light mode, darker colors often communicate distance.
Knew this but hadn't consciously realized it.
As a programmer it's definitely appealing to be able to create a theme mathematically by just inverting. But then design will get their hands on it and you really have to be prepared for that with something like a semantic layer. It will look much better in the end as well.