fix(Anchor:) fixes anchor modifier .dnb-anchor--no-hover

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,17 +582,17 @@ 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);
 }
 .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);

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;

packages/dnb-eufemia/src/components/anchor/style/themes/dnb-anchor-theme-ui.scss

@@ -30,17 +30,18 @@
 
   color: var(--anchor-color);
 
-  &:hover {
-    @include anchorHover();
-  }
-
   &:active {
     @include anchorActive();
   }
 
   &: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;