Skip to content

[3.0] Theme split (wave 4, part 26) — point the drop menu submenus at design tokens - #9468

Merged
live627 merged 2 commits into
SimpleMachines:release-3.0from
albertlast:3.0/theme-submenu-tokens
Aug 10, 2026
Merged

[3.0] Theme split (wave 4, part 26) — point the drop menu submenus at design tokens#9468
live627 merged 2 commits into
SimpleMachines:release-3.0from
albertlast:3.0/theme-submenu-tokens

Conversation

@albertlast

Copy link
Copy Markdown
Collaborator

Description

Part of the #7933 split, and the other half of #9467. That one did the level 1 buttons; this does the level 2 and 3 submenu wrapper, the items inside it, and their hover state — the rest of the hard-coded colours in the drop menu rules.

20 tokens in /** Drop Menu Submenus **/ and /** Drop Menu Submenu Items **/. Every token holds the value the rule has today, so nothing renders differently.

The wrapper deliberately sets a border and then overrides the left and top edges with lighter colours:

border: var(--submenu-border-style) var(--submenu-border-width) var(--submenu-border-color);
border-left: var(--submenu-border-style) var(--submenu-border-width) var(--submenu-border-color_left);
border-top: var(--submenu-border-style) var(--submenu-border-width) var(--submenu-border-color_top);

so those edges keep their own tokens rather than being flattened, and all three stay shorthands. .dropmenu li li a:hover does the same thing and is treated the same way.

Verification

0 differences, by two independent methods:

  • Real DOM: a ul.dropmenu > li > ul > li > a built on the board index, 5 elements, 32 computed longhands each — 160 values, 0 differences.
  • Raw source: index.css fetched over HTTP and its rule bodies applied to a probe in cascade order, to reach the :hover states a script cannot trigger — 160 values, 0 differences.

The second method exists because of a trap worth flagging for anyone reviewing this kind of change. Reading rule text back out of CSSRule.style.cssText and replaying it cannot round-trip a border shorthand that holds a var() and is then overridden on one edge. Doing it that way reported 21 confident-looking differences here — right and bottom borders collapsing to 0px none currentColor — none of which are real. The rule text has to come from the file, or the measurement has to be taken on a real element.

This touches variables.css at the same place as #9467, so whichever lands second needs a trivial rebase. Both insert next to /** Main Menu **/ rather than at the end of the file, so neither collides with #9443 or #9448.

Issues References (Fixes|Related|Closes)

Related: #7933, #9467

Follows the level 1 buttons: the level 2 and 3 submenu wrapper, the items
inside it and their hover state were the rest of the hard-coded colours in
the drop menu rules.

Every token holds the value the rule has today, so nothing renders
differently. The wrapper deliberately sets a border and then overrides the
left and top edges with lighter colours, so those keep their own tokens
rather than being flattened, and all three stay shorthands.

Signed-off-by: Mathias Albert <mathiaspapealbert@hotmail.com>
Signed-off-by: albertlast <mathiaspapealbert@hotmail.com>
…enu-tokens

Signed-off-by: albertlast <mathiaspapealbert@hotmail.com>

# Conflicts:
#	Themes/default/css/variables.css
@live627
live627 merged commit a1725a2 into SimpleMachines:release-3.0 Aug 10, 2026
4 checks passed
@jdarwood007 jdarwood007 added this to the 3.0 Alpha 5 milestone Aug 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants