fix(font-family): fallback coming from tokens was badly formatted

core/package.json

@@ -80,7 +80,7 @@
     "build.css": "npm run css.sass && npm run css.minify",
     "build.debug": "npm run clean && stencil build --debug",
     "build.docs.json": "stencil build --docs-json dist/docs.json",
-    "build.tokens": "npx build.tokens --config scripts/tokens/index.mjs && npm run prettier.tokens",
+    "build.tokens": "node ./node_modules/outsystems-design-tokens/scripts/index.js --config ./scripts/tokens/index.mjs && npm run prettier.tokens",
     "clean": "node scripts/clean.js",
     "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
     "css.sass": "sass --embed-sources --style compressed src/css:./css",

core/scripts/tokens/index.mjs

@@ -4,7 +4,10 @@
 // - It also works very well out of the box with any kind of Design Tokens formats, like Figma Tokens, as well as APIs to adjust to more custom ones.
 // - It is probably the most well-known and widely used Design Tokens tool. It has also been regularly maintained for a long time.
 // - It can easily scale to different necessities we might have in the future.
+import StyleDictionary from 'style-dictionary';
+
 import * as utils from './utils.mjs';
+
 const {
   generateShadowValue,
   generateFontSizeValue,
@@ -23,7 +26,6 @@ const {
   generateShadowUtilityClasses,
   generateUtilityClasses
 } = utils;
-import StyleDictionary from 'style-dictionary';
 
 const customHeader = `// Do not edit directly, this file was auto-generated.`;
 // Set the prefix for classes

core/scripts/tokens/utils.mjs

@@ -93,8 +93,8 @@ export function generateFontFamilyValue(prop, propName, variableType = 'css') {
   const _propName = propName.split('-').slice(0, -1).join('-');
 
   return variableType === 'scss'
-    ? `$${classAndScssPrefix}-${_propName}: var(--${variablesPrefix}-${_propName}, "${prop.$value}", sans-serif);`
-    : `--${variablesPrefix}-${_propName}: "${prop.$value}", sans-serif;`;
+    ? `$${classAndScssPrefix}-${_propName}: var(--${variablesPrefix}-${_propName}, ${prop.$value});`
+    : `--${variablesPrefix}-${_propName}: ${prop.$value};`;
 }
 
 // Generates a final value, based if the Design Token is of type color or not

core/src/foundations/ionic.vars.scss

@@ -875,9 +875,16 @@ $ion-transition-time-1000: var(--token-transition-time-1000, 1000ms);
 $ion-transition-time-1500: var(--token-transition-time-1500, 1500ms);
 $ion-font-family: var(
   --token-font-family,
-  "-apple-system, system-ui, " Segoe UI ", Roboto, Helvetica, Arial, sans-serif, " Apple Color Emoji ", " Segoe UI Emoji
-    ", " Segoe UI Symbol "",
-  sans-serif
+  -apple-system,
+  system-ui,
+  "Segoe UI",
+  Roboto,
+  Helvetica,
+  Arial,
+  sans-serif,
+  "Apple Color Emoji",
+  "Segoe UI Emoji",
+  "Segoe UI Symbol"
 );
 $ion-font-weight-thin: var(--token-font-weight-thin, 100);
 $ion-font-weight-extra-light: var(--token-font-weight-extra-light, 200);