Make button text on new colours more legible

[selfthinker]

This is implementing the idea to enhance the legibility of the text on the buttons with the new green and red via text-shadow. This is still in the experimental phase so we can see how this looks in more context of pages and button groups in the review app.

[github-actions]

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index d7c4e7dd6..86155eb64 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -1893,7 +1893,9 @@
     color: #fff;
     background-color: #11875a;
     box-shadow: 0 2px 0 #09442d;
+    letter-spacing: .005em;
     text-align: center;
+    text-shadow: #09442d 0 0 10px;
     vertical-align: top;
     cursor: pointer;
     -webkit-appearance: none
@@ -1950,7 +1952,8 @@
 .govuk-button:focus {
     border-color: #fd0;
     outline: 3px solid transparent;
-    box-shadow: inset 0 0 0 1px #fd0
+    box-shadow: inset 0 0 0 1px #fd0;
+    text-shadow: none
 }
 
 .govuk-button:focus:not(:active):not(:hover) {
@@ -1991,7 +1994,8 @@
 
 .govuk-button--secondary {
     background-color: #f3f3f3;
-    box-shadow: 0 2px 0 #858686
+    box-shadow: 0 2px 0 #858686;
+    text-shadow: none
 }
 
 .govuk-button--secondary,
@@ -2012,7 +2016,8 @@
 
 .govuk-button--warning {
     background-color: #ca3535;
-    box-shadow: 0 2px 0 #651b1b
+    box-shadow: 0 2px 0 #651b1b;
+    text-shadow: #651b1b 0 0 10px
 }
 
 .govuk-button--warning,
@@ -2033,7 +2038,8 @@
 
 .govuk-button--inverse {
     background-color: #fff;
-    box-shadow: 0 2px 0 #0f385c
+    box-shadow: 0 2px 0 #0f385c;
+    text-shadow: none
 }
 
 .govuk-button--inverse,

---

Action run for 7c07646

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/button/_index.scss b/packages/govuk-frontend/dist/govuk/components/button/_index.scss
index 0414d8297..32eb979f7 100644
--- a/packages/govuk-frontend/dist/govuk/components/button/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/button/_index.scss
@@ -77,7 +77,9 @@ $govuk-inverse-button-text-colour: $govuk-brand-colour !default;
     color: $govuk-button-text-colour;
     background-color: $govuk-button-colour;
     box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
+    letter-spacing: 0.005em;
     text-align: center;
+    text-shadow: $govuk-button-shadow-colour 0 0 10px;
     vertical-align: top;
     cursor: pointer;
     -webkit-appearance: none;
@@ -114,6 +116,7 @@ $govuk-inverse-button-text-colour: $govuk-brand-colour !default;
       border-color: $govuk-focus-colour;
       outline: $govuk-focus-width solid transparent;
       box-shadow: inset 0 0 0 1px $govuk-focus-colour;
+      text-shadow: none;
     }
 
     &:focus:not(:active):not(:hover) {
@@ -171,6 +174,7 @@ $govuk-inverse-button-text-colour: $govuk-brand-colour !default;
   .govuk-button--secondary {
     background-color: $govuk-secondary-button-colour;
     box-shadow: 0 $button-shadow-size 0 $govuk-secondary-button-shadow-colour;
+    text-shadow: none;
 
     &,
     &:link,
@@ -192,6 +196,7 @@ $govuk-inverse-button-text-colour: $govuk-brand-colour !default;
   .govuk-button--warning {
     background-color: $govuk-warning-button-colour;
     box-shadow: 0 $button-shadow-size 0 $govuk-warning-button-shadow-colour;
+    text-shadow: $govuk-warning-button-shadow-colour 0 0 10px;
 
     &,
     &:link,
@@ -213,6 +218,7 @@ $govuk-inverse-button-text-colour: $govuk-brand-colour !default;
   .govuk-button--inverse {
     background-color: $govuk-inverse-button-colour;
     box-shadow: 0 $button-shadow-size 0 $govuk-inverse-button-shadow-colour;
+    text-shadow: none;
 
     &,
     &:link,

---

Action run for 7c07646

[github-actions]

📋 Stats

File sizes

File	Size	Percentage change
dist/govuk-frontend-development.min.css	127.95 KiB	0.1%
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	127.93 KiB	0.1%

No changes to module sizes.

---

Action run for 7c07646