RE: Alpha Variants for Black and White

[lafllamme]

Hi,
First of all, I want to apologize for reopening this issue. Referring to the previous issue: #25, I initially thought the problem was resolved. However, I’ve realized the issue is not only unresolved, but it seems to have worsened.

Currently, I’m encountering the following problems:

1. No Black or White Colors Rendered Properly:
   • In my IDE, I normally get a color preview for all colors when I use the syntax like bg-color-scale or bg-color-scaleA (for alpha).
   • When I use the same syntax for bg-black or bg-white, I don’t get a preview. Additionally, the colors don’t render correctly in the browser.
   • First I though it's dependent to the Plugin within my IDE and tried both variants (regular and the color-blackA-12)

2. Alternative Syntax Behavior:

   • If I use bg-blackA-scale (e.g., bg-blackA-11), the IDE gives me a preview, but the scales don’t seem correct.
   • Even with bg-blackA-scale, the color variable is applied in the browser but doesn’t actually set the color.

   

3. Mapping and Syntax Issues:

   • Looking at my UnoCSS setup, I only see blackA but not all the scales.
   • It seems there are no proper mappings for black and white colors with alpha scales, or they aren’t being set correctly.

---

Screenshots:

I’ve attached a screenshot showing how the variables are applied in the browser with regular write wise (e.g. bg-black-6A), suggested/rendered one (e.g. bg-blackA-6) but fail to set the actual color-variable.

---

Steps to Reproduce:

1. Use the syntax bg-black-scale or bg-black-scaleA in your project.
2. Observe that no preview is shown in the IDE.
3. Check the browser and see that the color variable is applied but not rendered.
4. Test alternative syntax like bg-blackA-scale, which provides partial previews in the IDE but fails to render properly in the browser.

---

Expected Behavior:

• bg-black and bg-white (with or without alpha scales) should preview correctly in the IDE and render properly in the browser.
• All alpha scales for black and white should be available and functional.

---

Additional Notes:

This time, I’ll make sure to test thoroughly before assuming the issue is resolved. I didn’t expect the previous fix to cause further issues, and I appreciate your patience while I work through this.

Thanks for your support and Happy New Year🎉!

[endigma]

Uh, yikes. I'll look into this tomorrow, it seemed to work for me in the docs project.

[endigma]

I can't reproduce this. bg-black(\d{1,2})A all work correctly in the docs. I don't know why the IDE integration isn't picking this up properly, but that's the correct syntax as it is for all the other colors. You may need to add "black" to your palette now that it's a proper scale.

[endigma]

2.5.7 reintroduces the basic black and white colors which can be used with opacity the standard way.

[lafllamme]

@endigma You're absolutely right—thank you for pointing that out! I didn’t initially think of it as a color itself, so I forgot to include it in my UnoCSS configuration.

Now, I’m getting the black-scales and white-scales as expected, and I can verify the changes.

Can i tip you a coffee somewhere? Let me know

Thanks so much for your effort, and Happy New Year!

[lafllamme]

I noticed something interesting: with version 2.5.6, I can see the palettes without any black or white itself (#FFF, #000), but with 2.5.7, they no longer appear. (Black and White available, but again no scales). If you'd like, you can check out my project on GitHub to test and reproduce the issue: Nuxt Design System

Getting it up and running is super easy—just clone the repo with branch design-tokens, and use make upp. The Docker container will handle everything for you. Once it’s ready, head over to localhost:6006. There's a ThemeToggle component under Storybook that showcases all the colors, so it should be straightforward to test.

Thanks again for your help, and feel free to reach out if you have any questions. Happy New Year!

[endigma]

Can you clarify which tokens are or are not working? I have my own test scenarios for this plugin I've been updating as I go. And is this an issue with CSS generation or the VSCode plugin?

Also, if you want to tip, my ko-fi is linked on my profile, i am also sponsorable on github directly

[endigma]

Hey @lafllamme did you resolve this? I'm not sure what you're saying doesn't work, and out of principle I generally don't download and run code I haven't read on my computer. Screenshots, a codepen, stackblitz, etc are all good if you're still experiencing the issue.

[lafllamme]

Hey @endigma,

Apologies for the delay! I’ve been busy assembling and upgrading parts for my new PC. The setup is complete now, and I’ve got a powerful new workstation!

Regarding your question, I’ve prepared a small example for the color palette on StackBlitz:

Stackblitz Demo

Feel free to modify and adjust it as needed. I’m not sure if I’ve missed anything, but this setup is essentially a 1:1 replica of what I have in my Storybook. The issue I mentioned earlier is also happening here.

The only special thing I’m doing is dynamically generating the classes, but that shouldn't affect anything since I’m using a safelist. I’ve added console logs throughout the code so you can take a closer look. The safelisting itself seems fine—it works with the regular colors, so I don’t see why it wouldn’t work for black/white.

One strange behavior I noticed is this:

With version 2.7.0 of the package, I get the regular black/white colors but no alpha scales. The same issue occurs with version 2.5.7.

I added two package.json files within the demo:
one working (with package.json.working for scales, version 2.5.6) and one regular (just package.json—you can rename or delete it).

However, with version 2.5.6, I have the black and white scales available, but no black or white as a color itself.

This issue is actually preventing me from progressing with my design system.

By the way, I’ve tipped you a big coffee as a small thank you for your hard work, especially for your quick responses. I really appreciate it!

Thanks for taking a look, and feel free to reach out if you need any further details!

[endigma]

Ok I messed up the scales with the explicit black/white values. I'm not sure there's a way around this unfortunately, as typescript doesn't allow something to have multiple values for one key, which is what would be required to have both bg-black and bg-black-XA work. I'll revert the update.

[endigma]

I've released 2.7.0 which removes the simple black and white. These names cannot conflict, so I'm leaving it up to the user to merge in their own theme if these are required, you can do something like "purewhite" or "pureblack" in the project config to add them back with whatever names you find acceptable.

[lafllamme]

Thanks for your quick update @endigma and for resolving the conflict with the scales in version 2.7.0.

I have a couple of questions to clarify and a suggestion:

Based on your note, could you confirm if my current configuration (as shown below) is the recommended way to reintroduce blackPure and whitePure (or similar) without conflicting keys?

theme: {
  colors: {
    blackPure: '#000', // Absolute black
    whitePure: '#fff', // Absolute white
  },
}

So I could use it then like:

<div class="bg-blackPure text-whitePure p-4">
    This uses pure black and pure white.
</div>

<div class="bg-black-A2 text-whitePure p-4">
    This uses black with an alpha value and pure white text.
</div>

Would it be possible to include a default for these colors, so I wouldn’t need to define them manually? Something like bg-blackPure or a similar name that fits your conventions would work perfectly.

Let me know if this aligns with your vision or if further input or testing would help.

Thanks again for your work on this!

Best regards

[endigma]

That should work unless there's some gremlin in config merging I'm unaware of. I've extended this preset with brand colors before in personal projects.

I'm not going to introduce more scale names on top of the official Radix colors in this preset, I recommend extending with whatever name you're happy with here. There are pure black and white in the Radix scales as 12A.

The naming conflict bug you have to be careful of is this, for reference:

theme: {
    colors: {
        black: "#000"

        // Inserted by the preset, whichever comes last will overwrite the previous key
        black: {
            "1A": "..."
            ...
        }
    }
}