fix: address issue with auro hyperlink

AlaskaAirlines · Jan 23, 2020 · 384942f · 384942f
1 parent 28d10cc
commit 384942f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 27 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -1,5 +1,5 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>@alaskaairux/orion-web-core-style-sheets - v2.8.5</title><link rel="stylesheet" href="assets/css/main.css"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,700" rel="stylesheet" type="text/css"><meta name="viewport" content="width=device-width"><meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"><!-- Open Graph tags --><meta property="og:title" content="@alaskaairux/orion-web-core-style-sheets - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>Orion core foundation Sass UI Kit</p>
-"><!-- Thanks to Sass-lang.com for the icons --><link href="assets/images/favicon.png" rel="shortcut icon"></head><body><aside class="sidebar" role="nav"><div class="sidebar__header"><h1 class="sidebar__title">@alaskaairux/orion-web-core-style-sheets - 2.8.5</h1></div><div class="sidebar__body"><button type="button" class="btn-toggle js-btn-toggle" data-alt="Open all">Close all</button><p class="sidebar__item sidebar__item--heading" data-slug="accessibility"><a href="#accessibility">accessibility</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="accessibility-css"><a href="#accessibility-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="accessibility" data-name=".focus-visible :focus:not(.focus-visible)" data-type="css"><a href="#accessibility-css-.focus-visible :focus:not(.focus-visible)">.focus-visible :focus:not(.focus-visible)</a></li><li class="sidebar__item sassdoc__item" data-group="accessibility" data-name="#{$scope}.focus-visible" data-type="css"><a href="#accessibility-css-#{$scope}.focus-visible">#{$scope}.focus-visible</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="animation"><a href="#animation">animation</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="animation-mixin"><a href="#animation-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="animation" data-name="auro_transition" data-type="mixin"><a href="#animation-mixin-auro_transition">auro_transition</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="core"><a href="#core">core</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="core-css"><a href="#core-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="core" data-name="#{$scope} *" data-type="css"><a href="#core-css-#{$scope} *">#{$scope} *</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="essentials"><a href="#essentials">essentials</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="essentials-css"><a href="#essentials-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$sym}#{$prefix}html#{$scope}" data-type="css"><a href="#essentials-css-#{$sym}#{$prefix}html#{$scope}">#{$sym}#{$prefix}html#{$scope}</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}#{$sym}#{$prefix}body,
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>@alaskaairux/orion-web-core-style-sheets - v2.8.6</title><link rel="stylesheet" href="assets/css/main.css"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,700" rel="stylesheet" type="text/css"><meta name="viewport" content="width=device-width"><meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"><!-- Open Graph tags --><meta property="og:title" content="@alaskaairux/orion-web-core-style-sheets - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>Orion core foundation Sass UI Kit</p>
+"><!-- Thanks to Sass-lang.com for the icons --><link href="assets/images/favicon.png" rel="shortcut icon"></head><body><aside class="sidebar" role="nav"><div class="sidebar__header"><h1 class="sidebar__title">@alaskaairux/orion-web-core-style-sheets - 2.8.6</h1></div><div class="sidebar__body"><button type="button" class="btn-toggle js-btn-toggle" data-alt="Open all">Close all</button><p class="sidebar__item sidebar__item--heading" data-slug="accessibility"><a href="#accessibility">accessibility</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="accessibility-css"><a href="#accessibility-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="accessibility" data-name=".focus-visible :focus:not(.focus-visible)" data-type="css"><a href="#accessibility-css-.focus-visible :focus:not(.focus-visible)">.focus-visible :focus:not(.focus-visible)</a></li><li class="sidebar__item sassdoc__item" data-group="accessibility" data-name="#{$scope}.focus-visible" data-type="css"><a href="#accessibility-css-#{$scope}.focus-visible">#{$scope}.focus-visible</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="animation"><a href="#animation">animation</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="animation-mixin"><a href="#animation-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="animation" data-name="auro_transition" data-type="mixin"><a href="#animation-mixin-auro_transition">auro_transition</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="core"><a href="#core">core</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="core-css"><a href="#core-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="core" data-name="#{$scope} *" data-type="css"><a href="#core-css-#{$scope} *">#{$scope} *</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="essentials"><a href="#essentials">essentials</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="essentials-css"><a href="#essentials-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$sym}#{$prefix}html#{$scope}" data-type="css"><a href="#essentials-css-#{$sym}#{$prefix}html#{$scope}">#{$sym}#{$prefix}html#{$scope}</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}#{$sym}#{$prefix}body,
 #{$scope}.#{$prefix}baseType" data-type="css"><a href="#essentials-css-#{$scope}#{$sym}#{$prefix}body,
 #{$scope}.#{$prefix}baseType">#{$scope}#{$sym}#{$prefix}body, #{$scope}.#{$prefix}baseType</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}.#{$prefix}baseParagraph" data-type="css"><a href="#essentials-css-#{$scope}.#{$prefix}baseParagraph">#{$scope}.#{$prefix}baseParagraph</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}.#{$prefix}hyperlink" data-type="css"><a href="#essentials-css-#{$scope}.#{$prefix}hyperlink">#{$scope}.#{$prefix}hyperlink</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}#{$sym}#{$prefix}img" data-type="css"><a href="#essentials-css-#{$scope}#{$sym}#{$prefix}img">#{$scope}#{$sym}#{$prefix}img</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}#{$sym}#{$prefix}small,
 #{$scope}.#{$prefix}type--small" data-type="css"><a href="#essentials-css-#{$scope}#{$sym}#{$prefix}small,
