@hoardodile/ui 0.1.2 → 0.1.4

package/src/lib/colors.test.ts

@@ -0,0 +1,94 @@
+/**
+ * @vitest-environment node
+ */
+
+import { describe, expect, it } from "vitest"
+import {
+	computeTagChipColors,
+	isBlackHex,
+	isSpecialTagStyle,
+	isWhiteHex,
+	TAG_SPECIAL_STYLES,
+} from "./colors"
+
+describe("isWhiteHex", () => {
+	it("matches common white representations", () => {
+		expect(isWhiteHex("#fff")).toBe(true)
+		expect(isWhiteHex("#FFFFFF")).toBe(true)
+		expect(isWhiteHex("white")).toBe(true)
+		expect(isWhiteHex("rgb(255,255,255)")).toBe(true)
+		expect(isWhiteHex("rgba( 255 , 255 , 255 , 0.5)")).toBe(true)
+	})
+
+	it("rejects empty and non-white colors", () => {
+		expect(isWhiteHex("")).toBe(false)
+		expect(isWhiteHex("#000")).toBe(false)
+		expect(isWhiteHex("#abcdef")).toBe(false)
+		expect(isWhiteHex("rgb(254,255,255)")).toBe(false)
+	})
+})
+
+describe("isBlackHex", () => {
+	it("matches common black representations", () => {
+		expect(isBlackHex("#000")).toBe(true)
+		expect(isBlackHex("#000000")).toBe(true)
+		expect(isBlackHex("BLACK")).toBe(true)
+		expect(isBlackHex("rgb(0, 0, 0)")).toBe(true)
+	})
+
+	it("rejects empty and non-black colors", () => {
+		expect(isBlackHex("")).toBe(false)
+		expect(isBlackHex("#fff")).toBe(false)
+		expect(isBlackHex("rgb(0,0,1)")).toBe(false)
+	})
+})
+
+describe("computeTagChipColors", () => {
+	it("falls back to muted/accent vars for empty color", () => {
+		const colors = computeTagChipColors("")
+		expect(colors.baseBg).toContain("var(--color-muted)")
+		expect(colors.hoverBg).toContain("var(--color-accent)")
+		expect(colors.fg).toContain("var(--color-foreground)")
+	})
+
+	it("returns explicit white treatment for white", () => {
+		const colors = computeTagChipColors("#ffffff")
+		expect(colors.baseBg).toBe("#ffffff")
+		expect(colors.fg).toBe("#0a0a0a")
+	})
+
+	it("returns explicit black treatment for black", () => {
+		const colors = computeTagChipColors("black")
+		expect(colors.baseBg).toBe("#0a0a0a")
+		expect(colors.fg).toBe("#ffffff")
+	})
+
+	it("uses color-mix blends for arbitrary colors", () => {
+		const colors = computeTagChipColors("#3366ff")
+		expect(colors.baseBg).toContain("color-mix")
+		expect(colors.baseBg).toContain("6%")
+		expect(colors.hoverBg).toContain("20%")
+		expect(colors.fg).toBe("#3366ff")
+	})
+
+	it("treats special style names as ordinary colors", () => {
+		const colors = computeTagChipColors("rainbow")
+		expect(colors.baseBg).toContain("color-mix")
+		expect(colors.fg).toBe("rainbow")
+	})
+})
+
+describe("isSpecialTagStyle", () => {
+	it("matches all known special styles", () => {
+		for (const style of TAG_SPECIAL_STYLES) {
+			expect(isSpecialTagStyle(style)).toBe(true)
+		}
+	})
+
+	it("rejects regular colors and empty", () => {
+		expect(isSpecialTagStyle("")).toBe(false)
+		expect(isSpecialTagStyle("#ff0000")).toBe(false)
+		expect(isSpecialTagStyle("red")).toBe(false)
+		expect(isSpecialTagStyle("rainbowish")).toBe(false)
+	})
+})

package/src/lib/colors.ts

