Feature/font fallback (#183)

gsoft-inc · Mar 13, 2024 · 3f0b9be · 3f0b9be
2 parents 54f9446 + 73a19a1
commit 3f0b9be
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 50 deletions.
diff --git a/.changeset/long-pens-punch.md b/.changeset/long-pens-punch.md
@@ -0,0 +1,6 @@
+---
+"@hopper-ui/styled-system": minor
+"@hopper-ui/tokens": minor
+---
+
+Added font fallback to font tokens
diff --git a/apps/docs/components/copyButton/CopyButton.tsx b/apps/docs/components/copyButton/CopyButton.tsx
@@ -10,6 +10,7 @@ import "./copyButton.css";
 interface CopyButtonProps {
     variant?: "default" | "inline" | "ghost";
     text: string;
+    onDark?: boolean;
     className?: string;
     onCopy?: () => void;
     copyMessage?: string;
@@ -20,11 +21,12 @@ const CopiedSvg = <svg width="24" height="24" className="hd-copy-button__icon" f
 const CopySvg = <svg width="16" height="16" className="hd-copy-button__icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.3333 6H7.33333C6.59695 6 6 6.59695 6 7.33333V13.3333C6 14.0697 6.59695 14.6667 7.33333 14.6667H13.3333C14.0697 14.6667 14.6667 14.0697 14.6667 13.3333V7.33333C14.6667 6.59695 14.0697 6 13.3333 6Z" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /><path d="M3.33337 9.99992H2.66671C2.31309 9.99992 1.97395 9.85944 1.7239 9.60939C1.47385 9.35935 1.33337 9.02021 1.33337 8.66659V2.66659C1.33337 2.31296 1.47385 1.97382 1.7239 1.72378C1.97395 1.47373 2.31309 1.33325 2.66671 1.33325H8.66671C9.02033 1.33325 9.35947 1.47373 9.60952 1.72378C9.85956 1.97382 10 2.31296 10 2.66659V3.33325" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>;
 
 const CopyButton = (
-    { text, className, children, onCopy, variant = "default", copyMessage = "Copied!", ...rest }: React.PropsWithChildren<CopyButtonProps>) => {
+    { text, className, children, onCopy, variant = "default", onDark, copyMessage = "Copied!", ...rest }: React.PropsWithChildren<CopyButtonProps>) => {
     const [isCopied, setIsCopied] = React.useState(false);
 
     const classes = clsx("hd-copy-button", {
-        [`hd-copy-button--${variant}`]: variant !== "default"
+        [`hd-copy-button--${variant}`]: variant !== "default",
+        "hd-copy-button--on-dark": onDark === true
     }, className);
 
     const copy = async () => {

diff --git a/apps/docs/components/copyButton/copyButton.css b/apps/docs/components/copyButton/copyButton.css
@@ -14,6 +14,10 @@
     background-color: var(--hd-color-neutral-surface-weak);
 }
 
+.hd-copy-button.hd-copy-button--on-dark:not([disabled]):hover {
+    background-color: var(--hd-neutral-800);
+}
+
 .hd-copy-button__icon {
     stroke: currentcolor;
 }
@@ -34,3 +38,7 @@
 .hd-copy-button--ghost:not([disabled]):hover {
     background-color: transparent;
 }
+
+.hd-copy-button--on-dark {
+    color: #FFFFFF;
+}
diff --git a/apps/docs/components/ui/pre/Pre.tsx b/apps/docs/components/ui/pre/Pre.tsx
@@ -30,7 +30,7 @@ const Pre = ({ children, title, "data-language": dataLanguage, raw, ...props }:
     );
 
     const titleContent = <span className="hd-pre-header__title">{title}</span>;
-    const copyButton = raw && <CopyButton text={raw} />;
+    const copyButton = raw && <CopyButton onDark text={raw} />;
 
     return (
         <pre {...props} className={classes}>

diff --git a/apps/docs/components/ui/table/TypographyTable.tsx b/apps/docs/components/ui/table/TypographyTable.tsx
@@ -147,7 +147,7 @@ const TypographyTable = ({ type, data }: TypographyTableProps) => {
                     <td className="hd-table__cell hd-typo__cell">
                         <Code value={`--hop-${type}${displaySize}-font-family`}>{`--hop-${type}${displaySize}-font-family`}</Code>
                     </td>
-                    <td className="hd-table__cell hd-typo__cell">
+                    <td className="hd-table__cell hd-typo__cell hd-typo__cell-font-family">
                         {fontFamily}
                     </td>
                 </tr>

diff --git a/apps/docs/components/ui/table/table.css b/apps/docs/components/ui/table/table.css
@@ -41,6 +41,10 @@
     border-bottom: 0;
 }
 
+.hd-typo__cell-font-family {
+    max-width: 125px;
+}
+
 .hd-top__row .hd-table__cell {
     border-top: var(--hd-border-size) solid var(--hd-color-neutral-border);
 }

diff --git a/apps/docs/datas/tokens-dark.json b/apps/docs/datas/tokens-dark.json
@@ -563,15 +563,15 @@
     "fontFamily": [
       {
         "name": "hop-font-family-primary",
-        "value": "ABC Favorit"
+        "value": "'ABC Favorit', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-font-family-secondary",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-font-family-tertiary",
-        "value": "ABC Favorit Mono"
+        "value": "'ABC Favorit Mono', Consolas, 'SF Mono', monospace"
       }
     ],
     "fontSize": [

diff --git a/apps/docs/datas/tokens.json b/apps/docs/datas/tokens.json
@@ -563,15 +563,15 @@
     "fontFamily": [
       {
         "name": "hop-font-family-primary",
-        "value": "ABC Favorit"
+        "value": "'ABC Favorit', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-font-family-secondary",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-font-family-tertiary",
-        "value": "ABC Favorit Mono"
+        "value": "'ABC Favorit Mono', Consolas, 'SF Mono', monospace"
       }
     ],
     "fontSize": [
@@ -2893,135 +2893,135 @@
     "fontFamily": [
       {
         "name": "hop-heading-3xl-font-family",
-        "value": "ABC Favorit"
+        "value": "'ABC Favorit', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-heading-2xl-font-family",
-        "value": "ABC Favorit"
+        "value": "'ABC Favorit', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-heading-xl-font-family",
-        "value": "ABC Favorit"
+        "value": "'ABC Favorit', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-heading-lg-font-family",
-        "value": "ABC Favorit"
+        "value": "'ABC Favorit', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-heading-md-font-family",
-        "value": "ABC Favorit"
+        "value": "'ABC Favorit', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-heading-sm-font-family",
-        "value": "ABC Favorit"
+        "value": "'ABC Favorit', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-heading-xs-font-family",
-        "value": "ABC Favorit"
+        "value": "'ABC Favorit', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-heading-xs-medium-font-family",
-        "value": "ABC Favorit"
+        "value": "'ABC Favorit', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-overline-font-family",
-        "value": "ABC Favorit Mono"
+        "value": "'ABC Favorit Mono', Consolas, 'SF Mono', monospace"
       },
       {
         "name": "hop-body-2xl-font-family",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-body-xl-font-family",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-body-lg-font-family",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-body-lg-medium-font-family",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-body-lg-semibold-font-family",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-body-lg-bold-font-family",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-body-lg-underline-font-family",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-body-md-font-family",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-body-md-medium-font-family",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-body-md-semibold-font-family",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-body-md-bold-font-family",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-body-md-underline-font-family",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-body-sm-font-family",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-body-sm-medium-font-family",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-body-sm-semibold-font-family",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-body-sm-bold-font-family",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-body-sm-underline-font-family",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-body-xs-font-family",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-body-xs-medium-font-family",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-body-xs-semibold-font-family",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-body-xs-bold-font-family",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-body-xs-underline-font-family",
-        "value": "Inter"
+        "value": "'Inter', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-accent-lg-font-family",
-        "value": "ABC Favorit"
+        "value": "'ABC Favorit', Helvetica, Arial, sans-serif"
       },
       {
         "name": "hop-accent-sm-font-family",
-        "value": "ABC Favorit"
+        "value": "'ABC Favorit', Helvetica, Arial, sans-serif"
       }
     ],
     "fontSize": [
@@ -3535,4 +3535,4 @@
       }
     ]
   }
-}
+}
diff --git a/packages/styled-system/src/tokens/generated/light-semantic-tokens.ts b/packages/styled-system/src/tokens/generated/light-semantic-tokens.ts
@@ -142,9 +142,9 @@ export const CoreTokens = {
     "--hop-shadow-sm": "0 1px 6px 0 rgba(60, 60, 60, 0.10)",
     "--hop-shadow-md": "0 4px 10px 4px rgba(60, 60, 60, 0.08)",
     "--hop-shadow-lg": "0 10px 18px 8px rgba(60, 60, 60, 0.08)",
-    "--hop-font-family-primary": "ABC Favorit",
-    "--hop-font-family-secondary": "Inter",
-    "--hop-font-family-tertiary": "ABC Favorit Mono",
+    "--hop-font-family-primary": "'ABC Favorit', Helvetica, Arial, sans-serif",
+    "--hop-font-family-secondary": "'Inter', Helvetica, Arial, sans-serif",
+    "--hop-font-family-tertiary": "'ABC Favorit Mono', Consolas, 'SF Mono', monospace",
     "--hop-font-size-120": "0.75rem",
     "--hop-font-size-140": "0.875rem",
     "--hop-font-size-160": "1rem",

diff --git a/packages/tokens/src/tokens/core/fonts.tokens.json b/packages/tokens/src/tokens/core/fonts.tokens.json
@@ -3,15 +3,15 @@
         "family": {
             "primary" : {
                 "$type": "fontFamily",
-                "$value": "ABC Favorit"
+                "$value": "'ABC Favorit', Helvetica, Arial, sans-serif"
             },
             "secondary" : {
                 "$type": "fontFamily",
-                "$value": "Inter"
+                "$value": "'Inter', Helvetica, Arial, sans-serif"
             },
             "tertiary" : {
                 "$type": "fontFamily",
-                "$value": "ABC Favorit Mono"
+                "$value": "'ABC Favorit Mono', Consolas, 'SF Mono', monospace"
             }
         },
         "size": {