From 4403360a7dbf6668f2f5f4a135ffca86b34baa68 Mon Sep 17 00:00:00 2001
From: fajar-apri-alaska <Fajar.Apriansyah@alaskaair.com>
Date: Tue, 14 Nov 2023 11:48:11 +0700
Subject: [PATCH] perf(token): update token per new theming #6

Changes to be committed:
	modified:   demo/index.html
	modified:   package-lock.json
	modified:   package.json
	modified:   src/style-items.scss
	modified:   src/style-sections.scss
	modified:   src/style.scss
---
 demo/index.html         |   5 +-
 package-lock.json       | 101 +++++++++++++---------------------------
 package.json            |   8 ++--
 src/style-items.scss    |  60 ++++++++++++------------
 src/style-sections.scss |  26 +++++------
 src/style.scss          |  22 ++++-----
 6 files changed, 95 insertions(+), 127 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index ad0546d..e8d8d6c 100644
--- a/demo/index.html
+++ b/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>
@@ -42,7 +45,7 @@
     </script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
-    <script src="https://cdn.jsdelivr.net/npm/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
 
     <script type="module" src="../index.js"  data-demo-script="true"></script>
     <script type="module">
diff --git a/package-lock.json b/package-lock.json
index 8395a8f..5813177 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@aurodesignsystem/auro-sidenav",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@aurodesignsystem/auro-sidenav",
-      "version": "0.0.0",
+      "version": "1.0.0",
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -16,9 +16,9 @@
         "lit": "^2.7.5"
       },
       "devDependencies": {
-        "@alaskaairux/design-tokens": "^3.14.0",
+        "@aurodesignsystem/design-tokens": "^4.2.0",
         "@aurodesignsystem/eslint-config": "^1.3.0",
-        "@aurodesignsystem/webcorestylesheets": "^4.5.0",
+        "@aurodesignsystem/webcorestylesheets": "^5.0.5",
         "@commitlint/cli": "^17.6.5",
         "@commitlint/config-conventional": "^17.6.5",
         "@open-wc/testing": "^3.2.0",
@@ -64,8 +64,8 @@
         "node": ">=18.15.0"
       },
       "peerDependencies": {
-        "@alaskaairux/design-tokens": "^3.14.0",
-        "@aurodesignsystem/webcorestylesheets": "^4.5.0"
+        "@aurodesignsystem/design-tokens": "^4.2.0",
+        "@aurodesignsystem/webcorestylesheets": "^5.0.5"
       }
     },
     "node_modules/@75lb/deep-merge": {
@@ -104,6 +104,7 @@
       "resolved": "https://registry.npmjs.org/@alaskaairux/design-tokens/-/design-tokens-3.14.0.tgz",
       "integrity": "sha512-3nTfD1dED6nMArNP6/G0e1TAgy/13MqHGb9W2DcBG603Dytj1JzpiESsgVk2LdY0JdAubeuy1mk23WS7VxarIQ==",
       "hasInstallScript": true,
+      "peer": true,
       "dependencies": {
         "chalk": "^4.1.2"
       }
@@ -112,6 +113,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "peer": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -126,6 +128,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "peer": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -141,6 +144,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "peer": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -151,12 +155,14 @@
     "node_modules/@alaskaairux/design-tokens/node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "peer": true
     },
     "node_modules/@alaskaairux/design-tokens/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "peer": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -404,6 +410,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/@aurodesignsystem/design-tokens": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@aurodesignsystem/design-tokens/-/design-tokens-4.2.0.tgz",
+      "integrity": "sha512-Uux0YeN6gnYmB5WohsqCL+iBPFP6Ea/2OnpgMtZUwDIKePRDHh2n5OsqdSFk0HsS+qMuuqJMLtMqgVCFlP2scw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "chalk": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@aurodesignsystem/eslint-config": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@aurodesignsystem/eslint-config/-/eslint-config-1.3.0.tgz",
@@ -778,72 +796,19 @@
       }
     },
     "node_modules/@aurodesignsystem/webcorestylesheets": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/@aurodesignsystem/webcorestylesheets/-/webcorestylesheets-4.6.1.tgz",
-      "integrity": "sha512-nGtwdozsEqXtTWCYKSZqUcsTN8z+F3zr628xTotCnmii96uA5XTjiI2aQXICCvAMuC/74xZgXe2tqRMUVPM9Kw==",
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/@aurodesignsystem/webcorestylesheets/-/webcorestylesheets-5.0.5.tgz",
+      "integrity": "sha512-BwVux3qElPaKxh58PjlTsdbM8xtXRMGNubw1wz6egDn6FbJ+96aOeg+BXC0f4rsnW/KkkPKLOkbzZFUPvMmyHg==",
       "hasInstallScript": true,
       "dependencies": {
-        "chalk": "^4.1.2"
-      },
-      "peerDependencies": {
-        "@alaskaairux/design-tokens": "^3.11.0",
-        "sass": "^1.42.1"
-      }
-    },
-    "node_modules/@aurodesignsystem/webcorestylesheets/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@aurodesignsystem/webcorestylesheets/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/@aurodesignsystem/webcorestylesheets/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dependencies": {
-        "color-name": "~1.1.4"
+        "chalk": "^5.3.0"
       },
       "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/@aurodesignsystem/webcorestylesheets/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-    },
-    "node_modules/@aurodesignsystem/webcorestylesheets/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dependencies": {
-        "has-flag": "^4.0.0"
+        "node": "^18 || ^20"
       },
-      "engines": {
-        "node": ">=8"
+      "peerDependencies": {
+        "@aurodesignsystem/design-tokens": "^4.1.1",
+        "sass": "^1.42.1"
       }
     },
     "node_modules/@babel/code-frame": {
diff --git a/package.json b/package.json
index 901d51d..0f4b913 100644
--- a/package.json
+++ b/package.json
@@ -25,13 +25,13 @@
     "lit": "^2.7.5"
   },
   "peerDependencies": {
-    "@alaskaairux/design-tokens": "^3.14.0",
-    "@aurodesignsystem/webcorestylesheets": "^4.5.0"
+    "@aurodesignsystem/design-tokens": "^4.2.0",
+    "@aurodesignsystem/webcorestylesheets": "^5.0.5"
   },
   "devDependencies": {
-    "@alaskaairux/design-tokens": "^3.14.0",
+    "@aurodesignsystem/design-tokens": "^4.2.0",
     "@aurodesignsystem/eslint-config": "^1.3.0",
-    "@aurodesignsystem/webcorestylesheets": "^4.5.0",
+    "@aurodesignsystem/webcorestylesheets": "^5.0.5",
     "@commitlint/cli": "^17.6.5",
     "@commitlint/config-conventional": "^17.6.5",
     "@open-wc/testing": "^3.2.0",
diff --git a/src/style-items.scss b/src/style-items.scss
index de2d8bf..3bf2c89 100644
--- a/src/style-items.scss
+++ b/src/style-items.scss
@@ -4,18 +4,18 @@
 // ---------------------------------------------------------------------
 
 // Import Auro tokens
-@import './../node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariables';
-@import './../node_modules/@alaskaairux/design-tokens/dist/tokens/SassCustomProperties';
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SassCustomProperties';
 
-@import './../node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints';
-@import './../node_modules/@aurodesignsystem/webcorestylesheets/dist/core';
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints';
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/core';
 
 svg {
   top: -4px;
-  width: var(--auro-size-300);
+  width: var(--ds-size-300, $ds-size-300);
   /* stylelint-disable-next-line declaration-no-important */
-  height: var(--auro-size-300) !important; // !important necc. to override inline styling
-  color: var(--auro-color-icon-primary-on-light);
+  height: var(--ds-size-300, $ds-size-300) !important; // !important necc. to override inline styling
+  color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);
 }
 
 %hyperlink-styles {
@@ -25,34 +25,34 @@ svg {
   border-width: 1px;
   border-style: solid;
   border-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-size: var(--auro-text-body-size-lg);
-  line-height: var(--auro-text-body-height-lg);
+  font-size: var(--ds-text-body-size-lg, $ds-text-body-size-lg);
+  line-height: var(--ds-text-body-height-lg, $ds-text-body-height-lg);
   /* stylelint-disable-next-line declaration-no-important */
   text-decoration: none !important; // necc to override default hyperlink styling
 
   &:hover {
-    background: var(--auro-color-ui-bkg-hover-on-light);
+    background: var(--ds-color-ui-bkg-hover-default, $ds-color-ui-bkg-hover-default);
     /* stylelint-disable-next-line declaration-no-important */
-    color: var(--auro-color-text-primary-on-light) !important; // necc to override default hyperlink styling
+    color: var(--ds-color-text-primary-default, $ds-color-text-primary-default) !important; // necc to override default hyperlink styling
   }
 
   &:visited {
-    color: var(--auro-color-text-primary-on-light);
+    color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
   }
 
   &:focus-visible {
-    border-color: var(--auro-color-ui-default-on-light);
-    border-radius: var(--auro-border-radius);
+    border-color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
+    border-radius: var(--ds-border-radius, $ds-border-radius);
     background: none;
-    color: var(--auro-color-text-primary-on-light);
+    color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
     outline: none;
 
     &:hover {
-      background: var(--auro-color-ui-bkg-hover-on-light);
+      background: var(--ds-color-ui-bkg-hover-default, $ds-color-ui-bkg-hover-default);
       /* stylelint-disable-next-line declaration-no-important */
-      color: var(--auro-color-text-primary-on-light) !important; // necc to override default hyperlink styling
+      color: var(--ds-color-text-primary-default, $ds-color-text-primary-default) !important; // necc to override default hyperlink styling
     }
   }
 }
@@ -74,41 +74,41 @@ svg {
 
 :host([tier="0"]) {
   .hyperlink {
-    padding: var(--auro-size-200);
-    padding-left: calc(var(--auro-size-200) - 2px);
+    padding: var(--ds-size-200, $ds-size-200);
+    padding-left: calc(var(--ds-size-200, $ds-size-200) - 2px);
   }
 }
 
 :host([tier="1"]) {
   .hyperlink {
-    padding: var(--auro-size-100) var(--auro-size-200) var(--auro-size-100) var(--auro-size-500);
-    padding-left: calc(var(--auro-size-500) - 2px);
-    font-size: var(--auro-text-body-size-default);
-    line-height:var(--auro-text-body-height-default);
+    padding: var(--ds-size-100, $ds-size-100) var(--ds-size-200, $ds-size-200) var(--ds-size-100, $ds-size-100) var(--ds-size-500, $ds-size-500);
+    padding-left: calc(var(--ds-size-500, $ds-size-500) - 2px);
+    font-size: var(--ds-text-body-size-default, $ds-text-body-size-default);
+    line-height:var(--ds-text-body-height-default, $ds-text-body-height-default);
   }
 }
 
 %selected-item-colors {
-  color: var(--auro-color-text-link-on-light);
+  color: var(--ds-color-text-link-default, $ds-color-text-link-default);
 
   &:hover {
     /* stylelint-disable-next-line declaration-no-important */
-    color: var(--auro-color-text-link-on-light) !important; // necc to override default hyperlink styling
+    color: var(--ds-color-text-link-default, $ds-color-text-link-default) !important; // necc to override default hyperlink styling
   }
 
   &:focus-visible {
-    color: var(--auro-color-text-link-on-light);
+    color: var(--ds-color-text-link-default, $ds-color-text-link-default);
 
     &:hover {
       /* stylelint-disable-next-line declaration-no-important */
-      color: var(--auro-color-text-link-on-light) !important; // necc to override default hyperlink styling
+      color: var(--ds-color-text-link-default, $ds-color-text-link-default) !important; // necc to override default hyperlink styling
     }
   }
 }
 
 :host([selected]) {
-  border-left-color: var(--auro-color-ui-default-on-light);
-  color: var(--auro-color-text-link-on-light);
+  border-left-color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
+  color: var(--ds-color-text-link-default, $ds-color-text-link-default);
 
   .hyperlink {
     @extend %selected-item-colors;
diff --git a/src/style-sections.scss b/src/style-sections.scss
index fe5a950..d7a83ac 100644
--- a/src/style-sections.scss
+++ b/src/style-sections.scss
@@ -4,11 +4,11 @@
 // ---------------------------------------------------------------------
 
 // Import Auro tokens
-@import './../node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariables';
-@import './../node_modules/@alaskaairux/design-tokens/dist/tokens/SassCustomProperties';
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SassCustomProperties';
 
-@import './../node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints';
-@import './../node_modules/@aurodesignsystem/webcorestylesheets/dist/core';
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints';
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/core';
 
 
 
@@ -18,24 +18,24 @@
   width: 100%;
   padding: 0;
   margin: 0;
-  color: var(--auro-color-text-primary-on-light);
+  color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
   vertical-align: middle;
 
   .trigger {
     width: 100%;
     justify-content: space-between;
-    padding: var(--auro-size-200);
+    padding: var(--ds-size-200, $ds-size-200);
     border-width: 1px;
     border-style: solid;
     border-color: transparent;
 
     &:hover {
-      background: var(--auro-color-ui-bkg-hover-on-light);
+      background: var(--ds-color-ui-bkg-hover-default, $ds-color-ui-bkg-hover-default);
      }
 
     &:focus-visible {
-      border-color: var(--auro-color-ui-default-on-light);
-      border-radius: var(--auro-border-radius);
+      border-color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
+      border-radius: var(--ds-border-radius, $ds-border-radius);
     }
   }
 
@@ -49,13 +49,13 @@
 }
 
 .iconWrapper {
-  height: var(--auro-size-300);
+  height: var(--ds-size-300, $ds-size-300);
 
   svg {
-    width: var(--auro-size-300);
+    width: var(--ds-size-300, $ds-size-300);
     /* stylelint-disable-next-line declaration-no-important */
     height: auto !important; // necc to override inline styling
-    margin-left: var(--auro-size-150) ;
-    color: var(--auro-color-icon-primary-on-light);
+    margin-left: var(--ds-size-150, $ds-size-150) ;
+    color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);
   }
 }
diff --git a/src/style.scss b/src/style.scss
index 2360034..887a217 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -4,11 +4,11 @@
 // ---------------------------------------------------------------------
 
 // Import Auro tokens
-@import './../node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariables';
-@import './../node_modules/@alaskaairux/design-tokens/dist/tokens/SassCustomProperties';
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SassCustomProperties';
 
-@import './../node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints';
-@import './../node_modules/@aurodesignsystem/webcorestylesheets/dist/core';
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints';
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/core';
 
 // container styles - defines the look of the outer custom component
 :host {
@@ -16,24 +16,24 @@
   width: 100%;
   padding: 0;
   margin: 0;
-  color: var(--auro-color-text-primary-on-light);
-  font-size: var(--auro-text-body-size-lg);
+  color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
+  font-size: var(--ds-text-body-size-lg, $ds-text-body-size-lg);
   vertical-align: middle;
 
   ::slotted(auro-sidenavitem){
     display: block;
-    border-bottom: 1px solid var(--auro-color-border-divider-on-light);
+    border-bottom: 1px solid var(--ds-color-border-divider-default, $ds-color-border-divider-default);
   }
 
   ::slotted(auro-sidenavsection){
     display: block;
-    border-bottom: 1px solid var(--auro-color-border-divider-on-light);
+    border-bottom: 1px solid var(--ds-color-border-divider-default, $ds-color-border-divider-default);
   }
 
   ::slotted([slot="heading"]) {
     display: block;
-    padding: 0 0 var(--auro-size-200) 0;
-    font-size: var(--auro-text-heading-300-size);
-    font-weight: var(--auro-text-heading-300-weight);
+    padding: 0 0 var(--ds-size-200, $ds-size-200) 0;
+    font-size: var(--ds-text-heading-300-size, $ds-text-heading-300-size);
+    font-weight: var(--ds-text-heading-300-weight, $ds-text-heading-300-weight);
   }
 }