From d4d6cde11a9160842096c500c05423a636bf548c Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Fri, 8 Dec 2023 17:18:44 -0800
Subject: [PATCH 01/19] feat(font tokens): add fallback fonts to core

---
 .../calcite-design-tokens/src/core/font.json  | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/packages/calcite-design-tokens/src/core/font.json b/packages/calcite-design-tokens/src/core/font.json
index 34d47ff73db..9c2b8dfbe6d 100644
--- a/packages/calcite-design-tokens/src/core/font.json
+++ b/packages/calcite-design-tokens/src/core/font.json
@@ -10,9 +10,44 @@
           "value": "Avenir Next World",
           "type": "fontFamilies"
         },
+        "avenir": {
+          "value": "Avenir",
+          "type": "fontFamilies",
+          "description": "Fallback for avenirNext"
+        },
+        "helveticaNeue": {
+          "value": "Helvetica Neue",
+          "type": "fontFamilies",
+          "description": "Fallback for avenirNext"
+        },
+        "sansSerif": {
+          "value": "sans-serif",
+          "type": "fontFamilies",
+          "description": "Fallback for avenirNext"
+        },
+        "consolas": {
+          "value": "Consolas",
+          "type": "fontFamilies",
+          "description": "Fallback for monaco"
+        },
+        "andaleMono": {
+          "value": "Andale Mono",
+          "type": "fontFamilies",
+          "description": "Fallback for monaco"
+        },
+        "lucidaConsole": {
+          "value": "Lucida Console",
+          "type": "fontFamilies",
+          "description": "Fallback for monaco"
+        },
         "monaco": {
           "value": "Monaco",
           "type": "fontFamilies"
+        },
+        "monospace": {
+          "value": "monospace",
+          "type": "fontFamilies",
+          "description": "Fallback for monaco"
         }
       },
       "style": {

From a2d20bd07ab6c092d904a5e596d034e965cacedf Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Fri, 8 Dec 2023 17:19:03 -0800
Subject: [PATCH 02/19] feat(font tokens): add fallback fonts to semantic
 tokens

---
 .../src/semantic/font.json                    | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/calcite-design-tokens/src/semantic/font.json b/packages/calcite-design-tokens/src/semantic/font.json
index d0ea467ca5a..2d723738c62 100644
--- a/packages/calcite-design-tokens/src/semantic/font.json
+++ b/packages/calcite-design-tokens/src/semantic/font.json
@@ -3,12 +3,26 @@
     "font": {
       "family": {
         "default": {
-          "value": "{core.font.family.avenirNextPro}",
-          "type": "fontFamilies"
+          "value": [
+            "{core.font.family.avenirNextWorld}",
+            "{core.font.family.avenirNextPro}",
+            "{core.font.family.avenir}",
+            "{core.font.family.helveticaNeue}",
+            "{core.font.family.sansSerif}"
+          ],
+          "type": "fontFamilies",
+          "description": "Primary font with fallbacks"
         },
         "code": {
-          "value": "{core.font.family.monaco}",
-          "type": "fontFamilies"
+          "value": [
+            "{core.font.family.monaco}",
+            "{core.font.family.consolas}",
+            "{core.font.family.andaleMono}",
+            "{core.font.family.lucidaConsole}",
+            "{core.font.family.monospace}"
+          ],
+          "type": "fontFamilies",
+          "description": "Font family for code with fallbacks"
         }
       },
       "weight": {

From bc2c8c922748cfcb826dfe4200d6b1358524aac8 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Fri, 8 Dec 2023 17:30:37 -0800
Subject: [PATCH 03/19] feat(token transformer): allow font family tokens to
 output fallbacks

---
 .../registerCalciteTransformers.ts            | 12 ++++---
 .../styleDictionary/transformer/utils.ts      |  2 ++
 .../value/valueFontFamilyFallbacks.ts         | 32 +++++++++++++++++++
 3 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts

diff --git a/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts b/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts
index f46ab2f4c56..8a5e58d2ef8 100644
--- a/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts
@@ -18,6 +18,7 @@ import { registerValueRGBA } from "./styleDictionary/transformer/value/valueRGBA
 import { registerNameSpacePath } from "./styleDictionary/transformer/name/nameSpacePath.js";
 import { registerFormatterDocs } from "./styleDictionary/formatter/docs.js";
 import { registerValueToREM } from "./styleDictionary/transformer/value/valueToREM.js";
+import { registerValueFontFamilyWithFallbacks } from "./styleDictionary/transformer/value/valueFontFamilyFallbacks.js";
 
 export async function registerCalciteTransformers(sd: StyleDictionary): Promise<void> {
   // Here we are registering the Transforms provided by Token Studio however,
@@ -27,21 +28,22 @@ export async function registerCalciteTransformers(sd: StyleDictionary): Promise<
   await registerTransforms(sd, {
     expand: false,
   });
-  registerValueRGBA(sd);
-  registerValueEvaluateMath(sd);
   registerAttributePlatformNames(sd);
   registerCustomJSONParser(sd);
   registerFilterSource(sd);
   registerFormatterCss(sd);
-  registerFormatterScss(sd);
+  registerFormatterDocs(sd);
   registerFormatterJs(sd);
+  registerFormatterScss(sd);
   registerNameCamelCase(sd);
   registerNameJoinPath(sd);
   registerNameKebabCase(sd);
+  registerNameSpacePath(sd);
   registerValueAlignFontWeightAndStyles(sd);
   registerValueAssetToken(sd);
+  registerValueEvaluateMath(sd);
+  registerValueFontFamilyWithFallbacks(sd);
+  registerValueRGBA(sd);
   registerValueStringWrapper(sd);
-  registerNameSpacePath(sd);
-  registerFormatterDocs(sd);
   registerValueToREM(sd);
 }
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts
index d1b2edd1c2b..a3e975a3c01 100644
--- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts
@@ -15,6 +15,7 @@ import { valueEvaluateMath } from "./value/valueCheckEvaluateMath.js";
 import { CalciteValueRGBA } from "./value/valueRGBA.js";
 import { nameSpacePath } from "./name/nameSpacePath.js";
 import { CalciteValueToREM } from "./value/valueToREM.js";
+import { valueFontFamilyFallbacks } from "./value/valueFontFamilyFallbacks.js";
 
 export type TransformerTypeUnion = `${TransformerTypeEnum}`;
 
@@ -51,6 +52,7 @@ export const styles = [
   valueAssetToken,
   valueStringWrapper,
   CalciteValueToREM,
+  valueFontFamilyFallbacks,
   nameKebabCase,
 ];
 
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts
new file mode 100644
index 00000000000..c3dd5651391
--- /dev/null
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts
@@ -0,0 +1,32 @@
+import { Core as StyleDictionary } from "style-dictionary";
+import { Matcher } from "style-dictionary/types/Matcher.js";
+import { TransformedToken } from "style-dictionary/types/TransformedToken.js";
+import { TokenTypes } from "@tokens-studio/types";
+
+import { CalledTransformerFunction, TransformerConfig } from "../utils.js";
+
+export const matcher: Matcher = (token: TransformedToken) => {
+  return token.type === TokenTypes.FONT_FAMILIES && Array.isArray(token.value);
+};
+
+type FontFamilyFallbackToken = TransformedToken & { value: string[] };
+
+export const transformValuesFontFamilyWithFallbacks: CalledTransformerFunction<string> = (
+  token: FontFamilyFallbackToken
+) => {
+  return token.value.join(" ");
+};
+
+export const registerValueFontFamilyWithFallbacks = (sd: StyleDictionary): void => {
+  const transformerConfig: TransformerConfig = {
+    name: valueFontFamilyFallbacks,
+    transformer: transformValuesFontFamilyWithFallbacks,
+    type: "value",
+    matcher,
+    transitive: true,
+  };
+
+  sd.registerTransform(transformerConfig);
+};
+
+export const valueFontFamilyFallbacks = "value/calcite/font-family";

From 37906ab90211bd27fe72181cc12935063a12d7dd Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Fri, 8 Dec 2023 17:49:03 -0800
Subject: [PATCH 04/19] fix(calcite-components): should only reference
 font-family tokens

---
 .../calcite-components/.storybook/main.ts     |  2 +-
 .../.storybook/preview-head.html              |  2 +-
 packages/calcite-components/calcite-preset.ts |  4 +-
 .../src/assets/styles/global.scss             | 10 ++---
 .../src/components/action/action.scss         | 20 ++++-----
 .../block-section/block-section.scss          | 13 +++---
 .../list-item-group/list-item-group.scss      |  2 +-
 .../src/components/list-item/list-item.scss   | 44 +++++++++----------
 .../navigation-user/navigation-user.scss      | 17 ++++---
 .../src/components/stack/stack.scss           | 12 ++---
 .../src/components/text-area/text-area.scss   |  7 ---
 .../src/demos/_assets/demos.css               |  2 +-
 .../src/demos/accordion.html                  |  2 +-
 .../calcite-components/src/demos/action.html  |  2 +-
 .../calcite-components/src/demos/alert.html   |  2 +-
 .../calcite-components/src/demos/avatar.html  |  2 +-
 .../calcite-components/src/demos/block.html   |  2 +-
 .../calcite-components/src/demos/button.html  |  2 +-
 .../calcite-components/src/demos/card.html    |  2 +-
 .../src/demos/checkbox.html                   |  2 +-
 .../src/demos/chip-group.html                 |  2 +-
 .../calcite-components/src/demos/chip.html    |  2 +-
 .../src/demos/color-picker.html               |  2 +-
 .../src/demos/combobox.html                   |  2 +-
 .../src/demos/date-picker.html                |  2 +-
 .../src/demos/dropdown.html                   |  2 +-
 .../calcite-components/src/demos/fab.html     |  2 +-
 .../flow-and-panel-action-menu-overflow.html  |  2 +-
 .../calcite-components/src/demos/flow.html    |  2 +-
 .../calcite-components/src/demos/form.html    |  2 +-
 .../calcite-components/src/demos/graph.html   |  2 +-
 .../calcite-components/src/demos/icon.html    |  2 +-
 .../src/demos/inline-editable.html            |  2 +-
 .../src/demos/input-date-picker.html          |  2 +-
 .../src/demos/input-number.html               |  2 +-
 .../src/demos/input-text.html                 |  2 +-
 .../src/demos/input-time-zone.html            |  2 +-
 .../calcite-components/src/demos/input.html   |  2 +-
 .../calcite-components/src/demos/label.html   |  2 +-
 .../calcite-components/src/demos/link.html    |  2 +-
 .../calcite-components/src/demos/list.html    |  2 +-
 .../calcite-components/src/demos/loader.html  |  2 +-
 .../calcite-components/src/demos/meter.html   |  2 +-
 .../calcite-components/src/demos/modal.html   |  2 +-
 .../calcite-components/src/demos/notice.html  |  2 +-
 .../src/demos/pagination.html                 |  2 +-
 .../calcite-components/src/demos/panel.html   |  2 +-
 .../src/demos/pick-list.html                  |  2 +-
 .../calcite-components/src/demos/popover.html |  2 +-
 .../src/demos/progress.html                   |  2 +-
 .../src/demos/radio-button-group.html         |  2 +-
 .../src/demos/radio-button.html               |  2 +-
 .../calcite-components/src/demos/rating.html  |  2 +-
 .../calcite-components/src/demos/scrim.html   |  2 +-
 .../src/demos/segmented-control.html          |  2 +-
 .../calcite-components/src/demos/select.html  |  2 +-
 .../calcite-components/src/demos/sheet.html   |  2 +-
 .../calcite-components/src/demos/slider.html  |  2 +-
 .../src/demos/sortable-list.html              |  2 +-
 .../src/demos/split-button.html               |  2 +-
 .../calcite-components/src/demos/stack.html   |  2 +-
 .../calcite-components/src/demos/stepper.html |  2 +-
 .../calcite-components/src/demos/switch.html  |  2 +-
 .../calcite-components/src/demos/tabs.html    |  2 +-
 .../src/demos/text-area.html                  |  2 +-
 .../src/demos/tile-select.html                |  2 +-
 .../src/demos/tip-manager.html                |  2 +-
 .../calcite-components/src/demos/tooltip.html |  2 +-
 .../calcite-components/src/demos/tree.html    |  2 +-
 .../src/demos/value-list.html                 |  2 +-
 70 files changed, 115 insertions(+), 136 deletions(-)

diff --git a/packages/calcite-components/.storybook/main.ts b/packages/calcite-components/.storybook/main.ts
index 3fed5be29d1..e527bc33c82 100644
--- a/packages/calcite-components/.storybook/main.ts
+++ b/packages/calcite-components/.storybook/main.ts
@@ -53,7 +53,7 @@ module.exports = {
           closable
           kind="warning"
           scale="l"
-          style="font-family: var(--calcite-sans-family)"
+          style="font-family: var(--calcite-font-family)"
         >
           <div slot="title">
             This storybook is on the current @next version and is meant for internal, testing purposes only.
diff --git a/packages/calcite-components/.storybook/preview-head.html b/packages/calcite-components/.storybook/preview-head.html
index 9a0cd427b33..4ba1c7c5c66 100644
--- a/packages/calcite-components/.storybook/preview-head.html
+++ b/packages/calcite-components/.storybook/preview-head.html
@@ -5,7 +5,7 @@
 <!-- docs fixes for displaying components -->
 <style>
   body {
-    font-family: var(--calcite-sans-family);
+    font-family: var(--calcite-font-family);
     color: var(--calcite-color-text-1);
     background-color: var(--calcite-color-background);
   }
diff --git a/packages/calcite-components/calcite-preset.ts b/packages/calcite-components/calcite-preset.ts
index 59c4493fc6f..36bfaeb7ae5 100644
--- a/packages/calcite-components/calcite-preset.ts
+++ b/packages/calcite-components/calcite-preset.ts
@@ -74,8 +74,8 @@ export default {
     },
     fontFamily: {
       // assets/styles/_type
-      sans: "var(--calcite-sans-family)",
-      mono: "var(--calcite-code-family)",
+      sans: "var(--calcite-font-family)",
+      mono: "var(--calcite-font-family-code)",
       inherit: "inherit",
     },
     fontSize: {
diff --git a/packages/calcite-components/src/assets/styles/global.scss b/packages/calcite-components/src/assets/styles/global.scss
index 76aef5a9541..f3ade88386a 100644
--- a/packages/calcite-components/src/assets/styles/global.scss
+++ b/packages/calcite-components/src/assets/styles/global.scss
@@ -15,10 +15,6 @@
   @extend %type-vars;
   @include floating-ui-base();
   @include animation-base();
-
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   --calcite-popover-z-index: var(--calcite-z-index-popup);
   --calcite-border-radius: var(--calcite-border-radius-round, 4px);
   --calcite-border-radius-base: 0;
@@ -26,7 +22,11 @@
   --calcite-panel-width-multiplier: 1;
   --calcite-ui-icon-color: currentColor;
 
-  @apply font-sans;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  font-family: var(--calcite-font-family);
 }
 
 .calcite-mode-auto {
diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss
index a8947f7eada..263e4a46ef4 100755
--- a/packages/calcite-components/src/components/action/action.scss
+++ b/packages/calcite-components/src/components/action/action.scss
@@ -42,7 +42,6 @@
     items-center
     justify-start
     border-none
-    font-sans
     font-medium;
 
   text-align: unset;
@@ -159,12 +158,15 @@
   @apply text-color-1 fill-color-1 bg-foreground-3;
 }
 
-:host([active]) .button:active {
-  @apply bg-foreground-1;
+:host([appearance="transparent"]) .button {
+  @apply bg-transparent
+    transition-shadow
+    duration-150
+    ease-in-out;
 }
 
-:host([appearance="transparent"]) .button {
-  @apply bg-transparent;
+:host([active]) .button:active {
+  @apply bg-foreground-1;
 }
 
 :host([appearance="transparent"][active]) .button,
@@ -185,6 +187,7 @@
 :host([loading][appearance="solid"]) .button:hover,
 :host([loading][appearance="solid"]) .button:focus {
   @apply bg-foreground-1;
+
   .text-container {
     @apply opacity-disabled;
   }
@@ -207,13 +210,6 @@
   @apply opacity-disabled bg-foreground-3;
 }
 
-:host([appearance="transparent"]) .button {
-  @apply bg-transparent
-    transition-shadow
-    duration-150
-    ease-in-out;
-}
-
 .indicator-with-icon {
   @include action-indicator();
 }
diff --git a/packages/calcite-components/src/components/block-section/block-section.scss b/packages/calcite-components/src/components/block-section/block-section.scss
index 0761e534cb6..162cf30d80a 100644
--- a/packages/calcite-components/src/components/block-section/block-section.scss
+++ b/packages/calcite-components/src/components/block-section/block-section.scss
@@ -22,10 +22,15 @@
     w-full
     border-0
     bg-transparent
-    font-sans
     font-medium;
 }
 
+.toggle--switch {
+  .status-icon {
+    margin-inline-start: theme("margin.2");
+  }
+}
+
 .toggle--switch,
 .section-header {
   @apply text-n1
@@ -72,12 +77,6 @@
   }
 }
 
-.toggle--switch {
-  .status-icon {
-    margin-inline-start: theme("margin.2");
-  }
-}
-
 .toggle--switch__content {
   @apply flex flex-auto items-center;
 }
diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.scss b/packages/calcite-components/src/components/list-item-group/list-item-group.scss
index 6412b93b577..6aefef43a46 100644
--- a/packages/calcite-components/src/components/list-item-group/list-item-group.scss
+++ b/packages/calcite-components/src/components/list-item-group/list-item-group.scss
@@ -6,7 +6,7 @@
 @include disabled();
 
 .container {
-  @apply bg-foreground-2 text-n1 text-color-2 m-0 flex flex-1 p-3 font-sans font-bold;
+  @apply bg-foreground-2 text-n1 text-color-2 m-0 flex flex-1 p-3 font-bold;
 }
 
 .heading {
diff --git a/packages/calcite-components/src/components/list-item/list-item.scss b/packages/calcite-components/src/components/list-item/list-item.scss
index ea5a8172f48..c9687517c08 100755
--- a/packages/calcite-components/src/components/list-item/list-item.scss
+++ b/packages/calcite-components/src/components/list-item/list-item.scss
@@ -10,7 +10,7 @@
   @apply bg-foreground-1
   box-border
   flex
-  flex-1 font-sans;
+  flex-1;
   * {
     @apply box-border;
   }
@@ -48,7 +48,6 @@
     select-none
     flex
     flex-auto
-    font-sans
     font-normal
     items-stretch
     p-0;
@@ -75,15 +74,6 @@ td:focus {
     py-2;
 }
 
-.label,
-.description,
-.content-bottom {
-  @apply text-n2 word-break font-sans font-normal;
-  &:only-child {
-    @apply m-0 py-1;
-  }
-}
-
 .label {
   @apply text-color-1;
 }
@@ -92,6 +82,22 @@ td:focus {
   @apply text-color-3 mt-0.5;
 }
 
+.content-bottom {
+  @apply bg-foreground-1 flex flex-col;
+  padding-inline-start: calc(
+    var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier)
+  );
+}
+
+.label,
+.description,
+.content-bottom {
+  @apply text-n2 word-break font-normal;
+  &:only-child {
+    @apply m-0 py-1;
+  }
+}
+
 .content-start {
   @apply justify-start;
 }
@@ -103,13 +109,10 @@ td:focus {
 .content-start,
 .content-end {
   @apply flex-auto;
-}
 
-.content-bottom {
-  @apply bg-foreground-1 flex flex-col;
-  padding-inline-start: calc(
-    var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier)
-  );
+  ::slotted(calcite-icon) {
+    @apply self-center mx-3;
+  }
 }
 
 .content-container--has-center-content .content-start,
@@ -137,13 +140,6 @@ td:focus {
   @apply cursor-pointer;
 }
 
-.content-start,
-.content-end {
-  ::slotted(calcite-icon) {
-    @apply self-center mx-3;
-  }
-}
-
 .actions-start,
 .actions-end {
   ::slotted(calcite-action),
diff --git a/packages/calcite-components/src/components/navigation-user/navigation-user.scss b/packages/calcite-components/src/components/navigation-user/navigation-user.scss
index c365a545112..2277be31cb6 100644
--- a/packages/calcite-components/src/components/navigation-user/navigation-user.scss
+++ b/packages/calcite-components/src/components/navigation-user/navigation-user.scss
@@ -10,7 +10,6 @@
       cursor-pointer
       transition-default
       focus-base
-      font-sans
       text-0h;
     border-block-end: 2px solid transparent;
   }
@@ -29,14 +28,6 @@
   @apply bg-foreground-3 text-color-1;
 }
 
-calcite-avatar {
-  @apply px-4;
-}
-
-calcite-avatar ~ .text-container {
-  @apply ps-0;
-}
-
 :host([active]) .button {
   @apply text-color-1 border-color-brand;
   --calcite-ui-icon-color: var(--calcite-color-brand);
@@ -50,6 +41,14 @@ calcite-avatar ~ .text-container {
   mt-0.5;
 }
 
+calcite-avatar {
+  @apply px-4;
+}
+
+calcite-avatar ~ .text-container {
+  @apply ps-0;
+}
+
 .full-name {
   @apply text-0
   ms-0
diff --git a/packages/calcite-components/src/components/stack/stack.scss b/packages/calcite-components/src/components/stack/stack.scss
index ab37272fa35..35168ef8e7f 100644
--- a/packages/calcite-components/src/components/stack/stack.scss
+++ b/packages/calcite-components/src/components/stack/stack.scss
@@ -15,7 +15,6 @@
   @apply text-color-2
   flex
   flex-auto
-  font-sans
   font-normal
   items-stretch;
 }
@@ -45,6 +44,10 @@
 .content-start,
 .content-end {
   @apply flex-initial;
+
+  ::slotted(calcite-icon) {
+    @apply self-center mx-3;
+  }
 }
 
 .actions-start,
@@ -54,13 +57,6 @@
   @apply flex items-center;
 }
 
-.content-start,
-.content-end {
-  ::slotted(calcite-icon) {
-    @apply self-center mx-3;
-  }
-}
-
 .actions-start,
 .actions-end {
   ::slotted(calcite-action),
diff --git a/packages/calcite-components/src/components/text-area/text-area.scss b/packages/calcite-components/src/components/text-area/text-area.scss
index 0c7b7e3c6a2..ec1497c3801 100644
--- a/packages/calcite-components/src/components/text-area/text-area.scss
+++ b/packages/calcite-components/src/components/text-area/text-area.scss
@@ -13,7 +13,6 @@ textarea {
   box-border
   border-color-input
   border
-  font-sans
   w-full
   m-0;
   min-inline-size: theme("spacing.48");
@@ -86,9 +85,7 @@ textarea {
     @apply py-1
     px-2;
   }
-}
 
-:host([scale="s"]) {
   textarea,
   .footer,
   .character-limit {
@@ -107,9 +104,7 @@ textarea {
     px-3;
     min-block-size: 2.25rem;
   }
-}
 
-:host([scale="m"]) {
   textarea,
   .footer,
   .character-limit {
@@ -129,9 +124,7 @@ textarea {
     px-4;
     min-block-size: 2.75rem;
   }
-}
 
-:host([scale="l"]) {
   textarea,
   .footer,
   .character-limit {
diff --git a/packages/calcite-components/src/demos/_assets/demos.css b/packages/calcite-components/src/demos/_assets/demos.css
index 7e4bfb291d3..62a4b88da0c 100644
--- a/packages/calcite-components/src/demos/_assets/demos.css
+++ b/packages/calcite-components/src/demos/_assets/demos.css
@@ -80,7 +80,7 @@ main {
 
 .calcite-comp {
   color: var(--calcite-color-text-3);
-  font-family: var(--calcite-sans-family);
+  font-family: var(--calcite-font-family);
   font-size: var(--calcite-font-size-0);
   font-weight: var(--calcite-font-weight-medium);
 }
diff --git a/packages/calcite-components/src/demos/accordion.html b/packages/calcite-components/src/demos/accordion.html
index 790296198d7..5fb5bf039ef 100644
--- a/packages/calcite-components/src/demos/accordion.html
+++ b/packages/calcite-components/src/demos/accordion.html
@@ -15,7 +15,7 @@
         flex: 0 0 20%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/action.html b/packages/calcite-components/src/demos/action.html
index 0f506993b11..a94fb336eaa 100644
--- a/packages/calcite-components/src/demos/action.html
+++ b/packages/calcite-components/src/demos/action.html
@@ -21,7 +21,7 @@
       .child-action-bar {
         margin: 10px 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         padding: 0 10px;
diff --git a/packages/calcite-components/src/demos/alert.html b/packages/calcite-components/src/demos/alert.html
index e2e9d56fbc1..ca3e14c2268 100644
--- a/packages/calcite-components/src/demos/alert.html
+++ b/packages/calcite-components/src/demos/alert.html
@@ -55,7 +55,7 @@
       .first-container,
       .second-container > div {
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/avatar.html b/packages/calcite-components/src/demos/avatar.html
index 271da9fec14..2675923796a 100644
--- a/packages/calcite-components/src/demos/avatar.html
+++ b/packages/calcite-components/src/demos/avatar.html
@@ -18,7 +18,7 @@
         flex: 1 0 21%;
         margin: 0 15px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/block.html b/packages/calcite-components/src/demos/block.html
index ec6185338f4..be422c7a3a3 100644
--- a/packages/calcite-components/src/demos/block.html
+++ b/packages/calcite-components/src/demos/block.html
@@ -18,7 +18,7 @@
         flex: 0 0 40%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         padding: 18px 0;
diff --git a/packages/calcite-components/src/demos/button.html b/packages/calcite-components/src/demos/button.html
index 901f28f6ea4..b16ed6c1020 100644
--- a/packages/calcite-components/src/demos/button.html
+++ b/packages/calcite-components/src/demos/button.html
@@ -25,7 +25,7 @@
       .icon-slot,
       span {
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-weight: var(--calcite-font-weight-medium);
       }
 
diff --git a/packages/calcite-components/src/demos/card.html b/packages/calcite-components/src/demos/card.html
index 933f29c8d9e..4fa79f53326 100644
--- a/packages/calcite-components/src/demos/card.html
+++ b/packages/calcite-components/src/demos/card.html
@@ -11,7 +11,7 @@
         flex-wrap: wrap;
         flex-direction: row;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         padding: 15px;
diff --git a/packages/calcite-components/src/demos/checkbox.html b/packages/calcite-components/src/demos/checkbox.html
index b8e1873ec49..df44fcf3e3f 100644
--- a/packages/calcite-components/src/demos/checkbox.html
+++ b/packages/calcite-components/src/demos/checkbox.html
@@ -17,7 +17,7 @@
         flex: 1 0 21%;
         padding: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/chip-group.html b/packages/calcite-components/src/demos/chip-group.html
index 07aeeae3ad1..be4e3a37ec8 100644
--- a/packages/calcite-components/src/demos/chip-group.html
+++ b/packages/calcite-components/src/demos/chip-group.html
@@ -25,7 +25,7 @@
         flex: 0 0 15%;
         margin: 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/chip.html b/packages/calcite-components/src/demos/chip.html
index d7705211a0d..84c50ee04a4 100644
--- a/packages/calcite-components/src/demos/chip.html
+++ b/packages/calcite-components/src/demos/chip.html
@@ -21,7 +21,7 @@
         flex: 0 0 20%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         flex-direction: column;
diff --git a/packages/calcite-components/src/demos/color-picker.html b/packages/calcite-components/src/demos/color-picker.html
index 094b65f157c..fb1521188ee 100644
--- a/packages/calcite-components/src/demos/color-picker.html
+++ b/packages/calcite-components/src/demos/color-picker.html
@@ -16,7 +16,7 @@
         flex: 1 0 25%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/combobox.html b/packages/calcite-components/src/demos/combobox.html
index 36928162e4d..02f92b04a72 100644
--- a/packages/calcite-components/src/demos/combobox.html
+++ b/packages/calcite-components/src/demos/combobox.html
@@ -17,7 +17,7 @@
         flex: 1 0 15%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/date-picker.html b/packages/calcite-components/src/demos/date-picker.html
index 2a5383d206f..697afc8907c 100644
--- a/packages/calcite-components/src/demos/date-picker.html
+++ b/packages/calcite-components/src/demos/date-picker.html
@@ -16,7 +16,7 @@
         flex: 1 0 25%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/dropdown.html b/packages/calcite-components/src/demos/dropdown.html
index 8822e668821..868b3dabf45 100644
--- a/packages/calcite-components/src/demos/dropdown.html
+++ b/packages/calcite-components/src/demos/dropdown.html
@@ -11,7 +11,7 @@
         display: flex;
         align-items: center;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         margin-left: 5%;
diff --git a/packages/calcite-components/src/demos/fab.html b/packages/calcite-components/src/demos/fab.html
index 01c437fd307..f4a48a15886 100644
--- a/packages/calcite-components/src/demos/fab.html
+++ b/packages/calcite-components/src/demos/fab.html
@@ -13,7 +13,7 @@
       .parent-flex,
       span {
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/flow-and-panel-action-menu-overflow.html b/packages/calcite-components/src/demos/flow-and-panel-action-menu-overflow.html
index 2a5665961d1..510872bee8b 100644
--- a/packages/calcite-components/src/demos/flow-and-panel-action-menu-overflow.html
+++ b/packages/calcite-components/src/demos/flow-and-panel-action-menu-overflow.html
@@ -17,7 +17,7 @@
         flex: 0 0 40%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         padding: 10px 0;
diff --git a/packages/calcite-components/src/demos/flow.html b/packages/calcite-components/src/demos/flow.html
index adf818c7d7d..edbb8d77a62 100644
--- a/packages/calcite-components/src/demos/flow.html
+++ b/packages/calcite-components/src/demos/flow.html
@@ -17,7 +17,7 @@
         flex: 0 0 40%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         padding: 10px 0;
diff --git a/packages/calcite-components/src/demos/form.html b/packages/calcite-components/src/demos/form.html
index 2b4a0c5d221..6937f80ab8d 100644
--- a/packages/calcite-components/src/demos/form.html
+++ b/packages/calcite-components/src/demos/form.html
@@ -19,7 +19,7 @@
         flex: 0 1 21%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/graph.html b/packages/calcite-components/src/demos/graph.html
index 50778d6b26b..74ebb6e9307 100644
--- a/packages/calcite-components/src/demos/graph.html
+++ b/packages/calcite-components/src/demos/graph.html
@@ -16,7 +16,7 @@
         flex: 0 0 40%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         padding: 10px 0;
diff --git a/packages/calcite-components/src/demos/icon.html b/packages/calcite-components/src/demos/icon.html
index ffbfb07e887..d68f69d8458 100644
--- a/packages/calcite-components/src/demos/icon.html
+++ b/packages/calcite-components/src/demos/icon.html
@@ -18,7 +18,7 @@
         flex: 0 1 21%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/inline-editable.html b/packages/calcite-components/src/demos/inline-editable.html
index 642255b7b9c..d180cb41d33 100644
--- a/packages/calcite-components/src/demos/inline-editable.html
+++ b/packages/calcite-components/src/demos/inline-editable.html
@@ -17,7 +17,7 @@
         flex: 0 0 16%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/input-date-picker.html b/packages/calcite-components/src/demos/input-date-picker.html
index d3bf3862eac..35017052366 100644
--- a/packages/calcite-components/src/demos/input-date-picker.html
+++ b/packages/calcite-components/src/demos/input-date-picker.html
@@ -16,7 +16,7 @@
       .font,
       .header {
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-weight: var(--calcite-font-weight-medium);
       }
 
diff --git a/packages/calcite-components/src/demos/input-number.html b/packages/calcite-components/src/demos/input-number.html
index 45160de4a4a..f0d9dc9c725 100644
--- a/packages/calcite-components/src/demos/input-number.html
+++ b/packages/calcite-components/src/demos/input-number.html
@@ -16,7 +16,7 @@
       .font,
       .header {
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-weight: var(--calcite-font-weight-medium);
       }
 
diff --git a/packages/calcite-components/src/demos/input-text.html b/packages/calcite-components/src/demos/input-text.html
index df163d4b230..58372f93f35 100644
--- a/packages/calcite-components/src/demos/input-text.html
+++ b/packages/calcite-components/src/demos/input-text.html
@@ -16,7 +16,7 @@
       .font,
       .header {
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-weight: var(--calcite-font-weight-medium);
       }
 
diff --git a/packages/calcite-components/src/demos/input-time-zone.html b/packages/calcite-components/src/demos/input-time-zone.html
index 9154bcd9530..b492ef3c88f 100644
--- a/packages/calcite-components/src/demos/input-time-zone.html
+++ b/packages/calcite-components/src/demos/input-time-zone.html
@@ -10,7 +10,7 @@
         display: flex;
         align-items: center;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/input.html b/packages/calcite-components/src/demos/input.html
index 5d6676f8aaf..5d944f28852 100644
--- a/packages/calcite-components/src/demos/input.html
+++ b/packages/calcite-components/src/demos/input.html
@@ -16,7 +16,7 @@
       .font,
       .header {
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-weight: var(--calcite-font-weight-medium);
       }
 
diff --git a/packages/calcite-components/src/demos/label.html b/packages/calcite-components/src/demos/label.html
index c974dafd759..765d0730aac 100644
--- a/packages/calcite-components/src/demos/label.html
+++ b/packages/calcite-components/src/demos/label.html
@@ -20,7 +20,7 @@
       .header,
       .parent-flex {
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-weight: var(--calcite-font-weight-medium);
       }
 
diff --git a/packages/calcite-components/src/demos/link.html b/packages/calcite-components/src/demos/link.html
index bd368a46748..f5c0ac93d90 100644
--- a/packages/calcite-components/src/demos/link.html
+++ b/packages/calcite-components/src/demos/link.html
@@ -10,7 +10,7 @@
         display: flex;
         align-items: center;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         padding: 20px 0;
diff --git a/packages/calcite-components/src/demos/list.html b/packages/calcite-components/src/demos/list.html
index db81e624c71..ccf1e13a218 100644
--- a/packages/calcite-components/src/demos/list.html
+++ b/packages/calcite-components/src/demos/list.html
@@ -12,7 +12,7 @@
         display: flex;
         align-items: center;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/loader.html b/packages/calcite-components/src/demos/loader.html
index 72b5663a62b..bd81ed3264f 100644
--- a/packages/calcite-components/src/demos/loader.html
+++ b/packages/calcite-components/src/demos/loader.html
@@ -9,7 +9,7 @@
       .parent {
         display: flex;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         padding: 30px 0;
diff --git a/packages/calcite-components/src/demos/meter.html b/packages/calcite-components/src/demos/meter.html
index d74a61aad9d..8acd4b76b7f 100644
--- a/packages/calcite-components/src/demos/meter.html
+++ b/packages/calcite-components/src/demos/meter.html
@@ -9,7 +9,7 @@
       .parent {
         display: flex;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         padding: 20px 0;
diff --git a/packages/calcite-components/src/demos/modal.html b/packages/calcite-components/src/demos/modal.html
index 923719314ac..c4df69afdc9 100644
--- a/packages/calcite-components/src/demos/modal.html
+++ b/packages/calcite-components/src/demos/modal.html
@@ -17,7 +17,7 @@
         flex: 0 0 15%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/notice.html b/packages/calcite-components/src/demos/notice.html
index ff536785246..9c484e4a678 100644
--- a/packages/calcite-components/src/demos/notice.html
+++ b/packages/calcite-components/src/demos/notice.html
@@ -17,7 +17,7 @@
         flex: 1 0 75%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/pagination.html b/packages/calcite-components/src/demos/pagination.html
index 4f650ee5282..ee2a8e6a3a6 100644
--- a/packages/calcite-components/src/demos/pagination.html
+++ b/packages/calcite-components/src/demos/pagination.html
@@ -16,7 +16,7 @@
         display: flex;
         flex-direction: column;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         margin-left: 5%;
diff --git a/packages/calcite-components/src/demos/panel.html b/packages/calcite-components/src/demos/panel.html
index 0fe6261545f..e7da5c8957e 100644
--- a/packages/calcite-components/src/demos/panel.html
+++ b/packages/calcite-components/src/demos/panel.html
@@ -17,7 +17,7 @@
         flex: 0 0 40%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         padding: 18px 0;
diff --git a/packages/calcite-components/src/demos/pick-list.html b/packages/calcite-components/src/demos/pick-list.html
index 999a6cd38b6..035a1cb9ac7 100644
--- a/packages/calcite-components/src/demos/pick-list.html
+++ b/packages/calcite-components/src/demos/pick-list.html
@@ -17,7 +17,7 @@
         flex: 0 0 40%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         padding: 10px 0;
diff --git a/packages/calcite-components/src/demos/popover.html b/packages/calcite-components/src/demos/popover.html
index 3cf21ff243d..847a0981025 100644
--- a/packages/calcite-components/src/demos/popover.html
+++ b/packages/calcite-components/src/demos/popover.html
@@ -10,7 +10,7 @@
         display: flex;
         flex-direction: column;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         margin-left: 10%;
diff --git a/packages/calcite-components/src/demos/progress.html b/packages/calcite-components/src/demos/progress.html
index 9d84073eafe..be9ff920d1c 100644
--- a/packages/calcite-components/src/demos/progress.html
+++ b/packages/calcite-components/src/demos/progress.html
@@ -10,7 +10,7 @@
         display: flex;
         flex-direction: column;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         margin-left: 10%;
diff --git a/packages/calcite-components/src/demos/radio-button-group.html b/packages/calcite-components/src/demos/radio-button-group.html
index cf6146cca7c..301fe314313 100644
--- a/packages/calcite-components/src/demos/radio-button-group.html
+++ b/packages/calcite-components/src/demos/radio-button-group.html
@@ -17,7 +17,7 @@
       .parent-flex,
       span {
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-weight: var(--calcite-font-weight-medium);
         font-size: var(--calcite-font-size-0);
       }
diff --git a/packages/calcite-components/src/demos/radio-button.html b/packages/calcite-components/src/demos/radio-button.html
index d0366abd0e7..27d40628cee 100644
--- a/packages/calcite-components/src/demos/radio-button.html
+++ b/packages/calcite-components/src/demos/radio-button.html
@@ -11,7 +11,7 @@
         padding: 12px 0;
         width: 70%;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-weight: var(--calcite-font-weight-medium);
         font-size: var(--calcite-font-size-0);
       }
diff --git a/packages/calcite-components/src/demos/rating.html b/packages/calcite-components/src/demos/rating.html
index 36aa3f17058..3f926cb5ddd 100644
--- a/packages/calcite-components/src/demos/rating.html
+++ b/packages/calcite-components/src/demos/rating.html
@@ -18,7 +18,7 @@
         flex: 0 1 21%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/scrim.html b/packages/calcite-components/src/demos/scrim.html
index d672686ae58..a5f6fcf63bb 100644
--- a/packages/calcite-components/src/demos/scrim.html
+++ b/packages/calcite-components/src/demos/scrim.html
@@ -21,7 +21,7 @@
         flex-direction: column;
         flex: 1 1 auto;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         padding: 1rem;
diff --git a/packages/calcite-components/src/demos/segmented-control.html b/packages/calcite-components/src/demos/segmented-control.html
index 40afa911941..8b1906a0b3a 100644
--- a/packages/calcite-components/src/demos/segmented-control.html
+++ b/packages/calcite-components/src/demos/segmented-control.html
@@ -15,7 +15,7 @@
       .parent-flex,
       span {
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-weight: var(--calcite-font-weight-medium);
         font-size: var(--calcite-font-size-0);
       }
diff --git a/packages/calcite-components/src/demos/select.html b/packages/calcite-components/src/demos/select.html
index 1ec0886592c..938af579b6c 100644
--- a/packages/calcite-components/src/demos/select.html
+++ b/packages/calcite-components/src/demos/select.html
@@ -16,7 +16,7 @@
         flex: 0 0 15%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/sheet.html b/packages/calcite-components/src/demos/sheet.html
index 11555847f9a..09192a3ad10 100644
--- a/packages/calcite-components/src/demos/sheet.html
+++ b/packages/calcite-components/src/demos/sheet.html
@@ -17,7 +17,7 @@
         flex: 0 0 15%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/slider.html b/packages/calcite-components/src/demos/slider.html
index 9b991a4d56d..5d867b116a3 100644
--- a/packages/calcite-components/src/demos/slider.html
+++ b/packages/calcite-components/src/demos/slider.html
@@ -17,7 +17,7 @@
         flex: 0 0 70%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         padding: 0 10px;
diff --git a/packages/calcite-components/src/demos/sortable-list.html b/packages/calcite-components/src/demos/sortable-list.html
index 2c361b8f134..6d9aff145d3 100644
--- a/packages/calcite-components/src/demos/sortable-list.html
+++ b/packages/calcite-components/src/demos/sortable-list.html
@@ -11,7 +11,7 @@
         display: flex;
         flex-direction: column;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         margin: 0 10% 0;
diff --git a/packages/calcite-components/src/demos/split-button.html b/packages/calcite-components/src/demos/split-button.html
index 00acbe0246e..874e09cf388 100644
--- a/packages/calcite-components/src/demos/split-button.html
+++ b/packages/calcite-components/src/demos/split-button.html
@@ -10,7 +10,7 @@
         display: flex;
         padding: 25px 0;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         width: 70%;
diff --git a/packages/calcite-components/src/demos/stack.html b/packages/calcite-components/src/demos/stack.html
index 289a50a88a7..c742418b948 100644
--- a/packages/calcite-components/src/demos/stack.html
+++ b/packages/calcite-components/src/demos/stack.html
@@ -17,7 +17,7 @@
         flex: 0 0 40%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         padding: 18px 0;
diff --git a/packages/calcite-components/src/demos/stepper.html b/packages/calcite-components/src/demos/stepper.html
index e1d0d3fc57c..0910e6208c8 100644
--- a/packages/calcite-components/src/demos/stepper.html
+++ b/packages/calcite-components/src/demos/stepper.html
@@ -11,7 +11,7 @@
         width: 80%;
         padding: 25px 0;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/switch.html b/packages/calcite-components/src/demos/switch.html
index c93aa2b16d7..40d35ddc155 100644
--- a/packages/calcite-components/src/demos/switch.html
+++ b/packages/calcite-components/src/demos/switch.html
@@ -19,7 +19,7 @@
         flex: 0 1 21%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/tabs.html b/packages/calcite-components/src/demos/tabs.html
index 5b2547f4ba1..c0f38ce0fab 100644
--- a/packages/calcite-components/src/demos/tabs.html
+++ b/packages/calcite-components/src/demos/tabs.html
@@ -11,7 +11,7 @@
         display: flex;
         align-items: center;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         padding: 0 25px;
diff --git a/packages/calcite-components/src/demos/text-area.html b/packages/calcite-components/src/demos/text-area.html
index 8d683be8d6c..29af75b57f1 100644
--- a/packages/calcite-components/src/demos/text-area.html
+++ b/packages/calcite-components/src/demos/text-area.html
@@ -11,7 +11,7 @@
         flex-wrap: wrap;
         flex-direction: row;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         padding: 15px;
diff --git a/packages/calcite-components/src/demos/tile-select.html b/packages/calcite-components/src/demos/tile-select.html
index 182d8646a37..f0735cb1db3 100644
--- a/packages/calcite-components/src/demos/tile-select.html
+++ b/packages/calcite-components/src/demos/tile-select.html
@@ -10,7 +10,7 @@
         display: flex;
         align-items: center;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/tip-manager.html b/packages/calcite-components/src/demos/tip-manager.html
index e77612b31e9..69f2e2a5a3a 100644
--- a/packages/calcite-components/src/demos/tip-manager.html
+++ b/packages/calcite-components/src/demos/tip-manager.html
@@ -16,7 +16,7 @@
         flex: 0 1 50%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/tooltip.html b/packages/calcite-components/src/demos/tooltip.html
index 924d198e6a8..0a51b47268d 100644
--- a/packages/calcite-components/src/demos/tooltip.html
+++ b/packages/calcite-components/src/demos/tooltip.html
@@ -11,7 +11,7 @@
         align-items: center;
         margin-left: 9%;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/tree.html b/packages/calcite-components/src/demos/tree.html
index c42538afe43..5b08a836fab 100644
--- a/packages/calcite-components/src/demos/tree.html
+++ b/packages/calcite-components/src/demos/tree.html
@@ -10,7 +10,7 @@
         display: flex;
         align-items: center;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
diff --git a/packages/calcite-components/src/demos/value-list.html b/packages/calcite-components/src/demos/value-list.html
index 76e2e1a5b73..33809789de5 100644
--- a/packages/calcite-components/src/demos/value-list.html
+++ b/packages/calcite-components/src/demos/value-list.html
@@ -15,7 +15,7 @@
         flex: 0 0 40%;
         margin: 0 25px;
         color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
+        font-family: var(--calcite-font-family);
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
         padding: 10px 0;

From c93d029dea2196a08c4d34f8a3a7c194175ced13 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Fri, 8 Dec 2023 17:59:38 -0800
Subject: [PATCH 05/19] Revert "feat(font tokens): add fallback fonts to core"

This reverts commit d4d6cde11a9160842096c500c05423a636bf548c.
---
 .../calcite-design-tokens/src/core/font.json  | 35 -------------------
 1 file changed, 35 deletions(-)

diff --git a/packages/calcite-design-tokens/src/core/font.json b/packages/calcite-design-tokens/src/core/font.json
index 9c2b8dfbe6d..34d47ff73db 100644
--- a/packages/calcite-design-tokens/src/core/font.json
+++ b/packages/calcite-design-tokens/src/core/font.json
@@ -10,44 +10,9 @@
           "value": "Avenir Next World",
           "type": "fontFamilies"
         },
-        "avenir": {
-          "value": "Avenir",
-          "type": "fontFamilies",
-          "description": "Fallback for avenirNext"
-        },
-        "helveticaNeue": {
-          "value": "Helvetica Neue",
-          "type": "fontFamilies",
-          "description": "Fallback for avenirNext"
-        },
-        "sansSerif": {
-          "value": "sans-serif",
-          "type": "fontFamilies",
-          "description": "Fallback for avenirNext"
-        },
-        "consolas": {
-          "value": "Consolas",
-          "type": "fontFamilies",
-          "description": "Fallback for monaco"
-        },
-        "andaleMono": {
-          "value": "Andale Mono",
-          "type": "fontFamilies",
-          "description": "Fallback for monaco"
-        },
-        "lucidaConsole": {
-          "value": "Lucida Console",
-          "type": "fontFamilies",
-          "description": "Fallback for monaco"
-        },
         "monaco": {
           "value": "Monaco",
           "type": "fontFamilies"
-        },
-        "monospace": {
-          "value": "monospace",
-          "type": "fontFamilies",
-          "description": "Fallback for monaco"
         }
       },
       "style": {

From 6b9cd9a5c65c30711f86257ac5af71db8fa50775 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Fri, 8 Dec 2023 17:59:45 -0800
Subject: [PATCH 06/19] Revert "feat(font tokens): add fallback fonts to
 semantic tokens"

This reverts commit a2d20bd07ab6c092d904a5e596d034e965cacedf.
---
 .../src/semantic/font.json                    | 22 ++++---------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/packages/calcite-design-tokens/src/semantic/font.json b/packages/calcite-design-tokens/src/semantic/font.json
index 2d723738c62..d0ea467ca5a 100644
--- a/packages/calcite-design-tokens/src/semantic/font.json
+++ b/packages/calcite-design-tokens/src/semantic/font.json
@@ -3,26 +3,12 @@
     "font": {
       "family": {
         "default": {
-          "value": [
-            "{core.font.family.avenirNextWorld}",
-            "{core.font.family.avenirNextPro}",
-            "{core.font.family.avenir}",
-            "{core.font.family.helveticaNeue}",
-            "{core.font.family.sansSerif}"
-          ],
-          "type": "fontFamilies",
-          "description": "Primary font with fallbacks"
+          "value": "{core.font.family.avenirNextPro}",
+          "type": "fontFamilies"
         },
         "code": {
-          "value": [
-            "{core.font.family.monaco}",
-            "{core.font.family.consolas}",
-            "{core.font.family.andaleMono}",
-            "{core.font.family.lucidaConsole}",
-            "{core.font.family.monospace}"
-          ],
-          "type": "fontFamilies",
-          "description": "Font family for code with fallbacks"
+          "value": "{core.font.family.monaco}",
+          "type": "fontFamilies"
         }
       },
       "weight": {

From 8ee543b8fcd224e9a98cbfeb3bc6d39d15477209 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Fri, 8 Dec 2023 18:01:33 -0800
Subject: [PATCH 07/19] Revert "feat(token transformer): allow font family
 tokens to output fallbacks"

This reverts commit bc2c8c922748cfcb826dfe4200d6b1358524aac8.
---
 .../registerCalciteTransformers.ts            | 12 +++----
 .../styleDictionary/transformer/utils.ts      |  2 --
 .../value/valueFontFamilyFallbacks.ts         | 32 -------------------
 3 files changed, 5 insertions(+), 41 deletions(-)
 delete mode 100644 packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts

diff --git a/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts b/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts
index 8a5e58d2ef8..f46ab2f4c56 100644
--- a/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts
@@ -18,7 +18,6 @@ import { registerValueRGBA } from "./styleDictionary/transformer/value/valueRGBA
 import { registerNameSpacePath } from "./styleDictionary/transformer/name/nameSpacePath.js";
 import { registerFormatterDocs } from "./styleDictionary/formatter/docs.js";
 import { registerValueToREM } from "./styleDictionary/transformer/value/valueToREM.js";
-import { registerValueFontFamilyWithFallbacks } from "./styleDictionary/transformer/value/valueFontFamilyFallbacks.js";
 
 export async function registerCalciteTransformers(sd: StyleDictionary): Promise<void> {
   // Here we are registering the Transforms provided by Token Studio however,
@@ -28,22 +27,21 @@ export async function registerCalciteTransformers(sd: StyleDictionary): Promise<
   await registerTransforms(sd, {
     expand: false,
   });
+  registerValueRGBA(sd);
+  registerValueEvaluateMath(sd);
   registerAttributePlatformNames(sd);
   registerCustomJSONParser(sd);
   registerFilterSource(sd);
   registerFormatterCss(sd);
-  registerFormatterDocs(sd);
-  registerFormatterJs(sd);
   registerFormatterScss(sd);
+  registerFormatterJs(sd);
   registerNameCamelCase(sd);
   registerNameJoinPath(sd);
   registerNameKebabCase(sd);
-  registerNameSpacePath(sd);
   registerValueAlignFontWeightAndStyles(sd);
   registerValueAssetToken(sd);
-  registerValueEvaluateMath(sd);
-  registerValueFontFamilyWithFallbacks(sd);
-  registerValueRGBA(sd);
   registerValueStringWrapper(sd);
+  registerNameSpacePath(sd);
+  registerFormatterDocs(sd);
   registerValueToREM(sd);
 }
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts
index a3e975a3c01..d1b2edd1c2b 100644
--- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts
@@ -15,7 +15,6 @@ import { valueEvaluateMath } from "./value/valueCheckEvaluateMath.js";
 import { CalciteValueRGBA } from "./value/valueRGBA.js";
 import { nameSpacePath } from "./name/nameSpacePath.js";
 import { CalciteValueToREM } from "./value/valueToREM.js";
-import { valueFontFamilyFallbacks } from "./value/valueFontFamilyFallbacks.js";
 
 export type TransformerTypeUnion = `${TransformerTypeEnum}`;
 
@@ -52,7 +51,6 @@ export const styles = [
   valueAssetToken,
   valueStringWrapper,
   CalciteValueToREM,
-  valueFontFamilyFallbacks,
   nameKebabCase,
 ];
 
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts
deleted file mode 100644
index c3dd5651391..00000000000
--- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Core as StyleDictionary } from "style-dictionary";
-import { Matcher } from "style-dictionary/types/Matcher.js";
-import { TransformedToken } from "style-dictionary/types/TransformedToken.js";
-import { TokenTypes } from "@tokens-studio/types";
-
-import { CalledTransformerFunction, TransformerConfig } from "../utils.js";
-
-export const matcher: Matcher = (token: TransformedToken) => {
-  return token.type === TokenTypes.FONT_FAMILIES && Array.isArray(token.value);
-};
-
-type FontFamilyFallbackToken = TransformedToken & { value: string[] };
-
-export const transformValuesFontFamilyWithFallbacks: CalledTransformerFunction<string> = (
-  token: FontFamilyFallbackToken
-) => {
-  return token.value.join(" ");
-};
-
-export const registerValueFontFamilyWithFallbacks = (sd: StyleDictionary): void => {
-  const transformerConfig: TransformerConfig = {
-    name: valueFontFamilyFallbacks,
-    transformer: transformValuesFontFamilyWithFallbacks,
-    type: "value",
-    matcher,
-    transitive: true,
-  };
-
-  sd.registerTransform(transformerConfig);
-};
-
-export const valueFontFamilyFallbacks = "value/calcite/font-family";

From 9a8d74d2fd71556126e3a53c2fb76a7bcfebc7ad Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Thu, 21 Mar 2024 03:55:48 -0700
Subject: [PATCH 08/19] feat(font): add avenir next to core fonts

---
 .../calcite-design-tokens/src/core/font.json  | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/packages/calcite-design-tokens/src/core/font.json b/packages/calcite-design-tokens/src/core/font.json
index 0ba546a5c85..dd9781e2a44 100644
--- a/packages/calcite-design-tokens/src/core/font.json
+++ b/packages/calcite-design-tokens/src/core/font.json
@@ -75,6 +75,31 @@
             }
           }
         },
+        "avenirNext": {
+          "value": "Avenir Next",
+          "type": "fontFamilies",
+          "description": "Fallback for Avenir Next",
+          "attributes": {
+            "calcite-schema": {
+              "system": "calcite",
+              "tier": "core",
+              "domain": "",
+              "component": "",
+              "pattern": "",
+              "element": "",
+              "category": "font",
+              "group": "family",
+              "kind": "",
+              "appearance": "",
+              "property": "",
+              "variant": "avenirNext",
+              "state": "",
+              "scale": "",
+              "context": "",
+              "mode": ""
+            }
+          }
+        },
         "avenir": {
           "value": "Avenir",
           "type": "fontFamilies",

From 924753c8032005bcc1918d08f3f6804d20db48e5 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Thu, 21 Mar 2024 03:56:16 -0700
Subject: [PATCH 09/19] fix(font): add avenir next font fallback

---
 packages/calcite-design-tokens/src/semantic/font.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/calcite-design-tokens/src/semantic/font.json b/packages/calcite-design-tokens/src/semantic/font.json
index 1e253583417..f0746461f68 100644
--- a/packages/calcite-design-tokens/src/semantic/font.json
+++ b/packages/calcite-design-tokens/src/semantic/font.json
@@ -6,6 +6,7 @@
           "value": [
             "{core.font.family.avenirNextWorld}",
             "{core.font.family.avenirNextPro}",
+            "{core.font.family.avenirNext}",
             "{core.font.family.avenir}",
             "{core.font.family.helveticaNeue}",
             "{core.font.family.sansSerif}"

From fe3b5bd133223bd7a6459239eb31d63e209f4f3f Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Thu, 21 Mar 2024 10:56:11 -0700
Subject: [PATCH 10/19] fix(navigation-user): add back font-sans

---
 .../calcite-components/src/components.d.ts    | 104 ++++++++++++++++++
 .../navigation-user/navigation-user.scss      |   3 +-
 2 files changed, 106 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 316777b4dc2..0cb35ed0e3c 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -8,80 +8,176 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { Alignment, Appearance, Columns, FlipContext, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionMode, Status, Width } from "./components/interfaces";
 import { RequestedItem } from "./components/accordion/interfaces";
 import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
+import { ActionMessages } from "./components/action/assets/action/t9n";
 import { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
+import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
+import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
 import { AlertDuration, Sync } from "./components/alert/interfaces";
 import { NumberingSystem } from "./utils/locale";
+import { AlertMessages } from "./components/alert/assets/alert/t9n";
 import { HeadingLevel } from "./components/functional/Heading";
+import { BlockMessages } from "./components/block/assets/block/t9n";
 import { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
+import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
 import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
+import { ButtonMessages } from "./components/button/assets/button/t9n";
+import { CardMessages } from "./components/card/assets/card/t9n";
+import { ChipMessages } from "./components/chip/assets/chip/t9n";
 import { ColorValue, InternalColor } from "./components/color-picker/interfaces";
 import { Format } from "./components/color-picker/utils";
+import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
 import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
+import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
+import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
 import { DateLocaleData } from "./components/date-picker/utils";
 import { HoverRange } from "./utils/date";
 import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
 import { ItemKeyboardEvent } from "./components/dropdown/interfaces";
+import { FilterMessages } from "./components/filter/assets/filter/t9n";
 import { FlowItemLikeElement } from "./components/flow/interfaces";
+import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
 import { ColorStop, DataSeries } from "./components/graph/interfaces";
+import { HandleMessages } from "./components/handle/assets/handle/t9n";
 import { HandleChange, HandleNudge } from "./components/handle/interfaces";
+import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
 import { InputPlacement } from "./components/input/interfaces";
+import { InputMessages } from "./components/input/assets/input/t9n";
+import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
+import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
+import { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
+import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
+import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
+import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
 import { TimeZoneMode } from "./components/input-time-zone/interfaces";
 import { ListDragDetail } from "./components/list/interfaces";
 import { ItemData } from "./components/list-item/interfaces";
+import { ListMessages } from "./components/list/assets/list/t9n";
 import { SelectionAppearance } from "./components/list/resources";
+import { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
+import { MenuMessages } from "./components/menu/assets/menu/t9n";
+import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
 import { MenuItemCustomEvent } from "./components/menu-item/interfaces";
 import { MeterLabelType } from "./components/meter/interfaces";
+import { ModalMessages } from "./components/modal/assets/modal/t9n";
+import { NoticeMessages } from "./components/notice/assets/notice/t9n";
+import { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
+import { PanelMessages } from "./components/panel/assets/panel/t9n";
 import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
 import { ICON_TYPES } from "./components/pick-list/resources";
+import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
+import { PopoverMessages } from "./components/popover/assets/popover/t9n";
+import { RatingMessages } from "./components/rating/assets/rating/t9n";
+import { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
 import { DisplayMode } from "./components/sheet/interfaces";
 import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
+import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
 import { DragDetail } from "./utils/sortableComponent";
 import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
+import { StepperMessages } from "./components/stepper/assets/stepper/t9n";
+import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
 import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
+import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
 import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
+import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
 import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent } from "./components/table/interfaces";
+import { TableMessages } from "./components/table/assets/table/t9n";
+import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
+import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
+import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
 import { TileSelectType } from "./components/tile-select/interfaces";
 import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
+import { TipMessages } from "./components/tip/assets/tip/t9n";
+import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
 import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
+import { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
 import { ListItemAndHandle } from "./components/value-list-item/interfaces";
 export { Alignment, Appearance, Columns, FlipContext, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionMode, Status, Width } from "./components/interfaces";
 export { RequestedItem } from "./components/accordion/interfaces";
 export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
+export { ActionMessages } from "./components/action/assets/action/t9n";
 export { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
+export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
+export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
 export { AlertDuration, Sync } from "./components/alert/interfaces";
 export { NumberingSystem } from "./utils/locale";
+export { AlertMessages } from "./components/alert/assets/alert/t9n";
 export { HeadingLevel } from "./components/functional/Heading";
+export { BlockMessages } from "./components/block/assets/block/t9n";
 export { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
+export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
 export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
+export { ButtonMessages } from "./components/button/assets/button/t9n";
+export { CardMessages } from "./components/card/assets/card/t9n";
+export { ChipMessages } from "./components/chip/assets/chip/t9n";
 export { ColorValue, InternalColor } from "./components/color-picker/interfaces";
 export { Format } from "./components/color-picker/utils";
+export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
 export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
+export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
+export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
 export { DateLocaleData } from "./components/date-picker/utils";
 export { HoverRange } from "./utils/date";
 export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
 export { ItemKeyboardEvent } from "./components/dropdown/interfaces";
+export { FilterMessages } from "./components/filter/assets/filter/t9n";
 export { FlowItemLikeElement } from "./components/flow/interfaces";
+export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
 export { ColorStop, DataSeries } from "./components/graph/interfaces";
+export { HandleMessages } from "./components/handle/assets/handle/t9n";
 export { HandleChange, HandleNudge } from "./components/handle/interfaces";
+export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
 export { InputPlacement } from "./components/input/interfaces";
+export { InputMessages } from "./components/input/assets/input/t9n";
+export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
+export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
+export { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
+export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
+export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
+export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
 export { TimeZoneMode } from "./components/input-time-zone/interfaces";
 export { ListDragDetail } from "./components/list/interfaces";
 export { ItemData } from "./components/list-item/interfaces";
+export { ListMessages } from "./components/list/assets/list/t9n";
 export { SelectionAppearance } from "./components/list/resources";
+export { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
+export { MenuMessages } from "./components/menu/assets/menu/t9n";
+export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
 export { MenuItemCustomEvent } from "./components/menu-item/interfaces";
 export { MeterLabelType } from "./components/meter/interfaces";
+export { ModalMessages } from "./components/modal/assets/modal/t9n";
+export { NoticeMessages } from "./components/notice/assets/notice/t9n";
+export { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
+export { PanelMessages } from "./components/panel/assets/panel/t9n";
 export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
 export { ICON_TYPES } from "./components/pick-list/resources";
+export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
+export { PopoverMessages } from "./components/popover/assets/popover/t9n";
+export { RatingMessages } from "./components/rating/assets/rating/t9n";
+export { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
 export { DisplayMode } from "./components/sheet/interfaces";
 export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
+export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
 export { DragDetail } from "./utils/sortableComponent";
 export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
+export { StepperMessages } from "./components/stepper/assets/stepper/t9n";
+export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
 export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
+export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
 export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
+export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
 export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent } from "./components/table/interfaces";
+export { TableMessages } from "./components/table/assets/table/t9n";
+export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
+export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
+export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
 export { TileSelectType } from "./components/tile-select/interfaces";
 export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
+export { TipMessages } from "./components/tip/assets/tip/t9n";
+export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
 export { TreeItemSelectDetail } from "./components/tree-item/interfaces";
+export { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
 export { ListItemAndHandle } from "./components/value-list-item/interfaces";
 export namespace Components {
     interface CalciteAccordion {
@@ -882,6 +978,10 @@ export namespace Components {
         "setFocus": () => Promise<void>;
     }
     interface CalciteColorPicker {
+        /**
+          * When `true`, an empty color (`null`) will be allowed as a `value`.  When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.
+          * @deprecated Use `clearable` instead
+         */
         "allowEmpty": boolean;
         /**
           * When `true`, the component will allow updates to the color's alpha value.
@@ -8284,6 +8384,10 @@ declare namespace LocalJSX {
   >;
     }
     interface CalciteColorPicker {
+        /**
+          * When `true`, an empty color (`null`) will be allowed as a `value`.  When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.
+          * @deprecated Use `clearable` instead
+         */
         "allowEmpty"?: boolean;
         /**
           * When `true`, the component will allow updates to the color's alpha value.
diff --git a/packages/calcite-components/src/components/navigation-user/navigation-user.scss b/packages/calcite-components/src/components/navigation-user/navigation-user.scss
index 2277be31cb6..5f03ebce70d 100644
--- a/packages/calcite-components/src/components/navigation-user/navigation-user.scss
+++ b/packages/calcite-components/src/components/navigation-user/navigation-user.scss
@@ -3,7 +3,8 @@
   & .button {
     background-color: transparent;
     border: none;
-    @apply flex
+    @apply font-sans
+      flex
       m-0
       items-center
       justify-center

From 8fa85f9f22e4444016339091b9c7fbafaa54104d Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Thu, 21 Mar 2024 10:56:34 -0700
Subject: [PATCH 11/19] fix(list-item): add missing padding

---
 .../src/components/list-item/list-item.scss              | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/calcite-components/src/components/list-item/list-item.scss b/packages/calcite-components/src/components/list-item/list-item.scss
index 7031b7ac20b..c1f7e585f74 100755
--- a/packages/calcite-components/src/components/list-item/list-item.scss
+++ b/packages/calcite-components/src/components/list-item/list-item.scss
@@ -190,4 +190,13 @@ td:focus {
   @apply py-3;
 }
 
+.label,
+.description,
+.content-bottom {
+  &:only-child {
+    margin: 0px;
+    padding-block: 0.25rem;
+  }
+}
+
 @include base-component();

From a4e316b7ee7efca79806d12fbb39c3db63731bfe Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Thu, 21 Mar 2024 10:56:45 -0700
Subject: [PATCH 12/19] fix(block): add back font-sans

---
 packages/calcite-components/src/components/block/block.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/block/block.scss b/packages/calcite-components/src/components/block/block.scss
index 4f7e9e890f8..f98e933fdc9 100644
--- a/packages/calcite-components/src/components/block/block.scss
+++ b/packages/calcite-components/src/components/block/block.scss
@@ -37,7 +37,7 @@
 }
 
 .toggle {
-  @apply font-inherit
+  @apply font-sans
     focus-base
     m-0
     flex

From f708f2d36269b78de4f9e5b0a8385b79f2afbd44 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Thu, 21 Mar 2024 10:56:54 -0700
Subject: [PATCH 13/19] fix(action): add back font-sans

---
 packages/calcite-components/src/components/action/action.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss
index ee36173f07f..ec53bb65503 100755
--- a/packages/calcite-components/src/components/action/action.scss
+++ b/packages/calcite-components/src/components/action/action.scss
@@ -44,7 +44,8 @@
     items-center
     justify-start
     border-none
-    font-medium;
+    font-medium
+    font-sans;
 
   text-align: unset;
   flex: 1 0 auto;

From bad794457fecad064cd4579fad9aea41ce5049a6 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Thu, 21 Mar 2024 11:20:26 -0700
Subject: [PATCH 14/19] test(tokens): update snapshot tests

---
 .../tests/__snapshots__/index.spec.ts.snap    | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap b/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap
index 5dbec0ea408..3a8e12afc91 100644
--- a/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap
+++ b/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap
@@ -93,6 +93,7 @@ exports[`generated tokens CSS core should match 1`] = `
   --calcite-font-family-helvetica-neue: "Helvetica Neue"; /* Fallback for Avenir Next */
   --calcite-font-family-consolas: Consolas; /* Fallback for Monaco */
   --calcite-font-family-avenir: Avenir; /* Fallback for Avenir Next */
+  --calcite-font-family-avenir-next: "Avenir Next"; /* Primary font family */
   --calcite-font-family-avenir-next-world: "Avenir Next World";
   --calcite-font-family-avenir-next-pro: "Avenir Next LT Pro";
   --calcite-font-family-andale-mono: "Andale Mono"; /* Fallback for Monaco */
@@ -447,8 +448,7 @@ exports[`generated tokens CSS global should match 1`] = `
   --calcite-font-weight-light: 300; /* For Avenir Next World (secondary font family) */
   --calcite-font-family-code: Monaco, Consolas, "Andale Mono", "Lucida Console",
     monospace; /* Font family for code with fallbacks */
-  --calcite-font-family: "Avenir Next World", "Avenir Next LT Pro", Avenir,
-    "Helvetica Neue", sans-serif; /* Primary font with fallbacks */
+  --calcite-font-family: "Avenir Next", Avenir, "Helvetica Neue", sans-serif; /* Primary font with fallbacks */
   --calcite-corner-radius-pill: 100%;
   --calcite-corner-radius-round: 4px;
   --calcite-corner-radius-sharp: 0;
@@ -739,6 +739,7 @@ export const calciteContainerSize1440 = "1440px";
 export const calciteFontFamilyAndaleMono = "Andale Mono"; // Fallback for Monaco
 export const calciteFontFamilyAvenirNextPro = "Avenir Next LT Pro";
 export const calciteFontFamilyAvenirNextWorld = "Avenir Next World";
+export const calciteFontFamilyAvenirNext = "Avenir Next"; // Primary font family
 export const calciteFontFamilyAvenir = "Avenir"; // Fallback for Avenir Next
 export const calciteFontFamilyConsolas = "Consolas"; // Fallback for Monaco
 export const calciteFontFamilyHelveticaNeue = "Helvetica Neue"; // Fallback for Avenir Next
@@ -904,7 +905,7 @@ export const calciteCornerRadius = "0";
 export const calciteCornerRadiusSharp = "0";
 export const calciteCornerRadiusRound = "4px";
 export const calciteCornerRadiusPill = "100%";
-export const calciteFontFamily = ["Avenir Next World","Avenir Next LT Pro","Avenir","Helvetica Neue","sans-serif"]; // Primary font with fallbacks
+export const calciteFontFamily = ["Avenir Next","Avenir","Helvetica Neue","sans-serif"]; // Primary font with fallbacks
 export const calciteFontFamilyCode = ["Monaco","Consolas","Andale Mono","Lucida Console","monospace"]; // Font family for code with fallbacks
 export const calciteFontWeightLight = "300"; // For Avenir Next World (secondary font family)
 export const calciteFontWeightNormal = "400"; // For backwards compatibility only. This token will be removed from the published tokens in the next major in favor of the more descriptive word "regular"
@@ -970,7 +971,7 @@ export const calciteSpacingLg = "14px";
 export const calciteSpacingXl = "16px";
 export const calciteSpacingXxl = "20px";
 export const calciteSpacingXxxl = "32px";
-export const calciteTypography = {"fontFamily":["Avenir Next World","Avenir Next LT Pro","Avenir","Helvetica Neue","sans-serif"],"fontSize":"14px","fontWeight":"400","letterSpacing":"0","lineHeight":"16px","paragraphSpacing":"4px","textCase":"none","textDecoration":"none"};
+export const calciteTypography = {"fontFamily":["Avenir Next","Avenir","Helvetica Neue","sans-serif"],"fontSize":"14px","fontWeight":"400","letterSpacing":"0","lineHeight":"16px","paragraphSpacing":"4px","textCase":"none","textDecoration":"none"};
 export const calciteTypographyLightMinus3h = {"fontSize":"10px","fontWeight":"300","lineHeight":"12px"};
 export const calciteTypographyLightMinus2h = {"fontSize":"12px","fontWeight":"300"};
 export const calciteTypographyLightMinus1h = {"fontWeight":"300"};
@@ -978,7 +979,7 @@ export const calciteTypographyLight0h = {"fontSize":"16px","fontWeight":"300","l
 export const calciteTypographyLight1h = {"fontSize":"18px","fontWeight":"300","lineHeight":"24px"};
 export const calciteTypographyRegularMinus3h = {"lineHeight":"12px","fontSize":"10px"};
 export const calciteTypographyRegularMinus2h = {"fontSize":"12px"};
-export const calciteTypographyRegularMinus1h = {"fontFamily":["Avenir Next World","Avenir Next LT Pro","Avenir","Helvetica Neue","sans-serif"],"fontSize":"14px","fontWeight":"400","letterSpacing":"0","lineHeight":"16px","paragraphSpacing":"4px","textCase":"none","textDecoration":"none"};
+export const calciteTypographyRegularMinus1h = {"fontFamily":["Avenir Next","Avenir","Helvetica Neue","sans-serif"],"fontSize":"14px","fontWeight":"400","letterSpacing":"0","lineHeight":"16px","paragraphSpacing":"4px","textCase":"none","textDecoration":"none"};
 export const calciteTypographyRegular0h = {"lineHeight":"20px","fontSize":"16px"};
 export const calciteTypographyRegular1h = {"lineHeight":"24px","fontSize":"18px"};
 export const calciteTypographyMediumMinus3h = {"fontWeight":"500","lineHeight":"12px","fontSize":"10px"};
@@ -1023,7 +1024,7 @@ export const calciteTypographyHierarchyHeading3 = {"fontWeight":"500","lineHeigh
 export const calciteTypographyHierarchyHeading4 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"16px"};
 export const calciteTypographyHierarchyHeading5 = {"fontWeight":"500","lineHeight":"137.5%"};
 export const calciteTypographyHierarchyBodySnug = {"lineHeight":"137.5%"};
-export const calciteTypographyHierarchyBody = {"fontFamily":["Avenir Next World","Avenir Next LT Pro","Avenir","Helvetica Neue","sans-serif"],"fontSize":"14px","fontWeight":"400","letterSpacing":"0","lineHeight":"16px","paragraphSpacing":"4px","textCase":"none","textDecoration":"none"};
+export const calciteTypographyHierarchyBody = {"fontFamily":["Avenir Next","Avenir","Helvetica Neue","sans-serif"],"fontSize":"14px","fontWeight":"400","letterSpacing":"0","lineHeight":"16px","paragraphSpacing":"4px","textCase":"none","textDecoration":"none"};
 export const calciteTypographyHierarchyOverline = {"lineHeight":"12px","textCase":"uppercase","fontWeight":"700"};
 export const calciteTypographyHierarchyCaption = {"lineHeight":"137.5%","fontSize":"12px"};
 export const calciteZIndexDeep = "-999999";
@@ -1488,6 +1489,8 @@ export const calciteContainerSize1440 : string;
 export const calciteFontFamilyAndaleMono : string;
 export const calciteFontFamilyAvenirNextPro : string;
 export const calciteFontFamilyAvenirNextWorld : string;
+/** Primary font family */
+export const calciteFontFamilyAvenirNext : string;
 /** Fallback for Avenir Next */
 export const calciteFontFamilyAvenir : string;
 /** Fallback for Monaco */
@@ -1688,6 +1691,7 @@ $calcite-font-family-lucida-console: "Lucida Console"; // Fallback for Monaco
 $calcite-font-family-helvetica-neue: "Helvetica Neue"; // Fallback for Avenir Next
 $calcite-font-family-consolas: Consolas; // Fallback for Monaco
 $calcite-font-family-avenir: Avenir; // Fallback for Avenir Next
+$calcite-font-family-avenir-next: "Avenir Next"; // Primary font family
 $calcite-font-family-avenir-next-world: "Avenir Next World";
 $calcite-font-family-avenir-next-pro: "Avenir Next LT Pro";
 $calcite-font-family-andale-mono: "Andale Mono"; // Fallback for Monaco
@@ -2035,8 +2039,7 @@ $calcite-font-weight-normal: 400; // For backwards compatibility only. This toke
 $calcite-font-weight-light: 300; // For Avenir Next World (secondary font family)
 $calcite-font-family-code: Monaco, Consolas, "Andale Mono", "Lucida Console",
   monospace; // Font family for code with fallbacks
-$calcite-font-family: "Avenir Next World", "Avenir Next LT Pro", Avenir,
-  "Helvetica Neue", sans-serif; // Primary font with fallbacks
+$calcite-font-family: "Avenir Next", Avenir, "Helvetica Neue", sans-serif; // Primary font with fallbacks
 $calcite-corner-radius-pill: 100%;
 $calcite-corner-radius-round: 4px;
 $calcite-corner-radius-sharp: 0;

From 6e2a4c2c4d54b2e0450cd5ea6ca1a0fd2f85296c Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Thu, 21 Mar 2024 11:20:50 -0700
Subject: [PATCH 15/19] chore(font): add description to font tokens

---
 packages/calcite-design-tokens/src/core/font.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-design-tokens/src/core/font.json b/packages/calcite-design-tokens/src/core/font.json
index dd9781e2a44..ec9901606bc 100644
--- a/packages/calcite-design-tokens/src/core/font.json
+++ b/packages/calcite-design-tokens/src/core/font.json
@@ -78,7 +78,7 @@
         "avenirNext": {
           "value": "Avenir Next",
           "type": "fontFamilies",
-          "description": "Fallback for Avenir Next",
+          "description": "Primary font family",
           "attributes": {
             "calcite-schema": {
               "system": "calcite",

From 0b3da78f28cc9c8a8cde0c66d31ba4a7c8706d58 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Thu, 21 Mar 2024 11:21:05 -0700
Subject: [PATCH 16/19] fix(font): update default font family fallbacks

---
 packages/calcite-design-tokens/src/semantic/font.json | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/calcite-design-tokens/src/semantic/font.json b/packages/calcite-design-tokens/src/semantic/font.json
index f0746461f68..d96c0982d8f 100644
--- a/packages/calcite-design-tokens/src/semantic/font.json
+++ b/packages/calcite-design-tokens/src/semantic/font.json
@@ -4,8 +4,6 @@
       "family": {
         "default": {
           "value": [
-            "{core.font.family.avenirNextWorld}",
-            "{core.font.family.avenirNextPro}",
             "{core.font.family.avenirNext}",
             "{core.font.family.avenir}",
             "{core.font.family.helveticaNeue}",

From 25f6cbbd68f6ec1f8f41317dbd8cb56267d1ddf5 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Thu, 21 Mar 2024 12:55:54 -0700
Subject: [PATCH 17/19] fix(text-area): add back font-sans

---
 .../src/components/text-area/text-area.scss   | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/calcite-components/src/components/text-area/text-area.scss b/packages/calcite-components/src/components/text-area/text-area.scss
index 385d0acf92f..a0ea9259bde 100644
--- a/packages/calcite-components/src/components/text-area/text-area.scss
+++ b/packages/calcite-components/src/components/text-area/text-area.scss
@@ -6,15 +6,16 @@
 }
 
 textarea {
-  @apply text-color-1
-  relative
-  block
-  bg-foreground-1
-  box-border
-  border-color-input
-  border
-  w-full
-  m-0;
+  @apply font-sans
+    text-color-1
+    relative
+    block
+    bg-foreground-1
+    box-border
+    border-color-input
+    border
+    w-full
+    m-0;
   min-inline-size: theme("spacing.48");
   border-block-end: 1px solid var(--calcite-color-border-3);
   @media screen and (max-width: 480px) {

From 1b0bf226b29a8f272a62055fba1a8d2d5a41a6a0 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Thu, 21 Mar 2024 12:56:11 -0700
Subject: [PATCH 18/19] fix(list-area): add back missing styles

---
 .../src/components/list-item/list-item.scss   | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/calcite-components/src/components/list-item/list-item.scss b/packages/calcite-components/src/components/list-item/list-item.scss
index c1f7e585f74..387014661a1 100755
--- a/packages/calcite-components/src/components/list-item/list-item.scss
+++ b/packages/calcite-components/src/components/list-item/list-item.scss
@@ -89,6 +89,15 @@ td:focus {
     py-2;
 }
 
+.label,
+.description,
+.content-bottom {
+  @apply text-n2 word-break font-sans font-normal;
+  &:only-child {
+    @apply m-0 py-1;
+  }
+}
+
 .label {
   @apply text-color-1;
 }
@@ -122,6 +131,13 @@ td:focus {
   }
 }
 
+.content-bottom {
+  @apply bg-foreground-1 flex flex-col;
+  padding-inline-start: calc(
+    var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier)
+  );
+}
+
 .content-container--has-center-content .content-start,
 .content-container--has-center-content .content-end {
   @apply flex-initial;
@@ -190,13 +206,4 @@ td:focus {
   @apply py-3;
 }
 
-.label,
-.description,
-.content-bottom {
-  &:only-child {
-    margin: 0px;
-    padding-block: 0.25rem;
-  }
-}
-
 @include base-component();

From aa0099cd5f556f3d4fa7d3bf69c2f7baf833eae1 Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Thu, 21 Mar 2024 12:56:23 -0700
Subject: [PATCH 19/19] fix(block-section): add back font-sans

---
 .../src/components/block-section/block-section.scss            | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/block-section/block-section.scss b/packages/calcite-components/src/components/block-section/block-section.scss
index 162cf30d80a..74aafa8ce11 100644
--- a/packages/calcite-components/src/components/block-section/block-section.scss
+++ b/packages/calcite-components/src/components/block-section/block-section.scss
@@ -18,7 +18,8 @@
 }
 
 .toggle {
-  @apply text-color-2
+  @apply font-sans
+    text-color-2
     w-full
     border-0
     bg-transparent