UI Suite Monthly #38 — Design Tokens Land in Core, a Storybook for Drupal, and the Last Beta Before RC

Our 38th monthly UI Suite meeting (September 17, 2026) was the first one back after the traditional August break — and we kept the 30-minute format introduced in July. Pierre's opening instruction set the tone: "let's focus on the essential, and let's do demos more than just talking." Which is exactly what happened: four demos, one big core announcement, and a full agenda that still fit inside half an hour. So full, in fact, that two items got pushed to next month.

Overall Summary

This month was about things landing. After a year of pushing, Florent announced that a Design Tokens API is now in Drupal core — the second of the big APIs we've been carrying toward core, after SDC improvements. Pierre's take: we're halfway through the core initiative, with three tasks left.

Jean, who spent August "working on multiple projects while other people were at the beach", delivered on three fronts: UI Icons 2.0 shipped, Display Builder went from Beta 5 to Beta 7 with the UX refresh previewed in July now fully landed, and the recipes got a refresh. Mikael reported on the Summer of UI Patterns — 19 contributors, three releases, a CKEditor 5 submodule, a Views display extender, and a component form that loads 5 to 10 times faster. And Steffen gave us the first look at UI Patterns Library Plus, a Storybook-like revamp of the component library built on declarative shadow DOM.

A few quick highlights before we dive in:

• Design Tokens API is merged into Drupal core's 12.0.x and 11.5.x branches, ready for both releases. Low-level for now; features will come through UI Skins first, then be backported.
• Three core tasks remain: the Style API, an icon form element, and JSON Schema references for SDC. The Style API has found a second customer — core's light/dark mode ticket, targeting 12.1.
• UI Icons 2.0 is out, at roughly 9,000 usages — the most-used module in the suite. 1.1 will be deprecated towards the end of the year.
• Display Builder Beta 7 brings a real iframe preview, an instance switcher, a rewritten navigator, and a live AI assistant island. Beta 8 should be the last beta before RC.
• UI Patterns: CKEditor 5 integration, a Views display extender, SDC slot constraints, and a 5–10× faster component form landing in the coming days.
• UI Patterns Library Plus: search, filters, props playground, copy-paste usage — and multiple themes on one page thanks to declarative shadow DOM.

Key Topics Discussed

Design Tokens in core — halfway through the roadmap

Florent opened with the announcement we've been waiting for: a Design Tokens API is now in Drupal core. It was merged into the 12.0.x branch about ten days before the meeting and backported to 11.5.x the Sunday before — so the work is done and sitting in both branches, ready to ship the day Drupal 11.5 and 12.0 are released.

He was candid about the scope. What's in core today is a very low-level API: it declares the design token formats and provides config entities. The features will be layered on in minor core releases — and, faster than that, through UI Skins.

How it works, in short:

• Tokens are declared in a YAML format that translates to CSS custom properties, usable by your design system or any other CSS.
• That gives you a full front-end workflow: designers work in Figma or Penpot, export their tokens, and front-end developers pick them up in CSS.
• Drupal detects the tokens as plugins through a plugin manager, and the config entities let you override token values live, directly on your site.

The plan for UI Skins is to switch its own design tokens handling onto this new core API, then build the missing pieces on top — admin forms for the config entities, validation, serialization to inline CSS — so they can be proven in contrib and quickly backported to core.

Pierre put the announcement in context. The core initiative started a year ago; a lot of SDC work has moved, and now the Design Tokens API has moved. Three tasks remain:

• The Style API — the last big API for styling.
• An icon form element, so the ecosystem around the core Icon API can use a proper form element. Deeply inspired by UI Icons, of course.
• JSON Schema references in SDC, to improve compatibility across all the SDC-based modules in contrib.

And a nice surprise on the Style API: there's now a core ticket to make light and dark mode a first-class citizen of core — selectable at theme level and at user level — and the team is struggling with the implementation. The style utility we're proposing should help make it more generic. Target: 12.1. More on that in a few months.

UI Icons 2 — 9,000 sites and counting

Jean's August started with UI Icons 2.0. The version bump let him clean house: the backport and legacy Iconify submodules are gone, as is UI Patterns 1 support, and all new features now land on 2.x only. Requirements moved accordingly — Drupal 11.3 or 12.

What's new:

