feat(Anchor): fix no-style and no-hover (#2739)

- The `.dnb-anchor--no-style` now removes **all** styling
- The  `.dnb-anchor--no-hover` removes all styling that uses `:hover`.

Uses the `:where()` pseudo-class to avoid increasing specificity, with fallback using `@supports {}`.

packages/dnb-eufemia/src/components/anchor/style/anchor-mixins.scss

@@ -53,15 +53,6 @@
   }
 }
 
-@mixin resetAnchorHoverStyle() {
-  &:hover {
-    color: inherit;
-
-    // in case we don't want to change the color to the body color
-    background-color: transparent;
-  }
-}
-
 @mixin resetAnimationStyle() {
   transition: none;
 }
@@ -178,7 +169,9 @@
   }
 
   &:hover {
-    @include anchorHoverStyle();
+    @include notNoHover() {
+      @include anchorHoverStyle();
+    }
   }
 
   &:active {
@@ -222,3 +215,32 @@
     @include anchorStyle();
   }
 }
+
+@mixin notNoStyle() {
+  :where(:not(.dnb-anchor--no-style)) {
+    @content;
+  }
+  :not(.dnb-anchor--no-style) {
+    @include whereFallback() {
+      @content;
+    }
+  }
+}
+
+@mixin notNoHover() {
+  &:where(:not(.dnb-anchor--no-hover)) {
+    @content;
+  }
+  &:not(.dnb-anchor--no-hover) {
+    @include whereFallback() {
+      @content;
+    }
+  }
+}
+
+@mixin whereFallback() {
+  /* stylelint-disable-next-line scss/operator-no-unspaced */
+  @supports not (selector(*:where(*))) {
+    @content;
+  }
+}

packages/dnb-eufemia/src/components/anchor/style/dnb-anchor.scss

@@ -16,12 +16,14 @@ button.dnb-anchor {
   appearance: none; // and use prefix to make sure webkit does  a good job
 }
 
