Skip to content
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

Use canvas colour for cookie banner over hardcoded grey #4919

Merged
merged 2 commits into from
Apr 3, 2024

Conversation

36degrees
Copy link
Contributor

The cookie banner is hardcoded to use light-grey as a background colour. Wherever possible, we should use the ‘applied’ colours rather than specific colours from the palette.

We think (although this is somewhat post-rationalising) that the cookie banner uses light-grey for the same reason the footer does. Light grey is the 'canvas' colour used for the <html> element and everything outside of the , including any viewport after the footer and the overscroll area. As the cookie banner appears above the header, it's conceptually outside of the body of the page.

Update the cookie banner to reference the canvas background colour rather than the hardcoded light-grey.

The cookie banner is hardcoded to use light-grey as a background colour. Wherever possible, we should use the ‘applied’ colours rather than specific colours from the palette.

We think (although this is somewhat post-rationalising) that the cookie banner uses light-grey for the same reason the footer does. Light grey is the 'canvas' colour used for the `<html>` element and everything outside of the <body>, including any viewport after the footer and the overscroll area. As the cookie banner appears above the header, it's conceptually outside of the body of the page.

Update the cookie banner to reference the canvas background colour rather than the hardcoded light-grey.
Copy link

github-actions bot commented Apr 3, 2024

📋 Stats

File sizes

File Size
dist/govuk-frontend-development.min.css 113.25 KiB
dist/govuk-frontend-development.min.js 42.21 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js 87.21 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs 81.95 KiB
packages/govuk-frontend/dist/govuk/all.mjs 4.17 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs 359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css 113.24 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js 42.2 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs 5.55 KiB

Modules

File Size (bundled) Size (minified)
all.mjs 77.67 KiB 40.19 KiB
accordion.mjs 22.71 KiB 12.85 KiB
button.mjs 5.98 KiB 2.69 KiB
character-count.mjs 22.4 KiB 9.92 KiB
checkboxes.mjs 5.83 KiB 2.83 KiB
error-summary.mjs 7.89 KiB 3.46 KiB
exit-this-page.mjs 17.1 KiB 9.26 KiB
header.mjs 4.46 KiB 2.6 KiB
notification-banner.mjs 6.26 KiB 2.62 KiB
password-input.mjs 15.15 KiB 7.25 KiB
radios.mjs 4.83 KiB 2.38 KiB
skip-link.mjs 4.39 KiB 2.18 KiB
tabs.mjs 10.13 KiB 6.11 KiB

View stats and visualisations on the review app


Action run for 5c7ce04

Copy link

github-actions bot commented Apr 3, 2024

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss b/packages/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss
index 0b3419170..5b1129a82 100644
--- a/packages/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss
@@ -11,7 +11,7 @@
     // when user changes colours in their browser.
     border-bottom: $border-bottom-width solid transparent;
 
-    background-color: govuk-colour("light-grey");
+    background-color: $govuk-canvas-background-colour;
   }
 
   // Support older browsers which don't hide elements with the `hidden` attribute

Action run for 5c7ce04

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4919 April 3, 2024 13:16 Inactive
Copy link
Contributor

@owenatgov owenatgov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think these test failures are coming from github having a wobble but the code looks dandy to me

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

Successfully merging this pull request may close these issues.

3 participants