diff --git a/src/app/globals.css b/src/app/globals.css index fa26812305..043ff29eae 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -163,8 +163,13 @@ --danger: var(--danger-text); --danger-soft: var(--danger-bg); - /* Categorical dot accent with no semantic triad (e.g. Youth service pathway). */ + /* Categorical tone scale — taxonomy/pathway dots only. NEVER semantic: kept + visually distinct from the role tokens (success/danger/warning/info) and + the brand accent so green/blue/teal keep their meanings. */ --tone-purple: #7c3aed; + --tone-indigo: #4338ca; + --tone-rose: #a21caf; + --tone-slate: #475569; --disabled: #98a2b3; --focus: var(--clinical-accent); @@ -302,8 +307,11 @@ --danger: var(--danger-text); --danger-soft: var(--danger-bg); - /* Categorical dot accent, brightened for dark surfaces. */ + /* Categorical tone scale, brightened for dark surfaces (categorical only). */ --tone-purple: #a78bfa; + --tone-indigo: #818cf8; + --tone-rose: #e879f9; + --tone-slate: #94a3b8; --disabled: #555e6b; --focus: var(--clinical-accent); @@ -1037,6 +1045,9 @@ summary::-webkit-details-marker { --danger: Mark; --danger-soft: Canvas; --tone-purple: CanvasText; + --tone-indigo: CanvasText; + --tone-rose: CanvasText; + --tone-slate: CanvasText; --focus: Highlight; --surface-lux: Canvas; --surface-wash: Canvas; diff --git a/src/components/clinical-dashboard/mode-action-popup.tsx b/src/components/clinical-dashboard/mode-action-popup.tsx index 4673becc3f..257f55e45d 100644 --- a/src/components/clinical-dashboard/mode-action-popup.tsx +++ b/src/components/clinical-dashboard/mode-action-popup.tsx @@ -341,7 +341,7 @@ export function ModeActionPopup({ )} >
-
+
diff --git a/src/components/mode-home-template.tsx b/src/components/mode-home-template.tsx index 52c4750c3d..489f90eab3 100644 --- a/src/components/mode-home-template.tsx +++ b/src/components/mode-home-template.tsx @@ -19,7 +19,7 @@ export type ModeHomePill = { href?: string; onClick?: () => void; icon?: LucideIcon; - tone?: "teal" | "primary" | "danger" | "info" | "success" | "neutral" | "purple"; + tone?: "danger" | "info" | "success" | "neutral" | "primary" | "purple" | "indigo" | "rose" | "slate"; }; type ModeHomeTemplateProps = { @@ -39,13 +39,18 @@ type ModeHomeTemplateProps = { }; const pillToneClass: Record, string> = { + // Semantic roles — genuine status pills only. danger: "bg-[color:var(--danger)]", info: "bg-[color:var(--info)]", + success: "bg-[color:var(--success)]", neutral: "bg-[color:var(--text-soft)]", + // Brand accent — featured emphasis, not a taxonomy colour. primary: "bg-[color:var(--clinical-accent)]", + // Categorical scale — taxonomy/pathway dots, role-pure. purple: "bg-[color:var(--tone-purple)]", - success: "bg-[color:var(--success)]", - teal: "bg-[color:var(--clinical-accent)]", + indigo: "bg-[color:var(--tone-indigo)]", + rose: "bg-[color:var(--tone-rose)]", + slate: "bg-[color:var(--tone-slate)]", }; export function ModeHomeHero({ diff --git a/src/components/services/services-home-page.tsx b/src/components/services/services-home-page.tsx index 657a488175..132432f578 100644 --- a/src/components/services/services-home-page.tsx +++ b/src/components/services/services-home-page.tsx @@ -48,7 +48,7 @@ const commonPathways: ModeHomePill[] = [ }, { label: "Aboriginal and Torres Strait Islander", - tone: "info", + tone: "rose", href: appModeHomeHref("services", { query: "Aboriginal Torres Strait Islander services", focus: true, @@ -62,12 +62,12 @@ const commonPathways: ModeHomePill[] = [ }, { label: "Telehealth", - tone: "primary", + tone: "indigo", href: appModeHomeHref("services", { query: "telehealth services", focus: true, run: true }), }, { label: "Free", - tone: "success", + tone: "slate", href: appModeHomeHref("services", { query: "free services", focus: true, run: true }), }, {