1998092 - Migrate Settings UI to use M3 Acorn color tokens

Status: ASSIGNED

(Firefox for Android :: Settings, task, P3)

Description

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

Migrate the Settings UI to use the M3 Acorn color tokens.

Comment 1

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

Attachment: Bug 1998092 - Part 1: Migrate SearchEngineShortcuts to use M3 Acorn color tokens

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

Comment 2

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

Attachment: Bug 1998092 - Part 2: Update the preference section header to align with the M3 Acorn Specs

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

Comment 3

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

Attachment: Bug 1998092 - Part 3: Migrate AppIconPreference to M3 Acorn specs

• Aligning with the M3 List Item: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=63874-16946&m=dev
• Settings: https://www.figma.com/design/ctk1Pw1TBxUwVgTTOvjHb4/2025-Android-Fundamentals?node-id=623-23127&m=dev
• App Icon: https://www.figma.com/design/7J6gh5D8DbGTExxskKdn3T/Mobile-Onboarding-Experiments?node-id=16023-8411&m=dev

Comment 4

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

Attachment: Bug 1998092 - Part 4: Migrate AppIconSelection to M3 Acorn specs

• Aligning with the M3 List Item: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=63874-16946&m=dev
• Settings: https://www.figma.com/design/ctk1Pw1TBxUwVgTTOvjHb4/2025-Android-Fundamentals?node-id=623-23127&m=dev
• App Icon: https://www.figma.com/design/7J6gh5D8DbGTExxskKdn3T/Mobile-Onboarding-Experiments?node-id=16023-8411&m=dev

Comment 5

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

Attachment: Bug 1998092 - Part 5: Migrate AddExceptionScreen to M3 Acorn specs

• No proper Figma for DNS over HTTPs.
• Copied spacing from the Exception Settings screens https://www.figma.com/design/ctk1Pw1TBxUwVgTTOvjHb4/2025-Android-Fundamentals?node-id=989-27404&m=dev

Comment 6

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

Attachment: Bug 1998092 - Part 6: Migrate ExceptionsListScreen to M3 Acorn specs

• No proper Figma for DNS over HTTPs.
• Emulated M3 specs from the Exception Settings screens https://www.figma.com/design/ctk1Pw1TBxUwVgTTOvjHb4/2025-Android-Fundamentals?node-id=989-27404&m=dev

Comment 7

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

Attachment: Bug 1998092 - Part 7: Migrate DohSettingsScreen to M3 Acorn specs

• DNS: https://www.figma.com/design/ctk1Pw1TBxUwVgTTOvjHb4/2025-Android-Fundamentals?node-id=2764-18666&m=dev
• No M3 specs for the DNS. So, we are updating the items to align with the ListItem and Dialog styles.
• ListItem: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=63874-20489&m=dev
• Dialog: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=63942-53809&m=dev
• Summary specs are emulated from https://www.figma.com/design/ctk1Pw1TBxUwVgTTOvjHb4/2025-Android-Fundamentals?node-id=991-22843&m=dev

Comment 8

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

Attachment: Bug 1998092 - Part 8: Migrate InfoScreen to M3 Acorn specs

• Following the typography and color scheme used for LinkText for the text used in InfoScreen.

Comment 9

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

Attachment: Bug 1998092 - Part 9: Extract a reusable Settings Section Header from DataChoicesScreen

• Extracts TitleText from DataChoicesScreen to become a reusable Section Header component that can be reused in other Settings Screen
• Figma: https://www.figma.com/design/ctk1Pw1TBxUwVgTTOvjHb4/2025-Android-Fundamentals?node-id=996-32991&m=dev

Comment 10

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

Attachment: Bug 1998092 - Part 10: Migrate DataChoicesScreen to M3 Acorn specs

• Aligns the color, padding and typography with the new M3 Acorn specs. Note: horizontal padding values used are to align with the dynamic horizontal padding used in ListItems
• Uses the relevant ListItem to replace the clickable row items.
• Figma: https://www.figma.com/design/ctk1Pw1TBxUwVgTTOvjHb4/2025-Android-Fundamentals?node-id=996-32959&m=dev

Comment 11

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

Attachment: Bug 1998092 - Part 11: Migrate AddressList to M3 Acorn color tokens

• Only updated the Preview of AddressList.
• No Figma of the M3 Specs at time of writing.

Comment 12

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

Attachment: Bug 1998092 - Part 12: Migrate DeleteAddressDialog to M3 Acorn specs

• Adding private preview.
• Removing unnecessary AlertDialog parameters for text and text color. These parameters are already provided by default.
• Dialog: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=63942-43565&m=dev

Comment 13

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

Attachment: Bug 1998092 - Part 13: Migrate EditAddressTopBar to M3 Acorn specs

App Bar: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=63923-29115&m=dev

Comment 14

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

Attachment: Bug 1998092 - Part 14: Migrate EditAddressScreen to M3 Acorn color tokens

• Fixed the previews to display the address structure with add and edit mode.
• Migrated EditAddressScreen to M3 Acorn color tokens. This was mostly removing unnecessary colors to use the default parameters in the design components. This does not align screen with the updated M3 specs beyond colors.
• Figma: https://www.figma.com/design/ctk1Pw1TBxUwVgTTOvjHb4/2025-Android-Fundamentals?node-id=990-28370&m=dev

Comment 15

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

Attachment: Bug 1998092 - Part 15: Migrate sign_in_preference_background background color to use M3 card color background

Card: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=63874-6278&m=dev