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

Update the icon in the warning text component to match the defined text colour and background colour, rather than always being white on black #4906

Merged
merged 1 commit into from
Apr 3, 2024

Conversation

owenatgov
Copy link
Contributor

What

Swaps out calls to govuk-colour in warning text to references to $govuk-text-colour and $govuk-body-background-colour.

Why

During investigations into CSS custom properties as part of #4900, we noticed a number of places where a hypothetical change of colour scheme wouldn't properly permeate throughout the codebase. This establishes a direct relationship between the warning text component and the text colour and body background colour.

@owenatgov owenatgov requested a review from a team March 28, 2024 12:17
Copy link

github-actions bot commented Mar 28, 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.2 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs 81.94 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.18 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 5f9e6ca

Copy link

github-actions bot commented Mar 28, 2024

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/warning-text/_index.scss b/packages/govuk-frontend/dist/govuk/components/warning-text/_index.scss
index 10b0aa3d1..d221eecf6 100644
--- a/packages/govuk-frontend/dist/govuk/components/warning-text/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/warning-text/_index.scss
@@ -27,11 +27,11 @@
 
     // When a user customises their colours the background colour will often be removed.
     // Adding a border to the component keeps it's shape as a circle.
-    border: 3px solid govuk-colour("black");
+    border: 3px solid $govuk-text-colour;
     border-radius: 50%;
 
-    color: govuk-colour("white");
-    background: govuk-colour("black");
+    color: $govuk-body-background-colour;
+    background: $govuk-text-colour;
 
     font-size: 30px;
     line-height: 29px;

Action run for 5f9e6ca

@owenatgov owenatgov changed the title Use text colour and background colour variables in warning text Update the icon in the warning text component to match the defined text colour and background colour, rather than always being white on black Mar 28, 2024
@owenatgov owenatgov force-pushed the sass-vars-in-wanring-text branch from f91866a to 5f9e6ca Compare March 28, 2024 15:28
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4906 March 28, 2024 15:28 Inactive
@owenatgov owenatgov merged commit 79ccd7e into main Apr 3, 2024
45 checks passed
@owenatgov owenatgov deleted the sass-vars-in-wanring-text branch April 3, 2024 09:59
@owenatgov owenatgov added this to the 5.3.1 milestone Apr 19, 2024
@owenatgov owenatgov mentioned this pull request Apr 19, 2024
owenatgov added a commit that referenced this pull request Apr 29, 2024
Update the icon in the warning text component to match the defined text colour and background colour, rather than always being white on black
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants