Modernise styling: CSS custom-property theming tokens and datatable ::part surface
next
## Motivation
Create user adjustable theming. At present, the light-DOM components rely on hardcoded colors and inline styles. Meanwhile, the shadow-DOM datatable doesn't expose any `part` attributes, which completely blocks developers from restyling internal structural elements through standard CSS channels. This task aims to improve this situation.
## Proposal
* **Introduce custom properties for theming:** Set up a central set of `--protvista-*` design tokens for all themable values. Inject these defaults once per page on `:where(:root)`. Because it has zero specificity, any custom styles the consumer writes will naturally win without a fight.
* **Clean up style injection:** Instead of managing `<style>` tags ad-hoc across different components, use a single, clean light-DOM injection helper. All hardcoded colors and inline layout styles will be swapped out for our new token variables.
* **Expose shadow-DOM elements:** add `part` attributes to the datatable's key pieces (like rows, headers, cells, and filters) so developers can easily style them using standard `::part` selectors.
* **Keep internal classes private:** The public theming contract will rely entirely on tokens and parts. The underlying internal class names will stay safe and private behind our `CSS_PREFIX` hash.
* **Lock it down with docs and tests:** document the new setup in `docs/theming.md` and lay out the architecture choices in `specs/styling-architecture.md`. Add unit tests to ensure our documentation, token defaults, and registry never drift out of sync.
## Out of Scope
* **Visual changes:** The token defaults will match our current look exactly. Out of the box, nobody will notice a difference.
* **Third-party styling:** Don't touching or trying to restyle the shadow internals of external Nightingale components here.
0 条评论