Theme configurator

Source: MMO\client\ThemeConfigurator over MMO\client\controllers\ThemeController, on src/styles/tokens.scs and src/styles/dark.scs — 0 values, read from those files while this page was rendered.

The theme is written in Simple CSS, so what can be customised is not a list someone maintains: it is every value the token sources declare. The configurator parses them, shows each one with the expression it is written with, and writes the whole layer back as .scs when you apply.

What a change implies Every keystroke compiles the candidate theme on the server, and the answer carries the css and the value of every token under it. So the panel can show three things at once: the sample — the real components, painted by that compilation; the rows that followed your change without being touched, marked apart from the ones you edited and counted next to the buttons; and, with Live off, the theme that is saved, so the two can be compared. Nothing of this is written: preview compiles, it does not save.
Expressions, not swatches A row that reads $palette.n50 is a token derived from the neutral ramp, and it stays derived: move brand.s500 in the Tokens tab and every token built on the brand moves with it, because the generated file keeps the expression the source was written with. Only the rows you type in become literals. Anything an .scs value may be can be typed in a row — a colour, a length, a function, a reference to another map.

How it is wired

Three files, and one line of stylesheet:

WhatWhereWritten by
the configuration /homepages/38/d520689115/htdocs/mmoframework.fr/www/releases/3.1.4/demo/configs/theme.json ThemeConfigurator
the generated theme /homepages/38/d520689115/htdocs/mmoframework.fr/www/releases/3.1.4/demo/www/styles/theme.config.scs ThemeConfigurator
the stylesheet that imports it styles/demo.scs you, once
@import "styles.scs" as self; /* ... the application's own rules ... */ /* last: the generated token layer is the one that reaches `:root` */ @import "theme.config.scs";

The generated file is the token sources printed back with the changed values substituted into them, so it declares the same @let maps and the same @theme block. Coming after everything else, its :root rule and its dark theme rules win. Nothing in the rest of the stylesheet has to know: a component reads $color.brand, which is var(--mmo-color-brand) either way.

Apply is a build step Applying writes two files of the project and recompiles the application's stylesheet, which is why ThemeController answers 403 outside of development unless the application says otherwise. Preview writes nothing: it compiles the candidate theme and hands back its css, which the element hangs in this document's head.

See Design system · Tokens for what each of these values paints, and Simple CSS · The language for what may be written in a row.

A theme's tokens only paint their own half of it, so the sample carries a light/dark switch: editing the dark map while the page is light changes nothing anyone can see. It goes through the shell's own setThemeMode, so the switch in the rail stays in step.

The theme

not configurable here This application either did not register MMO\client\controllers\ThemeController or left MMO\client\ThemeConfigurator disabled, so there is nothing to write to.