feat: tailwind v4 and theme builder

Author: Rahuletto

app/academia/components/Attendance/Card/index.tsx

@@ -24,7 +24,7 @@ export default function AttendanceCard({
 	return (
 		<div
 			role="cell"
-			className={`odd:bg-light-background-normal relative even:bg-light-background-light odd:dark:bg-dark-background-normal even:dark:bg-dark-background-dark grid w-full grid-cols-[3fr_1fr] grid-rows-[repeat(2,1fr)] items-center gap-3 gap-y-2 p-4 px-6 transition duration-150 md:my-0 md:flex md:items-center md:justify-between ${continuous ? "md:first:rounded-t-xl md:last:rounded-b-xl first:rounded-t-2xl last:rounded-b-2xl" : "rounded-2xl md:rounded-xl"}`}
+			className={`odd:bg-light-background-normal relative even:bg-light-background-light dark:odd:bg-dark-background-normal dark:even:bg-dark-background-dark grid w-full grid-cols-[3fr_1fr] grid-rows-[repeat(2,1fr)] items-center gap-3 gap-y-2 p-4 px-6 transition duration-150 md:my-0 md:flex md:items-center md:justify-between ${continuous ? "md:first:rounded-t-xl md:last:rounded-b-xl first:rounded-t-2xl last:rounded-b-2xl" : "rounded-2xl md:rounded-xl"}`}
 		>
 			<CourseTitle
 				courseTitle={courseTitle.split(":")[0]}

app/academia/components/Attendance/Prediction/Predictor.tsx

@@ -104,7 +104,7 @@ export default function Predictor({
 					<div
 						role="button"
 						tabIndex={0}
-						className="fixed inset-0 z-50 flex animate-fastfade items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm transition duration-150"
+						className="fixed inset-0 z-50 flex animate-fastfade items-center justify-center bg-black/50 backdrop-blur-xs transition duration-150"
 						onKeyDown={(e) => {
 							if (e.key === "Escape") onClose();
 						}}

app/academia/components/Attendance/Prediction/RangeCalendar.tsx

@@ -133,11 +133,11 @@ export function LeaveODRangeCalendar({
 						}}
 						modifiersClassNames={{
 							todayHoliday:
-								"!bg-light-error-background border border-light-error-color dark:!bg-dark-error-background !text-light-error-color border-dark-error-color dark:!text-dark-error-color !opacity-100 !rounded-full",
+								"bg-light-error-background! border border-light-error-color dark:bg-dark-error-background! text-light-error-color! border-dark-error-color dark:text-dark-error-color! opacity-100! rounded-full!",
 							today:
-								"bg-light-success-color dark:bg-dark-success-color !opacity-100 !text-white !dark:text-black !rounded-full",
+								"bg-light-success-color dark:bg-dark-success-color opacity-100! text-white! !dark:text-black rounded-full!",
 							holidays:
-								"!text-light-error-color dark:!text-dark-error-color !opacity-60 cursor-not-allowed bg-transparent dark:bg-transparent",
+								"text-light-error-color! dark:text-dark-error-color! opacity-60! cursor-not-allowed bg-transparent dark:bg-transparent",
 							leave:
 								"bg-light-error-color dark:bg-dark-error-color text-black border border-transparent hover:border-light-error-color dark:hover:border-dark-error-color hover:bg-light-error-background rounded-lg dark:hover:bg-dark-error-background hover:text-light-error-color dark:hover:text-dark-error-color",
 							od: "bg-light-success-color dark:bg-dark-success-color text-black border border-transparent hover:bg-light-success-background rounded-lg hover:border-light-success-color dark:hover:border-dark-success-color dark:hover:bg-dark-success-background hover:text-light-success-color dark:hover:text-dark-success-color",

app/academia/courses/components/Card/index.tsx

@@ -15,7 +15,7 @@ export default function CourseCard({ course }: { course: Course }) {
 		<div
 			tabIndex={0}
 			role="gridcell"
-			className="animate-fadeIn odd:bg-light-background-normal relative even:bg-light-background-light odd:dark:bg-dark-background-normal even:dark:bg-dark-background-dark duration-150 transition grid w-full grid-cols-[3fr_1fr] grid-rows-[2fr_1fr] gap-3 rounded-3xl p-4 md:flex md:min-w-[900px] md:items-center md:justify-between md:rounded-xl"
+			className="animate-fadeIn odd:bg-light-background-normal relative even:bg-light-background-light dark:odd:bg-dark-background-normal dark:even:bg-dark-background-dark duration-150 transition grid w-full grid-cols-[3fr_1fr] grid-rows-[2fr_1fr] gap-3 rounded-3xl p-4 md:flex md:min-w-[900px] md:items-center md:justify-between md:rounded-xl"
 		>
 			<div className="flex md:w-[35%] w-auto flex-col items-start gap-1 md:gap-3 lg:w-[40%] lg:flex-row lg:items-center lg:gap-8 xl:w-[40%] xl:justify-between">
 				<CourseTitle courseTitle={course.title} category={course.slotType} />

app/academia/faculties/components/SearchBar.tsx

@@ -43,7 +43,7 @@ export function SearchBar({ searchQuery, setSearchQuery }: SearchBarProps) {
 						placeholder="Search"
 						value={searchQuery}
 						onChange={(e) => setSearchQuery(e.target.value)}
-						className="relative z-10 w-[250px] animate-fastfade rounded-xl bg-light-button px-4 py-2 text-lg font-medium shadow-lg outline-none backdrop-blur-lg dark:backdrop-blur-lg transition-all duration-200 md:w-[350px] dark:bg-dark-button"
+						className="relative z-10 w-[250px] animate-fastfade rounded-xl bg-light-button px-4 py-2 text-lg font-medium shadow-lg outline-hidden backdrop-blur-lg dark:backdrop-blur-lg transition-all duration-200 md:w-[350px] dark:bg-dark-button"
 					/>
 					<div className="relative right-8 z-10 text-xl opacity-50">
 						<LuSquareSlash />

app/academia/layout.tsx

@@ -28,7 +28,7 @@ export default async function RootLayout({
 	const subscribed = data?.subscribed ?? false;
 
 	return (
-		<div className="h-screen flex-shrink-0 w-full flex flex-row bg-light-background-normal lg:p-2 transition-all duration-150 text-light-color dark:bg-dark-background-normal dark:text-dark-color">
+		<div className="h-screen shrink-0 w-full flex flex-row bg-light-background-normal lg:p-2 transition-all duration-150 text-light-color dark:bg-dark-background-normal dark:text-dark-color">
 			<div id="attendance-predict" className="z-30" />
 			<Sidebar
 				dayorder={<DayOrder />}

app/academia/library/library.tsx

@@ -68,11 +68,11 @@ export default function Library({ courses, files }: { courses: Course[]; files:
 					placeholder="Search for papers"
 					value={searchQuery}
 					onChange={(e) => handleSearch(e.target.value)}
-					className="w-full py-2 px-4 rounded-xl focus:outline-none bg-light-input dark:bg-dark-input max-w-80 text-light-color dark:text-dark-color"
+					className="w-full py-2 px-4 rounded-xl focus:outline-hidden bg-light-input dark:bg-dark-input max-w-80 text-light-color dark:text-dark-color"
 				/>
 			</div>
 
-			<div className="bg-light-background-light/50 pb-16 relative min-h-screen shadow-lg dark:bg-dark-background-darker/50 backdrop-blur-sm w-full h-full rounded-t-3xl p-4">
+			<div className="bg-light-background-light/50 pb-16 relative min-h-screen shadow-lg dark:bg-dark-background-darker/50 backdrop-blur-xs w-full h-full rounded-t-3xl p-4">
 				<div className="flex overflow-x-auto pb-4 gap-4 items-center mb-2 justify-start w-full">
 					<button
 						type="button"

app/academia/links/components/SearchBar.tsx

@@ -43,7 +43,7 @@ export function SearchBar({ searchQuery, setSearchQuery }: SearchBarProps) {
 				placeholder="Search"
 				value={searchQuery}
 				onChange={(e) => setSearchQuery(e.target.value)}
-				className="relative z-10 w-[250px] animate-fastfade rounded-xl bg-light-button px-4 py-2 text-lg font-medium shadow-lg outline-none backdrop-blur-lg dark:backdrop-blur-lg transition-all duration-200 md:w-[350px] dark:bg-dark-button"
+				className="relative z-10 w-[250px] animate-fastfade rounded-xl bg-light-button px-4 py-2 text-lg font-medium shadow-lg outline-hidden backdrop-blur-lg dark:backdrop-blur-lg transition-all duration-200 md:w-[350px] dark:bg-dark-button"
 			/>
 			<div className="relative right-8 z-10 text-xl opacity-50">
 				<LuSquareSlash />

app/auth/login/page.tsx

@@ -15,7 +15,7 @@ export default async function Login() {
 	return (
 		<main className="flex h-screen w-screen items-center justify-center bg-light-background-normal dark:bg-dark-background-dark">
 			<span
-				className="absolute z-0 top-0 left-0 bg-gradient-to-br from-light-accent/10 dark:from-dark-accent/10 to-transparent"
+				className="absolute z-0 top-0 left-0 bg-linear-to-br from-light-accent/10 dark:from-dark-accent/10 to-transparent"
 				style={{
 					width: "100%",
 					height: "100%",

app/demo/page.tsx

@@ -12,6 +12,7 @@ import type { AllResponse } from '@/types/Response'
 import Marks from '../academia/components/Marks'
 import type { Mark } from '@/types/Marks'
 import type { Course } from '@/types/Course'
+import ColorPicker from '@/components/themes/ColorPicker'
 
 export default function Demo() {
     const marks: Mark[] = json.courses.courses.map(c => {
@@ -46,10 +47,11 @@ export default function Demo() {
             testPerformance
         })
     })
-    
+
   return (
-    <div className="h-screen flex-shrink-0 w-full flex flex-row bg-light-background-normal lg:p-2 transition-all duration-150 text-light-color dark:bg-dark-background-normal dark:text-dark-color">
+    <div className="h-screen shrink-0 w-full flex flex-row bg-light-background-normal lg:p-2 transition-all duration-150 text-light-color dark:bg-dark-background-normal dark:text-dark-color">
 			<div id="attendance-predict" className="z-30" />
+            <ColorPicker />
 			<Sidebar
 				dayorder={<DayOrder />}
 				mini={