FCL-152 | fixing up colours that don't look too good

nationalarchives · Nov 29, 2024 · bbee81b · bbee81b
1 parent 2271bf2
commit bbee81b
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 36 deletions.
diff --git a/ds_judgements_public_ui/sass/includes/_basic_search_form.scss b/ds_judgements_public_ui/sass/includes/_basic_search_form.scss
@@ -88,19 +88,18 @@
       font-size: $typography-md-text-size;
       font-weight: bold;
       color: colour-var("link");
-      text-decoration: none;
+      text-decoration: underline;
 
       background: transparent;
       border: 0;
-      border-bottom: 1px solid $color-dark-blue;
 
       &:visited {
-        color: $color-dark-blue;
+        color: colour-var("link");
       }
 
       &:hover {
-        color: colour-var("accent-link");
-        text-decoration: underline;
+        color: colour-var("link");
+        text-decoration: none;
       }
     }
 

diff --git a/ds_judgements_public_ui/sass/includes/_buttons.scss b/ds_judgements_public_ui/sass/includes/_buttons.scss
@@ -1,7 +1,7 @@
 .button-cta {
   @include call-to-action-button;
 
-  border: 2px solid colour-var("blue");
+  border: 2px solid brand-colour("navy");
 
   &:disabled,
   &[aria-disabled="true"] {
@@ -23,12 +23,12 @@
 .button-secondary {
   @include call-to-action-button;
 
-  color: colour-var("blue");
+  color: brand-colour("navy");
   background-color: colour-var("contrast-button-background");
-  border: 2px solid colour-var("blue");
+  border: 2px solid brand-colour("navy");
 
   &:visited {
-    color: colour-var("blue");
+    color: brand-colour("navy");
   }
 
   &:focus,

diff --git a/ds_judgements_public_ui/sass/includes/_judgment_text_toolbar.scss b/ds_judgements_public_ui/sass/includes/_judgment_text_toolbar.scss
@@ -113,7 +113,7 @@
       display: inline-block;
 
       font-size: $typography-md-text-size;
-      color: colour-var("blue");
+      color: colour-var("link");
       text-decoration: underline;
 
       background: url($fa_chevron_down_link_blue) right no-repeat;

diff --git a/ds_judgements_public_ui/sass/includes/_mixins.scss b/ds_judgements_public_ui/sass/includes/_mixins.scss
@@ -72,19 +72,19 @@
   color: colour-var("accent-button-text");
   text-decoration: none;
 
-  background-color: colour-var("navy");
+  background-color: brand-colour("navy");
   border: 0;
 
   &:focus,
   &:hover {
     @include focus-default;
 
-    color: colour-var("accent-button-text") !important;
+    color: colour-var("accent-button-text");
     text-decoration: underline;
 
-    background-color: transparent;
-    border-color: colour-var("navy");
-    outline-color: colour-var("navy");
+    background-color: brand-colour("navy");
+    border-color: brand-colour("navy");
+    outline-color: brand-colour("navy");
     outline-offset: 0.2rem;
   }
 }
@@ -93,20 +93,26 @@
   @include call-to-action-button;
 
   padding: $space-3 $space-5;
-  color: colour-var("blue") !important;
+  color: brand-colour("navy");
   background-color: transparent;
-  border: 2px solid colour-var("navy");
+  border: 2px solid brand-colour("navy");
+
+  &:hover,
+  &:focus {
+    color: brand-colour("navy");
+    background-color: transparent;
+  }
 }
 
 @mixin emphasised-block {
   padding: $space-4;
   background-color: colour-var("accent-background-light");
-  border-left: 0.5rem solid $color-highlight-blue;
+  border-left: 0.5rem solid brand-colour("navy");
 }
 
 @mixin focus-default {
   z-index: 999;
-  outline: 5px solid colour-var("focus-outline");
+  outline: 5px solid brand-colour("navy");
   outline-offset: 2px;
 }
 

diff --git a/ds_judgements_public_ui/sass/includes/_notification_message.scss b/ds_judgements_public_ui/sass/includes/_notification_message.scss
@@ -17,8 +17,8 @@
   &--success {
     @include page-notification;
 
-    color: colour-var("green");
-    border-color: colour-var("green");
+    color: brand-colour("green");
+    border-color: brand-colour("green");
   }
 
   &--failure {
@@ -39,8 +39,8 @@
   &--success {
     @include context-notification;
 
-    color: colour-var("green");
-    border-color: colour-var("green");
+    color: brand-colour("green");
+    border-color: brand-colour("green");
   }
 
   &--failure {

diff --git a/ds_judgements_public_ui/sass/includes/_structured_search.scss b/ds_judgements_public_ui/sass/includes/_structured_search.scss
@@ -193,18 +193,18 @@
     margin: 0;
     font-size: $typography-sm-text-size;
     font-weight: $typography-bold-font-weight;
-    color: colour-var("red");
+    color: colour-var("form-error-text");
   }
 
   &__to-date-error-message {
     margin: 0;
     font-size: $typography-sm-text-size;
     font-weight: $typography-bold-font-weight;
-    color: colour-var("red");
+    color: colour-var("form-error-text");
   }
 
   input:invalid {
-    border-color: colour-var("red");
+    border-color: colour-var("form-error-text");
   }
 
   input:focus:invalid {
@@ -334,7 +334,7 @@
     box-sizing: border-box;
     width: 100% !important;
     margin-bottom: 0;
-    border-color: colour-var("red");
+    border-color: colour-var("form-error-text");
   }
 
   fieldset {
@@ -346,7 +346,7 @@
   &__multi-fields-panel {
     fieldset.with-errors {
       padding-left: $space-6;
-      border-left: 4px solid colour-var("red");
+      border-left: 4px solid colour-var("form-error-text");
 
       .structured-search__help-text {
         margin-bottom: $space-2;

diff --git a/ds_judgements_public_ui/sass/includes/govuk_overrides/_details.scss b/ds_judgements_public_ui/sass/includes/govuk_overrides/_details.scss
@@ -5,7 +5,7 @@
   padding: $space-2;
 
   background-color: colour-var("background");
-  border: 3px solid colour-var("blue");
+  border: 3px solid brand-colour("navy");
 }
 
 .govuk-details--compact {

diff --git a/ds_judgements_public_ui/sass/includes/govuk_overrides/_grid.scss b/ds_judgements_public_ui/sass/includes/govuk_overrides/_grid.scss
@@ -83,8 +83,7 @@
 
 .govuk-grid-column-one-third__grid_info_card_text {
   color: colour-var("accent-font-base");
-  text-decoration-color: colour-var("accent-background-light");
-  text-decoration-line: underline;
+  text-decoration: underline;
 
   &:hover {
     text-decoration: none;

diff --git a/ds_judgements_public_ui/sass/includes/govuk_overrides/_notification.scss b/ds_judgements_public_ui/sass/includes/govuk_overrides/_notification.scss
@@ -4,8 +4,8 @@
 }
 
 .govuk-notification-banner_red {
-  background-color: colour-var("red");
-  border: 5px solid colour-var("red");
+  background-color: brand-colour("pastel-pink");
+  border: 5px solid brand-colour("pastel-pink");
 }
 
 .govuk-notification-banner__link {

diff --git a/ds_judgements_public_ui/sass/main.scss b/ds_judgements_public_ui/sass/main.scss
@@ -1,5 +1,8 @@
 @use "@nationalarchives/frontend/nationalarchives/tools/colour" as *;
 
+// Vendor imports
+@import "@nationalarchives/ds-caselaw-frontend/src/main";
+
 // Setup
 @import "includes/variables";
 @import "includes/mixins";
@@ -16,9 +19,6 @@
 @import "includes/spacing";
 @import "includes/typography";
 
-// Vendor imports
-@import "@nationalarchives/ds-caselaw-frontend/src/main";
-
 $govuk-font-family: $font-open-sans;
 $govuk-focus-colour: colour-var("focus-outline");