[rebrand] Hold Bootstrap button brand colors on compound states (RE-177)

[levadadenys]

Before:

After:

Problem

RE-177 reported the levelgroup submit button's pending state as still orange. It is, and so are three sibling states on every .btn-primary in dashboard.

Bootstrap's button-variant mixin bakes the Sass $background a variant was generated from into two nested blocks whose selectors are specificity 0,3,0:

&:active, &.active, .open > &.dropdown-toggle {
  &:hover, &:focus, &.focus { background-color: darken($background, 17%); }
}
&.disabled, &[disabled], fieldset[disabled] & {
  &:hover, &:focus, &.focus { background-color: $background; }
}

The rebrand's .btn-primary / .btn-success overrides are flat &:hover / &:active rules at 0,2,0, so they lose to both. $btn-primary-bg is still $orange.

Every one of these states needs the pointer, focus, or the disabled attribute on the button, so none of them shows at rest — which is why they survived the rebrand sweep and why they are easy to miss when checking in devtools without a hover.

Fix

One file. Mirror the mixin's own selector shape so the specificity ties and source order decides. Both blocks live in a single themable-button-states mixin taking keyword arguments, so a variant cannot be half migrated:

@include themable-button-states(
  $default: var(--background-brand-purple-primary),
  $default-border: var(--borders-brand-purple-primary),
  $strong: var(--background-brand-purple-strong, #{$dark_purple}),
  $strong-border: var(--borders-brand-purple-strong, #{$dark_purple})
);

.btn-success had the same latent bug, reverting to stock Bootstrap rgb(92,184,92) instead of our rgb(37,136,48).

Verification

Measured with CSS.forcePseudoState over CDP so every state is read rather than inferred — against the external-level Continue button and the levelgroup Submit button:

state	production	with fix
rest	rgb(76,66,207)	rgb(76,66,207)
hover	rgb(43,30,159)	rgb(43,30,159)
focus	rgb(43,30,159)	rgb(43,30,159)
pressed	rgb(168,108,0)	rgb(43,30,159)
pressed via keyboard	rgb(168,108,0)	rgb(43,30,159)
disabled	rgb(76,66,207)	rgb(76,66,207)
disabled + hover	rgb(255,164,0)	rgb(76,66,207)
disabled + focus	rgb(255,164,0)	rgb(76,66,207)

Cascade resolution confirmed for all 10 compound selectors across both variants.

The disabled pair is most visible on submit buttons — the pointer stays over the button for as long as the submission is in flight — and on _pixelation.html.haml's #finished button, which ships disabled from page load.

I also audited the rest of the mixin for anything else baked at compile time. Only .badge { color: $background } remains, and nothing in the repo puts a badge inside a button, so this is the complete surface.

Eyes

No baseline should move. Every changed state requires pointer, focus, or the disabled attribute; the at-rest paint is byte-identical. Flagging it because 21 eyes-tagged scenarios touch pages with these buttons.

Considered and not done here

Replacing these with design-system MUI buttons. It works, but eight buttons in five sibling partials (_external, _standalone_video, _external_link, _curriculum_reference, _locked_lesson) would stay Bootstrap, and the metrics differ — 44px/6px radius/17.5px font vs 42px/4px/16px. A student would get an MUI Submit on a levelgroup and a Bootstrap Continue one level later, so a partial migration reads as worse consistency than today. Worth its own ticket covering all 11 partials, budgeted for the eyes baselines.

🤖 Generated with Claude Code

[Copilot]

Pull request overview

This PR fixes a Bootstrap rebrand regression where .btn-primary and .btn-success could revert to Bootstrap’s compile-time colors in compound interaction states (notably active+hover/focus and disabled+hover/focus), by matching Bootstrap’s nested selector specificity so the runtime CSS variable overrides win.

Changes:

• Add a themable-button-states Sass mixin that mirrors Bootstrap’s nested selectors for :active/.active and disabled compound states.
• Apply the mixin to .btn-primary and .btn-success so compound states consistently use the intended runtime brand CSS variables.
• Fix a comment typo (“Bootstramp” → “Bootstrap”).

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.