Aliases as rules / Hues as aliases

[endigma]

It could be useful to be able to define aliases inline, which would also perhaps be used to power hue functionality.

something like alias-danger-red as a rulename. This would more or less replace hue in-place if a shortcut for hue- -> alias-hue- was set up, and would allow stuff like hue5-blue or etc if multiple hues are required to power a hue combination.

[awwwdev]

I thought about this a little bit. here is what I found. To avoid mixing hue colors you need to create a new set of CSS vars for each hue. Let's say we have we have:

<div class="alias-info-blue alias-primary-green" >
   <button class="c-info11 bg-primary3" >Hi</button>
</div>

for it to work we need to generate this CSS:

.alias-info-blue   {
  --uno-radix-info12 : var(--uno-radix-blue12);
  --uno-radix-info11 : var(--uno-radix-blue11);
  ...
}

.alias-primary-green {
  --uno-radix-primary12 : var(--uno-radix-green12);
  --uno-radix-promary11 : var(--uno-radix-green11);
  ...
}

and then have some rules to handle c-(w+)(d+) , bg-(w+)(d+) , ... For example c-info12 and bg-primary3 should create:

.c-info12 {
  color: var(--uno-radix-info12);
}

.bg-primary3 {
  background-color: var(--uno-radix-primary3);
}

So they can pick up the hue and use it.

[endigma]

CSS vars wise it'd actually be essentially the same code as hues right now, just subbing in another part of the rule in the generated CSS. I would need to find a way to dynamically add or detect the colors though, hue is still hardcoded into the theme.

https://github.com/endigma/unocss-preset-radix/blob/8c3f43d9317bf8c8336d385b7719e12800f90e59/src/radix.ts#LL56-L59C2

Is responsible for generating a "scale" that represents the current hue value. I think uno may give some sort of hook that returns which rules get used, or which colors, which might give an avenue to adding the colors that get made by alias-x-y dynamically. This is my first unocss preset though, so I'm not entirely sure how that system works.

[awwwdev]

yeah, with adding colors dynamically, you don't need to select colors in config. I guess you currently add all 12 levels of a color if it's in the selected colors. I used unocss-preset-theme to manage dark them. This add colors dynamically. I gave all radix colors to this preset (and also the default unocss them) and then if I use "c-orange11" it only add the light and dark variables of orange11. But I had a hard time to config it correctly and the its new versions don't work with hsl colors. I really look forward to this preset.

BTW it would be nice to add "lightSelector". It's useful when you want to force lightmode in page/section or when you want to auto/OS option beside light and dark.

[endigma]

What's blocking you from using it right now? lightSelector support is in as of 2.1.0

[endigma]

I don't have time to scope and impl this atm, contribution would be welcome.

[awwwdev]

What's blocking you from using it right now? lightSelector support is in as of 2.1.0

Didn't know that. Amazing!