Improve Spreadsheet styling API #8143
Description
Describe your motivation
Spreadsheet has now Lumo theme, which helps styling to some extent as it is using the generic Lumo CSS custom properties. Hence e.g. color palette changes, general roundness, font-family etc. are applied to it as well. This reduces the need for customization already much.
However in some applications there further specific needs that would benefit from more pin-point API's to customize specific things in Spreadsheet.
Customizing filter and context menu's is not an issue, as those are not rendered in Shadow DOM and can be addressed with regular CSS.
Describe the solution you'd like
Main Spreadsheet is rendered in Shadow DOM, but it does not implement themable mixin as it is not JavaScript component based on Polymer or Lit. Thus Shadow DOM injection is not possible.
However the part names can be still augmented to key elements and it can be done in current code without introducing breaking changes.
I would propose adding part name to elements such as:
- Column header cell
- Row header cell
- Cell
- Cell input
- Formula input
- Tab
- Popup button (used in Filter tool)
- Button (the buttons to scroll tabs and adding tab)
- Freeze panels
Furthermore I would change current Lumo theme so that outer border color can be defined using --spreadsheet-border-color, using --lumo-contrast-20pct as default value (this way it wont be breaking change)
Describe alternatives you've considered
No response
Additional context
No response