fix(link): improve ionic theme links styles and dev experience

core/src/css/ionic/link.ionic.scss

@@ -3,6 +3,8 @@
 // Link: Shared Styles (Standalone & Underline)
 // -------------------------------------------------------------------------------
 @mixin link-shared {
+  @include globals.typography(globals.$ion-body-action-sm);
+
   display: inline-flex;
 
   align-items: center;
@@ -11,8 +13,6 @@
 
   transition: color globals.$ion-transition-time-200 ease-in-out;
 
-  font-weight: globals.$ion-font-weight-regular;
-
   text-decoration-color: inherit;
 
   text-underline-offset: globals.$ion-scale-050;
@@ -25,38 +25,18 @@
   &:visited {
     color: globals.$ion-text-link-visited;
   }
-}
-
-// Link: Standalone
-// -------------------------------------------------------------------------------
-
-@mixin ionic-link {
-  color: globals.$ion-text-link-default;
-
-  text-decoration: none;
-
-  @include link-shared;
-
-  // Link: Standalone - Hover
-  // -------------------------------------------------------------------------------
-
-  @media (any-hover: hover) {
-    &:hover {
-      text-decoration: underline;
-    }
-  }
 
-  // Link: Standalone - Focus
+  // Link: Focus
   // -------------------------------------------------------------------------------
 
   &:focus,
   &.ion-focused {
-    @include globals.focused-state(null, null, globals.$ion-text-link-default);
+    @include globals.focused-state();
 
-    text-decoration: underline;
+    border-radius: globals.$ion-border-radius-100;
   }
 
-  // Link: Standalone - Active
+  // Link: Active
   // -------------------------------------------------------------------------------
 
   &:active,
@@ -65,52 +45,57 @@
 
     text-decoration: underline;
   }
+
+  // Link:  Hover
+  // -------------------------------------------------------------------------------
+
+  @media (any-hover: hover) {
+    &:hover {
+      color: globals.$ion-text-link-press;
+
+      text-decoration: underline;
+    }
+  }
 }
 
-a.ionic-link,
-:not(a).ionic-link a {
+// Link: Standalone
+// -------------------------------------------------------------------------------
+
+@mixin ionic-link {
+  color: globals.$ion-text-link-default;
+
+  text-decoration: none;
+
+  @include link-shared;
+}
+
+a,
+:not(a).ion-link a {
   @include ionic-link;
 }
 
 // Link: Underline
 // -------------------------------------------------------------------------------
 
 @mixin ionic-link-underline {
-  color: currentColor;
-
-  text-decoration: underline;
+  color: globals.$ion-text-default;
 
   @include link-shared;
 
-  // Link: Underline - Hover
-  // -------------------------------------------------------------------------------
-
-  @media (any-hover: hover) {
-    &:hover {
-      color: globals.$ion-text-link-press;
-    }
-  }
+  text-decoration: underline;
 
-  // Link: Underline - Focus
+  // Link: Focus
   // -------------------------------------------------------------------------------
 
   &:focus,
   &.ion-focused {
-    @include globals.focused-state(null, null, globals.$ion-text-link-default);
+    color: globals.$ion-text-default;
 
     text-decoration: none;
   }
-
-  // Link: Underline - Active
-  // -------------------------------------------------------------------------------
-
-  &:active,
-  &.ion-activated {
-    color: globals.$ion-text-link-press;
-  }
 }
 
-a.ionic-link-underline,
-:not(a).ionic-link-underline a {
+a.ion-link-underline,
+:not(a).ion-link-underline a {
   @include ionic-link-underline;
 }

core/src/css/test/link/basic/index.html

@@ -28,45 +28,45 @@
       </ion-header>
 
       <ion-content class="ionic-padding-space-m">
-        <h3>Standalone (.ionic-link)</h3>
+        <h3>Standalone (.ion-link)</h3>
         <div class="links" id="standalone">
-          <div><a class="ionic-link" href="#">Link - Default</a></div>
-          <div><a class="ionic-link ion-activated" href="#">Link - Active</a></div>
-          <div><a class="ionic-link ion-focused" href="#">Link - Focused</a></div>
-          <div><a class="ionic-link" href="">Link - Visited</a></div>
+          <div><a href="#test-visited-link">Link - Default</a></div>
+          <div><a class="ion-activated" href="#">Link - Active</a></div>
+          <div><a class="ion-focused" href="#">Link - Focused</a></div>
+          <div><a href="">Link - Visited</a></div>
           <div>
-            <a class="ionic-link" href="#">Link with Icon <ion-icon name="open-outline"></ion-icon></a>
+            <a href="#">Link with Icon <ion-icon name="open-outline"></ion-icon></a>
           </div>
         </div>
 
-        <h3>Underline (.ionic-link-underline)</h3>
+        <h3>Underline (.ion-link-underline)</h3>
         <div class="links" id="underline">
-          <div><a class="ionic-link-underline" href="#">Underline - Default</a></div>
-          <div><a class="ionic-link-underline ion-activated" href="#">Underline - Active</a></div>
-          <div><a class="ionic-link-underline ion-focused" href="#">Underline - Focused</a></div>
-          <div><a class="ionic-link-underline" href="">Underline - Visited</a></div>
+          <div><a class="ion-link-underline" href="#test-visited-link">Underline - Default</a></div>
+          <div><a class="ion-link-underline ion-activated" href="#">Underline - Active</a></div>
+          <div><a class="ion-link-underline ion-focused" href="#">Underline - Focused</a></div>
+          <div><a class="ion-link-underline" href="">Underline - Visited</a></div>
           <div>
-            <a class="ionic-link-underline" href="#">Link with Icon <ion-icon name="open-outline"></ion-icon></a>
+            <a class="ion-link-underline" href="#">Link with Icon <ion-icon name="open-outline"></ion-icon></a>
           </div>
         </div>
 
         <h3>Links in Content</h3>
         <div class="links" id="links-in-content">
           <div>
-            Lorem ipsum dolor sit amet consectetur, <a class="ionic-link" href="#">default link</a> adipisicing elit.
+            Lorem ipsum dolor sit amet consectetur, <a class="ion-link" href="#">default link</a> adipisicing elit.
           </div>
           <div>
             Lorem ipsum dolor sit amet consectetur,
-            <a class="ionic-link-underline" href="#">underline link</a> adipisicing elit.
+            <a class="ion-link-underline" href="#">underline link</a> adipisicing elit.
           </div>
         </div>
 
         <h3>Parent Element</h3>
         <div class="links">
-          <div class="ionic-link" id="standalone-nested">
+          <div class="ion-link" id="standalone-nested">
             <p>Lorem ipsum dolor sit amet consectetur, <a href="#">default link</a> adipisicing elit.</p>
           </div>
-          <div class="ionic-link-underline" id="underline-nested">
+          <div class="ion-link-underline" id="underline-nested">
             <p>Lorem ipsum dolor sit amet consectetur, <a href="#">underline link</a> adipisicing elit.</p>
           </div>
         </div>