feat(web): redesign terang minimalis + upgrade astro 7

apps/web/package.json

@@ -4,7 +4,7 @@
   "version": "1.0.0",
   "type": "module",
   "engines": {
-    "node": ">=22.12"
+    "node": ">=22.22.0"
   },
   "scripts": {
     "dev": "astro dev",
@@ -13,14 +13,12 @@
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.10",
-    "astro": "5.18.2",
-    "autoprefixer": "^10.6.1",
-    "postcss": "^8.5.30",
-    "tailwindcss": "^3.4.19",
-    "typescript": "^5.9.3"
+    "astro": "7.4.0",
+    "typescript": "^6.0.3"
   },
   "dependencies": {
-    "gsap": "^3.15.0",
-    "lenis": "^1.3.27"
+    "@fontsource-variable/funnel-display": "^5.3.0",
+    "@fontsource-variable/funnel-sans": "^5.3.0",
+    "@fontsource-variable/geist-mono": "^5.3.0"
   }
 }

apps/web/src/components/docs/DocsSidebar.astro

@@ -99,8 +99,8 @@ const tree = buildTree(headings);
 <style>
   .docs-sidebar {
     position: sticky;
-    top: calc(4rem + 1.5rem);
-    max-height: calc(100vh - 4rem - 3rem);
+    top: 2rem;
+    max-height: calc(100vh - 4rem);
     overflow-y: auto;
   }
 
@@ -115,16 +115,18 @@ const tree = buildTree(headings);
 
     .docs-mobile-toc-wrap {
       position: sticky;
-      top: 4rem;
+      top: 0;
       z-index: 40;
+      padding-block: 0.5rem;
+      background: var(--paper);
       display: block;
       margin-block-end: 1.5rem;
     }
 
     .docs-mobile-toc {
-      border: 1px solid var(--color-border);
+      border: 1px solid var(--rule);
       border-radius: 0.5rem;
-      background: var(--color-bg-soft);
+      background: var(--paper);
     }
 
     .docs-mobile-toc summary {
@@ -133,8 +135,8 @@ const tree = buildTree(headings);
       justify-content: space-between;
       padding: 0.875rem 1rem;
       cursor: pointer;
-      font-size: 0.84375rem;
-      color: var(--color-text);
+      font-size: 0.9375rem;
+      color: var(--ink);
       list-style: none;
     }
 
@@ -145,8 +147,8 @@ const tree = buildTree(headings);
     .docs-mobile-toc .chevron {
       width: 8px;
       height: 8px;
-      border-right: 2px solid var(--color-text-muted);
-      border-bottom: 2px solid var(--color-text-muted);
+      border-right: 2px solid var(--muted);
+      border-bottom: 2px solid var(--muted);
       transform: rotate(45deg) translateY(-2px);
       transition: transform 200ms ease;
     }
@@ -158,7 +160,7 @@ const tree = buildTree(headings);
     .docs-mobile-toc__list {
       max-height: 60vh;
       overflow-y: auto;
-      border-top: 1px solid var(--color-border);
+      border-top: 1px solid var(--rule);
       /* Bigger, thumb-friendly tap targets for the dropdown variant.
          These inherit into SidebarList's <a> elements via normal CSS
          custom-property inheritance — unlike plain selectors, that

apps/web/src/components/docs/SidebarList.astro

@@ -44,22 +44,23 @@ const { items } = Astro.props;
     display: block;
     padding: var(--docs-link-padding, 0.3125rem 0 0.3125rem 0.75rem);
     border-inline-start: 2px solid transparent;
-    font-size: 0.84375rem;
-    color: var(--color-text-muted);
+    line-height: 1.4;
+    font-size: 0.9375rem;
+    color: var(--muted);
     transition: color 150ms ease, border-color 150ms ease;
   }
 
   a:hover {
-    color: var(--color-text);
+    color: var(--ink);
   }
 
   a.active {
-    border-inline-start-color: var(--color-aqua);
-    color: var(--color-text);
+    border-inline-start-color: var(--accent);
+    color: var(--ink);
   }
 
   li li a {
     padding-inline-start: var(--docs-link-nested-indent, 1.75rem);
-    font-size: 0.78125rem;
+    font-size: 0.875rem;
   }
 </style>