Document jit-props and JS import shadows gotchas
argyleink opened this issue · comments
Adam Argyle commented
The supporting props for shadows (strength and color) only ship the light versions in the JS bundle, and the JS bundle is what jit-props uses to resolve values. Documentation should articulate this current limitation as well as suggest ways to resolve for now.
CrzyMan commented
Seems like shadow strength and color are static values that you can override. So, as a work around, I'm currently just taking their default values and including it in my app.css file in the :root
selector.
:root {
/* open-props doesn't include these for jit-props*/
--shadow-color: 220 3% 15%;
--shadow-strength: 1%;
}
Adam Argyle commented
yep, that's the workaround! here's the light/dark for folks to grab if they need in the meantime
html {
--shadow-strength: 1%;
--shadow-color: 220 3% 15%;
}
@media (--OSdark) {
html {
--shadow-strength: 25%;
--shadow-color: 220 40% 2%;
}
}