perf(token): update token per new theming #58

- add fallback values for the tokens

Changes to be committed:
	modified:   demo/demo.md
	modified:   docs/index.html
	modified:   package-lock.json
	modified:   package.json
	modified:   src/style-flight-segment.scss
	modified:   src/style-flightline.scss

demo/demo.md

@@ -221,7 +221,7 @@ The following illustrates a cancellation of international flight with stopovers
 
 The `auro-flightline` element is reactive to its parent container's `width` value versus a `@media` query based on the device `width`. This allows for greater control over the shape of the element when in constrained spaces.
 
-The default container query is a min-width of `320px`, or `var(--auro-grid-breakpoint-xs)`.
+The default container query is a min-width of `320px`, or `var(--ds-grid-breakpoint-xs)`.
 
 The first example illustrates a `auro-flightline` element with a container width of `300px`. The next `auro-flightline` element is within a container set at `100%` for context. Notice when the container reaches a width of < `320px`, the container query switches the UI.
 

docs/index.html

@@ -9,8 +9,8 @@
   <style>
     main {
       width: 80%;
-      margin: var(--auro-size-xl) auto var(--auro-size-xxxl);
-      padding-bottom: var(--auro-size-xxxl);
+      margin: var(--ds-size-400) auto var(--ds-size-800);
+      padding-bottom: var(--ds-size-800);
     }
 
     @media(min-width: 1024px) {
@@ -21,23 +21,23 @@
 
     .wc-wrapper auro-flightline {
       display: inline-block;
-      margin-bottom: var(--auro-size-md);
-      margin-right: var(--auro-size-md);
+      margin-bottom: var(--ds-size-200);
+      margin-right: var(--ds-size-200);
     }
 
     .codeWrapper {
-      background-color: var(--auro-color-brand-midnight-400);
+      background-color: var(--ds-color-brand-midnight-400);
       color: #fff;
-      padding: var(--auro-size-md);
+      padding: var(--ds-size-200);
       border-radius: 0.375rem;
     }
 
     .codeWrapper p {
-      margin: var(--auro-size-xs);
+      margin: var(--ds-size-100);
     }
 
     .margin {
-      margin: var(--auro-size-md) 0;
+      margin: var(--ds-size-200) 0;
     }
 
     code {
@@ -81,7 +81,7 @@ <h3>auro-flightline: default</h3>
   </main>
   <div id="assets">
     <link rel="stylesheet"
-      href="https://unpkg.com/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css" />
+      href="https://unpkg.com/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css" />
     <link rel="stylesheet"
       href="https://unpkg.com/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials.css" />