diff --git a/docs/index.html b/docs/index.html
index efc6557..5bfa514 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,5 +1,5 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>@aurodesignsystem/webcorestylesheets - v11.1.1</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="@aurodesignsystem/webcorestylesheets - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>Auro 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">@aurodesignsystem/webcorestylesheets - 11.1.1</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" data-type="css"><a href="#accessibility-css-:focus">:focus</a></li><li class="sidebar__item sassdoc__item" data-group="accessibility" data-name="&amp;:focus-visible" data-type="css"><a href="#accessibility-css-&amp;:focus-visible">&amp;: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="component-support"><a href="#component-support">component-support</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="component-support-css"><a href="#component-support-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="component-support" data-name=":host" data-type="css"><a href="#component-support-css-:host">:host</a></li><li class="sidebar__item sassdoc__item" data-group="component-support" data-name=":host([hidden]:not(:focus):not(:active))" data-type="css"><a href="#component-support-css-:host([hidden]:not(:focus):not(:active))">:host([hidden]:not(:focus):not(:active))</a></li><li class="sidebar__item sassdoc__item" data-group="component-support" data-name=":host([hiddenVisually]:not(:focus):not(:active))" data-type="css"><a href="#component-support-css-:host([hiddenVisually]:not(:focus):not(:active))">:host([hiddenVisually]:not(:focus):not(:active))</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="container"><a href="#container">container</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="container-css"><a href="#container-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="container" data-name="#{$scope}.#{$prefix}container" data-type="css"><a href="#container-css-#{$scope}.#{$prefix}container">#{$scope}.#{$prefix}container</a></li><li class="sidebar__item sassdoc__item" data-group="container" data-name="#{$scope}.#{$prefix}pagecontainer" data-type="css"><a href="#container-css-#{$scope}.#{$prefix}pagecontainer">#{$scope}.#{$prefix}pagecontainer</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="#{$sym}#{$prefix}#{$scope}blockquote" data-type="css"><a href="#core-css-#{$sym}#{$prefix}#{$scope}blockquote">#{$sym}#{$prefix}#{$scope}blockquote</a></li><li class="sidebar__item sassdoc__item" data-group="core" data-name="#{$sym}#{$prefix}picture#{$scope}" data-type="css"><a href="#core-css-#{$sym}#{$prefix}picture#{$scope}">#{$sym}#{$prefix}picture#{$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>@aurodesignsystem/webcorestylesheets - v11.1.2</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="@aurodesignsystem/webcorestylesheets - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>Auro 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">@aurodesignsystem/webcorestylesheets - 11.1.2</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" data-type="css"><a href="#accessibility-css-:focus">:focus</a></li><li class="sidebar__item sassdoc__item" data-group="accessibility" data-name="&amp;:focus-visible" data-type="css"><a href="#accessibility-css-&amp;:focus-visible">&amp;: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="component-support"><a href="#component-support">component-support</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="component-support-css"><a href="#component-support-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="component-support" data-name=":host" data-type="css"><a href="#component-support-css-:host">:host</a></li><li class="sidebar__item sassdoc__item" data-group="component-support" data-name=":host([hidden]:not(:focus):not(:active))" data-type="css"><a href="#component-support-css-:host([hidden]:not(:focus):not(:active))">:host([hidden]:not(:focus):not(:active))</a></li><li class="sidebar__item sassdoc__item" data-group="component-support" data-name=":host([hiddenVisually]:not(:focus):not(:active))" data-type="css"><a href="#component-support-css-:host([hiddenVisually]:not(:focus):not(:active))">:host([hiddenVisually]:not(:focus):not(:active))</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="container"><a href="#container">container</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="container-css"><a href="#container-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="container" data-name="#{$scope}.#{$prefix}container" data-type="css"><a href="#container-css-#{$scope}.#{$prefix}container">#{$scope}.#{$prefix}container</a></li><li class="sidebar__item sassdoc__item" data-group="container" data-name="#{$scope}.#{$prefix}pagecontainer" data-type="css"><a href="#container-css-#{$scope}.#{$prefix}pagecontainer">#{$scope}.#{$prefix}pagecontainer</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="#{$sym}#{$prefix}#{$scope}blockquote" data-type="css"><a href="#core-css-#{$sym}#{$prefix}#{$scope}blockquote">#{$sym}#{$prefix}#{$scope}blockquote</a></li><li class="sidebar__item sassdoc__item" data-group="core" data-name="#{$sym}#{$prefix}picture#{$scope}" data-type="css"><a href="#core-css-#{$sym}#{$prefix}picture#{$scope}">#{$sym}#{$prefix}picture#{$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,
@@ -139,7 +139,7 @@
 .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/@aurodesignsystem/webcorestylesheets/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 {
   transition: all .15s ease;
   text-decoration: underline;
-  color: var(--ds-advanced-color-hyperlink-text-hover);
+  color: var(--ds-advanced-color-hyperlink-text);
   border-radius: 3px;
   outline-offset: unset;
   outline-style: solid;
@@ -193,7 +193,7 @@
     }
 
     &amp;:visited {
-      color: var(--ds-color-text-ui-default-inverse);
+      color: var(--ds-advanced-color-hyperlink-text-inverse);
     }
   }
 }</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--nav</code>, and <code>.hyperlink--ondark</code></p><p><a href="/#scope-prefix-variable-scope">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 {}