• CKEditor 5 inline editing — you can now edit an existing icon from the toolbar rather than only inserting one. A feature Jean "never did and never had time for", contributed by the community.
• Drupal Canvas integration, not fully ready yet because of a schema issue, but a proper integration is coming.
• A full Playwright end-to-end test suite, replacing the old FunctionalJavascript coverage — the same switch Display Builder is making, and "it's working pretty well".
• UX improvements to the icon field, thanks to yannickoo and other contributors. Jean was especially happy to see discussion on the field UX in parallel with the core API, since the core icon field will stay fairly limited and UI Icons will continue to offer more.

The usage graph is the good news: around 9,000 usages and growing, which likely makes UI Icons the most-used module in the suite. Jean won't force anyone to move yet, but he made it clear on the project page: no more backports from 2 to 1.1, and towards the end of the year 1.1 will be formally deprecated. Time to plan the switch.

Display Builder — Beta 6, Beta 7, and the biggest monthly jump yet

Two releases since we last met, and the UX refresh Jean previewed in July is now fully landed. Pierre's verdict at the end: "one of the biggest jumps from monthly to monthly we got."

The recipes were updated to match. A reminder for newcomers: the Bootstrap recipe is the most polished starting point — a fully configured Display Builder site out of the box. DSFR is more niche and in progress, and Jean would love someone to pick up Daisy UI. There's also a new base recipe called Display Builder CMS — "no relation to Drupal CMS at all, except that it's a better version, with Display Builder instead of any other builder."

Then the demo, on the Bootstrap recipe:

• Instance list — switch between any page layout or entity display you've built directly from inside the builder, without going back to the list page. Shortcuts to settings and to the list are right there too.
• Status icons — see at a glance what's published, what isn't, and what's empty.
• A real preview, in an iframe, with viewport switching and zoom. "Every other builder is doing that — but we weren't doing it so nicely."
• Parent access — from any component, see the tree and jump to its parents.
• A new navigator with menu access, better highlighting, and drag-and-drop directly in the tree.
• History and undo directly in the toolbar.
• Scaffold utilities — see the styles and configuration applied to an element without opening the sidebar.
• Views integration, properly done. For Views areas that carry configuration, the builder now exposes the configuration form and previews the result live. Plugins dropped into areas still get a link rather than a form, since their forms can't be exposed — but the Views part, "which was a bit weak", is now a real integration.

And then the one everyone had been waiting for: an AI assistant island, running live inside the builder. Jean asked it to add a card between the main content and the messages region, and it did — manipulating the display directly through the same islands the UI uses. It builds on Rajab's work, replugged into the latest Display Builder architecture. Jean was honest about the limits of the demo: he ran out of tokens on the big providers and fell back on a smaller one, so more testing is needed. Note that the assistant lives in the Display Builder AI module, not in Display Builder itself; it will be bundled into the recipes, which Jean sees as the right way to ship module-plus-submodule solutions "without the pain of a profile".

What's next — Beta 8. The goals:

• Review of translation.
• Pattern presets as first-class citizens. Presets already exist and are buildable inside the builder; now they need to become friendly enough to serve as starting points — a "component of components" you reach for when a single component isn't enough.
• Smaller, targeted AI assistants for the things the builder can't do itself: creating a component, creating a preset.
• UX work on nesting. Because Display Builder sits directly on Drupal's APIs — a page layout containing an entity containing a referenced entity's display — the building experience can get complex. That's by design, and it's the main UX challenge the team is working on.
• Documentation, already substantially updated: a step-by-step process, how to build your first display, how to create your own homepage. Feedback welcome — and if you want to point your own AI tokens at improving the docs, Jean is more than happy for you to do so.

Barring surprises, Beta 8 should be the last beta before RC, followed by consolidation, bug fixes, recipes, UX and docs. Pierre's hope: "next time we will announce RC, or upcoming RC."

Summer of UI Patterns — 19 contributors, three releases

Mikael's update covered a productive summer for UI Patterns: old tickets and new ones tackled together, 19 contributors credited (and more who helped along the way), and three intermediary releases.

• Early August — a big update on translation, plus Drupal 12 compatibility. A nice milestone.
• During August — a lot of changes and the new CKEditor 5 submodule. "We've been waiting for it for almost one year."
• A few weeks later — the Views display extender.

On CKEditor 5: you get the classic component form inside the editor, but you can tune the experience — restrict which components are available, and, through the UI Patterns UI, set default values and available sources per component. The point is to simplify forms for a different audience: component forms are built for site builders, but inside CKEditor you're talking to editors, so the forms should stay editor-friendly.

