[3.0] Theme split (wave 4, part 25) — point the drop menu buttons at design tokens

[albertlast]

Description

Part of the #7933 split.

The main menu and the user menu share one set of rules in index.css, and they were the largest group of hard-coded colours left in the file — the level 1 button, its active and hover states, and the notification counts beside it. #main_menu, immediately below them, has been reading --mainmenu-* since wave 2, so this finishes that band.

  .dropmenu a.active, #top_info a.active {
- 	color: #fff;
- 	font-weight: bold;
- 	border-color: #f49a3a;
- 	background: linear-gradient(#ffae14, #f5a100);
- 	text-shadow: 0 0 2px #000;
+ 	color: var(--dropmenu-color_active);
+ 	font-weight: var(--dropmenu-font-weight_active);
+ 	border-color: var(--dropmenu-border-color_active);
+ 	background: var(--dropmenu-bg_active);
+ 	text-shadow: var(--dropmenu-text-shadow_active);
  }

20 tokens in a /** Drop Menu Buttons **/ group and 5 in /** Drop Menu Notification Counts **/, placed next to /** Main Menu **/ rather than at the end of the file, so this does not collide with #9443 or #9448.

Every token holds the value the rule has today, so nothing renders differently. Where theme-ref gives one of these a different value that is a restyle, and it was not taken — only its naming was, which is where the _active, _hover and _active_hover suffixes come from.

The border shorthands stay shorthands. Splitting them into longhands changes what they reset, and .dropmenu a.active deliberately overrides only the border-color of the shorthand above it.

Verification

Reading longhands off CSSRule.style proves nothing once a shorthand holds a var() — the CSSOM will not serialise it. So each rule's cssText was applied wholesale to a probe element, in cascade order, to reproduce the three states that cannot be triggered from a script, and a fixed list of 30 longhands read off the result:

chains	values	differences
7 (including li a → a.active → a.active:hover)	210	0

Plus the six real elements the rules actually match on the board index, 18 properties and the bounding rect each: 0 differences in 114 values.

One thing worth knowing for anyone repeating this: with minimize_files on, four of those values do differ, rgba(255, 255, 255, 0) → rgba(0, 0, 0, 0). That is SMF's CSS minifier rewriting the literal transparent, which it cannot do inside a var(); both are fully transparent and nothing renders differently. The numbers above were taken with minification off so that the comparison is of the stylesheets rather than of the minifier.

Issues References (Fixes|Related|Closes)

Related: #7933