Extend / change preset styles

[kaumac]

Hey there!

I'm not sure if there's a documentation for this somewhere and I missed it or if this should be on PandaCSS repo...
Is there a way to extend/alter the preset styles from Shadow Panda?

Examples:

• I want to change color for the border/shadow of the input when it's focused. Right now it's a slate color. I don't wan't to change the primary color of my theme, just the input shadow/border 🤔

• Add/or modify existing variants: I wan't to add size variants to the input component. On pages like sign up or special landing pages I want to have bigger inputs for improved conversion rate.

I know this might be out of scope for this project but it would be nice to have some docs about this. I can make a PR to update the docs but I'm not really sure how to do this myself

[kaumac]

An update here:
I just had a long discussion on the Discord channel from Panda.
This might be a technical limitation from panda but apparently the only way to do it is using the extend: object option on panda.config.js

I'm thinking about exporting my overrides as a named export from my config file (for example components/Input.tsx) and importing it on the panda config file.

Still not sure if this belongs in the shadow panda docs or on the panda css docs.

[stvncode]

You have an example here in the docs : https://shadow-panda.dev/docs/guides/theming