feat: update global font

config/filters/postcss/utils/font-family.js

@@ -1,22 +1,22 @@
 import path from "path";
 
-import { ASSETS_FONTS_PATH } from "../../../constants/paths.js";
 import fonts from "../../../design-tokens/fonts.js";
 
-const getFontUrl = (src) => path.join(ASSETS_FONTS_PATH, src);
+const getFontUrl = (src) => path.join("/assets/fonts", src);
 
 const fontsToCss = (fonts) => {
   return Object.entries(fonts).reduce((css, [, fontProperties]) => {
     const family = fontProperties.family;
     const format = fontProperties.format;
-    const weights = fontProperties.weights;
+    const styles = fontProperties.styles;
 
     return (
       css +
-      Object.entries(weights).reduce((css, [variant, fontFamily]) => {
+      Object.entries(styles).reduce((css, [variant, fontFamily]) => {
         const url = getFontUrl(fontFamily.path);
-        const style = fontFamily["font-style"];
-        const weight = fontFamily.weight;
+        const style = fontFamily.fontStyle;
+        const weight = fontFamily.fontWeight;
+        const stretch = fontFamily.fontStretch;
         const postScriptName = [family, variant].join("-").replaceAll(" ", "");
 
         return (
@@ -25,6 +25,7 @@ const fontsToCss = (fonts) => {
             family,
             style,
             weight,
+            stretch,
             url,
             family,
             postScriptName,
@@ -40,6 +41,7 @@ const fontFamilyToCss = (
   family,
   style,
   weight,
+  stretch,
   url,
   localName,
   postScriptName,
@@ -48,6 +50,7 @@ const fontFamilyToCss = (
     font-family: ${family};
     font-style: ${style};
     font-weight: ${weight};
+    font-stretch: ${stretch};
     font-display: swap;
     src: local("${localName}"), local("${postScriptName}"), url("${url}") format("${format}")
 }\n`;

config/filters/postcss/utils/font-variables.js

@@ -1,45 +1,57 @@
+/*
+ * Fallbacks from Modern Font Stacks.
+ * https://modernfontstacks.com/
+ */
+
 import fonts from "../../../design-tokens/fonts.js";
 
-const fallbacks = [
-  "-apple-system",
-  "BlinkMacSystemFont",
-  "Segoe UI",
-  "Roboto",
-  "Ubuntu",
-  "Open Sans",
-  "Helvetica Neue",
-  "sans-serif",
+const displayFallbacks = [
+  "ui-monospace",
+  "Cascadia Code",
+  "Source Code Pro",
+  "Menlo",
+  "Consolas",
+  "DejaVu Sans Mono",
+  "monospace",
 ];
 
+const bodyFallbacks = [
+  "ui-monospace",
+  "Cascadia Code",
+  "Source Code Pro",
+  "Menlo",
+  "Consolas",
+  "DejaVu Sans Mono",
+  "monospace",
+];
+
+const monoFallbacks = [
+  "ui-monospace",
+  "Cascadia Code",
+  "Source Code Pro",
+  "Menlo",
+  "Consolas",
+  "DejaVu Sans Mono",
+  "monospace",
+];
+
+const fallbacks = {
+  display: displayFallbacks,
+  body: bodyFallbacks,
+  monospace: monoFallbacks,
+};
+
 const fontsToCss = (fonts) => {
   return Object.entries(fonts).reduce((css, [fontType, fontProperties]) => {
     const family = fontProperties.family;
-    const weights = fontProperties.weights;
 
     const fontTypeCss = fontFamilyToCss(fontType, family);
-    const fontWeightsCss = fontWeightsToCss(fontType, weights);
 
-    return css + fontTypeCss + fontWeightsCss;
+    return css + fontTypeCss;
   }, ``);
 };
 
-const validVariants = ["regular", "bold", "extrabold"];
-
-const fontWeightsToCss = (type, weights) =>
-  Object.entries(weights)
-    .filter(([variant]) => validVariants.includes(variant.toLowerCase()))
-    .reduce((css, [variant, fontFamily]) => {
-      const weight = fontFamily.weight;
-
-      return css + fontWeightToCss(type, variant.toLowerCase(), weight);
-    }, ``);
-
-const fontWeightToCss = (type, variant, value) =>
-  `--font-weight-${type}-${variant}: ${value};`;
-
 const fontFamilyToCss = (type, value) =>
-  `--font-family-${type}: ${value},${fallbacks.join(",")};`;
+  `--font-family-${type}: ${value},${fallbacks[type].join(",")};`;
 
-const css = `:root{${fontsToCss(fonts)}}`;
-
-export default css;
+export default `:root{${fontsToCss(fonts)}}`;