diff --git a/src/_core.scss b/src/_core.scss
index b9d4cbe..f917557 100644
--- a/src/_core.scss
+++ b/src/_core.scss
@@ -11,7 +11,7 @@ $focus-visible: null !default;
 
 /// Global selector to address box-model and default `:focus` pseudo elements.
 ///
-/// Global media setting for [a11y support of reduced-motion](https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#taking-it-to-code). By setting the durations to almost 0, we prevent animation from playing for those with motion sensitivities without affecting transition or animation events (e.g. transitionend).
+/// Global media setting for [a11y support of reduced-motion](https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#taking-it-to-code). By setting the durations to almost 0, we prevent animation from playing for those with motion sensitivities without affecting transition or animation events (e.g. transitioned).
 ///
 /// [Manage](/#scope-prefix-variable) `$scope` option.
 /// @group core
@@ -44,7 +44,7 @@ $focus-visible: null !default;
   // if $focus-visible is true, override the default focus-visible outline
   @if $focus-visible {
     &:focus-visible {
-      outline: 2px solid var(--ds-color-ui-default-default);
+      outline: 2px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default);
     }
   } @else {
     &:focus-visible {
@@ -55,7 +55,7 @@ $focus-visible: null !default;
   // if $focus-visible is true, override the default focus-visible outline
   @if $focus-visible {
     &:focus-visible {
-      outline: 2px solid var(--ds-color-ui-default-default);
+      outline: 2px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default);
     }
   } @else {
     &:focus-visible {
@@ -66,7 +66,7 @@ $focus-visible: null !default;
   // if $focus is true, override the default focus outline
   @if $focus {
     &:focus {
-      outline: 2px solid var(--ds-color-ui-default-default);
+      outline: 2px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default);
     }
   }
 }
diff --git a/src/_essentials.scss b/src/_essentials.scss
index 5716c6e..2847a72 100644
--- a/src/_essentials.scss
+++ b/src/_essentials.scss
@@ -27,7 +27,7 @@
 #{$sym}#{$prefix}html#{$scope} {
   box-sizing: border-box;
 
-  font-size: $ds-text-body-size-default;
+  font-size: var(--ds-text-body-size-default, $ds-text-body-size-default);
 
   -webkit-text-size-adjust: 100%;
       -ms-text-size-adjust: 100%;
@@ -56,13 +56,13 @@
 #{$scope}.#{$prefix}baseType {
   margin: 0;
 
-  color: $ds-color-text-primary-default;
+  color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
 
-  font-family: $ds-font-family-default;
+  font-family: var(--ds-font-family-default, $ds-font-family-default);
   font-variant-ligatures: no-common-ligatures;
-  font-size: $ds-text-body-size-default;
-  font-weight: $ds-text-body-default-weight;
-  line-height: $ds-text-body-height-default;
+  font-size: var(--ds-text-body-size-default, $ds-text-body-size-default);
+  font-weight: var(--ds-text-body-default-weight, $ds-text-body-default-weight);
+  line-height: var(--ds-text-body-height-default, $ds-text-body-height-default);
 }
 
 /// Sets standard `margin` for all paragraph style content
@@ -89,7 +89,7 @@
 #{$scope}.#{$prefix}baseParagraph {
   margin: 0 0 1rem;
 
-  line-height: $ds-text-body-height-default;
+  line-height: var(--ds-text-body-height-default, $ds-text-body-height-default);
 
   .#{$prefix}hyperlink {
     text-decoration: underline;
@@ -123,10 +123,10 @@
 #{$scope}.#{$prefix}hyperlink {
   text-decoration: underline;
 
-  color: $ds-color-ui-default-default;
+  color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
 
   &:visited {
-    color: $ds-color-ui-default-default;
+    color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
   }
 
   &--nav {
@@ -142,16 +142,16 @@
   }
 
   &--ondark {
-    color: $ds-color-ui-default-inverse;
+    color: var(--ds-color-ui-default-inverse, $ds-color-ui-default-inverse);
 
     &:not(.is-touching) {
       &:hover {
-        color: $ds-color-ui-hover-inverse;
+        color: var(--ds-color-ui-hover-inverse, $ds-color-ui-hover-inverse);
       }
     }
 
     &:visited {
-      color: $ds-color-ui-default-inverse;
+      color: var(--ds-color-ui-default-inverse, $ds-color-ui-default-inverse);
     }
   }
 
