Feature/variable font (#175)

.changeset/tame-schools-count.md

@@ -0,0 +1,8 @@
+---
+"@hopper-ui/tokens": minor
+---
+
+# Font Tokens
+
+- Swapped referenced token fonts for variable fonts.
+- Woff2 are now the defacto font extension.

apps/docs/app/playground/typography/page.tsx

@@ -3,18 +3,58 @@
 import "./typo.css";
 
 export default function CodeBlockPage() {
-    return <main data-font="cdn" className="hd-wrapper">
-        <h1>Building the future with Hopper: Our Design System</h1>
-        <h2>Building the future with Hopper: Our Design System</h2>
-        <h3>Building the future with Hopper: Our Design System</h3>
-        <h4>Building the future with Hopper: Our Design System</h4>
-        <h5>Building the future with Hopper: Our Design System</h5>
-        <p>
+    return (
+        <>
+            <main data-font="cdn" className="hd-wrapper">
+                <h5>ABC Favorit Variable</h5>
+                <div className="font-sample favorit">
+                    <h1>Building the future with Hopper: Our Design System</h1>
+                    <h2>Building the future with Hopper: Our Design System</h2>
+                    <h3>Building the future with Hopper: Our Design System</h3>
+                    <h4>Building the future with Hopper: Our Design System</h4>
+                    <h5>Building the future with Hopper: Our Design System</h5>
+                    <p>
             Hopper, our Design System, is the cornerstone of our development approach. Designed to deliver a seamless
             and efficient user experience, Hopper provides a comprehensive library of consistent components, icons and
             styles. By integrating Hopper into our projects, we are committed to maintaining a unified visual design,
             optimal accessibility and uncompromising scalability. Building with Hopper means building with consistency,
             simplicity and excellence.
-        </p>
-    </main>;
+                    </p>
+                    <span className="number">0123456789</span>
+                </div>
+                <h5>Inter Variable</h5>
+                <div className="font-sample inter">
+                    <h1>Building the future with Hopper: Our Design System</h1>
+                    <h2>Building the future with Hopper: Our Design System</h2>
+                    <h3>Building the future with Hopper: Our Design System</h3>
+                    <h4>Building the future with Hopper: Our Design System</h4>
+                    <h5>Building the future with Hopper: Our Design System</h5>
+                    <p>
+            Hopper, our Design System, is the cornerstone of our development approach. Designed to deliver a seamless
+            and efficient user experience, Hopper provides a comprehensive library of consistent components, icons and
+            styles. By integrating Hopper into our projects, we are committed to maintaining a unified visual design,
+            optimal accessibility and uncompromising scalability. Building with Hopper means building with consistency,
+            simplicity and excellence.
+                    </p>
+                    <span className="number">0123456789</span>
+                </div>
+                <h5>ABC Favorit Mono</h5>
+                <div className="font-sample favorit-mono">
+                    <h1>Building the future with Hopper: Our Design System</h1>
+                    <h2>Building the future with Hopper: Our Design System</h2>
+                    <h3>Building the future with Hopper: Our Design System</h3>
+                    <h4>Building the future with Hopper: Our Design System</h4>
+                    <h5>Building the future with Hopper: Our Design System</h5>
+                    <p>
+            Hopper, our Design System, is the cornerstone of our development approach. Designed to deliver a seamless
+            and efficient user experience, Hopper provides a comprehensive library of consistent components, icons and
+            styles. By integrating Hopper into our projects, we are committed to maintaining a unified visual design,
+            optimal accessibility and uncompromising scalability. Building with Hopper means building with consistency,
+            simplicity and excellence.
+                    </p>
+                    <span className="number">0123456789</span>
+                </div>
+            </main>
+        </>
+    );
 }

apps/docs/app/playground/typography/typo.css

@@ -1,17 +1,33 @@
-@font-face {
-    font-family: "ABC Favorit";
-    font-style: normal;
+[data-font="cdn"] div.favorit {
+    font-family: "ABC Favorit", sans-serif;
     font-weight: 410;
-    src: url("https://cdn.platform.workleap-dev.com/hopper/fonts/ABCFavorit-Regular.otf") format("opentype");
-    font-display: fallback;
+    font-style: normal;
+    color: var(--hd-color-neutral-text);
+    line-height: 1.5;
 }
 
+[data-font="cdn"] div.favorit-mono {
+    font-family: "ABC Favorit Mono", monospace;
+    font-weight: 400;
+    font-style: normal;
+    color: var(--hd-color-neutral-text);
+    line-height: 1.5;
+}
 
-[data-font="cdn"] {
-    font-family: "ABC Favorit", sans-serif;
+[data-font="cdn"] div.inter {
+    font-family: Inter, sans-serif;
     font-weight: 410;
     font-style: normal;
-    color: #1c1b1b;
+    color: var(--hd-color-neutral-text);
     line-height: 1.5;
 }
 
+.font-sample {
+    margin-bottom: 4rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid;
+}
+
+.number {
+    font-size: 1.5rem;
+}

apps/docs/components/preview/FontWeightPreview.tsx

@@ -15,4 +15,3 @@ const FontWeightPreview = ({ values, style }: FontWeightPreviewProps) => {
 };
 
 export default FontWeightPreview;
-

apps/docs/components/preview/TypographyPreview.tsx

@@ -1,5 +1,5 @@
-import "@hopper-ui/tokens/fonts.css";
 import "./preview.css";
+import "@hopper-ui/tokens/fonts.css";
 
 interface TypographyPreviewProps {
     values?: TypographyValues;
@@ -18,4 +18,3 @@ const TypographyPreview = ({ values, style }: TypographyPreviewProps) => {
 };
 
 export default TypographyPreview;
-

apps/docs/components/preview/preview.css

@@ -1,5 +1,5 @@
 .hd-preview {
-    font-family: "ABC Favorit", Inter, sans-serif;
+    font-family: Inter, sans-serif;
     width: var(--hd-space-5);
     height: var(--hd-space-3);
     border-radius: 0;

apps/docs/content/tokens/getting-started/usage.mdx

@@ -42,6 +42,8 @@ Font-face declarations are now imported in your project.
 
 Failing to do so would prevent you from using font family tokens such as `var(--hop-font-family-primary)`.
 
+*Inter* and *ABC Favorit* variable fonts are used. This allows for a more efficient use of font files, only one font is loaded per typeface, covering all font-weights. Resulting in a smaller bundle size for all.
+
 ## Styled System
 
 We will be releasing a styled system package inspired by styled-components that will allow you to use these tokens as Javascript props at a later time.

apps/docs/contentlayer.config.js

@@ -156,7 +156,6 @@ const rehypeOptions = {
             node.properties["data-word-id"] = id;
         }
     }
-
 };
 
 export default makeSource({

packages/tokens/src/style-dictionary/config.ts

@@ -23,8 +23,7 @@ export const fontsConfig: Config = {
                         }
                     }
                 }
-            ],
-            "actions": ["copy_assets"]
+            ]
         }
     }
 };

