Custom themes and styles

[romanzy313]

Hello,

I would like to use spectrum web components to style my app, since developing custom UI components is a big chore.

I looked though the website and docs, I was not able to find guides on how to do custom styling. The modifications should go beyond theme colors.

For example, our design has very little roundness. Buttons and many interactive elements should have border-radius of 0. Also, we need to create custom themes, very similar to darkest, where the background is tinted in blue.

What would be the best way of deriving original styles without affecting the files provided by installed packages?

Thank you in advance

[Westbrook]

Hi @romanzy-1612 thanks for you question.

At current, while there are ways to customize the delivery of component within the Spectrum design system, it is not a goal of this project to surface those capabilities to you. I say "ways" specifically because they are not currently stable enough to document, and would be difficult to rely on long term in a project.

Our upstream partners at https://github.com/adobe/spectrum-css are working on a path towards making these capabilities reliable, but are not currently scheduled to complete shipment of this update until later this year. At that time, we will also adopt documentation for interacting with that level of customization, but I understand if that's not soon enough for you to leverage our elements in your work today.

If you're looking for something more immediate, I might suggest that you take a look at https://lion-web.netlify.app/ a white label component library that focuses specifically on customization APIs that I have seen successfully customized for a number of projects.

Hope this finds you well.

[romanzy313]

Thank you very much for your reply. Lion web looks like a very nice minimal starting point.