Music: dim pack dialog alternate rows

[breville]

[written by Claude]

Every other row in the track picker was the same color as the dialog around it, so the list lost its edge and read as one flat surface. This puts the alternate rows back below the chrome, the way they sat before the rebrand.

Fast-follow for #73649 (comment).

Before

After

How

Alternate rows now use --background-neutral-alpha-5, a 5% white wash over the list background, instead of --background-neutral-secondary, which is the dialog's own surface color.

The three surfaces used to be #292F36 list, #363E48 row, #424D59 chrome — the row was the exact midpoint of the other two. In dark theme the wash composites to #1e1e1e, between the list's #121212 and the chrome's #282b2f, landing within a couple of levels of that old midpoint.

This avoids color-mix(), which starts at Chrome 111 and Safari iOS 16.2, both above our floor. It also avoids a half-opacity ::before overlay, which works but leans on z-index to get the color right.

One for @moshebaricdo

The wash comes out neutral, and the chrome is faintly cool — #282b2f runs 7 levels blue, where #1e1e1e runs zero. Ideally the rows would sit in the same family as the chrome.

That isn't reachable today: in dark theme the alpha tokens are all white, and the list background under them, --neutral-base-black #121212, is the one step in the ramp with no tint, so any wash lands neutral. A cool result needs a cool color at partial alpha, which CSS can't do without color-mix() or rgb(from …) — both above our browser floor.

The underlying gap is that nothing lives between #121212 and #282b2f. A step in there would be cool by construction and would serve dark-theme striping anywhere, not just this dialog. Happy to file that separately if it's worth doing — the wash is a fine placeholder until then.

Testing

Loaded the track picker locally and sampled the rendered pixels: list #121212, alternate row #1e1e1e, chrome #282b2f. The token resolves under every brand — brandLegacyShim.css defines it for code and codeai, mapping to --neutral-white-alpha-5 in dark theme.

[moshebaricdo]

This is a great solution! Our new grayscale is generally warmer, so this meshes nicely and doesn't require adding an edge-case step between 95 and 100. This variable would also invert in a theoretical Music Lab light mode and would be a faint gray, lighter than background-neutral-secondary.