fix: adjust shape of UI for a11y UI 209

The issue around the misshaped UI was related to the manual nudging of
the inserted icon and the updates to the icons shape and relative size
over time.

Updating the nudge from 2px to 4px addresses the UI issue.

This commit also has an update to the README based on updates to the
generator with the build process.

On branch dsande/focusVisible/209
Changes to be committed:
modified:   README.md
modified:   src/style.scss

README.md

@@ -58,15 +58,6 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
-### CSS Custom Property fallbacks
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/cssFallbacks.md) -->
-[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are [not supported](https://auro.alaskaair.com/support/custom-properties) in older browsers. For this, fallback properties are pre-generated and included with the npm.
-
-Any update to the Auro Design Tokens will be immediately reflected with browsers that support CSS custom properties, legacy browsers will require updated components with pre-generated fallback properties.
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
 ### Define dependency in project component
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md) -->

src/style.scss

@@ -278,6 +278,6 @@ svg {
   --auro-size-lg: 1rem;
 
   position: relative;
-  top: var(--ds-size-25, $ds-size-25);
+  top: var(--ds-size-50, $ds-size-50);
   margin-left: var(--ds-size-25, $ds-size-25);
 }