@@ -159,7 +159,7 @@
     &:hover {
       text-decoration: none;
 
-      color: $ds-color-ui-hover-default;
+      color: var(--ds-color-ui-hover-default, $ds-color-ui-hover-default);
     }
   }
 }
@@ -206,8 +206,8 @@
 ///
 #{$scope}#{$sym}#{$prefix}small,
 #{$scope}.#{$prefix}type--small {
-  font-size: $ds-text-body-size-xs;
-  line-height: $ds-text-body-height-xs;
+  font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
+  line-height: var(--ds-text-body-height-xs, $ds-text-body-height-xs);
 }
 
 $paragraph: null !default; /* stylelint-disable-line scss/dollar-variable-first-in-block */
@@ -238,7 +238,7 @@ $paragraph: null !default; /* stylelint-disable-line scss/dollar-variable-first-
   @if $paragraph {
     margin: 0 0 1rem;
 
-    line-height: $ds-text-body-height-default;
+    line-height: var(--ds-text-body-height-default, $ds-text-body-height-default);
   }
 }
 
diff --git a/src/_fonts.scss b/src/_fonts.scss
index 67a3f05..a4d8cd6 100644
--- a/src/_fonts.scss
+++ b/src/_fonts.scss
@@ -13,8 +13,8 @@
 
 // Auro rule
 @font-face {
-  font-family: $ds-asset-font-circular-family-name;
-  font-weight: $ds-text-heading-display-weight;
+  font-family: var(--$ds-asset-font-circular-family-name, $ds-asset-font-circular-family-name);
+  font-weight: var(--ds-text-heading-display-weight, $ds-text-heading-display-weight);
   font-style: normal;
 
   font-display: fallback;
@@ -27,8 +27,8 @@
 /// @example scss - import src file
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/fonts";
 @font-face {
-  font-family: $ds-asset-font-circular-family-name;
-  font-weight: $ds-text-heading-medium-weight;
+  font-family: var(--$ds-asset-font-circular-family-name, $ds-asset-font-circular-family-name);
+  font-weight: var(--ds-text-heading-medium-weight, $ds-text-heading-medium-weight);
   font-style: normal;
 
   font-display: fallback;
@@ -40,8 +40,8 @@
 /// @example scss - import src file
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/fonts";
 @font-face {
-  font-family: $ds-asset-font-circular-family-name;
-  font-weight: $ds-text-body-default-weight;
+  font-family: var(--$ds-asset-font-circular-family-name, $ds-asset-font-circular-family-name);
+  font-weight: var(ds-text-body-default-weight, $ds-text-body-default-weight);
   font-style: normal;
 
   font-display: fallback;
diff --git a/src/_grids.scss b/src/_grids.scss
index 82a44b3..ebc1488 100644
--- a/src/_grids.scss
+++ b/src/_grids.scss
@@ -3,7 +3,7 @@
 
 // ---------------------------------------------------------------------
 
-// sass-lint:disable mixins-before-declarations variable-for-property no-vendor-prefixess
+// sass-lint:disable mixins-before-declarations variable-for-property no-vendor-prefixes
 @import 'libSupport/manageScope';
 
 $fixed-nav-width: 280px;
@@ -23,7 +23,7 @@ $fixed-anchor-width: 168px;
     position: sticky;
     top: 0;
     max-height: 100vh;
-    padding-top: $ds-grid-margin-xl;
+    padding-top: var(--ds-grid-margin-xl, $ds-grid-margin-xl);
     @content;
   }
 }
@@ -87,16 +87,16 @@ $fixed-anchor-width: 168px;
 @mixin grid_gutter($gutter) {
   gap: $gutter;
   @include auro_grid-breakpoint--sm {
-   gap: $ds-grid-gutter-sm;
+   gap: var(--ds-grid-gutter-sm, $ds-grid-gutter-sm);
   }
   @include auro_grid-breakpoint--md {
-    gap: $ds-grid-gutter-md;
+    gap: var(--ds-grid-gutter-md, $ds-grid-gutter-md);
   }
   @include auro_grid-breakpoint--lg {
-    gap: $ds-grid-gutter-lg;
+    gap: var(--ds-grid-gutter-lg, $ds-grid-gutter-lg);
   }
   @include auro_grid-breakpoint--xl {
-    gap: $ds-grid-gutter-xl;
+    gap: var(--ds-grid-gutter-xl, $ds-grid-gutter-xl);
   }
 }
 
@@ -157,7 +157,7 @@ $fixed-anchor-width: 168px;
     }
 
     @include auro_grid-breakpoint--md {
-        grid-template-columns: $fixed-nav-width auto;
+        grid-template-columns: var(--fixed-nav-width, $fixed-nav-width) auto;
     }
   }
 
@@ -170,7 +170,7 @@ $fixed-anchor-width: 168px;
 
     @include auro_grid-breakpoint--md {
         grid-template-areas: "col1 col2";
-        grid-template-columns: auto $fixed-anchor-width;
+        grid-template-columns: auto var(--fixed-nav-width, $fixed-nav-width);
     }
 
   }
@@ -275,7 +275,7 @@ $fixed-anchor-width: 168px;
   }
   @include auro_grid-breakpoint--md {
     @include grid_padding($ds-grid-margin-md);
-    grid-template-columns: auto $fixed-anchor-width;
+    grid-template-columns: auto var(--fixed-anchor-width, $fixed-anchor-width);
       grid-template-areas:
       "breadcrumbs breadcrumbs"
       "main anchornav";
@@ -293,7 +293,7 @@ $fixed-anchor-width: 168px;
   .main {
     grid-area: main;
     * {
-      scroll-margin-top: $ds-grid-margin-md;
+      scroll-margin-top: var(--ds-grid-margin-md, $ds-grid-margin-md);
     }
   }
   .anchornav {
@@ -334,7 +334,7 @@ $fixed-anchor-width: 168px;
 
   @include auro_grid-breakpoint--md {
     @include grid_padding($ds-grid-margin-md);
-    grid-template-columns: $fixed-nav-width auto;
+    grid-template-columns: var(--fixed-nav-width, $fixed-nav-width) auto;
       grid-template-areas:
       "breadcrumbs breadcrumbs"
       "sidenav main";
@@ -358,7 +358,7 @@ $fixed-anchor-width: 168px;
 
   .sidenav {
     grid-area: sidenav;
-    background-color: $ds-color-base-white;
+    background-color: var(--ds-color-base-white, $ds-color-base-white);
     @include grid_padding($ds-grid-margin-xs);
 
     @include auro_grid-breakpoint--md {
@@ -374,7 +374,7 @@ $fixed-anchor-width: 168px;
     @include grid_padding(0);
     }
     * {
-      scroll-margin-top: $ds-grid-margin-md;
+      scroll-margin-top: var(--ds-grid-margin-md, $ds-grid-margin-md);
     }
   }
 }
@@ -412,7 +412,7 @@ $fixed-anchor-width: 168px;
 
   @include auro_grid-breakpoint--md {
     @include grid_padding($ds-grid-margin-md);
-    grid-template-columns: $fixed-nav-width auto $fixed-anchor-width;
+    grid-template-columns: var(--fixed-nav-width, $fixed-nav-width) auto var(--fixed-anchor-width, $fixed-anchor-width);
       grid-template-areas:
       "breadcrumbs breadcrumbs breadcrumbs"
       "sidenav main anchornav";
@@ -437,7 +437,7 @@ $fixed-anchor-width: 168px;
   .sidenav {
     grid-area: sidenav;
     z-index: 1;
-    background-color: $ds-color-base-white;
+    background-color: var(--ds-color-base-white, $ds-color-base-white);
     @include grid_padding($ds-grid-margin-xs);
     @include grid-stickycolumn--xs();
 
@@ -455,7 +455,7 @@ $fixed-anchor-width: 168px;
     @include grid_padding(0);
     }
     * {
-      scroll-margin-top: $ds-grid-margin-md;
+      scroll-margin-top: var(--ds-grid-margin-md, $ds-grid-margin-md);
     }
   }
 
diff --git a/src/_headings.scss b/src/_headings.scss
index 5d74222..eea3cd7 100644
--- a/src/_headings.scss
+++ b/src/_headings.scss
@@ -28,9 +28,9 @@
 #{$scope}.#{$prefix}heading {
   margin: calc(#{$ds-size-200} + #{$ds-size-150}) 0;
 
-  letter-spacing: $ds-text-heading-default-spacing;
+  letter-spacing: var(--ds-text-heading-default-spacing, $ds-text-heading-default-spacing);
 
-  font-weight: $ds-text-heading-default-weight;
+  font-weight: var(--ds-text-heading-default-weight, $ds-text-heading-default-weight);
 }
 
 /// Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. `<h1>`, `<h2>`, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.
@@ -53,17 +53,17 @@
 #{$scope}.#{$prefix}heading--display {
   margin-top: 0;
 
-  font-size: $ds-text-heading-display-size-breakpoint-sm;
-  font-weight: $ds-text-heading-display-weight;
-  line-height: $ds-text-heading-display-height-breakpoint-sm;
+  font-size: var(--ds-text-heading-display-size-breakpoint-sm, $ds-text-heading-display-size-breakpoint-sm);
+  font-weight: var(--ds-text-heading-display-weight, $ds-text-heading-display-weight);
+  line-height: var(--ds-text-heading-display-height-breakpoint-sm, $ds-text-heading-display-height-breakpoint-sm);
 
   @include auro_breakpoint--md {
-    font-size: $ds-text-heading-display-size-breakpoint-md;
-    line-height: $ds-text-heading-display-height-breakpoint-md;
+    font-size: var(--ds-text-heading-display-size-breakpoint-md, $ds-text-heading-display-size-breakpoint-md);
+    line-height: var(--ds-text-heading-display-height-breakpoint-md, $ds-text-heading-display-height-breakpoint-md);
   }
   @include auro_breakpoint--lg {
-    font-size: $ds-text-heading-display-size-breakpoint-lg;
-    line-height: $ds-text-heading-display-height-breakpoint-lg;
+    font-size: var(--ds-text-heading-display-size-breakpoint-lg, $ds-text-heading-display-size-breakpoint-lg);
+    line-height: var(--ds-text-heading-display-height-breakpoint-lg, $ds-text-heading-display-height-breakpoint-lg);
   }
 }
 
@@ -85,17 +85,17 @@
 /// @example scss - import file
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
 #{$scope}.#{$prefix}heading--800 {
-  font-size: $ds-text-heading-800-size-breakpoint-sm;
-  font-weight: $ds-text-heading-800-weight;
-  line-height: $ds-text-heading-800-height-breakpoint-sm;
+  font-size: var(--ds-text-heading-800-size-breakpoint-sm, $ds-text-heading-800-size-breakpoint-sm);
+  font-weight: var(--ds-text-heading-800-weight, $ds-text-heading-800-weight);
+  line-height: var(--ds-text-heading-800-height-breakpoint-sm, $ds-text-heading-800-height-breakpoint-sm);
 
   @include auro_breakpoint--md {
-    font-size: $ds-text-heading-800-size-breakpoint-md;
-    line-height: $ds-text-heading-800-height-breakpoint-md;
+    font-size: var(--ds-text-heading-800-size-breakpoint-md, $ds-text-heading-800-size-breakpoint-md);
+    line-height: var(--ds-text-heading-800-height-breakpoint-md, $ds-text-heading-800-height-breakpoint-md);
   }
   @include auro_breakpoint--lg {
-    font-size: $ds-text-heading-800-size-breakpoint-lg;
-    line-height: $ds-text-heading-800-height-breakpoint-lg;
+    font-size: var(--ds-text-heading-800-size-breakpoint-lg, $ds-text-heading-800-size-breakpoint-lg);
+    line-height: var(--ds-text-heading-800-height-breakpoint-lg, $ds-text-heading-800-height-breakpoint-lg);
   }
 }
 
@@ -117,17 +117,17 @@
 /// @example scss - import file
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
 #{$scope}.#{$prefix}heading--700 {
-  font-size: $ds-text-heading-700-size-breakpoint-sm;
-  font-weight: $ds-text-heading-700-weight;
-  line-height: $ds-text-heading-700-height-breakpoint-sm;
+  font-size: var(--ds-text-heading-700-size-breakpoint-sm, $ds-text-heading-700-size-breakpoint-sm);
+  font-weight: var(--ds-text-heading-700-weight, $ds-text-heading-700-weight);
+  line-height: var(--ds-text-heading-700-height-breakpoint-sm, $ds-text-heading-700-height-breakpoint-sm);
 
   @include auro_breakpoint--md {
-    font-size: $ds-text-heading-700-size-breakpoint-md;
-    line-height: $ds-text-heading-700-height-breakpoint-md;
+    font-size: var(--ds-text-heading-700-size-breakpoint-md, $ds-text-heading-700-size-breakpoint-md);
+    line-height: var(--ds-text-heading-700-height-breakpoint-md, $ds-text-heading-700-height-breakpoint-md);
   }
   @include auro_breakpoint--lg {
-    font-size: $ds-text-heading-700-size-breakpoint-lg;
-    line-height: $ds-text-heading-700-height-breakpoint-lg;
+    font-size: var(--ds-text-heading-700-size-breakpoint-lg, $ds-text-heading-700-size-breakpoint-lg);
+    line-height: var(--ds-text-heading-700-height-breakpoint-lg, $ds-text-heading-700-height-breakpoint-lg);
   }
 }
 
@@ -151,17 +151,17 @@
 #{$scope}.#{$prefix}heading--600 {
   margin: $ds-size-200 0;
 
-  font-size: $ds-text-heading-600-size-breakpoint-sm;
-  font-weight: $ds-text-heading-600-weight;
-  line-height: $ds-text-heading-600-height-breakpoint-sm;
+  font-size: var(--ds-text-heading-600-size-breakpoint-sm, $ds-text-heading-600-size-breakpoint-sm);
+  font-weight: var(--ds-text-heading-600-weight, $ds-text-heading-600-weight);
+  line-height: var(--ds-text-heading-600-height-breakpoint-sm, $ds-text-heading-600-height-breakpoint-sm);
 
   @include auro_breakpoint--md {
-    font-size: $ds-text-heading-600-size-breakpoint-md;
-    line-height: $ds-text-heading-600-height-breakpoint-md;
+    font-size: var(--ds-text-heading-600-size-breakpoint-md, $ds-text-heading-600-size-breakpoint-md);
+    line-height: var(--ds-text-heading-600-height-breakpoint-md, $ds-text-heading-600-height-breakpoint-md);
   }
   @include auro_breakpoint--lg {
-    font-size: $ds-text-heading-600-size-breakpoint-lg;
-    line-height: $ds-text-heading-600-height-breakpoint-lg;
+    font-size: var(--ds-text-heading-600-size-breakpoint-lg, $ds-text-heading-600-size-breakpoint-lg);
+    line-height: var(--ds-text-heading-600-height-breakpoint-lg, $ds-text-heading-600-height-breakpoint-lg);
   }
 }
 
@@ -185,17 +185,17 @@
 #{$scope}.#{$prefix}heading--500 {
   margin: $ds-size-200 0;
 
-  font-size: $ds-text-heading-500-size-breakpoint-sm;
-  font-weight: $ds-text-heading-500-weight;
-  line-height: $ds-text-heading-500-height-breakpoint-sm;
+  font-size: var(--ds-text-heading-500-size-breakpoint-sm, $ds-text-heading-500-size-breakpoint-sm);
+  font-weight: var(--ds-text-heading-500-weight, $ds-text-heading-500-weight);
+  line-height: var(--ds-text-heading-500-height-breakpoint-sm, $ds-text-heading-500-height-breakpoint-sm);
 
   @include auro_breakpoint--md {
-    font-size: $ds-text-heading-500-size-breakpoint-md;
-    line-height: $ds-text-heading-500-height-breakpoint-md;
+    font-size: var(--ds-text-heading-500-size-breakpoint-md, $ds-text-heading-500-size-breakpoint-md);
+    line-height: var(--ds-text-heading-500-height-breakpoint-md, $ds-text-heading-500-height-breakpoint-md);
   }
   @include auro_breakpoint--lg {
-    font-size: $ds-text-heading-500-size-breakpoint-lg;
-    line-height: $ds-text-heading-500-height-breakpoint-lg;
+    font-size: var(--ds-text-heading-500-size-breakpoint-lg, $ds-text-heading-500-size-breakpoint-lg);
+    line-height: var(--ds-text-heading-500-height-breakpoint-lg, $ds-text-heading-500-height-breakpoint-lg);
   }
 }
 
@@ -219,9 +219,9 @@
 #{$scope}.#{$prefix}heading--400 {
   margin: $ds-size-150 0;
 
-  font-size: $ds-text-heading-400-size;
-  font-weight: $ds-text-heading-400-weight;
-  line-height: $ds-text-heading-400-height;
+  font-size: var(--ds-text-heading-400-size, $ds-text-heading-400-size);
+  font-weight: var(--ds-text-heading-400-weight, $ds-text-heading-400-weight);
+  line-height: var(--ds-text-heading-400-height, $ds-text-heading-400-height);
 }
 
 /// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector
@@ -244,7 +244,7 @@
 #{$scope}.#{$prefix}heading--300 {
   margin: $ds-size-150 0;
 
-  font-size: $ds-text-heading-300-size;
-  font-weight: $ds-text-heading-300-weight;
-  line-height: $ds-text-heading-300-height;
+  font-size: var(--ds-text-heading-300-size, $ds-text-heading-300-size);
+  font-weight: var(--ds-text-heading-300-weight, $ds-text-heading-300-weight);
+  line-height: var(--ds-text-heading-300-height, $ds-text-heading-300-height);
 }
diff --git a/src/_normalize.scss b/src/_normalize.scss
index 50b4794..b006130 100644
--- a/src/_normalize.scss
+++ b/src/_normalize.scss
@@ -116,9 +116,9 @@ html#{$scope} {
 #{$scope}pre {
   font-family: monospace, monospace; /* 1 */ /* stylelint-disable-line font-family-no-duplicate-names */
   @if variable-exists(ds-text-body-size-default) {
-    font-size: $ds-text-body-size-default; /* 2 */
+    font-size: var(--ds-text-body-size-default, $ds-text-body-size-default); /* 2 */
   } @else {
-    font-size: $size-font-root;
+    font-size: var(--size-font-root, $size-font-root);
   }
 }
 
