Temp variables

[roblevintennis]

Sorry if this is a silly question, but I notice in many of the examples a favored approach of using temp variables like:

  --_link-text: var(--gray-7);
...
  & > a {
    color: var(--_link-text);

This is merely for the ability to better express what the variable represents within the usage correct (as opposed to having to mentally parse & > a "are links" and color: var(--gray-7) "links are gray seven whatever that is". Correct? Is there another benefit I'm missing?

[argyleink]

Lea Verou writes very well about the benefits and reasoning here! https://lea.verou.me/2021/10/custom-properties-with-defaults/

I think of it like, you have global props (generics), which back your app props which aren't specific to a token/prop, they're about a purpose. have a prop back a prop has big benefits. See the Color 101 section for a nice breakdown of when it becomes really nice. like for example, users of your design system dont need to memorize --gray-3 for dark theme light text if you just have a --text-2 var that is being adapted to light and dark in media queries. it's like, there's props that back all the props (back of the front-of-the-front) and then the props the front-end folks use (front-of-the-front). the concerns are much less for the front end devs, and the system thinking goes into the author of the "back of the front of the front".

[roblevintennis]

Lol that's a somewhat funny answer in that it reads like a riddle but I get you.

I'm honestly still struggling to grok how I'd use color values or font sizes prescribed (if not prototyping) without wanting to change them for my particular app, design system, etc., and if I override the OP ones it becomes a well what's the point situation.

I think I next need to play with the JIT postcss tooling because that'd likely be the sweet spot and I would likely 1. Prototype 2. Prune unused 3. Combine OP values with custom ones or replace

I'm having fun tinkering with the library though.

In a way I could also see using custom properties for inline styles as an interesting alternative for tachyon tailwind folks. I mean it's basically the same sort of thing loosely.

Still very much in tinkering and evaluating phase with this 😀

[argyleink]

There's a section in the docs on "theming 101" with colors that I think will help you see some advanced usage.

The critical thing is that OP can (or is best used) to back your "house props", like the ones you name for usage by a team. Like, a button, set a --light-button-bg-color: var(--blue-2). Then have your team use --light-button-bg-color instead of --blue-2 all over.

[roblevintennis]

I'll have a look at theming 101 next spare cycle