Repository: AlaskaAirlines/auro-formkit
Pull request #561: fix: update font styles to use themable tokens
Author: login: sun-mota
Labels: name: released
description: Completed work has been released
name: released on @beta
Created: 2025-05-02T20:46:18Z | Merged: 2025-05-05T16:12:29Z

# Alaska Airlines Pull Request

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

## Checklist:

- [x] My update follows the CONTRIBUTING guidelines of this project
- [x] I have performed a self-review of my own update

**By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.**

_Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission._

**Thank you for your submission!**<br>
-- Auro Design System Team

## Summary by Sourcery

Update font styles to use themable design tokens across multiple components

Enhancements:
- Replace static font variables with themable design tokens in component styles
- Add more comprehensive font styling including font family, weight, letter spacing, and line height

Chores:
- Update demo HTML files to include additional CSS stylesheet


Diff:
diff --git a/components/checkbox/demo/api.html b/components/checkbox/demo/api.html
index 002862c0c..5bf3eea18 100644
--- a/components/checkbox/demo/api.html
+++ b/components/checkbox/demo/api.html
@@ -26,6 +26,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.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" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
   </head>
   <body class="auro-markdown">
     <main></main>
diff --git a/components/checkbox/demo/index.html b/components/checkbox/demo/index.html
index 2894cc7df..027903f3e 100644
--- a/components/checkbox/demo/index.html
+++ b/components/checkbox/demo/index.html
@@ -26,6 +26,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.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" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
   </head>
   <body class="auro-markdown">
     <main></main>
diff --git a/components/combobox/demo/api.html b/components/combobox/demo/api.html
index 7a3633419..1526815d7 100644
--- a/components/combobox/demo/api.html
+++ b/components/combobox/demo/api.html
@@ -26,6 +26,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.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" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
   </head>
   <body class="auro-markdown">
     <main></main>
diff --git a/components/combobox/demo/index.html b/components/combobox/demo/index.html
index bd3b10558..808580587 100644
--- a/components/combobox/demo/index.html
+++ b/components/combobox/demo/index.html
@@ -26,6 +26,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.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" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
   </head>
   <body class="auro-markdown">
     <main></main>
diff --git a/components/counter/demo/api.html b/components/counter/demo/api.html
index 215a76900..84586b332 100644
--- a/components/counter/demo/api.html
+++ b/components/counter/demo/api.html
@@ -26,6 +26,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.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" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
   </head>
   <body class="auro-markdown">
     <main></main>
diff --git a/components/counter/demo/index.html b/components/counter/demo/index.html
index 946572f6e..11a52a0a4 100644
--- a/components/counter/demo/index.html
+++ b/components/counter/demo/index.html
@@ -26,6 +26,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.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" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
   </head>
   <body class="auro-markdown">
     <main></main>
diff --git a/components/counter/src/styles/style.scss b/components/counter/src/styles/style.scss
index f187f1460..1d449d22e 100644
--- a/components/counter/src/styles/style.scss
+++ b/components/counter/src/styles/style.scss
@@ -23,8 +23,10 @@
 [name="description"] {
   &::slotted(*) {
     display: block;
-    font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
-    line-height: var(--ds-size-200, $ds-size-200);
+    font-size: var(--ds-basic-text-body-xs-font-size, $ds-basic-text-body-xs-font-size);
+    font-weight :var(--ds-basic-text-body-xs-font-weight, $ds-basic-text-body-xs-font-weight);
+    letter-spacing: var(--ds-basic-text-body-xs-letter-spacing, $ds-basic-text-body-xs-letter-spacing);
+    line-height: var(--ds-basic-text-body-xs-line-height, $ds-basic-text-body-xs-line-height);
   }
 }
 
@@ -33,7 +35,10 @@
   height: calc(var(--ds-size-25, $ds-size-25) + var(--ds-size-400, $ds-size-400));
   align-content: center;
   cursor: default;
-  font-size: var(--ds-size-250, $ds-size-250);
+  font-size: var(--ds-basic-text-body-xs-font-size, $ds-basic-text-body-xs-font-size);
+  font-weight :var(--ds-basic-text-body-xs-font-weight, $ds-basic-text-body-xs-font-weight);
+  letter-spacing: var(--ds-basic-text-body-xs-letter-spacing, $ds-basic-text-body-xs-letter-spacing);
+  line-height: var(--ds-basic-text-body-xs-line-height, $ds-basic-text-body-xs-line-height);
   text-align: center;
 }
 
