feat(link): add experimental link component (#1116)

* feat: updated color tokens

* Update variables

Add disabled variable, move visited variable out of global list

* Add disabled color variable

add disabled color variable and remove commented out code

* update visited active color

src/components/link/_link.scss

@@ -8,10 +8,11 @@
 @import '../../globals/scss/layout';
 @import '../../globals/scss/typography';
 @import '../../globals/scss/helper-mixins';
+@import '../../globals/scss/functions';
 @import '../../globals/scss/import-once';
 @import '../../globals/scss/css--reset';
 
-@include exports('link') {
+@mixin link {
   .#{$prefix}--link {
     @include reset;
     @include font-family;
@@ -42,3 +43,55 @@
     }
   }
 }
+
+@mixin link--x {
+  .#{$prefix}--link {
+    @include reset;
+    @include font-family;
+    @include font-smoothing;
+
+    color: $brand-01;
+    font-weight: 400;
+
+    // There is currently no way to set the thinkness of an underline so we'll rely on the box shadow property to achieve this
+    // effect.
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      color: $brand-01;
+      box-shadow: 0 1px currentColor;
+    }
+
+    &:active,
+    &:active:visited {
+      color: $text-01;
+      box-shadow: 0 1px currentColor;
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 3px currentColor;
+    }
+
+    &[aria-disabled='true'][tabindex='-1'] {
+      color: $text-disabled;
+      cursor: not-allowed;
+      &:hover {
+        box-shadow: none;
+      }
+    }
+
+    &:visited {
+      color: $link-visited;
+    }
+  }
+}
+
+@include exports('link') {
+  @if feature-flag-enabled('components-x') {
+    @include link--x;
+  } @else {
+    @include link;
+  }
+}

src/globals/scss/_theme.scss

@@ -144,6 +144,9 @@
   $input-border: 1px solid transparent !default !global;
   $input-label-weight: 400 !default !global;
   $text-disabled: $ibm-colors__gray--30 !default !global;
+
+  // Link
+  $link-visited: $ibm-colors__purple--60 !default !global;
 
   // Button Theme Variables
   $button-font-weight: 400 !default !global;
@@ -156,7 +159,7 @@
   $button-border-width: 4px !default !global;
   $button-outline-offset: -5px !default !global;
   $button-outline: 1px solid $ibm-colors__white !default !global;
-
+  
   // Accordion (Reverse)
   $accordion-flex-direction: row !default !global;
   $accordion-justify-content: flex-start !default !global;