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

- also add fallback values to provided tokens

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

README.md

@@ -152,7 +152,3 @@ Automated tests are required for every Auro component. See `.\test\auro-combobox
 
 Bundled assets are only generated in the remote and not merged back to this repo. To review and/or test a bundled asset locally, run `$ npm run bundler` to generate assets.
 
-### Demo deployment
-
-To deploy a demo version of the component for review, run `npm run build:demo` to create a `./build` directory that can be pushed to any static server.
-

demo/index.html

@@ -23,6 +23,7 @@
       href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/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

@@ -28,13 +28,13 @@
     "lit": "^2.7.6"
   },
   "peerDependencies": {
-    "@alaskaairux/design-tokens": "^3.13.0",
-    "@aurodesignsystem/webcorestylesheets": "^4.3.1"
+    "@aurodesignsystem/design-tokens": "^4.1.1",
+    "@aurodesignsystem/webcorestylesheets": "^5.0.4"
   },
   "devDependencies": {
-    "@alaskaairux/design-tokens": "^3.14.0",
+    "@aurodesignsystem/design-tokens": "^4.1.1",
     "@aurodesignsystem/eslint-config": "^1.3.0",
-    "@aurodesignsystem/webcorestylesheets": "^4.6.1",
+    "@aurodesignsystem/webcorestylesheets": "^5.0.4",
     "@commitlint/cli": "^17.6.7",
     "@commitlint/config-conventional": "^17.6.7",
     "@open-wc/testing": "^3.2.0",

src/style.scss

@@ -3,12 +3,14 @@
 
 /* stylelint-disable max-nesting-depth */
 
-@import './../node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties';
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/utilityClasses/displayProperties';
+
+// Support for fallback values
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables.scss';
 
 [auro-input] {
-  /* 3.5rem if --auro-size-700 not defined */
-  min-height: var(--auro-size-700, 3.5rem);
-  max-height: var(--auro-size-700, 3.5rem);
+  min-height: var(--ds-size-700, $ds-size-700);
+  max-height: var(--ds-size-700, $ds-size-700);
 
   &::part(iconContainer) {
     top: 0;
@@ -38,7 +40,7 @@
 :host {
   combobox-dropdown {
     &::part(trigger) {
-      padding-right: var(--auro-size-150, var(--auro-size-sm));
+      padding-right: var(--ds-size-150, $ds-size-150);
     }
   }
 }