boxShadow isen't working when i use a color from my theme
JamDev0 opened this issue · comments
Bug report
Describe the bug
When I try to set a boxShadow that uses a color that I have set in my theme, it doesn't apply when the element is focused.
To Reproduce
in "styles/index.ts"(Stitches configuration file):
export const {...} = createStitches({
...
theme: {
colors: {
"default-brand-50": '#f8fafc',
}
}
...
});
In the styled component:
export const StyledComponent = styled("button", {
...
"&:focus": {
outline: "none",
boxShadow: "0px 0px 0px 1px $default-brand-50"
}
})
Expected behavior
That the border was aplied to the element when it was focused
System information
- OS: Windows11
- Browser: Brave (Chromium)
- Version of Stitches: 1.2.8
- Version of Node.js: 16.19.0
Additional context
I am using Stitches to create react components to be used in my Storybook. Could that be the problem?
since box-shadow
properties can be sizes
or colors
, it would require more code for stitches to figure out which exactly value you want to interpolate here, f.e. boxShadow: 0 0 $md $brand-50
should understand $md
is var(--stitches-sizes-md)
and $brand-50
is var(--stitches-colors-brand-50)
. So you need to provide a hint, boxShadow: "0 0 0 1px $colors$default-brand-50"
Oh, ok, thank you :) appreciate it