Updated color scheme

app/assets/theme.css

@@ -7,6 +7,7 @@
 
   --popover: hsl(0 0% 100%);
   --popover-foreground: hsl(222.2 84% 4.9%);
+  --popover-border: rgb(175, 224, 200);
 
   --card: hsl(0 0% 100%);
   --card-foreground: hsl(222.2 84% 4.9%);
@@ -42,8 +43,9 @@
   --muted: hsl(0, 0%, 12%);
   --muted-foreground: hsl(215 20.2% 65.1%);
 
-  --popover: hsl(180 0 4.9%);
+  --popover: hsl(165, 47%, 5%);
   --popover-foreground: hsl(210 40% 98%);
+  --popover-border: hsl(165, 47%, 20%);
 
   --card: hsl(180 0 4.9%);
   --card-foreground: hsl(210 40% 98%);
@@ -81,6 +83,7 @@
 
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
+  --color-popover-border: var(--popover-border);
 
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);

app/components/calendar/category/Table.vue

@@ -51,7 +51,7 @@ function closeDeleteDialog() {
     <UiDialogContent
       :disable-outside-pointer-events="true"
       :trap-focus="true"
-      class="min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
+      class="min-w-96"
       @escape-key-down="closeDeleteDialog"
       @focus-outside="closeDeleteDialog"
       @interact-outside="closeDeleteDialog"

app/components/calendar/category/TableFooter.vue

@@ -86,7 +86,7 @@ async function submitNew() {
   <div class="border-y-[1px] border-b-foreground/10 mr-4">
     <form
       ref="rowRef"
-      class="grid grid-cols-12 items-center gap-4 p-1 bg-transparent hover:bg-slate-50 dark:bg-transparent dark:hover:bg-slate-900"
+      class="grid grid-cols-12 items-center gap-4 p-1 bg-primary/0 hover:bg-primary/15"
       @submit.prevent="submitNew"
     >
       <div v-if="currentMode === 'add'" class="col-span-1" />

app/components/calendar/category/TableRow.vue

@@ -103,8 +103,8 @@ function handleQueryDelete() {
     <form
       class="grid grid-cols-12 items-center gap-4 p-1 border-b-[1px] border-b-foreground/10"
       :class="cn(
-        { 'bg-slate-100 hover:bg-slate-200 dark:bg-slate-900 dark:hover:bg-slate-800': currentMode === 'edit' },
+        { 'bg-primary/10 hover:bg-primary/20': currentMode === 'edit' },
-        { 'bg-transparent hover:bg-slate-50 dark:bg-transparent dark:hover:bg-slate-900': currentMode !== 'edit' }
+        { 'bg-primary/0 hover:bg-primary/15': currentMode !== 'edit' }
       )"
       @submit.prevent="submitUpdate"
     >
@@ -162,9 +162,9 @@ function handleQueryDelete() {
         v-if="currentMode === 'edit' && categorySkeleton"
       >
         <UiButton
-          variant="secondary"
+          variant="default"
           size="icon"
-          class="w-6 h-6 rounded-full bg-emerald-500 hover:bg-emerald-600 text-white"
+          class="w-6 h-6 rounded-full"
           :title="$t('ui.actions.edit')"
           @click="submitUpdate"
         >
@@ -173,9 +173,9 @@ function handleQueryDelete() {
       </li>
       <li v-else-if="rowHovered">
         <UiButton
-          variant="secondary"
+          variant="destructive"
           size="icon"
-          class="w-6 h-6 rounded-full hover:bg-red-600 hover:text-white"
+          class="w-6 h-6 rounded-full"
           :title="$t('ui.actions.delete')"
           @click="handleQueryDelete"
         >

app/components/calendar/dialog/CreateEvent.vue

@@ -59,7 +59,7 @@ watch(currentRPGDate, () => {
       :collision-padding="60"
       :disable-outside-pointer-events="true"
       :trap-focus="true"
-      class="pl-3 w-[30rem] max-w-full border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
+      class="pl-3 w-[30rem] max-w-full"
       @escape-key-down.prevent="handleClosing"
       @pointer-down-outside.prevent="handleClosing"
     >

app/components/calendar/dialog/DeleteEvent.vue

@@ -27,7 +27,7 @@ function handleClosing(e: Event): void {
     <UiAlertDialogContent
       :disable-outside-pointer-events="true"
       :trap-focus="true"
-      class="min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
+      class="min-w-96"
       @escape-key-down="handleClosing"
       @focus-outside="handleClosing"
       @interact-outside="handleClosing"

app/components/calendar/input/RPGDate.vue

@@ -117,7 +117,6 @@ function handleValueReset() {
       v-if="model"
       align="start"
       side="bottom"
-      class="border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
     >
       <div class="grid grid-cols-2 items-center gap-x-2 gap-y-3">
         <UiSelect @update:model-value="handleMonthChange">

app/components/calendar/state/yearly/DayTile.vue

@@ -2,6 +2,7 @@
 import type { RPGDate } from "@@/models/Date"
 import { storeToRefs } from "pinia"
 import { computed, type ComputedRef } from "vue"
+import { cn } from "~/lib/utils"
 
 const { currentDate, defaultDate, selectDate, areDatesIdentical } = useCalendar()
 const { selectedDate, currentEvents } = storeToRefs(useCalendar())
@@ -38,14 +39,14 @@ const hasAtLeastOneEvent = computed<boolean>(() => {
 
 <template>
   <button
-    class="relative grid place-items-center aspect-square rounded-full border-2 border-transparent transition-colors after:content-[''] after:absolute after:top-1 after:right-1 after:w-[.3rem] after:h-[.3rem] after:rounded-full after:transition-colors"
+    class="relative grid place-items-center aspect-square rounded-full border-2 border-transparent transition-colors after:content-[''] after:absolute after:top-1 after:right-1 after:w-[.3rem] after:h-[.3rem] after:rounded-full after:transition-colors cursor-pointer"
-    :class="{
+    :class="cn({
-      'text-slate-500 hover:border-indigo-300 hover:text-slate-900': !isDefaultDate && !isSelectedDate,
+      'text-foreground/75 hover:border-primary hover:text-foreground': !isDefaultDate && !isSelectedDate,
-      'font-semibold text-white bg-slate-600 dark:bg-slate-800 hover:border-indigo-400': isDefaultDate && !isSelectedDate,
+      'font-semibold text-foreground bg-secondary hover:border-primary/70': isDefaultDate && !isSelectedDate,
-      'font-semibold text-white bg-indigo-500 hover:bg-indigo-600 hover:border-indigo-500': isSelectedDate,
+      'font-semibold text-primary-foreground bg-primary hover:border-primary/70': isSelectedDate,
-      'after:bg-green-600': hasAtLeastOneEvent,
+      'after:bg-primary': hasAtLeastOneEvent,
-      'after:bg-slate-950': hasAtLeastOneEvent && isSelectedDate
+      'after:bg-primary-foreground': hasAtLeastOneEvent && isSelectedDate
-    }"
+    })"
     @click="selectDate(tileDate)"
   >
     <span ref="tileRef" class="text-[.85em]">{{ dayNumber }}</span>

app/components/calendar/state/yearly/MonthTile.vue

@@ -11,7 +11,7 @@ defineProps<{
     <div class="font-medium">
       {{ month.name }}
     </div>
-    <div class="grid grid-cols-7 gap-1">
+    <div class="grid grid-cols-7">
       <CalendarStateYearlyDayTile
         v-for="day in month.days"
         :key="day"

app/components/ui/alert-dialog/AlertDialogContent.vue

@@ -31,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2rem)] max-w-3xl -translate-x-1/2 -translate-y-1/2 gap-4 border border-indigo-200 bg-background dark:bg-slate-950 dark:border-indigo-950 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-50% data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-left-50% data-[state=open]:slide-in-from-top-48% rounded-lg',
+          'fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2rem)] max-w-3xl -translate-x-1/2 -translate-y-1/2 gap-4 border border-popover-border bg-popover p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-50% data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-left-50% data-[state=open]:slide-in-from-top-48% rounded-lg',
           props.class,
         )
       "

app/components/ui/dialog/DialogContent.vue

@@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2rem)] max-w-4xl -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background border-indigo-200 dark:bg-slate-950 dark:border-indigo-950 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-50% data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-left-50% data-[state=open]:slide-in-from-top-48% rounded-lg',
+          'fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2rem)] max-w-4xl -translate-x-1/2 -translate-y-1/2 gap-4 border border-popover-border bg-popover p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-50% data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-left-50% data-[state=open]:slide-in-from-top-48% rounded-lg',
           props.class
         )
       "

app/components/ui/popover/PopoverContent.vue

@@ -37,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
         cn(
-          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'z-50 w-72 rounded-md border border-popover-border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
           props.class
         )
       "