feat(appearance): add composable theme package

2026-09-21 16:05:05 +08:00
parent 71c416caab
commit e2dbbcb884
29 changed files with 2877 additions and 0 deletions
@@ -0,0 +1,105 @@
+import type { CSSProperties } from "react"
+import {
+  getTheme,
+  getThemeCssVariables,
+  type ThemeColorConfig,
+  type ThemeScheme,
+} from "../theme"
+import { cn } from "@workspace/ui/lib/utils"
+
+export interface ThemePreviewProps {
+  className?: string
+  compacted?: boolean
+  config: ThemeColorConfig
+  scheme: ThemeScheme
+}
+
+export function ThemePreview({
+  scheme,
+  config,
+  className,
+  compacted = false,
+}: ThemePreviewProps) {
+  const themeVariables = getThemeCssVariables(scheme, config)
+  const baseTheme = getTheme(config.baseColor) ?? getTheme("neutral")!
+  const style = {
+    ...Object.fromEntries(
+      Object.entries(themeVariables).map(([key, value]) => [`--${key}`, value])
+    ),
+    "--preview-base": baseTheme.cssVars[scheme].primary,
+  } as CSSProperties
+
+  return (
+    <div className={cn(className, `ui:${scheme}`)} style={style}>
+      <div className="isolate h-52 max-w-103.5 rounded-lg bg-sidebar p-3 ring ring-border">
+        <div className="flex gap-2.5 [&>div]:bg-foreground/10">
+          <div className="size-5 rounded-sm" />
+          <div className="ml-auto size-5 rounded-sm" />
+          <div className="size-5 rounded-sm" />
+          <div className="size-5 rounded-sm" />
+        </div>
+        <div className="flex gap-3">
+          <div className="flex w-16 flex-col gap-1 py-5 [&>div]:bg-foreground/10">
+            <div className="h-2.5 w-full rounded-r-full" />
+            <div className="h-2.5 w-full rounded-r-full bg-primary!" />
+            <div className="h-2.5 w-full rounded-r-full" />
+            <div className="h-2.5 w-full rounded-r-full" />
+            <div className="mt-auto h-2.5 w-full rounded-r-full" />
+          </div>
+          <div className="flex-1 py-5">
+            <div className={cn("space-y-2.5", { "px-7.5": compacted })}>
+              <div className="flex h-2.5 items-center gap-2 [&>div]:bg-foreground/10">
+                <div className="h-2.5 w-3 rounded-sm" />
+                <div className="ml-auto size-2.5 rounded-sm" />
+                <div className="h-2.5 w-3.75 rounded-sm" />
+                <div className="h-2.5 w-5 rounded-sm bg-primary!" />
+              </div>
+              <div className="grid grid-cols-3 gap-2 [&>div]:rounded-sm [&>div]:bg-foreground/10">
+                <div className="flex h-18 items-end gap-2 p-2 compacted:gap-1">
+                  <div className="h-6 w-2 rounded-t-sm bg-(--preview-base)/55" />
+                  <div className="h-4 w-2 rounded-t-sm bg-(--preview-base)/55" />
+                  <div className="h-11 w-2 rounded-t-sm bg-(--preview-base)/55" />
+                  <div className="h-8 w-2 rounded-t-sm bg-(--preview-base)/55" />
+                  <div className="h-9 w-2 rounded-t-sm bg-(--preview-base)/55" />
+                </div>
+                <div className="flex h-18 flex-col items-stretch justify-between gap-1 p-2">
+                  <div className="flex items-center gap-1 opacity-55">
+                    <div className="h-1 w-1 rounded-xs bg-(--preview-base)/55" />
+                    <div className="h-1 w-1 rounded-xs bg-(--preview-base)/55" />
+                    <div className="h-1 w-1 rounded-xs bg-(--preview-base)/55" />
+                    <div className="ml-auto h-1 w-6 rounded-xs bg-(--preview-base)/55" />
+                    <div className="h-1 w-3 rounded-xs bg-(--preview-base)/55" />
+                  </div>
+                  <div className="flex flex-wrap gap-1">
+                    <div className="size-1 rounded-xs bg-(--preview-base)/55" />
+                    <div className="h-1 w-6 rounded-xs bg-(--preview-base)/55" />
+                    <div className="h-1 w-3 rounded-xs bg-(--preview-base)/55 compacted:w-4" />
+                    <div className="h-1 w-5 rounded-xs bg-(--preview-base)/55" />
+                    <div className="h-1 w-5 rounded-xs bg-(--preview-base)/55" />
+                    <div className="size-1 rounded-xs bg-(--preview-base)/55" />
+                    <div className="h-1 w-5 rounded-xs bg-(--preview-base)/55" />
+                    <div className="h-1 w-2 rounded-xs bg-(--preview-base)/55 compacted:w-1" />
+                    <div className="size-1 rounded-xs bg-(--preview-base)/55 compacted:w-5" />
+                    <div className="h-1 w-3 rounded-xs bg-(--preview-base)/55" />
+                    <div className="size-1 rounded-xs bg-(--preview-base)/55" />
+                    <div className="h-1 w-3 rounded-xs bg-(--preview-base)/55" />
+                    <div className="size-1 rounded-xs bg-(--preview-base)/55 compacted:w-3" />
+                    <div className="h-1 w-6 rounded-xs bg-(--preview-base)/55 compacted:hidden" />
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <div className="h-2 w-6 rounded-sm bg-primary" />
+                    <div className="h-2 w-6 rounded-sm bg-primary/75" />
+                  </div>
+                </div>
+                <div className="h-18" />
+                <div className="h-10 flex-1" />
+                <div className="h-10 flex-1" />
+                <div className="h-10 flex-1" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}