Fixes

Author: philwareham

src/assets/sass/designpatterns.scss

@@ -51,8 +51,7 @@ $colors: (
     "a":                  var(--clr-a),
     "a-interact":         var(--clr-a-interact),
     "focus":              var(--clr-focus),
-    "nav-hover":          var(--clr-nav-hover),
-    "nav-hover-selected": var(--clr-nav-hover-selected),
+    "nav-interact":       var(--clr-nav-interact),
     "nav-active":         var(--clr-nav-active),
     "bkgd":               var(--clr-bkgd),
     "bkgd-box":           var(--clr-bkgd-box),

src/assets/sass/modules/_buttons.scss

@@ -61,14 +61,12 @@ button,
 
     &:hover {
         filter: brightness(1.05);
-        text-decoration: none;
     }
 
     &:active {
         top: 2px;
         box-shadow: none;
         filter: brightness(0.95);
-        text-decoration: none;
     }
 
     &:focus {

src/assets/sass/modules/_fonts.scss

@@ -1,7 +1,6 @@
 @use "../setup";
 
-/* ==========================================================================
-   Fonts
+/* Fonts
    ========================================================================== */
 
 /**

src/assets/sass/modules/_forms.scss

@@ -274,20 +274,16 @@ textarea {
 }
 
 /**
- * Remove the inner padding in Chrome and Safari on macOS.
+ * Styling for file inputs.
  */
 
-[type="search"]::-webkit-search-decoration {
-    /* autoprefixer: off */
-    appearance: none;
-}
-
 [type="file"] {
     box-sizing: border-box;
     height: auto;
     min-height: 2em; // 32px / 16px
     padding: 0.25em 0.1875em; // 8px / 16px + 3px / 16px
     border: 1px solid var(--clr-brdr);
+    border-radius: 0;
     background: var(--clr-bkgd-form);
     appearance: none;
     cursor: pointer;
@@ -337,6 +333,15 @@ textarea {
     filter: brightness(0.95);
 }
 
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+    /* autoprefixer: off */
+    appearance: none;
+}
+
 /**
  * Use indicator icon to signify the drop-down ability of `select`.
  */

src/assets/sass/modules/_links.scss

@@ -111,7 +111,7 @@ h6 {
     padding: 0.25em 0.5em;
     transform: translateY(-5em);
     transition: transform 0.25s ease-in-out;
-    background-color: var(--clr-a-alt-interact);
+    background-color: var(--clr-nav-active);
     color: var(--clr-text);
 
     &:focus,

src/assets/sass/modules/_navigation.scss

@@ -52,32 +52,27 @@
         font-weight: bold;
 
         &:hover {
-            background-color: var(--clr-nav-hover);
+            background-color: var(--clr-nav-interact);
             color: var(--clr-text);
             text-decoration: none;
         }
 
         &:active {
-            background-color: var(--clr-nav-active);
-            color: var(--clr-text-promoted);
+            filter: brightness(0.95);
             text-decoration: none;
         }
 
         &:focus {
-            background-color: var(--clr-nav-hover);
+            background-color: var(--clr-nav-interact);
         }
     }
 
     .active a {
-        background-color: var(--clr-nav-hover);
+        background-color: var(--clr-nav-active);
 
         &:hover,
         &:focus {
-            background-color: var(--clr-nav-hover-selected);
-        }
-
-        &:active {
-            background-color: var(--clr-nav-active);
+            background-color: var(--clr-nav-interact);
         }
     }
 

src/assets/sass/modules/_tables.scss

@@ -82,7 +82,7 @@ tbody {
         }
 
         &.selected {
-            background-color: var(--clr-nav-hover-selected);
+            background-color: var(--clr-nav-active);
         }
     }
 

src/assets/sass/style.scss

@@ -25,8 +25,7 @@
     --clr-a-alt:                     #9cd7ff;
     --clr-a-alt-interact:            #e6f0ff;
     --clr-focus:                     hsla(216, 100%, 50%, 1);
-    --clr-nav-hover:                 #9cd7ff;
-    --clr-nav-hover-selected:        #c1e4ff;
+    --clr-nav-interact:              #b1ddfd;
     --clr-nav-active:                #e6f0ff;
     // neutral colours
     --clr-bkgd:                      #ffffff;
@@ -88,8 +87,7 @@
         --clr-a:                  #9cd7ff;
         --clr-a-interact:         #bde4ff;
         --clr-focus:              #ff00cc;
-        --clr-nav-hover:          #1b2f48;
-        --clr-nav-hover-selected: #1b314f;
+        --clr-nav-interact:       #1b2f48;
         --clr-nav-active:         #1c3456;
         // neutral colours
         --clr-bkgd:               #373e45;

src/docs/design-patterns.html

@@ -138,11 +138,8 @@ <h3>Interaction</h3>
                                 <p><code>nav-active</code></p>
                                 <div class="design-patterns--color design-patterns--clr-nav-active"></div>
 
-                                <p><code>nav-hover-selected</code></p>
-                                <div class="design-patterns--color design-patterns--clr-nav-hover-selected"></div>
-
-                                <p><code>nav-hover</code></p>
-                                <div class="design-patterns--color design-patterns--clr-nav-hover"></div>
+                                <p><code>nav-interact</code></p>
+                                <div class="design-patterns--color design-patterns--clr-nav-interact"></div>
 
                                 <p><code>focus</code></p>
                                 <div class="design-patterns--color design-patterns--clr-focus"></div>