@@ -104,34 +104,34 @@
 .baseParagraph .hyperlink {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro .baseParagraph {}
 .auro .baseParagraph .hyperlink {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $prefix: true;</p></div><pre class="example__code language-scss"><code>.auro_baseParagraph {}
 .auro_baseParagraph .auro_hyperlink {}</code></pre></div><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/essentials&quot;;</code></pre></div></section><section class="main__item container item" id="essentials-css-#{$scope}.#{$prefix}hyperlink"><h3 class="item__heading"><a class="item__name" href="#css-#{$scope}.#{$prefix}hyperlink">#{$scope}.#{$prefix}hyperlink</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>#{$scope}.#{$prefix}hyperlink {
-  color: $auro-color-text-link-on-light;
+  color: $auro-color-ui-default-on-light;
   padding: 0 $auro-size-xs;
-  text-decoration: none;
+  text-decoration: underline;
 
   &amp;.focus-visible {
     @include focus-hyperlink(sass);
   }
 
   &amp;:visited {
-    color: $auro-color-text-link-on-light;
+    color: $auro-color-ui-default-on-light;
 
     &amp;.focus-visible {
-      @include focus-hyperlink(sass);
+      @include auro_focus-hyperlink(sass);
     }
   }
 
-  &amp;--inline {
-    padding: 0;
-    text-decoration: underline;
+  &amp;--nav {
+    text-decoration: none;
+    display: block;
 
     &amp;:not(.is-touching) {
       &amp;:hover {
-        text-decoration: none !important;  // sass-lint:disable-line no-important
+        text-decoration: underline !important;  // sass-lint:disable-line no-important
       }
     }
   }
 
-  &amp;--darktheme {
+  &amp;--ondark {
     color: $auro-color-ui-default-on-dark;
 
     &amp;:not(.is-touching) {
@@ -147,8 +147,8 @@
 
   &amp;:not(.is-touching) {
     &amp;:hover {
-      color: $auro-color-ui-hover-on-dark;
-      text-decoration: underline;
+      color: $auro-color-ui-hover-on-light;
+      text-decoration: none;
     }
   }
 }</code>" data-collapsed="#{$scope}.#{$prefix}hyperlink { ... }"><code>#{$scope}.#{$prefix}hyperlink { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Baseline hyperlink styles as mirrored in auro-hyperlink web component</p><p>Support for: <code>.hyperlink--inline</code>, and <code>.hyperlink--darktheme</code></p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>.hyperlink {}
@@ -1741,4 +1741,4 @@
     display: inline-block $important;
   }
 }</code>" data-collapsed=".util_is-desktopOnly--inline { ... }"><code>.util_is-desktopOnly--inline { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to restrain <code>block</code> visibility of UI element for <strong>max</strong> screens.</p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file and selector partial file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints&quot;;
-@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive&quot;;</code></pre></div></section></section></section><footer class="footer" role="contentinfo"><div class="container"><div class="footer__project-info project-info"><!-- Name and URL --> <span class="project-info__name">@alaskaairux/orion-web-core-style-sheets</span><!-- Version --> <span class="project-info__version">- v2.8.5</span><!-- License --> <span class="project-info__license">, under Apache-2.0</span></div><a class="footer__watermark" href="http://sassdoc.com"><img src="assets/images/logo_light_inline.svg" alt="SassDoc Logo"></a></div></footer></article><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script><script src="assets/js/main.min.js"></script></body></html>
+@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive&quot;;</code></pre></div></section></section></section><footer class="footer" role="contentinfo"><div class="container"><div class="footer__project-info project-info"><!-- Name and URL --> <span class="project-info__name">@alaskaairux/orion-web-core-style-sheets</span><!-- Version --> <span class="project-info__version">- v2.8.6</span><!-- License --> <span class="project-info__license">, under Apache-2.0</span></div><a class="footer__watermark" href="http://sassdoc.com"><img src="assets/images/logo_light_inline.svg" alt="SassDoc Logo"></a></div></footer></article><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script><script src="assets/js/main.min.js"></script></body></html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/_essentials.scss b/src/_essentials.scss
@@ -92,7 +92,7 @@
 
 /// Baseline hyperlink styles as mirrored in auro-hyperlink web component
 ///
-/// Support for: `.hyperlink--inline`, and `.hyperlink--darktheme`
+/// Support for: `.hyperlink--nav`, and `.hyperlink--ondark`
 ///
 /// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options.
 /// @group essentials
@@ -115,34 +115,34 @@
 ///   @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/essentials";
 ///
 #{$scope}.#{$prefix}hyperlink {
-  color: $auro-color-text-link-on-light;
+  color: $auro-color-ui-default-on-light;
   padding: 0 $auro-size-xs;
-  text-decoration: none;
+  text-decoration: underline;
 
   &.focus-visible {
     @include focus-hyperlink(sass);
   }
 
   &:visited {
-    color: $auro-color-text-link-on-light;
+    color: $auro-color-ui-default-on-light;
 
     &.focus-visible {
-      @include focus-hyperlink(sass);
+      @include auro_focus-hyperlink(sass);
     }
   }
 
-  &--inline {
-    padding: 0;
-    text-decoration: underline;
+  &--nav {
+    text-decoration: none;
+    display: block;
 
     &:not(.is-touching) {
       &:hover {
-        text-decoration: none !important;  // sass-lint:disable-line no-important
+        text-decoration: underline !important;  // sass-lint:disable-line no-important
       }
     }
   }
 
-  &--darktheme {
+  &--ondark {
     color: $auro-color-ui-default-on-dark;
 
     &:not(.is-touching) {
@@ -158,8 +158,8 @@
 
   &:not(.is-touching) {
     &:hover {
-      color: $auro-color-ui-hover-on-dark;
-      text-decoration: underline;
+      color: $auro-color-ui-hover-on-light;
+      text-decoration: none;
     }
   }
 }