fix: add delta theming for Link (#2018)

* chore: add delta theming for Link * lint fixes
SAP · Jan 7, 2021 · a445585 · a445585
1 parent e8268b3
commit a445585
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 6 deletions.
diff --git a/src/link.scss b/src/link.scss
@@ -1,5 +1,5 @@
-@import "./new-settings";
-@import "./mixins";
+@import './new-settings';
+@import './mixins';
 
 /*!
 .fd-link
@@ -10,10 +10,28 @@ $block: #{$fd-namespace}-link;
   @include fd-reset();
   @include fd-link();
 
-  &:hover {
+  @include fd-icon-selector() {
+    text-decoration: var(--fdLink_Text_Decoration);
+  }
+
+  @include fd-hover() {
     @include fd-icon-selector() {
-      text-decoration: underline;
+      text-decoration: var(--fdLink_Text_Decoration_Opposite);
       color: var(--sapLink_Hover_Color);
     }
   }
+
+  @include fd-focus() {
+    @include fd-icon-selector() {
+      text-decoration: var(--fdLink_Text_Decoration_Opposite);
+      color: var(--sapLinkColor);
+    }
+  }
+
+  @include fd-active() {
+    @include fd-icon-selector() {
+      text-decoration: var(--fdLink_Text_Decoration_Opposite);
+      color: var(--sapLink_Active_Color);
+    }
+  }
 }
diff --git a/src/mixins/_mixins.scss b/src/mixins/_mixins.scss
@@ -206,7 +206,7 @@
 
 @mixin fd-link() {
   color: var(--sapLinkColor);
-  text-decoration: none;
+  text-decoration: var(--fdLink_Text_Decoration);
   text-shadow: var(--sapContent_TextShadow);
   display: inline-block;
   transition: all $fd-animation-speed ease-in;
@@ -222,7 +222,7 @@
 
   @include fd-hover() {
     color: var(--sapLink_Hover_Color);
-    text-decoration: underline;
+    text-decoration: var(--fdLink_Text_Decoration_Opposite);
   }
 
   @include fd-focus() {
@@ -231,10 +231,12 @@
     outline-width: var(--sapContent_FocusWidth);
     outline-color: var(--sapContent_FocusColor);
     outline-style: var(--sapContent_FocusStyle);
+    text-decoration: var(--fdLink_Text_Decoration_Opposite);
   }
 
   @include fd-active() {
     color: var(--sapLink_Active_Color);
+    text-decoration: var(--fdLink_Text_Decoration_Opposite);
   }
 
   &--inverted {

diff --git a/src/theming/sap_fiori_3.scss b/src/theming/sap_fiori_3.scss
@@ -158,4 +158,8 @@
   --fdList_Item_Action_Button_Spacing: 0;
   --fdList_Item_Action_Button_Border: none;
   --fdList_Item_Action_Button_Border_Radius: 0;
+
+  /* Link */
+  --fdLink_Text_Decoration_Opposite: underline;
+  --fdLink_Text_Decoration: none;
 }
diff --git a/src/theming/sap_fiori_3_dark.scss b/src/theming/sap_fiori_3_dark.scss
@@ -157,4 +157,8 @@
   --fdList_Item_Action_Button_Spacing: 0;
   --fdList_Item_Action_Button_Border: none;
   --fdList_Item_Action_Button_Border_Radius: 0;
+
+  /* Link */
+  --fdLink_Text_Decoration_Opposite: underline;
+  --fdLink_Text_Decoration: none;
 }
diff --git a/src/theming/sap_fiori_3_hcb.scss b/src/theming/sap_fiori_3_hcb.scss
@@ -157,4 +157,8 @@
   --fdList_Item_Action_Button_Spacing: 0.25rem;
   --fdList_Item_Action_Button_Border: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
   --fdList_Item_Action_Button_Border_Radius: 0.375rem;
+
+  /* Link */
+  --fdLink_Text_Decoration_Opposite: none;
+  --fdLink_Text_Decoration: underline;
 }
diff --git a/src/theming/sap_fiori_3_hcw.scss b/src/theming/sap_fiori_3_hcw.scss
@@ -157,4 +157,8 @@
   --fdList_Item_Action_Button_Spacing: 0.25rem;
   --fdList_Item_Action_Button_Border: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
   --fdList_Item_Action_Button_Border_Radius: 0.375rem;
+
+  /* Link */
+  --fdLink_Text_Decoration_Opposite: none;
+  --fdLink_Text_Decoration: underline;
 }
diff --git a/src/theming/sap_fiori_3_light_dark.scss b/src/theming/sap_fiori_3_light_dark.scss
@@ -157,4 +157,8 @@
   --fdList_Item_Action_Button_Spacing: 0;
   --fdList_Item_Action_Button_Border: none;
   --fdList_Item_Action_Button_Border_Radius: 0;
+
+  /* Link */
+  --fdLink_Text_Decoration_Opposite: underline;
+  --fdLink_Text_Decoration: none;
 }