UI/typograhy: init typography extension

pkgs/webview-ui/.gitignore

@@ -1,3 +1,4 @@
 app/api
+app/.fonts
 
 .vite

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>;

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;
 }

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"

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;

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,
+    },
+  }),
+);

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;

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