New CSS variable based themes

[isglass]

3 new themes are currently planned, with a light and dark version of each:

• Material3, which will as far as possible follow materials spec for v3 (Material3Light, Material3Dark)
• Stockholm, which will look somewhat similar to the current theme (StockholmLight, StockholmDark)
• Svalbard, which will be a minimalistic theme (SvalbardLight, SvalbardDark)
• Possibly one more

EDIT: Made 4, added "Visby" too

Each widget, feature etc. (Bryntum entity below) will import its own CSS (using import attributes, which currently only works in Chrome & probably Edge). This will enable "minimal" builds of themes. We will also supply pre-built "full" themes + thin CSS bundles similar to today.

CSS nesting will be used + color-mix or relative colors (color-mix has some performance issues, but relative colors is very new) to use variations of a primary color or a neutral color throughout. The primary color can be specified globally but overridden per element.

Each Bryntum entity will use CSS variables (custom properties) for the parts of their styling that we think will be relevant to adjust in different themes. Mainly colors, font-size, borders, paddings etc. The "fixed" parts will be plain CSS. CSS variables that share value in most themes will have a default value, to keep the themes thinner.

Each theme will only contain CSS variable assignments.

A new rendition concept will be introduced. Currently Buttons & Textfields (and similar fields) support it. Text fields has two renditions: "outlined" & "filled", matching what Material 3 offers. Buttons have more (also matching Material 3): "outlined", "tonal", "filled", "elevated" & "text". rendition can also be specified on a container, which applies it to any item that does not specify a rendition directly.

Todo:

• [ ] Need Sergey on:

  • [ ] Docs dist (fontawesome & fiddletheme.css)
  • [ ] Demo description extraction (extract.mjs)

• [ ] Check button contrast in all themes & renditions

• [x] Normalize xx-background & xx-background-color

• [x] Rename themes to lowercase

• [x] Revisit Mouseable for ripples etc

• [x] Reconsider --b-parent-background, see todo in code

• [x] Try fieldset + legend for outlined textfields border (seems not worth it)

• [ ] New things to style

  • [x] Tab close
  • [x] Tab reorder
  • [x] S-curve
  • [x] TickCells
  • [x] TreeSummary
  • [x] Docs browser
  • [x] Drawer
  • [x] RowEdit
  • [x] DayView transitions
  • [x] Split button
  • [x] Calendar tickRenderer
  • [ ] Single assignment resource combo in TaskBoard
  • [x] New HintFlow mask
  • [x] ChecklistFilterCombo

• [ ] Custom theme demos

  • [x] Grid
  • [x] Scheduler
  • [ ] SchedulerPro
  • [x] Gantt
  • [x] Calendar
  • [x] TaskBoard

• [ ] Test for:

  • [x] New transition system
  • [x] Renditions
  • [x] Slider label, steps
  • [x] DomSync beforeRemove
  • [x] Grid row removal / insertion
  • [x] Grid column collapse / expand
  • [x] Grid column show / hide
  • [x] Grid group collapse / expand
  • [x] Scheduler row removal / insertion
  • [x] Scheduler group collapse / expand
  • [x] Scheduler tree expand / collapse
  • [x] Scheduler vertical mode event removal / insertion
  • [x] Gantt tree expand / collapse
  • [x] Gantt row removal / insertion
  • [x] Plain / rich tooltips
  • [x] Outlined field label background in material (parentBackgroundColor detection)
  • [x] Event resize handle transition

• [x] Add CSS var docs:

  • [x] Core
  • [x] Grid
  • [x] Scheduler
  • [x] SchedulerPro
  • [x] Gantt
  • [x] Calendar
  • [x] TaskBoard

• [ ] Update framework demo styling

  • [ ] Grid Vue
    • [ ] basic-thin
    • [ ] multiple-products-thin
    • [ ] custom-theme
  • [ ] Grid React
    • [ ] basic-thin
    • [ ] custom-theme
    • [ ] multiple-products-thin
  • [ ] Grid Angular
    • [ ] basic-thin
    • [ ] custom-theme
    • [ ] multiple-products-thin
  • [ ] Scheduler Vue
  • [ ] Scheduler React
  • [ ] Scheduler Angular
  • [ ] SchedulerPro Vue
  • [ ] SchedulerPro React
  • [ ] SchedulerPro Angular
  • [ ] Gantt Vue
  • [ ] Gantt React
  • [ ] Gantt Angular
  • [ ] Calendar Vue
  • [ ] Calendar React
  • [ ] Calendar Angular
  • [ ] TaskBoard Vue
  • [ ] TaskBoard React
  • [ ] TaskBoard Angular

• [ ] Deprecate:

  • [x] animateRemovingRows
  • [x] animateCollapseExpand
  • [x] animateTreeNodeToggle
  • [ ] enableEventAnimations

• [ ] Address color-mix performance issues (flight dispatch demo). Either mix on event level, reduce shades, or try relative color syntax instead (very new though)

• [ ] Migration guide

• [ ] Update all guides & docs

  • [ ] New custom structural CSS from sources guide

• [x] Make it easy to apply border-radius to panels, with or without headers, should end up correctly

• [x] Make new light theme that is very light

• [x] Make sure list checkboxes does not have transparent check marks

• [x] List with checkbox should have symmetrical selection padding

• [x] 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

• [x] 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

• [x] Remove header background color of Popup/Tooltip in Calendar (compare scheduler "tooltips" demo)

• [x] Remove bg-color for check-column cells

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