-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Added alpha variants and overlay colors #5
Conversation
I've thought about tests but I'm not sure how to implement them, I don't see any documentation on how to clean-room run a unocss preset or inspect output. As far as I know none of the official presets have tests either. This looks good on GitHub, I'll test properly later and merge if it works how I expect. |
Yes I see there is not anything in docs, but I found here tests https://github.com/unocss/unocss/tree/main/test And it seem there is for default preset here: https://github.com/unocss/unocss/blob/main/test/preset-uno.test.ts using vitest. We could make similar. I can check into if you are interested, so it will help during development to quickly test new features. I am interested to understand if we can add new color on demand instead of adding in config, so for example using bg-blue10, will add just blue10 var and nothing else. But not sure if this is possible, since I see you are pushing in theme config the colors. So I suspect this could not work on runtime? |
I'm working on a pretty large upgrade today, it will help test this PR and all future ones too. See #6 for the generation idea, I don't want to start with giga-prs. |
You should update to current main, it has a vercel demo page thing now and I also changed some stuff you'll have to fix again for your thing, sorry. |
I actually don't, not even when explicitly running tsc, perhaps do you have a stricter tsconfig somewhere? It looks as though your errors stem from the definition of |
I am using JetBrains, and it's configured to use tsc from local node_modules, so it's the same config. I am not using any stricter tsconfig as I am aware of. Yes I see that is about the palette, I have to investigate a bit more about, but before want to ask you, maybe you already know how to fix this. |
Ah, I use vscode, it doesn't show this error so I can't really figure whats wrong with it. If you can provide more details from your error or figure out what the problem is I'll happily fix it. Those generator functions are a little "first-draft", could probably do better with more tactful use of the array comprehensions. I want to port all of it over to something functional/immutable but that would introduce another dependency I think, which isn't so nice for a library. |
Yes I see with vscode it doesn't complain, with ESLint extension, however I think that it's not so reliable.
I tried run tsc and I get errors, how you make this works? I notice that with old tsconfig.js everything still works fine like before, I tried with this: b4e12f0#diff-b55cdbef4907b7045f32cc5360d48d262cca5f94062e353089f189f4460039e0 With the new tsconfig.js I get first of all a deprecation issue with Then after adding |
Those errors are in vitest? I should fix the imports... thing in tsconfig, otherwise none of those are related. |
Yes it's seem coming from vitest after running |
Took a shot in the dark on |
Now is much better, I can "tsc" without errors. About the others two errors that I see in my IDE, the first one inside When try to cast as The error said:
In case this doesn't help you to understand how to fix, I will try to ask someone from unocss. The second issue I will check a bit more in next days, this one: |
@thewebartisan7 Are you planning on completing this? |
Hi @endigma sorry for delay, I was trying to find another solution for include radix colors in unocss and I did indeed succeed with it. However, I can also complete this PR, please give me a few more days. |
What caused you to use a different solution? I'd like to improve the library if there's something missing. |
There is nothing wrong with this preset. The problem is that the project I am working on is with SASS, and all colors is already in a SASS map, from which the CSS variables are added in :root. So I was trying to use unocss with radix colors instead of using So with a simple new rule I was able to create new color utility like [/^bg-(.+)-(a)?([1-9]|1[0-2])$/, ([
selector,
color,
alpha,
scale
], ctx) => {
const colorName = alpha ? `${color}A${scale}` : `${color}${scale}`
return `
.${selector} {
background-color: var(--${colorName});
}
`
}], I am thinking to move all this in unocss config but for now there are too much things to be changed/remove in current SCSS code. I am also trying to figure out a way to create the CSS variable on demand, I could just output them inside this rule, and I make a rule for this, but the problem is that for each color there is For this other rule I grab colors directly from radix library via: import {
blue,
blueA,
blueDark,
blueDarkA
} from '@radix-ui/colors'; In defineConfig: theme: {
colors: {
radix: {
blue,
blueA,
blueDark,
blueDarkA,
}
}
}, The similar to other rule: [/^bg-(.+)-(a)?([1-9]|1[0-2])$/, ([
selector,
color,
alpha,
scale
], ctx) => {
if (color.includes('Dark')) {
return
}
// Rename red-a => redA
const palette = alpha ? `${color}A` : color
// Make dark name from color name, e.g. red => redDark or redA => redDarkA
const paletteDark = alpha ? `${color}DarkA` : `${color}Dark`
// Rename b-red-a1 => redA1
const colorName = alpha ? `${color}A${scale}` : `${color}${scale}`
if (ctx.theme.colors.radix[palette] && ctx.theme.colors.radix[palette][colorName]) {
return `
:root {
--${colorName}: ${ctx.theme.colors.radix[palette][colorName]}
}
${ctx.theme.colors.radix[paletteDark] && ctx.theme.colors.radix[paletteDark][colorName] ?
`.dark .${selector} {
--${colorName}: ${ctx.theme.colors.radix[paletteDark][colorName]}
}` : ''}
.${selector} {
background-color: var(--${colorName});
}
`
}
}], But I am still investing into. In case I found a solution I will share here, so if you are interested we can improve this preset. |
I end up with a custom preset that suite better my need, check here https://github.com/primus-ui/unocss-preset-radix-palette In case you are interested in this PR, let me know, and I can try to fix. The problem that I faced when I try to fix is with typescript, most of them mentioned. However, as soon as I try to add my changes, more typescript errors come out. Considering that I need also others features and not only this one, I made a new one. About issue with rules typescripts, working on I see that error disappear when you type rule arguments, in this case: We can end up with single preset in case you are interested in additional features that I added. |
As discussed here #4 this is the PR for add alpha variants and overlay colors (whiteA and blackA).
For add the alpha variants and overlay colors you need to explicitly add them in config, in this way someone can exclude them if they are not using.
Example config:
Overlay colors:
whiteA
andblackA
Alpha variants:
blueA
,greenA
, etc...The dark variants is added automatically, so for example when you add 'blueA' also the 'blueDarkA' will be added.
I have also exclude dark colors if you set the option
darkSelector
to falsy value so that if someone are not using dark mode, the CSS for dark colors will not be generated.I see there is not any tests and not sure how is your workflow for tests code, I did a build and move dist folder to a unocss project for testing. I think would be good to have some tests.
Let me know if you have any feedback about and I will adjust accordingly.
Thanks