[3.0] Theme split (wave 6, part 2) — reach the last colours the colour mode could not

[albertlast]

Description

Two kinds of value were still out of the dark mode's reach, and neither was visible to the sweep that tokenised the rest of the theme.

A border written as a shorthand

That sweep matched border and border-*-color, so a border-bottom: 1px solid #bbb went straight past it. Seventeen were left, across index.css, attachments.css, responsive.css, profile.css and the two right-to-left sheets:

#inner_wrap	the hairline under the header
.list_posts	the rule above a post list
#post_draft_options	the draft panel's left edge and its row separators
.errorfile_table td.current	the highlighted line in the error file viewer
#postAttachment	the dotted rule between attachment previews
#attachment_upload.dz-drag-hover	the drop zone's hover outline
#mobile_action .notify_dropdown a	the mobile notification list
.up_contain .lastpost	the board index's last-post block
.buttonrow, table.weeklist	the RTL button row and week grid separators

Each is now a token holding the literal it replaced.

A token that was never declared

This one is subtler. atwho.css writes every one of its nineteen custom properties with a fallback — var(--mentions-bg, #fff) — so the mentions list has never looked wrong and nothing flagged it. But a token that is never declared cannot be overridden either, which is exactly what kept that list white in dark mode.

Declaring them, each from the fallback it is written with, is the whole fix. atwho.css itself is untouched, so it still works if a theme drops variables.css — the fallbacks stay as the safety net they were written to be.

The one literal deliberately left anywhere is the diagonal stripe over a progress bar's fill, which is a translucent white texture rather than a colour. Excluding variables.css and dark.css, which are where literals belong, and the standalone installer/maintenance/report pages and the editor iframe sheet, which no colour mode reaches, the theme's stylesheets now hold exactly one literal colour between them.

Verification

Computed colours, border widths and styles, shadows, sizes, weights and radii for every element over fourteen pages, before and after:

baseline records: 4473
after    records: 4473
LIGHT-MODE DIFFERENCES: 0

And the same properties now actually move in dark mode rather than staying light:

	light	dark
#inner_wrap bottom border	rgb(187, 187, 187)	rgb(58, 67, 74)
#detailedinfo dl bottom border	rgb(204, 204, 204)	rgb(58, 67, 74)
--mentions-bg	#fff	hsl(207, 14%, 19%)
--mentions-item-color	hsl(0, 0%, 20%)	hsl(207, 10%, 84%)

Stacked on #9547 (wave 6, part 1), because profile.css is one of the files it corrects.

Part 2 of wave 6 of the #7933 split.

Issues References (Fixes|Related|Closes)

Related #7933

[jdarwood007]

Will review this after part 1 merges and we rebase this to show the actual changes.

[albertlast]

Rebased onto release-3.0 now that part 1 is in, so the diff is just this change:

+83 / -18 across 8 files, one commit

file
variables.css	+42/-0 — the tokens being declared
dark.css	+23/-0 — their dark values
index.css	+7/-7
calendar.rtl.css	+4/-4
attachments.css	+3/-3
responsive.css	+2/-2
profile.css, rtl.css	+1/-1 each

Every one of the -18 is a literal being replaced by the token that now holds it, so the two additive files are the whole substance and the rest is the swap.

Nothing else moved. The only thing merged into release-3.0 between part 1 and this rebase is the Docker environment, which touches no theme file, so the before-and-after numbers in the description still stand as measured: 4473 elements over fourteen pages, no difference in light mode.