enhancement
major
minor
major
minor
minor
#29550
React controls do not consume the theme's radius and surface tokens consistently; a flat theme needs per-component CSS overrides
Affects 8.0.0-alpha8 (tl-layout-react, tl-react-controls-css).
The problem
A theme declared in UIThemeService that extends default and sets
{{{#!xml <length name="corner-radius" value="0"/> <length name="border-radius-02" value="0"/> }}}
still renders rounded corners on the app bar, the sidebar and its items, panels, buttons, fields, windows, cards, the table view, tabs and split panels. To get a flat look the application has to add a stylesheet with
{{{#!css .tlAppBar, .tlSidebar, .tlSidebar__item, .tlPanel, .tlReactButton, .tlField, .tlWindow, .tlCard, .tlTableView, .tlTab, .tlSplitPanel { border-radius: 0; } }}}
which is a list of framework class names the application now depends on, and which silently misses every control added later.
The same holds for a handful of surface colours that have no token at all, so they can only be changed by class selector:
- sidebar background and its right border,
- panel background and border colour,
- window background and shadow,
- table header and cell grid-line colour.
The theme already defines layer-01, border-subtle, shadow-menu and the radius lengths; the controls just do not read them everywhere.
Suggested fix
- Audit tl-react-controls-css for hard-coded border-radius values and route each through the theme radius tokens (one token for controls, one for surfaces, as the two existing lengths suggest).
- Audit the same stylesheet for hard-coded backgrounds, borders and shadows on the containers named above and bind them to the existing colour tokens.
- Where a container has no fitting token, add one (sidebar-background, sidebar-border, table-grid-line) with a default that reproduces today's rendering, so existing themes do not change.
A quick check for the result: a theme with both radius lengths at 0 and all surface tokens set must produce the flat look without any application CSS.
Solution
An audit of the React stylesheets on master shows that the backgrounds and borders of sidebar, panel, window, app bar, card, tabs, split panel and the table grid lines are already bound to layer-01, layer-02 and border-subtle; no extra surface colour tokens are needed. The gaps were radii, shadows, backdrops and references to tokens no theme defines. Every stylesheet of the React UI now consumes a token as a plain var(--name) without fallback, so a token the theme lacks shows up instead of being papered over.
Radius tiers. The two radius tokens have a documented meaning and are applied consistently in every React stylesheet (tlReactControls.css, code editor, script editor, chart, WYSIWYG editor):
- corner-radius — controls: buttons, input fields, toggles, cells, small chips, handles, scrollbar thumbs.
- border-radius-02 — surfaces: panels, cards, windows, menus, popups, tooltips, dashboard tiles, form groups.
Input fields moved from the surface tier to the control tier (default radius .5rem → .25rem). Circles (50%) and pills (999px) are shapes, not corner styling, and stay literal, so a badge stays a pill in a flat theme.
Elevation and overlay tokens. Next to the existing shadow-menu (popups, flyouts, dropdowns, tooltips) the default theme defines shadow-raised (elevated app bar and cards, frozen table columns), shadow-dialog (windows, drawers, snackbars) and overlay (dialog and sidebar backdrops). Their defaults reproduce the previous rendering of the main surface of each tier. Every hard-coded shadow and scrim is bound to one of these; focus rings and inset button frames are not elevation and keep their values.
Dangling token references. var() references to tokens no theme defined (--field-01, --border-radius, --border-radius-sm, --border-subtle-00, --color-primary, --layer-accent-01, the chart's --surface* / --error-color, the WYSIWYG editor's --tl-* properties) are repointed to existing tokens; font-family-mono and heading-03-font-size are added to the default theme with the previous fallback as their value. The dashboard tile uses border-subtle / layer-01 instead of the alias tokens.
Test. test.com.top_logic.layout.react.theme.ThemeTokenAudit (tl-layout-react test-jar) loads the shipped theme configuration and a stylesheet and reports every var() reference to an undefined token and every literal border-radius other than the shape values. AbstractStylesheetTokenTest runs it over the sheets a subclass lists; tl-layout-react, tl-layout-react-codeedit, tl-layout-react-chartjs, tl-model-search-react, tl-layout-react-wysiwyg and tl-react-flow-server each audit their own sheets. The contract is documented in docs/faq/react-theme-tokens.md.
Demo. The React demo application (tl-demo-react) defines a flat theme (extends default, both radii 0, all three shadows none) selectable in the user menu; under it every React control renders with radius 0 and no elevation shadow without any application CSS.