diff --git a/components/datepicker/src/styles/style-auro-calendar-cell.scss b/components/datepicker/src/styles/style-auro-calendar-cell.scss
index 02b8b23b8..de2919263 100644
--- a/components/datepicker/src/styles/style-auro-calendar-cell.scss
+++ b/components/datepicker/src/styles/style-auro-calendar-cell.scss
@@ -45,7 +45,6 @@
 
   cursor: pointer;
 
-  font-family: var(--ds-basic-text-body-default-font-family, $ds-basic-text-body-default-font-family); /* This must be declared here because the browser clients unset it in the user agent style sheet */
   font-size: var(--ds-basic-text-body-default-font-size, $ds-basic-text-body-default-font-size); /* This must be declared here because the browser clients unset it in the user agent style sheet */
   font-weight: var(--ds-basic-text-body-default-font-weight, $ds-basic-text-body-default-font-weight); /* This must be declared here because the browser clients unset it in the user agent style sheet */
   letter-spacing: var(--ds-basic-text-body-default-letter-spacing, $ds-basic-text-body-default-letter-spacing); /* This must be declared here because the browser clients unset it in the user agent style sheet */
@@ -97,7 +96,10 @@
   display: flex;
   flex-direction: column;
 
-  font-size: var(--ds-text-body-size-xxs, $ds-text-body-size-xxs);
+  font-size: var(--ds-basic-text-body-xxs-font-size, $ds-basic-text-body-xxs-font-size);
+  font-weight :var(--ds-basic-text-body-xxs-font-weight, $ds-basic-text-body-xxs-font-weight);
+  letter-spacing: var(--ds-basic-text-body-xxs-letter-spacing, $ds-basic-text-body-xxs-letter-spacing);
+  line-height: var(--ds-basic-text-body-xxs-line-height, $ds-basic-text-body-xxs-line-height);
 }
 
 ::slotted([slot^="date_"]) {
@@ -138,7 +140,11 @@
     width: var(--ds-size-600, $ds-size-600);
     height: var(--ds-size-800, $ds-size-800);
 
-    font-size: var(--ds-text-body-size-lg, $ds-text-body-size-lg);
+    font-family: var(--ds-basic-text-body-lg-font-family, $ds-basic-text-body-lg-font-family);
+    font-size: var(--ds-basic-text-body-lg-font-size, $ds-basic-text-body-lg-font-size);
+    font-weight :var(--ds-basic-text-body-lg-font-weight, $ds-basic-text-body-lg-font-weight);
+    letter-spacing: var(--ds-basic-text-body-lg-letter-spacing, $ds-basic-text-body-lg-letter-spacing);
+    line-height: var(--ds-basic-text-body-lg-line-height, $ds-basic-text-body-lg-line-height);
 
     &:hover {
       cursor: pointer;
@@ -146,6 +152,9 @@
   }
 
   .dateSlot {
-    font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
+    font-size: var(--ds-basic-text-body-xs-font-size, $ds-basic-text-body-xs-font-size);
+    font-weight :var(--ds-basic-text-body-xs-font-weight, $ds-basic-text-body-xs-font-weight);
+    letter-spacing: var(--ds-basic-text-body-xs-letter-spacing, $ds-basic-text-body-xs-letter-spacing);
+    line-height: var(--ds-basic-text-body-xs-line-height, $ds-basic-text-body-xs-line-height);
   }
 }
diff --git a/components/datepicker/src/styles/style-auro-calendar-month.scss b/components/datepicker/src/styles/style-auro-calendar-month.scss
index 893777f90..599971726 100644
--- a/components/datepicker/src/styles/style-auro-calendar-month.scss
+++ b/components/datepicker/src/styles/style-auro-calendar-month.scss
@@ -66,10 +66,11 @@ $calendar-padding-desktop: var(--ds-size-200, $ds-size-200);
   flex: 1;
   flex-direction: row;
   justify-content: center;
