Backport #43782: Add new UX flow for changing security level (Desktop)

⬅️ Backport Patchset

Bookkeeping

Issue(s)

• #43782 (closed)
• #43783 (closed)
• #43784 (closed)

Merge Request(s)

• !1520 (merged)

Target Channels

• Alpha
• Stable
• Legacy

Notes

The commits in !1520 (merged) are already built for the stable release. But for legacy 115 we will need some changes.

At the very least some CSS variables are missing. We may be able to address this with the following at the top of securityLevelPreferences.css, but this needs an actual build to be sure.

/* CSS variables copied from ESR 128 */
:root {
  --space-xsmall: 0.267rem;
  --space-small: calc(2 * var(--space-xsmall));
  --space-medium: calc(3 * var(--space-xsmall));
  --space-large: calc(4 * var(--space-xsmall));
  --space-xlarge: calc(6 * var(--space-xsmall));
  --font-size-small: 0.867rem;
  --background-color-information: #e2f7ff; /* acorn oklch --color-blue-0 */
  --button-text-color-primary: var(--in-content-primary-button-text-color);
  --border-radius-small: 4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color-information: #00317e; /* acorn oklch --color-blue-90 */
   }
}

/cc @ma1 @morgan

---