refactor(ui): replace CSS module files with Tailwind classnames

Extend tailwind.config.js with cs-* design tokens and font families so
components can reference bg-cs-surface, text-cs-orange, font-cs-mono etc.
Delete all 11 index.module.css files and inline their styles as Tailwind
utility classes. Dynamic color-mix() values derived from runtime props
remain as style={} attributes.

Author: ziracmo

crowdsec-docs/src/components/docs/AccessCard/index.module.css

@@ -1,5 +1,4 @@
 import React from "react";
-import styles from "./index.module.css";
 
 type Props = {
 	icon?: React.ReactNode;
@@ -28,18 +27,23 @@ function DefaultIcon() {
 
 export default function AccessCard({ icon, title, command, ctaLabel, ctaHref }: Props) {
 	return (
-		<div className={styles.card}>
-			<div className={styles.top}>
-				<div className={styles.iconWrap}>{icon ?? <DefaultIcon />}</div>
-				<div className={styles.title}>{title}</div>
+		<div className="flex flex-col gap-3 py-5 px-[22px] bg-cs-surface border border-cs-border-hi rounded-xl my-4">
+			<div className="flex items-center gap-3">
+				<div className="w-[38px] h-[38px] rounded-[9px] bg-cs-orange-soft border border-[color-mix(in_srgb,var(--cs-orange)_25%,transparent)] flex items-center justify-center text-cs-orange shrink-0 [&>svg]:w-[18px] [&>svg]:h-[18px]">
+					{icon ?? <DefaultIcon />}
+				</div>
+				<div className="text-[14.5px] font-semibold text-cs-ink">{title}</div>
 			</div>
 			{command && (
-				<div className={styles.command}>
+				<div className="flex items-center gap-2 py-[9px] px-[14px] bg-cs-bg border border-cs-border rounded-[7px] font-cs-mono text-[12.5px] text-cs-teal">
 					<span style={{ color: "var(--cs-ink-mute)" }}>$</span>
 					<span>{command}</span>
 				</div>
 			)}
-			<a href={ctaHref} className={styles.cta}>
+			<a
+				href={ctaHref}
+				className="inline-flex items-center gap-1.5 py-2 px-[18px] rounded-[7px] bg-cs-orange text-[#0a1120] text-[13px] font-semibold no-underline transition-opacity duration-150 self-start hover:opacity-[0.85] hover:no-underline hover:text-[#0a1120]"
+			>
 				{ctaLabel} →
 			</a>
 		</div>

crowdsec-docs/src/components/docs/AccessCard/index.tsx

@@ -16,14 +16,7 @@ type Props = {
 
 export default function ChallengeGrid({ challenges }: Props) {
 	return (
-		<div
-			style={{
-				display: "grid",
-				gridTemplateColumns: "repeat(2, 1fr)",
-				gap: 14,
-				margin: "20px 0",
-			}}
-		>
+		<div className="grid grid-cols-2 gap-[14px] my-5">
 			{challenges.map((c, i) => {
 				const iconEl =
 					c.icon ??
@@ -34,16 +27,9 @@ export default function ChallengeGrid({ challenges }: Props) {
 					<div
 						// biome-ignore lint/suspicious/noArrayIndexKey: challenges have no stable id
 						key={i}
-						style={{
-							position: "relative",
-							padding: 18,
-							borderRadius: 12,
-							background: "var(--cs-surface)",
-							border: "1px solid var(--cs-border)",
-							overflow: "hidden",
-						}}
+						className="relative p-[18px] rounded-xl bg-cs-surface border border-cs-border overflow-hidden"
 					>
-						<div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 10 }}>
+						<div className="flex items-center gap-3 mb-[10px]">
 							{iconEl && (
 								<div
 									style={{
@@ -62,29 +48,12 @@ export default function ChallengeGrid({ challenges }: Props) {
 									<div style={{ width: 17, height: 17, display: "flex" }}>{iconEl}</div>
 								</div>
 							)}
-							<div
-								style={{
-									fontFamily: "var(--cs-font-mono)",
-									fontSize: 11,
-									color: "var(--cs-ink-mute)",
-									letterSpacing: "0.10em",
-								}}
-							>
+							<div className="font-cs-mono text-[11px] text-cs-ink-mute tracking-[0.10em]">
 								{String(i + 1).padStart(2, "0")}
 							</div>
 						</div>
-						<div
-							style={{
-								fontSize: 15,
-								fontWeight: 600,
-								color: "var(--cs-ink)",
-								marginBottom: 6,
-								letterSpacing: "-0.005em",
-							}}
-						>
-							{c.title}
-						</div>
-						<div style={{ fontSize: 13.5, color: "var(--cs-ink-dim)", lineHeight: 1.55 }}>{c.body}</div>
+						<div className="text-[15px] font-semibold text-cs-ink mb-[6px] tracking-[-0.005em]">{c.title}</div>
+						<div className="text-[13.5px] text-cs-ink-dim leading-[1.55]">{c.body}</div>
 					</div>
 				);
 			})}

crowdsec-docs/src/components/docs/ChallengeGrid/index.module.css

@@ -1,16 +1,14 @@
-import styles from "./index.module.css";
-
 export default function ConsoleMockup() {
 	return (
-		<div className={styles.wrap}>
-			<div className={styles.titleBar}>
-				<div className={styles.dot} style={{ background: "#FF5F57" }} />
-				<div className={styles.dot} style={{ background: "#FFBD2E" }} />
-				<div className={styles.dot} style={{ background: "#28C840" }} />
-				<span className={styles.titleText}>app.crowdsec.net — Console</span>
+		<div className="rounded-xl overflow-hidden border border-cs-border-hi bg-cs-surface my-6">
+			<div className="flex items-center gap-1.5 py-[10px] px-4 bg-cs-surface-2 border-b border-cs-border">
+				<div className="w-2.5 h-2.5 rounded-full" style={{ background: "#FF5F57" }} />
+				<div className="w-2.5 h-2.5 rounded-full" style={{ background: "#FFBD2E" }} />
+				<div className="w-2.5 h-2.5 rounded-full" style={{ background: "#28C840" }} />
+				<span className="ml-2 font-cs-mono text-[11px] text-cs-ink-mute">app.crowdsec.net — Console</span>
 			</div>
 			<svg
-				className={styles.svg}
+				className="w-full block"
 				viewBox="0 0 800 420"
 				xmlns="http://www.w3.org/2000/svg"
 				aria-label="CrowdSec Console dashboard preview"