-
-  font-size: var(--ds-text-heading-400-size, $ds-text-heading-400-size);
-  font-weight: var(--ds-text-heading-400-weight, $ds-text-heading-400-weight);
-  line-height: var(--ds-text-heading-400-height, $ds-text-heading-400-height);
+ 
+  font-size: var(--ds-basic-text-heading-xs-breakpoint-md-font-size, $ds-basic-text-heading-xs-breakpoint-md-font-size);
+  font-weight :var(--ds-basic-text-heading-xs-breakpoint-md-font-weight, $ds-basic-text-heading-xs-breakpoint-md-font-weight);
+  letter-spacing: var(--ds-basic-text-heading-xs-breakpoint-md-letter-spacing, $ds-basic-text-heading-xs-breakpoint-md-letter-spacing);
+  line-height: var(--ds-basic-text-heading-xs-breakpoint-md-line-height, $ds-basic-text-heading-xs-breakpoint-md-line-height);
 
   div {
     &:first-child {
diff --git a/components/datepicker/src/styles/style-auro-calendar.scss b/components/datepicker/src/styles/style-auro-calendar.scss
index d9ed7dec8..2ad309a22 100644
--- a/components/datepicker/src/styles/style-auro-calendar.scss
+++ b/components/datepicker/src/styles/style-auro-calendar.scss
@@ -84,7 +84,10 @@
 }
 
 .mobileDateLabel {
-  font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
+  font-size: var(--ds-basic-text-body-xs-font-size, $ds-basic-text-body-xs-font-size);
+  font-weight :var(--ds-basic-text-body-xs-font-weight, $ds-basic-text-body-xs-font-weight);
+  letter-spacing: var(--ds-basic-text-body-xs-letter-spacing, $ds-basic-text-body-xs-letter-spacing);
+  line-height: var(--ds-basic-text-body-xs-line-height, $ds-basic-text-body-xs-line-height);
 }
 
 .headerDateTo {
diff --git a/components/dropdown/demo/api.html b/components/dropdown/demo/api.html
index 5f8beaed5..b01d7a469 100644
--- a/components/dropdown/demo/api.html
+++ b/components/dropdown/demo/api.html
@@ -26,6 +26,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.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" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
   </head>
   <body class="auro-markdown">
     <main></main>
diff --git a/components/dropdown/demo/index.html b/components/dropdown/demo/index.html
index 4e146605f..d154add7c 100644
--- a/components/dropdown/demo/index.html
+++ b/components/dropdown/demo/index.html
@@ -26,6 +26,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.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" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
   </head>
   <body class="auro-markdown">
     <main></main>
diff --git a/components/dropdown/src/styles/style.scss b/components/dropdown/src/styles/style.scss
index 382ad3d8d..0743d9002 100644
--- a/components/dropdown/src/styles/style.scss
+++ b/components/dropdown/src/styles/style.scss
@@ -32,13 +32,18 @@
 }
 
 .label {
-  font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
-  line-height: var(--ds-text-body-size-default, $ds-text-body-size-default);
+  font-size: var(--ds-basic-text-body-xs-font-size, $ds-basic-text-body-xs-font-size);
+  font-weight :var(--ds-basic-text-body-xs-font-weight, $ds-basic-text-body-xs-font-weight);
+  letter-spacing: var(--ds-basic-text-body-xs-letter-spacing, $ds-basic-text-body-xs-letter-spacing);
+  line-height: var(--ds-basic-text-body-xs-line-height, $ds-basic-text-body-xs-line-height);
   transition: font-size .3s cubic-bezier(.215, .61, .355, 1);
   white-space: normal;
 
   &[hasTrigger='false'] {
-    font-size: var(--ds-text-body-size-default, $ds-text-body-size-default);
+    font-size: var(--ds-basic-text-body-default-font-size, $ds-basic-text-body-default-font-size);
+    font-weight :var(--ds-basic-text-body-default-font-weight, $ds-basic-text-body-default-font-weight);
+    letter-spacing: var(--ds-basic-text-body-default-letter-spacing, $ds-basic-text-body-default-letter-spacing);
+    line-height: var(--ds-basic-text-body-default-line-height, $ds-basic-text-body-default-line-height);
   }
 }
 
diff --git a/components/helptext/src/styles/style.scss b/components/helptext/src/styles/style.scss
index 498cf27f2..d49f3c8d9 100644
--- a/components/helptext/src/styles/style.scss
+++ b/components/helptext/src/styles/style.scss
@@ -10,13 +10,18 @@
 
 .helptext-wrapper {
   display: none;
-  font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
-  line-height: var(--ds-size-200, $ds-size-200);
+  font-size: var(--ds-basic-text-body-xs-font-size, $ds-basic-text-body-xs-font-size);
+  font-weight :var(--ds-basic-text-body-xs-font-weight, $ds-basic-text-body-xs-font-weight);
+  letter-spacing: var(--ds-basic-text-body-xs-letter-spacing, $ds-basic-text-body-xs-letter-spacing);
+  line-height: var(--ds-basic-text-body-xs-line-height, $ds-basic-text-body-xs-line-height);
 }
 
 :host([large]) {
   .helptext-wrapper {
-    font-size: var(--ds-text-body-size-default, $ds-text-body-size-default);
+    font-size: var(--ds-basic-text-body-default-font-size, $ds-basic-text-body-default-font-size);
+    font-weight :var(--ds-basic-text-body-default-font-weight, $ds-basic-text-body-default-font-weight);
+    letter-spacing: var(--ds-basic-text-body-default-letter-spacing, $ds-basic-text-body-default-letter-spacing);
+    line-height: var(--ds-basic-text-body-default-line-height, $ds-basic-text-body-default-line-height);
   }
 }
 
diff --git a/components/input/src/styles/mixins.scss b/components/input/src/styles/mixins.scss
index cf23f14f1..6a247cf48 100644
--- a/components/input/src/styles/mixins.scss
+++ b/components/input/src/styles/mixins.scss
@@ -1,3 +1,5 @@
+@import "@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska";
+
 // Handles the hidden state of the notification icons
 @mixin hidden-notification {
   overflow: hidden;
@@ -40,6 +42,9 @@
 // Handle the active state of the label
 @mixin active-label {
   top: var(--ds-size-100, $ds-size-100);
-  font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
+  font-size: var(--ds-basic-text-body-xs-font-size, $ds-basic-text-body-xs-font-size);
+  font-weight :var(--ds-basic-text-body-xs-font-weight, $ds-basic-text-body-xs-font-weight);
+  letter-spacing: var(--ds-basic-text-body-xs-letter-spacing, $ds-basic-text-body-xs-letter-spacing);
+  line-height: var(--ds-basic-text-body-xs-line-height, $ds-basic-text-body-xs-line-height);
   transform: unset;
 }
diff --git a/components/menu/demo/api.html b/components/menu/demo/api.html
index 1c2cfa54a..fc0f915ae 100644
--- a/components/menu/demo/api.html
+++ b/components/menu/demo/api.html
@@ -26,6 +26,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.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" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
   </head>
   <body class="auro-markdown">
     <main></main>
diff --git a/components/menu/demo/index.html b/components/menu/demo/index.html
index 04ea00d70..5942029ba 100644
--- a/components/menu/demo/index.html
+++ b/components/menu/demo/index.html
@@ -26,6 +26,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.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" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
   </head>
   <body class="auro-markdown">
     <main></main>
diff --git a/components/radio/demo/api.html b/components/radio/demo/api.html
index 43c256731..a8b25170f 100644
--- a/components/radio/demo/api.html
+++ b/components/radio/demo/api.html
@@ -25,6 +25,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.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" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
   </head>
   <body class="auro-markdown">
     <main></main>
diff --git a/components/radio/demo/index.html b/components/radio/demo/index.html
index 049645809..3aa1a9785 100644
--- a/components/radio/demo/index.html
+++ b/components/radio/demo/index.html
@@ -26,6 +26,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.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" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
   </head>
   <body class="auro-markdown">
     <main></main>
diff --git a/components/select/demo/api.html b/components/select/demo/api.html
index 33187e319..838011f62 100644
--- a/components/select/demo/api.html
+++ b/components/select/demo/api.html
@@ -26,6 +26,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.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" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
   </head>
   <body class="auro-markdown">
     <main></main>
diff --git a/components/select/demo/index.html b/components/select/demo/index.html
index 5369ba38e..da9dfbc5a 100644
--- a/components/select/demo/index.html
+++ b/components/select/demo/index.html
@@ -26,6 +26,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.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" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
   </head>
   <body class="auro-markdown">
     <main></main>
diff --git a/components/select/docs/api.md b/components/select/docs/api.md
index 14bb160c4..c5b88a278 100644
--- a/components/select/docs/api.md
+++ b/components/select/docs/api.md
@@ -29,11 +29,10 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 
 ## Methods
 
-| Method                         | Type                                   | Description                                      |
-|--------------------------------|----------------------------------------|--------------------------------------------------|
-| `reset`                        | `(): void`                             | Resets component to initial state.               |
-| `updateActiveOptionBasedOnKey` | `(_key: any): void`                    |                                                  |
-| `validate`                     | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
+| Method     | Type                                   | Description                                      |
+|------------|----------------------------------------|--------------------------------------------------|
+| `reset`    | `(): void`                             | Resets component to initial state.               |
+| `validate` | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## Events
 


Reviews:
user: login: sourcery-ai[bot]
body: Hey @sun-mota - I've reviewed your changes - here's some feedback:

- Consider moving the documentation change for the `select` component to a separate pull request as it seems unrelated to updating font styles.
- The demo files add a dependency pinned to a specific version (`webcorestylesheets@6.2.0`) while others use `@latest`; please confirm if this specific version pinning is intentional.

<details>
<summary>Here's what I looked at during the review</summary>

- 🟢 **General issues**: all looks good
- 🟢 **Security**: all looks good
- 🟢 **Testing**: all looks good
- 🟢 **Documentation**: all looks good
</details>

***

<details>
<summary>Sourcery is free for open source - if you like our reviews please consider sharing them ✨</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20got%20an%20instant%20code%20review%20from%20%40SourceryAI%2C%20and%20it%20was%20brilliant%21%20It%27s%20free%20for%20open%20source%20and%20has%20a%20free%20trial%20for%20private%20code.%20Check%20it%20out%20https%3A//sourcery.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20got%20an%20instant%20code%20review%20from%20%40SourceryAI%2C%20and%20it%20was%20brilliant%21%20It%27s%20free%20for%20open%20source%20and%20has%20a%20free%20trial%20for%20private%20code.%20Check%20it%20out%20https%3A//sourcery.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https://sourcery.ai)
- [Facebook](https://www.facebook.com/sharer/sharer.php?u=https://sourcery.ai)

</details>

<sub>
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
</sub>
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-02T20:47:15Z
user: login: jason-capsule42
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-05T15:39:33Z
user: login: sun-mota
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-05T15:45:12Z
user: login: jason-capsule42
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-05T16:10:18Z
user: login: jason-capsule42
state: APPROVED
author_association: MEMBER
submitted_at: 2025-05-05T16:12:04Z

Review comments:
diff_hunk: @@ -29,11 +29,10 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 
 ## Methods
 
-| Method                         | Type                                   | Description                                      |
-|--------------------------------|----------------------------------------|--------------------------------------------------|
-| `reset`                        | `(): void`                             | Resets component to initial state.               |
-| `updateActiveOptionBasedOnKey` | `(_key: any): void`                    |                                                  |
path: components/select/docs/api.md
user: login: jason-capsule42
body: @sun-mota not sure why this would have been removed? @StephenRiosDev Also not sure why this function would have been in the public space to begin with?
created_at: 2025-05-05T15:39:33Z
author_association: MEMBER
diff_hunk: @@ -29,11 +29,10 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 
 ## Methods
 
-| Method                         | Type                                   | Description                                      |
-|--------------------------------|----------------------------------------|--------------------------------------------------|
-| `reset`                        | `(): void`                             | Resets component to initial state.               |
-| `updateActiveOptionBasedOnKey` | `(_key: any): void`                    |                                                  |
path: components/select/docs/api.md
user: login: sun-mota
body: That function was added without JSDoc comments at https://github.com/AlaskaAirlines/auro-formkit/pull/538/files
And JSDoc comments are added later at https://github.com/AlaskaAirlines/auro-formkit/pull/558/files#diff-c2cb75f4401d6adb1d73864643d46c0902b09af5cf2e02614d4730c4c2a2e8ae but md file was not added in the same commit. 
created_at: 2025-05-05T15:45:12Z
author_association: MEMBER
diff_hunk: @@ -29,11 +29,10 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 
 ## Methods
 
-| Method                         | Type                                   | Description                                      |
-|--------------------------------|----------------------------------------|--------------------------------------------------|
-| `reset`                        | `(): void`                             | Resets component to initial state.               |
-| `updateActiveOptionBasedOnKey` | `(_key: any): void`                    |                                                  |
path: components/select/docs/api.md
user: login: jason-capsule42
body: Thanks for the clarification!
created_at: 2025-05-05T16:10:18Z
author_association: MEMBER

PR comments:
user: login: sourcery-ai[bot]
created_at: 2025-05-02T20:46:23Z
body: <!-- Generated by sourcery-ai[bot]: start review_guide -->

## Reviewer's Guide

This pull request refactors SCSS styles across multiple components, replacing older font variables and properties with new, standardized `ds-basic-text-body` design tokens for improved themeability. Demo pages were also updated to include a necessary stylesheet bundle, and a minor documentation cleanup was performed.

### File-Level Changes

| Change | Details | Files |
| ------ | ------- | ----- |
| Updated font styles to use new `ds-basic-text-body` design tokens. | <ul><li>Replaced existing `font-family`, `font-size`, `font-weight`, `letter-spacing`, and `line-height` properties with corresponding `--ds-basic-text-body-*` CSS variables.</li><li>Added import for Alaska SCSS variables in input component mixins.</li></ul> | `components/datepicker/src/styles/style-auro-calendar-cell.scss`<br/>`components/counter/src/styles/style.scss`<br/>`components/dropdown/src/styles/style.scss`<br/>`components/helptext/src/styles/style.scss`<br/>`components/datepicker/src/styles/style-auro-calendar-month.scss`<br/>`components/input/src/styles/mixins.scss`<br/>`components/input/src/styles/input.scss`<br/>`components/datepicker/src/styles/style-auro-calendar.scss` |
| Included essential Alaska stylesheet bundle in component demo pages. | <ul><li>Added a `<link>` tag referencing the `essentials-as.css` stylesheet from the CDN.</li></ul> | `components/checkbox/demo/api.html`<br/>`components/checkbox/demo/index.html`<br/>`components/combobox/demo/api.html`<br/>`components/combobox/demo/index.html`<br/>`components/counter/demo/api.html`<br/>`components/counter/demo/index.html`<br/>`components/datepicker/demo/api.html`<br/>`components/datepicker/demo/index.html`<br/>`components/dropdown/demo/api.html`<br/>`components/dropdown/demo/index.html`<br/>`components/input/demo/api.html`<br/>`components/input/demo/index.html`<br/>`components/menu/demo/api.html`<br/>`components/menu/demo/index.html`<br/>`components/radio/demo/api.html`<br/>`components/radio/demo/index.html`<br/>`components/select/demo/api.html`<br/>`components/select/demo/index.html` |
| Removed an undocumented method from select component API documentation. | <ul><li>Deleted the `updateActiveOptionBasedOnKey` method from the API table.</li></ul> | `components/select/docs/api.md` |

---

<details>
<summary>Tips and commands</summary>

#### Interacting with Sourcery

- **Trigger a new review:** Comment `@sourcery-ai review` on the pull request.
- **Continue discussions:** Reply directly to Sourcery's review comments.
- **Generate a GitHub issue from a review comment:** Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with `@sourcery-ai issue` to create an issue from it.
- **Generate a pull request title:** Write `@sourcery-ai` anywhere in the pull
  request title to generate a title at any time. You can also comment
  `@sourcery-ai title` on the pull request to (re-)generate the title at any time.
- **Generate a pull request summary:** Write `@sourcery-ai summary` anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment `@sourcery-ai summary` on the pull request to
  (re-)generate the summary at any time.
- **Generate reviewer's guide:** Comment `@sourcery-ai guide` on the pull
  request to (re-)generate the reviewer's guide at any time.
- **Resolve all Sourcery comments:** Comment `@sourcery-ai resolve` on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
- **Dismiss all Sourcery reviews:** Comment `@sourcery-ai dismiss` on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  `@sourcery-ai review` to trigger a new review!

#### Customizing Your Experience

Access your [dashboard](https://app.sourcery.ai) to:
- Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
- Change the review language.
- Add, remove or edit custom review instructions.
- Adjust other review settings.

#### Getting Help

- [Contact our support team](mailto:support@sourcery.ai) for questions or feedback.
- Visit our [documentation](https://docs.sourcery.ai) for detailed guides and information.
- Keep in touch with the Sourcery team by following us on [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) or [GitHub](https://github.com/sourcery-ai).

</details>

<!-- Generated by sourcery-ai[bot]: end review_guide -->
author_association: NONE
user: login: jason-capsule42
created_at: 2025-05-05T16:18:08Z
body: :tada: This PR is included in version 3.2.6 :tada:

The release is available on:
- [npm package (@latest dist-tag)](https://www.npmjs.com/package/@aurodesignsystem/auro-formkit/v/3.2.6)
- [GitHub release](https://github.com/AlaskaAirlines/auro-formkit/releases/tag/v3.2.6)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: MEMBER
user: login: jason-capsule42
created_at: 2025-05-09T16:43:01Z
body: :tada: This PR is included in version 3.3.0-beta.2 :tada:

The release is available on:
- [npm package (@beta dist-tag)](https://www.npmjs.com/package/@aurodesignsystem/auro-formkit/v/3.3.0-beta.2)
- [GitHub release](https://github.com/AlaskaAirlines/auro-formkit/releases/tag/v3.3.0-beta.2)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: MEMBER