fix(web): align item type badge colors with style guide

Fixes #65

- Part: blue → green (--ctp-green)
- Assembly: green → mauve (--ctp-mauve)
- Document: yellow → blue (--ctp-blue)
- Add purchased (--ctp-peach) and phantom (--ctp-overlay1)
- Keep tooling as red (--ctp-red)
This commit is contained in:
Forbes
2026-02-13 13:09:41 -06:00
parent e20da25405
commit d4ea6d2739
2 changed files with 10 additions and 6 deletions

View File

@@ -64,9 +64,11 @@ export function ItemDetail({
} }
const typeColors: Record<string, { bg: string; color: string }> = { const typeColors: Record<string, { bg: string; color: string }> = {
part: { bg: "rgba(137,180,250,0.2)", color: "var(--ctp-blue)" }, part: { bg: "rgba(166,227,161,0.2)", color: "var(--ctp-green)" },
assembly: { bg: "rgba(166,227,161,0.2)", color: "var(--ctp-green)" }, assembly: { bg: "rgba(203,166,247,0.2)", color: "var(--ctp-mauve)" },
document: { bg: "rgba(249,226,175,0.2)", color: "var(--ctp-yellow)" }, document: { bg: "rgba(137,180,250,0.2)", color: "var(--ctp-blue)" },
purchased: { bg: "rgba(250,179,135,0.2)", color: "var(--ctp-peach)" },
phantom: { bg: "rgba(127,132,156,0.2)", color: "var(--ctp-overlay1)" },
tooling: { bg: "rgba(243,139,168,0.2)", color: "var(--ctp-red)" }, tooling: { bg: "rgba(243,139,168,0.2)", color: "var(--ctp-red)" },
}; };
const tc = typeColors[item.item_type] ?? { const tc = typeColors[item.item_type] ?? {

View File

@@ -49,9 +49,11 @@ interface ItemTableProps {
} }
const typeColors: Record<string, { bg: string; color: string }> = { const typeColors: Record<string, { bg: string; color: string }> = {
part: { bg: "rgba(137,180,250,0.2)", color: "var(--ctp-blue)" }, part: { bg: "rgba(166,227,161,0.2)", color: "var(--ctp-green)" },
assembly: { bg: "rgba(166,227,161,0.2)", color: "var(--ctp-green)" }, assembly: { bg: "rgba(203,166,247,0.2)", color: "var(--ctp-mauve)" },
document: { bg: "rgba(249,226,175,0.2)", color: "var(--ctp-yellow)" }, document: { bg: "rgba(137,180,250,0.2)", color: "var(--ctp-blue)" },
purchased: { bg: "rgba(250,179,135,0.2)", color: "var(--ctp-peach)" },
phantom: { bg: "rgba(127,132,156,0.2)", color: "var(--ctp-overlay1)" },
tooling: { bg: "rgba(243,139,168,0.2)", color: "var(--ctp-red)" }, tooling: { bg: "rgba(243,139,168,0.2)", color: "var(--ctp-red)" },
}; };