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,45 @@
+import { describe, expect, it } from "vitest"
+
+import {
+  accentColors,
+  baseColors,
+  buildThemeStyleSheet,
+  getTheme,
+  getThemeCssVariables,
+  themes,
+} from "./theme"
+
+describe("appearance themes", () => {
+  it("defines every selectable base and accent color exactly once", () => {
+    const selectableColors = [...baseColors, ...accentColors]
+
+    expect(themes.map((theme) => theme.name)).toEqual(selectableColors)
+    expect(new Set(selectableColors).size).toBe(selectableColors.length)
+    expect(new Set(themes.map((theme) => theme.name)).size).toBe(themes.length)
+  })
+
+  it("combines base and accent palettes", () => {
+    const variables = getThemeCssVariables("light", {
+      accentColor: "rose",
+      baseColor: "stone",
+    })
+
+    expect(variables.background).toBe(
+      getTheme("stone")?.cssVars.light.background
+    )
+    expect(variables.primary).toBe(getTheme("rose")?.cssVars.light.primary)
+  })
+
+  it("builds explicit and system color-scheme rules", () => {
+    const styleSheet = buildThemeStyleSheet(
+      { accentColor: "blue", baseColor: "neutral" },
+      { accentColor: "violet", baseColor: "zinc" }
+    )
+
+    expect(styleSheet).toContain(":root,.ui\\:light{")
+    expect(styleSheet).toContain(".ui\\:dark{")
+    expect(styleSheet).toContain("@media (prefers-color-scheme:dark)")
+    expect(styleSheet).toContain("--background:")
+    expect(styleSheet).toContain("--primary:")
+  })
+})