[Darkside] Link CSS update (#3353)

* ✨ Darkmode-support for existing link-component

* :refactor: Adjusted line offsets and thickness

@navikt/core/css/darkside/link.darkside.css

@@ -1,79 +1,63 @@
 .navds-link {
-  color: var(--ac-link-text, var(--a-text-action));
-  text-decoration: underline;
+  color: var(--ax-text-accent);
   display: inline-flex;
   align-items: center;
-  gap: var(--a-spacing-1);
-}
-
-.navds-link.navds-link--inline-text {
-  display: inline;
-}
-
-.navds-link.navds-link--inline-text > svg {
-  /* stylelint-disable-next-line plugin/declaration-block-no-ignored-properties */
-  margin: 0.1em 0.1em -0.1em;
-  transform: translateY(0.05em);
-  display: inline;
-  vertical-align: baseline;
-}
-
-.navds-link:hover {
-  text-decoration: none;
-}
+  gap: var(--ax-spacing-1);
+  text-decoration: underline;
+  text-underline-offset: 0.1em;
+  text-decoration-thickness: 0.05em;
 
-.navds-link.navds-link--remove-underline {
-  text-decoration: none;
-}
+  &:hover,
+  &:active {
+    text-decoration-thickness: 0.111em;
+  }
 
-.navds-link.navds-link--remove-underline:hover {
-  text-decoration: underline;
-}
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
 
-.navds-alert .navds-link,
-.navds-confirmation-panel .navds-link {
-  color: var(--a-text-default);
-}
+  &.navds-link--inline-text {
+    display: inline;
 
-.navds-link:focus-visible {
-  outline: 2px solid transparent;
-  color: var(--ac-link-focus-text, var(--a-text-on-action));
-  text-decoration: none;
-  background-color: var(--ac-link-focus-bg, var(--a-border-focus));
-  box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
-}
+    & > svg {
+      /* stylelint-disable-next-line plugin/declaration-block-no-ignored-properties */
+      margin: 0.1em 0.1em -0.1em;
+      transform: translateY(0.05em);
+      display: inline;
+      vertical-align: baseline;
+    }
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-link:focus {
-    outline: 2px solid transparent;
-    color: var(--ac-link-focus-text, var(--a-text-on-action));
+  &.navds-link--remove-underline {
     text-decoration: none;
-    background-color: var(--ac-link-focus-bg, var(--a-border-focus));
-    box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
-}
 
-.navds-link:active {
-  outline: 2px solid transparent;
-  color: var(--ac-link-active-text, var(--a-text-on-action));
-  text-decoration: none;
-  background-color: var(--ac-link-active-bg, var(--a-border-focus));
-  box-shadow: 0 0 0 2px var(--ac-link-active-border, var(--a-border-focus));
+  & svg {
+    color: inherit;
+    flex-shrink: 0;
+  }
 }
 
-.navds-link svg {
-  color: inherit;
-  flex-shrink: 0;
+.navds-alert,
+.navds-confirmation-panel {
+  & .navds-link {
+    color: var(--ax-text-default);
+  }
 }
 
 .navds-link--action {
-  color: var(--ac-link-action-text, var(--a-text-action));
+  color: var(--ax-text-accent);
 }
 
 .navds-link--neutral {
-  color: var(--ac-link-neutral-text, var(--a-text-default));
+  color: var(--ax-text-default);
 }
 
 .navds-link--subtle {
-  color: var(--ac-link-subtle-text, var(--a-text-subtle));
+  color: var(--ax-text-subtle);
 }