From d4ea6d2739514393a573ce2ddd3c566ef82e2d2e Mon Sep 17 00:00:00 2001 From: Forbes Date: Fri, 13 Feb 2026 13:09:41 -0600 Subject: [PATCH] fix(web): align item type badge colors with style guide MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- web/src/components/items/ItemDetail.tsx | 8 +++++--- web/src/components/items/ItemTable.tsx | 8 +++++--- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/web/src/components/items/ItemDetail.tsx b/web/src/components/items/ItemDetail.tsx index 7e78a52..f7fdf39 100644 --- a/web/src/components/items/ItemDetail.tsx +++ b/web/src/components/items/ItemDetail.tsx @@ -64,9 +64,11 @@ export function ItemDetail({ } const typeColors: Record = { - part: { bg: "rgba(137,180,250,0.2)", color: "var(--ctp-blue)" }, - assembly: { bg: "rgba(166,227,161,0.2)", color: "var(--ctp-green)" }, - document: { bg: "rgba(249,226,175,0.2)", color: "var(--ctp-yellow)" }, + part: { 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(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)" }, }; const tc = typeColors[item.item_type] ?? { diff --git a/web/src/components/items/ItemTable.tsx b/web/src/components/items/ItemTable.tsx index 504f7bb..a8941a4 100644 --- a/web/src/components/items/ItemTable.tsx +++ b/web/src/components/items/ItemTable.tsx @@ -49,9 +49,11 @@ interface ItemTableProps { } const typeColors: Record = { - part: { bg: "rgba(137,180,250,0.2)", color: "var(--ctp-blue)" }, - assembly: { bg: "rgba(166,227,161,0.2)", color: "var(--ctp-green)" }, - document: { bg: "rgba(249,226,175,0.2)", color: "var(--ctp-yellow)" }, + part: { 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(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)" }, };