From fca6e875a23715e9ec6b0170fbf151a36d6cd83c Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Thu, 14 Nov 2024 10:31:55 +0100
Subject: [PATCH] UI/typograhy: init typography extension

---
 pkgs/webview-ui/.gitignore                    |  1 +
 .../app/src/components/TextInput.tsx          |  3 +--
 pkgs/webview-ui/app/src/index.css             | 18 +++++++++++++++++
 pkgs/webview-ui/app/src/layout/layout.tsx     |  2 +-
 ...{tailwind.config.js => tailwind.config.ts} | 14 ++++++++-----
 pkgs/webview-ui/app/tailwind/core-plugin.ts   | 20 +++++++++++++++++++
 pkgs/webview-ui/app/tailwind/typography.ts    | 19 ++++++++++++++++++
 pkgs/webview-ui/flake-module.nix              |  3 +++
 8 files changed, 72 insertions(+), 8 deletions(-)
 rename pkgs/webview-ui/app/{tailwind.config.js => tailwind.config.ts} (60%)
 create mode 100644 pkgs/webview-ui/app/tailwind/core-plugin.ts
 create mode 100644 pkgs/webview-ui/app/tailwind/typography.ts

diff --git a/pkgs/webview-ui/.gitignore b/pkgs/webview-ui/.gitignore
index 9a800f70d..5eeb7ff46 100644
--- a/pkgs/webview-ui/.gitignore
+++ b/pkgs/webview-ui/.gitignore
@@ -1,3 +1,4 @@
 app/api
+app/.fonts
 
 .vite
\ No newline at end of file
diff --git a/pkgs/webview-ui/app/src/components/TextInput.tsx b/pkgs/webview-ui/app/src/components/TextInput.tsx
index a73ef02c9..32637e2b6 100644
--- a/pkgs/webview-ui/app/src/components/TextInput.tsx
+++ b/pkgs/webview-ui/app/src/components/TextInput.tsx
@@ -1,7 +1,6 @@
 import { FieldValues, FormStore, ResponseData } from "@modular-forms/solid";
-import { createEffect, Show, type JSX } from "solid-js";
+import { Show, type JSX } from "solid-js";
 import cx from "classnames";
-import { createECDH } from "crypto";
 
 interface TextInputProps<T extends FieldValues, R extends ResponseData> {
   formStore: FormStore<T, R>;
diff --git a/pkgs/webview-ui/app/src/index.css b/pkgs/webview-ui/app/src/index.css
index 31e7c33b8..facc03672 100644
--- a/pkgs/webview-ui/app/src/index.css
+++ b/pkgs/webview-ui/app/src/index.css
@@ -1,10 +1,28 @@
 @import "material-icons/iconfont/filled.css";
 /* List of icons: https://marella.me/material-icons/demo/ */
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: "Archivo";
+  font-weight: 400;
+  src: url(../.fonts/Archiv0-Regular.otf) format("opentype");
+}
+@font-face {
+  font-family: "Archivo";
+  font-weight: 500;
+  src: url(../.fonts/Archiv0-Medium.otf) format("opentype");
+}
+@font-face {
+  font-family: "Archivo";
+  font-weight: 600;
+  src: url(../.fonts/Archiv0-Bold.otf) format("opentype");
+}
+
 html {
+  @apply font-sans;
   overflow-x: hidden;
   overflow-y: scroll;
 }
