[3.0] Theme split (wave 5, part 3) — let the colour mode reach the post editor

[albertlast]

Description

With dark mode on, the post editor stayed a light grey island in the middle of a dark page — its stylesheet had never been tokenised, so nothing could reach it. This gives jquery.sceditor.css tokens for all twenty-four of its colours and a dark value for each. It now has no literal colour left.

One of them is not a colour

Every toolbar icon is cut from a single raster sprite, images/icons/editor_sprite.png, so none of them can be recoloured the way an icon font or an SVG could — and in dark mode the near-black line art all but disappeared.

A filter is the only lever a colour mode has over a raster, so the sprite gets one: --editor-icon-filter, none here and an inversion in dark mode. The sprite is mixed — most icons are line art, but a few carry their own colour, the YouTube mark among them — so the inversion is paired with a hue rotation. The greys have no hue to rotate and simply invert; the coloured ones come back roughly where they started.

Keeping it as a token is what lets dark.css stay what it claims to be: a file that overrides tokens and restates no rules.

Only the chrome is in scope

The surface you actually type on is an iframe with its own document, and Editor.php:846 hands it jquery.sceditor.default.css as its single stylesheet. No token is in scope inside that document, so tokenising that file would leave every var() unresolved and break the light theme too. Feeding the iframe the tokens is a change to how the editor is given its stylesheets, and belongs on its own.

Worth knowing how much that leaves: the rich surface is only shown to members who have turned it on — rich_active needs the wysiwyg_default option, which is off by default — so what everybody sees first is the source view, an ordinary textarea on the page itself, which already follows the mode correctly.

Verification

Light mode is unchanged. Computed color, background-color, background-image, all four border colours, box-shadow, outline-color, text-shadow, filter and fill for every element over six pages, on this branch and on its parent, captured back to back so forum state could not drift:

records: 2183
LIGHT-MODE DIFFERENCES: 0

(Done twice — once for the first twenty tokens, once for the four a property-name regex had missed.)

Stacked on #9497 (wave 5, part 2, dark mode), which is itself stacked on #9496 (part 1). Without part 2 there is no dark mode for these tokens to have a second value in.

Part 3 of wave 5 of the #7933 split.

Issues References (Fixes|Related|Closes)

Related #7933

[jdarwood007]

Can you rebase this, so I can figure out what I need to check and test?