Centralize accent color

src/app/(event)/[event-code]/edit/loading.tsx

@@ -6,20 +6,20 @@ export default function Loading() {
       <HeaderSpacer />
 
       <div className="flex w-full flex-wrap items-center justify-between md:flex-row">
-        <div className="h-12 w-3/4 rounded-3xl bg-gray-200 md:w-1/2 dark:bg-[#343249]" />
-        <div className="w-50 hidden h-10 rounded-full bg-gray-200 dark:bg-[#343249]" />
+        <div className="bg-loading h-12 w-3/4 rounded-3xl md:w-1/2" />
+        <div className="w-50 bg-loading hidden h-10 rounded-full" />
       </div>
 
       <div className="grid w-full grid-cols-1 grid-rows-[auto] gap-y-4 md:grow md:grid-cols-[200px_auto] md:grid-rows-[auto_auto] md:gap-x-4 md:gap-y-4">
-        <div className="hidden h-20 rounded-3xl bg-gray-200 md:block dark:bg-[#343249]" />
-        <div className="col-span-3 hidden h-20 rounded-3xl bg-gray-200 md:block dark:bg-[#343249]" />
-        <div className="hidden h-20 rounded-3xl bg-gray-200 md:col-start-1 md:row-start-2 md:block dark:bg-[#343249]" />
-        <div className="h-120 hidden rounded-3xl bg-gray-200 md:col-span-10 md:col-start-2 md:row-span-10 md:row-start-2 md:block dark:bg-[#343249]" />
-        <div className="hidden h-60 rounded-3xl bg-gray-200 md:col-start-1 md:row-start-11 md:block dark:bg-[#343249]" />
+        <div className="bg-loading hidden h-20 rounded-3xl md:block" />
+        <div className="bg-loading col-span-3 hidden h-20 rounded-3xl md:block" />
+        <div className="bg-loading hidden h-20 rounded-3xl md:col-start-1 md:row-start-2 md:block" />
+        <div className="h-120 bg-loading hidden rounded-3xl md:col-span-10 md:col-start-2 md:row-span-10 md:row-start-2 md:block" />
+        <div className="bg-loading hidden h-60 rounded-3xl md:col-start-1 md:row-start-11 md:block" />
 
-        <div className="h-20 w-3/4 rounded-3xl bg-gray-200 md:hidden" />
-        <div className="h-20 w-3/4 rounded-3xl bg-gray-200 md:hidden" />
-        <div className="h-100 rounded-3xl bg-gray-200 md:hidden" />
+        <div className="bg-loading h-20 w-3/4 rounded-3xl md:hidden" />
+        <div className="bg-loading h-20 w-3/4 rounded-3xl md:hidden" />
+        <div className="h-100 bg-loading rounded-3xl md:hidden" />
       </div>
     </div>
   );

src/app/(event)/[event-code]/loading.tsx

