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

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
- The variables when being generated from the tokens were causing the
fallback to `$ion-font-family` to be with invalid format:
    ```
    $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
    );
    ```
- Additionally the command to generate the css from the tokens, was not
prepared to run on windows machines.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removed the added quotes to the variable coming from the tokens:
    ```
    $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"
   );
    ```
- Changed the command `build.tokens` to run on windows
- Generated a new version of `ionic.vars.scss`

## Does this introduce a breaking change?
- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

## Other information
N/A
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

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);