Use custom font

astral-sh · Jul 19, 2023 · 6e1b1c0 · 6e1b1c0
1 parent 37e3b69
commit 6e1b1c0
Show file tree

Hide file tree

Showing 16 changed files with 100 additions and 8 deletions.
diff --git a/playground/index.html b/playground/index.html
@@ -26,7 +26,6 @@
     <meta property="og:image" content="/Ruff.png" />
     <link rel="canonical" href="https://play.ruff.rs" />
     <link rel="icon" href="/favicon.ico" />
-    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
     <script
       src="https://cdn.usefathom.com/script.js"
       data-site="XWUDIXNB"

diff --git a/playground/public/fonts/Alliance-PlattMedium.otf b/playground/public/fonts/Alliance-PlattMedium.otf
diff --git a/playground/public/fonts/Alliance-PlattMedium.woff b/playground/public/fonts/Alliance-PlattMedium.woff
diff --git a/playground/public/fonts/Alliance-PlattMedium.woff2 b/playground/public/fonts/Alliance-PlattMedium.woff2
diff --git a/playground/public/fonts/Alliance-PlattRegular.otf b/playground/public/fonts/Alliance-PlattRegular.otf
diff --git a/playground/public/fonts/Alliance-PlattRegular.woff b/playground/public/fonts/Alliance-PlattRegular.woff
diff --git a/playground/public/fonts/Alliance-PlattRegular.woff2 b/playground/public/fonts/Alliance-PlattRegular.woff2
diff --git a/playground/public/fonts/Alliance-TextMedium.otf b/playground/public/fonts/Alliance-TextMedium.otf
diff --git a/playground/public/fonts/Alliance-TextMedium.woff b/playground/public/fonts/Alliance-TextMedium.woff
diff --git a/playground/public/fonts/Alliance-TextMedium.woff2 b/playground/public/fonts/Alliance-TextMedium.woff2
diff --git a/playground/public/fonts/Alliance-TextRegular.otf b/playground/public/fonts/Alliance-TextRegular.otf
diff --git a/playground/public/fonts/Alliance-TextRegular.woff b/playground/public/fonts/Alliance-TextRegular.woff
diff --git a/playground/public/fonts/Alliance-TextRegular.woff2 b/playground/public/fonts/Alliance-TextRegular.woff2
diff --git a/playground/src/Editor/AstralButton.tsx b/playground/src/Editor/AstralButton.tsx
@@ -9,16 +9,21 @@ export default function AstralButton({
   return (
     <button
       className={classNames(
+        "uppercase",
+        "ease-in-out",
+        "font-heading",
+        "transition-all duration-200",
         "bg-radiate",
         "text-black",
-        "hover:text-radiate",
+        "hover:text-white",
         "hover:bg-galaxy",
         "outline-1",
         "dark:outline",
-        "dark:hover:outline-radiate",
+        "dark:hover:outline-white",
         "rounded-md",
+        "tracking-[.08em]",
         "text-sm",
-        "font-semibold",
+        "font-medium",
         "enabled:hover:bg-galaxy",
         className,
       )}

diff --git a/playground/src/index.css b/playground/src/index.css
@@ -12,6 +12,8 @@ html,
   margin: 0;
   height: 100%;
   width: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 .shadow-copied {
@@ -23,3 +25,39 @@ html,
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
     var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
+@font-face {
+  font-family: "Alliance Text";
+  src: url("../public/fonts/Alliance-TextRegular.woff2") format("woff2"),
+  url("../public/fonts/Alliance-TextRegular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: "Alliance Text";
+  src: url("../public/fonts/Alliance-TextMedium.woff2") format("woff2"),
+  url("../public/fonts/Alliance-TextMedium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: "Alliance Platt";
+  src: url("../public/fonts/Alliance-PlattMedium.woff2") format("woff2"),
+  url("../public/fonts/Alliance-PlattMedium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: "Alliance Platt";
+  src: url("../public/fonts/Alliance-PlattRegular.woff2") format("woff2"),
+  url("../public/fonts/Alliance-PlattRegular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
diff --git a/playground/tailwind.config.cjs b/playground/tailwind.config.cjs
@@ -12,15 +12,65 @@ module.exports = {
           DEFAULT: "#f8f9fa",
           dark: "#0b0e14",
         },
+        black: "#261230",
+        white: "#FFFFFF",
+        radiate: "#D7FF64",
+        flare: "#6340AC",
+        rock: "#78876E",
         galaxy: "#261230",
         space: "#30173D",
-        starlight: "#F4F4F1",
+        comet: "#6F5D6F",
+        cosmic: "#DE5FE9",
+        sun: "#FFAC2F",
+        electron: "#46EBE1",
+        aurora: "#46EB74",
+        constellation: "#5F6DE9",
+        neutron: "#CFF3CF",
+        proton: "#F6AFBC",
         nebula: "#CDCBFB",
-        rock: "#78876E",
-        radiate: "#D7FF64",
+        supernova: "#F1AFF6",
+        starlight: "#F4F4F1",
+        lunar: "#FBF2FC",
+        asteroid: "#E3CEE3",
+        crater: "#F0DFDF",
       },
       fontFamily: {
-        sans: ["Inter var", ...defaultTheme.fontFamily.sans],
+        heading: [
+          "Alliance Platt",
+          "system-ui",
+          "-apple-system",
+          "Segoe UI",
+          "Roboto",
+          "Helvetica",
+          "Arial",
+          "monospace",
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+        ],
+        body: [
+          "Alliance Text",
+          "system-ui",
+          "-apple-system",
+          "Segoe UI",
+          "Roboto",
+          "Helvetica",
+          "Arial",
+          "sans-serif",
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+        ],
+        mono: ["Roboto Mono"],
+      },
+      fontSize: {
+        xs: "0.75rem" /* 12px */,
+        sm: "0.875rem" /* 14px */,
+        base: "1rem" /* 16px */,
+        lg: "1.125rem" /* 18px */,
+        xl: "1.25rem" /* 20px */,
+        "2xl": "1.5rem" /* 25px */,
+        "3xl": "1.875rem" /* 30px */,
+        "4xl": "2.25rem" /* 36px */,
+        "5xl": "3rem" /* 48px */,
       },
     },
   },