@@ -1580,4 +1580,4 @@
   white-space: nowrap $important;
 }</code>" data-collapsed="#{$scope}.#{$prefix}util_nowrap { ... }"><code>#{$scope}.#{$prefix}util_nowrap { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class force no wrap on content</p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p><p><a href="/#scope-prefix-variable-scope">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>.util_nowrap {}</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 .util_nowrap {}</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_util_nowrap {}</code></pre></div><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties&quot;;</code></pre></div></section><section class="main__item container item" id="utility-type-css-#{$scope}.#{$prefix}util_capitalize"><h3 class="item__heading"><a class="item__name" href="#css-#{$scope}.#{$prefix}util_capitalize">#{$scope}.#{$prefix}util_capitalize</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}util_capitalize {
   text-transform: capitalize $important;
-}</code>" data-collapsed="#{$scope}.#{$prefix}util_capitalize { ... }"><code>#{$scope}.#{$prefix}util_capitalize { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to capitalize a string</p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p><p><a href="/#scope-prefix-variable-scope">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>.util_capitalize {}</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 .util_capitalize {}</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_util_capitalize {}</code></pre></div><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties&quot;;</code></pre></div></section></section></section><section class="main__section"><h1 class="main__heading" id="utility-variables"><div class="container">utility-variables</div></h1><section class="main__sub-section" id="utility-variables-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="utility-variables-variable-css-ns"><h3 class="item__heading"><a class="item__name" href="#variable-css-ns">css-ns</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$css-ns: &quot;wcss&quot; !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Global CSS theme custom property namespace</p><p>Defines the namespace used for all CSS theme custom properties</p></div><h3 class="item__sub-heading">Type</h3><p><code>String</code></p><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>$css-ns: &#39;auro&#39;; // Would result in --auro-property-name</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">@aurodesignsystem/webcorestylesheets</span><!-- Version --> <span class="project-info__version">- v11.1.1</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>
\ No newline at end of file
+}</code>" data-collapsed="#{$scope}.#{$prefix}util_capitalize { ... }"><code>#{$scope}.#{$prefix}util_capitalize { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to capitalize a string</p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p><p><a href="/#scope-prefix-variable-scope">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>.util_capitalize {}</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 .util_capitalize {}</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_util_capitalize {}</code></pre></div><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties&quot;;</code></pre></div></section></section></section><section class="main__section"><h1 class="main__heading" id="utility-variables"><div class="container">utility-variables</div></h1><section class="main__sub-section" id="utility-variables-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="utility-variables-variable-css-ns"><h3 class="item__heading"><a class="item__name" href="#variable-css-ns">css-ns</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$css-ns: &quot;wcss&quot; !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Global CSS theme custom property namespace</p><p>Defines the namespace used for all CSS theme custom properties</p></div><h3 class="item__sub-heading">Type</h3><p><code>String</code></p><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>$css-ns: &#39;auro&#39;; // Would result in --auro-property-name</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">@aurodesignsystem/webcorestylesheets</span><!-- Version --> <span class="project-info__version">- v11.1.2</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>
\ No newline at end of file
diff --git a/src/essentials/legacy/_auro-classic.scss b/src/essentials/legacy/_auro-classic.scss
index 7fd7e93..6dc0472 100644
--- a/src/essentials/legacy/_auro-classic.scss
+++ b/src/essentials/legacy/_auro-classic.scss
@@ -126,7 +126,7 @@
 #{$scope}.#{$prefix}hyperlink {
   transition: all .15s ease;
   text-decoration: underline;
-  color: var(--ds-advanced-color-hyperlink-text-hover);
+  color: var(--ds-advanced-color-hyperlink-text);
   border-radius: 3px;
   outline-offset: unset;
   outline-style: solid;
@@ -180,7 +180,7 @@
     }
 
     &:visited {
-      color: var(--ds-color-text-ui-default-inverse);
+      color: var(--ds-advanced-color-hyperlink-text-inverse);
     }
   }
 }
