admin4 tokens #

This page is for designers who style an administration page or an extension's admin view. Every color, size and spacing value in the admin comes from a CSS custom property --a4-*, defined in design/admin4/stylesheets/components.css (an identical copy lives in design/admin). The full table is in the admin styling guide, Admin styling, section "Tokens"; this page is the designer's summary.

Contents #

1. The groups
2. Light and dark
3. Using them
4. Adding one

The groups #

Light and dark #

Light values are on :root. Dark values are in one block:

html[data-a4-theme="dark"]:not(:where([data-a4-modes="light"])) {
  color-scheme: dark;
  --a4-ink: #e8ebf0;
  --a4-card: #1b212c;
  --a4-accent-text: #ff9a5c;
  /* ... */
}

A frame that is light only (the classic design) sets data-a4-modes="light" and keeps the light values.

Using them #

.a4-mymodule-summary {
  padding: var(--a4-space-3) var(--a4-space-4);
  border: 1px solid var(--a4-line);
  border-radius: var(--a4-radius-s);
  background: var(--a4-card);
  color: var(--a4-ink);
  font-size: var(--a4-text-s);
}

A length between two spacing steps takes the nearer step (the guide lists the mapping). z-index is always a --a4-z-* token; the test fails on any other number (0, 1 and -1 inside one component excepted).

Adding one #

Rarely needed: try the existing tokens first. If a new color token is necessary:

1. add it to :root and to the dark block, in the same change, with a contrast note;
2. add it to both copies of components.css (design/admin4 and design/admin, which must stay identical);
3. run the admin styling rules test.

Never add a local alias (--mymodule-bg: var(--a4-card)) or a second accent.

Related pages #

• admin4 components
• Design tokens
• Color contrast
• Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.