On the Views display extender: you can now declare that the output of a view is a component, and place the different Views areas — header, footer, rows — into its slots. No preprocessing, no Twig template tweaks. Rows only, grids, any combination across the layers of Views rendering. Pierre pointed out the nice back-and-forth here: Display Builder borrowed part of the UI Patterns API for this, and UI Patterns then took the source logic initiated on the Display Builder side. The rule of thumb stays the same: for a complex view, switch to Display Builder and its WYSIWYG experience; for a simple one, UI Patterns is enough.

Two more things landed:

• SDC slot constraints. UI Patterns now honors the properties that suggest which components belong inside a slot — think of the French Design System's link group, which should only contain links — and the maximum number of items. Minimum isn't implemented (as discussed on the issue), but it's already a useful intermediate step.
• A completely revised component form. The number one complaint was slowness on forms with many fields and sources. The new form no longer loads every source for every prop in every context up front. The slide says 2× faster; Mikael thinks it's more like 5× to 10× depending on context, and it comes with a new UI to match. It's in the dev branch now and will be released in the coming days — please test it.

The CKEditor 5 demo was cut for time. It's first on the agenda next month.

UI Patterns Library Plus — a Storybook for your Drupal components

Steffen Rühlmann presented UI Patterns Library Plus, sponsored by undpaul. The premise is simple: the standard component library is "not so nice" — a long page to scroll through, no search, no way to get a feel for a component at a glance. So he took the templates and built something new.

What you get:

• A search bar and category filters.
• A Storybook-like single-component view: play with the props live, browse the stories and variants, and see an overview of all slots and properties.
• A Usage tab that is basically copy-and-paste: grab the snippet, drop it in your template, take it from there.

The technical highlight is declarative shadow DOM. Components are rendered without iframes, each in its own DOM, loading only the styles it needs. The consequence is delightful: you can mix several themes on one page. In the demo, the global library rendered a component from the testing theme next to one from the USWDS theme, each styled by its own theme. It also fixes the layout artefacts you get with the default rendering — no more cards shrinking into each other. Shadow DOM is baseline in all browsers now, so there's nothing to worry about on that front.

Advanced settings round it out: dark mode toggle, a preview height override for components like breadcrumbs that need more room, and a renderer override — because declarative shadow DOM can't run standard Drupal behaviors, JavaScript-heavy components can fall back to an iframe renderer while everything else stays in shadow DOM.

Pierre's reaction: shadow DOM is "the future for libraries, and for preview systems". The two had already talked about moving the shadow DOM declaration into the main UI Patterns module; Pierre owes Steffen a ticket, and Display Builder has some related work in a branch to share. Steffen can't make it to Rotterdam, so they'll pick this up right after the camp.

Deferred to next month

Half an hour is half an hour. Two items were explicitly pushed to the October 29 meeting: Mikael's CKEditor 5 demo, and a recent UI Suite DSFR release.

Key Action Points

A concrete list this month, and — for once — most of it is on our side.

• Pierre — Write the ticket for moving the declarative shadow DOM declaration from UI Patterns Library Plus into the main UI Patterns module. Overdue by his own admission.
• Pierre & Steffen — After the Rotterdam camp, coordinate on that integration and on sharing the related Display Builder work sitting in a branch.
• Mikael — Ship the new component form release in the coming days, then demo the CKEditor 5 submodule and the recent UI Patterns improvements next month.
• Jean — Move Display Builder to Beta 8: translation review, pattern presets as first-class citizens, targeted AI assistants, nesting UX. Formalize the UI Icons 1.1 deprecation towards the end of the year.
• Florent & the core team — Migrate UI Skins onto the new core Design Tokens API, and build the admin forms and validation there for later backport. Keep pushing the three remaining core tasks: Style API, icon form element, JSON Schema references.
• Everyone — Test the new UI Patterns component form as soon as it's tagged. Review the updated Display Builder documentation and say what's unclear or missing. Upgrade to UI Icons 2 before 1.1 is deprecated. And if you fancy owning the Daisy UI recipe, Jean is waiting for you.

Want to get involved? The Slack channel is still growing, the issue queues are open, and — as Jean put it — "if people have a bit of time to review the documentation, I'm always happy to have feedback."

Upcoming Deadlines / Releases

See you on October 29. In the meantime: upgrade to UI Icons 2, take Beta 7 for a spin, test the new UI Patterns component form the moment it's tagged — and go play with UI Patterns Library Plus. That one's worth five minutes of your afternoon.