feat(web): polish sidebar shell and authentication UI

apps/web/src/App.tsx

@@ -1,6 +1,22 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import type { LucideIcon } from "lucide-react";
+import {
+  Bell,
+  ChevronLeft,
+  ChevronRight,
+  LayoutDashboard,
+  ListTodo,
+  LogOut,
+  Menu,
+  Moon,
+  Settings,
+  Sparkles,
+  Sun,
+  X
+} from "lucide-react";
 import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import { EmailLoginPage } from "@/pages/email-login-page";
 import { OAuthCallbackPage } from "@/pages/oauth-callback-page";
 import { TodoShellPage } from "@/pages/todo-shell-page";
@@ -11,6 +27,26 @@ import {
   saveSession,
   type WebSession
 } from "@/services/session-storage";
+import {
+  applyThemeMode,
+  loadThemeMode,
+  saveThemeMode,
+  type ThemeMode
+} from "@/services/theme-storage";
+
+type SidebarItem = {
+  key: string;
+  label: string;
+  icon: LucideIcon;
+};
+
+const SIDEBAR_ITEMS: SidebarItem[] = [
+  { key: "dashboard", label: "概览面板", icon: LayoutDashboard },
+  { key: "todo", label: "待办事项", icon: ListTodo },
+  { key: "ai", label: "AI 建议", icon: Sparkles },
+  { key: "notice", label: "提醒中心", icon: Bell },
+  { key: "settings", label: "系统设置", icon: Settings }
+];
 
 function toWebSession(payload: EmailLoginResult): WebSession {
   return {
@@ -26,8 +62,16 @@ function toWebSession(payload: EmailLoginResult): WebSession {
 function App() {
   const [session, setSession] = useState<WebSession | null>(() => loadSession());
   const [loggingOut, setLoggingOut] = useState(false);
+  const [themeMode, setThemeMode] = useState<ThemeMode>(() => loadThemeMode());
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const navigate = useNavigate();
 
+  useEffect(() => {
+    applyThemeMode(themeMode);
+    saveThemeMode(themeMode);
+  }, [themeMode]);
+
   async function handleLogout(): Promise<void> {
     if (!session || loggingOut) {
       return;
@@ -37,42 +81,188 @@ function App() {
       setLoggingOut(true);
       await revokeRefreshToken(session.refreshToken);
     } catch {
-      // 登出流程以本地会话清理为最终兜底，避免页面卡在登录态。
+      // 无论接口成功与否，都要清理本地会话，避免页面卡在登录态。
     } finally {
       clearSession();
       setSession(null);
       setLoggingOut(false);
+      setMobileSidebarOpen(false);
       navigate("/login/email", { replace: true });
     }
   }
 
+  function handleToggleTheme(): void {
+    setThemeMode((currentTheme) => (currentTheme === "dark" ? "light" : "dark"));
+  }
+
+  function renderSidebarContent(options: { collapsed: boolean; mobile: boolean }) {
+    const { collapsed, mobile } = options;
+
     return (
-    <div className="min-h-screen bg-[#f6f8f7] text-[#122117]">
-      <header className="border-b border-[#d7e2db] bg-white/90 backdrop-blur">
-        <div className="mx-auto flex h-16 w-full max-w-6xl items-center justify-between px-4">
-          <div className="flex items-center gap-2">
-            <div className="h-8 w-8 rounded-lg bg-[#0a7a5a]" />
-            <span className="text-lg font-semibold tracking-tight">TodoList</span>
-          </div>
-          {session ? (
-            <div className="flex items-center gap-3">
-              <span className="text-sm text-[#3a5a4a]">{session.user.email}</span>
+      <div className="flex h-full min-h-0 flex-col">
+        {mobile ? (
+          <div className="flex h-14 shrink-0 items-center justify-end border-b border-border/70 px-3">
             <Button
               type="button"
-                size="sm"
-                variant="outline"
-                onClick={handleLogout}
-                disabled={loggingOut}
+              size="icon-sm"
+              variant="ghost"
+              className="text-muted-foreground"
+              onClick={() => setMobileSidebarOpen(false)}
+              aria-label="关闭侧边栏"
             >
-                {loggingOut ? "退出中..." : "退出登录"}
+              <X className="size-4" />
             </Button>
           </div>
-          ) : (
-            <span className="text-sm text-[#3a5a4a]">未登录</span>
+        ) : null}
+
+        <div className="min-h-0 flex-1 overflow-y-auto p-2">
+          <nav className="space-y-1">
+            {SIDEBAR_ITEMS.map((item) => {
+              const ItemIcon = item.icon;
+              return (
+                <button
+                  key={item.key}
+                  type="button"
+                  className={cn(
+                    "group flex w-full items-center rounded-xl border border-transparent text-left transition-colors",
+                    "hover:border-primary/25 hover:bg-primary/10",
+                    "gap-3 px-3 py-2.5"
                   )}
+                >
+                  <ItemIcon className="size-5 shrink-0 text-primary" />
+                  {collapsed ? null : (
+                    <>
+                      <span className="text-sm whitespace-nowrap text-foreground">
+                        {item.label}
+                      </span>
+                      <span className="ml-auto whitespace-nowrap rounded-full border border-border bg-card px-2 py-0.5 text-[10px] text-muted-foreground">
+                        即将上线
+                      </span>
+                    </>
+                  )}
+                </button>
+              );
+            })}
+          </nav>
+        </div>
+
+        <div className="shrink-0 space-y-2 border-t border-border/70 p-2">
+          <Button
+            type="button"
+            variant="outline"
+            className={cn(
+              "w-full border-primary/25 text-primary hover:bg-primary/10",
+              "justify-start gap-2 px-3"
+            )}
+            onClick={handleToggleTheme}
+          >
+            {themeMode === "dark" ? <Sun className="size-4" /> : <Moon className="size-4" />}
+            {collapsed ? null : (
+              <span className="whitespace-nowrap">
+                {themeMode === "dark" ? "浅色模式" : "深色模式"}
+              </span>
+            )}
+          </Button>
+
+          <Button
+            type="button"
+            variant="outline"
+            className={cn(
+              "w-full border-primary/25 text-primary hover:bg-primary/10",
+              "justify-start gap-2 px-3"
+            )}
+            onClick={handleLogout}
+            disabled={!session || loggingOut}
+          >
+            <LogOut className="size-4" />
+            {collapsed ? null : (
+              <span className="whitespace-nowrap">{loggingOut ? "退出中..." : "退出登录"}</span>
+            )}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-dvh overflow-hidden bg-background text-foreground md:h-screen">
+      <header className="relative z-50 shrink-0 border-b border-border/70 bg-background/80 backdrop-blur-xl">
+        <div className="flex h-16 items-center justify-between px-4 md:px-6">
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              className="text-primary md:hidden"
+              onClick={() => setMobileSidebarOpen(true)}
+              aria-label="打开侧边栏"
+            >
+              <Menu className="size-12" />
+            </button>
+            <img
+              src="/favicon.png"
+              alt="TodoList"
+              className="h-9 w-9 shrink-0 rounded-xl shadow-sm"
+            />
+            <div className="flex flex-col">
+              <span className="text-base font-semibold tracking-tight text-foreground">
+                TodoList
+              </span>
+            </div>
+          </div>
+          <span className="hidden max-w-[280px] truncate text-sm text-muted-foreground md:block">
+            {session ? session.user.email : "未登录"}
+          </span>
         </div>
       </header>
-      <main className="mx-auto w-full max-w-6xl px-4 py-8">
+
+      {mobileSidebarOpen ? (
+        <button
+          type="button"
+          className="fixed inset-x-0 bottom-0 top-16 z-30 bg-black/40 backdrop-blur-[2px] md:hidden"
+          aria-label="关闭侧边栏遮罩"
+          onClick={() => setMobileSidebarOpen(false)}
+        />
+      ) : null}
+
+      <aside
+        className={cn(
+          "fixed bottom-0 left-0 top-16 z-40 w-72 border-r border-border/80 bg-card/95 backdrop-blur-xl transition-transform duration-300 md:hidden",
+          mobileSidebarOpen ? "translate-x-0" : "-translate-x-full"
+        )}
+      >
+        {renderSidebarContent({ collapsed: false, mobile: true })}
+      </aside>
+
+      <div className="flex min-h-0 h-[calc(100dvh-4rem)] md:h-[calc(100vh-4rem)]">
+        <aside
+          className={cn(
+            "relative hidden h-full border-r border-border/80 bg-card/88 backdrop-blur-xl transition-[width] duration-300 md:flex md:flex-col",
+            sidebarCollapsed ? "md:w-14" : "md:w-72"
+          )}
+        >
+          {renderSidebarContent({ collapsed: sidebarCollapsed, mobile: false })}
+          <Button
+            type="button"
+            size="icon-sm"
+            variant="outline"
+            className={cn(
+              "absolute left-full top-1/2 z-20 -ml-px h-14 w-6 -translate-y-1/2 rounded-none border border-border/80",
+              "bg-card/88 text-muted-foreground backdrop-blur-xl transition-colors duration-200 hover:bg-muted/80 hover:text-foreground",
+              "focus-visible:ring-2 focus-visible:ring-ring/45 focus-visible:ring-offset-0"
+            )}
+            onClick={() => setSidebarCollapsed((current) => !current)}
+            aria-label={sidebarCollapsed ? "展开侧边栏" : "收起侧边栏"}
+          >
+            {sidebarCollapsed ? (
+              <ChevronRight className="size-4" />
+            ) : (
+              <ChevronLeft className="size-4" />
+            )}
+          </Button>
+        </aside>
+
+        <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+          <main className="min-h-0 flex-1 overflow-y-auto px-4 py-6 md:px-6 md:py-8">
+            <div className="mx-auto w-full max-w-6xl">
               <Routes>
                 <Route
                   path="/login/email"
@@ -82,6 +272,7 @@ function App() {
                         const nextSession = toWebSession(payload);
                         saveSession(nextSession);
                         setSession(nextSession);
+                        setMobileSidebarOpen(false);
                         navigate("/");
                       }}
                     />
@@ -93,6 +284,7 @@ function App() {
                     <OAuthCallbackPage
                       onBootstrapSession={(nextSession) => {
                         setSession(nextSession);
+                        setMobileSidebarOpen(false);
                       }}
                     />
                   }
@@ -100,13 +292,23 @@ function App() {
                 <Route
                   path="/"
                   element={
-              session ? <TodoShellPage session={session} /> : <Navigate to="/login/email" replace />
+                    session ? (
+                      <TodoShellPage session={session} />
+                    ) : (
+                      <Navigate to="/login/email" replace />
+                    )
                   }
                 />
-          <Route path="*" element={<Navigate to={session ? "/" : "/login/email"} replace />} />
+                <Route
+                  path="*"
+                  element={<Navigate to={session ? "/" : "/login/email"} replace />}
+                />
               </Routes>
+            </div>
           </main>
         </div>
+      </div>
+    </div>
   );
 }
 

apps/web/src/index.css

@@ -1,21 +1,77 @@
-@import "@fontsource-variable/geist";
+@import "@fontsource-variable/geist";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+html {
+  height: 100%;
+  font-size: 120%;
+}
+
 :root {
-  --radius: 0.625rem;
-  --background: #f6f8f7;
-  --foreground: #122117;
-  --primary: #0a7a5a;
-  --primary-foreground: #ffffff;
-  --border: #d7e2db;
+  --radius: 0.9rem;
+  --background: 246 100% 98%;
+  --foreground: 248 40% 18%;
+  --card: 0 0% 100%;
+  --border: 248 53% 89%;
+  --input: 248 48% 84%;
+  --ring: 246 53% 53%;
+  --primary: 246 53% 53%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 250 70% 94%;
+  --secondary-foreground: 248 40% 25%;
+  --muted: 249 78% 95%;
+  --muted-foreground: 248 17% 45%;
+  --accent: 173 56% 66%;
+  --accent-foreground: 248 40% 25%;
+  --destructive: 343 40% 50%;
+  --destructive-foreground: 0 0% 100%;
+  color-scheme: light;
   font-family: "Geist Variable", "Noto Sans SC", sans-serif;
 }
 
+.dark {
+  --background: 248 46% 10%;
+  --foreground: 240 44% 96%;
+  --card: 249 41% 15%;
+  --border: 249 24% 30%;
+  --input: 249 23% 28%;
+  --ring: 246 76% 68%;
+  --primary: 246 76% 68%;
+  --primary-foreground: 248 43% 12%;
+  --secondary: 249 30% 24%;
+  --secondary-foreground: 240 38% 92%;
+  --muted: 249 29% 20%;
+  --muted-foreground: 247 16% 74%;
+  --accent: 173 52% 58%;
+  --accent-foreground: 248 43% 12%;
+  --destructive: 343 64% 58%;
+  --destructive-foreground: 0 0% 100%;
+  color-scheme: dark;
+}
+
 body {
   margin: 0;
-  min-height: 100vh;
-  background: var(--background);
-  color: var(--foreground);
+  height: 100%;
+  overflow: hidden;
+  background:
+    radial-gradient(
+      1100px 620px at -12% -25%,
+      hsl(var(--primary) / 0.2),
+      hsl(var(--primary) / 0) 60%
+    ),
+    radial-gradient(
+      900px 540px at 112% -14%,
+      hsl(var(--accent) / 0.35),
+      hsl(var(--accent) / 0) 58%
+    ),
+    hsl(var(--background));
+  color: hsl(var(--foreground));
+  transition:
+    background-color 220ms ease,
+    color 220ms ease;
+}
+
+#root {
+  height: 100%;
 }

apps/web/src/main.tsx

@@ -3,6 +3,9 @@ import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import "./index.css";
 import App from "./App.tsx";
+import { applyThemeMode, loadThemeMode } from "@/services/theme-storage";
+
+applyThemeMode(loadThemeMode());
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

apps/web/src/pages/email-login-page.tsx

@@ -84,31 +84,39 @@ export function EmailLoginPage({ onLoginSuccess }: EmailLoginPageProps) {
   }
 
   return (
-    <div className="mx-auto w-full max-w-md rounded-xl border border-[#d7e2db] bg-white p-6 shadow-sm">
-      <h1 className="text-2xl font-semibold text-[#122117]">邮箱验证码登录</h1>
-      <p className="mt-2 text-sm text-[#3a5a4a]">
-        输入邮箱后获取验证码，再完成登录。你也可以直接使用第三方账号登录。
-      </p>
+    <div className="mx-auto w-full max-w-md rounded-2xl border border-border bg-card/92 p-6 shadow-[0_24px_60px_-36px_hsl(var(--primary)/0.65)] backdrop-blur">
+      <div className="mb-4 flex items-center gap-3">
+        <img src="/favicon.png" alt="TodoList" className="h-10 w-10 rounded-xl shadow-sm" />
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">邮箱验证码登录</h1>
+        </div>
+      </div>
 
       <form className="mt-6 space-y-3" onSubmit={handleSendCode}>
-        <label className="block text-sm font-medium text-[#244236]" htmlFor="email">
+        <label className="block text-sm font-medium text-secondary-foreground" htmlFor="email">
           邮箱
         </label>
+        <div className="flex items-stretch gap-2">
           <input
             id="email"
             type="email"
-          className="w-full rounded-md border border-[#bfd0c7] px-3 py-2 text-sm outline-none focus:border-[#0a7a5a]"
+            className="min-w-0 flex-1 rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground outline-none focus:border-primary focus:ring-3 focus:ring-ring/25"
             placeholder="you@example.com"
             value={email}
             onChange={(event) => setEmail(event.target.value)}
           />
-        <Button type="submit" disabled={!canSendCode} className="w-full">
-          {sendingCode ? "发送中..." : codeCooldown > 0 ? `${codeCooldown} 秒后重发` : "发送验证码"}
+          <Button
+            type="submit"
+            disabled={!canSendCode}
+            className="shrink-0 bg-primary px-4 text-primary-foreground hover:bg-primary/90"
+          >
+            {sendingCode ? "发送中..." : codeCooldown > 0 ? `${codeCooldown}s` : "发送验证码"}
           </Button>
+        </div>
       </form>
 
       <form className="mt-4 space-y-3" onSubmit={handleLogin}>
-        <label className="block text-sm font-medium text-[#244236]" htmlFor="code">
+        <label className="block text-sm font-medium text-secondary-foreground" htmlFor="code">
           验证码
         </label>
         <input
@@ -116,7 +124,7 @@ export function EmailLoginPage({ onLoginSuccess }: EmailLoginPageProps) {
           type="text"
           inputMode="numeric"
           maxLength={6}
-          className="w-full rounded-md border border-[#bfd0c7] px-3 py-2 text-sm outline-none focus:border-[#0a7a5a]"
+          className="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground outline-none focus:border-primary focus:ring-3 focus:ring-ring/25"
           placeholder="6位数字验证码"
           value={code}
           onChange={(event) => setCode(event.target.value)}
@@ -124,7 +132,7 @@ export function EmailLoginPage({ onLoginSuccess }: EmailLoginPageProps) {
         <Button
           type="submit"
           disabled={!canLogin}
-          className="w-full bg-[#0a7a5a] text-white hover:bg-[#0a7a5a]/90"
+          className="w-full bg-gradient-to-r from-primary to-accent text-primary-foreground hover:opacity-95"
         >
           {loggingIn ? "登录中..." : "立即登录"}
         </Button>
@@ -132,24 +140,36 @@ export function EmailLoginPage({ onLoginSuccess }: EmailLoginPageProps) {
 
       <div className="mt-6 grid grid-cols-1 gap-2">
         <a href={`${resolveApiBaseUrl()}/auth/oauth/github`}>
-          <Button type="button" variant="outline" className="w-full">
+          <Button
+            type="button"
+            variant="outline"
+            className="w-full border-border bg-card text-foreground"
+          >
             使用 GitHub 登录
           </Button>
         </a>
         <a href={`${resolveApiBaseUrl()}/auth/oauth/qq`}>
-          <Button type="button" variant="outline" className="w-full">
+          <Button
+            type="button"
+            variant="outline"
+            className="w-full border-border bg-card text-foreground"
+          >
             使用 QQ 登录
           </Button>
         </a>
         <a href={`${resolveApiBaseUrl()}/auth/oauth/wechat`}>
-          <Button type="button" variant="outline" className="w-full">
+          <Button
+            type="button"
+            variant="outline"
+            className="w-full border-border bg-card text-foreground"
+          >
             使用微信登录
           </Button>
         </a>
       </div>
 
-      {message ? <p className="mt-4 text-sm text-[#0a7a5a]">{message}</p> : null}
-      {error ? <p className="mt-2 text-sm text-[#b42318]">{error}</p> : null}
+      {message ? <p className="mt-4 text-sm text-primary">{message}</p> : null}
+      {error ? <p className="mt-2 text-sm text-destructive">{error}</p> : null}
     </div>
   );
 }

apps/web/src/pages/oauth-callback-page.tsx

@@ -49,13 +49,16 @@ export function OAuthCallbackPage({ onBootstrapSession }: OAuthCallbackPageProps
   }
 
   return (
-    <div className="mx-auto w-full max-w-md rounded-xl border border-[#d7e2db] bg-white p-6 shadow-sm">
-      <h1 className="text-2xl font-semibold text-[#122117]">OAuth 回调处理中</h1>
-      <p className="mt-2 text-sm text-[#3a5a4a]">
+    <div className="mx-auto w-full max-w-md rounded-2xl border border-border bg-card/92 p-6 shadow-[0_24px_60px_-36px_hsl(var(--primary)/0.55)] backdrop-blur">
+      <div className="mb-4 flex items-center gap-3">
+        <img src="/favicon.png" alt="TodoList" className="h-10 w-10 rounded-xl shadow-sm" />
+        <h1 className="text-2xl font-semibold text-foreground">OAuth 回调处理中</h1>
+      </div>
+      <p className="mt-2 text-sm text-muted-foreground">
         {parseResult.ok ? "已收到回调参数，点击继续进入工作台。" : parseResult.reason}
       </p>
       <Button
-        className="mt-6 w-full bg-[#0a7a5a] text-white hover:bg-[#0a7a5a]/90"
+        className="mt-6 w-full bg-gradient-to-r from-primary to-accent text-primary-foreground hover:opacity-95"
         onClick={handleContinue}
       >
         {parseResult.ok ? "继续" : "返回邮箱登录"}

apps/web/src/pages/todo-shell-page.tsx

@@ -6,11 +6,28 @@ type TodoShellPageProps = {
 
 export function TodoShellPage({ session }: TodoShellPageProps) {
   return (
-    <div className="rounded-xl border border-[#d7e2db] bg-white p-6 shadow-sm">
-      <h1 className="text-2xl font-semibold text-[#122117]">TodoList 工作台</h1>
-      <p className="mt-2 text-sm text-[#3a5a4a]">
+    <div className="rounded-2xl border border-border bg-card/90 p-6 shadow-[0_24px_70px_-42px_hsl(var(--primary)/0.6)] backdrop-blur">
+      <h1 className="text-2xl font-semibold text-foreground">TodoList 工作台</h1>
+      <p className="mt-2 text-sm text-muted-foreground">
         {session ? `当前登录邮箱：${session.user.email}` : "当前未建立登录会话，请先完成登录。"}
       </p>
+      <div className="mt-6 grid gap-3 sm:grid-cols-3">
+        <div className="rounded-xl border border-border bg-muted/40 p-4">
+          <p className="text-xs text-muted-foreground">今日重点</p>
+          <p className="mt-2 text-lg font-semibold text-foreground">待接入</p>
+        </div>
+        <div className="rounded-xl border border-border bg-muted/40 p-4">
+          <p className="text-xs text-muted-foreground">临近截止</p>
+          <p className="mt-2 text-lg font-semibold text-foreground">待接入</p>
+        </div>
+        <div className="rounded-xl border border-border bg-muted/40 p-4">
+          <p className="text-xs text-muted-foreground">任务分析</p>
+          <p className="mt-2 text-lg font-semibold text-foreground">待接入</p>
+        </div>
+      </div>
+      <p className="mt-4 text-xs text-muted-foreground">
+        当前为界面阶段，统计卡片将在任务数据接入后显示真实结果。
+      </p>
     </div>
   );
 }

apps/web/src/services/theme-storage.ts

@@ -0,0 +1,29 @@
+const THEME_STORAGE_KEY = "todolist.web.theme";
+
+export type ThemeMode = "light" | "dark";
+
+function isThemeMode(value: string | null): value is ThemeMode {
+  return value === "light" || value === "dark";
+}
+
+export function loadThemeMode(): ThemeMode {
+  const savedTheme = window.localStorage.getItem(THEME_STORAGE_KEY);
+  if (isThemeMode(savedTheme)) {
+    return savedTheme;
+  }
+
+  if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    return "dark";
+  }
+
+  return "light";
+}
+
+export function saveThemeMode(mode: ThemeMode): void {
+  window.localStorage.setItem(THEME_STORAGE_KEY, mode);
+}
+
+export function applyThemeMode(mode: ThemeMode): void {
+  document.documentElement.classList.toggle("dark", mode === "dark");
+  document.documentElement.style.colorScheme = mode;
+}

apps/web/tailwind.config.js

@@ -1,8 +1,43 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: "class",
   content: ["./index.html", "./src/**/*.{ts,tsx}"],
   theme: {
-    extend: {}
+    extend: {
+      colors: {
+        border: "hsl(var(--border) / <alpha-value>)",
+        input: "hsl(var(--input) / <alpha-value>)",
+        ring: "hsl(var(--ring) / <alpha-value>)",
+        background: "hsl(var(--background) / <alpha-value>)",
+        foreground: "hsl(var(--foreground) / <alpha-value>)",
+        primary: {
+          DEFAULT: "hsl(var(--primary) / <alpha-value>)",
+          foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
+          foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted) / <alpha-value>)",
+          foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent) / <alpha-value>)",
+          foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
+          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
+        },
+        card: "hsl(var(--card) / <alpha-value>)"
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)"
+      }
+    }
   },
   plugins: []
 };