From 425b4c155671b3b0b41beda2249d9b8298dfaed7 Mon Sep 17 00:00:00 2001 From: Aram <37216945+alimpens@users.noreply.github.com> Date: Wed, 11 Oct 2023 10:02:01 +0200 Subject: [PATCH] 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 --- packages/css/src/breadcrumb/breadcrumb.scss | 4 +- packages/css/src/button/button.scss | 15 ++---- packages/css/src/link/link.scss | 48 +++++++------------ .../components/amsterdam/button.tokens.json | 10 +--- .../src/components/amsterdam/link.tokens.json | 8 ++-- .../src/components/utrecht/button.tokens.json | 4 +- 6 files changed, 27 insertions(+), 62 deletions(-) diff --git a/packages/css/src/breadcrumb/breadcrumb.scss b/packages/css/src/breadcrumb/breadcrumb.scss index f85132e627..b7dd97d8bb 100644 --- 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 index 1455edd9a0..b285b7fb3f 100644 --- 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 index 4e9f9129b6..b067cefca9 100644 --- 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 index cad7a3fac4..2947f1d9ae 100644 --- 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 index 3562a0401c..56ea6ab7ff 100644 --- 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 index 715d62c597..b0579626f9 100644 --- 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": {} },