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

- also add scss fallback values
- keep old token npm package for the time being

Changes to be committed:
	modified:   demo/index.html
	modified:   package-lock.json
	modified:   package.json
	modified:   src/style.scss

demo/index.html

@@ -23,6 +23,7 @@
       href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.css"
     />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
   </head>

package.json

@@ -27,12 +27,14 @@
   },
   "peerDependencies": {
     "@alaskaairux/design-tokens": "^3.14.0",
-    "@aurodesignsystem/webcorestylesheets": "^4.6.0"
+    "@aurodesignsystem/design-tokens": "^4.1.1",
+    "@aurodesignsystem/webcorestylesheets": "^5.0.4"
   },
   "devDependencies": {
     "@alaskaairux/design-tokens": "^3.15.5",
+    "@aurodesignsystem/design-tokens": "^4.1.1",
     "@aurodesignsystem/eslint-config": "^1.3.0",
-    "@aurodesignsystem/webcorestylesheets": "^4.8.0",
+    "@aurodesignsystem/webcorestylesheets": "^5.0.4",
     "@commitlint/cli": "^17.7.0",
     "@commitlint/config-conventional": "^17.7.0",
     "@open-wc/testing": "^3.2.0",

src/style.scss

@@ -1,18 +1,21 @@
 // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
+// Support for fallback values
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables.scss';
+
 :host {
     position: fixed;
-    right: var(--auro-size-300);
-    bottom: var(--auro-size-300);
+    right: var(--ds-size-300, $ds-size-300);
+    bottom: var(--ds-size-300, $ds-size-300);
 }
 
 :host([hidden]) {
   display: none;
 }
 
 auro-button {
-  box-shadow: var(--auro-elevation-300);
+  box-shadow: var(--ds-elevation-300, $ds-elevation-300);
 
   &::part(button) {
     transition-property: opacity;