DRAFT: dark mode palette #4931
Closed
DRAFT: dark mode palette #4931
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 4672a71 |
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..0aede7d75 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -57,18 +57,21 @@
}
.govuk-link:link {
- color: #1d70b8
+ color: #3892e0
}
.govuk-link:visited {
- color: #4c2c92
+ color: #9d80db
}
.govuk-link:hover {
- color: #003078
+ color: #5ca5e6
+}
+
+.govuk-link:active {
+ color: #fff
}
-.govuk-link:active,
.govuk-link:focus {
color: #0b0c0c
}
@@ -86,15 +89,21 @@
.govuk-link--muted:link,
.govuk-link--muted:visited {
- color: #505a5f
+ color: #ccc
}
.govuk-link--muted:active,
-.govuk-link--muted:focus,
-.govuk-link--muted:hover,
+.govuk-link--muted:hover {
+ color: #fff
+}
+
+.govuk-link--muted:focus {
+ color: #0b0c0c
+}
+
.govuk-link--text-colour:link,
.govuk-link--text-colour:visited {
- color: #0b0c0c
+ color: #fff
}
@media print {
@@ -106,12 +115,12 @@
}
.govuk-link--text-colour:hover {
- color: rgba(11, 12, 12, .99)
+ color: hsla(0, 0%, 100%, .99)
}
.govuk-link--text-colour:active,
.govuk-link--text-colour:focus {
- color: #0b0c0c
+ color: #fff
}
@media print {
@@ -142,14 +151,17 @@
.govuk-link--no-visited-state:link,
.govuk-link--no-visited-state:visited {
- color: #1d70b8
+ color: #3892e0
}
.govuk-link--no-visited-state:hover {
- color: #003078
+ color: #5ca5e6
+}
+
+.govuk-link--no-visited-state:active {
+ color: #fff
}
-.govuk-link--no-visited-state:active,
.govuk-link--no-visited-state:focus {
color: #0b0c0c
}
@@ -172,7 +184,7 @@
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: #fff;
margin-top: 0;
margin-bottom: 15px;
padding-left: 0;
@@ -248,7 +260,7 @@
}
.govuk-heading-xl {
- color: #0b0c0c;
+ color: #fff;
font-family: GDS Transport, arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -288,7 +300,7 @@
}
.govuk-heading-l {
- color: #0b0c0c;
+ color: #fff;
font-family: GDS Transport, arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -328,7 +340,7 @@
}
.govuk-heading-m {
- color: #0b0c0c;
+ color: #fff;
font-family: GDS Transport, arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -368,7 +380,7 @@
}
.govuk-heading-s {
- color: #0b0c0c;
+ color: #fff;
font-family: GDS Transport, arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -416,7 +428,7 @@
line-height: 1.1111111111;
display: block;
margin-bottom: 5px;
- color: #505a5f
+ color: #ccc
}
@media print {
@@ -448,7 +460,7 @@
line-height: 1.1111111111;
display: block;
margin-bottom: 5px;
- color: #505a5f
+ color: #ccc
}
@media print {
@@ -485,7 +497,7 @@
font-size: 1rem;
line-height: 1.25;
display: block;
- color: #505a5f
+ color: #ccc
}
@media print {
@@ -510,7 +522,7 @@
.govuk-body-l,
.govuk-body-lead {
- color: #0b0c0c;
+ color: #fff;
font-family: GDS Transport, arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -558,7 +570,7 @@
.govuk-body,
.govuk-body-m {
- color: #0b0c0c;
+ color: #fff;
font-family: GDS Transport, arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -605,7 +617,7 @@
}
.govuk-body-s {
- color: #0b0c0c;
+ color: #fff;
font-family: GDS Transport, arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -644,7 +656,7 @@
}
.govuk-body-xs {
- color: #0b0c0c;
+ color: #fff;
font-family: GDS Transport, arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -873,7 +885,7 @@
.govuk-form-group--error {
padding-left: 15px;
- border-left: 5px solid #d4351c
+ border-left: 5px solid #e96753
}
.govuk-form-group--error .govuk-form-group {
@@ -1069,7 +1081,7 @@
}
.govuk-template {
- background-color: #f3f2f1;
+ background-color: #263136;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%
@@ -1093,7 +1105,7 @@
.govuk-template__body {
margin: 0;
- background-color: #fff
+ background-color: #1e1f21
}
.govuk-width-container {
@@ -1165,7 +1177,7 @@
font-weight: 700;
font-size: 1.125rem;
line-height: 1.1111111111;
- color: #0b0c0c;
+ color: #fff;
display: block;
margin-bottom: 0;
padding-top: 15px
@@ -1244,7 +1256,7 @@
margin-bottom: 9px;
padding: 5px 2px 5px 0;
border-width: 0;
- color: #1d70b8;
+ color: #3892e0;
background: none;
cursor: pointer;
-webkit-appearance: none
@@ -1282,22 +1294,22 @@
}
.govuk-frontend-supported .govuk-accordion__show-all:hover {
- color: #0b0c0c;
- background: #f3f2f1;
- box-shadow: 0 -2px #f3f2f1, 0 4px #f3f2f1
+ color: #fff;
+ background: #0b0c0c;
+ box-shadow: 0 -2px #0b0c0c, 0 4px #0b0c0c
}
.govuk-frontend-supported .govuk-accordion__show-all:hover .govuk-accordion__section-toggle-text {
- color: #0b0c0c
+ color: #fff
}
.govuk-frontend-supported .govuk-accordion__show-all:hover .govuk-accordion-nav__chevron {
- color: #0b0c0c;
- background: #0b0c0c
+ color: #fff;
+ background: #fff
}
.govuk-frontend-supported .govuk-accordion__show-all:hover .govuk-accordion-nav__chevron:after {
- color: #f3f2f1
+ color: #0b0c0c
}
.govuk-frontend-supported .govuk-accordion__show-all:focus {
@@ -1311,7 +1323,7 @@
}
.govuk-frontend-supported .govuk-accordion__show-all:focus .govuk-accordion-nav__chevron {
- background: #0b0c0c
+ background: #fff
}
.govuk-frontend-supported .govuk-accordion__show-all:focus .govuk-accordion-nav__chevron:after {
@@ -1357,7 +1369,7 @@
border: 0;
border-top: 1px solid #b1b4b6;
border-bottom: 10px solid transparent;
- color: #0b0c0c;
+ color: #fff;
background: none;
text-align: left;
cursor: pointer;
@@ -1371,26 +1383,26 @@
}
.govuk-frontend-supported .govuk-accordion__section-button:active {
- color: #0b0c0c;
+ color: #fff;
background: none
}
.govuk-frontend-supported .govuk-accordion__section-button:hover {
- color: #0b0c0c;
- background: #f3f2f1
+ color: #fff;
+ background: #0b0c0c
}
.govuk-frontend-supported .govuk-accordion__section-button:hover .govuk-accordion__section-toggle-text {
- color: #0b0c0c
+ color: #fff
}
.govuk-frontend-supported .govuk-accordion__section-button:hover .govuk-accordion-nav__chevron {
- color: #0b0c0c;
- background: #0b0c0c
+ color: #fff;
+ background: #fff
}
.govuk-frontend-supported .govuk-accordion__section-button:hover .govuk-accordion-nav__chevron:after {
- color: #f3f2f1
+ color: #0b0c0c
}
.govuk-frontend-supported .govuk-accordion__section-button:focus {
@@ -1410,8 +1422,8 @@
}
.govuk-frontend-supported .govuk-accordion__section-button:focus .govuk-accordion-nav__chevron {
- color: #0b0c0c;
- background: #0b0c0c
+ color: #fff;
+ background: #fff
}
.govuk-frontend-supported .govuk-accordion__section-button:focus .govuk-accordion-nav__chevron:after {
@@ -1467,7 +1479,7 @@
font-size: 1rem;
line-height: 1.25;
font-weight: 400;
- color: #1d70b8
+ color: #3892e0
}
@media (min-width:40.0625em) {
@@ -1513,7 +1525,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 #3892e0
}
.govuk-frontend-supported .govuk-accordion__section-header:hover .govuk-accordion__section-button {
@@ -1572,7 +1584,7 @@
.govuk-back-link:link,
.govuk-back-link:visited {
- color: #0b0c0c
+ color: #fff
}
@media print {
@@ -1584,12 +1596,12 @@
}
.govuk-back-link:hover {
- color: rgba(11, 12, 12, .99)
+ color: hsla(0, 0%, 100%, .99)
}
.govuk-back-link:active,
.govuk-back-link:focus {
- color: #0b0c0c
+ color: #fff
}
@media print {
@@ -1613,7 +1625,7 @@
transform: rotate(225deg);
border: solid;
border-width: 1px 1px 0 0;
- border-color: #505a5f
+ border-color: #ccc
}
@supports (border-width:max(0px)) {
@@ -1661,7 +1673,7 @@
font-weight: 400;
font-size: .875rem;
line-height: 1.1428571429;
- color: #0b0c0c;
+ color: #fff;
margin-top: 15px;
margin-bottom: 10px
}
@@ -1721,7 +1733,7 @@
transform: rotate(45deg);
border: solid;
border-width: 1px 1px 0 0;
- border-color: #505a5f
+ border-color: #ccc
}
@supports (border-width:max(0px)) {
@@ -1776,7 +1788,7 @@
.govuk-breadcrumbs__link:link,
.govuk-breadcrumbs__link:visited {
- color: #0b0c0c
+ color: #fff
}
@media print {
@@ -1788,12 +1800,12 @@
}
.govuk-breadcrumbs__link:hover {
- color: rgba(11, 12, 12, .99)
+ color: hsla(0, 0%, 100%, .99)
}
.govuk-breadcrumbs__link:active,
.govuk-breadcrumbs__link:focus {
- color: #0b0c0c
+ color: #fff
}
@media print {
@@ -1859,8 +1871,8 @@
border: 2px solid transparent;
border-radius: 0;
color: #fff;
- background-color: #00703c;
- box-shadow: 0 2px 0 #002d18;
+ background-color: #00a357;
+ box-shadow: 0 2px 0 #006234;
text-align: center;
vertical-align: top;
cursor: pointer;
@@ -1908,7 +1920,7 @@
}
.govuk-button:hover {
- background-color: #005a30
+ background-color: #008246
}
.govuk-button:active {
@@ -1948,13 +1960,13 @@
}
.govuk-button[disabled]:hover {
- background-color: #00703c;
+ background-color: #00a357;
cursor: not-allowed
}
.govuk-button[disabled]:active {
top: 0;
- box-shadow: 0 2px 0 #002d18
+ box-shadow: 0 2px 0 #006234
}
.govuk-button--secondary {
@@ -2068,7 +2080,7 @@
margin-top: 0;
margin-bottom: 15px;
clear: both;
- color: #d4351c
+ color: #e96753
}
@media print {
@@ -2099,7 +2111,7 @@
font-size: 1rem;
line-height: 1.25;
margin-bottom: 15px;
- color: #505a5f
+ color: #ccc
}
@media print {
@@ -2138,7 +2150,7 @@
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: #fff;
display: block;
margin-bottom: 5px
}
@@ -2250,8 +2262,10 @@
margin-bottom: 20px;
padding: 5px;
resize: vertical;
- border: 2px solid #0b0c0c;
+ border: 2px solid #fff;
border-radius: 0;
+ color: #fff;
+ background-color: #1e1f21;
-webkit-appearance: none
}
@@ -2295,11 +2309,11 @@
}
.govuk-textarea--error {
- border-color: #d4351c
+ border-color: #e96753
}
.govuk-textarea--error:focus {
- border-color: #0b0c0c
+ border-color: #fff
}
.govuk-character-count {
@@ -2359,7 +2373,7 @@
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: #fff;
box-sizing: border-box;
display: table;
max-width: 100%;
@@ -2568,7 +2582,7 @@ screen and (forced-colors:active) {
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: #fff;
width: 40px;
margin-bottom: 10px;
text-align: center
@@ -2679,8 +2693,8 @@ screen and (forced-colors:active) {
.govuk-cookie-banner {
padding-top: 20px;
- border-bottom: 10px solid transparent;
- background-color: #f3f2f1
+ border-bottom: 1px solid #b1b4b6;
+ background-color: #263136
}
.govuk-cookie-banner[hidden] {
@@ -2711,8 +2725,10 @@ screen and (forced-colors:active) {
height: 2.5rem;
margin-top: 0;
padding: 5px;
- border: 2px solid #0b0c0c;
+ border: 2px solid #fff;
border-radius: 0;
+ color: #fff;
+ background-color: #1e1f21;
-webkit-appearance: none;
appearance: none
}
@@ -2761,11 +2777,11 @@ screen and (forced-colors:active) {
}
.govuk-input--error {
- border-color: #d4351c
+ border-color: #e96753
}
.govuk-input--error:focus {
- border-color: #0b0c0c
+ border-color: #fff
}
.govuk-input--extra-letter-spacing {
@@ -2838,7 +2854,7 @@ screen and (forced-colors:active) {
min-width: 2.5rem;
height: 2.5rem;
padding: 5px;
- border: 2px solid #0b0c0c;
+ border: 2px solid #fff;
background-color: #f3f2f1;
text-align: center;
white-space: nowrap;
@@ -2935,7 +2951,7 @@ screen and (forced-colors:active) {
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: #fff;
margin-bottom: 20px;
display: block
}
@@ -3022,12 +3038,12 @@ screen and (forced-colors:active) {
.govuk-details__summary {
position: relative;
padding-left: 25px;
- color: #1d70b8;
+ color: #3892e0;
cursor: pointer
}
.govuk-details__summary:hover {
- color: #003078
+ color: #5ca5e6
}
.govuk-details__summary:focus {
@@ -3104,10 +3120,10 @@ screen and (forced-colors:active) {
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: #fff;
padding: 15px;
margin-bottom: 30px;
- border: 5px solid #d4351c
+ border: 5px solid #e96753
}
@media print {
@@ -3221,15 +3237,15 @@ screen and (forced-colors:active) {
.govuk-error-summary__list a:link,
.govuk-error-summary__list a:visited {
- color: #d4351c
+ color: #e96753
}
.govuk-error-summary__list a:hover {
- color: #942514
+ color: #c43019
}
.govuk-error-summary__list a:active {
- color: #d4351c
+ color: #e96753
}
.govuk-error-summary__list a:focus {
@@ -3319,7 +3335,7 @@ screen and (forced-colors:active) {
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: #fff;
max-width: 100%;
margin-left: -5px;
padding: 5px
@@ -3348,18 +3364,18 @@ screen and (forced-colors:active) {
.govuk-file-upload::-webkit-file-upload-button {
-webkit-appearance: button;
- color: inherit;
+ color: #0b0c0c;
font: inherit
}
.govuk-file-upload:focus {
outline: 3px solid #fd0;
- box-shadow: inset 0 0 0 4px #0b0c0c
+ box-shadow: inset 0 0 0 4px #fff
}
.govuk-file-upload:focus-within {
outline: 3px solid #fd0;
- box-shadow: inset 0 0 0 4px #0b0c0c
+ box-shadow: inset 0 0 0 4px #fff
}
.govuk-file-upload:disabled {
@@ -3377,8 +3393,8 @@ screen and (forced-colors:active) {
padding-top: 25px;
padding-bottom: 15px;
border-top: 1px solid #b1b4b6;
- color: #0b0c0c;
- background: #f3f2f1
+ color: #fff;
+ background: #263136
}
@media print {
@@ -3443,7 +3459,7 @@ screen and (forced-colors:active) {
.govuk-footer__link:link,
.govuk-footer__link:visited {
- color: #0b0c0c
+ color: #fff
}
@media print {
@@ -3455,12 +3471,12 @@ screen and (forced-colors:active) {
}
.govuk-footer__link:hover {
- color: rgba(11, 12, 12, .99)
+ color: hsla(0, 0%, 100%, .99)
}
.govuk-footer__link:active,
.govuk-footer__link:focus {
- color: #0b0c0c
+ color: #fff
}
@media print {
@@ -3628,7 +3644,7 @@ only screen and (min-resolution:2dppx) {
font-weight: 400;
font-size: .875rem;
line-height: 1;
- border-bottom: 10px solid #fff;
+ border-bottom: 10px solid #1e1f21;
color: #fff;
background: #0b0c0c
}
@@ -4053,7 +4069,7 @@ only screen and (min-resolution:2dppx) {
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: #fff;
padding: 15px;
margin-top: 20px;
margin-bottom: 20px;
@@ -4175,9 +4191,9 @@ only screen and (min-resolution:2dppx) {
}
.govuk-notification-banner__content {
- color: #0b0c0c;
+ color: #fff;
padding: 15px;
- background-color: #fff
+ background-color: #1e1f21
}
@media print {
@@ -4257,34 +4273,37 @@ only screen and (min-resolution:2dppx) {
.govuk-notification-banner__link:link,
.govuk-notification-banner__link:visited {
- color: #1d70b8
+ color: #3892e0
}
.govuk-notification-banner__link:hover {
- color: #003078
+ color: #5ca5e6
+}
+
+.govuk-notification-banner__link:active {
+ color: #fff
}
-.govuk-notification-banner__link:active,
.govuk-notification-banner__link:focus {
color: #0b0c0c
}
.govuk-notification-banner--success {
- border-color: #00703c;
- background-color: #00703c
+ border-color: #00a357;
+ background-color: #00a357
}
.govuk-notification-banner--success .govuk-notification-banner__link:link,
.govuk-notification-banner--success .govuk-notification-banner__link:visited {
- color: #00703c
+ color: #00a357
}
.govuk-notification-banner--success .govuk-notification-banner__link:hover {
- color: #004e2a
+ color: #00723d
}
.govuk-notification-banner--success .govuk-notification-banner__link:active {
- color: #00703c
+ color: #00a357
}
.govuk-notification-banner--success .govuk-notification-banner__link:focus {
@@ -4362,7 +4381,7 @@ only screen and (min-resolution:2dppx) {
.govuk-pagination__item:hover,
.govuk-pagination__next:hover,
.govuk-pagination__prev:hover {
- background-color: #f3f2f1
+ background-color: #0b0c0c
}
.govuk-pagination__item {
@@ -4405,11 +4424,11 @@ only screen and (min-resolution:2dppx) {
.govuk-pagination__item--current {
font-weight: 700;
outline: 1px solid transparent;
- background-color: #1d70b8
+ background-color: #3892e0
}
.govuk-pagination__item--current:hover {
- background-color: #1d70b8
+ background-color: #3892e0
}
.govuk-pagination__item--current .govuk-pagination__link:link,
@@ -4428,7 +4447,7 @@ only screen and (min-resolution:2dppx) {
.govuk-pagination__item--ellipses {
font-weight: 700;
- color: #505a5f
+ color: #ccc
}
.govuk-pagination__item--ellipses:hover {
@@ -4490,7 +4509,7 @@ only screen and (min-resolution:2dppx) {
.govuk-pagination__icon {
width: .9375rem;
height: .8125rem;
- color: #505a5f;
+ color: #ccc;
fill: currentcolor;
forced-color-adjust: auto
}
@@ -4781,7 +4800,7 @@ only screen and (min-resolution:2dppx) {
font-weight: 400;
font-size: .875rem;
line-height: 1.1428571429;
- color: #0b0c0c;
+ color: #fff;
display: table;
margin: 0
}
@@ -4953,7 +4972,7 @@ screen and (forced-colors:active) {
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: #fff;
width: 40px;
margin-bottom: 10px;
text-align: center
@@ -5077,9 +5096,9 @@ screen and (forced-colors:active) {
max-width: 100%;
height: 2.5rem;
padding: 5px;
- border: 2px solid #0b0c0c;
- color: #0b0c0c;
- background-color: #fff
+ border: 2px solid #fff;
+ color: #fff;
+ background-color: #1e1f21
}
@media print {
@@ -5122,11 +5141,11 @@ screen and (forced-colors:active) {
}
.govuk-select--error {
- border-color: #d4351c
+ border-color: #e96753
}
.govuk-select--error:focus {
- border-color: #0b0c0c
+ border-color: #fff
}
.govuk-skip-link {
@@ -5178,7 +5197,7 @@ screen and (forced-colors:active) {
.govuk-skip-link:link,
.govuk-skip-link:visited {
- color: #0b0c0c
+ color: #fff
}
@media print {
@@ -5190,12 +5209,12 @@ screen and (forced-colors:active) {
}
.govuk-skip-link:hover {
- color: rgba(11, 12, 12, .99)
+ color: hsla(0, 0%, 100%, .99)
}
.govuk-skip-link:active,
.govuk-skip-link:focus {
- color: #0b0c0c
+ color: #fff
}
@media print {
@@ -5244,7 +5263,7 @@ screen and (forced-colors:active) {
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: #fff;
margin: 0 0 20px
}
@@ -5471,7 +5490,7 @@ screen and (forced-colors:active) {
font-weight: 700;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: #fff;
margin: 5px 20px 10px 0
}
@@ -5600,7 +5619,7 @@ screen and (-ms-high-contrast:active) {
font-weight: 400;
font-size: 1rem;
line-height: 1.25;
- color: #0b0c0c;
+ color: #fff;
width: 100%;
margin-bottom: 20px;
border-spacing: 0;
@@ -5770,7 +5789,7 @@ screen and (-ms-high-contrast:active) {
font-size: 1rem;
line-height: 1.25;
font-weight: 400;
- color: #0b0c0c;
+ color: #fff;
margin-bottom: 10px
}
@@ -5806,7 +5825,7 @@ screen and (-ms-high-contrast:active) {
}
.govuk-tabs__list-item:before {
- color: #0b0c0c;
+ color: #fff;
content: "—";
margin-left: -25px;
padding-right: 5px
@@ -5853,18 +5872,21 @@ screen and (-ms-high-contrast:active) {
}
.govuk-tabs__tab:link {
- color: #1d70b8
+ color: #3892e0
}
.govuk-tabs__tab:visited {
- color: #4c2c92
+ color: #9d80db
}
.govuk-tabs__tab:hover {
- color: #003078
+ color: #5ca5e6
+}
+
+.govuk-tabs__tab:active {
+ color: #fff
}
-.govuk-tabs__tab:active,
.govuk-tabs__tab:focus {
color: #0b0c0c
}
@@ -5900,7 +5922,7 @@ screen and (-ms-high-contrast:active) {
margin-left: 0;
padding: 10px 20px;
float: left;
- background-color: #f3f2f1;
+ background-color: #263136;
text-align: center
}
@@ -5915,7 +5937,7 @@ screen and (-ms-high-contrast:active) {
padding: 14px 19px 16px;
border: 1px solid #b1b4b6;
border-bottom: 0;
- background-color: #fff
+ background-color: #1e1f21
}
.govuk-frontend-supported .govuk-tabs__list-item--selected .govuk-tabs__tab {
@@ -5928,7 +5950,7 @@ screen and (-ms-high-contrast:active) {
.govuk-frontend-supported .govuk-tabs__tab:link,
.govuk-frontend-supported .govuk-tabs__tab:visited {
- color: #0b0c0c
+ color: #fff
}
}
@@ -5942,12 +5964,12 @@ screen and (-ms-high-contrast:active) {
@media (min-width:40.0625em) {
.govuk-frontend-supported .govuk-tabs__tab:hover {
- color: rgba(11, 12, 12, .99)
+ color: hsla(0, 0%, 100%, .99)
}
.govuk-frontend-supported .govuk-tabs__tab:active,
.govuk-frontend-supported .govuk-tabs__tab:focus {
- color: #0b0c0c
+ color: #fff
}
}
@@ -6039,13 +6061,13 @@ screen and (-ms-high-contrast:active) {
}
.govuk-task-list__item--with-link:hover {
- background: #f3f2f1
+ background: #0b0c0c
}
.govuk-task-list__name-and-hint {
display: table-cell;
vertical-align: top;
- color: #0b0c0c
+ color: #fff
}
@media print {
@@ -6059,7 +6081,7 @@ screen and (-ms-high-contrast:active) {
padding-left: 10px;
text-align: right;
vertical-align: top;
- color: #0b0c0c
+ color: #fff
}
@media print {
@@ -6069,7 +6091,7 @@ screen and (-ms-high-contrast:active) {
}
.govuk-task-list__status--cannot-start-yet {
- color: #505a5f
+ color: #ccc
}
.govuk-task-list__link:after {
@@ -6084,7 +6106,7 @@ screen and (-ms-high-contrast:active) {
.govuk-task-list__hint {
margin-top: 5px;
- color: #505a5f
+ color: #ccc
}
.govuk-warning-text {
@@ -6134,10 +6156,10 @@ screen and (-ms-high-contrast:active) {
min-width: 35px;
min-height: 35px;
margin-top: -7px;
- border: 3px solid #0b0c0c;
+ border: 3px solid #fff;
border-radius: 50%;
- color: #fff;
- background: #0b0c0c;
+ color: #1e1f21;
+ background: #fff;
font-size: 30px;
line-height: 29px;
text-align: center;
@@ -6162,7 +6184,7 @@ screen and (-ms-high-contrast:active) {
}
.govuk-warning-text__text {
- color: #0b0c0c;
+ color: #fff;
display: block;
padding-left: 45px
}
Action run for 4672a71 |
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..ada7927b3 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: govuk-colour("white");
+ $govuk-accordion-hover-colour: govuk-colour("black");
$govuk-accordion-icon-focus-colour: $govuk-focus-colour;
$govuk-accordion-bottom-border-width: 1px;
diff --git a/packages/govuk-frontend/dist/govuk/components/button/_index.scss b/packages/govuk-frontend/dist/govuk/components/button/_index.scss
index 0df98a4f8..a19d767a9 100644
--- a/packages/govuk-frontend/dist/govuk/components/button/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/button/_index.scss
@@ -6,8 +6,10 @@
///
/// @type Colour
/// @access public
+///
+/// Same green as govuk-success-colour
-$govuk-button-background-colour: govuk-colour("green") !default;
+$govuk-button-background-colour: #00a357 !default;
/// Button component text colour
///
@@ -34,7 +36,7 @@ $govuk-inverse-button-text-colour: $govuk-brand-colour !default;
$govuk-button-colour: $govuk-button-background-colour;
$govuk-button-text-colour: $govuk-button-text-colour;
$govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%);
- $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
+ $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 40%);
// Secondary button variables
$govuk-secondary-button-colour: govuk-colour("light-grey");
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..72f26c2f3 100644
--- a/packages/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss
@@ -9,7 +9,7 @@
// Visually separate the cookie banner from content underneath
// when user changes colours in their browser.
- border-bottom: $border-bottom-width solid transparent;
+ border-bottom: 1px solid $govuk-border-colour;
background-color: $govuk-canvas-background-colour;
}
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss b/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
index 5735689b0..f1011f82d 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
@@ -19,7 +19,7 @@
// https://bugs.webkit.org/show_bug.cgi?id=224746
&::-webkit-file-upload-button {
-webkit-appearance: button;
- color: inherit;
+ color: govuk-colour("black");
font: inherit;
}
diff --git a/packages/govuk-frontend/dist/govuk/components/header/_index.scss b/packages/govuk-frontend/dist/govuk/components/header/_index.scss
index 858595250..7689e0720 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/header/_index.scss
@@ -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 $govuk-body-background-colour;
color: $govuk-header-text;
background: $govuk-header-background;
}
diff --git a/packages/govuk-frontend/dist/govuk/components/input/_index.scss b/packages/govuk-frontend/dist/govuk/components/input/_index.scss
index 694a0d214..651ba66bc 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/input/_index.scss
@@ -13,8 +13,10 @@
padding: govuk-spacing(1);
// setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476)
// as background-color and color need to always be set together, color should not be set either
- border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+ border: $govuk-border-width-form-element solid govuk-colour("white");
border-radius: 0;
+ color: $govuk-text-colour;
+ background-color: $govuk-body-background-colour;
// Disable inner shadow and remove rounded corners
-webkit-appearance: none;
diff --git a/packages/govuk-frontend/dist/govuk/components/pagination/_index.scss b/packages/govuk-frontend/dist/govuk/components/pagination/_index.scss
index 5f74f5bf6..6da49a195 100644
--- a/packages/govuk-frontend/dist/govuk/components/pagination/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/pagination/_index.scss
@@ -32,7 +32,7 @@
float: left; // Float is ignored if flex is active for prev/next links
&:hover {
- background-color: govuk-colour("light-grey");
+ background-color: govuk-colour("black");
}
}
diff --git a/packages/govuk-frontend/dist/govuk/components/select/_index.scss b/packages/govuk-frontend/dist/govuk/components/select/_index.scss
index af2261030..59843a277 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/select/_index.scss
@@ -21,7 +21,7 @@
// Default user agent colours for selects can have low contrast,
// and may look disabled (#2435)
color: $govuk-text-colour;
- background-color: govuk-colour("white");
+ background-color: $govuk-body-background-colour;
&:focus {
outline: $govuk-focus-width solid $govuk-focus-colour;
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/_index.scss b/packages/govuk-frontend/dist/govuk/components/tabs/_index.scss
index a0e628067..c4fc9d1ed 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/_index.scss
@@ -66,7 +66,7 @@
padding: govuk-spacing(2) govuk-spacing(4);
float: left;
- background-color: govuk-colour("light-grey");
+ background-color: $govuk-canvas-background-colour;
text-align: center;
&::before {
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..06b9f2abb 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: govuk-colour("black");
.govuk-task-list {
@include govuk-font($size: 19);
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/_index.scss b/packages/govuk-frontend/dist/govuk/components/textarea/_index.scss
index 3945df09d..5e6bb9e52 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/_index.scss
@@ -18,6 +18,9 @@
border: $govuk-border-width-form-element solid $govuk-input-border-colour;
border-radius: 0;
+ color: $govuk-text-colour;
+ background-color: $govuk-body-background-colour;
+
-webkit-appearance: none;
&:focus {
diff --git a/packages/govuk-frontend/dist/govuk/settings/_colours-applied.scss b/packages/govuk-frontend/dist/govuk/settings/_colours-applied.scss
index cb82b867d..74dc1ffb3 100644
--- a/packages/govuk-frontend/dist/govuk/settings/_colours-applied.scss
+++ b/packages/govuk-frontend/dist/govuk/settings/_colours-applied.scss
@@ -20,7 +20,7 @@ $govuk-brand-colour: govuk-colour("blue") !default;
/// @type Colour
/// @access public
-$govuk-text-colour: govuk-colour("black") !default;
+$govuk-text-colour: #ffffff !default;
/// Canvas background colour
///
@@ -30,14 +30,14 @@ $govuk-text-colour: govuk-colour("black") !default;
/// @type Colour
/// @access public
-$govuk-canvas-background-colour: govuk-colour("light-grey") !default;
+$govuk-canvas-background-colour: #263136 !default;
/// Body background colour
///
/// @type Colour
/// @access public
-$govuk-body-background-colour: govuk-colour("white") !default;
+$govuk-body-background-colour: #1e1f21 !default;
/// Text colour for print media
///
@@ -55,7 +55,7 @@ $govuk-print-text-colour: #000000 !default;
/// @type Colour
/// @access public
-$govuk-secondary-text-colour: govuk-colour("dark-grey") !default;
+$govuk-secondary-text-colour: #cccccc !default;
/// Focus colour
///
@@ -83,8 +83,10 @@ $govuk-focus-text-colour: govuk-colour("black") !default;
///
/// @type Colour
/// @access public
+///
+/// Increased the luminance of existing red until it reached 5:1 contrast
-$govuk-error-colour: govuk-colour("red") !default;
+$govuk-error-colour: #e96753 !default;
/// Success colour
///
@@ -92,8 +94,10 @@ $govuk-error-colour: govuk-colour("red") !default;
///
/// @type Colour
/// @access public
+///
+/// Increased the luminance of existing green until it reached 5:1 contrast
-$govuk-success-colour: govuk-colour("green") !default;
+$govuk-success-colour: #00a357 !default;
/// Border colour
///
@@ -111,7 +115,7 @@ $govuk-border-colour: govuk-colour("mid-grey") !default;
/// @type Colour
/// @access public
-$govuk-input-border-colour: govuk-colour("black") !default;
+$govuk-input-border-colour: govuk-colour("white") !default;
/// Input hover colour
///
@@ -131,27 +135,27 @@ $govuk-hover-colour: govuk-colour("mid-grey") !default;
/// @type Colour
/// @access public
-$govuk-link-colour: govuk-colour("blue") !default;
+$govuk-link-colour: #3892e0 !default;
/// Visited link colour
///
/// @type Colour
/// @access public
-$govuk-link-visited-colour: govuk-colour("purple") !default;
+$govuk-link-visited-colour: #9d80db !default;
/// Link hover colour
///
/// @type Colour
/// @access public
-$govuk-link-hover-colour: govuk-colour("dark-blue") !default;
+$govuk-link-hover-colour: #5ca5e6 !default;
/// Active link colour
///
/// @type Colour
/// @access public
-$govuk-link-active-colour: govuk-colour("black") !default;
+$govuk-link-active-colour: govuk-colour("white") !default;
/*# sourceMappingURL=_colours-applied.scss.map */
Action run for 4672a71 |
Closed
1 task
|
Closing this one now the spike is completed. We can reopen if we decide to explore further 😊 |
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.
Draft PR for sharing very early ideas on a dark mode palette.
Please see alphagov/govuk-design-system#3663 for more context.
Note that this is not a commitment from the Design System team to roll out dark mode across GOV.UK any time soon! It's part of a series of experiments we're doing to potentially support embedded web views within the One Login app.