-.dnb-anchor {
-  --anchor-underline-thickness: 0.0938rem;
-  @include anchorStyle();
-
-  &.dnb-anchor--contrast {
-    @include useAnchorContrastStyle();
+@include notNoStyle() {
+  &.dnb-anchor {
+    --anchor-underline-thickness: 0.0938rem;
+    @include anchorStyle();
+
+    &.dnb-anchor--contrast {
+      @include useAnchorContrastStyle();
+    }
   }
 }
 
@@ -42,22 +44,10 @@ button.dnb-anchor {
 //   @include anchorDefaultStyle();
 // }
 
-.dnb-anchor--no-style {
-  color: inherit;
-
-  @include resetUnderlineStyle();
-  @include resetAnchorHoverStyle();
-  @include resetAnimationStyle();
-}
-
 .dnb-anchor--no-underline {
   @include resetUnderlineStyle();
 }
 
-.dnb-anchor--no-hover {
-  @include resetAnchorHoverStyle();
-}
-
 .dnb-anchor--no-radius {
   @include resetBorderRadius();
 }

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

@@ -6,10 +6,12 @@
 @use './dnb-anchor-theme-ui.scss';
 @use '../anchor-mixins.scss';
 
-.dnb-anchor {
-  --anchor-color--default: var(--color-emerald-green);
-  --anchor-color--contrast: var(--color-sea-green);
-  --anchor-color--active: var(--color-sea-green);
-  --anchor-background--hover: transparent;
-  --anchor-background--active: var(--color-pistachio);
+@include anchor-mixins.notNoStyle() {
+  &.dnb-anchor {
+    --anchor-color--default: var(--color-emerald-green);
+    --anchor-color--contrast: var(--color-sea-green);
+    --anchor-color--active: var(--color-sea-green);
+    --anchor-background--hover: transparent;
+    --anchor-background--active: var(--color-pistachio);
+  }
 }

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

@@ -41,97 +41,104 @@
   }
 }
 
-.dnb-anchor {
-  --anchor-underline-thickness: 0.125rem;
-  --anchor-background: transparent;
-  --anchor-color--contrast: var(--sb-color-text);
-
-  // Has to use --sb-font-weight-bold to get correct weighting as --sb-font-weight-medium does nothing at the moment
-  font-weight: var(--sb-font-weight-bold);
-  color: var(--sb-color-gray-dark-3);
-  text-decoration-color: var(--sb-color-green-dark);
-  padding: 0.15625em 0;
-  border-radius: 0.5em;
+@include anchor-mixins.notNoStyle() {
+  &.dnb-anchor {
+    --anchor-underline-thickness: 0.125rem;
+    --anchor-background: transparent;
+    --anchor-color--contrast: var(--sb-color-text);
 
-  $anchor-icon-gutter: 0.125em;
+    // Has to use --sb-font-weight-bold to get correct weighting as --sb-font-weight-medium does nothing at the moment
+    font-weight: var(--sb-font-weight-bold);
+    color: var(--sb-color-gray-dark-3);
+    text-decoration-color: var(--sb-color-green-dark);
+    padding: 0.15625em 0;
+    border-radius: 0.5em;
 
-  @include anchor-mixins.anchorBackground(var(--anchor-background), null);
+    $anchor-icon-gutter: 0.125em;
 
-  &--no-underline,
-  &--has-icon,
-  &--inline {
     @include anchor-mixins.anchorBackground(
       var(--anchor-background),
-      0.25em
+      null
     );
-  }
-
-  &:hover {
-    @include anchorHover();
-  }
 
-  &:active {
-    @include anchorActive();
-  }
+    &--no-underline,
+    &--has-icon,
+    &--inline {
+      @include anchor-mixins.anchorBackground(
+        var(--anchor-background),
+        0.25em
+      );
+    }
 
-  &:focus-visible {
-    @include anchorFocus();
-  }
+    &:hover {
+      @include anchor-mixins.notNoHover() {
+        @include anchorHover();
+      }
+    }
 
-  &--icon-left {
-    margin-left: 1em + $anchor-icon-gutter;
+    &:active {
+      @include anchorActive();
+    }
 
-    .dnb-icon {
-      font-size: 1em;
-      margin-right: $anchor-icon-gutter;
-      margin-left: -1em - $anchor-icon-gutter;
+    &:focus-visible {
+      @include anchorFocus();
     }
-  }
 
-  &--icon-right {
-    margin-right: 1em + $anchor-icon-gutter;
+    &--icon-left {
+      margin-left: 1em + $anchor-icon-gutter;
 
-    .dnb-icon {
-      font-size: 1em;
-      margin-left: $anchor-icon-gutter;
-      margin-right: -1em - $anchor-icon-gutter;
+      .dnb-icon {
+        font-size: 1em;
+        margin-right: $anchor-icon-gutter;
+        margin-left: -1em - $anchor-icon-gutter;
+      }
     }
-  }
 
-  &[target='_blank']:not(
-      :empty,
-      .dnb-anchor--no-icon,
-      [href^='mailto:'],
-      [href^='tel:'],
-      [href^='sms:']
-    ) {
-    padding-right: 0.25em;
-    &::after {
-      position: initial;
-      display: inline-block;
-      width: calc(0.9em + 0.25em + 0.125em);
-      height: 0.9em;
-      line-height: 0.9em;
-      margin-left: 0;
-      margin-right: 0;
-      background-position: right;
-      background-size: contain;
-    }
-  }
+    &--icon-right {
+      margin-right: 1em + $anchor-icon-gutter;
 
-  &:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(
-      .anchor-hash
-    ):not(.dnb-anchor--inline):not(.dnb-anchor--no-style) {
-    &:not(.dnb-anchor--icon-left) {
-      &::before {
-        text-decoration-color: var(--sb-color-green-dark);
-        content: '\00a0';
+      .dnb-icon {
+        font-size: 1em;
+        margin-left: $anchor-icon-gutter;
+        margin-right: -1em - $anchor-icon-gutter;
       }
     }
-    &:not(.dnb-anchor--icon-right) {
+
+    &[target='_blank']:not(
+        :empty,
+        .dnb-anchor--no-icon,
+        [href^='mailto:'],
+        [href^='tel:'],
+        [href^='sms:']
+      ) {
+      padding-right: 0.25em;
       &::after {
-        text-decoration-color: var(--sb-color-green-dark);
-        content: '\00a0';
+        position: initial;
+        display: inline-block;
+        width: calc(0.9em + 0.25em + 0.125em);
+        height: 0.9em;
+        line-height: 0.9em;
+        margin-left: 0;
+        margin-right: 0;
+        background-position: right;
+        background-size: contain;
+      }
+    }
+
+    &:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(
+        .anchor-hash
+      ):not(.dnb-anchor--inline) {
+      &:not(.dnb-anchor--icon-left) {
+        &::before {
+          text-decoration-color: var(--sb-color-green-dark);
+          content: '\00a0';
+        }
+      }
+      &:not(.dnb-anchor--icon-right) {
+        &::after {
+          text-decoration-color: var(--sb-color-green-dark);
+          content: '\00a0';
+        }
       }
     }
   }

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

@@ -31,7 +31,9 @@
   color: var(--anchor-color);
 
   &:hover {
-    @include anchorHover();
+    @include anchor-mixins.notNoHover() {
+      @include anchorHover();
+    }
   }
 
   &:active {
@@ -45,8 +47,10 @@
 
 $useClasses: true !default;
 @if $useClasses {
-  .dnb-anchor {
-    @include anchorStyle();
+  @include anchor-mixins.notNoStyle() {
+    &.dnb-anchor {
+      @include anchorStyle();
+    }
   }
 
   .dnb-anchor--hover {