fix: refactored link mixin using theme parameters (#379)

* refactored mixin

* removed link states

docs/pages/components/link.md

@@ -14,10 +14,6 @@ Used when extra emphasis is needed especially when a link needs to standout from
 
 <br>
 
-## Link States
-* Selected state can be rendered using class `is-selected` and/or `aria-selected="true"` attribute
-* Disabled state can be rendered using class `is-disabled` and/or `aria-disabled="true"` attribute
-
 {% capture default %}
 <a href="#" class="fd-link">Standard Link</a>
 <br><br>

src/mixins/_mixins.scss

@@ -267,59 +267,36 @@
   }
 }
 
-@mixin fd-link($color: $fd-color--action) {
-  @include fd-var-color("color", $fd-color--action, --fd-color-action-1);
-
+@mixin fd-link() {
+  color: var(--sapLinkColor);
   text-decoration: none;
   display: inline-block;
   transition: all $fd-animation--speed ease-in;
   border-bottom-style: solid;
   border-bottom-width: 1px;
-
-  @include fd-var-color("border-bottom-color", $fd-color--action, --fd-color-action-1);
+  border-bottom-color: var (--sapLinkColor);
 
   @include fd-hover() {
-    @include fd-var-color("color", map-get($fd-colors-action-states, "hover"), --fd-color-action-hover);
-    @include fd-var-color("border-bottom-color", map-get($fd-colors-action-states, "hover"), --fd-color-action-hover);
+    color: var(--sapLink_Hover_Color);
+    border-bottom-color: var(--sapLink_Hover_Color);
   }
 
   &:visited {
-    @include fd-var-color("color", map-get($fd-colors-action-states, "visited"), --fd-color-action-visited);
-    @include fd-var-color(
-      "border-bottom-color",
-      map-get($fd-colors-action-states, "visited"),
-      --fd-color-action-visited
-    );
-  }
-
-  @include fd-active-pressed-selected() {
-    @include fd-var-color("color", map-get($fd-colors-action-states, "selected"), --fd-color-action-selected);
-    @include fd-var-color(
-      "border-bottom-color",
-      map-get($fd-colors-action-states, "selected"),
-      --fd-color-action-selected
-    );
-
-    outline: none;
+    color: var(--sapLink_Visited_Color);
+    border-bottom-color: var(--sapLink_Visited_Color);
   }
 
   @include fd-disabled() {
-    @include fd-var-color("color", map-get($fd-colors-action-states, "disabled"), --fd-color-action-disabled);
-    @include fd-var-color(
-      "border-bottom-color",
-      map-get($fd-colors-action-states, "disabled"),
-      --fd-color-action-disabled
-    );
-    @include fd-var-color("outline-color", fd-color-state("disabled", "action"), --fd-color-action-disabled);
-
+    opacity: 0.4;
+    color: var(--sapLinkColor);
+    border-bottom-color: var(--sapLinkColor);
     cursor: not-allowed;
   }
 
   &:focus {
     outline-style: dotted;
     outline-width: 1px;
-
-    @include fd-var-color("outline-color", fd-color-state("hover", "action"), --fd-color-action-focus);
+    outline-color: var(--sapLinkColor);
   }
 }