@@ -212,9 +212,9 @@ html#{$scope} {
 #{$scope}samp {
   font-family: monospace, monospace; /* 1 */ /* stylelint-disable-line font-family-no-duplicate-names */
   @if variable-exists(ds-text-body-size-default) {
-    font-size: $ds-text-body-size-default; /* 2 */
+    font-size: var(--ds-text-body-size-default, $ds-text-body-size-default); /* 2 */
   } @else {
-    font-size: $size-font-root;
+    font-size: var(--size-font-root, $size-font-root);
   }
 }
 
@@ -337,9 +337,9 @@ html#{$scope} {
   font-family: inherit; /* 2 */
   font-size: 100%; /* 2 */
   @if variable-exists(ds-text-body-height-default) {
-    line-height: $ds-text-body-height-default; /* 2 */
+    line-height: var(--ds-text-body-height-default, $ds-text-body-height-default); /* 2 */
   } @else {
-    line-height: $size-margin-baseline; /* 2 */
+    line-height: var(--size-margin-baseline, $size-margin-baseline); /* 2 */
   }
 }
 
@@ -412,6 +412,7 @@ html#{$scope} {
 #{$scope}[type='reset'],
 #{$scope}[type='submit'] {
   -webkit-appearance: none;
+  appearance: none;
 }
 
 ///
