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 94e81de3030..a9cf9139d22 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); @@ -357,7 +361,6 @@ sup .dnb-anchor, sub .dnb-anchor { text-decoration: none; } .dnb-anchor--no-style:hover { - color: inherit; background-color: transparent; } @@ -366,7 +369,6 @@ sup .dnb-anchor, sub .dnb-anchor { } .dnb-anchor--no-hover:hover { - color: inherit; background-color: transparent; } @@ -567,10 +569,6 @@ exports[`Anchor scss has to match theme css for ui 1`] = ` .dnb-anchor { color: var(--color-sea-green); } -.dnb-anchor:hover { - 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:active { color: var(--color-mint-green); box-shadow: inset 100vw 100vw 0 0 var(--color-emerald-green), -0.125em 0 0 0 var(--color-emerald-green), 0.125em 0 0 0 var(--color-emerald-green); @@ -578,6 +576,10 @@ exports[`Anchor scss has to match theme css for ui 1`] = ` .dnb-anchor:focus-visible { 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 { 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 31e8a25d0fb..b98f40c55ef 100644 --- a/packages/dnb-eufemia/src/components/anchor/style/anchor-mixins.scss +++ b/packages/dnb-eufemia/src/components/anchor/style/anchor-mixins.scss @@ -59,8 +59,6 @@ @mixin resetAnchorHoverStyle() { &:hover { - color: inherit; - // in case we don't want to change the color to the body color background-color: transparent; } @@ -183,17 +181,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) { 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 ea01287d42c..62582a2ebe2 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 @@ -3,11 +3,6 @@ @mixin anchorStyle() { color: var(--color-sea-green); - &:hover { - color: var(--color-sea-green); - @include anchor-mixins.anchorBackground(var(--color-mint-green-50)); - } - &:active { color: var(--color-mint-green); @include anchor-mixins.anchorBackground(var(--color-emerald-green)); @@ -16,6 +11,11 @@ &:focus-visible { color: var(--color-sea-green); } + + &: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;