fix: fix invalid font stacks (#8964)

**Related Issue:** #8963 ## Summary Generated font-stack values are now comma-delimited according to the [`font-family` spec](https://drafts.csswg.org/css-fonts/#font-family-prop): > Component values are a comma-separated list indicating alternatives.
Esri · Mar 19, 2024 · d55186a · d55186a
1 parent b918782
commit d55186a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 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
@@ -445,10 +445,10 @@ exports[`generated tokens CSS global should match 1`] = `
   --calcite-font-weight-regular: 400;
   --calcite-font-weight-normal: 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" */
   --calcite-font-weight-light: 300; /* For Avenir Next World (secondary font family) */
-  --calcite-font-family-code: Monaco Consolas "Andale Mono" "Lucida Console"
+  --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 World", "Avenir Next LT Pro", Avenir,
+    "Helvetica Neue", sans-serif; /* Primary font with fallbacks */
   --calcite-corner-radius-pill: 100%;
   --calcite-corner-radius-round: 4px;
   --calcite-corner-radius-sharp: 0;
@@ -2033,10 +2033,10 @@ $calcite-font-weight-medium: 500;
 $calcite-font-weight-regular: 400;
 $calcite-font-weight-normal: 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"
 $calcite-font-weight-light: 300; // For Avenir Next World (secondary font family)
-$calcite-font-family-code: Monaco Consolas "Andale Mono" "Lucida Console"
+$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 World", "Avenir Next LT Pro", Avenir,
+  "Helvetica Neue", sans-serif; // Primary font with fallbacks
 $calcite-corner-radius-pill: 100%;
 $calcite-corner-radius-round: 4px;
 $calcite-corner-radius-sharp: 0;

diff --git a/...s/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts b/...s/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts
@@ -14,7 +14,7 @@ type FontFamilyFallbackToken = TransformedToken & { value: string[] };
 export const transformValuesFontFamilyWithFallbacks: CalledTransformerFunction<string> = (
   token: FontFamilyFallbackToken,
 ) => {
-  return token.value.join(" ");
+  return token.value.join(",");
 };
 
 export const registerValueFontFamilyWithFallbacks = (sd: StyleDictionary): void => {