Widget styling

[zerline]

Hi. Do we intend to extend the styling possibilities through the widgets_style.Style?

For instance, we (at sagemath) would like to have:

• text color
• borders
• background image

---- tiny brainstrorming ----
For a button, background-image could be called button_image. background as such could also exist and be called background (and not only for buttons).
---- end ----

Is there a reason to limit ourselves? Could we not just accept every CSS property when applicable, changing the name only for some of them?

[zerline]

For images, additionnally to URLs, we could also accept SVG strings and transform them to get the right syntax and optimization ..

[jasongrout]

Hi. Do we intend to extend the styling possibilities through the widgets_style.Style?

Yes. We've been extending things as users request them.

Is there a reason to limit ourselves? Could we not just accept every CSS property when applicable, changing the name only for some of them?

We used to have arbitrary CSS styling. However, essentially this makes the DOM structure part of the api, and the new styling system is an effort to put a level indirection between styling options and the DOM structure (so we can change the DOM structure now without breaking backwards compatibility). As such, each styling addition creates a maintenance burden on us to maintain. That's why we've been conservative and adding to the styles when there were specific requests for needs people actually had.

Note that the Layout provides many styling properties for the top-level DOM element, including borders. The Style system is primarily for styling elements inside the widget.

[zerline]

Thanks @jasongrout. I'll probably come back later with more precise requirements.

[zerline]

Sagemath on Jupyter users, and Sage Combinat Widgets/Sage Explorer users, would really like to be able to change display attributes programmatically, the simplest way possible .. like:

1. background color, text color etc ..
2. background image (arbitrary images)
3. single borders like border-right, border-left etc..
4. visibility

[zerline]

See also #2611