refactor(ui): replace UnoCSS with a plain CSS stylesheet

.changeset/plain-css-styles.md

@@ -0,0 +1,5 @@
+---
+'@astrobook/ui': patch
+---
+
+Replace UnoCSS with a hand-written stylesheet built on CSS variables.

package.json

@@ -8,7 +8,6 @@
   "license": "MIT",
   "scripts": {
     "dev": "turbo watch --filter example-playground dev",
-    "postinstall": "pnpm --filter=./packages/ui build",
     "build": "turbo run build --concurrency=1",
     "build:package": "turbo build --filter='./packages/*' --concurrency=1",
     "lint": "pnpm lint:eslint && pnpm lint:prettier",

packages/astrobook/lib/pages/app.astro

@@ -2,6 +2,10 @@
 import AppComponent from '@astrobook/ui/components/app.astro'
 import type { GetStaticPathsResult } from 'astro'
 
+// Important that this is the last import, so that the user's CSS comes after
+// every built-in style and can override it.
+import 'virtual:astrobook/user-css.mjs'
+
 export function getStaticPaths(): GetStaticPathsResult {
   return [
     {

packages/astrobook/lib/pages/story.astro

@@ -2,6 +2,10 @@
 import LayoutComponent from '@astrobook/ui/components/layout.astro'
 import type { ComponentProps } from 'astro/types'
 
+// Important that this is the last import, so that the user's CSS comes after
+// every built-in style and can override it.
+import 'virtual:astrobook/user-css.mjs'
+
 type Props = ComponentProps<typeof LayoutComponent>
 ---
 

packages/ui/package.json

@@ -14,15 +14,15 @@
   "bugs": "https://github.com/ocavue/astrobook/issues",
   "keywords": [],
   "sideEffects": false,
-  "main": "./dist/index.ts",
-  "module": "./dist/index.ts",
-  "types": "./dist/index.ts",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
   "exports": {
     ".": {
-      "default": "./dist/index.ts"
+      "default": "./src/index.ts"
     },
     "./components/*": {
-      "default": "./dist/components/*"
+      "default": "./src/components/*"
     },
     "./package.json": {
       "default": "./package.json"
@@ -31,19 +31,16 @@
   "typesVersions": {
     "*": {
       ".": [
-        "./dist/index.ts"
+        "./src/index.ts"
       ],
       "./components/*": [
-        "./dist/components/*"
+        "./src/components/*"
       ]
     }
   },
   "files": [
-    "dist"
+    "src"
   ],
-  "scripts": {
-    "build": "tsx copy.ts src temp && unocss --rewrite && prettier -w temp/style.css && tsx copy.ts temp dist"
-  },
   "dependencies": {
     "@astrobook/core": "workspace:*",
     "@astrobook/types": "workspace:*",
@@ -59,16 +56,9 @@
     }
   },
   "devDependencies": {
-    "@iconify-json/fluent": "^1.2.54",
-    "@iconify-json/lucide": "^1.2.121",
-    "@iconify-json/mdi": "^1.2.3",
     "@types/node": "^22.19.17",
-    "@unocss/cli": "^66.7.5",
     "astro": "^7.2.1",
-    "prettier": "^3.9.6",
-    "tsx": "^4.23.12",
     "typescript": "^6.0.3",
-    "unocss": "^66.7.5",
     "vite": "^8.2.0",
     "vitest": "^4.1.10"
   }

packages/ui/src/components/home.astro

@@ -1,41 +1,34 @@
 ---
 import config from 'virtual:astrobook/global-config.mjs'
 
+import Icon from './icon.astro'
+
 const content = config.homeContent
 const showBadges = !!(content.version || content.repo)
 ---
 
-<div class=":uno: @container h-full w-full">
-  <div
-    class=":uno: box-border flex h-full w-full flex-col items-center justify-center px-4 @xs:px-6"
-  >
+<div class="astrobook-home">
+  <div class="astrobook-home-content">
     {
       content.title == null ? null : (
-        <h1 class=":uno: cursor-default text-center text-sm font-bold tracking-tight text-gray-900 transition @xs:text-3xl @sm:text-5xl dark:text-gray-100">
-          {content.title}
-        </h1>
+        <h1 class="astrobook-home-title">{content.title}</h1>
       )
     }
     {
       content.subtitle == null ? null : (
-        <p class=":uno: mt-3 hidden cursor-default text-center text-lg text-gray-400 transition @sm:block dark:text-gray-500">
-          {content.subtitle}
-        </p>
+        <p class="astrobook-home-subtitle">{content.subtitle}</p>
       )
     }
 
     {
       showBadges && (
-        <div class=":uno: mt-4 flex flex-col gap-2.5 @xs:mt-8 @xs:flex-row @xs:items-center @xs:gap-3">
+        <div class="astrobook-home-badges">
           {content.version && (
             <a
               href={content.version.href}
               target="_blank"
               rel="noopener noreferrer"
-              class:list={[
-                ':uno: font-mono',
-                ':uno: flex items-center justify-center rounded-full border border-solid border-gray-200 px-2.5 py-0.5 text-xs text-gray-500 no-underline transition hover:border-gray-300 hover:text-gray-600 @xs:px-3 @xs:py-1 @xs:text-sm dark:border-gray-700 dark:text-gray-500 dark:hover:border-gray-600 dark:hover:text-gray-300',
-              ]}
+              class="astrobook-badge astrobook-badge-version"
             >
               {content.version.label}
             </a>
@@ -45,12 +38,9 @@ const showBadges = !!(content.version || content.repo)
               href={content.repo.href}
               target="_blank"
               rel="noopener noreferrer"
-              class:list={[
-                ':uno: gap-1.5 font-medium @xs:gap-2',
-                ':uno: flex items-center justify-center rounded-full border border-solid border-gray-200 px-2.5 py-0.5 text-xs text-gray-500 no-underline transition hover:border-gray-300 hover:text-gray-600 @xs:px-3 @xs:py-1 @xs:text-sm dark:border-gray-700 dark:text-gray-500 dark:hover:border-gray-600 dark:hover:text-gray-300',
-              ]}
+              class="astrobook-badge astrobook-badge-repo"
             >
-              <span class=":uno: i-mdi-star-outline inline-block size-3.5 @xs:size-4" />
+              <Icon name="star" />
               <span>{content.repo.label}</span>
             </a>
           )}
@@ -59,3 +49,129 @@ const showBadges = !!(content.version || content.repo)
     }
   </div>
 </div>
+
+<style is:global>
+  .astrobook-home {
+    height: 100%;
+    width: 100%;
+    container-type: inline-size;
+  }
+
+  .astrobook-home-content {
+    box-sizing: border-box;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0 1rem;
+  }
+
+  .astrobook-home-title {
+    cursor: default;
+    text-align: center;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 700;
+    letter-spacing: -0.025em;
+    color: var(--astrobook-color-text);
+    transition: var(--astrobook-transition);
+  }
+
+  .astrobook-home-subtitle {
+    display: none;
+    margin-top: 0.75rem;
+    cursor: default;
+    text-align: center;
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+    color: var(--astrobook-color-text-subtle);
+    transition: var(--astrobook-transition);
+  }
+
+  .astrobook-home-badges {
+    display: flex;
+    margin-top: 1rem;
+    flex-direction: column;
+    gap: 0.625rem;
+  }
+
+  .astrobook-badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--astrobook-color-border);
+    border-radius: var(--astrobook-radius-pill);
+    padding: 0.125rem 0.625rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: var(--astrobook-color-badge-text);
+    text-decoration: none;
+    transition: var(--astrobook-transition);
+  }
+
+  .astrobook-badge:hover {
+    border-color: var(--astrobook-color-border-hover);
+    color: var(--astrobook-color-badge-text-hover);
+  }
+
+  .astrobook-badge .astrobook-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  .astrobook-badge-version {
+    font-family: var(--astrobook-font-family-mono);
+  }
+
+  .astrobook-badge-repo {
+    gap: 0.375rem;
+    font-weight: 500;
+  }
+
+  /* The home page is sized against the main area, not the viewport */
+  @container (min-width: 20rem) {
+    .astrobook-home-content {
+      padding: 0 1.5rem;
+    }
+
+    .astrobook-home-title {
+      font-size: 1.875rem;
+      line-height: 2.25rem;
+    }
+
+    .astrobook-home-badges {
+      margin-top: 2rem;
+      flex-direction: row;
+      align-items: center;
+      gap: 0.75rem;
+    }
+
+    .astrobook-badge {
+      padding: 0.25rem 0.75rem;
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+    }
+
+    .astrobook-badge .astrobook-icon {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    .astrobook-badge-repo {
+      gap: 0.5rem;
+    }
+  }
+
+  @container (min-width: 24rem) {
+    .astrobook-home-title {
+      font-size: 3rem;
+      line-height: 1;
+    }
+
+    .astrobook-home-subtitle {
+      display: block;
+    }
+  }
+</style>