diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-eiendom-have-to-match-the-active-state.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-eiendom-have-to-match-the-active-state.snap.png index 5116ba25500..07172b86b0b 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-eiendom-have-to-match-the-active-state.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-eiendom-have-to-match-the-active-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-eiendom-have-to-match-the-anchor-contrast-active-state.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-eiendom-have-to-match-the-anchor-contrast-active-state.snap.png index a2f2bfd0fea..667450d6078 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-eiendom-have-to-match-the-anchor-contrast-active-state.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-eiendom-have-to-match-the-anchor-contrast-active-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-eiendom-have-to-match-the-anchor-contrast-hover-state.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-eiendom-have-to-match-the-anchor-contrast-hover-state.snap.png index d959662db3a..667450d6078 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-eiendom-have-to-match-the-anchor-contrast-hover-state.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-eiendom-have-to-match-the-anchor-contrast-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-eiendom-have-to-match-the-hover-state.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-eiendom-have-to-match-the-hover-state.snap.png index 36c86a93111..07172b86b0b 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-eiendom-have-to-match-the-hover-state.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-eiendom-have-to-match-the-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-the-active-state.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-the-active-state.snap.png index 9c92055788c..a70d05aa26c 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-the-active-state.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-the-active-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-the-anchor-contrast-hover-state.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-the-anchor-contrast-hover-state.snap.png index 9bb61d5ffd5..76093324e24 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-the-anchor-contrast-hover-state.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-the-anchor-contrast-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-the-hover-state.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-the-hover-state.snap.png index dfa2c47dfbc..ecc94ce28e7 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-the-hover-state.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-the-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-active-state.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-active-state.snap.png index 4b87b55b9c1..07172b86b0b 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-active-state.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-active-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-anchor-contrast-active-state.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-anchor-contrast-active-state.snap.png index a2f2bfd0fea..667450d6078 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-anchor-contrast-active-state.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-anchor-contrast-active-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-anchor-contrast-hover-state.snap.png b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-anchor-contrast-hover-state.snap.png index 3c4eb2a848a..667450d6078 100644 Binary files a/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-anchor-contrast-hover-state.snap.png and b/packages/dnb-eufemia/src/components/anchor/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-anchor-contrast-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap b/packages/dnb-eufemia/src/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap index 77b57821b7d..ee13d3c18fc 100644 --- a/packages/dnb-eufemia/src/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap @@ -263,6 +263,9 @@ sup .dnb-anchor, sub .dnb-anchor { .dnb-p .dnb-anchor, .dnb-lead .dnb-anchor, .dnb-h--xx-large .dnb-anchor, .dnb-h--x-large .dnb-anchor, .dnb-h--large .dnb-anchor, .dnb-h--medium .dnb-anchor, .dnb-h--basis .dnb-anchor, .dnb-h--small .dnb-anchor, .dnb-h--x-small .dnb-anchor { font-size: inherit; } +[data-visual-test-wrapper] .dnb-anchor { + transition: none; +} .dnb-anchor:focus-visible { background-color: transparent; transition: none; @@ -276,16 +279,20 @@ sup .dnb-anchor, sub .dnb-anchor { .dnb-anchor:focus-visible, .dnb-section .dnb-anchor:focus-visible.dnb-anchor { text-decoration: none; } -.dnb-anchor:hover { +.dnb-anchor:active { + border-radius: 0.25em; border-radius: 0.25em; } -.dnb-anchor:hover, .dnb-section .dnb-anchor:hover.dnb-anchor { +.dnb-anchor:active, .dnb-section .dnb-anchor:active.dnb-anchor { text-decoration: none; } -.dnb-anchor:active { +.dnb-anchor:active, .dnb-section .dnb-anchor:active.dnb-anchor { + text-decoration: none; +} +.dnb-anchor:hover:not(.dnb-anchor--no-hover):not(.dnb-anchor--no-style) { border-radius: 0.25em; } -.dnb-anchor:active, .dnb-section .dnb-anchor:active.dnb-anchor { +.dnb-anchor:hover:not(.dnb-anchor--no-hover):not(.dnb-anchor--no-style), .dnb-section .dnb-anchor:hover:not(.dnb-anchor--no-hover):not(.dnb-anchor--no-style).dnb-anchor { text-decoration: none; } .dnb-anchor[target=_blank]:not(:empty, .dnb-anchor--no-icon) { @@ -313,9 +320,6 @@ sup .dnb-anchor, sub .dnb-anchor { .dnb-anchor[target=_blank]:not(:empty, .dnb-anchor--no-icon)::after { top: 0.125em; } -[data-visual-test-wrapper] .dnb-anchor { - transition: none; -} .dnb-anchor .dnb-icon { display: inline-block; transform: translateY(-0.0625em); @@ -378,7 +382,6 @@ sup .dnb-anchor, sub .dnb-anchor { text-decoration: none; } .dnb-anchor--no-style:hover { - color: inherit; background-color: transparent; } @@ -387,7 +390,6 @@ sup .dnb-anchor, sub .dnb-anchor { } .dnb-anchor--no-hover:hover { - color: inherit; background-color: transparent; } @@ -580,10 +582,6 @@ exports[`Anchor scss has to match theme css for ui 1`] = ` --anchor-background--active: var(--color-emerald-green); color: var(--anchor-color); } -.dnb-anchor:hover { - --anchor-color: var(--color-sea-green); - box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), -0.125em 0 0 0 var(--anchor-background--hover), 0.125em 0 0 0 var(--anchor-background--hover); -} .dnb-anchor:active { --anchor-color: var(--anchor-color--active); box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), -0.125em 0 0 0 var(--anchor-background--active), 0.125em 0 0 0 var(--anchor-background--active); @@ -591,6 +589,10 @@ exports[`Anchor scss has to match theme css for ui 1`] = ` .dnb-anchor:focus-visible { --anchor-color: var(--color-sea-green); } +.dnb-anchor:hover:not(.dnb-anchor--no-hover):not(.dnb-anchor--no-style) { + color: var(--color-sea-green); + box-shadow: inset 100vw 100vw 0 0 var(--color-mint-green-50), -0.125em 0 0 0 var(--color-mint-green-50), 0.125em 0 0 0 var(--color-mint-green-50); +} .dnb-anchor--hover { --anchor-color: var(--color-sea-green); diff --git a/packages/dnb-eufemia/src/components/anchor/style/anchor-mixins.scss b/packages/dnb-eufemia/src/components/anchor/style/anchor-mixins.scss index de84dc0da90..bc1ea5ffdb9 100644 --- a/packages/dnb-eufemia/src/components/anchor/style/anchor-mixins.scss +++ b/packages/dnb-eufemia/src/components/anchor/style/anchor-mixins.scss @@ -55,8 +55,6 @@ @mixin resetAnchorHoverStyle() { &:hover { - color: inherit; - // in case we don't want to change the color to the body color background-color: transparent; } @@ -171,17 +169,22 @@ @mixin anchorStyle() { @include anchorDefaultStyle(); + [data-visual-test-wrapper] & { + transition: none; + } + // have focus before :active, because of border-radius &:focus-visible { @include anchorFocusStyle(); } - &:hover { + &:active { @include anchorHoverStyle(); + @include anchorActiveStyle(); } - &:active { - @include anchorActiveStyle(); + &:hover:not(.dnb-anchor--no-hover):not(.dnb-anchor--no-style) { + @include anchorHoverStyle(); } &[target='_blank']:not(:empty, .dnb-anchor--no-icon) { @@ -197,10 +200,6 @@ border-radius 200ms ease-in-out, background 200ms ease-in-out; - [data-visual-test-wrapper] & { - transition: none; - } - // other stuff, not related to the Anchor directly .dnb-icon { display: inline-block; diff --git a/packages/dnb-eufemia/src/components/anchor/style/themes/dnb-anchor-theme-ui.scss b/packages/dnb-eufemia/src/components/anchor/style/themes/dnb-anchor-theme-ui.scss index 457d768b219..62e95019644 100644 --- a/packages/dnb-eufemia/src/components/anchor/style/themes/dnb-anchor-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/anchor/style/themes/dnb-anchor-theme-ui.scss @@ -30,10 +30,6 @@ color: var(--anchor-color); - &:hover { - @include anchorHover(); - } - &:active { @include anchorActive(); } @@ -41,6 +37,11 @@ &:focus-visible { @include anchorFocus(); } + + &:hover:not(.dnb-anchor--no-hover):not(.dnb-anchor--no-style) { + color: var(--color-sea-green); + @include anchor-mixins.anchorBackground(var(--color-mint-green-50)); + } } $useClasses: true !default;