more colors!

src/App.jsx

@@ -153,7 +153,7 @@ function App() {
 							type="checkbox"
 							onChange={(e) => setOnePerPage(e.target.checked)}
 						/>
-						One Datacard per Page when Printing
+						<span>One Datacard per Page when Printing</span>
 					</label>
 					<div style={{ display: "flex", alignItems: "center", gap: 4 }}>
 						<label style={{ display: "flex", alignItems: "center", gap: 4 }}>
@@ -165,7 +165,7 @@ function App() {
 									setPrimaryColor(e.target.value);
 								}}
 							></input>
-							Custom Color
+							<span> Custom Color</span>
 						</label>
 
 						{roster &&
@@ -242,12 +242,14 @@ const getPrimaryColor = (catalog) => {
 			return "#536766";
 		case "Astra Militarum":
 			return "#375441";
-		case "Chaos Daemons":
+		case "Chaos - Daemons":
-			return "#536766";
+			return "#383c46";
 		case "Chaos Space Marines":
 			return "#1d3138";
-		case "Death Guard":
+		case "Chaos - World Eaters":
-			return "#536766";
+			return "#883531";
+		case "Chaos - Death Guard":
+			return "#5c672b";
 		case "Drukhari":
 			return "#536766";
 		case "Genestealer Cults":
@@ -275,6 +277,7 @@ const getPrimaryColor = (catalog) => {
 		case "Ynnari":
 			return "#536766";
 		default:
+			console.log(catalog);
 			return "#536766";
 	}
 };

src/Roster.jsx

@@ -109,6 +109,8 @@ const Unit = ({ unit, index, catalog, onePerPage }) => {
 			!weapon.name.includes("(Melee)")
 	);
 
+	const overridePrimary = getOverridePrimary(factions, keywords);
+
 	return (
 		<div
 			className={
@@ -121,6 +123,11 @@ const Unit = ({ unit, index, catalog, onePerPage }) => {
 				border: "2px solid var(--primary-color)",
 				backgroundColor: "#DFE0E2",
 				marginBottom: 32,
+
+				"--primary-color": overridePrimary,
+				"--primary-color-transparent": overridePrimary
+					? overridePrimary + "60"
+					: "",
 			}}
 		>
 			<label
@@ -799,3 +806,18 @@ const ForceRules = ({ rules, onePerPage }) => {
 		</div>
 	);
 };
+
+const getOverridePrimary = (factions, keywords) => {
+	if (
+		factions.has("Khorne") &&
+		factions.has("Tzeentch") &&
+		factions.has("Nurgle") &&
+		factions.has("Slaanesh")
+	)
+		return;
+	if (factions.has("Khorne") || keywords.has("Khorne")) return "#883531";
+	if (factions.has("Tzeentch") || keywords.has("Tzeentch")) return "#1f3d7a";
+	if (factions.has("Nurgle") || keywords.has("Nurgle")) return "#5c672b";
+	if (factions.has("Slaanesh") || keywords.has("Slaanesh")) return "#634c74";
+	console.log(factions);
+};

src/index.css

@@ -170,7 +170,7 @@ button:focus-visible {
 
 @media print {
 	.print-display-none,
-	.print-display-none > * {
+	.print-display-none * {
 		display: none;
 	}