From 487f05a7ea33934d3e91b8cff05a5175517f515d Mon Sep 17 00:00:00 2001 From: Julian Skinner Date: Wed, 16 Oct 2024 09:53:59 -0500 Subject: [PATCH] style(pds-link): update focus-visible and hover states based on figma design DSS-1053 --- libs/core/src/components/pds-link/pds-link.scss | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/libs/core/src/components/pds-link/pds-link.scss b/libs/core/src/components/pds-link/pds-link.scss index a4c11a5f2..f0c7710b1 100644 --- a/libs/core/src/components/pds-link/pds-link.scss +++ b/libs/core/src/components/pds-link/pds-link.scss @@ -1,10 +1,11 @@ :host { --border-outline: 4px solid var(--pine-color-blue-200); - --border-radius: var(--pine-border-radius-075); + --border-radius: var(--pine-border-radius-050); --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300); - --color-text-default: var(--pine-color-grey-900); + --color-text: var(--pine-color-grey-950); + --color-text-hover: var(--pine-color-grey-900); --font-size: var(--pine-font-size-100); --font-size-sm: var(--pine-font-size-085); @@ -29,10 +30,16 @@ display: inline-flex; font-weight: inherit; + &:hover { + color: var(--color-text-hover); + } + &:focus-visible { + border-radius: var(--border-radius); // outline: var(--pine-border-focus); Border radius for outline does not work in Safari box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari outline: none; + padding: var(--pine-spacing-050); position: relative; } }