simple-react-app-kit/packages/appearance/src/theme.test.ts

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.highlight).toBe(getTheme("stone")?.cssVars.light.highlight)
    expect(variables.accent).toBe(getTheme("rose")?.cssVars.light.accent)
  })

  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("--accent:")
    expect(styleSheet).toContain("--highlight:")
  })
})