diff --git a/pkgs/webview-ui/app/src/layout/layout.tsx b/pkgs/webview-ui/app/src/layout/layout.tsx
index bd9ff86bc..17160c61b 100644
--- a/pkgs/webview-ui/app/src/layout/layout.tsx
+++ b/pkgs/webview-ui/app/src/layout/layout.tsx
@@ -17,7 +17,7 @@ export const Layout: Component<RouteSectionProps> = (props) => {
     }
   });
   return (
-    <div class="h-screen bg-gradient-to-b from-white to-base-100 p-4">
+    <div class="h-screen bg-base-100 p-4">
       <div class="drawer lg:drawer-open ">
         <input
           id="toplevel-drawer"
diff --git a/pkgs/webview-ui/app/tailwind.config.js b/pkgs/webview-ui/app/tailwind.config.ts
similarity index 60%
rename from pkgs/webview-ui/app/tailwind.config.js
rename to pkgs/webview-ui/app/tailwind.config.ts
index f05b197fe..e7285b0e7 100644
--- a/pkgs/webview-ui/app/tailwind.config.js
+++ b/pkgs/webview-ui/app/tailwind.config.ts
@@ -1,8 +1,9 @@
-const typography = require("@tailwindcss/typography");
-const daisyui = require("daisyui");
+import typography from "@tailwindcss/typography";
+import daisyui from "daisyui";
+import core from "./tailwind/core-plugin";
 
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+const config = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
     extend: {},
@@ -18,10 +19,13 @@ module.exports = {
           error: "#ff2c78",
           success: "#0ae856",
           warning: "#ffdd2c",
-          "base-100": "#d1dadb",
+          "base-100": "#F7F9FA",
+          "base-content": "#0D1416",
         },
       },
     ],
   },
-  plugins: [typography, daisyui],
+  plugins: [typography, daisyui, core],
 };
+
+export default config;
diff --git a/pkgs/webview-ui/app/tailwind/core-plugin.ts b/pkgs/webview-ui/app/tailwind/core-plugin.ts
new file mode 100644
index 000000000..df071cb16
--- /dev/null
+++ b/pkgs/webview-ui/app/tailwind/core-plugin.ts
@@ -0,0 +1,20 @@
+import plugin from "tailwindcss/plugin";
+import { typography } from "./typography";
+import theme from "tailwindcss/defaultTheme";
+
+export default plugin.withOptions(
+  (_options = {}) =>
+    () => {
+      // add more base styles
+    },
+  // add configuration which is merged with the final config
+  () => ({
+    corePlugins: {
+      // we are using our own preflight (see above)
+      preflight: false,
+    },
+    theme: {
+      ...typography,
+    },
+  }),
+);
diff --git a/pkgs/webview-ui/app/tailwind/typography.ts b/pkgs/webview-ui/app/tailwind/typography.ts
new file mode 100644
index 000000000..332422e2d
--- /dev/null
+++ b/pkgs/webview-ui/app/tailwind/typography.ts
@@ -0,0 +1,19 @@
+import defaultTheme from "tailwindcss/defaultTheme";
+import type { Config } from "tailwindcss";
+
+export const typography: Partial<Config["theme"]> = {
+  fontFamily: {
+    sans: ["Archivo", ...defaultTheme.fontFamily.sans],
+  },
+  fontSize: {
+    ...defaultTheme.fontSize,
+    title: ["1.125rem", { lineHeight: "124%" }],
+    "title-m": ["1.25rem", { lineHeight: "124%" }],
+    "title-l": ["1.375rem", { lineHeight: "124%" }],
+  },
+  // textColor: {
+  //   ...defaultTheme.textColor,
+  //   primary: "#0D1416",
+  //   secondary: "#2C4347",
+  // },
+} as const;
diff --git a/pkgs/webview-ui/flake-module.nix b/pkgs/webview-ui/flake-module.nix
index 6791f5304..5e4dd1e79 100644
--- a/pkgs/webview-ui/flake-module.nix
+++ b/pkgs/webview-ui/flake-module.nix
@@ -20,6 +20,7 @@
         preBuild = ''
           mkdir -p api
           cp -r ${config.packages.clan-ts-api}/* api
+          cp -r ${pkgs.texlivePackages.archivo.tex}/fonts/opentype/public/archivo ".fonts"
         '';
       };
       devShells.webview-ui = pkgs.mkShell {
@@ -33,6 +34,8 @@
           export NODE_PATH="$PKG_ROOT/app/node_modules"
           export PATH="$NODE_PATH/.bin:$PATH"
 
+          cp -r ${pkgs.texlivePackages.archivo.tex}/fonts/opentype/public/archivo "$PKG_ROOT/app/.fonts"
+
           # Define the yellow color code
           YELLOW='\033[1;33m'
           # Define the reset color code