@@ -0,0 +1,96 @@
+/**
+ * Pure color utilities used by tag/category chip rendering.
+ *
+ * Centralized here so chip components, color pickers, and tests share
+ * one definition for "looks white"/"looks black" and the color-mix
+ * blending used to keep chips subtle on cards and sidebars.
+ */
+
+export const TAG_SPECIAL_STYLES = [
+	"silver",
+	"gold",
+	"rainbow",
+	"oilslick",
+	"kintsugi",
+] as const
+
+/** Default color presets shared by every color picker in the app. */
+export const DEFAULT_COLOR_PRESETS = [
+	"#9D9D9D",
+	"#000000",
+	"#FFFFFF",
+	"#27AE60",
+	"#0070DD",
+	"#00BCD4",
+	"#8E44AD",
+	"#FF8000",
+	"#F1C40F",
+	"#E74C3C",
+] as const
+
+export type TagSpecialStyle = (typeof TAG_SPECIAL_STYLES)[number]
+
+export function isSpecialTagStyle(color: string): color is TagSpecialStyle {
+	return TAG_SPECIAL_STYLES.includes(color as TagSpecialStyle)
+}
+
+export type TagChipColors = {
+	readonly baseBg: string
+	readonly hoverBg: string
+	readonly fg: string
+}
+
+const WHITE_COLOR_PATTERN =
+	/^(?:#fff(?:fff)?|white|rgba?\(\s*255\s*,\s*255\s*,\s*255\b)/i
+const BLACK_COLOR_PATTERN =
+	/^(?:#000(?:000)?|black|rgba?\(\s*0\s*,\s*0\s*,\s*0\b)/i
+
+/**
+ * Tests whether a CSS color string visually resolves to white in any
+ * common short form (`#fff`, `#ffffff`, `white`, `rgb(255,255,255,…)`).
+ */
+export function isWhiteHex(color: string): boolean {
+	if (color === "") return false
+	return WHITE_COLOR_PATTERN.test(color.trim())
+}
+
+/** Mirror of {@link isWhiteHex} for black. */
+export function isBlackHex(color: string): boolean {
+	if (color === "") return false
+	return BLACK_COLOR_PATTERN.test(color.trim())
+}
+
+/**
+ * Resolve a chip's background/hover/foreground triple for the given
+ * `color`. White and black are special-cased so they remain visibly
+ * black/white in both light and dark themes instead of vanishing into
+ * the chip background.
+ */
+export function computeTagChipColors(color: string): TagChipColors {
+	if (color === "") {
+		return {
+			baseBg: "var(--color-muted)",
+			hoverBg: "var(--color-accent)",
+			fg: "var(--color-foreground)",
+		}
+	}
+	if (isWhiteHex(color)) {
+		return {
+			baseBg: "#ffffff",
+			hoverBg: "#f1f5f9",
+			fg: "#0a0a0a",
+		}
+	}
+	if (isBlackHex(color)) {
+		return {
+			baseBg: "#0a0a0a",
+			hoverBg: "#262626",
+			fg: "#ffffff",
+		}
+	}
+	return {
+		baseBg: `color-mix(in srgb, ${color} 6%, var(--color-card))`,
+		hoverBg: `color-mix(in srgb, ${color} 20%, var(--color-card))`,
+		fg: color,
+	}
+}

package/src/lib/tag-surface.ts

@@ -0,0 +1,71 @@
+import { getSpecialTagStyleConfig } from "@hoardodile/ui/components/special-tag-surface"
+import {
+	computeTagChipColors,
+	isSpecialTagStyle,
+	type TagSpecialStyle,
+} from "@hoardodile/ui/lib/colors"
+import { cn } from "@hoardodile/ui/lib/utils"
+import type { CSSProperties } from "react"
+
+export type ResolvedTagChipSurface = {
+	readonly className: string
+	readonly style: CSSProperties | undefined
+	/** The special SVG texture to layer under the chip's content, or null. */
+	readonly texture: TagSpecialStyle | null
+}
+
+/**
+ * Resolves a chip's visual surface for a user-assigned color — the single
+ * source of chip coloring shared by every tag/category pill in the app.
+ *
+ * A plain color tints the whole chip (a 6% wash as fill, the color as ink,
+ * deepening to the hover tint when `active`); the five special styles
+ * (silver, gold, rainbow, oilslick, kintsugi) render their SVG texture;
+ * an empty color falls back to the default muted chip, taking the primary
+ * fill when `active`.
+ */
+export function resolveTagChipSurface(
+	color: string,
+	active: boolean,
+): ResolvedTagChipSurface {
+	if (isSpecialTagStyle(color)) {
+		const config = getSpecialTagStyleConfig(color)
+		return {
+			className: cn(
+				"relative isolate group",
+				config.default.className,
+				active ? config.active?.className : undefined,
+			),
+			style: {
+				...config.default.style,
+				...(active ? config.active?.style : {}),
+			},
+			texture: color,
+		}
+	}
+
+	if (color === "") {
+		return active
+			? {
+					className: "bg-primary text-primary-foreground hover:bg-primary/90",
+					style: undefined,
+					texture: null,
+				}
+			: {
+					className: "bg-muted text-foreground hover:bg-accent",
+					style: undefined,
+					texture: null,
+				}
+	}
+
+	const chipColors = computeTagChipColors(color)
+	return {
+		className: "bg-(--chip-bg) hover:bg-(--chip-hover-bg)",
+		style: {
+			["--chip-bg" as string]: active ? chipColors.hoverBg : chipColors.baseBg,
+			["--chip-hover-bg" as string]: chipColors.hoverBg,
+			color: chipColors.fg,
+		},
+		texture: null,
+	}
+}