search

gradio-app / gradio

Build and share delightful machine learning apps, all in Python. 🌟 Star to support our work!
http://www.gradio.app
Apache License 2.0
32.51k stars 2.44k forks source link

Use human-readable CSS class names for better theming support #3545

Closed space-nuko closed 1 year ago

space-nuko commented 1 year ago

Is your feature request related to a problem? Please describe.
I've been using custom CSS to adjust some of Gradio's default style choices, however a lot of the styles have autogenerated Svelete class names and this makes them brittle in the face of version updates. Yet I'm forced to use them due to CSS specificity overriding my custom rules that omit the autogenerated names, or because there's simply no other class attached to the elements. For much easier theming I'd like those names to be human-readable

Describe the solution you'd like
Using Svelte's cssHash compiler option to give future-proofed class names to the Svelte components, instead of svelete-ab285f it becomes something like gr-dropdown-list-item-name

Additional context https://github.com/sveltejs/svelte/issues/570 https://github.com/sveltejs/svelte/issues/570#issuecomment-786590023

pngwn commented 1 year ago

The hashes are intentional and removing them would be counter productive. We do not version css class names or the DOM, so even if we did change how they are generated they could still easily break between non-major versions.

We have now added support for providing your own class names to components via the elem_classes parameter that every component supports, which is as close as we will get to directly supporting styling via css.