Change all color to catpuccin

packages/frontend/src/app.tsx

@@ -173,8 +173,7 @@ export function App() {
 
 	return (
 		<main
-			className={clsx(themeDark && "dark", "bg-slate-200 dark:bg-gray-900 w-screen h-screen" +
-				" text-slate-950 dark:text-slate-100")}
+			className={clsx(themeDark && "dark", "bg-base w-screen h-screen text-text")}
 		>
 			<ToastContainer
 				pauseOnHover={false}

packages/frontend/src/components/Button/Button.tsx

@@ -19,15 +19,11 @@ export function Button(props: ButtonProps) {
 			type={props.type}
 			onClick={props.onClick} className={
 				clsx(
-					"px-2 py-1 rounded border-2 border-slate-950 dark:border-slate-100",
-					"transition-transform bg-slate-100 dark:bg-slate-900",
-					"flex items-center gap-4",
+					"px-2 py-1 rounded border-2 transition-transform bg-surface-0 flex items-center gap-4",
 					props.className,
-					disabled ? "cursor-default" :
-						"cursor-pointer hover:scale-105 hover:text-slate-100 dark:hover:text-slate-950" +
-						" hover:bg-slate-950 dark:hover:bg-slate-100 "
+					disabled ? "cursor-default border-overlay-0 text-subtext-0" :
+						"cursor-pointer hover:scale-105 text-subtext-1 border-lavender"
 					,
-					props.disabled && "!border-slate-400 dark:!border-slate-400 !text-slate-400 dark:!text-slate-400",
 				)
 			}
 		>

packages/frontend/src/components/Card/Card.tsx

@@ -11,8 +11,10 @@ export function Card(props: CardProps) {
 	return (
 		<div
 			onClick={props.onClick}
-			className={clsx("border-2 bg-slate-100 border-slate-300 dark:bg-slate-800 dark:border-slate-700" +
-				" rounded hover:shadow transition-shadow px-2 py-1", props.className)}
+			className={clsx(
+				"border-2 border-overlay-0 bg-mantle rounded hover:shadow transition-shadow px-2 py-1",
+				props.className,
+			)}
 		>
 			{ props.children }
 		</div>

packages/frontend/src/components/DropDown/DropDown.module.css

@@ -1,6 +1,5 @@
 .dropdown {
     position: relative;
-    @apply text-crust;
 }
 
 .button {
@@ -11,7 +10,7 @@
     width: 200px;
     padding: 8px 16px;
     border-radius: 4px;
-    @apply bg-text;
+    @apply bg-surface-0;
 
     svg {
         transition: 0.4s rotate;
@@ -31,7 +30,7 @@
     border-radius: 0 0 4px 4px;
     transition: 0.25s all;
     z-index: 1;
-    @apply bg-text;
+    @apply bg-surface-0;
 
     > * {
         transition-duration: 0.1s;

packages/frontend/src/components/Input/FileInput.tsx

@@ -44,8 +44,8 @@ export function FileInput(props: FileInputProps) {
 	return (
 		<label
 			className={clsx(
-				"border-2 rounded cursor-pointer bg-slate-100 dark:bg-slate-800",
-				"border-slate-950 dark:border-slate-700 p-2 h-9.5 flex items-center justify-start",
+				"border-2 rounded cursor-pointer bg-surface-1",
+				"border-lavender p-2 h-9.5 flex items-center justify-start",
 				textCss,
 			)}
 			for={id}

packages/frontend/src/components/Input/Input.tsx

@@ -21,26 +21,26 @@ interface InputProps {
 export const Input = forwardRef((props: InputProps, ref: ForwardedRef<HTMLDivElement>) =>
 	<div
 		ref={ref}
-		className={clsx("bg-slate-100 dark:bg-slate-800 rounded flex items-stretch", props.className)}
+		className={clsx("bg-surface-1 rounded flex items-stretch", props.className)}
 	>
 		{ props.leftIcon &&
-			<i className={"flex items-center border-2 border-slate-950 dark:border-slate-700 rounded-l p-1"}>
+			<i className={"flex items-center border-2 border-lavender rounded-l p-1"}>
 				{ props.leftIcon }
 			</i> }
 		<input
 			onFocusIn={props.onFocusIn} onFocusOut={props.onFocusOut}
 			value={props.value} onInput={props.onInput} type={props.type} placeholder={props.placeholder}
 			className={clsx(
-				"w-full h-full py-2 px-2 bg-transparent rounded" +
-					" focus-visible:outline-blue-500 border-slate-950" +
-					" dark:focus-visible:outline-blue-700 outline-2 focus-visible:-outline-offset-1 focus-visible:outline" +
-					" rounded border-2 dark:border-slate-700",
+				"w-full h-full py-2 px-2 bg-transparent rounded",
+				"focus-visible:outline-blue-500 border-lavender",
+				"dark:focus-visible:outline-blue-700 outline-2 focus-visible:-outline-offset-1 focus-visible:outline",
+				"rounded border-2",
 				props.leftIcon && "border-l-0 rounded-l-none",
 				props.rightIcon && "border-r-0 rounded-r-none",
 			)}
 		/>
 		{ props.rightIcon &&
-			<i className={"flex items-center border-2 border-slate-950 dark:border-slate-700 rounded-r p-1"}>
+			<i className={"flex items-center border-2 border-lavender rounded-r p-1"}>
 				{ props.rightIcon }
 			</i> }
 	</div>);

packages/frontend/src/components/Input/TextArea.tsx

@@ -12,7 +12,7 @@ interface TextAreaProps {
 export function TextArea(props: TextAreaProps) {
 	return (
 		<textarea
-			className={"rounded border-2 border-slate-700 bg-slate-100 dark:bg-slate-800 p-2"}
+			className={"rounded border-2 border-lavender bg-surface-1 p-2"}
 			value={props.value} onInput={props.onInput}
 			placeholder={props.placeHolder}
 		>

packages/frontend/src/components/List/List.tsx

@@ -103,7 +103,7 @@ export function List<T>(props: ListProps<T>) {
 				/>
 				{ props.action }
 			</div>
-			<table className={"rounded bg-slate-100 dark:bg-slate-800 table-fixed"}>
+			<table className={"rounded bg-surface-1 table-fixed"}>
 				<thead>
 					<tr>
 						{ props.columns.map((c) => {
@@ -127,7 +127,7 @@ export function List<T>(props: ListProps<T>) {
 				</thead>
 				<tbody>
 					{ data.data?.data?.map(d =>
-						<tr className={"border-t-2 border-slate-600"}>
+						<tr className={"border-t-2 border-surface-2"}>
 							{ props.line(d).filter((_, i) => props.columns[i]?.visible !== false) }
 						</tr>) }
 				</tbody>

packages/frontend/src/components/Modal/Modal.tsx

@@ -16,8 +16,7 @@ export function Modal(props: ModalProps) {
 		return (
 			<div
 				onClick={() => props.setVisible(false)}
-				className={"fixed top-0 left-0 w-screen h-screen bg-slate-100/60" +
-					" dark:bg-slate-800/60 flex items-center justify-center"}
+				className={"fixed top-0 left-0 w-screen h-screen bg-base/30 flex items-center justify-center"}
 				style={{ zIndex: 10_000 }}
 			>
 				<Card

packages/frontend/src/components/Select/Select.tsx

@@ -93,11 +93,11 @@ export function Select(props: SelectProps) {
 	return (
 		<div
 			className={clsx(
-				"bg-slate-100 dark:bg-slate-800 rounded flex items-center justify-between border-2 px-2 py-2 h-9.5 relative",
+				"rounded flex items-center justify-between border-2 px-2 py-2 h-9.5 relative",
 				visible && "rounded-b-none",
 				props.disabled === true ?
-					"border-slate-300 text-slate-300 dark:border-slate-600 dark:text-slate-600 cursor-default" :
-					"border-slate-950 dark:border-slate-700 cursor-pointer",
+					"border-overlay-0 bg-surface-0  text-subtext-0 cursor-default" :
+					"bg-surface-1 border-lavender cursor-pointer",
 			)}
 			onClick={(e) => {
 				if (input.current?.contains(e.target as Node) !== true && props.disabled !== true) {
@@ -110,18 +110,20 @@ export function Select(props: SelectProps) {
 			<ArrowDropDown className={clsx("transition", visible && "rotate-180")}/>
 			{ visible &&
 				<div
-					className={"absolute top-full -left-0.5 bg-slate-100 dark:bg-slate-800 flex flex-col " +
-					"w-[calc(100%+4px)] border-2 border-slate-950 dark:border-slate-700 rounded-b"}
+					className={clsx(
+						"absolute top-full -left-0.5 bg-surface-1 flex flex-col",
+						"w-[calc(100%+4px)] border-2 border-lavender rounded-b",
+					)}
 				>
 					{ props.searchable &&
 						<input
-							className={"bg-transparent m-1 p-1 border-2 border-slate-700 rounded focus:outline-none"}
+							className={"bg-transparent m-1 p-1 border-2 border-lavender rounded focus:outline-none"}
 							ref={input} value={search}
 							onInput={e => setSearch(e.currentTarget.value)}
 						/> }
 					{ filteredOptions.map(o =>
 						<p
-							className={"p-2 cursor-pointer hover:bg-slate-200 dark:hover:bg-slate-900"}
+							className={"p-2 cursor-pointer hover:bg-surface-0"}
 							onClick={(e) => {
 								props.onChange && props.onChange(o.value);
 								setVisible(false);

packages/frontend/src/icons/ContentCopy.tsx

@@ -4,7 +4,7 @@ export function ContentCopy(props: IconProps) {
 	return (
 		<svg
 			{...props}
-			xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"
+			xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"
 		>
 			<path
 				d={"M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 " +

packages/frontend/src/icons/QRCodeScanner.tsx

@@ -4,7 +4,7 @@ export function QRCodeScanner(props: IconProps) {
 	return (
 		<svg
 			onClick={props.onClick} className={props.className}
-			 xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"
+			 xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"
 		>
 			<path
 				d={"M80-680v-200h200v80H160v120H80Zm0 " +

packages/frontend/src/index.css

@@ -11,7 +11,7 @@
 	font-weight: 600;
 	scroll-behavior: smooth;
 	scrollbar-width: thin;
-	scrollbar-color: rgb(var(--color-base)) transparent;
+	scrollbar-color: rgb(var(--color-overlay-0)) transparent;
 }
 
 @layer base {
@@ -34,14 +34,14 @@
 		--color-subtext-1: 92, 95, 119;
 		--color-subtext-0: 108, 111, 133;
 		--color-overlay-2: 124, 127, 147;
-		--color-sverlay-1: 140, 143, 161;
-		--color-sverlay-0: 156, 160, 176;
+		--color-overlay-1: 140, 143, 161;
+		--color-overlay-0: 156, 160, 176;
 		--color-surface-2: 172, 176, 190;
 		--color-surface-1: 188, 192, 204;
 		--color-surface-0: 204, 208, 218;
 		--color-base: 239, 241, 245;
-		--color-Mantle: 230, 233, 239;
-		--color-Crust: 220, 224, 232;
+		--color-mantle: 230, 233, 239;
+		--color-crust: 220, 224, 232;
 	}
 
 	main.dark {

packages/frontend/src/invitations/ListInvitations.tsx

@@ -176,7 +176,7 @@ export function ListInvitations() {
 			/>
 			<Modal title={"QR-Code d'invitation"} visible={modalQrCode} setVisible={setModalQrCode} width={"w-auto"}>
 				<div className={"flex flex-col items-center justify-center m-4"}>
-					<div className={"bg-slate-300 p-4 rounded"}>
+					<div className={"bg-white p-4 rounded"}>
 						<QRCodeSVG bgColor={"transparent"} value={qrCode} height={"50vh"} width={"50vw"}/>
 					</div>
 				</div>

packages/frontend/src/sidebar/SideBar.tsx

@@ -26,15 +26,15 @@ export function SideBar() {
 		<div
 			className={
 				clsx(
-					"w-screen md:w-48 fixed md:static left-0 h-screen bg-black/80 md:block",
+					"w-screen md:w-48 fixed md:static left-0 h-screen bg-mantle/80 md:block",
 					visible ? "block" : "hidden",
 				)
 			} style={{ zIndex: 5_000 }}
 			onClick={() => setVisible(false)}
 		>
 			<aside
 				className={clsx(
-					"w-48 min-w-48 bg-gradient-to-b from-slate-50 dark:from-slate-800 dark:to-black h-full",
+					"w-48 min-w-48 bg-gradient-to-b from-crust to-mantle h-full",
 					"flex-col md:flex",
 					visible && "flex" || "hidden",
 				)}

packages/frontend/src/sidebar/SideBarMenu.tsx

@@ -16,9 +16,8 @@ export function SideBarMenu(props: SideBarMenuProps) {
 	return (
 		<Link
 			className={clsx(
-				"m-2 rounded py-1 px-2 transition-colors cursor-pointer" +
-				" hover:bg-slate-300 dark:hover:bg-slate-800",
-				location.pathname === props.to && "bg-slate-300 dark:bg-slate-800",
+				"m-2 rounded py-1 px-2 transition-colors cursor-pointer hover:bg-surface-0",
+				location.pathname === props.to && "bg-surface-1",
 			)}
 			to={props.to}
 		>