@@ -6,19 +6,19 @@ export default function Loading() {
       <HeaderSpacer />
 
       <div className="flex w-full flex-wrap items-center justify-between md:flex-row">
-        <div className="h-12 w-1/2 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+        <div className="bg-loading h-12 w-1/2 rounded-3xl" />
 
-        <div className="w-50 h-10 rounded-full bg-gray-200 dark:bg-[#343249]" />
+        <div className="w-50 bg-loading h-10 rounded-full" />
       </div>
 
       <div className="mb-8 flex h-full flex-col gap-4 md:mb-0 md:flex-row">
-        <div className="h-96 w-full rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+        <div className="bg-loading h-96 w-full rounded-3xl" />
 
         <div className="h-fit w-full shrink-0 space-y-4 overflow-y-auto md:w-80">
-          <div className="hidden h-20 rounded-3xl bg-gray-200 md:block dark:bg-[#343249]" />
+          <div className="bg-loading hidden h-20 rounded-3xl md:block" />
 
-          <div className="h-70 hidden rounded-3xl bg-gray-200 md:block dark:bg-[#343249]" />
-          <div className="h-20 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+          <div className="h-70 bg-loading hidden rounded-3xl md:block" />
+          <div className="bg-loading h-20 rounded-3xl" />
         </div>
       </div>
     </div>

src/app/(event)/[event-code]/page-client.tsx

@@ -47,7 +47,7 @@ export default function ClientPage({
       <HeaderSpacer />
       <div className="md:flex md:justify-between">
         <div className="flex items-center space-x-2">
-          <h1 className="text-2xl dark:border-gray-400">{eventName}</h1>
+          <h1 className="text-2xl">{eventName}</h1>
           <EventInfoDrawer eventRange={eventRange} />
         </div>
         <div className="mt-2 flex w-full flex-wrap-reverse items-end justify-end gap-2 md:mt-0 md:flex-row md:items-center">
@@ -86,9 +86,9 @@ export default function ClientPage({
 
         {/* Sidebar for attendees */}
         <div className="md:top-25 fixed bottom-1 left-0 w-full shrink-0 px-8 md:sticky md:h-full md:w-80 md:space-y-4 md:px-0">
-          <div className="rounded-3xl bg-[#FFFFFF] p-4 shadow-md md:space-y-6 md:p-6 md:shadow-none dark:bg-[#343249]">
+          <div className="bg-panel rounded-3xl p-4 shadow-md md:space-y-6 md:p-6 md:shadow-none">
             <h2 className="mb-2 text-lg font-semibold">Attendees</h2>
-            <ul className="flex flex-wrap space-x-2 space-y-0 text-gray-700 dark:text-gray-200">
+            <ul className="flex flex-wrap space-x-2 space-y-0">
               {participants.length === 0 && (
                 <li className="text-sm italic opacity-50">No attendees yet</li>
               )}
@@ -111,13 +111,13 @@ export default function ClientPage({
             </ul>
           </div>
 
-          <div className="hidden rounded-3xl bg-[#FFFFFF] p-6 md:block dark:bg-[#343249]">
+          <div className="bg-panel hidden rounded-3xl p-6 md:block">
             <EventInfo eventRange={eventRange} />
           </div>
 
-          <div className="hidden rounded-3xl bg-[#FFFFFF] p-4 text-sm md:block dark:bg-[#343249]">
+          <div className="bg-panel hidden rounded-3xl p-4 text-sm md:block">
             Displaying event in
-            <span className="text-blue dark:text-red ml-1 font-bold">
+            <span className="text-accent ml-1 font-bold">
               <TimeZoneSelector
                 id="timezone-select"
                 value={timezone}

src/app/(event)/[event-code]/painting/loading.tsx

@@ -6,22 +6,22 @@ export default function Loading() {
       <HeaderSpacer />
 
       <div className="flex w-full flex-wrap items-center justify-between md:flex-row">
-        <div className="h-12 w-1/2 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+        <div className="bg-loading h-12 w-1/2 rounded-3xl" />
 
-        <div className="h-10 w-40 rounded-full bg-gray-200 dark:bg-[#343249]" />
+        <div className="bg-loading h-10 w-40 rounded-full" />
       </div>
 
       <div className="mb-8 flex h-full flex-col gap-4 md:mb-0 md:flex-row">
         <div className="h-fit w-full shrink-0 space-y-6 overflow-y-auto md:w-80">
           <div className="space-y-3">
-            <div className="h-8 w-3/4 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
-            <div className="h-8 w-1/2 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+            <div className="bg-loading h-8 w-3/4 rounded-3xl" />
+            <div className="bg-loading h-8 w-1/2 rounded-3xl" />
           </div>
-          <div className="h-70 hidden rounded-3xl bg-gray-200 md:block dark:bg-[#343249]" />
-          <div className="h-20 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+          <div className="h-70 bg-loading hidden rounded-3xl md:block" />
+          <div className="bg-loading h-20 rounded-3xl" />
         </div>
 
-        <div className="h-96 w-full rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+        <div className="bg-loading h-96 w-full rounded-3xl" />
       </div>
     </div>
   );

src/app/(event)/[event-code]/painting/page-client.tsx

@@ -104,7 +104,7 @@ export default function ClientPage({
       {/* Header and Button Row */}
       <div className="flex w-full flex-wrap justify-between md:flex-row">
         <div className="flex items-center space-x-2">
-          <h1 className="text-2xl dark:border-gray-400">{eventName}</h1>
+          <h1 className="text-2xl">{eventName}</h1>
           <EventInfoDrawer eventRange={eventRange} />
         </div>
 
@@ -135,7 +135,7 @@ export default function ClientPage({
         <div className="md:top-25 h-fit w-full shrink-0 space-y-6 overflow-y-auto md:sticky md:w-80">
           <div className="w-fit">
             <p
-              className={`text-red text-right text-xs ${errors.displayName ? "visible" : "invisible"}`}
+              className={`text-error text-right text-xs ${errors.displayName ? "visible" : "invisible"}`}
             >
               {errors.displayName ? errors.displayName : "Error Placeholder"}
             </p>
@@ -148,22 +148,22 @@ export default function ClientPage({
               placeholder="add your name"
               className={`inline-block w-auto border-b bg-transparent px-1 focus:outline-none ${
                 errors.displayName
-                  ? "border-red placeholder:text-red"
-                  : "border-violet dark:border-gray-400"
+                  ? "border-error placeholder:text-error"
+                  : "border-gray-400"
               }`}
             />
             <br />
             add your availabilities here
           </div>
 
           {/* Desktop-only Event Info */}
-          <div className="hidden rounded-3xl bg-[#FFFFFF] p-6 md:block dark:bg-[#343249]">
+          <div className="bg-panel hidden rounded-3xl p-6 md:block">
             <EventInfo eventRange={eventRange} />
           </div>
 
-          <div className="rounded-3xl bg-[#FFFFFF] p-4 text-sm dark:bg-[#343249]">
+          <div className="bg-panel rounded-3xl p-4 text-sm">
             Displaying event in
-            <span className="text-blue dark:text-red ml-1 font-bold">
+            <span className="text-accent ml-1 font-bold">
               <TimeZoneSelector
                 id="timezone-select"
                 value={timeZone}

src/app/dashboard/loading.tsx

@@ -9,11 +9,11 @@ export default function Loading() {
 
       <div className="flex h-full flex-col gap-4 md:flex-row">
         <div className="flex flex-col gap-4">
-          <div className="h-10 w-40 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
-          <div className="h-10 w-40 rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+          <div className="bg-loading h-10 w-40 rounded-3xl" />
+          <div className="bg-loading h-10 w-40 rounded-3xl" />
         </div>
 
-        <div className="h-120 w-full rounded-3xl bg-gray-200 dark:bg-[#343249]" />
+        <div className="h-120 bg-loading w-full rounded-3xl" />
       </div>
     </div>
   );

src/app/dashboard/page-client.tsx

@@ -33,15 +33,15 @@ export default function ClientPage({
       <HeaderSpacer />
       <h1 className="text-2xl font-bold">Dashboard</h1>
       {loggedIn === false && (
-        <div className="bg-blue/20 dark:bg-red/20 flex items-center gap-4 rounded-3xl p-4">
+        <div className="bg-accent/20 flex items-center gap-4 rounded-3xl p-4">
           <InfoCircledIcon className="h-5 w-5" />
           <div>
             <h2 className="text-lg font-bold">Logged in as a Guest</h2>
             <div>
               This data is only available from this browser.{" "}
               <Link
                 href="/register"
-                className="text-blue dark:text-red cursor-pointer font-bold hover:underline"
+                className="text-accent cursor-pointer font-bold hover:underline"
               >
                 Create an account
               </Link>{" "}
@@ -67,7 +67,7 @@ export default function ClientPage({
             setTab={setTab}
           />
         </div>
-        <div className="w-full rounded-3xl bg-[#FFFFFF] p-4 dark:bg-[#343249]">
+        <div className="bg-panel w-full rounded-3xl p-4">
           <EventGrid
             events={tab === "created" ? created_events : participated_events}
           />
@@ -95,8 +95,8 @@ function DashboardTabButton({
       className={cn(
         "text-nowrap rounded-full px-4 py-2",
         currentTab === value
-          ? "bg-blue dark:bg-red text-white"
-          : "hover:bg-blue/25 dark:hover:bg-red/25 cursor-pointer transition",
+          ? "bg-accent text-white"
+          : "hover:bg-accent/25 cursor-pointer transition",
         !isMobile && "w-full text-left",
       )}
       onClick={() => setTab(value)}

src/app/error.tsx

@@ -16,9 +16,7 @@ export default function EventErrorPage({
 
   return (
     <div className="flex h-[calc(100vh-200px)] flex-col items-center justify-center rounded-lg p-8 text-center">
-      <h2 className="mb-4 text-2xl font-bold text-gray-800 dark:text-white">
-        Oops! Something went wrong.
-      </h2>
+      <h2 className="mb-4 text-2xl font-bold">Oops! Something went wrong.</h2>
 
       <p className="text-red mb-6 max-w-md">{error.message}</p>
 

src/app/page.tsx

@@ -40,7 +40,7 @@ export default function Home() {
       </section>
 
       {/* Why Plancake Section */}
-      <section className="dark:bg-violet bg-white py-16">
+      <section>
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="bg-bone rounded-3xl p-8 dark:bg-gray-300">
             <div className="grid items-center gap-12 md:grid-cols-2">
@@ -51,35 +51,35 @@ export default function Home() {
 
               {/* Content - centered on mobile, left-aligned on desktop */}
               <div className="order-2 text-center md:order-2 md:text-left">
-                <h2 className="bubble-text text-violet dark:text-bone mb-8 text-4xl md:text-6xl">
+                <h2 className="bubble-text text-violet mb-8 text-4xl md:text-6xl">
                   why
                   <br />
-                  <span className="text-violet dark:text-bone">plancake?</span>
+                  <span className="text-violet">plancake?</span>
                 </h2>
                 <div className="space-y-6">
                   <div>
-                    <h3 className="text-violet dark:text-bone mb-2 text-xl font-semibold">
+                    <h3 className="text-violet mb-2 text-xl font-semibold">
                       Smart Planning
                     </h3>
-                    <p className="text-violet dark:text-bone">
+                    <p className="text-violet">
                       Intelligently suggest optimal meeting times based on
                       everyone&apos;s availability.
                     </p>
                   </div>
                   <div>
-                    <h3 className="text-violet dark:text-bone mb-2 text-xl font-semibold">
+                    <h3 className="text-violet mb-2 text-xl font-semibold">
                       Easy Coordination
                     </h3>
-                    <p className="text-violet dark:text-bone">
+                    <p className="text-violet">
                       Share a simple link and watch as responses stack up
                       without the back-and-forth.
                     </p>
                   </div>
                   <div>
-                    <h3 className="text-violet dark:text-bone mb-2 text-xl font-semibold">
+                    <h3 className="text-violet mb-2 text-xl font-semibold">
                       Perfect Results
                     </h3>
-                    <p className="text-violet dark:text-bone">
+                    <p className="text-violet">
                       Get the ideal meeting time that works for everyone with an
                       intuitive graph view.
                     </p>
@@ -92,7 +92,7 @@ export default function Home() {
       </section>
 
       {/* Golden Stack Recipe */}
-      <section className="dark:bg-violet bg-white py-16">
+      <section className="py-16">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="mb-12 text-center">
             <h2 className="bubble-text text-4xl md:text-6xl">

src/components/checkbox.tsx

@@ -11,14 +11,11 @@ export default function Checkbox(props: CheckboxProps) {
       <input
         type="checkbox"
         id="confirm"
-        className="checked:border-blue checked:bg-blue dark:checked:border-red dark:checked:bg-red peer h-4 w-4 appearance-none rounded-sm border border-gray-300"
+        className="checked:border-accent checked:bg-accent peer h-4 w-4 appearance-none rounded-sm border border-gray-300"
         checked={checked}
         onChange={(e) => onChange(e.target.checked)}
       />
-      <label
-        htmlFor="confirm"
-        className="peer-checked:text-blue dark:peer-checked:text-red text-sm"
-      >
+      <label htmlFor="confirm" className="peer-checked:text-accent text-sm">
         {label}
       </label>
     </div>

src/components/header-spacer.tsx

@@ -1,5 +1,3 @@
 export default function HeaderSpacer() {
-  return (
-    <div className="h-25 dark:bg-violet sticky top-0 z-20 w-full bg-white" />
-  );
+  return <div className="h-25 bg-background sticky top-0 z-20 w-full" />;
 }

src/components/header/account-dropdown.tsx

@@ -69,7 +69,7 @@ const DropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(
       <DropdownMenu.Item
         className={cn(
           "flex flex-row items-center justify-between gap-4",
-          "text-md cursor-pointer rounded-sm p-2 leading-none hover:outline-none data-[highlighted]:bg-red-200 dark:data-[highlighted]:bg-violet-400",
+          "text-md data-[highlighted]:bg-accent/50 cursor-pointer rounded-sm p-2 leading-none hover:outline-none",
         )}
         ref={ref}
         onSelect={onSelect}

src/components/link-text.tsx

@@ -2,11 +2,7 @@ import { ReactNode } from "react";
 
 export default function LinkText({ children }: { children: ReactNode }) {
   return (
-    <span
-      className={
-        "hover:text-blue dark:hover:text-red cursor-pointer hover:underline"
-      }
-    >
+    <span className={"hover:text-accent cursor-pointer hover:underline"}>
       {children}
     </span>
   );

src/components/select.tsx

@@ -39,8 +39,8 @@ export default function CustomSelect({
       <Select.Trigger
         id={id}
         className={cn(
-          "text-blue dark:text-red inline-flex items-center rounded-md text-start focus:outline-none",
-          disabled && "text-violet/50 cursor-not-allowed dark:text-white/50",
+          "text-accent inline-flex items-center rounded-md text-start focus:outline-none",
+          disabled && "text-foreground/50 cursor-not-allowed",
           className,
         )}
         aria-label="Custom select"
@@ -57,7 +57,7 @@ export default function CustomSelect({
       </Select.Trigger>
 
       <Select.Portal>
-        <Select.Content className="dark:bg-violet z-50 max-h-60 overflow-auto rounded-md border border-gray-400 bg-white shadow-lg dark:shadow-violet-700">
+        <Select.Content className="bg-background z-50 max-h-60 overflow-auto rounded-md border border-gray-400 shadow-lg dark:shadow-violet-700">
           <Select.Viewport className="p-1">
             {options.map((option) => (
               <SelectItem key={option.value.toString()} value={option.value}>
@@ -83,7 +83,7 @@ const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
       <Select.Item
         ref={ref}
         value={value.toString()}
-        className="data-[highlighted]:bg-blue dark:data-[highlighted]:bg-red dark:data-[highlighted]:text-bone relative flex h-[30px] select-none items-center rounded px-6 leading-none hover:outline-none data-[disabled]:pointer-events-none data-[disabled]:text-gray-400 data-[highlighted]:text-white"
+        className="data-[highlighted]:bg-accent relative flex h-[30px] select-none items-center rounded px-6 leading-none hover:outline-none data-[disabled]:pointer-events-none data-[disabled]:text-gray-400 data-[highlighted]:text-white"
       >
         <Select.ItemText>{children}</Select.ItemText>
         <Select.ItemIndicator className="absolute left-2 inline-flex w-4 items-center justify-center">

src/features/dashboard/components/date-range-row.tsx

@@ -9,7 +9,7 @@ export default function DateRangeRow({
 }: DateRangeRowProps) {
   return (
     <div
-      className={`bg-blue/50 dark:bg-red/50 w-fit rounded-full px-3 py-1 text-xs font-bold text-blue-500 dark:text-red-100`}
+      className={`bg-accent/50 text-accent-text w-fit rounded-full px-3 py-1 text-xs font-bold`}
     >
       {formatDates(startDate, endDate)}
     </div>

src/features/dashboard/components/event.tsx

@@ -43,8 +43,8 @@ export default function DashboardEvent({
 
   return (
     <Link href={`/${code}`}>
-      <div className="dark:bg-violet flex w-full flex-col rounded-lg bg-white p-4 transition-shadow hover:shadow-lg hover:shadow-black/25">
-        <div className="dark:bg-violet rounded bg-white text-lg font-bold leading-tight">
+      <div className="bg-background flex w-full flex-col rounded-lg p-4 transition-shadow hover:shadow-lg hover:shadow-black/25">
+        <div className="bg-background rounded text-lg font-bold leading-tight">
           {title}
         </div>
         <div className="text-sm opacity-50">{code}</div>