feat(tokens): implement new design tokens #2

demo/api.html

@@ -22,7 +22,7 @@
       type="text/css"
       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>

demo/index.html

@@ -22,7 +22,7 @@
       type="text/css"
       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

@@ -17,7 +17,7 @@
   "main": "index.js",
   "license": "Apache-2.0",
   "engines": {
-    "node": "^18.x || ^20.x "
+    "node": "^18.x || ^20.x"
   },
   "dependencies": {
     "chalk": "^5.3.0",

src/style-fixed.scss

@@ -1,4 +1,4 @@
-@import "./../node_modules/@alaskaairux/design-tokens/dist/tokens/SassCustomProperties";
+@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SassCustomProperties";
 
 :host([fixed]) {
   @import './style.scss';

src/style-unformatted-fixed.scss

@@ -1,4 +1,4 @@
-@import './../node_modules/@alaskaairux/design-tokens/dist/tokens/SassCustomProperties';
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SassCustomProperties';
 
 :host([fixed]) {
     @import './style-unformatted.scss';

src/style-unformatted.scss

@@ -1,12 +1,14 @@
-@import "./../node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariables";
-@import "./../node_modules/@alaskaairux/design-tokens/dist/tokens/SassCustomProperties";
-@import "./../node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints";
+@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SassCustomProperties";
+@import "./../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints";
+
+/* stylelint-disable scss/selector-nest-combinators */
 
 [unformatted] .unformattedWrapper {
-  padding: var(--auro-size-xl);
+  padding: var(--ds-size-400, $ds-size-400);
 
   @include auro_breakpoint--md {
-    padding: var(--auro-size-xxxl);
-    padding-top: var(--auro-size-xl);
+    padding: var(--ds-size-800, $ds-size-800);
+    padding-top: var(--ds-size-400, $ds-size-400);
   }
 }

src/style.scss

@@ -1,15 +1,17 @@
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 // ---------------------------------------------------------------------
-@import "./../node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariables";
-@import "./../node_modules/@alaskaairux/design-tokens/dist/tokens/SassCustomProperties";
-@import "./../node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints";
+
+/* stylelint-disable declaration-empty-line-before, order/properties-order, rule-empty-line-before */
+
+@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SassCustomProperties";
+@import "./../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints";
 
 // layout styles - define any layout specifications for UI that is contained WITHIN the component
 // never define layout that would cause effect on element outside the scope of this component
 
-
 // Default selector setting mobile-first specs
 .dialog {
   top: 0;