How to use Leva theme/styles in a custom plugin?

[Sec-ant]

I need a control that displays an identicon generated from some value. The most similar input control that Leva offers is the Image Component, but I don't need the drop zone. So I tried to write a custom plugin refering to the code in Image Component. However the latter uses several styled components like ImageContainer, ImagePreview, ImageLargePreview that seem to be not exported. And I don't know how to use the styles from Leva themes like rowHeight, colGap, sm, etc. in my custom plugin. So by now I just hardcoded these styles with default values. My question is, how to use these styles in my custom plugin so that I won't have to hardcode these styles?

A simple piece of example code of my custom plugin (hardcoded styles):

Any help is appreciated, thanks!

[dbismut]

Have a look at the file below:

leva/packages/plugin-bezier/src/StyledBezier.ts

Line 1 in bdbe233

import { styled, keyframes } from 'leva/plugin'

This comes from a plugin that inherits from the Leva panel styles.

[Sec-ant]

Thanks!

[Sec-ant]

@dbismut One more question, can I reference props in the styled function?

[dbismut]

This is a stitches specific question. You can using variants, this is explained in their docs.

[Sec-ant]

This is a stitches specific question. You can using variants, this is explained in their docs.

Wow, this is quick. Haven't heard about stiches before, thanks for the explanation, I'll check it.

[dbismut]

You can thank GitHub notifications 😂 you can have a look at Leva's own source code to see how variants are being used. Stitches is the best styling lib IMO, near zero runtime + theming + variables is an incredible combo.