perf(theme): update token prefixes #159

demo/api.html

@@ -22,7 +22,10 @@
       type="text/css"
       href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
     />
+    <!-- legacy reference is still needed to support auro-accordion's use of legacy toke vales at this time -->
     <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>

demo/index.html

@@ -22,7 +22,10 @@
       type="text/css"
       href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
     />
+    <!-- legacy reference is still needed to support auro-accordion's use of legacy toke vales at this time -->
     <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>

docs/partials/installDeps.md

@@ -3,6 +3,6 @@
 The following Auro peer dependencies must be included.
 
 ```shell
-$ npm i alaskaairux/design-tokens
+$ npm i @aurodesignsystem/design-tokens
 $ npm i @aurodesignsystem/webcorestylesheets
 ```

package.json

@@ -20,8 +20,8 @@
   },
   "dependencies": {
     "@alaskaairux/icons": "^4.30.1",
-    "@aurodesignsystem/auro-dropdown": "^2.9.9",
-    "@aurodesignsystem/auro-input": "^2.14.1",
+    "@aurodesignsystem/auro-dropdown": "^2.9.10",
+    "@aurodesignsystem/auro-input": "^2.15.1",
     "@material/mwc-icon-button": "^0.27.0",
     "@material/mwc-list": "^0.27.0",
     "@material/mwc-menu": "^0.27.0",
@@ -30,13 +30,14 @@
     "wc-range-datepicker": "^1.3.0"
   },
   "peerDependencies": {
-    "@alaskaairux/design-tokens": "^3.12.1",
+    "@alaskaairux/design-tokens": "^3.15.5",
     "@aurodesignsystem/webcorestylesheets": "^4.2.0"
   },
   "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": "^18.2.0",
     "@commitlint/config-conventional": "^18.1.0",
     "@open-wc/testing": "^3.2.2",

src/auro-calendar.js

@@ -244,7 +244,7 @@ export class AuroCalendar extends RangeDatepicker {
       maxCalendars = 2;
     }
 
-    // This numerical value comes from the SCSS variable 'auro-breakpoint-sm' and needs to be changed to use the variable name
+    // This numerical value comes from the SCSS variable 'ds-grid-breakpoint-sm' and needs to be changed to use the variable name
     if (vw < 660) {
       maxCalendars = 12;
     }

src/style-auro-calendar-cell.scss

@@ -3,46 +3,46 @@
 
 // // ---------------------------------------------------------------------
 
-@import './../node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints';
-@import './../node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariables';
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints';
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
 
 /* stylelint-disable selector-max-class, color-function-notation, order/properties-order, declaration-empty-line-before */
 
 .day {
   position: relative;
 
-  width: var(--auro-size-600);
-  height: var(--auro-size-800);
+  width: var(--ds-size-600, $ds-size-600);
+  height: var(--ds-size-800, $ds-size-800);
 
   padding: 0;
 
   border-width: 1px;
   border-style: solid;
   border-color: transparent;
-  border-radius: var(--auro-size-300);
+  border-radius: var(--ds-size-300, $ds-size-300);
 
   background-color: transparent;
-  color: var(--auro-color-text-primary-on-light);
+  color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
 
   cursor: pointer;
 
-  font-family: var(--auro-font-family-default);
-  font-size: var(--auro-text-body-size-lg);
+  font-family: var(--ds-font-family-default, $ds-font-family-default);
+  font-size: var(--ds-text-body-size-lg, $ds-text-body-size-lg);
 
   user-select: none;
 
   &.disabled {
-    color: var(--auro-color-text-secondary-on-dark);
+    color: var(--ds-color-text-secondary-inverse, $ds-color-text-secondary-inverse);
 
     pointer-events: none;
   }
 
   &.selected {
-    border-color: var(--auro-color-background-darker);
+    border-color: var(--ds-color-background-darker, $ds-color-background-darker);
 
-    background-color: var(--auro-color-background-darker);
+    background-color: var(--ds-color-background-darker, $ds-color-background-darker);
     box-shadow: 0 .1px 5px rgba(0, 0, 0, .12), 0 5px 10px rgba(0, 0, 0, .1);
-    color: var(--auro-color-background-lightest);
+    color: var(--ds-color-background-lightest, $ds-color-background-lightest);
   }
 
   &.inRange {
@@ -53,10 +53,10 @@
       left: 50%;
 
       display: block;
-      width: var(--auro-size-600);
-      height: var(--auro-size-600);
+      width: var(--ds-size-600, $ds-size-600);
+      height: var(--ds-size-600, $ds-size-600);
 
-      background-color: var(--auro-color-background-lighter);
+      background-color: var(--ds-color-background-lighter, $ds-color-background-lighter);
 
       content: '';
       transform: translate(-50%, -50%);
@@ -73,7 +73,7 @@
   align-items: center;
   justify-content: center;
 
-  font-size: var(--auro-text-body-size-xxs);
+  font-size: var(--ds-text-body-size-xxs, $ds-text-body-size-xxs);
 }
 
 ::slotted(*) {
@@ -95,22 +95,22 @@
 
 @include auro_grid-breakpoint--xs {
   .daySlot {
-    font-size: var(--auro-text-body-size-xs);
+    font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
   }
 }
 
 @media (hover: hover) {
   .day {
     &:hover {
-      background-color: #f0f0f0; // var(--auro-color-ui-bkg-hover-on-light); - this token was part of the design but caused a problem with the `inRange` date styles so we had to switch to a solid color for hover.
-      color: var(--auro-color-text-primary-on-light);
+      background-color: #f0f0f0; // var(--ds-color-ui-bkg-hover-default); - this token was part of the design but caused a problem with the `inRange` date styles so we had to switch to a solid color for hover.
+      color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
 
       cursor: pointer;
     }
 
     &.selected {
       &:hover {
-        background-color: var(--auro-color-background-lightest);
+        background-color: var(--ds-color-background-lightest, $ds-color-background-lightest);
       }
     }
   }