1976508 - [WebCompat Reporter] Migrate the WebCompatReporter to use M3 Acorn color tokens

Status: RESOLVED FIXED

(Firefox for Android :: Design System and Theming, task, P3)

Description

[Adina Petridean QA [:apetridean]]

Attachment: Screenshot 2025-07-09 at 18.38.35.png

Steps to reproduce

1. Navigate to a webpage and tap on 3 dots menu.
2. Tap on More -> "Report broken site".
3. Check the separator shadow below "Report broken site" title.

Expected behavior

There are no inconsistencies between Nightly UI and Figma.

Actual behavior

There are inconsistencies between Nightly UI and Figma regarding the separator shadow.

Device information

Firefox version: Nightly Fenix 142.0a1 - 9.07.2025
Android device model: Moto G72 (Android 13)

Comment 1

[Nicholas Poon [:Nick]]

Previously, the top app bar colour was different than the background colour. In the new design, when the reporter isn't scrolled, the background colour should be the same as the top app bar colour. We should update this, according to the figma

Comment 2

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: Bug 1976508 - Migrate the WebCompatReporter to use M3 Acorn color tokens

Figma: https://www.figma.com/design/ctk1Pw1TBxUwVgTTOvjHb4/2025-Android-Fundamentals?node-id=623-20588&m=dev

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/5b9cbf23a9cf
https://hg.mozilla.org/integration/autoland/rev/7c4e64fe6c9b
Migrate the WebCompatReporter to use M3 Acorn color tokens r=android-reviewers,apindiprolu

Comment 4

[amarc]

https://hg.mozilla.org/mozilla-central/rev/7c4e64fe6c9b