Remove overlap between hover and focus styling (#609)

* Remove overlap between Button hover and focus styles * Remove overlap between Breadcrumb hover and focus styles * Remove overlap between Link hover and focus styles * Remove :disabled selector --------- Co-authored-by: Vincent Smedinga <[email protected]>
Amsterdam · Oct 11, 2023 · 425b4c1 · 425b4c1
1 parent f03e527
commit 425b4c1
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 62 deletions.
diff --git a/packages/css/src/breadcrumb/breadcrumb.scss b/packages/css/src/breadcrumb/breadcrumb.scss
@@ -58,9 +58,7 @@
     text-transform: capitalize;
   }
 
-  &:focus,
-  &:hover,
-  &:active {
+  &:hover {
     color: var(--amsterdam-breadcrumb-item-link-hover-color);
     text-decoration: underline;
     text-decoration-thickness: 2px;

diff --git a/packages/css/src/button/button.scss b/packages/css/src/button/button.scss
@@ -33,16 +33,7 @@
   }
 }
 
-// Specificity hack to be able to style secondary button focus state
-// This isn't currently possible with the Utrecht component
-// We should really pull this component in our own repo...
-.amsterdam-button--secondary.amsterdam-button--secondary {
-  &:focus {
-    color: var(--amsterdam-button-secondary-focus-color);
-  }
-}
-
-.amsterdam-button--secondary:focus:not(:disabled, [aria-disabled="true"]) {
+.amsterdam-button--secondary:focus:not(:hover, [aria-disabled="true"]) {
   box-shadow: var(--amsterdam-button-secondary-focus-box-shadow);
 }
 
@@ -52,6 +43,6 @@
   }
 }
 
