Updated packages and some other colours

app/assets/theme.css

@@ -24,7 +24,7 @@
   --accent: hsl(11, 100%, 86%);
   --accent-foreground: hsl(222.2 84% 4.9%);
 
-  --destructive: hsl(0, 62%, 49%);
+  --destructive: hsl(0, 100%, 63%);
   --destructive-foreground: hsl(210 40% 98%);
 
   --success: hsl(156 72% 67%);
@@ -59,8 +59,8 @@
   --secondary: hsl(222.2 47.4% 11.2%);
   --secondary-foreground: hsl(210 40% 98%);
 
-  --accent: hsl(11, 78%, 67%);
-  --accent-foreground: hsl(210 40% 98%);
+  --accent: hsl(11, 87%, 69%);
+  --accent-foreground: hsl(222.2 84% 4.9%);
 
   --destructive: hsl(0, 62%, 49%);
   --destructive-foreground: hsl(210 40% 98%);

app/components/calendar/input/EventCategories.vue

@@ -37,7 +37,7 @@ const filteredCategories = computed(() =>
         role="combobox"
         :aria-expanded="isPopoverOpen"
         aria-controls="event-categories"
-        class="relative w-full max-w-full h-fit justify-between"
+        class="relative w-full max-w-full h-fit justify-between hover:bg-secondary hover:text-primary-foreground"
       >
         <template v-if="!model.length">
           {{ props.placeholder }}
@@ -57,7 +57,7 @@ const filteredCategories = computed(() =>
     </UiPopoverTrigger>
     <UiPopoverContent
       id="event-categories"
-      align="start"
+      :align="'start'"
       side="bottom"
       :collision-padding="50"
       class="w-fit h-[33vh] p-0"

app/components/calendar/input/EventCategory.vue

@@ -36,7 +36,7 @@ const filteredCategories = computed(() =>
         role="combobox"
         :aria-expanded="isPopoverOpen"
         aria-controls="event-category"
-        class="w-full max-w-full justify-between"
+        class="w-full max-w-full justify-between hover:bg-secondary hover:text-primary-foreground"
       >
         <template v-if="!model">
           {{ props.placeholder }}

app/components/calendar/input/RPGDate.vue

@@ -4,6 +4,7 @@ import type { RPGDate } from "@@/models/Date";
 import {
   PhXCircle
 } from "@phosphor-icons/vue"
+import { cn } from "~/lib/utils";
 
 const model = defineModel<RPGDate | null>()
 
@@ -134,7 +135,7 @@ function handleValueReset() {
 
         <UiInput v-model="model.year" type="number" />
 
-        <hr class="col-span-2" >
+        <hr class="col-span-2" />
 
         <div class="col-span-2">
           <div v-if="monthData" class="grid grid-cols-7 gap-1">
@@ -142,10 +143,10 @@ function handleValueReset() {
               v-for="day in monthData.days"
               :key="`popover-day-grid-${id}-${day}`"
               class="aspect-square rounded-full text-[.8em] transition-colors"
-              :class="{
-                'hover:bg-indigo-200 dark:hover:bg-indigo-700': day !== model.day,
-                'bg-indigo-500 hover:bg-indigo-700 text-white': day === model.day
-              }"
+              :class="cn({
+                'hover:bg-accent hover:text-accent-foreground': day !== model.day,
+                'bg-primary text-primary-foreground hover:bg-accent hover:text-accent-foreground': day === model.day
+              })"
               @click="setModelDay(day)"
             >
               {{ day }}

app/components/global/input/Color.vue

@@ -13,7 +13,15 @@ const model = defineModel<RPGColor>({ default: "white" });
 
 <template>
   <UiSelect v-model="model">
-    <UiSelectTrigger :id :class="cn({ 'h-9': theme === 'subtle' })">
+    <UiSelectTrigger
+      :id
+      :class="cn(
+        ['hover:bg-secondary hover:text-primary-foreground'],
+        {
+          'h-9': theme === 'subtle'
+        }
+      )"
+    >
       <UiSelectValue
         :placeholder="$t('ui.colors.selectOne')"
         class="bgc"

app/components/ui/select/SelectContent.vue

@@ -39,7 +39,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       style="max-height: var(--radix-select-content-available-height)"
       :class="
         cn(
-          'select-content relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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',
+          'select-content relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border border-popover-border bg-popover text-popover-foreground shadow-md 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',
           position === 'popper' &&
             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           props.class

app/components/ui/select/SelectTrigger.vue

@@ -20,7 +20,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background dark:bg-slate-950 contrast-more:dark:bg-slate-900 px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background hover:bg-secondary hover:text-primary-foreground px-3 py-2 text-sm ring-offset-background transition-colors placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50',
         props.class
       )
     "