@@ -539,6 +540,7 @@ html#{$scope} {
   outline-offset: -2px; /* 1 */
 
   -webkit-appearance: textfield; /* 2 */
+  appearance: textfield; /* 2 */
 }
 
 ///
@@ -557,6 +559,7 @@ html#{$scope} {
 ///
 #{$scope}::-webkit-search-decoration {
   -webkit-appearance: none;
+  appearance: none;
 }
 
 ///
@@ -578,6 +581,7 @@ html#{$scope} {
   font: inherit; /* 1 */
 
   -webkit-appearance: button; /* 2 */
+  appearance: button; /* 2 */
 }
 
 /* Interactive
diff --git a/src/componentSupport/_containedButtons.scss b/src/componentSupport/_containedButtons.scss
index 6cb8a34..59ddecb 100644
--- a/src/componentSupport/_containedButtons.scss
+++ b/src/componentSupport/_containedButtons.scss
@@ -37,7 +37,7 @@
   flex-direction: column;
 
   > * {
-    margin-bottom: 1rem;
+    margin-bottom: var(--ds-text-body-size-default, $ds-text-body-size-default);
 
     &:last-child {
       margin-bottom: 0;
@@ -49,7 +49,7 @@
 
     > * {
       margin-bottom: 0;
-      margin-left: 1rem;
+      margin-left: var(--dstext-body-size-default, $ds-text-body-size-default);
 
       &:first-child {
         margin-left: 0;
diff --git a/src/componentSupport/_table.scss b/src/componentSupport/_table.scss
index 4285b13..383f5c6 100644
--- a/src/componentSupport/_table.scss
+++ b/src/componentSupport/_table.scss
@@ -17,23 +17,23 @@
   overflow: scroll;
 
   width: auto;
-  margin-bottom: $ds-size-400;
+  margin-bottom: (var--ds-size-400, $ds-size-400);
 
-  border-spacing: $ds-size-150;
+  border-spacing: (var--ds-size-150, $ds-size-150);
   border-collapse: collapse;
 
-  font-weight: $ds-text-heading-display-weight;
+  font-weight: (var--ds-text-heading-display-weight, $ds-text-heading-display-weight);
 
   tr {
     &:nth-child(even) {
-      background-color: $ds-color-brand-gray-100;
+      background-color: (var--ds-color-brand-gray-100, $ds-color-brand-gray-100);
     }
   }
 
   th {
     text-align: left;
 
-    font-weight: $ds-text-heading-default-weight;
+    font-weight: (var--ds-text-heading-default-weight, $ds-text-heading-default-weight);
   }
 
   @include auro_breakpoint--sm {
@@ -44,11 +44,11 @@
 
   thead {
     border-collapse: collapse;
-    border-bottom: 1px solid $ds-color-brand-gray-200;
+    border-bottom: 1px solid var(--ds-color-brand-gray-200, $ds-color-brand-gray-200);
   }
 
   th,
   td {
-    padding: $ds-size-200;
+    padding: (var--ds-size-200, $ds-size-200);
   }
 }
diff --git a/src/componentSupport/_tablist.scss b/src/componentSupport/_tablist.scss
index 9444c23..1b48fb2 100644
--- a/src/componentSupport/_tablist.scss
+++ b/src/componentSupport/_tablist.scss
@@ -25,13 +25,13 @@
   overflow-y: scroll;
 
   height: calc(#{$ds-size-600} + 1px);
-  margin-bottom: $ds-size-200;
+  margin-bottom: var(--ds-size-200, $ds-size-200);
 
   white-space: nowrap;
 
   border-width: 0 0 1px;
   border-style: solid;
-  border-color: $ds-color-border-primary-default;
+  border-color: var(--ds-color-border-primary-default, $ds-color-border-primary-default);
 
-  line-height: $ds-size-600;
+  line-height: var(--ds-size-600, $ds-size-600);
 }
diff --git a/src/elementDemoStyles/demoWrapper.scss b/src/elementDemoStyles/demoWrapper.scss
index bee9243..b55b620 100644
--- a/src/elementDemoStyles/demoWrapper.scss
+++ b/src/elementDemoStyles/demoWrapper.scss
@@ -6,7 +6,7 @@
 
 // matches max-width of AS.com and Auro docsite width specs
 body {
-  padding: var(--ds-size-400);
+  padding: var(--ds-size-400, $ds-size-400);
 }
 
 main {
diff --git a/src/elementDemoStyles/elementDemoStyles.scss b/src/elementDemoStyles/elementDemoStyles.scss
index f5916f0..ff95cfb 100644
--- a/src/elementDemoStyles/elementDemoStyles.scss
+++ b/src/elementDemoStyles/elementDemoStyles.scss
@@ -71,12 +71,12 @@ $paragraph: true;
 
 // !important because that libraries that inline CSS SUCK!
 pre  {
-  background: var(--ds-color-brand-gray-100) !important;
+  background: var(--ds-color-brand-gray-100, $ds-color-brand-gray-100) !important;
   border: unset !important;
-  margin-bottom: var(--ds-size-300) !important;
-  padding-left: var(--ds-size-150) !important;
-  padding-top: var(--ds-size-200) !important;
-  padding-bottom: var(--ds-size-200) !important;
+  margin-bottom: var(--ds-size-300, $ds-size-300) !important;
+  padding-left: var(--ds-size-150, $ds-size-150) !important;
+  padding-top: var(--ds-size-200, $ds-size-200) !important;
+  padding-bottom: var(--ds-size-200, $ds-size-200) !important;
 
   code {
     font-size: .85rem !important;
@@ -102,21 +102,21 @@ code[class*="language-"], pre[class*="language-"] {
 }
 
 code:not(.html):not(.css):not(.js) {
-  color: var(--ds-color-brand-flamingo-500);
+  color: var(--ds-color-brand-flamingo-500, $ds-color-brand-flamingo-500);
 }
 
 // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 
 .exampleWrapper {
   $stripe: #f3f3f3;
-  $background: var(--ds-color-base-white);
+  $background: var(--ds-color-base-white, $ds-color-base-white);
 
   background: repeating-linear-gradient( 45deg, $stripe, $stripe 10px, $background 10px, $background 20px);
 }
 
 .exampleWrapper--ondark {
-  $stripe: var(--ds-color-background-darkest);
-  $background: var(--ds-color-background-darker);
+  $stripe: var(--ds-color-background-darkest, $ds-color-background-darkest);
+  $background: var(--ds-color-background-darker, $ds-color-background-darker);
 
   background: repeating-linear-gradient( 45deg, $stripe, $stripe 10px, $background 10px, $background 20px);
 }
diff --git a/src/utilityClasses/_fontStyles.scss b/src/utilityClasses/_fontStyles.scss
index 4509aaf..af59e5c 100644
--- a/src/utilityClasses/_fontStyles.scss
+++ b/src/utilityClasses/_fontStyles.scss
@@ -27,7 +27,7 @@
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";
 #{$scope}.#{$prefix}util_fontWeightDefault {
   @if variable-exists(ds-text-body-default-weight) {
-    font-weight: $ds-text-body-default-weight $important;
+    font-weight: var(--$ds-text-body-default-weight) $important;
   }
 }
 
@@ -50,7 +50,7 @@
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";
 #{$scope}.#{$prefix}util_fontWeightMedium {
   @if variable-exists(ds-text-body-default-weight) {
-    font-weight: $ds-text-heading-medium-weight $important;
+    font-weight: var(--ds-text-heading-medium-weight, $ds-text-heading-medium-weight) $important;
   }
 }
 
@@ -73,7 +73,7 @@
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";
 #{$scope}.#{$prefix}util_fontWeightDisplay {
   @if variable-exists(ds-text-heading-display-weight) {
-    font-weight: $ds-text-heading-display-weight $important;
+    font-weight: var(--ds-text-heading-display-weight, $ds-text-heading-display-weight) $important;
   }
 }
 
@@ -96,8 +96,8 @@
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";
 #{$scope}.#{$prefix}util_body--lg {
   @if variable-exists(ds-text-body-size-lg) {
-    font-size: $ds-text-body-size-lg $important;
-    line-height: $ds-text-body-height-lg $important;
+    font-size: var(--ds-text-body-size-lg, $ds-text-body-size-lg) $important;
+    line-height: var(--ds-text-body-height-lg, $ds-text-body-height-lg) $important;
   }
 }
 
@@ -120,8 +120,8 @@
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";
 #{$scope}.#{$prefix}util_body--sm {
   @if variable-exists(ds-text-body-size-lg) {
-    font-size: $ds-text-body-size-sm $important;
-    line-height: $ds-text-body-height-sm $important;
+    font-size: var(--ds-text-body-size-sm, $ds-text-body-size-sm) $important;
+    line-height: var(--ds-text-body-height-sm, $ds-text-body-height-sm) $important;
   }
 }
 
@@ -145,7 +145,7 @@
 
 #{$scope}.#{$prefix}util_body--xs {
   @if variable-exists(ds-text-body-size-xs) {
-    font-size: $ds-text-body-size-xs $important;
-    line-height: $ds-text-body-height-xs $important;
+    font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs) $important;
+    line-height: var(--ds-text-body-height-xs, $ds-text-body-height-xs) $important;
   }
 }
diff --git a/src/utilityClasses/_listProperties.scss b/src/utilityClasses/_listProperties.scss
index 8225973..8637b49 100644
--- a/src/utilityClasses/_listProperties.scss
+++ b/src/utilityClasses/_listProperties.scss
@@ -58,7 +58,7 @@
 }
 
 
-/// Utility class to display unordered lists with unindented bullets
+/// Utility class to display unordered lists with non-indented bullets
 ///
 /// [Manage](/#utility-variable-important) `!important` flag.
 ///