-
-
Notifications
You must be signed in to change notification settings - Fork 4
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
Conversation
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",
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
a5b0888
to
46a1778
Compare
/* Default color for overlays (scrim) (#3f434a99) */ | ||
--color-overlay-default: #3f434a99; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
/* Default color for overlays (scrim) (black-40%) */ | ||
--color-overlay-default: #00000066; | ||
/* Default color for overlays (scrim) (#3f434a66) */ | ||
--color-overlay-default: #3f434a66; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
/* Hover state surface for background/alternative (#ebedf1) */ | ||
--color-background-alternative-hover: #ebedf1; | ||
/* Pressed state surface for background/alternative (#e1e4ea) */ | ||
--color-background-alternative-pressed: #e1e4ea; | ||
/* Hover state surface for background/muted (#ebedf1) */ | ||
--color-background-muted-hover: #ebedf1; | ||
/* Pressed state surface for background/muted (#e1e4ea) */ | ||
--color-background-muted-pressed: #e1e4ea; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@@ -123,7 +123,7 @@ | |||
}, | |||
"overlay": { | |||
"default": { | |||
"value": "#00000066", | |||
"value": "#3f434a99", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"value": "#ebedf1", | ||
"type": "color", | ||
"parent": "Theme Colors/Light mode", | ||
"description": "Hover state surface for background/alternative." | ||
}, | ||
"alternative-pressed": { | ||
"value": "#ebecef", | ||
"value": "#e1e4ea", | ||
"type": "color", | ||
"parent": "Theme Colors/Light mode", | ||
"description": "Pressed state surface for background/alternative." | ||
}, | ||
"muted-hover": { | ||
"value": "#e7ebee", | ||
"value": "#ebedf1", | ||
"type": "color", | ||
"parent": "Theme Colors/Light mode", | ||
"description": "Hover state surface for background/muted." | ||
}, | ||
"muted-pressed": { | ||
"value": "#ebecef", | ||
"value": "#e1e4ea", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@@ -123,7 +123,7 @@ | |||
}, | |||
"overlay": { | |||
"default": { | |||
"value": "#00000066", | |||
"value": "#3f434a66", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
/** Default color for overlays (scrim) (#3f434a99) */ | ||
default: '#3f434a99', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
/** Hover state surface for background/alternative (#ebedf1) */ | ||
alternativeHover: '#ebedf1', | ||
/** Pressed state surface for background/alternative (#e1e4ea) */ | ||
alternativePressed: '#e1e4ea', | ||
/** Hover state surface for background/muted (#ebedf1) */ | ||
mutedHover: '#ebedf1', | ||
/** Pressed state surface for background/muted (#e1e4ea) */ | ||
mutedPressed: '#e1e4ea', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
/** Default color for overlays (scrim) (#3f434a66) */ | ||
default: '#3f434a66', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@metamaskbot publish-preview |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
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
Screenshots/Recordings
Before
After
Pre-merge author checklist
Pre-merge reviewer checklist