-
Notifications
You must be signed in to change notification settings - Fork 320
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
[SPIKE] Explore usage of custom properties #4909
Closed
Closed
Conversation
This file contains 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
📋 StatsFile sizes
Modules
View stats and visualisations on the review app Action run for ebbfca6 |
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 2c37191c5..e83928383 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -4,11 +4,69 @@
--govuk-frontend-version: "development";
--govuk-frontend-breakpoint-mobile: 20rem;
--govuk-frontend-breakpoint-tablet: 40.0625rem;
- --govuk-frontend-breakpoint-desktop: 48.0625rem
+ --govuk-frontend-breakpoint-desktop: 48.0625rem;
+ --govuk-font-family: GDS Transport, arial, sans-serif;
+ color-scheme: light;
+ --govuk-brand-colour: #1d70b8;
+ --govuk-text-colour: #0b0c0c;
+ --govuk-canvas-background-colour: #f3f2f1;
+ --govuk-body-background-colour: #fff;
+ --govuk-print-text-colour: #000;
+ --govuk-secondary-text-colour: #505a5f;
+ --govuk-focus-colour: #fd0;
+ --govuk-focus-text-colour: #0b0c0c;
+ --govuk-error-colour: #d4351c;
+ --govuk-success-colour: #00703c;
+ --govuk-border-colour: #b1b4b6;
+ --govuk-input-border-colour: #0b0c0c;
+ --govuk-hover-colour: #f3f2f1;
+ --govuk-link-colour: #1d70b8;
+ --govuk-link-visited-colour: #4c2c92;
+ --govuk-link-hover-colour: #003078;
+ --govuk-link-active-colour: #0b0c0c
+}
+
+@media screen and (prefers-color-scheme:dark) {
+ @supports (color-scheme:dark) {
+ :root:not(.govuk-theme--light) {
+ color-scheme: dark;
+ --govuk-canvas-background-colour: #333;
+ --govuk-body-background-colour: #222;
+ --govuk-text-colour: #fff;
+ --govuk-secondary-text-colour: #ccc;
+ --govuk-link-colour: #add8e6;
+ --govuk-link-visited-colour: #ffb6c1;
+ --govuk-link-hover-colour: #0ff;
+ --govuk-link-active-colour: #fff
+ }
+ }
+}
+
+@media screen {
+ @supports (color-scheme:dark) {
+ .govuk-theme--dark {
+ color-scheme: dark;
+ --govuk-canvas-background-colour: #333;
+ --govuk-body-background-colour: #222;
+ --govuk-text-colour: #fff;
+ --govuk-secondary-text-colour: #ccc;
+ --govuk-link-colour: #add8e6;
+ --govuk-link-visited-colour: #ffb6c1;
+ --govuk-link-hover-colour: #0ff;
+ --govuk-link-active-colour: #fff
+ }
+ }
+}
+
+@media print {
+ :root {
+ --govuk-text-colour: #000;
+ --govuk-font-family: sans-serif
+ }
}
.govuk-link {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: underline;
@@ -33,10 +91,20 @@
font-display: fallback
}
-@media print {
- .govuk-link {
- font-family: sans-serif
- }
+.govuk-link:link {
+ color: var(--govuk-link-colour)
+}
+
+.govuk-link:visited {
+ color: var(--govuk-link-visited-colour)
+}
+
+.govuk-link:hover {
+ color: var(--govuk-link-hover-colour)
+}
+
+.govuk-link:active {
+ color: var(--govuk-link-active-colour)
}
.govuk-link:hover {
@@ -49,6 +117,7 @@
.govuk-link:focus {
outline: 3px solid transparent;
+ color: #0b0c0c;
background-color: #fd0;
box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
text-decoration: none;
@@ -56,23 +125,6 @@
box-decoration-break: clone
}
-.govuk-link:link {
- color: #1d70b8
-}
-
-.govuk-link:visited {
- color: #4c2c92
-}
-
-.govuk-link:hover {
- color: #003078
-}
-
-.govuk-link:active,
-.govuk-link:focus {
- color: #0b0c0c
-}
-
@media print {
[href^="/"].govuk-link:after,
@@ -84,74 +136,47 @@
}
}
-.govuk-link--muted:link,
-.govuk-link--muted:visited {
- color: #505a5f
+.govuk-link--muted {
+ --govuk-link-colour: var(--govuk-secondary-text-colour);
+ --govuk-link-visited-colour: var(--govuk-secondary-text-colour);
+ --govuk-link-hover-colour: var(--govuk-text-colour);
+ --govuk-link-active-colour: var(--govuk-text-colour)
}
-.govuk-link--muted:active,
-.govuk-link--muted:focus,
-.govuk-link--muted:hover,
-.govuk-link--text-colour:link,
-.govuk-link--text-colour:visited {
- color: #0b0c0c
-}
-
-@media print {
-
- .govuk-link--text-colour:link,
- .govuk-link--text-colour:visited {
- color: #000
- }
-}
-
-.govuk-link--text-colour:hover {
- color: rgba(11, 12, 12, .99)
-}
-
-.govuk-link--text-colour:active,
-.govuk-link--text-colour:focus {
- color: #0b0c0c
-}
-
-@media print {
-
- .govuk-link--text-colour:active,
- .govuk-link--text-colour:focus {
- color: #000
- }
+.govuk-link--text-colour {
+ --govuk-link-colour: var(--govuk-text-colour);
+ --govuk-link-visited-colour: var(--govuk-text-colour);
+ --govuk-link-hover-colour: hsl(from var(--govuk-text-colour) h s l/0.99);
+ --govuk-link-active-colour: var(--govuk-text-colour)
}
-.govuk-link--inverse:link,
-.govuk-link--inverse:visited {
- color: #fff
+.govuk-link--error {
+ --govuk-link-colour: #d4351c;
+ --govuk-link-visited-colour: #d4351c;
+ --govuk-link-hover-colour: #942514;
+ --govuk-link-active-colour: #d4351c
}
-.govuk-link--inverse:active,
-.govuk-link--inverse:hover {
- color: hsla(0, 0%, 100%, .99)
+.govuk-link--success {
+ --govuk-link-colour: #00703c;
+ --govuk-link-visited-colour: #00703c;
+ --govuk-link-hover-colour: #004e2a;
+ --govuk-link-active-colour: #00703c
}
-.govuk-link--inverse:focus {
- color: #0b0c0c
+.govuk-link--inverse {
+ --govuk-link-colour: #fff;
+ --govuk-link-visited-colour: #fff;
+ --govuk-link-hover-colour: hsla(0, 0%, 100%, .99);
+ --govuk-link-active-colour: #fff
}
.govuk-link--no-underline:not(:hover):not(:active) {
text-decoration: none
}
-.govuk-link--no-visited-state:link,
-.govuk-link--no-visited-state:visited {
- color: #1d70b8
-}
-
-.govuk-link--no-visited-state:hover {
- color: #003078
-}
-
-.govuk-link--no-visited-state:active,
-.govuk-link--no-visited-state:focus {
- color: #0b0c0c
+.govuk-link--no-visited-state {
+ --govuk-link-visited-colour: var(--govuk-link-colour)
}
.govuk-link-image {
@@ -166,25 +191,19 @@
}
.govuk-list {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: var(--govuk-text-colour);
margin-top: 0;
margin-bottom: 15px;
padding-left: 0;
list-style-type: none
}
-@media print {
- .govuk-list {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-list {
font-size: 1.1875rem;
@@ -195,8 +214,7 @@
@media print {
.govuk-list {
font-size: 14pt;
- line-height: 1.15;
- color: #000
+ line-height: 1.15
}
}
@@ -248,8 +266,8 @@
}
.govuk-heading-xl {
- color: #0b0c0c;
- font-family: GDS Transport, arial, sans-serif;
+ color: var(--govuk-text-colour);
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 700;
@@ -260,13 +278,6 @@
margin-bottom: 30px
}
-@media print {
- .govuk-heading-xl {
- color: #000;
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-heading-xl {
font-size: 3rem;
@@ -288,8 +299,8 @@
}
.govuk-heading-l {
- color: #0b0c0c;
- font-family: GDS Transport, arial, sans-serif;
+ color: var(--govuk-text-colour);
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 700;
@@ -300,13 +311,6 @@
margin-bottom: 20px
}
-@media print {
- .govuk-heading-l {
- color: #000;
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-heading-l {
font-size: 2.25rem;
@@ -328,8 +332,8 @@
}
.govuk-heading-m {
- color: #0b0c0c;
- font-family: GDS Transport, arial, sans-serif;
+ color: var(--govuk-text-colour);
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 700;
@@ -340,13 +344,6 @@
margin-bottom: 15px
}
-@media print {
- .govuk-heading-m {
- color: #000;
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-heading-m {
font-size: 1.5rem;
@@ -368,8 +365,8 @@
}
.govuk-heading-s {
- color: #0b0c0c;
- font-family: GDS Transport, arial, sans-serif;
+ color: var(--govuk-text-colour);
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 700;
@@ -380,13 +377,6 @@
margin-bottom: 15px
}
-@media print {
- .govuk-heading-s {
- color: #000;
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-heading-s {
font-size: 1.1875rem;
@@ -408,7 +398,7 @@
}
.govuk-caption-xl {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
@@ -416,13 +406,7 @@
line-height: 1.1111111111;
display: block;
margin-bottom: 5px;
- color: #505a5f
-}
-
-@media print {
- .govuk-caption-xl {
- font-family: sans-serif
- }
+ color: var(--govuk-secondary-text-colour)
}
@media (min-width:40.0625em) {
@@ -440,7 +424,7 @@
}
.govuk-caption-l {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
@@ -448,13 +432,7 @@
line-height: 1.1111111111;
display: block;
margin-bottom: 5px;
- color: #505a5f
-}
-
-@media print {
- .govuk-caption-l {
- font-family: sans-serif
- }
+ color: var(--govuk-secondary-text-colour)
}
@media (min-width:40.0625em) {
@@ -478,20 +456,14 @@
}
.govuk-caption-m {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
display: block;
- color: #505a5f
-}
-
-@media print {
- .govuk-caption-m {
- font-family: sans-serif
- }
+ color: var(--govuk-secondary-text-colour)
}
@media (min-width:40.0625em) {
@@ -510,8 +482,8 @@
.govuk-body-l,
.govuk-body-lead {
- color: #0b0c0c;
- font-family: GDS Transport, arial, sans-serif;
+ color: var(--govuk-text-colour);
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
@@ -521,15 +493,6 @@
margin-bottom: 20px
}
-@media print {
-
- .govuk-body-l,
- .govuk-body-lead {
- color: #000;
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-body-l,
@@ -558,8 +521,8 @@
.govuk-body,
.govuk-body-m {
- color: #0b0c0c;
- font-family: GDS Transport, arial, sans-serif;
+ color: var(--govuk-text-colour);
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
@@ -569,15 +532,6 @@
margin-bottom: 15px
}
-@media print {
-
- .govuk-body,
- .govuk-body-m {
- color: #000;
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-body,
@@ -605,8 +559,8 @@
}
.govuk-body-s {
- color: #0b0c0c;
- font-family: GDS Transport, arial, sans-serif;
+ color: var(--govuk-text-colour);
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
@@ -616,13 +570,6 @@
margin-bottom: 15px
}
-@media print {
- .govuk-body-s {
- color: #000;
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-body-s {
font-size: 1rem;
@@ -644,8 +591,8 @@
}
.govuk-body-xs {
- color: #0b0c0c;
- font-family: GDS Transport, arial, sans-serif;
+ color: var(--govuk-text-colour);
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
@@ -655,13 +602,6 @@
margin-bottom: 15px
}
-@media print {
- .govuk-body-xs {
- color: #000;
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-body-xs {
font-size: .875rem;
@@ -796,7 +736,7 @@
}
.govuk-button-group .govuk-link {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
@@ -809,12 +749,6 @@
text-align: center
}
-@media print {
- .govuk-button-group .govuk-link {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-button-group .govuk-link {
font-size: 1.1875rem;
@@ -1069,7 +1003,7 @@
}
.govuk-template {
- background-color: #f3f2f1;
+ background-color: var(--govuk-canvas-background-colour);
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%
@@ -1093,7 +1027,7 @@
.govuk-template__body {
margin: 0;
- background-color: #fff
+ background-color: var(--govuk-body-background-colour)
}
.govuk-width-container {
@@ -1159,24 +1093,18 @@
}
.govuk-accordion__section-button {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 700;
font-size: 1.125rem;
line-height: 1.1111111111;
- color: #0b0c0c;
+ color: var(--govuk-text-colour);
display: block;
margin-bottom: 0;
padding-top: 15px
}
-@media print {
- .govuk-accordion__section-button {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-accordion__section-button {
font-size: 1.5rem;
@@ -1187,8 +1115,7 @@
@media print {
.govuk-accordion__section-button {
font-size: 18pt;
- line-height: 1.15;
- color: #000
+ line-height: 1.15
}
}
@@ -1233,7 +1160,7 @@
}
.govuk-frontend-supported .govuk-accordion__show-all {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
@@ -1244,18 +1171,12 @@
margin-bottom: 9px;
padding: 5px 2px 5px 0;
border-width: 0;
- color: #1d70b8;
+ color: var(--govuk-link-colour);
background: none;
cursor: pointer;
-webkit-appearance: none
}
-@media print {
- .govuk-frontend-supported .govuk-accordion__show-all {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-frontend-supported .govuk-accordion__show-all {
font-size: 1.1875rem;
@@ -1282,22 +1203,22 @@
}
.govuk-frontend-supported .govuk-accordion__show-all:hover {
- color: #0b0c0c;
- background: #f3f2f1;
- box-shadow: 0 -2px #f3f2f1, 0 4px #f3f2f1
+ color: var(--govuk-text-colour);
+ background: var(--govuk-hover-colour);
+ box-shadow: 0 -2px var(--govuk-hover-colour), 0 4px var(--govuk-hover-colour)
}
.govuk-frontend-supported .govuk-accordion__show-all:hover .govuk-accordion__section-toggle-text {
- color: #0b0c0c
+ color: var(--govuk-text-colour)
}
.govuk-frontend-supported .govuk-accordion__show-all:hover .govuk-accordion-nav__chevron {
- color: #0b0c0c;
- background: #0b0c0c
+ color: var(--govuk-text-colour);
+ background: var(--govuk-text-colour)
}
.govuk-frontend-supported .govuk-accordion__show-all:hover .govuk-accordion-nav__chevron:after {
- color: #f3f2f1
+ color: var(--govuk-hover-colour)
}
.govuk-frontend-supported .govuk-accordion__show-all:focus {
@@ -1311,7 +1232,7 @@
}
.govuk-frontend-supported .govuk-accordion__show-all:focus .govuk-accordion-nav__chevron {
- background: #0b0c0c
+ background: var(--govuk-text-colour)
}
.govuk-frontend-supported .govuk-accordion__show-all:focus .govuk-accordion-nav__chevron:after {
@@ -1357,7 +1278,7 @@
border: 0;
border-top: 1px solid #b1b4b6;
border-bottom: 10px solid transparent;
- color: #0b0c0c;
+ color: var(--govuk-text-colour);
background: none;
text-align: left;
cursor: pointer;
@@ -1376,21 +1297,21 @@
}
.govuk-frontend-supported .govuk-accordion__section-button:hover {
- color: #0b0c0c;
- background: #f3f2f1
+ color: var(--govuk-text-colour);
+ background: var(--govuk-hover-colour)
}
.govuk-frontend-supported .govuk-accordion__section-button:hover .govuk-accordion__section-toggle-text {
- color: #0b0c0c
+ color: var(--govuk-text-colour)
}
.govuk-frontend-supported .govuk-accordion__section-button:hover .govuk-accordion-nav__chevron {
- color: #0b0c0c;
- background: #0b0c0c
+ color: var(--govuk-text-colour);
+ background: var(--govuk-text-colour)
}
.govuk-frontend-supported .govuk-accordion__section-button:hover .govuk-accordion-nav__chevron:after {
- color: #f3f2f1
+ color: var(--govuk-hover-colour)
}
.govuk-frontend-supported .govuk-accordion__section-button:focus {
@@ -1410,8 +1331,8 @@
}
.govuk-frontend-supported .govuk-accordion__section-button:focus .govuk-accordion-nav__chevron {
- color: #0b0c0c;
- background: #0b0c0c
+ color: var(--govuk-text-colour);
+ background: var(--govuk-text-colour)
}
.govuk-frontend-supported .govuk-accordion__section-button:focus .govuk-accordion-nav__chevron:after {
@@ -1467,7 +1388,7 @@
font-size: 1rem;
line-height: 1.25;
font-weight: 400;
- color: #1d70b8
+ color: var(--govuk-link-colour)
}
@media (min-width:40.0625em) {
@@ -1513,7 +1434,7 @@
@media (hover:none) {
.govuk-frontend-supported .govuk-accordion__section-header:hover {
border-top-color: #b1b4b6;
- box-shadow: inset 0 3px 0 0 #1d70b8
+ box-shadow: inset 0 3px 0 0 var(--govuk-link-colour)
}
.govuk-frontend-supported .govuk-accordion__section-header:hover .govuk-accordion__section-button {
@@ -1524,12 +1445,16 @@
.govuk-back-link {
font-size: .875rem;
line-height: 1.1428571429;
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: underline;
text-decoration-thickness: max(1px, .0625rem);
text-underline-offset: .1578em;
+ --govuk-link-colour: var(--govuk-text-colour);
+ --govuk-link-visited-colour: var(--govuk-text-colour);
+ --govuk-link-hover-colour: hsl(from var(--govuk-text-colour) h s l/0.99);
+ --govuk-link-active-colour: var(--govuk-text-colour);
display: inline-block;
position: relative;
margin-top: 15px;
@@ -1547,11 +1472,26 @@
@media print {
.govuk-back-link {
font-size: 14pt;
- line-height: 1.2;
- font-family: sans-serif
+ line-height: 1.2
}
}
+.govuk-back-link:link {
+ color: var(--govuk-link-colour)
+}
+
+.govuk-back-link:visited {
+ color: var(--govuk-link-visited-colour)
+}
+
+.govuk-back-link:hover {
+ color: var(--govuk-link-hover-colour)
+}
+
+.govuk-back-link:active {
+ color: var(--govuk-link-active-colour)
+}
+
.govuk-back-link:hover {
text-decoration-thickness: max(3px, .1875rem, .12em);
-webkit-text-decoration-skip-ink: none;
@@ -1570,36 +1510,6 @@
box-decoration-break: clone
}
-.govuk-back-link:link,
-.govuk-back-link:visited {
- color: #0b0c0c
-}
-
-@media print {
-
- .govuk-back-link:link,
- .govuk-back-link:visited {
- color: #000
- }
-}
-
-.govuk-back-link:hover {
- color: rgba(11, 12, 12, .99)
-}
-
-.govuk-back-link:active,
-.govuk-back-link:focus {
- color: #0b0c0c
-}
-
-@media print {
-
- .govuk-back-link:active,
- .govuk-back-link:focus {
- color: #000
- }
-}
-
.govuk-back-link:before {
content: "";
display: block;
@@ -1613,7 +1523,7 @@
transform: rotate(225deg);
border: solid;
border-width: 1px 1px 0 0;
- border-color: #505a5f
+ border-color: var(--govuk-secondary-text-colour)
}
@supports (border-width:max(0px)) {
@@ -1636,18 +1546,11 @@
left: 0
}
-.govuk-back-link--inverse:link,
-.govuk-back-link--inverse:visited {
- color: #fff
-}
-
-.govuk-back-link--inverse:active,
-.govuk-back-link--inverse:hover {
- color: hsla(0, 0%, 100%, .99)
-}
-
-.govuk-back-link--inverse:focus {
- color: #0b0c0c
+.govuk-back-link--inverse {
+ --govuk-link-colour: #fff;
+ --govuk-link-visited-colour: #fff;
+ --govuk-link-hover-colour: hsla(0, 0%, 100%, .99);
+ --govuk-link-active-colour: #fff
}
.govuk-back-link--inverse:before {
@@ -1655,23 +1558,17 @@
}
.govuk-breadcrumbs {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: .875rem;
line-height: 1.1428571429;
- color: #0b0c0c;
+ color: var(--govuk-text-colour);
margin-top: 15px;
margin-bottom: 10px
}
-@media print {
- .govuk-breadcrumbs {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-breadcrumbs {
font-size: 1rem;
@@ -1682,8 +1579,7 @@
@media print {
.govuk-breadcrumbs {
font-size: 14pt;
- line-height: 1.2;
- color: #000
+ line-height: 1.2
}
}
@@ -1721,7 +1617,7 @@
transform: rotate(45deg);
border: solid;
border-width: 1px 1px 0 0;
- border-color: #505a5f
+ border-color: var(--govuk-secondary-text-colour)
}
@supports (border-width:max(0px)) {
@@ -1742,18 +1638,32 @@
}
.govuk-breadcrumbs__link {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: underline;
text-decoration-thickness: max(1px, .0625rem);
- text-underline-offset: .1578em
+ text-underline-offset: .1578em;
+ --govuk-link-colour: var(--govuk-text-colour);
+ --govuk-link-visited-colour: var(--govuk-text-colour);
+ --govuk-link-hover-colour: hsl(from var(--govuk-text-colour) h s l/0.99);
+ --govuk-link-active-colour: var(--govuk-text-colour)
}
-@media print {
- .govuk-breadcrumbs__link {
- font-family: sans-serif
- }
+.govuk-breadcrumbs__link:link {
+ color: var(--govuk-link-colour)
+}
+
+.govuk-breadcrumbs__link:visited {
+ color: var(--govuk-link-visited-colour)
+}
+
+.govuk-breadcrumbs__link:hover {
+ color: var(--govuk-link-hover-colour)
+}
+
+.govuk-breadcrumbs__link:active {
+ color: var(--govuk-link-active-colour)
}
.govuk-breadcrumbs__link:hover {
@@ -1774,36 +1684,6 @@
box-decoration-break: clone
}
-.govuk-breadcrumbs__link:link,
-.govuk-breadcrumbs__link:visited {
- color: #0b0c0c
-}
-
-@media print {
-
- .govuk-breadcrumbs__link:link,
- .govuk-breadcrumbs__link:visited {
- color: #000
- }
-}
-
-.govuk-breadcrumbs__link:hover {
- color: rgba(11, 12, 12, .99)
-}
-
-.govuk-breadcrumbs__link:active,
-.govuk-breadcrumbs__link:focus {
- color: #0b0c0c
-}
-
-@media print {
-
- .govuk-breadcrumbs__link:active,
- .govuk-breadcrumbs__link:focus {
- color: #000
- }
-}
-
@media (max-width:40.0525em) {
.govuk-breadcrumbs--collapse-on-mobile .govuk-breadcrumbs__list-item {
display: none
@@ -1824,19 +1704,15 @@
}
}
-.govuk-breadcrumbs--inverse,
-.govuk-breadcrumbs--inverse .govuk-breadcrumbs__link:link,
-.govuk-breadcrumbs--inverse .govuk-breadcrumbs__link:visited {
+.govuk-breadcrumbs--inverse {
color: #fff
}
-.govuk-breadcrumbs--inverse .govuk-breadcrumbs__link:active,
-.govuk-breadcrumbs--inverse .govuk-breadcrumbs__link:hover {
- color: hsla(0, 0%, 100%, .99)
-}
-
-.govuk-breadcrumbs--inverse .govuk-breadcrumbs__link:focus {
- color: #0b0c0c
+.govuk-breadcrumbs--inverse .govuk-breadcrumbs__link {
+ --govuk-link-colour: #fff;
+ --govuk-link-visited-colour: #fff;
+ --govuk-link-hover-colour: hsla(0, 0%, 100%, .99);
+ --govuk-link-active-colour: #fff
}
.govuk-breadcrumbs--inverse .govuk-breadcrumbs__list-item:before {
@@ -1844,7 +1720,7 @@
}
.govuk-button {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
@@ -1867,12 +1743,6 @@
-webkit-appearance: none
}
-@media print {
- .govuk-button {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-button {
font-size: 1.1875rem;
@@ -2058,7 +1928,7 @@
}
.govuk-error-message {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 700;
@@ -2071,12 +1941,6 @@
color: #d4351c
}
-@media print {
- .govuk-error-message {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-error-message {
font-size: 1.1875rem;
@@ -2092,20 +1956,14 @@
}
.govuk-hint {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
margin-bottom: 15px;
- color: #505a5f
-}
-
-@media print {
- .govuk-hint {
- font-family: sans-serif
- }
+ color: var(--govuk-secondary-text-colour)
}
@media (min-width:40.0625em) {
@@ -2132,23 +1990,17 @@
}
.govuk-label {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: var(--govuk-text-colour);
display: block;
margin-bottom: 5px
}
-@media print {
- .govuk-label {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-label {
font-size: 1.1875rem;
@@ -2159,8 +2011,7 @@
@media print {
.govuk-label {
font-size: 14pt;
- line-height: 1.15;
- color: #000
+ line-height: 1.15
}
}
@@ -2237,7 +2088,7 @@
}
.govuk-textarea {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
@@ -2255,12 +2106,6 @@
-webkit-appearance: none
}
-@media print {
- .govuk-textarea {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-textarea {
font-size: 1.1875rem;
@@ -2353,13 +2198,13 @@
}
.govuk-fieldset__legend {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: var(--govuk-text-colour);
box-sizing: border-box;
display: table;
max-width: 100%;
@@ -2368,12 +2213,6 @@
white-space: normal
}
-@media print {
- .govuk-fieldset__legend {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-fieldset__legend {
font-size: 1.1875rem;
@@ -2384,8 +2223,7 @@
@media print {
.govuk-fieldset__legend {
font-size: 14pt;
- line-height: 1.15;
- color: #000
+ line-height: 1.15
}
}
@@ -2562,24 +2400,18 @@ screen and (forced-colors:active) {
}
.govuk-checkboxes__divider {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: var(--govuk-text-colour);
width: 40px;
margin-bottom: 10px;
text-align: center
}
-@media print {
- .govuk-checkboxes__divider {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-checkboxes__divider {
font-size: 1.1875rem;
@@ -2590,8 +2422,7 @@ screen and (forced-colors:active) {
@media print {
.govuk-checkboxes__divider {
font-size: 14pt;
- line-height: 1.15;
- color: #000
+ line-height: 1.15
}
}
@@ -2652,11 +2483,11 @@ screen and (forced-colors:active) {
.govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled)+.govuk-checkboxes__label:before {
outline: 3px dashed transparent;
outline-offset: 1px;
- box-shadow: 0 0 0 10px #b1b4b6
+ box-shadow: 0 0 0 10px var(--govuk-hover-colour)
}
.govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus+.govuk-checkboxes__label:before {
- box-shadow: 0 0 0 3px #fd0, 0 0 0 10px #b1b4b6
+ box-shadow: 0 0 0 3px #fd0, 0 0 0 10px var(--govuk-hover-colour)
}
@media (-ms-high-contrast:active),
@@ -2680,7 +2511,7 @@ screen and (forced-colors:active) {
.govuk-cookie-banner {
padding-top: 20px;
border-bottom: 10px solid transparent;
- background-color: #f3f2f1
+ background-color: var(--govuk-canvas-background-colour)
}
.govuk-cookie-banner[hidden] {
@@ -2700,7 +2531,7 @@ screen and (forced-colors:active) {
}
.govuk-input {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
@@ -2717,12 +2548,6 @@ screen and (forced-colors:active) {
appearance: none
}
-@media print {
- .govuk-input {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-input {
font-size: 1.1875rem;
@@ -2825,7 +2650,7 @@ screen and (forced-colors:active) {
.govuk-input__prefix,
.govuk-input__suffix {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
@@ -2846,14 +2671,6 @@ screen and (forced-colors:active) {
flex: 0 0 auto
}
-@media print {
-
- .govuk-input__prefix,
- .govuk-input__suffix {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-input__prefix,
@@ -2929,23 +2746,17 @@ screen and (forced-colors:active) {
}
.govuk-details {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: var(--govuk-text-colour);
margin-bottom: 20px;
display: block
}
-@media print {
- .govuk-details {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-details {
font-size: 1.1875rem;
@@ -2956,8 +2767,7 @@ screen and (forced-colors:active) {
@media print {
.govuk-details {
font-size: 14pt;
- line-height: 1.15;
- color: #000
+ line-height: 1.15
}
}
@@ -3022,12 +2832,12 @@ screen and (forced-colors:active) {
.govuk-details__summary {
position: relative;
padding-left: 25px;
- color: #1d70b8;
+ color: var(--govuk-link-colour);
cursor: pointer
}
.govuk-details__summary:hover {
- color: #003078
+ color: var(--govuk-link-hover-colour)
}
.govuk-details__summary:focus {
@@ -3098,24 +2908,18 @@ screen and (forced-colors:active) {
}
.govuk-error-summary {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: var(--govuk-text-colour);
padding: 15px;
margin-bottom: 30px;
border: 5px solid #d4351c
}
-@media print {
- .govuk-error-summary {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-error-summary {
font-size: 1.1875rem;
@@ -3126,8 +2930,7 @@ screen and (forced-colors:active) {
@media print {
.govuk-error-summary {
font-size: 14pt;
- line-height: 1.15;
- color: #000
+ line-height: 1.15
}
}
@@ -3188,18 +2991,32 @@ screen and (forced-colors:active) {
.govuk-error-summary__list a {
font-weight: 700;
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: underline;
text-decoration-thickness: max(1px, .0625rem);
- text-underline-offset: .1578em
+ text-underline-offset: .1578em;
+ --govuk-link-colour: #d4351c;
+ --govuk-link-visited-colour: #d4351c;
+ --govuk-link-hover-colour: #942514;
+ --govuk-link-active-colour: #d4351c
}
-@media print {
- .govuk-error-summary__list a {
- font-family: sans-serif
- }
+.govuk-error-summary__list a:link {
+ color: var(--govuk-link-colour)
+}
+
+.govuk-error-summary__list a:visited {
+ color: var(--govuk-link-visited-colour)
+}
+
+.govuk-error-summary__list a:hover {
+ color: var(--govuk-link-hover-colour)
+}
+
+.govuk-error-summary__list a:active {
+ color: var(--govuk-link-active-colour)
}
.govuk-error-summary__list a:hover {
@@ -3212,6 +3029,7 @@ screen and (forced-colors:active) {
.govuk-error-summary__list a:focus {
outline: 3px solid transparent;
+ color: #0b0c0c;
background-color: #fd0;
box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
text-decoration: none;
@@ -3219,23 +3037,6 @@ screen and (forced-colors:active) {
box-decoration-break: clone
}
-.govuk-error-summary__list a:link,
-.govuk-error-summary__list a:visited {
- color: #d4351c
-}
-
-.govuk-error-summary__list a:hover {
- color: #942514
-}
-
-.govuk-error-summary__list a:active {
- color: #d4351c
-}
-
-.govuk-error-summary__list a:focus {
- color: #0b0c0c
-}
-
.govuk-exit-this-page {
margin-bottom: 30px;
position: -webkit-sticky;
@@ -3313,24 +3114,18 @@ screen and (forced-colors:active) {
}
.govuk-file-upload {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: var(--govuk-text-colour);
max-width: 100%;
margin-left: -5px;
padding: 5px
}
-@media print {
- .govuk-file-upload {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-file-upload {
font-size: 1.1875rem;
@@ -3341,8 +3136,7 @@ screen and (forced-colors:active) {
@media print {
.govuk-file-upload {
font-size: 14pt;
- line-height: 1.15;
- color: #000
+ line-height: 1.15
}
}
@@ -3368,7 +3162,7 @@ screen and (forced-colors:active) {
}
.govuk-footer {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
@@ -3377,14 +3171,8 @@ screen and (forced-colors:active) {
padding-top: 25px;
padding-bottom: 15px;
border-top: 1px solid #b1b4b6;
- color: #0b0c0c;
- background: #f3f2f1
-}
-
-@media print {
- .govuk-footer {
- font-family: sans-serif
- }
+ color: var(--govuk-text-colour);
+ background: var(--govuk-canvas-background-colour)
}
@media (min-width:40.0625em) {
@@ -3409,66 +3197,50 @@ screen and (forced-colors:active) {
}
.govuk-footer__link {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: underline;
text-decoration-thickness: max(1px, .0625rem);
- text-underline-offset: .1578em
-}
-
-@media print {
- .govuk-footer__link {
- font-family: sans-serif
- }
-}
-
-.govuk-footer__link:hover {
- text-decoration-thickness: max(3px, .1875rem, .12em);
- -webkit-text-decoration-skip-ink: none;
- text-decoration-skip-ink: none;
- -webkit-text-decoration-skip: none;
- text-decoration-skip: none
+ text-underline-offset: .1578em;
+ --govuk-link-colour: var(--govuk-text-colour);
+ --govuk-link-visited-colour: var(--govuk-text-colour);
+ --govuk-link-hover-colour: hsl(from var(--govuk-text-colour) h s l/0.99);
+ --govuk-link-active-colour: var(--govuk-text-colour)
}
-.govuk-footer__link:focus {
- outline: 3px solid transparent;
- color: #0b0c0c;
- background-color: #fd0;
- box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
- text-decoration: none;
- -webkit-box-decoration-break: clone;
- box-decoration-break: clone
+.govuk-footer__link:link {
+ color: var(--govuk-link-colour)
}
-.govuk-footer__link:link,
.govuk-footer__link:visited {
- color: #0b0c0c
+ color: var(--govuk-link-visited-colour)
}
-@media print {
+.govuk-footer__link:hover {
+ color: var(--govuk-link-hover-colour)
+}
- .govuk-footer__link:link,
- .govuk-footer__link:visited {
- color: #000
- }
+.govuk-footer__link:active {
+ color: var(--govuk-link-active-colour)
}
.govuk-footer__link:hover {
- color: rgba(11, 12, 12, .99)
+ text-decoration-thickness: max(3px, .1875rem, .12em);
+ -webkit-text-decoration-skip-ink: none;
+ text-decoration-skip-ink: none;
+ -webkit-text-decoration-skip: none;
+ text-decoration-skip: none
}
-.govuk-footer__link:active,
.govuk-footer__link:focus {
- color: #0b0c0c
-}
-
-@media print {
-
- .govuk-footer__link:active,
- .govuk-footer__link:focus {
- color: #000
- }
+ outline: 3px solid transparent;
+ color: #0b0c0c;
+ background-color: #fd0;
+ box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+ text-decoration: none;
+ -webkit-box-decoration-break: clone;
+ box-decoration-break: clone
}
.govuk-footer__section-break {
@@ -3622,23 +3394,17 @@ only screen and (min-resolution:2dppx) {
}
.govuk-header {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: .875rem;
line-height: 1;
- border-bottom: 10px solid #fff;
+ border-bottom: 10px solid var(--govuk-body-background-colour);
color: #fff;
background: #0b0c0c
}
-@media print {
- .govuk-header {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-header {
font-size: 1rem;
@@ -3655,7 +3421,7 @@ only screen and (min-resolution:2dppx) {
.govuk-header__container--full-width {
padding: 0 15px;
- border-color: #1d70b8
+ border-color: var(--govuk-brand-colour)
}
.govuk-header__container--full-width .govuk-header__menu-button {
@@ -3666,7 +3432,7 @@ only screen and (min-resolution:2dppx) {
position: relative;
margin-bottom: -10px;
padding-top: 10px;
- border-bottom: 10px solid #1d70b8
+ border-bottom: 10px solid var(--govuk-brand-colour)
}
.govuk-header__container:after {
@@ -3737,17 +3503,27 @@ only screen and (min-resolution:2dppx) {
}
.govuk-header__link {
+ --govuk-link-colour: #fff;
+ --govuk-link-visited-colour: #fff;
+ --govuk-link-hover-colour: hsla(0, 0%, 100%, .99);
+ --govuk-link-active-colour: #fff;
text-decoration: none
}
-.govuk-header__link:link,
+.govuk-header__link:link {
+ color: var(--govuk-link-colour)
+}
+
.govuk-header__link:visited {
- color: #fff
+ color: var(--govuk-link-visited-colour)
}
-.govuk-header__link:active,
.govuk-header__link:hover {
- color: hsla(0, 0%, 100%, .99)
+ color: var(--govuk-link-hover-colour)
+}
+
+.govuk-header__link:active {
+ color: var(--govuk-link-active-colour)
}
.govuk-header__link:hover {
@@ -3852,7 +3628,7 @@ only screen and (min-resolution:2dppx) {
}
.govuk-header__menu-button {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
@@ -3872,12 +3648,6 @@ only screen and (min-resolution:2dppx) {
cursor: pointer
}
-@media print {
- .govuk-header__menu-button {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-header__menu-button {
font-size: 1rem;
@@ -4016,7 +3786,7 @@ only screen and (min-resolution:2dppx) {
@media print {
.govuk-header__navigation-item--active a {
- color: #1d70b8
+ color: var(--govuk-brand-colour)
}
}
@@ -4047,13 +3817,13 @@ only screen and (min-resolution:2dppx) {
}
.govuk-inset-text {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: var(--govuk-text-colour);
padding: 15px;
margin-top: 20px;
margin-bottom: 20px;
@@ -4061,12 +3831,6 @@ only screen and (min-resolution:2dppx) {
border-left: 10px solid #b1b4b6
}
-@media print {
- .govuk-inset-text {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-inset-text {
font-size: 1.1875rem;
@@ -4077,8 +3841,7 @@ only screen and (min-resolution:2dppx) {
@media print {
.govuk-inset-text {
font-size: 14pt;
- line-height: 1.15;
- color: #000
+ line-height: 1.15
}
}
@@ -4099,21 +3862,15 @@ only screen and (min-resolution:2dppx) {
}
.govuk-notification-banner {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
margin-bottom: 30px;
- border: 5px solid #1d70b8;
- background-color: #1d70b8
-}
-
-@media print {
- .govuk-notification-banner {
- font-family: sans-serif
- }
+ border: 5px solid var(--govuk-brand-colour);
+ background-color: var(--govuk-brand-colour)
}
@media (min-width:40.0625em) {
@@ -4175,15 +3932,9 @@ only screen and (min-resolution:2dppx) {
}
.govuk-notification-banner__content {
- color: #0b0c0c;
+ color: var(--govuk-text-colour);
padding: 15px;
- background-color: #fff
-}
-
-@media print {
- .govuk-notification-banner__content {
- color: #000
- }
+ background-color: var(--govuk-body-background-colour)
}
@media (min-width:40.0625em) {
@@ -4224,18 +3975,29 @@ only screen and (min-resolution:2dppx) {
}
.govuk-notification-banner__link {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: underline;
text-decoration-thickness: max(1px, .0625rem);
- text-underline-offset: .1578em
+ text-underline-offset: .1578em;
+ --govuk-link-visited-colour: var(--govuk-link-colour)
}
-@media print {
- .govuk-notification-banner__link {
- font-family: sans-serif
- }
+.govuk-notification-banner__link:link {
+ color: var(--govuk-link-colour)
+}
+
+.govuk-notification-banner__link:visited {
+ color: var(--govuk-link-visited-colour)
+}
+
+.govuk-notification-banner__link:hover {
+ color: var(--govuk-link-hover-colour)
+}
+
+.govuk-notification-banner__link:active {
+ color: var(--govuk-link-active-colour)
}
.govuk-notification-banner__link:hover {
@@ -4248,6 +4010,7 @@ only screen and (min-resolution:2dppx) {
.govuk-notification-banner__link:focus {
outline: 3px solid transparent;
+ color: #0b0c0c;
background-color: #fd0;
box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
text-decoration: none;
@@ -4255,40 +4018,16 @@ only screen and (min-resolution:2dppx) {
box-decoration-break: clone
}
-.govuk-notification-banner__link:link,
-.govuk-notification-banner__link:visited {
- color: #1d70b8
-}
-
-.govuk-notification-banner__link:hover {
- color: #003078
-}
-
-.govuk-notification-banner__link:active,
-.govuk-notification-banner__link:focus {
- color: #0b0c0c
-}
-
.govuk-notification-banner--success {
border-color: #00703c;
background-color: #00703c
}
-.govuk-notification-banner--success .govuk-notification-banner__link:link,
-.govuk-notification-banner--success .govuk-notification-banner__link:visited {
- color: #00703c
-}
-
-.govuk-notification-banner--success .govuk-notification-banner__link:hover {
- color: #004e2a
-}
-
-.govuk-notification-banner--success .govuk-notification-banner__link:active {
- color: #00703c
-}
-
-.govuk-notification-banner--success .govuk-notification-banner__link:focus {
- color: #0b0c0c
+.govuk-notification-banner--success .govuk-notification-banner__link {
+ --govuk-link-colour: #00703c;
+ --govuk-link-visited-colour: #00703c;
+ --govuk-link-hover-colour: #004e2a;
+ --govuk-link-active-colour: #00703c
}
.govuk-pagination {
@@ -4316,7 +4055,7 @@ only screen and (min-resolution:2dppx) {
.govuk-pagination__item,
.govuk-pagination__next,
.govuk-pagination__prev {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
@@ -4330,15 +4069,6 @@ only screen and (min-resolution:2dppx) {
float: left
}
-@media print {
-
- .govuk-pagination__item,
- .govuk-pagination__next,
- .govuk-pagination__prev {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-pagination__item,
@@ -4412,23 +4142,16 @@ only screen and (min-resolution:2dppx) {
background-color: #1d70b8
}
-.govuk-pagination__item--current .govuk-pagination__link:link,
-.govuk-pagination__item--current .govuk-pagination__link:visited {
- color: #fff
-}
-
-.govuk-pagination__item--current .govuk-pagination__link:active,
-.govuk-pagination__item--current .govuk-pagination__link:hover {
- color: hsla(0, 0%, 100%, .99)
-}
-
-.govuk-pagination__item--current .govuk-pagination__link:focus {
- color: #0b0c0c
+.govuk-pagination__item--current .govuk-pagination__link {
+ --govuk-link-colour: #fff;
+ --govuk-link-visited-colour: #fff;
+ --govuk-link-hover-colour: hsla(0, 0%, 100%, .99);
+ --govuk-link-active-colour: #fff
}
.govuk-pagination__item--ellipses {
font-weight: 700;
- color: #505a5f
+ color: var(--govuk-secondary-text-colour)
}
.govuk-pagination__item--ellipses:hover {
@@ -4490,7 +4213,7 @@ only screen and (min-resolution:2dppx) {
.govuk-pagination__icon {
width: .9375rem;
height: .8125rem;
- color: #505a5f;
+ color: var(--govuk-secondary-text-colour);
fill: currentcolor;
forced-color-adjust: auto
}
@@ -4563,7 +4286,7 @@ only screen and (min-resolution:2dppx) {
}
.govuk-panel {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
@@ -4576,12 +4299,6 @@ only screen and (min-resolution:2dppx) {
text-align: center
}
-@media print {
- .govuk-panel {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-panel {
font-size: 2.25rem;
@@ -4675,7 +4392,7 @@ only screen and (min-resolution:2dppx) {
}
.govuk-tag {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
@@ -4692,12 +4409,6 @@ only screen and (min-resolution:2dppx) {
overflow-wrap: break-word
}
-@media print {
- .govuk-tag {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-tag {
font-size: 1.1875rem;
@@ -4775,23 +4486,17 @@ only screen and (min-resolution:2dppx) {
}
.govuk-phase-banner__content {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: .875rem;
line-height: 1.1428571429;
- color: #0b0c0c;
+ color: var(--govuk-text-colour);
display: table;
margin: 0
}
-@media print {
- .govuk-phase-banner__content {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-phase-banner__content {
font-size: 1rem;
@@ -4802,8 +4507,7 @@ only screen and (min-resolution:2dppx) {
@media print {
.govuk-phase-banner__content {
font-size: 14pt;
- line-height: 1.2;
- color: #000
+ line-height: 1.2
}
}
@@ -4947,24 +4651,18 @@ screen and (forced-colors:active) {
}
.govuk-radios__divider {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: var(--govuk-text-colour);
width: 40px;
margin-bottom: 10px;
text-align: center
}
-@media print {
- .govuk-radios__divider {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-radios__divider {
font-size: 1.1875rem;
@@ -4975,8 +4673,7 @@ screen and (forced-colors:active) {
@media print {
.govuk-radios__divider {
font-size: 14pt;
- line-height: 1.15;
- color: #000
+ line-height: 1.15
}
}
@@ -5040,11 +4737,11 @@ screen and (forced-colors:active) {
.govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:not(:disabled)+.govuk-radios__label:before {
outline: 4px dashed transparent;
outline-offset: 1px;
- box-shadow: 0 0 0 10px #b1b4b6
+ box-shadow: 0 0 0 10px var(--govuk-hover-colour)
}
.govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus+.govuk-radios__label:before {
- box-shadow: 0 0 0 4px 0 0 0 10px #fd0 #b1b4b6
+ box-shadow: 0 0 0 4px #fd0 0 0 0 10px var(--govuk-hover-colour)
}
@media (-ms-high-contrast:active),
@@ -5066,7 +4763,7 @@ screen and (forced-colors:active) {
}
.govuk-select {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
@@ -5082,12 +4779,6 @@ screen and (forced-colors:active) {
background-color: #fff
}
-@media print {
- .govuk-select {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-select {
font-size: 1.1875rem;
@@ -5142,12 +4833,16 @@ screen and (forced-colors:active) {
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: underline;
text-decoration-thickness: max(1px, .0625rem);
text-underline-offset: .1578em;
+ --govuk-link-colour: var(--govuk-text-colour);
+ --govuk-link-visited-colour: var(--govuk-text-colour);
+ --govuk-link-hover-colour: hsl(from var(--govuk-text-colour) h s l/0.99);
+ --govuk-link-active-colour: var(--govuk-text-colour);
font-size: .875rem;
line-height: 1.1428571429;
display: block;
@@ -5170,42 +4865,6 @@ screen and (forced-colors:active) {
user-select: text
}
-@media print {
- .govuk-skip-link {
- font-family: sans-serif
- }
-}
-
-.govuk-skip-link:link,
-.govuk-skip-link:visited {
- color: #0b0c0c
-}
-
-@media print {
-
- .govuk-skip-link:link,
- .govuk-skip-link:visited {
- color: #000
- }
-}
-
-.govuk-skip-link:hover {
- color: rgba(11, 12, 12, .99)
-}
-
-.govuk-skip-link:active,
-.govuk-skip-link:focus {
- color: #0b0c0c
-}
-
-@media print {
-
- .govuk-skip-link:active,
- .govuk-skip-link:focus {
- color: #000
- }
-}
-
@media (min-width:40.0625em) {
.govuk-skip-link {
font-size: 1rem;
@@ -5238,22 +4897,16 @@ screen and (forced-colors:active) {
}
.govuk-summary-list {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: var(--govuk-text-colour);
margin: 0 0 20px
}
-@media print {
- .govuk-summary-list {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-summary-list {
font-size: 1.1875rem;
@@ -5264,8 +4917,7 @@ screen and (forced-colors:active) {
@media print {
.govuk-summary-list {
font-size: 14pt;
- line-height: 1.15;
- color: #000
+ line-height: 1.15
}
}
@@ -5465,22 +5117,16 @@ screen and (forced-colors:active) {
}
.govuk-summary-card__title {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 700;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: var(--govuk-text-colour);
margin: 5px 20px 10px 0
}
-@media print {
- .govuk-summary-card__title {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-summary-card__title {
font-size: 1.1875rem;
@@ -5491,8 +5137,7 @@ screen and (forced-colors:active) {
@media print {
.govuk-summary-card__title {
font-size: 14pt;
- line-height: 1.15;
- color: #000
+ line-height: 1.15
}
}
@@ -5594,25 +5239,19 @@ screen and (-ms-high-contrast:active) {
}
.govuk-table {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: var(--govuk-text-colour);
width: 100%;
margin-bottom: 20px;
border-spacing: 0;
border-collapse: collapse
}
-@media print {
- .govuk-table {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-table {
font-size: 1.1875rem;
@@ -5623,8 +5262,7 @@ screen and (-ms-high-contrast:active) {
@media print {
.govuk-table {
font-size: 14pt;
- line-height: 1.15;
- color: #000
+ line-height: 1.15
}
}
@@ -5732,7 +5370,7 @@ screen and (-ms-high-contrast:active) {
.govuk-tabs {
margin-top: 5px;
margin-bottom: 20px;
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
@@ -5742,18 +5380,7 @@ screen and (-ms-high-contrast:active) {
@media (min-width:40.0625em) {
.govuk-tabs {
- margin-bottom: 30px
- }
-}
-
-@media print {
- .govuk-tabs {
- font-family: sans-serif
- }
-}
-
-@media (min-width:40.0625em) {
- .govuk-tabs {
+ margin-bottom: 30px;
font-size: 1.1875rem;
line-height: 1.3157894737
}
@@ -5770,7 +5397,7 @@ screen and (-ms-high-contrast:active) {
font-size: 1rem;
line-height: 1.25;
font-weight: 400;
- color: #0b0c0c;
+ color: var(--govuk-text-colour);
margin-bottom: 10px
}
@@ -5784,8 +5411,7 @@ screen and (-ms-high-contrast:active) {
@media print {
.govuk-tabs__title {
font-size: 14pt;
- line-height: 1.15;
- color: #000
+ line-height: 1.15
}
}
@@ -5806,20 +5432,14 @@ screen and (-ms-high-contrast:active) {
}
.govuk-tabs__list-item:before {
- color: #0b0c0c;
+ color: var(--govuk-text-colour);
content: "—";
margin-left: -25px;
padding-right: 5px
}
-@media print {
- .govuk-tabs__list-item:before {
- color: #000
- }
-}
-
.govuk-tabs__tab {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: underline;
@@ -5829,10 +5449,20 @@ screen and (-ms-high-contrast:active) {
margin-bottom: 10px
}
-@media print {
- .govuk-tabs__tab {
- font-family: sans-serif
- }
+.govuk-tabs__tab:link {
+ color: var(--govuk-link-colour)
+}
+
+.govuk-tabs__tab:visited {
+ color: var(--govuk-link-visited-colour)
+}
+
+.govuk-tabs__tab:hover {
+ color: var(--govuk-link-hover-colour)
+}
+
+.govuk-tabs__tab:active {
+ color: var(--govuk-link-active-colour)
}
.govuk-tabs__tab:hover {
@@ -5845,6 +5475,7 @@ screen and (-ms-high-contrast:active) {
.govuk-tabs__tab:focus {
outline: 3px solid transparent;
+ color: #0b0c0c;
background-color: #fd0;
box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
text-decoration: none;
@@ -5852,23 +5483,6 @@ screen and (-ms-high-contrast:active) {
box-decoration-break: clone
}
-.govuk-tabs__tab:link {
- color: #1d70b8
-}
-
-.govuk-tabs__tab:visited {
- color: #4c2c92
-}
-
-.govuk-tabs__tab:hover {
- color: #003078
-}
-
-.govuk-tabs__tab:active,
-.govuk-tabs__tab:focus {
- color: #0b0c0c
-}
-
.govuk-tabs__panel {
margin-bottom: 30px
}
@@ -5915,7 +5529,7 @@ screen and (-ms-high-contrast:active) {
padding: 14px 19px 16px;
border: 1px solid #b1b4b6;
border-bottom: 0;
- background-color: #fff
+ background-color: var(--govuk-body-background-colour)
}
.govuk-frontend-supported .govuk-tabs__list-item--selected .govuk-tabs__tab {
@@ -5923,43 +5537,13 @@ screen and (-ms-high-contrast:active) {
}
.govuk-frontend-supported .govuk-tabs__tab {
+ --govuk-link-colour: var(--govuk-text-colour);
+ --govuk-link-visited-colour: var(--govuk-text-colour);
+ --govuk-link-hover-colour: hsl(from var(--govuk-text-colour) h s l/0.99);
+ --govuk-link-active-colour: var(--govuk-text-colour);
margin-bottom: 0
}
- .govuk-frontend-supported .govuk-tabs__tab:link,
- .govuk-frontend-supported .govuk-tabs__tab:visited {
- color: #0b0c0c
- }
-}
-
-@media print and (min-width:40.0625em) {
-
- .govuk-frontend-supported .govuk-tabs__tab:link,
- .govuk-frontend-supported .govuk-tabs__tab:visited {
- color: #000
- }
-}
-
-@media (min-width:40.0625em) {
- .govuk-frontend-supported .govuk-tabs__tab:hover {
- color: rgba(11, 12, 12, .99)
- }
-
- .govuk-frontend-supported .govuk-tabs__tab:active,
- .govuk-frontend-supported .govuk-tabs__tab:focus {
- color: #0b0c0c
- }
-}
-
-@media print and (min-width:40.0625em) {
-
- .govuk-frontend-supported .govuk-tabs__tab:active,
- .govuk-frontend-supported .govuk-tabs__tab:focus {
- color: #000
- }
-}
-
-@media (min-width:40.0625em) {
.govuk-frontend-supported .govuk-tabs__tab:after {
content: "";
position: absolute;
@@ -5986,7 +5570,7 @@ screen and (-ms-high-contrast:active) {
}
.govuk-task-list {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
@@ -5998,12 +5582,6 @@ screen and (-ms-high-contrast:active) {
list-style-type: none
}
-@media print {
- .govuk-task-list {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-task-list {
font-size: 1.1875rem;
@@ -6039,37 +5617,23 @@ screen and (-ms-high-contrast:active) {
}
.govuk-task-list__item--with-link:hover {
- background: #f3f2f1
+ background: var(--govuk-hover-colour)
}
-.govuk-task-list__name-and-hint {
+.govuk-task-list__name-and-hint,
+.govuk-task-list__status {
display: table-cell;
vertical-align: top;
- color: #0b0c0c
-}
-
-@media print {
- .govuk-task-list__name-and-hint {
- color: #000
- }
+ color: var(--govuk-text-colour)
}
.govuk-task-list__status {
- display: table-cell;
padding-left: 10px;
- text-align: right;
- vertical-align: top;
- color: #0b0c0c
-}
-
-@media print {
- .govuk-task-list__status {
- color: #000
- }
+ text-align: right
}
.govuk-task-list__status--cannot-start-yet {
- color: #505a5f
+ color: var(--govuk-secondary-text-colour)
}
.govuk-task-list__link:after {
@@ -6084,11 +5648,11 @@ screen and (-ms-high-contrast:active) {
.govuk-task-list__hint {
margin-top: 5px;
- color: #505a5f
+ color: var(--govuk-secondary-text-colour)
}
.govuk-warning-text {
- font-family: GDS Transport, arial, sans-serif;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
@@ -6099,12 +5663,6 @@ screen and (-ms-high-contrast:active) {
padding: 10px 0
}
-@media print {
- .govuk-warning-text {
- font-family: sans-serif
- }
-}
-
@media (min-width:40.0625em) {
.govuk-warning-text {
font-size: 1.1875rem;
@@ -6134,10 +5692,10 @@ screen and (-ms-high-contrast:active) {
min-width: 35px;
min-height: 35px;
margin-top: -7px;
- border: 3px solid #0b0c0c;
+ border: 3px solid var(--govuk-text-colour);
border-radius: 50%;
- color: #fff;
- background: #0b0c0c;
+ color: var(--govuk-body-background-colour);
+ background: var(--govuk-text-colour);
font-size: 30px;
line-height: 29px;
text-align: center;
@@ -6162,17 +5720,11 @@ screen and (-ms-high-contrast:active) {
}
.govuk-warning-text__text {
- color: #0b0c0c;
+ color: var(--govuk-text-colour);
display: block;
padding-left: 45px
}
-@media print {
- .govuk-warning-text__text {
- color: #000
- }
-}
-
.govuk-clearfix:after {
content: "";
display: block;
Action run for ebbfca6 |
Other changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/components/accordion/_index.scss b/packages/govuk-frontend/dist/govuk/components/accordion/_index.scss
index c6f18932c..559a5c021 100644
--- a/packages/govuk-frontend/dist/govuk/components/accordion/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/accordion/_index.scss
@@ -1,6 +1,6 @@
@include govuk-exports("govuk/component/accordion") {
- $govuk-accordion-base-colour: govuk-colour("black");
- $govuk-accordion-hover-colour: govuk-colour("light-grey");
+ $govuk-accordion-base-colour: var(--govuk-text-colour);
+ $govuk-accordion-hover-colour: var(--govuk-hover-colour);
$govuk-accordion-icon-focus-colour: $govuk-focus-colour;
$govuk-accordion-bottom-border-width: 1px;
@@ -83,7 +83,7 @@
border-width: 0;
- color: $govuk-link-colour;
+ color: var(--govuk-link-colour);
background: none;
cursor: pointer;
@@ -194,7 +194,7 @@
// browser. See https://github.com/alphagov/govuk-frontend/issues/2321#issuecomment-924201488
border-bottom: govuk-spacing(2) solid transparent;
- color: $govuk-text-colour;
+ color: var(--govuk-text-colour);
background: none;
text-align: left;
@@ -296,7 +296,7 @@
.govuk-accordion__section-toggle {
@include govuk-font-size($size: 19);
@include govuk-typography-weight-regular;
- color: $govuk-link-colour;
+ color: var(--govuk-link-colour);
}
// Add space between the icon and text.
@@ -353,7 +353,7 @@
.govuk-accordion__section-header:hover {
border-top-color: $govuk-border-colour;
- box-shadow: inset 0 3px 0 0 $govuk-link-colour;
+ box-shadow: inset 0 3px 0 0 var(--govuk-link-colour);
.govuk-accordion__section-button {
border-top-color: $govuk-border-colour;
diff --git a/packages/govuk-frontend/dist/govuk/components/back-link/_index.scss b/packages/govuk-frontend/dist/govuk/components/back-link/_index.scss
index 62e07a424..bbee3ab05 100644
--- a/packages/govuk-frontend/dist/govuk/components/back-link/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/back-link/_index.scss
@@ -10,7 +10,7 @@
$chevron-border-width: govuk-em($chevron-border-min-width, $font-size);
// Colour of chevron
- $chevron-border-colour: $govuk-secondary-text-colour;
+ $chevron-border-colour: var(--govuk-secondary-text-colour);
.govuk-back-link {
@include govuk-font-size($size: $font-size);
diff --git a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/_index.scss b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/_index.scss
index b4fb1fdbf..eb819c322 100644
--- a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/_index.scss
@@ -10,7 +10,7 @@
$chevron-border-width: govuk-em($chevron-border-min-width, $font-size);
// Colour of chevron
- $chevron-border-colour: $govuk-secondary-text-colour;
+ $chevron-border-colour: var(--govuk-secondary-text-colour);
// Calculated altitude (△↕) of the right-angled isosceles chevron with sides
// of length 8 (7px + 1px border):
diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/_index.scss b/packages/govuk-frontend/dist/govuk/components/checkboxes/_index.scss
index d34fc39f5..330607020 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/_index.scss
@@ -266,7 +266,7 @@
// Apply an outline for those modes to use instead.
outline: $govuk-focus-width dashed transparent;
outline-offset: 1px;
- box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
+ box-shadow: 0 0 0 $govuk-hover-width var(--govuk-hover-colour);
}
// Because we've overridden the border-shadow provided by the focus state,
@@ -282,7 +282,7 @@
// prettier-ignore
box-shadow:
0 0 0 $govuk-focus-width $govuk-focus-colour, // 1
- 0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
+ 0 0 0 $govuk-hover-width var(--govuk-hover-colour); // 2
}
// For devices that explicitly don't support hover, don't provide a hover
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 5b1129a82..4147e5ff0 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-canvas-background-colour;
+ background-color: var(--govuk-canvas-background-colour);
}
// Support older browsers which don't hide elements with the `hidden` attribute
diff --git a/packages/govuk-frontend/dist/govuk/components/details/_index.scss b/packages/govuk-frontend/dist/govuk/components/details/_index.scss
index 296fcfdb0..5987da7ca 100644
--- a/packages/govuk-frontend/dist/govuk/components/details/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/details/_index.scss
@@ -76,11 +76,11 @@
padding-left: govuk-spacing(4) + $govuk-border-width;
// Style the summary to look like a link...
- color: $govuk-link-colour;
+ color: var(--govuk-link-colour);
cursor: pointer;
&:hover {
- color: $govuk-link-hover-colour;
+ color: var(--govuk-link-hover-colour);
}
&:focus {
diff --git a/packages/govuk-frontend/dist/govuk/components/footer/_index.scss b/packages/govuk-frontend/dist/govuk/components/footer/_index.scss
index a014f75f4..431ac48e1 100644
--- a/packages/govuk-frontend/dist/govuk/components/footer/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/footer/_index.scss
@@ -1,7 +1,7 @@
@include govuk-exports("govuk/component/footer") {
- $govuk-footer-background: $govuk-canvas-background-colour;
+ $govuk-footer-background: var(--govuk-canvas-background-colour);
$govuk-footer-border: $govuk-border-colour;
- $govuk-footer-text: $govuk-text-colour;
+ $govuk-footer-text: var(--govuk-text-colour);
// Based on the govuk-crest-2x.png image dimensions.
$govuk-footer-crest-image-width-2x: 250px;
diff --git a/packages/govuk-frontend/dist/govuk/components/header/_index.scss b/packages/govuk-frontend/dist/govuk/components/header/_index.scss
index 858595250..617a0208a 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/header/_index.scss
@@ -1,6 +1,6 @@
@include govuk-exports("govuk/component/header") {
$govuk-header-background: govuk-colour("black");
- $govuk-header-border-color: $govuk-brand-colour;
+ $govuk-header-border-color: var(--govuk-brand-colour);
$govuk-header-border-width: govuk-spacing(2);
$govuk-header-text: govuk-colour("white");
$govuk-header-link-active: #1d8feb;
@@ -16,7 +16,7 @@
.govuk-header {
@include govuk-font($size: 16, $line-height: 1);
- border-bottom: govuk-spacing(2) solid govuk-colour("white");
+ border-bottom: govuk-spacing(2) solid var(--govuk-body-background-colour);
color: $govuk-header-text;
background: $govuk-header-background;
}
@@ -99,6 +99,7 @@
// - all links get a 3px underline regardless of text size, as there are
// multiple grouped elements close to one another and having slightly
// different underline widths looks unbalanced
+ @include govuk-link-colours;
@include govuk-link-style-inverse;
text-decoration: none;
@@ -306,7 +307,7 @@
// When printing, use the normal blue as this contrasts better with the
// white printing header
@include govuk-media-query($media-type: print) {
- color: $govuk-brand-colour;
+ color: var(--govuk-brand-colour);
}
// When focussed, the text colour needs to be darker to ensure that colour
diff --git a/packages/govuk-frontend/dist/govuk/components/hint/_index.scss b/packages/govuk-frontend/dist/govuk/components/hint/_index.scss
index 31e1746e0..79c9fb875 100644
--- a/packages/govuk-frontend/dist/govuk/components/hint/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/hint/_index.scss
@@ -4,7 +4,7 @@
margin-bottom: govuk-spacing(3);
- color: $govuk-secondary-text-colour;
+ color: var(--govuk-secondary-text-colour);
}
// Reduces margin-bottom of hint when used after the default label (no class)
diff --git a/packages/govuk-frontend/dist/govuk/components/notification-banner/_index.scss b/packages/govuk-frontend/dist/govuk/components/notification-banner/_index.scss
index 864ef1acd..9543ddebf 100644
--- a/packages/govuk-frontend/dist/govuk/components/notification-banner/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/notification-banner/_index.scss
@@ -3,9 +3,9 @@
@include govuk-font($size: 19);
@include govuk-responsive-margin(8, "bottom");
- border: $govuk-border-width solid $govuk-brand-colour;
+ border: $govuk-border-width solid var(--govuk-brand-colour);
- background-color: $govuk-brand-colour;
+ background-color: var(--govuk-brand-colour);
&:focus {
outline: $govuk-focus-width solid $govuk-focus-colour;
@@ -38,7 +38,7 @@
@include govuk-text-colour;
padding: govuk-spacing(3);
- background-color: $govuk-body-background-colour;
+ background-color: var(--govuk-body-background-colour);
@include govuk-media-query($from: tablet) {
padding: $padding-tablet;
diff --git a/packages/govuk-frontend/dist/govuk/components/pagination/_index.scss b/packages/govuk-frontend/dist/govuk/components/pagination/_index.scss
index 5f74f5bf6..5aa1cccb5 100644
--- a/packages/govuk-frontend/dist/govuk/components/pagination/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/pagination/_index.scss
@@ -94,7 +94,7 @@
.govuk-pagination__item--ellipses {
@include govuk-typography-weight-bold;
- color: $govuk-secondary-text-colour;
+ color: var(--govuk-secondary-text-colour);
// Remove hover state for ellipsis items as they don't have links within them
&:hover {
@@ -158,7 +158,7 @@
// Set size using rems to make the icon scale with text if user resizes text in their browser
width: govuk-px-to-rem(15px);
height: govuk-px-to-rem(13px);
- color: $govuk-secondary-text-colour;
+ color: var(--govuk-secondary-text-colour);
fill: currentcolor;
forced-color-adjust: auto;
}
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/_index.scss b/packages/govuk-frontend/dist/govuk/components/radios/_index.scss
index 51fc8055d..31e4c033e 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/radios/_index.scss
@@ -286,7 +286,7 @@
// Apply an outline for those modes to use instead.
outline: $govuk-radios-focus-width dashed transparent;
outline-offset: 1px;
- box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
+ box-shadow: 0 0 0 $govuk-hover-width var(--govuk-hover-colour);
}
// Because we've overridden the border-shadow provided by the focus state,
@@ -302,7 +302,7 @@
// prettier-ignore
box-shadow:
0 0 0 $govuk-radios-focus-width $govuk-focus-colour // 1,
- 0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
+ 0 0 0 $govuk-hover-width var(--govuk-hover-colour); // 2
}
// For devices that explicitly don't support hover, don't provide a hover
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/_index.scss b/packages/govuk-frontend/dist/govuk/components/tabs/_index.scss
index a0e628067..8b97dde93 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/_index.scss
@@ -91,7 +91,7 @@
border: $border-width solid $govuk-border-colour;
border-bottom: 0;
- background-color: $govuk-body-background-colour;
+ background-color: var(--govuk-body-background-colour);
.govuk-tabs__tab {
text-decoration: none;
diff --git a/packages/govuk-frontend/dist/govuk/components/task-list/_index.scss b/packages/govuk-frontend/dist/govuk/components/task-list/_index.scss
index 98fc99a79..db03ff91f 100644
--- a/packages/govuk-frontend/dist/govuk/components/task-list/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/task-list/_index.scss
@@ -1,7 +1,7 @@
@import "../tag/index";
@include govuk-exports("govuk/component/task-list") {
- $govuk-task-list-hover-colour: govuk-colour("light-grey");
+ $govuk-task-list-hover-colour: var(--govuk-hover-colour);
.govuk-task-list {
@include govuk-font($size: 19);
@@ -34,7 +34,7 @@
// The background hover colour is added to help indicate that the whole row is clickable, rather
// than just the visible link text.
.govuk-task-list__item--with-link:hover {
- background: $govuk-task-list-hover-colour;
+ background: var(--govuk-hover-colour);
}
.govuk-task-list__name-and-hint {
@@ -52,7 +52,7 @@
}
.govuk-task-list__status--cannot-start-yet {
- color: $govuk-secondary-text-colour;
+ color: var(--govuk-secondary-text-colour);
}
// This adds an empty transparent box covering the whole row, including the task status and
@@ -70,7 +70,7 @@
.govuk-task-list__hint {
margin-top: govuk-spacing(1);
- color: $govuk-secondary-text-colour;
+ color: var(--govuk-secondary-text-colour);
}
}
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 d221eecf6..d14e78643 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-text-colour;
+ border: 3px solid var(--govuk-text-colour);
border-radius: 50%;
- color: $govuk-body-background-colour;
- background: $govuk-text-colour;
+ color: var(--govuk-body-background-colour);
+ background: var(--govuk-text-colour);
font-size: 30px;
line-height: 29px;
diff --git a/packages/govuk-frontend/dist/govuk/core/_all.scss b/packages/govuk-frontend/dist/govuk/core/_all.scss
index a9c87c554..202f48bec 100644
--- a/packages/govuk-frontend/dist/govuk/core/_all.scss
+++ b/packages/govuk-frontend/dist/govuk/core/_all.scss
@@ -1,4 +1,5 @@
@import "govuk-frontend-properties";
+@import "theme";
@import "links";
@import "lists";
@import "typography";
diff --git a/packages/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss b/packages/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss
index 88f50e349..2f5df20d6 100644
--- a/packages/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss
+++ b/packages/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss
@@ -7,6 +7,8 @@
@each $name, $value in $govuk-breakpoints {
--govuk-frontend-breakpoint-#{$name}: #{govuk-px-to-rem($value)};
}
+
+ --govuk-font-family: #{$govuk-font-family};
}
/*# sourceMappingURL=_govuk-frontend-properties.scss.map */
diff --git a/packages/govuk-frontend/dist/govuk/core/_links.scss b/packages/govuk-frontend/dist/govuk/core/_links.scss
index f5047d61c..c2e2c4b9b 100644
--- a/packages/govuk-frontend/dist/govuk/core/_links.scss
+++ b/packages/govuk-frontend/dist/govuk/core/_links.scss
@@ -20,6 +20,14 @@
@include govuk-link-style-text;
}
+ .govuk-link--error {
+ @include govuk-link-style-error;
+ }
+
+ .govuk-link--success {
+ @include govuk-link-style-success;
+ }
+
.govuk-link--inverse {
@include govuk-link-style-inverse;
}
diff --git a/packages/govuk-frontend/dist/govuk/core/_theme.scss b/packages/govuk-frontend/dist/govuk/core/_theme.scss
new file mode 100644
index 000000000..ae33b69dc
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/core/_theme.scss
@@ -0,0 +1,71 @@
+// This would likely go in a proper 'settings' file
+// and default to `false`.
+$govuk-theme-from-system: true !default;
+
+@mixin _govuk-theme-light() {
+ color-scheme: light;
+
+ --govuk-brand-colour: #{$govuk-brand-colour};
+ --govuk-text-colour: #{$govuk-text-colour};
+ --govuk-canvas-background-colour: #{$govuk-canvas-background-colour};
+ --govuk-body-background-colour: #{$govuk-body-background-colour};
+ --govuk-print-text-colour: #{$govuk-print-text-colour};
+ --govuk-secondary-text-colour: #{$govuk-secondary-text-colour};
+ --govuk-focus-colour: #{$govuk-focus-colour};
+ --govuk-focus-text-colour: #{$govuk-focus-text-colour};
+ --govuk-error-colour: #{$govuk-error-colour};
+ --govuk-success-colour: #{$govuk-success-colour};
+ --govuk-border-colour: #{$govuk-border-colour};
+ --govuk-input-border-colour: #{$govuk-input-border-colour};
+ --govuk-hover-colour: #{$govuk-hover-colour};
+ --govuk-link-colour: #{$govuk-link-colour};
+ --govuk-link-visited-colour: #{$govuk-link-visited-colour};
+ --govuk-link-hover-colour: #{$govuk-link-hover-colour};
+ --govuk-link-active-colour: #{$govuk-link-active-colour};
+}
+
+@mixin _govuk-theme-dark() {
+ @supports (color-scheme: dark) {
+ color-scheme: dark;
+
+ --govuk-canvas-background-colour: #333333;
+ --govuk-body-background-colour: #222222;
+ --govuk-text-colour: #ffffff;
+ --govuk-secondary-text-colour: #cccccc;
+ --govuk-link-colour: #add8e6;
+ --govuk-link-visited-colour: #ffb6c1;
+ --govuk-link-hover-colour: #00ffff;
+ --govuk-link-active-colour: #ffffff;
+ }
+}
+
+@include govuk-exports("govuk/core/theme") {
+ :root {
+ @include _govuk-theme-light;
+
+ @if $govuk-theme-from-system {
+ @include govuk-media-query($media-type: screen, $and: "(prefers-color-scheme: dark)") {
+ &:not(.govuk-theme--light) {
+ @include _govuk-theme-dark;
+ }
+ }
+ }
+ }
+
+ // Prevent dark theme to leak into print if some variables don't get overridden
+ // reducing the risk of printing big areas of black
+ @include govuk-media-query($media-type: screen) {
+ .govuk-theme--dark {
+ @include _govuk-theme-dark;
+ }
+ }
+
+ @include govuk-media-query($media-type: print) {
+ :root {
+ --govuk-text-colour: #{$govuk-print-text-colour};
+ --govuk-font-family: #{$govuk-font-family-print};
+ }
+ }
+}
+
+/*# sourceMappingURL=_theme.scss.map */
diff --git a/packages/govuk-frontend/dist/govuk/core/_typography.scss b/packages/govuk-frontend/dist/govuk/core/_typography.scss
index 5bc6cb4a0..ce227f9b8 100644
--- a/packages/govuk-frontend/dist/govuk/core/_typography.scss
+++ b/packages/govuk-frontend/dist/govuk/core/_typography.scss
@@ -66,7 +66,7 @@
margin-bottom: govuk-spacing(1);
- color: $govuk-secondary-text-colour;
+ color: var(--govuk-secondary-text-colour);
}
.govuk-caption-l {
@@ -75,7 +75,7 @@
display: block;
margin-bottom: govuk-spacing(1);
- color: $govuk-secondary-text-colour;
+ color: var(--govuk-secondary-text-colour);
@include govuk-media-query($from: tablet) {
margin-bottom: 0;
@@ -87,7 +87,7 @@
display: block;
- color: $govuk-secondary-text-colour;
+ color: var(--govuk-secondary-text-colour);
}
// Body (paragraphs)
diff --git a/packages/govuk-frontend/dist/govuk/helpers/_links.scss b/packages/govuk-frontend/dist/govuk/helpers/_links.scss
index 2c769d1c5..79554cd8f 100644
--- a/packages/govuk-frontend/dist/govuk/helpers/_links.scss
+++ b/packages/govuk-frontend/dist/govuk/helpers/_links.scss
@@ -11,6 +11,7 @@
@mixin govuk-link-common {
@include govuk-typography-common;
@include govuk-link-decoration;
+ @include govuk-link-colours;
&:hover {
@include govuk-link-hover-decoration;
@@ -21,6 +22,24 @@
}
}
+@mixin govuk-link-colours {
+ &:link {
+ color: var(--govuk-link-colour);
+ }
+
+ &:visited {
+ color: var(--govuk-link-visited-colour);
+ }
+
+ &:hover {
+ color: var(--govuk-link-hover-colour);
+ }
+
+ &:active {
+ color: var(--govuk-link-active-colour);
+ }
+}
+
/// Link decoration
///
/// Provides the text decoration for links, including thickness and underline
@@ -75,27 +94,7 @@
/// @access public
@mixin govuk-link-style-default {
- &:link {
- color: $govuk-link-colour;
- }
- &:visited {
- color: $govuk-link-visited-colour;
- }
-
- &:hover {
- color: $govuk-link-hover-colour;
- }
-
- &:active {
- color: $govuk-link-active-colour;
- }
-
- // When focussed, the text colour needs to be darker to ensure that colour
- // contrast is still acceptable
- &:focus {
- color: $govuk-focus-text-colour;
- }
}
/// Error link styles
@@ -115,24 +114,10 @@
/// @access public
@mixin govuk-link-style-error {
- &:link,
- &:visited {
- color: $govuk-error-colour;
- }
-
- &:hover {
- color: scale-color($govuk-error-colour, $lightness: -30%);
- }
-
- &:active {
- color: $govuk-error-colour;
- }
-
- // When focussed, the text colour needs to be darker to ensure that colour
- // contrast is still acceptable
- &:focus {
- color: $govuk-focus-text-colour;
- }
+ --govuk-link-colour: #{$govuk-error-colour};
+ --govuk-link-visited-colour: #{$govuk-error-colour};
+ --govuk-link-hover-colour: #{scale-color($govuk-error-colour, $lightness: -30%)};
+ --govuk-link-active-colour: #{$govuk-error-colour};
}
/// Success link styles
@@ -152,24 +137,10 @@
/// @access public
@mixin govuk-link-style-success {
- &:link,
- &:visited {
- color: $govuk-success-colour;
- }
-
- &:hover {
- color: scale-color($govuk-success-colour, $lightness: -30%);
- }
-
- &:active {
- color: $govuk-success-colour;
- }
-
- // When focussed, the text colour needs to be darker to ensure that colour
- // contrast is still acceptable
- &:focus {
- color: $govuk-focus-text-colour;
- }
+ --govuk-link-colour: #{$govuk-success-colour};
+ --govuk-link-visited-colour: #{$govuk-success-colour};
+ --govuk-link-hover-colour: #{scale-color($govuk-success-colour, $lightness: -30%)};
+ --govuk-link-active-colour: #{$govuk-success-colour};
}
/// Muted link styles
@@ -189,21 +160,10 @@
/// @access public
@mixin govuk-link-style-muted {
- &:link,
- &:visited {
- color: $govuk-secondary-text-colour;
- }
-
- &:hover,
- &:active {
- color: $govuk-text-colour;
- }
-
- // When focussed, the text colour needs to be darker to ensure that colour
- // contrast is still acceptable
- &:focus {
- color: $govuk-focus-text-colour;
- }
+ --govuk-link-colour: var(--govuk-secondary-text-colour);
+ --govuk-link-visited-colour: var(--govuk-secondary-text-colour);
+ --govuk-link-hover-colour: var(--govuk-text-colour);
+ --govuk-link-active-colour: var(--govuk-text-colour);
}
/// Text link styles
@@ -223,23 +183,13 @@
/// @access public
@mixin govuk-link-style-text {
- &:link,
- &:visited {
- @include govuk-text-colour;
- }
+ --govuk-link-colour: var(--govuk-text-colour);
+ --govuk-link-visited-colour: var(--govuk-text-colour);
// Force a colour change on hover to work around a bug in Safari
// https://bugs.webkit.org/show_bug.cgi?id=224483
- &:hover {
- @if type-of($govuk-text-colour) == color {
- color: rgba($govuk-text-colour, 0.99);
- }
- }
-
- &:active,
- &:focus {
- @include govuk-text-colour;
- }
+ --govuk-link-hover-colour: #{"hsl(from var(--govuk-text-colour) h s l / 0.99)"};
+ --govuk-link-active-colour: var(--govuk-text-colour);
}
/// Inverse link styles
@@ -259,21 +209,13 @@
/// @access public
@mixin govuk-link-style-inverse {
- &:link,
- &:visited {
- color: govuk-colour("white");
- }
+ --govuk-link-colour: #{govuk-colour("white")};
+ --govuk-link-visited-colour: #{govuk-colour("white")};
// Force a colour change on hover to work around a bug in Safari
// https://bugs.webkit.org/show_bug.cgi?id=224483
- &:hover,
- &:active {
- color: rgba(govuk-colour("white"), 0.99);
- }
-
- &:focus {
- color: $govuk-focus-text-colour;
- }
+ --govuk-link-hover-colour: #{rgba(govuk-colour("white"), 0.99)};
+ --govuk-link-active-colour: #{govuk-colour("white")};
}
/// Default link styles, without a visited state
@@ -297,27 +239,7 @@
/// @access public
@mixin govuk-link-style-no-visited-state {
- &:link {
- color: $govuk-link-colour;
- }
-
- &:visited {
- color: $govuk-link-colour;
- }
-
- &:hover {
- color: $govuk-link-hover-colour;
- }
-
- &:active {
- color: $govuk-link-active-colour;
- }
-
- // When focussed, the text colour needs to be darker to ensure that colour
- // contrast is still acceptable
- &:focus {
- color: $govuk-focus-text-colour;
- }
+ --govuk-link-visited-colour: var(--govuk-link-colour);
}
/// Remove underline from links
diff --git a/packages/govuk-frontend/dist/govuk/helpers/_typography.scss b/packages/govuk-frontend/dist/govuk/helpers/_typography.scss
index 57b9959e9..b41b308ff 100644
--- a/packages/govuk-frontend/dist/govuk/helpers/_typography.scss
+++ b/packages/govuk-frontend/dist/govuk/helpers/_typography.scss
@@ -13,7 +13,7 @@
/// @access public
@mixin govuk-typography-common($font-family: $govuk-font-family) {
- font-family: $font-family;
+ font-family: var(--govuk-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -22,10 +22,6 @@
@if $govuk-include-default-font-face {
@include _govuk-font-face-gds-transport;
}
-
- @include govuk-media-query($media-type: print) {
- font-family: $govuk-font-family-print;
- }
}
/// Text colour helper
@@ -35,11 +31,7 @@
/// @access public
@mixin govuk-text-colour {
- color: $govuk-text-colour;
-
- @include govuk-media-query($media-type: print) {
- color: $govuk-print-text-colour;
- }
+ color: var(--govuk-text-colour);
}
/// Regular font weight helper
diff --git a/packages/govuk-frontend/dist/govuk/objects/_template.scss b/packages/govuk-frontend/dist/govuk/objects/_template.scss
index 00d0d438d..4664d2f0e 100644
--- a/packages/govuk-frontend/dist/govuk/objects/_template.scss
+++ b/packages/govuk-frontend/dist/govuk/objects/_template.scss
@@ -5,7 +5,7 @@
.govuk-template {
// Set the overall page background colour to the same colour as used by the
// footer to give the illusion of a long footer.
- background-color: $govuk-canvas-background-colour;
+ background-color: var(--govuk-canvas-background-colour);
// Prevent automatic text sizing, as we already cater for small devices and
// would like the browser to stay on 100% text zoom by default.
@@ -46,7 +46,7 @@
// own containers.
margin: 0;
// Set the overall body of the page back to the typical background colour.
- background-color: $govuk-body-background-colour;
+ background-color: var(--govuk-body-background-colour);
}
}
diff --git a/packages/govuk-frontend/dist/govuk/settings/_colours-applied.scss b/packages/govuk-frontend/dist/govuk/settings/_colours-applied.scss
index cb82b867d..7be50bfcd 100644
--- a/packages/govuk-frontend/dist/govuk/settings/_colours-applied.scss
+++ b/packages/govuk-frontend/dist/govuk/settings/_colours-applied.scss
@@ -120,7 +120,7 @@ $govuk-input-border-colour: govuk-colour("black") !default;
/// @type Colour
/// @access public
-$govuk-hover-colour: govuk-colour("mid-grey") !default;
+$govuk-hover-colour: govuk-colour("light-grey") !default;
// =============================================================================
// Links
Action run for ebbfca6 |
This swaps browser UI elements like the button of file uploads to their dark theme, enabling better contrast with our text colour in dark mode
Excluding button for now as it uses tints and shades.
This also involves switching the small radios and checkboxes to use light-grey in ‘light mode’ in order to avoid having two different hover colours defined. This is only because it’s the easier thing to do, not because this is what we should do.
…ies" This reverts commit c12bd93.
romaricpascal
force-pushed
the
spike-css-custom-properties
branch
from
April 8, 2024 10:07
f3cc890
to
a245437
Compare
This will help when setting them if the use choses to force a light mode
That'll make things easier to edit in a single place
No persistence implemented
This ensures that native controls like file inputs will have proper text contrast, as some browsers will change the text of the button based on the colour set on the input, resulting in a white on light grey
…er-preference [SPIKE] Allow an app to respect system preference, or override them with app preference it would store
Closing this as the spike has now ended and we've learnt what we set out to learn. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
PR collecting different pieces of work to explore CSS custom properties as part of #4900.