packages/tokens/src/style-dictionary/format/font-face.ts

@@ -7,6 +7,7 @@ export function fontFace ({ dictionary, options }: { dictionary: Dictionary; opt
     // https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src
     const formatsMap: { [i: string]: string } = {
         "woff2": "woff2",
+        "woff2-variations": "woff2-variations",
         "woff": "woff",
         "ttf": "truetype",
         "otf": "opentype",
@@ -22,7 +23,7 @@ export function fontFace ({ dictionary, options }: { dictionary: Dictionary; opt
         } = prop;
 
         const urls = formats
-            .map((extension: string) => `url("${fontPathPrefix}${path}.${extension}") format("${formatsMap[extension]}")`);
+            .map((extension: string) => `url("${fontPathPrefix}${path}") format("${formatsMap[extension]}")`);
 
         const fontCss = [
             "@font-face {",

packages/tokens/src/tokens/asset/fonts.tokens.json

@@ -3,45 +3,25 @@
         "font": {
             "Inter": {
                 "normal": {
-                    "410": {
-                        "value": "assets/fonts/Inter-Regular",
-                        "formats": ["woff2"]
-                    },
-                    "505": {
-                        "value": "assets/fonts/Inter-Medium",
-                        "formats": ["woff2"]
-                    },
-                    "590": {
-                        "value": "assets/fonts/Inter-SemiBold",
-                        "formats": ["woff2"]
-                    },
-                    "690": {
-                        "value": "assets/fonts/Inter-Bold",
-                        "formats": ["woff2"]
+                    "100 900": {
+                        "value": "https://cdn.platform.workleap.com/hopper/fonts/inter/v4/InterVariable.woff2",
+                        "formats": ["woff2-variations"]
                     }
                 }
             },
             "ABC Favorit Mono": {
                 "normal": {
                     "400": {
-                        "value": "assets/fonts/ABCFavoritMono-Regular",
-                        "formats": ["woff2"]
+                        "value": "https://cdn.platform.workleap.com/hopper/fonts/abc-favorit/mono/ABCFavoritMono-Regular.woff2",
+                        "formats": ["woff2-variations"]
                     }
                 }
             },
             "ABC Favorit": {
                 "normal": {
-                    "410": {
-                        "value": "assets/fonts/ABCFavorit-Regular",
-                        "formats": ["woff2"]
-                    },
-                    "580": {
-                        "value": "assets/fonts/ABCFavorit-Medium",
-                        "formats": ["woff2"]
-                    },
-                    "680": {
-                        "value": "assets/fonts/ABCFavorit-Bold",
-                        "formats": ["woff2"]
+                    "100 900": {
+                        "value": "https://cdn.platform.workleap.com/hopper/fonts/abc-favorit/ABCFavoritVariable.woff2",
+                        "formats": ["woff2-variations"]
                     }
                 }
             }