JamDev0 commented 1 year ago

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?

LexSwed commented 1 year ago

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"