2044502 - Update panel background color for errors, paused, connecting and disconnected states

Status: VERIFIED FIXED

(Firefox :: IP Protection, task)

Description

[kpatenio]

Figma spec: https://www.figma.com/design/O5gPSsJAkI5fxiRxReO8El/Built-in-VPN-Firefox-152?node-id=15150-14095&m=dev

This ticket concerns the background-color for the following states in ipprotection-status-box:

• disconnected
• paused
• connecting
• generic-error
• network-error
• catastrophic-error

We have the background color set to --background-color-box-info (disconnected, connected, connecting, paused, generic-error), --background-color-information (network-error), or background-color-critical (catastrophic-error).

background-color-box-info

This is the current value several states mentioned above. The issue with this token is that it's darker than what's in our spec. Furthermore, this causes bad contrast with our loading skeleton (see Bug 2044431). I propose we replace the panel background color with a light-dark rule that falls back to either --color-gray-05 or --color-black-alpha-50.

1. To reduce conflicts and scope of changes, we can limit all rule updates to the nova pref == true.
2. Because the gray is lighter relative to the panel in light mode, I think it'd be best to change our border for #content-container from --card-border-color to --border-color when nova is enabled
3. I also suggest we use custom named tokens in ipprotection-status-box.css. Example:

:host {
  --not-connected-panel-background-color: var(--background-color-box-info);
  --panel-border-color: var(--card-border-color);
  --nova-not-connected-panel-background-color: light-dark(var(--color-gray-05), var(--color-black-alpha-50));
}

/* Then, use the appropriate tokens for nova and non nova rules */

/* Updating the background color can be simplified to this with nova == true /*
  .disconnected,
  .generic-error,
  .network-error,
  .catastrophic-error,
  .paused,
  .connecting {
    background-color: var(--nova-not-connected-panel-background-color);
  }

Comment 1

[kpatenio]

Another Bug 2044431 also suggests changing the background panel for the loading skeleton. Because it is handled in ipprotection-content.css instead of ipprotection-status-box.css, the background panel for the skeleton can be handled separately in that bug.

Comment 2

[kpatenio]

Attachment: Bug 2044502 — Update panel background color for all built-in VPN states with Nova enabled. r=#ip-protection-reviewers!

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/85d2b22054b2
https://hg.mozilla.org/integration/autoland/rev/4788e0e345cd
— Update panel background color for all built-in VPN states with Nova enabled. r=ip-protection-reviewers,desktop-theme-reviewers,rking,hjones

Comment 4

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/4788e0e345cd

Comment 5

[Valentina Virlics [:vvalentina], VPN QA]

Verified this using Firefox Nightly 154.0a1 (26-06-2026) on Windows 11.
The background color for errors, paused, connected/connecting and disconnected states are correct using browser themes or HCM.
Follow up tickets were tracked separately.