CSS Variables TODO

[isglass]

• [ ] Make it easy to apply border-radius to panels, with or without headers, should end up correctly
• [ ] Make new light theme that is very light
• [ ] Make sure list checkboxes does not have transparent check marks
• [ ] List with checkbox should have symmetrical selection padding
• [ ] Hollow buttons
• [ ] https://github.com/bryntum/support/issues/7840
• [ ] A single variable for grid+header padding
• [ ] Ability to add horizontal "margin" spacing between grid cells
• [ ] All themeable values to be imported as CSS properties
• [ ] Add easy way to assign colors to icons "b-fa b-fa-triangle-exlcamation b-red" or similar
• [ ] Remove header background color of Popup/Tooltip in Calendar (compare scheduler "tooltips" demo)
• [ ] Setting task/event color should detect "our" colour vs literal colour using an injected colour list using ---bryntum-colors

A list of our defined colours should be injected into the CSS so as to be detectable in code:

---bryntum-colors : "red#ff8787,pink#f783ac";

Then to detect whether a string is a CSS literal, we can interrogate our colour list.

// Only pluck this once. Convert to an object which maps names to color literals
const colorDefinitions = getComputedStyle(element).getPropertyValue('--bryntum-colors').split(',');

Also, that would allow an EventColorPicker to populate its own store from the CSS instead of hard coding its colours.

[ExtAnimal]

See also https://github.com/bryntum/support/issues/574

[ExtAnimal]

we should make the .float-root use

display : grid; 
place-items : center;

And then have .b-centered use

position : static;
align-self : auto;

That way, they would just be centered by layout, without that top : 50%; left : 50%; transform : translate(-50%, -50%); hack. No visible difference, just cleaner modern CSS.

[chuckn0rris]

Requested themeable vals here https://forum.bryntum.com/viewtopic.php?f=51&t=28168&p=141563#p141563