Skip to content

overlay.default update #622

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Conversation

Akatori-Design
Copy link
Contributor

@Akatori-Design Akatori-Design commented May 1, 2025

--

Description

1. Updated overlay.default as below. This improvement enhances the distinction of modal/bottom sheet from the background layer in dark mode, and also keeps light mode consistent with the dark mode.

lightTheme :
overlay.default : #000000 66 --> #3F434A 4D

darkTheme :
overlay.default : #000000 66 --> 3F434A 80

--

2. Updated background color bugs in lightTheme.

  • background.muted-hover : #e7ebee --> #EBEDF1

  • background.alternative-hover : #f6f6f7 --> #EBEDF1

  • background.muted-pressed : #ebecef --> #E1E4EA

  • background.alterntive-pressed : #ebecef --> #E1E4EA

--

Related issues

Fixes:

Manual testing steps

  1. Go to this page...

Screenshots/Recordings

Before

After

Pre-merge author checklist

  • I've followed MetaMask Contributor Docs
  • I've completed the PR template to the best of my ability
  • I’ve included tests if applicable
  • I’ve documented my code using JSDoc format if applicable
  • I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Updated overlay.default as below. This improvement enhances the distinction of modal/bottom sheet from the background layer in dark mode, and also keeps light mode consistent with the dark mode.

lightTheme :
    From   "value": "#66",
    To  "value": "#3F434A4D",

darkTheme :
    From  "value": "#66",
    To   "value": "#3F434A80",
@Akatori-Design
Copy link
Contributor Author

BEFORE
image

AFTER
image

In lightTheme, updated wrong background colors to correct :

Update to these colors

- muted-hover : #e7ebee --> #EBEDF1
muted-pressed : #ebecef --> #E1E4EA

alternative-hover : #e7ebee --> #EBEDF1
alternative-pressed : #ebecef --> #E1E4EA
@Akatori-Design
Copy link
Contributor Author

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants