Update exit this page overlay colour to use system colours#7183
Open
NickColley wants to merge 1 commit into
Open
Update exit this page overlay colour to use system colours#7183NickColley wants to merge 1 commit into
NickColley wants to merge 1 commit into
Conversation
Stylesheets changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index 2e5ab8c44..d97d97671 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -3035,7 +3035,8 @@ screen and (forced-colors:active) {
right: 0;
bottom: 0;
left: 0;
- background-color: #fff
+ color: CanvasText;
+ background-color: Canvas
}
.govuk-exit-this-page-hide-content * {
Action run for 298d6a9 |
Other changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/components/exit-this-page/_mixin.scss b/packages/govuk-frontend/dist/govuk/components/exit-this-page/_mixin.scss
index 2671d2ea5..e0a2961e4 100644
--- a/packages/govuk-frontend/dist/govuk/components/exit-this-page/_mixin.scss
+++ b/packages/govuk-frontend/dist/govuk/components/exit-this-page/_mixin.scss
@@ -69,7 +69,11 @@
right: 0;
bottom: 0;
left: 0;
- background-color: base.govuk-colour("white");
+ // The overlay is imitating a default browser window so we can use
+ // system colours ensure it matches the browser's default colours.
+ // https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/system-color
+ color: CanvasText;
+ background-color: Canvas;
}
// This class is added to the body when the Exit This Page button is activated
Action run for 298d6a9 |
📋 StatsNo changes to any distributed file sizes! Action run for 298d6a9 |
NickColley
force-pushed
the
fix-exit-this-page-colours
branch
from
41562ec to
ba6bb30
Compare
NickColley
force-pushed
the
fix-exit-this-page-colours
branch
from
ba6bb30 to
9597112
Compare
When you press the 'exit this page' button it'll redirect you to a safe page. Since loading the new page can take a while an overlay is shown that says 'loading'. Change the colours displayed on this in-between page so they match the browsers default colours ( https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/system-color)) GOV.UK Frontend does not set `color-scheme` with a `dark` value so these colours will not change to dark automatically, aligning with the existing behaviour. This decision was made to ensure that there is no clear flash between a light colour and dark colour which could arouse suspicion. If GOV.UK Frontend supports dark mode in the future this overlay will then support dark colours and a dark page will change to a dark overlay automatically. Motivation behind this change is ensuring we dont use any hardcoded colours where possible and rely on functional colours, in this case the appropriate colours are system level.
NickColley
force-pushed
the
fix-exit-this-page-colours
branch
from
9597112 to
298d6a9
Compare
Contributor
Author
|
Blocking myself: Need changelog entry, then merge after 6.3.0 has gone out |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
When you press the 'exit this page' button it'll redirect you to a safe page.
Since loading the new page can take a while an overlay is shown that says
'loading'.
Change the colours displayed on this in-between page so they match the browsers default colours (
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/system-color).
GOV.UK Frontend does not set
color-schemewith adarkvalue so these colours will not change to dark automatically, aligning with the existing behaviour.This decision was made to ensure that there is no clear flash between a light colour and dark colour which could arouse suspicion.
If GOV.UK Frontend supports dark mode in the future this overlay will then support dark colours and a dark page will change to a dark overlay automatically.
Motivation behind this change is ensuring we dont use any hardcoded colours where possible
and rely on functional colours, in this case the appropriate colours are system level.
Browser testing
Older devices
Closes #7175
TODO: Needs changelog entry