-.amsterdam-button--tertiary:focus:not(:disabled, [aria-disabled="true"]) {
-  box-shadow: var(--amsterdam-button-tertiary-focus-box-shadow);
+.amsterdam-button--tertiary:focus:not(:hover, [aria-disabled="true"]) {
+  box-shadow: none;
 }
diff --git a/packages/css/src/link/link.scss b/packages/css/src/link/link.scss
@@ -15,10 +15,8 @@
   font-weight: var(--amsterdam-link-font-weight);
   outline-offset: var(--amsterdam-link-outline-offset);
 
-  &:hover,
-  &:active,
-  &:focus {
-    color: var(--amsterdam-link-focus-color);
+  &:hover {
+    color: var(--amsterdam-link-hover-color);
   }
 
   @include reset;
@@ -31,11 +29,9 @@
   text-decoration-thickness: var(--amsterdam-link-standalone-text-decoration-thickness);
   text-underline-offset: var(--amsterdam-link-standalone-text-underline-offset);
 
-  &:hover,
-  &:active,
-  &:focus {
-    text-decoration-thickness: var(--amsterdam-link-standalone-focus-text-decoration-thickness);
-    text-underline-offset: var(--amsterdam-link-standalone-focus-text-underline-offset);
+  &:hover {
+    text-decoration-thickness: var(--amsterdam-link-standalone-hover-text-decoration-thickness);
+    text-underline-offset: var(--amsterdam-link-standalone-hover-text-underline-offset);
   }
 
   @media screen and (width > $amsterdam-breakpoint) {
@@ -50,11 +46,9 @@
   text-decoration: var(--amsterdam-link-inline-text-decoration);
   text-decoration-thickness: var(--amsterdam-link-text-decoration-thickness);
 
-  &:hover,
-  &:active,
-  &:focus {
-    text-decoration: var(--amsterdam-link-inline-focus-text-decoration);
-    text-underline-offset: var(--amsterdam-link-inline-focus-text-underline-offset);
+  &:hover {
+    text-decoration: var(--amsterdam-link-inline-hover-text-decoration);
+    text-underline-offset: var(--amsterdam-link-inline-hover-text-underline-offset);
   }
 
   &:visited {
@@ -70,12 +64,10 @@
   line-height: var(--amsterdam-link-in-list-line-height);
   text-decoration: var(--amsterdam-link-in-list-text-decoration);
 
-  &:hover,
-  &:active,
-  &:focus {
-    text-decoration: var(--amsterdam-link-in-list-focus-text-decoration);
-    text-decoration-thickness: var(--amsterdam-link-in-list-focus-text-decoration-thickness);
-    text-underline-offset: var(--amsterdam-link-in-list-focus-text-underline-offset);
+  &:hover {
+    text-decoration: var(--amsterdam-link-in-list-hover-text-decoration);
+    text-decoration-thickness: var(--amsterdam-link-in-list-hover-text-decoration-thickness);
+    text-underline-offset: var(--amsterdam-link-in-list-hover-text-underline-offset);
   }
 
   @media screen and (width > $amsterdam-breakpoint) {
@@ -94,9 +86,7 @@
 .amsterdam-link--on-background-dark {
   color: var(--amsterdam-link-on-background-dark-color);
 
-  &:hover,
-  &:active,
-  &:focus {
+  &:hover {
     color: var(--amsterdam-link-on-background-dark-hover-color);
   }
 
@@ -108,9 +98,7 @@
 .amsterdam-link--on-background-light {
   color: var(--amsterdam-link-on-background-light-color);
 
-  &:hover,
-  &:active,
-  &:focus {
+  &:hover {
     color: var(--amsterdam-link-on-background-light-hover-color);
   }
 
@@ -121,12 +109,10 @@
 
 .amsterdam-link--inline.amsterdam-link--on-background-dark,
 .amsterdam-link--inline.amsterdam-link--on-background-light {
-  text-decoration: var(--amsterdam-link-inline-focus-text-decoration);
-  text-underline-offset: var(--amsterdam-link-inline-focus-text-underline-offset);
+  text-decoration: var(--amsterdam-link-inline-hover-text-decoration);
+  text-underline-offset: var(--amsterdam-link-inline-hover-text-underline-offset);
 
-  &:hover,
-  &:active,
-  &:focus {
+  &:hover {
     text-decoration: var(--amsterdam-link-inline-text-decoration);
   }
 }
diff --git a/proprietary/tokens/src/components/amsterdam/button.tokens.json b/proprietary/tokens/src/components/amsterdam/button.tokens.json
@@ -23,10 +23,7 @@
         },
         "focus": {
           "box-shadow": {
-            "value": "inset 0 0 0 3px {amsterdam.color.dark-blue}"
-          },
-          "color": {
-            "value": "{amsterdam.color.dark-blue}"
+            "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}"
           }
         }
       },
@@ -35,11 +32,6 @@
           "box-shadow": {
             "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey3}"
           }
-        },
-        "focus": {
-          "box-shadow": {
-            "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey3}"
-          }
         }
       }
     }

diff --git a/proprietary/tokens/src/components/amsterdam/link.tokens.json b/proprietary/tokens/src/components/amsterdam/link.tokens.json
@@ -9,11 +9,11 @@
       "font-weight": {
         "value": "{amsterdam.typography.font-weight.normal}"
       },
-      "focus": {
+      "hover": {
         "color": { "value": "{amsterdam.color.dark-blue}" }
       },
       "inline": {
-        "focus": {
+        "hover": {
           "text-decoration": { "value": "underline" },
           "text-underline-offset": { "value": "3px" }
         },
@@ -33,7 +33,7 @@
       },
       "in-list": {
         "gap": { "value": "0.5em" },
-        "focus": {
+        "hover": {
           "text-decoration": { "value": "underline" },
           "text-decoration-thickness": { "value": "2px" },
           "text-underline-offset": { "value": "7px" }
@@ -50,7 +50,7 @@
       "standalone": {
         "text-underline-offset": { "value": "8px" },
         "text-decoration-thickness": { "value": "2px" },
-        "focus": {
+        "hover": {
           "text-decoration-thickness": { "value": "3px" },
           "text-underline-offset": { "value": "7px" }
         },

diff --git a/proprietary/tokens/src/components/utrecht/button.tokens.json b/proprietary/tokens/src/components/utrecht/button.tokens.json
@@ -75,9 +75,7 @@
           "color": {}
         },
         "focus": {
-          "background-color": {
-            "value": "{amsterdam.color.dark-blue}"
-          },
+          "background-color": {},
           "border-color": {},
           "border-width": {}
         },