Design tokens

Source: src/styles/tokens.scs and src/styles/dark.scs, compiled by MMO\client\SCSCompiler while this page was rendered — every table below is what the compiler really declared, not a copy of it.

tokens.scs did not compile cannot find the scs file [/homepages/38/d520689115/htdocs/mmoframework.fr/www/releases/3.1.4/src/styles/tokens.scs].

Two layers. The compile-time maps ($palette, $brand, $hues, $viz) are raw values, never emitted — they exist so lighten() and mix() have real colours to work on. The @theme block below them is the semantic layer, emitted as --mmo-* custom properties on :root. Components only ever reference the semantic layer, which is what makes a reskin one file.

Three ways in $color.brand in any .scs file — document stylesheet or shadow root.
var(--mmo-color-brand) in hand written css, or in a page's style attribute.
SCSCompiler::Shared()->compileFile(…)->themes() in php, which is how this page is built.

A shadow root never sees the document's css, but it does inherit its custom properties: the document declares the tokens once and an element only references them. That is the whole point of the split — see For elements.

Colour

Grounds run from the furthest back to the closest to the reader (bg, surface, surface-2, surface-3); line separates and line-strong encloses; text runs from primary to the faintest still-legible step. The swatches are painted with the custom property, so they follow the theme switch in the rail.

In scs	In css	Light	Dark

Space

A 4px grid. md is the default gap between related things, xl between sections.

In scs	In css	Light	Dark

Radius

In scs	In css	Light	Dark

Type

The steps are close at the bottom, where interface density lives, and open up at the top, where the editorial sizes are.

In scs	In css	Light	Dark

Families

Three roles: the interface face, the display face for headings, and the serif that carries a long article. All three degrade to a real system stack, so a page works before the webfont lands.

In scs	In css	Light	Dark

Weights and line heights

In scs	In css	Light	Dark

In scs	In css	Light	Dark

Elevation

Elevation is layered, never a single blur: a tight contact shadow plus a soft ambient one. It is spent only where an object genuinely floats above the page — a popover, a drawer, a toast.

In scs	In css	Light	Dark

Motion

Three durations and one easing curve. Everything that moves in the system moves with these, and all of it is cut to nothing under prefers-reduced-motion.

In scs	In css	Light	Dark

Stacking

The layers, in the order they stack. A component never invents a z-index: it takes the one that names what it is.

In scs	In css	Light	Dark

Layout

The structural sizes the application shell and the page templates share — the control height every button, input and select lands on, the rail and panel widths, the content and prose measures.

In scs	In css	Light	Dark

Reskinning

One map, usually one line. Everything else — buttons, links, focus rings, charts, the active menu item, the dark theme — is expressed in terms of $color.brand and friends, so it follows.

// src/styles/tokens.scs @let $brand = (s50: #EEF3FF, s100: #DCE6FF, s200: #BBCDFF, s300: #8FAAFB, s400: #5E83F6, s500: #2F62F0, s600: #1F4BD8, s700: #1A3CAF, s800: #1B368A);

The dark theme is written from a single map in dark.scs, emitted twice: once under [data-theme="dark"], once inside @media (prefers-color-scheme: dark) guarded by :not([data-theme="light"]). That covers the three states a viewer can be in — explicit dark, explicit light, and the default where only the operating system has an opinion. The 0 tokens it overrides are the ones marked in the Dark column above.