Hello there!
As a developer of a custom SLDS-based theme for the Bryntum suite, I would like to have a simple and straightforward way of styling widgets without the need for defining too many custom rules with higher specificity selectors to "win" over the defaults.
In essence, it would be ideal if the "base" theme defined the stylesheet for all widgets and used CSS custom properties (variables) for every little aspect of the theme, and the "extension" themes would simply supply different values for the CSS properties without the need for additional rulesets.
The Task Board component took the first step in the right direction, but it still has a long way to go as there are plenty of hard-coded pixel, em, and other values that we wish we could just change in our theme with a simple variable tweak.
In essence, what we need is virtually any value used by the "base" theme to be customisable with a variable. Border colours, border radii, opacity, paddings, margins, flex/grid gap, min/max heights/widths, line heights, font sizes and weights, box shadows, outlines, positions, alignments, etc.
I understand this would be a huge undertaking and it won't be available "tomorrow", but we'd really appreciate it if you would at least consider evaluating this work some time in the future.
If implemented, this could potentially open support of native Shadow DOM ("base" theme inside the shadow root, but the "extension" theme loaded at the document level), simpler hot theme swap and dark mode switching, and even individual widget styling (display two widgets side by side, redefine CSS variables with different theme values on the host element for each widget individually, effectively displaying two distinct themes at once).
<style>
.b-theme-foo {
--b-widget-primary-color-rgb: 1, 2, 3;
--b-checkbox-checked-check-color: #abc;
--b-menu-background-color: #def;
--b-grid-header-background-color: pink;
--b-scheduler-event-color-red: red;
--b-calendar-border-color: grey;
--b-taskboard-font-size: 13pt;
}
.b-theme-bar {
--b-widget-primary-color-rgb: 3, 2, 1;
--b-checkbox-checked-check-color: #cba;
--b-menu-background-color: #fed;
--b-grid-header-background-color: sky;
--b-scheduler-event-color-red: crimson;
--b-calendar-border-color: black;
--b-taskboard-font-size: 15pt;
}
</style>
<div id="container-foo" class="b-theme-foo"></div>
<div id="container-bar" class="b-theme-bar"></div>
<script>
// Two differently styled widgets side by side!
const foo = new Grid({ appendTo: 'container-foo' });
const bar = new Grid({ appendTo: 'container-bar' });
</script>
