Advaita

Highly experimental theme, don't use in production. Advaita is a proof of concept for the Design System API and has a hard dependency on it. Both are pre-alpha: the token vocabulary, skins and markup will change between releases.

Advaita is a dual theme: one theme for both the admin pages and the site. It realises core's markup and a few components of its own once, on the Design System API contract, and carries no colours, sizes or typefaces of its own. Its looks are skins, bound per context: the site gets one skin, the admin pages (the chrome) another, and either can be swapped without touching the theme.

Advaita is Sanskrit for "not two". It is not GNOME's Adwaita theme, though the name is the same word.

What it shows

• A theme built only on contract tokens: swap the skin, and the whole site or the whole admin changes, with no theme code involved.
• Two design systems on one page: admin routes render in the chrome's skin, every other page in the site's, and core's Navigation, Toolbar and contextual links keep the chrome's look on site pages (with the Design System API's chrome submodule).
• Light and dark mode, more contrast and forced colours, from the skins, with mode and contrast selectors in the header.
• Accessibility checked by rule: every skin passes the contract's contrast rules in every mode (drush ds:check --bound), or declares where it departs and why.

Skins

Skin For Look advaita_atelier site Editorial: warm paper and ink, terracotta actions, Schibsted Grotesk with Fraunces headings, soft depth on cards. advaita_paper site Warm paper, a serif for headings, deep green actions. advaita_slate chrome A dense tool UI in the style of the Drupal Canvas editor (not affiliated): slate and blue, the system font, compact controls. advaita_canvas chrome Hairline edges, near-flat surfaces, compact controls, violet actions. advaita_indigo chrome Cool neutrals, Inter, indigo actions, Tabler icons. advaita_ember chrome Stone neutrals, Inter, burnt-orange actions, Phosphor icons.

Every skin has light and dark values. More skins can be made in the Design System API's UI, from a seed colour, and saved as config.

What the theme covers

• Page shells for the site and for admin routes.
• Core's buttons, fields, tabs and lists through the Design System API's patterns; dialogs, dropbuttons, tabledrag, vertical tabs and autocomplete restyled on contract tokens.
• Node, field, status messages, pager and breadcrumb templates.
• Components (SDC): badge, empty state, message, panel, stat, system card, timeline.

Requirements

• Drupal ^11.5 || ^12
• Design System API 1.0.x

Getting started

composer require 'drupal/advaita:^1.0@alpha'
drush theme:enable advaita
drush config:set system.theme default advaita
drush config:set system.theme admin advaita

drush ds:bind site advaita_atelier
drush ds:bind chrome advaita_slate
drush ds:check --bound

Advaita works as the default theme, the admin theme or both. Skins can also be bound under Appearance » Design system with the Design System API's UI submodule.

Third-party assets

Shipped unchanged, each with its licence text next to it: the fonts Inter, Fraunces, Public Sans, Schibsted Grotesk and Noto Sans Arabic (SIL Open Font License 1.1), and Tabler Icons and Phosphor Icons (MIT). advaita_slate's colour scales follow Radix Colors (MIT).

Feedback

This theme exists to test the Design System API's contract on a real theme. Reports of what breaks, what's hard and what's missing are the most useful contribution: in this issue queue for the theme, and in the Design System API's for the contract.