Moved bgc colors to relevant file

Features/category management

assets/_colors.css

@@ -0,0 +1,301 @@
+:root {
+  --event-red-foreground: var(--color-slate-900);
+  --event-red-background: var(--color-red-500);
+
+  --event-orange-foreground: var(--color-slate-900);
+  --event-orange-background: var(--color-orange-500);
+
+  --event-amber-foreground: var(--color-slate-900);
+  --event-amber-background: var(--color-amber-500);
+
+  --event-yellow-foreground: var(--color-slate-900);
+  --event-yellow-background: var(--color-yellow-500);
+
+  --event-lime-foreground: var(--color-slate-900);
+  --event-lime-background: var(--color-lime-500);
+
+  --event-green-foreground: var(--color-white);
+  --event-green-background: var(--color-green-600);
+
+  --event-emerald-foreground: var(--color-white);
+  --event-emerald-background: var(--color-emerald-600);
+
+  --event-teal-foreground: var(--color-white);
+  --event-teal-background: var(--color-teal-600);
+
+  --event-cyan-foreground: var(--color-white);
+  --event-cyan-background: var(--color-cyan-600);
+
+  --event-sky-foreground: var(--color-white);
+  --event-sky-background: var(--color-sky-600);
+
+  --event-blue-foreground: var(--color-white);
+  --event-blue-background: var(--color-blue-600);
+
+  --event-indigo-foreground: var(--color-white);
+  --event-indigo-background: var(--color-indigo-600);
+
+  --event-violet-foreground: var(--color-white);
+  --event-violet-background: var(--color-violet-600);
+
+  --event-purple-foreground: var(--color-white);
+  --event-purple-background: var(--color-purple-600);
+
+  --event-fuchsia-foreground: var(--color-white);
+  --event-fuchsia-background: var(--color-fuchsia-700);
+
+  --event-pink-foreground: var(--color-white);
+  --event-pink-background: var(--color-pink-700);
+
+  --event-rose-foreground: var(--color-white);
+  --event-rose-background: var(--color-pink-700);
+
+  --event-black-foreground: var(--color-white);
+  --event-black-background: var(--color-stone-500);
+
+  --event-white-foreground: var(--color-slate-900);
+  --event-white-background: var(--color-lime-100);
+}
+
+@theme inline {
+  --color-event-red-foreground: var(--event-red-foreground);
+  --color-event-red-background: var(--event-red-background);
+
+  --color-event-orange-foreground: var(--event-orange-foreground);
+  --color-event-orange-background: var(--event-orange-background);
+
+  --color-event-amber-foreground: var(--event-amber-foreground);
+  --color-event-amber-background: var(--event-amber-background);
+
+  --color-event-yellow-foreground: var(--event-yellow-foreground);
+  --color-event-yellow-background: var(--event-yellow-background);
+
+  --color-event-lime-foreground: var(--event-lime-foreground);
+  --color-event-lime-background: var(--event-lime-background);
+
+  --color-event-green-foreground: var(--event-green-foreground);
+  --color-event-green-background: var(--event-green-background);
+
+  --color-event-emerald-foreground: var(--event-emerald-foreground);
+  --color-event-emerald-background: var(--event-emerald-background);
+
+  --color-event-teal-foreground: var(--event-teal-foreground);
+  --color-event-teal-background: var(--event-teal-background);
+
+  --color-event-cyan-foreground: var(--event-cyan-foreground);
+  --color-event-cyan-background: var(--event-cyan-background);
+
+  --color-event-sky-foreground: var(--event-sky-foreground);
+  --color-event-sky-background: var(--event-sky-background);
+
+  --color-event-blue-foreground: var(--event-blue-foreground);
+  --color-event-blue-background: var(--event-blue-background);
+
+  --color-event-indigo-foreground: var(--event-indigo-foreground);
+  --color-event-indigo-background: var(--event-indigo-background);
+
+  --color-event-violet-foreground: var(--event-violet-foreground);
+  --color-event-violet-background: var(--event-violet-background);
+
+  --color-event-purple-foreground: var(--event-purple-foreground);
+  --color-event-purple-background: var(--event-purple-background);
+
+  --color-event-fuchsia-foreground: var(--event-fuchsia-foreground);
+  --color-event-fuchsia-background: var(--event-fuchsia-background);
+
+  --color-event-pink-foreground: var(--event-pink-foreground);
+  --color-event-pink-background: var(--event-pink-background);
+
+  --color-event-rose-foreground: var(--event-rose-foreground);
+  --color-event-rose-background: var(--event-rose-background);
+
+  --color-event-black-foreground: var(--event-black-foreground);
+  --color-event-black-background: var(--event-black-background);
+
+  --color-event-white-foreground: var(--event-white-foreground);
+  --color-event-white-background: var(--event-white-background);
+}
+
+.event-button,
+.event-popover,
+.event-callout {
+  --fg-color: var(--color-foreground);
+  --bg-color: var(--color-background);
+
+  transition-duration: var(--default-transition-duration);
+  transition-timing-function: var(--default-transition-timing-function);
+}
+
+.event-button {
+  color: var(--fg-color);
+  background-color: var(--bg-color);
+  text-underline-offset: .15rem;
+  transition-property: background-color, color;
+}
+.event-button:hover {
+  text-decoration: underline;
+  background-color: color-mix(in srgb, var(--bg-color) 70%, var(--color-background));
+}
+.event-button.is-hidden {
+  background-color: transparent;
+  color: var(--bg-color);
+  border: 1px dashed var(--bg-color);
+  transition-property: background-color, color, border-color;
+}
+.event-button.is-hidden:is(:hover, :focus-visible) {
+  background-color: color-mix(in srgb, var(--bg-color) 70%, var(--color-background));
+  color: var(--fg-color);
+}
+
+.event-popover {
+  background-color: color-mix(in srgb, var(--bg-color) 10%, var(--color-background));
+  border-color: color-mix(in srgb, var(--bg-color) 50%, var(--color-background));
+  transition-property: background-color, color;
+
+  hr {
+    border-color: var(--bg-color);
+  }
+}
+
+.event-callout {
+  position: relative;
+  background-color: color-mix(in srgb, var(--bg-color) 10%, var(--color-background));
+  border-top-right-radius: .2rem;
+  border-bottom-right-radius: .2rem;
+  transition-property: background-color, color;
+
+  hr {
+    border-color: var(--bg-color);
+  }
+}
+.event-callout::before {
+  display: block;
+  content: '';
+  position: absolute;
+  height: 100%;
+  inset-block: 0;
+  left: -0.5rem;
+  width: .5rem;
+  background-color: color-mix(in srgb, var(--bg-color) 70%, var(--color-background));
+  border-top-left-radius: .2rem;
+  border-bottom-left-radius: .2rem;
+  transition-property: background-color;
+  transition-duration: var(--default-transition-duration);
+  transition-timing-function: var(--default-transition-timing-function);
+}
+.event-callout:is(:hover, :focus-visible) {
+  background-color: color-mix(in srgb, var(--bg-color) 30%, var(--color-background));
+}
+.event-callout:is(:hover, :focus-visible)::before {
+  background-color: color-mix(in srgb, var(--bg-color) 90%, var(--color-background));
+}
+
+.event-callout.is-hidden {
+  border: 1px dashed var(--bg-color);
+  background-color: transparent;
+}
+.event-callout.is-hidden::before {
+  inset-block: -2px;
+  height: calc(100% + 3px);
+  background-color: color-mix(in srgb, var(--bg-color) 40%, var(--color-background));
+}
+.event-callout.is-hidden:is(:hover, :focus-visible) {
+  background-color: color-mix(in srgb, var(--bg-color) 5%, var(--color-background));
+}
+.event-callout.is-hidden:is(:hover, :focus-visible)::before {
+  background-color: color-mix(in srgb, var(--bg-color) 50%, var(--color-background));
+}
+
+.bgc {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.bgc::before {
+  content: "";
+  display: inline-block;
+  width: .75rem;
+  aspect-ratio: 1;
+  margin-right: 0.5em;
+  border-radius: .25rem;
+  background-color: var(--bg-color);
+  border: 1px solid transparent;
+}
+
+.element-red {
+  --fg-color: var(--color-event-red-foreground);
+  --bg-color: var(--color-event-red-background);
+}
+.element-orange {
+  --fg-color: var(--color-event-orange-foreground);
+  --bg-color: var(--color-event-orange-background);
+}
+.element-amber {
+  --fg-color: var(--color-event-amber-foreground);
+  --bg-color: var(--color-event-amber-background);
+}
+.element-yellow {
+  --fg-color: var(--color-event-yellow-foreground);
+  --bg-color: var(--color-event-yellow-background);
+}
+.element-lime {
+  --fg-color: var(--color-event-lime-foreground);
+  --bg-color: var(--color-event-lime-background);
+}
+.element-green {
+  --fg-color: var(--color-event-green-foreground);
+  --bg-color: var(--color-event-green-background);
+}
+.element-emerald {
+  --fg-color: var(--color-event-emerald-foreground);
+  --bg-color: var(--color-event-emerald-background);
+}
+.element-teal {
+  --fg-color: var(--color-event-teal-foreground);
+  --bg-color: var(--color-event-teal-background);
+}
+.element-cyan {
+  --fg-color: var(--color-event-cyan-foreground);
+  --bg-color: var(--color-event-cyan-background);
+}
+.element-sky {
+  --fg-color: var(--color-event-sky-foreground);
+  --bg-color: var(--color-event-sky-background);
+}
+.element-blue {
+  --fg-color: var(--color-event-blue-foreground);
+  --bg-color: var(--color-event-blue-background);
+}
+.element-indigo {
+  --fg-color: var(--color-event-indigo-foreground);
+  --bg-color: var(--color-event-indigo-background);
+}
+.element-violet {
+  --fg-color: var(--color-event-violet-foreground);
+  --bg-color: var(--color-event-violet-background);
+}
+.element-purple {
+  --fg-color: var(--color-event-purple-foreground);
+  --bg-color: var(--color-event-purple-background);
+}
+.element-fuchsia {
+  --fg-color: var(--color-event-fuchsia-foreground);
+  --bg-color: var(--color-event-fuchsia-background);
+}
+.element-pink {
+  --fg-color: var(--color-event-pink-foreground);
+  --bg-color: var(--color-event-pink-background);
+}
+.element-rose {
+  --fg-color: var(--color-event-rose-foreground);
+  --bg-color: var(--color-event-rose-background);
+}
+.element-black {
+  --fg-color: var(--color-event-black-foreground);
+  --bg-color: var(--color-event-black-background);
+}
+.element-white {
+  --fg-color: var(--color-event-white-foreground);
+  --bg-color: var(--color-event-white-background);
+}

assets/main.css

@@ -1,416 +1,32 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
+@config '../tailwind.config.js';
+
+@import "./theme.css" layer(theme);
+@import "./_colors.css" layer(theme);
+@import "./_colors.css" layer(utilities);
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
 @layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --primary: 245 58% 51%;
-    --primary-foreground: 0 0% 100%;
-
-    --secondary: 210 50% 95%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --success: 156 72% 67%;
-    --success-muted: 156 72% 90%;
-    --success-foreground: 222.2 84% 4.9%;
-
-    --ring: 222.2 84% 4.9%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 180 0 4.9%;
-    --foreground: 210 40% 98%;
-
-    --muted: 244 47% 20%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --popover: 180 0 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --card: 180 0 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --border: 217 0 10%;
-    --input: 244 47% 20%;
-
-    --primary: 245 58% 51%;
-    --primary-foreground: 0 0% 100%;
-
-    --secondary: 244 47% 20%;
-    --secondary-foreground: 210 40% 98%;
-
-    --accent: 244 47% 20%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --success: 142 72% 29%;
-    --success-muted: 142 72% 10%;
-    --success-foreground: 210 40% 98%;
-
-    --ring: 212.7 26.8% 83.9%;
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-border, currentcolor);
   }
 }
 
-@layer base {
-  * {
-    @apply border-border;
-  }
 body {
-    @apply bg-background text-foreground;
-  }
-}
-
-/* Colors */
-.event-red:not(.is-hidden) {
-  @apply text-slate-900 bg-red-500 hover:bg-red-600 focus-visible:bg-red-600
-}
-.event-orange:not(.is-hidden) {
-  @apply text-slate-900 bg-orange-500 hover:bg-orange-600 focus-visible:bg-orange-600
-}
-.event-amber:not(.is-hidden) {
-  @apply text-slate-900 bg-amber-500 hover:bg-amber-600 focus-visible:bg-amber-600
-}
-.event-yellow:not(.is-hidden) {
-  @apply text-slate-900 bg-yellow-600 hover:bg-yellow-700 focus-visible:bg-yellow-700
-}
-.event-lime:not(.is-hidden) {
-  @apply text-slate-900 bg-lime-500 hover:bg-lime-600 focus-visible:bg-lime-600
-}
-.event-green:not(.is-hidden) {
-  @apply text-white bg-green-600 hover:bg-green-700 focus-visible:bg-green-700
-}
-.event-emerald:not(.is-hidden) {
-  @apply text-white bg-emerald-600 hover:bg-emerald-700 focus-visible:bg-emerald-700
-}
-.event-teal:not(.is-hidden) {
-  @apply text-white bg-teal-600 hover:bg-teal-700 focus-visible:bg-teal-700
-}
-.event-cyan:not(.is-hidden) {
-  @apply text-white bg-cyan-600 hover:bg-cyan-700 focus-visible:bg-cyan-700
-}
-.event-sky:not(.is-hidden) {
-  @apply text-white bg-sky-600 hover:bg-sky-700 focus-visible:bg-sky-700
-}
-.event-blue:not(.is-hidden) {
-  @apply text-white bg-blue-600 hover:bg-blue-700 focus-visible:bg-blue-700
-}
-.event-indigo:not(.is-hidden) {
-  @apply text-white bg-indigo-600 hover:bg-indigo-700 focus-visible:bg-indigo-700
-}
-.event-violet:not(.is-hidden) {
-  @apply text-white bg-violet-600 hover:bg-violet-700 focus-visible:bg-violet-700
-}
-.event-purple:not(.is-hidden) {
-  @apply text-white bg-purple-600 hover:bg-purple-700 focus-visible:bg-purple-700
-}
-.event-fuchsia:not(.is-hidden) {
-  @apply text-white bg-fuchsia-600 hover:bg-fuchsia-700 focus-visible:bg-fuchsia-700
-}
-.event-pink:not(.is-hidden) {
-  @apply text-white bg-pink-700 hover:bg-pink-800 focus-visible:bg-pink-800
-}
-.event-rose:not(.is-hidden) {
-  @apply text-white bg-rose-700 hover:bg-rose-800 focus-visible:bg-rose-800
-}
-.event-black:not(.is-hidden) {
-  @apply text-white bg-stone-500 hover:bg-stone-700 focus-visible:bg-stone-700
-}
-.event-white:not(.is-hidden) {
-  @apply text-slate-900 bg-white hover:bg-yellow-200 focus-visible:bg-yellow-200 border-[1px] border-slate-300
-}
-
-.event.is-hidden {
-  border: 1px dashed transparent;
-}
-
-.event-red.is-hidden {
-  @apply text-red-600 border-red-600 hover:bg-red-100 focus-visible:bg-red-100 dark:text-white dark:hover:bg-red-950 dark:focus-visible:bg-red-950
-}
-.event-orange.is-hidden {
-  @apply text-orange-600 border-orange-600 hover:bg-orange-100 focus-visible:bg-orange-100 dark:text-white dark:hover:bg-orange-950 dark:focus-visible:bg-orange-950
-}
-.event-amber.is-hidden {
-  @apply text-red-600 border-red-600 hover:bg-red-100 focus-visible:bg-red-100 dark:text-white dark:hover:bg-red-950 dark:focus-visible:bg-red-950
-}
-.event-yellow.is-hidden {
-  @apply text-yellow-600 border-yellow-600 hover:bg-yellow-100 focus-visible:bg-yellow-100 dark:text-white dark:hover:bg-yellow-950 dark:focus-visible:bg-yellow-950
-}
-.event-lime.is-hidden {
-  @apply text-lime-600 border-lime-600 hover:bg-lime-100 focus-visible:bg-lime-100 dark:text-white dark:hover:bg-lime-950 dark:focus-visible:bg-lime-950
-}
-.event-green.is-hidden {
-  @apply text-green-600 border-green-600 hover:bg-green-700 focus-visible:bg-green-700 dark:text-white dark:hover:bg-green-950 dark:focus-visible:bg-green-950
-}
-.event-emerald.is-hidden {
-  @apply text-emerald-600 border-emerald-600 hover:bg-emerald-700 focus-visible:bg-emerald-700 dark:text-white dark:hover:bg-emerald-950 dark:focus-visible:bg-emerald-950
-}
-.event-teal.is-hidden {
-  @apply text-teal-700 border-teal-600 hover:bg-teal-700 focus-visible:bg-teal-700 dark:text-white dark:hover:bg-teal-950 dark:focus-visible:bg-teal-950
-}
-.event-cyan.is-hidden {
-  @apply text-cyan-600 border-cyan-600 hover:bg-cyan-100 focus-visible:bg-cyan-100 dark:text-white dark:hover:bg-cyan-950 dark:focus-visible:bg-cyan-950
-}
-.event-sky.is-hidden {
-  @apply text-sky-600 border-sky-600 hover:bg-sky-100 focus-visible:bg-sky-100 dark:text-white dark:hover:bg-sky-950 dark:focus-visible:bg-sky-950
-}
-.event-blue.is-hidden {
-  @apply text-blue-600 border-blue-600 hover:bg-blue-100 focus-visible:bg-blue-100 dark:text-white dark:hover:bg-blue-950 dark:focus-visible:bg-blue-950
-}
-.event-indigo.is-hidden {
-  @apply text-indigo-600 border-indigo-600 hover:bg-indigo-100 focus-visible:bg-indigo-100 dark:text-white dark:hover:bg-indigo-950 dark:focus-visible:bg-indigo-950
-}
-.event-violet.is-hidden {
-  @apply text-violet-600 border-violet-600 hover:bg-violet-100 focus-visible:bg-violet-100 dark:text-white dark:hover:bg-violet-950 dark:focus-visible:bg-violet-950
-}
-.event-purple.is-hidden {
-  @apply text-purple-600 border-purple-600 hover:bg-purple-100 focus-visible:bg-purple-100 dark:text-white dark:hover:bg-purple-950 dark:focus-visible:bg-purple-950
-}
-.event-fuchsia.is-hidden {
-  @apply text-fuchsia-600 border-fuchsia-600 hover:bg-fuchsia-100 focus-visible:bg-fuchsia-100 dark:text-white dark:hover:bg-fuchsia-950 dark:focus-visible:bg-fuchsia-950
-}
-.event-pink.is-hidden {
-  @apply text-pink-700 border-pink-700 hover:bg-pink-100 focus-visible:bg-pink-100 dark:text-white dark:hover:bg-pink-950 dark:focus-visible:bg-pink-950
-}
-.event-rose.is-hidden {
-  @apply text-rose-700 border-rose-700 hover:bg-rose-100 focus-visible:bg-rose-100 dark:text-white dark:hover:bg-rose-950 dark:focus-visible:bg-rose-950
-}
-.event-black.is-hidden {
-  @apply text-stone-700 border-stone-500 hover:bg-stone-100 focus-visible:bg-stone-100 dark:text-white dark:hover:bg-stone-950 dark:focus-visible:bg-stone-950
-}
-.event-white.is-hidden {
-  @apply text-slate-900 border-neutral-400 hover:bg-yellow-200 focus-visible:bg-yellow-200 dark:bg-neutral-900 dark:text-white dark:hover:bg-neutral-700 dark:focus-visible:bg-neutral-300
-}
-
-.dark .event-details-red {
-  --base-color: var(--color-red-800);
-}
-.dark .event-details-orange {
-  --base-color: var(--color-orange-800);
-}
-.dark .event-details-amber {
-  --base-color: var(--color-amber-800);
-}
-.dark .event-details-yellow {
-  --base-color: var(--color-yellow-800);
-}
-.dark .event-details-lime {
-  --base-color: var(--color-lime-800);
-}
-.dark .event-details-green {
-  --base-color: var(--color-green-800);
-}
-.dark .event-details-emerald {
-  --base-color: var(--color-emerald-800);
-}
-.dark .event-details-teal {
-  --base-color: var(--color-teal-800);
-}
-.dark .event-details-cyan {
-  --base-color: var(--color-cyan-800);
-}
-.dark .event-details-sky {
-  --base-color: var(--color-sky-800);
-}
-.dark .event-details-blue {
-  --base-color: var(--color-blue-800);
-}
-.dark .event-details-indigo {
-  --base-color: var(--color-indigo-800);
-}
-.dark .event-details-violet {
-  --base-color: var(--color-violet-800);
-}
-.dark .event-details-purple {
-  --base-color: var(--color-purple-800);
-}
-.dark .event-details-fuchsia {
-  --base-color: var(--color-fuchsia-800);
-}
-.dark .event-details-pink {
-  --base-color: var(--color-pink-800);
-}
-.dark .event-details-rose {
-  --base-color: var(--color-rose-800);
-}
-.dark .event-details-black {
-  --base-color: var(--color-stone-800);
-}
-.dark .event-details-white {
-  --base-color: var(--color-white);
-}
-
-.event-details-red {
-  --base-color: var(--color-red-300);
-}
-.event-details-orange {
-  --base-color: var(--color-orange-300);
-}
-.event-details-amber {
-  --base-color: var(--color-amber-300);
-}
-.event-details-yellow {
-  --base-color: var(--color-yellow-300);
-}
-.event-details-lime {
-  --base-color: var(--color-lime-300);
-}
-.event-details-green {
-  --base-color: var(--color-green-300);
-}
-.event-details-emerald {
-  --base-color: var(--color-emerald-300);
-}
-.event-details-teal {
-  --base-color: var(--color-teal-300);
-}
-.event-details-cyan {
-  --base-color: var(--color-cyan-300);
-}
-.event-details-sky {
-  --base-color: var(--color-sky-300);
-}
-.event-details-blue {
-  --base-color: var(--color-blue-300);
-}
-.event-details-indigo {
-  --base-color: var(--color-indigo-300);
-}
-.event-details-violet {
-  --base-color: var(--color-violet-300);
-}
-.event-details-purple {
-  --base-color: var(--color-purple-300);
-}
-.event-details-fuchsia {
-  --base-color: var(--color-fuchsia-300);
-}
-.event-details-pink {
-  --base-color: var(--color-pink-300);
-}
-.event-details-rose {
-  --base-color: var(--color-rose-300);
-}
-.event-details-black {
-  --base-color: var(--color-stone-300);
-}
-.event-details-white {
-  --base-color: var(--color-white);
-}
-
-.event-details {
-  --bg-color: color-mix(in srgb, var(--base-color), var(--color-white) 80%);
-  --border-color: color-mix(in srgb, var(--base-color), var(--color-white) 50%);
-  background-color: var(--bg-color);
-  border-color: var(--border-color);
-
-  hr {
-    border-color: var(--border-color);
-  }
-}
-
-.dark .event-details {
-  --bg-color: color-mix(in srgb, var(--base-color), var(--color-slate-950) 80%);
-  --border-color: color-mix(in srgb, var(--base-color), var(--color-slate-800) 50%);
-}
-
-.bgc {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-}
-
-.bgc::before {
-  content: "";
-  display: inline-block;
-  width: .75rem;
-  aspect-ratio: 1;
-  margin-right: 0.5em;
-  border-radius: .25rem;
-  background-color: red;
-  border: 1px solid transparent;
-}
-
-.bgc-red::before {
-  @apply bg-red-500;
-}
-.bgc-orange::before {
-  @apply bg-orange-500;
-}
-.bgc-amber::before {
-  @apply bg-amber-500;
-}
-.bgc-yellow::before {
-  @apply bg-yellow-500;
-}
-.bgc-lime::before {
-  @apply bg-lime-500;
-}
-.bgc-green::before {
-  @apply bg-green-500;
-}
-.bgc-emerald::before {
-  @apply bg-emerald-600;
-}
-.bgc-teal::before {
-  @apply bg-teal-600;
-}
-.bgc-cyan::before {
-  @apply bg-cyan-600;
-}
-.bgc-sky::before {
-  @apply bg-sky-600;
-}
-.bgc-blue::before {
-  @apply bg-blue-600;
-}
-.bgc-indigo::before {
-  @apply bg-indigo-600;
-}
-.bgc-violet::before {
-  @apply bg-violet-600;
-}
-.bgc-purple::before {
-  @apply bg-purple-600;
-}
-.bgc-fuchsia::before {
-  @apply bg-fuchsia-600;
-}
-.bgc-pink::before {
-  @apply bg-pink-600;
-}
-.bgc-rose::before {
-  @apply bg-rose-600;
-}
-.bgc-black::before {
-  @apply bg-black dark:border-[1px] dark:border-slate-300;
-}
-.bgc-white::before {
-  @apply bg-white border-[1px] border-slate-700;
+  color: var(--color-foreground);
+  background-color: var(--color-background);
 }
 
 .fade-enter-active,

assets/theme.css

@@ -0,0 +1,108 @@
+:root {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(222.2 84% 4.9%);
+
+  --muted: hsl(210 40% 96.1%);
+  --muted-foreground: hsl(215.4 16.3% 46.9%);
+
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(222.2 84% 4.9%);
+
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(222.2 84% 4.9%);
+
+  --border: hsl(214.3 31.8% 91.4%);
+  --input: hsl(214.3 31.8% 91.4%);
+
+  --primary: hsl(245 58% 51%);
+  --primary-foreground: hsl(0 0% 100%);
+
+  --secondary: hsl(210 50% 95%);
+  --secondary-foreground: hsl(222.2 47.4% 11.2%);
+
+  --accent: hsl(210 40% 96.1%);
+  --accent-foreground: hsl(222.2 47.4% 11.2%);
+
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: hsl(210 40% 98%);
+
+  --success: hsl(156 72% 67%);
+  --success-muted: hsl(156 72% 90%);
+  --success-foreground: hsl(222.2 84% 4.9%);
+
+  --ring: hsl(222.2 84% 4.9%);
+
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: hsl(180 0 4.9%);
+  --foreground: hsl(210 40% 98%);
+
+  --muted: hsl(244 47% 20%);
+  --muted-foreground: hsl(215 20.2% 65.1%);
+
+  --popover: hsl(180 0 4.9%);
+  --popover-foreground: hsl(210 40% 98%);
+
+  --card: hsl(180 0 4.9%);
+  --card-foreground: hsl(210 40% 98%);
+
+  --border: hsl(0, 0%, 16%);
+  --input: hsl(244 47% 20%);
+
+  --primary: hsl(245 58% 51%);
+  --primary-foreground: hsl(0 0% 100%);
+
+  --secondary: hsl(244 47% 20%);
+  --secondary-foreground: hsl(210 40% 98%);
+
+  --accent: hsl(244 47% 20%);
+  --accent-foreground: hsl(210 40% 98%);
+
+  --destructive: hsl(0 62.8% 30.6%);
+  --destructive-foreground: hsl(210 40% 98%);
+
+  --success: hsl(142 72% 29%);
+  --success-muted: hsl(142 72% 10%);
+  --success-foreground: hsl(210 40% 98%);
+
+  --ring: hsl(212.7 26.8% 83.9%);
+
+  --radius: 0.5rem;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-success: var(--success);
+  --color-success-muted: var(--success-muted);
+  --color-success-foreground: var(--success-foreground);
+
+  --color-ring: var(--ring);
+}

components/calendar/Calendar.vue

@@ -35,7 +35,7 @@ onMounted(() => {
 
 <template>
   <div class="h-full w-full relative">
-    <div class="h-full grid grid-rows-[auto,1fr]">
+    <div class="h-full grid grid-rows-[auto_1fr]">
       <CalendarMenu />
 
       <component :is="currentViewComponent" />

components/calendar/category/Table.vue

@@ -27,7 +27,7 @@ function closeDeleteDialog() {
 
     <ScrollAreaRoot class="h-36 grow overflow-hidden ">
       <ScrollAreaViewport class="w-full h-full pr-4" as-child>
-        <div class="[&:last-child]:border-0">
+        <div class="last:border-0">
           <CalendarCategoryTableRow
             v-for="item in sortedCategories"
             :key="item.id"

components/calendar/category/TableFooter.vue

@@ -109,7 +109,7 @@ async function submitNew() {
             ref="inputRef"
             v-model="categorySkeleton.name"
             type="text"
-            class="p-1 h-full w-full bg-transparent focus-visible:outline-none italic"
+            class="p-1 h-full w-full bg-transparent focus-visible:outline-hidden italic"
           >
         </template>
       </div>

components/calendar/category/TableHeader.vue

@@ -3,7 +3,7 @@ import { PhListBullets } from "@phosphor-icons/vue";
 </script>
 
 <template>
-  <header class="grid grid-cols-12 gap-4 px-2 py-4 border-b-[1px] border-b-foreground/10 font-bold mr-4">
+  <header class="grid grid-cols-12 gap-4 px-2 py-4 border-b-[1px] border-b-border font-bold mr-4">
     <div class="col-span-1 flex items-end">
       <PhListBullets size="20" />
     </div>

components/calendar/category/TableRow.vue

@@ -127,7 +127,7 @@ function handleQueryDelete() {
             ref="inputRef"
             v-model="categorySkeleton.name"
             type="text"
-            class="p-1 h-full w-full bg-transparent focus-visible:outline-none italic"
+            class="p-1 h-full w-full bg-transparent focus-visible:outline-hidden italic"
           >
         </template>
       </div>
@@ -139,7 +139,7 @@ function handleQueryDelete() {
           >
             <span
               class="bgc"
-              :class="cn(`bgc-${category.color}`)"
+              :class="cn(`element-${category.color}`)"
             >
               {{ $t(`ui.colors.${category.color}`) }}
             </span>

components/calendar/dialog/UpdateEvent.vue

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

components/calendar/event/Details.vue

@@ -62,17 +62,14 @@ function deployDeleteModal() {
 
 <template>
   <UiPopoverContent
-    class="w-96"
+    class="w-96 event-popover"
     :align="'center'"
     :align-offset="50"
     :side="'left'"
     :collision-padding="60"
     :hide-when-detached="true"
     :class="cn(
-      event.category ? `event-details-${event.category.color}` : '',
-      {
-        'event-details': event.category
-      }
+      event.category ? `element-${event.category.color}` : '',
     )"
     @focus-outside.prevent
   >
@@ -143,7 +140,7 @@ function deployDeleteModal() {
       </template>
 
       <template v-if="event.description">
-        <hr class="border-slate-500 mt-2" >
+        <hr class="border-border mt-2" >
 
         <div class="max-h-48 overflow-y-auto mt-2 text-sm text-slate-600 dark:text-slate-300">
           {{ event.description }}

components/calendar/event/Event.vue

@@ -55,10 +55,10 @@ onMounted(() => {
   <UiPopover v-model:open="isPopoverDetailsOpen">
     <UiPopoverTrigger as-child>
       <button
-        class="event text-xs px-2 py-1 block w-full text-left rounded-sm transition-colors outline-offset-1"
+        class="event-button text-xs px-2 py-1 block w-full text-left rounded-sm transition-colors outline-offset-1 cursor-pointer"
         :class="
           cn(
-            event.category ? `event-${event.category.color}` : '',
+            `element-${event.category?.color}`,
             {
               'is-hidden': event.hidden,
               'rounded-r-none': isStartEvent,

components/calendar/form/Create.vue

@@ -105,7 +105,7 @@ function handleFormCancel() {
             name="new-calendar-name"
             required
             :placeholder="$t('common.title')"
-            class="w-full py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+            class="w-full py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-blue-600"
             @input="handleNameChange"
           >
 

components/calendar/form/CreateEvent.vue

@@ -67,7 +67,7 @@ function handleCancel() {
           :placeholder="$t('entity.calendar.event.title')"
           :maxlength="120"
           pattern="([A-Za-zÀ-ÖØ-öø-ÿ0-9\s\&\-\~]+){3,120}"
-          class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600 invalid:border-red-500"
+          class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-blue-600 invalid:border-red-500"
         >
         <div class="mt-2 mb-1 text-xs opacity-50">
           {{ t('entity.calendar.event.patterns.title') }}
@@ -81,7 +81,7 @@ function handleCancel() {
           name="new-event-description"
           :placeholder="$t('entity.addDescription')"
           :maxlength="1200"
-          class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600 invalid:border-red-500"
+          class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-blue-600 invalid:border-red-500"
         />
         <div class="mt-2 mb-1 text-xs opacity-50">
           {{ t('entity.calendar.event.patterns.description') }}
@@ -141,7 +141,7 @@ function handleCancel() {
               :placeholder="$t('entity.calendar.event.addLocation')"
               :maxlength="160"
               pattern="([A-Za-zÀ-ÖØ-öø-ÿ0-9\s\&\-\~]+){3,160}"
-              class="w-full -my-1 py-2 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+              class="w-full -my-1 py-2 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-blue-600"
             >
             <div class="mt-2 mb-1 text-xs opacity-50">
               {{ t('entity.calendar.event.patterns.location') }}

components/calendar/form/Update.vue

@@ -101,7 +101,7 @@ function handleFormCancel() {
             name="new-calendar-name"
             required
             :placeholder="$t('common.title')"
-            class="w-full py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+            class="w-full py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-blue-600"
             @input="handleNameChange"
           >
 

components/calendar/form/UpdateEvent.vue

@@ -79,7 +79,7 @@ function handleCancel() {
               :placeholder="$t('entity.calendar.event.title')"
               :minlength="3"
               :maxlength="120"
-              class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600 invalid:border-red-500"
+              class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-blue-600 invalid:border-red-500"
             >
             <div class="mt-2 mb-1 text-xs opacity-50">
               {{ t('entity.calendar.event.patterns.title') }}
@@ -95,7 +95,7 @@ function handleCancel() {
           name="new-event-description"
           :placeholder="$t('entity.addDescription')"
           :maxlength="1200"
-          class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600 invalid:border-red-500"
+          class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-blue-600 invalid:border-red-500"
         />
         <div class="mt-2 mb-1 text-xs opacity-50">
           {{ t('entity.calendar.event.patterns.description') }}
@@ -159,7 +159,7 @@ function handleCancel() {
               :placeholder="$t('entity.calendar.event.addLocation')"
               :minlength="3"
               :maxlength="160"
-              class="w-full -my-1 py-2 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600 invalid:border-red-500"
+              class="w-full -my-1 py-2 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-blue-600 invalid:border-red-500"
             >
 
             <div class="mt-2 mb-1 text-xs opacity-50">

components/calendar/input/MonthList.vue

@@ -97,7 +97,7 @@ useSortable(monthSortableList, model.value, { animation: 150, handle: ".handle"
     </div>
     <div class="md:col-span-full">
       <div
-        class="border-[1px] dark:border-slate-800 p-4 rounded-sm max-h-80 overflow-y-auto"
+        class="border-[1px] border-border p-4 rounded-sm max-h-80 overflow-y-auto"
         :class="model.length ? 'md:grid md:grid-cols-12 md:gap-4 md:items-center' : ''"
       >
           <div v-if="model.length" class="hidden md:block col-span-1">

components/calendar/menu/Menu.vue

@@ -8,7 +8,7 @@ const { isReadOnly } = storeToRefs(useCalendar())
 </script>
 
 <template>
-  <header class="mt-2 grid gap-4 border-slate-200 contrast-more:border-slate-500 dark:border-slate-700 border-b-[1px]">
+  <header class="mt-2 grid gap-4 border-border border-b-[1px]">
     <div class="px-8 flex items-center justify-between gap-2">
       <menu class="flex items-center gap-2">
         <li v-if="!isReadOnly">

components/calendar/menu/MenuSubnav.vue

@@ -139,7 +139,7 @@ function toFutureFar(): void {
 
 <template>
   <div class="flex gap-2">
-    <div class="grid items-end w-40 px-4 py-2 border-slate-200 bg-white dark:bg-black dark:border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm text-sm transition-colors">
+    <div class="grid items-end w-40 px-4 py-2 bg-white dark:bg-black border-border border-x-[1px] border-t-[1px] rounded-t-sm text-sm transition-colors">
       <ClientOnly>
         <span>{{ currentDate.currentDateTitle }}</span>
 

components/calendar/search/CalendarSearch.vue

@@ -345,7 +345,7 @@ function handleCategoryUnselect(e: Category) {
                 <ComboboxPortal :to="'#searchForm'">
                   <UiCommandList
                     position="popper"
-                    class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none 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"
+                    class="w-(--radix-popper-anchor-width) rounded-md mt-2 border bg-popover 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"
                     :dismissable="true"
                   >
                     <UiCommandEmpty />

components/calendar/search/lists/CharacterCallout.vue

@@ -21,7 +21,7 @@ console.log(props.character.birth)
 </script>
 
 <template>
-  <div class="block w-full text-left py-3 px-4 border-[1px] border-slate-700 rounded-sm">
+  <div class="block w-full text-left py-3 px-4 border-[1px] border-border rounded-sm">
     <div class="grid gap-2">
       <div class="flex gap-2">
         <h2 class="font-bold">
@@ -37,7 +37,7 @@ console.log(props.character.birth)
         </div>
       </div>
 
-      <menu class="flex gap-2 border-[1px] border-slate-700 rounded-sm w-fit">
+      <menu class="flex gap-2 border-[1px] border-border rounded-sm w-fit">
         <li v-if="character.birth">
           <TooltipProvider :delay-duration="100">
             <Tooltip>

components/calendar/search/lists/EventCallout.vue

@@ -21,9 +21,9 @@ const dateDuration = computed<string | null>(() => props.event.endDate ? getRela
 
 <template>
   <button
-    class="event group relative block w-full text-left py-3 px-4 rounded-sm transition-colors"
+    class="event-callout group relative block w-full text-left py-3 px-4 cursor-pointer transition-colors"
     :class="cn(
-      event.category ? `event-${event.category.color}` : '',
+      event.category ? `element-${event.category.color}` : '',
       {
         'pt-4 is-hidden': event.hidden,
       })"

components/global/input/Color.vue

@@ -17,7 +17,7 @@ const model = defineModel<RPGColor>({ default: "white" });
       <UiSelectValue
         :placeholder="$t('ui.colors.selectOne')"
         class="bgc"
-        :class="cn(`bgc-${model}`)"
+        :class="cn(`element-${model}`)"
       />
     </UiSelectTrigger>
     <UiSelectContent :position>
@@ -29,7 +29,7 @@ const model = defineModel<RPGColor>({ default: "white" });
           class="bgc"
           :class="
             cn(
-              `bgc-${color}`,
+              `element-${color}`,
             )
           "
         >

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-full 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-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          'fixed left-1/2 top-1/2 z-50 grid w-full 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% sm:rounded-lg',
           props.class,
         )
       "

components/ui/badge/index.ts

@@ -3,7 +3,7 @@ import { type VariantProps, cva } from "class-variance-authority"
 export { default as Badge } from "./Badge.vue"
 
 export const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {

components/ui/button/Button.vue

@@ -20,13 +20,13 @@ const props = withDefaults(defineProps<Props>(), {
   <Primitive
     :as="as"
     :as-child="asChild"
-    :class="cn(buttonVariants({ variant, size }), props.class, 'group')"
+    :class="cn(buttonVariants({ variant, size }), props.class, 'group cursor-pointer')"
   >
     <slot />
 
     <span
       v-if="props.searchSlash"
-      class="h-4 p-1 ml-1 grid place-items-center text-[0.7em] leading-none font-semibold text-slate-500 bg-slate-100 border-slate-300 border-[1px] rounded-[3px] shadow-sm group-hover:text-slate-600 group-hover:bg-slate-200 group-hover:border-slate-400 transition-colors"
+      class="h-4 p-1 ml-1 grid place-items-center text-[0.7em] leading-none font-semibold text-slate-500 bg-slate-100 border-slate-300 border-[1px] rounded-[3px] shadow-xs group-hover:text-slate-600 group-hover:bg-slate-200 group-hover:border-slate-400 transition-colors"
     >
       <kbd class="-mt-[2px]">CTRL + :</kbd>
     </span>

components/ui/button/index.ts

@@ -3,7 +3,7 @@ import { type VariantProps, cva } from "class-variance-authority"
 export { default as Button } from "./Button.vue"
 
 export const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30",
+  "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30",
   {
     variants: {
       variant: {

components/ui/card/Card.vue

@@ -14,7 +14,7 @@ const emit = defineEmits(["on-click"])
 <template>
   <div
     :class="
-      cn('rounded-lg border bg-card text-card-foreground shadow-sm transition-all isolate', props.class, {
+      cn('rounded-lg border bg-card text-card-foreground shadow-xs transition-all isolate', props.class, {
         'relative outline outline-2 outline-offset-4 outline-transparent hover:-translate-y-[.2rem]':
           props.link || props.hasClick
       })
@@ -25,11 +25,11 @@ const emit = defineEmits(["on-click"])
     <NuxtLink
       v-if="props.link"
       :to="props.link"
-      class="absolute inset-0 z-10 focus-visible:outline-none"
+      class="absolute inset-0 z-10 focus-visible:outline-hidden"
     />
     <button
       v-if="props.hasClick"
-      class="absolute inset-0 z-10 focus-visible:outline-none"
+      class="absolute inset-0 z-10 focus-visible:outline-hidden"
       @click="emit('on-click')" />
   </div>
 </template>

components/ui/checkbox/Checkbox.vue

@@ -21,7 +21,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <CheckboxRoot
     v-bind="forwarded"
     :class="
-      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
          props.class)"
   >
     <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">

components/ui/command/CommandInput.vue

@@ -31,7 +31,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       auto-focus
       :class="
         cn(
-          'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
           props.class
         )
       "

components/ui/command/CommandItem.vue

@@ -21,7 +21,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-bind="forwarded"
     :class="
       cn(
-        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-highlighted:bg-accent data-disabled:pointer-events-none data-disabled:opacity-50',
         props.class
       )
     "

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-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm: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 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% sm:rounded-lg',
           props.class
         )
       "
@@ -41,7 +41,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <slot />
 
       <DialogClose
-        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
       >
         <X class="w-4 h-4" />
         <span class="sr-only">Close</span>

components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-bind="forwarded"
     :class="
       cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
         props.class
       )
     "

components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -21,7 +21,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
         inset && 'pl-8',
         props.class
       )

components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -28,7 +28,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-bind="forwarded"
     :class="
       cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
         props.class
       )
     "

components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent',
         props.class
       )
     "

components/ui/dropdown-menu/DropdownMenuTrigger.vue

@@ -7,7 +7,7 @@ const forwardedProps = useForwardProps(props)
 </script>
 
 <template>
-  <DropdownMenuTrigger class="outline-none" v-bind="forwardedProps">
+  <DropdownMenuTrigger class="outline-hidden" v-bind="forwardedProps">
     <slot />
   </DropdownMenuTrigger>
 </template>

components/ui/input/Input.vue

@@ -24,7 +24,7 @@ const modelValue = useVModel(props, "modelValue", emits, {
     v-model="modelValue"
     :class="
       cn(
-        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
         props.class
       )
     "

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-none 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 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
         )
       "

components/ui/select/SelectContent.vue

@@ -52,7 +52,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
           cn(
             'p-1',
             position === 'popper' &&
-              'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]'
+              'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)'
           )
         "
       >

components/ui/select/SelectItem.vue

@@ -26,7 +26,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
         props.class
       )
     "

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-none 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 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',
         props.class
       )
     "

components/ui/switch/Switch.vue

@@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <SwitchRoot
     v-bind="forwarded"
     :class="cn(
-      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
       props.class,
     )"
   >

components/ui/table/TableFooter.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
+  <tfoot :class="cn('border-t bg-muted/50 font-medium last:[&>tr]:border-b-0', props.class)">
     <slot />
   </tfoot>
 </template>

components/ui/tabs/TabsContent.vue

@@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
   <TabsContent
     :class="
       cn(
-        'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
         props.class
       )
     "

components/ui/tabs/TabsTrigger.vue

@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs',
         props.class
       )
     "

components/ui/tags-input/TagsInputInput.vue

@@ -17,6 +17,6 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <TagsInputInput
     v-bind="forwardedProps"
-    :class="cn('text-sm min-h-6 focus:outline-none flex-1 bg-transparent px-1', props.class)"
+    :class="cn('text-sm min-h-6 focus:outline-hidden flex-1 bg-transparent px-1', props.class)"
   />
 </template>

components/ui/toast/ToastAction.vue

@@ -13,7 +13,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ToastAction v-bind="delegatedProps" :class="cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)">
+  <ToastAction v-bind="delegatedProps" :class="cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus:group-[.destructive]:ring-destructive', props.class)">
     <slot />
   </ToastAction>
 </template>

components/ui/toast/ToastClose.vue

@@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ToastClose v-bind="delegatedProps" :class="cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)">
+  <ToastClose v-bind="delegatedProps" :class="cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-50 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600', props.class)">
     <X class="h-4 w-4" />
   </ToastClose>
 </template>

components/ui/toast/ToastViewport.vue

@@ -13,5 +13,5 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex gap-y-2 max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
+  <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-100 flex gap-y-2 max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
 </template>

components/ui/toast/index.ts

@@ -14,7 +14,7 @@ export { default as ToastProvider } from "./ToastProvider.vue"
 export { toast, useToast } from "./use-toast"
 
 export const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full",
   {
     variants: {
       variant: {

components/ui/toggle/index.ts

@@ -3,7 +3,7 @@ import { type VariantProps, cva } from "class-variance-authority"
 export { default as Toggle } from "./Toggle.vue"
 
 export const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
   {
     variants: {
       variant: {

components/world/form/Create.vue

@@ -65,7 +65,7 @@ function handleFormCancel() {
           name="new-world-name"
           required
           :placeholder="$t('common.title')"
-          class="w-full -my-1 mb-4 py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+          class="w-full -my-1 mb-4 py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-blue-600"
           @input="handleNameChange"
         >
 
@@ -74,7 +74,7 @@ function handleFormCancel() {
           v-model="worldSkeleton.description"
           name="new-world-description"
           :placeholder="$t('entity.addDescription')"
-          class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+          class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-blue-600"
         />
 
         <div class="-mx-1 grid gap-3">

components/world/form/Update.vue

@@ -79,7 +79,7 @@ function handleFormCancel() {
           name="new-world-name"
           required
           :placeholder="$t('common.title')"
-          class="w-full -my-1 py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+          class="w-full -my-1 py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-blue-600"
           @input="handleNameChange"
         >
 
@@ -88,7 +88,7 @@ function handleFormCancel() {
           v-model="worldSkeleton.description"
           name="new-world-description"
           :placeholder="$t('entity.addDescription')"
-          class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+          class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-hidden focus-visible:border-blue-600"
         />
 
         <div class="-mx-1 grid gap-3">

nuxt.config.ts

@@ -1,3 +1,5 @@
+import tailwindcss from "@tailwindcss/vite";
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
@@ -6,7 +8,6 @@ export default defineNuxtConfig({
     "@nuxtjs/supabase",
     "@pinia/nuxt",
     "@vueuse/nuxt",
-    "@nuxtjs/tailwindcss",
     "@nuxtjs/color-mode",
     "@nuxt/eslint",
     "shadcn-nuxt",
@@ -16,6 +17,12 @@ export default defineNuxtConfig({
 
   css: ["~/assets/main.css"],
 
+  vite: {
+    plugins: [
+      tailwindcss(),
+    ]
+  },
+
   i18n: {
     vueI18n: "./i18n.config.ts",
     strategy: "no_prefix",
@@ -46,13 +53,6 @@ export default defineNuxtConfig({
     }
   },
 
-  postcss: {
-    plugins: {
-      tailwindcss: {},
-      autoprefixer: {},
-    },
-  },
-
   shadcn: {
     prefix: "Ui",
     componentDir: "./components/ui"
@@ -65,5 +65,5 @@ export default defineNuxtConfig({
   },
 
   eslint: {},
-  compatibilityDate: "2025-02-27"
+  compatibilityDate: "2025-04-16",
 })

package.json

@@ -13,46 +13,48 @@
     "lint:prettier": "prettier . --check"
   },
   "dependencies": {
-    "@nuxt/eslint": "^1.1.0",
-    "@nuxthub/core": "^0.8.17",
-    "@nuxtjs/i18n": "^9.2.1",
+    "@intlify/message-compiler": "^11.1.3",
+    "@nuxt/eslint": "^1.3.0",
+    "@nuxthub/core": "^0.8.24",
+    "@nuxtjs/i18n": "^9.5.3",
     "@phosphor-icons/vue": "^2.2.1",
     "@pinia/nuxt": "^0.10.1",
-    "@vueuse/core": "^12.7.0",
-    "@vueuse/integrations": "^12.7.0",
-    "@vueuse/nuxt": "^12.7.0",
+    "@tailwindcss/vite": "^4.1.4",
+    "@vueuse/core": "^12.8.2",
+    "@vueuse/integrations": "^12.8.2",
+    "@vueuse/nuxt": "^12.8.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-vue-next": "^0.475.0",
-    "luxon": "^3.5.0",
-    "nuxt": "^3.15.4",
-    "pinia": "^3.0.1",
-    "radix-vue": "^1.9.16",
-    "shadcn-nuxt": "^0.11.4",
+    "luxon": "^3.6.1",
+    "nuxt": "^3.16.2",
+    "pinia": "^3.0.2",
+    "radix-vue": "^1.9.17",
+    "shadcn-nuxt": "^2.0.1",
     "sortablejs": "^1.15.6",
-    "tailwind-merge": "^3.0.2",
+    "tailwind-merge": "^3.2.0",
     "tailwindcss-animate": "^1.0.7",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
-    "zod": "^3.24.2"
+    "zod": "^3.24.3"
   },
   "devDependencies": {
     "@nuxtjs/color-mode": "^3.5.2",
-    "@nuxtjs/supabase": "^1.4.6",
-    "@nuxtjs/tailwindcss": "^6.13.1",
+    "@nuxtjs/supabase": "^1.5.0",
+    "@nuxtjs/tailwindcss": "^6.13.2",
     "@stylistic/eslint-plugin-js": "^3.1.0",
-    "@types/luxon": "^3.4.2",
-    "@typescript-eslint/eslint-plugin": "^8.25.0",
-    "@typescript-eslint/parser": "^8.25.0",
-    "eslint": "^9.21.0",
-    "eslint-config-prettier": "^10.0.2",
-    "eslint-plugin-prettier": "^5.2.3",
-    "eslint-plugin-vue": "^9.32.0",
+    "@types/luxon": "^3.6.2",
+    "@typescript-eslint/eslint-plugin": "^8.30.1",
+    "@typescript-eslint/parser": "^8.30.1",
+    "eslint": "^9.24.0",
+    "eslint-config-prettier": "^10.1.2",
+    "eslint-plugin-prettier": "^5.2.6",
+    "eslint-plugin-vue": "^9.33.0",
     "postcss": "^8.5.3",
-    "prettier": "^3.5.2",
-    "sass": "^1.85.1",
-    "tailwindcss": "^3.4.17",
-    "typescript": "^5.7.3",
-    "wrangler": "^3.111.0"
+    "prettier": "^3.5.3",
+    "sass": "^1.86.3",
+    "tailwindcss": "^4.1.4",
+    "typescript": "^5.8.3",
+    "wrangler": "^3.114.6"
   }
 }

pnpm-workspace.yaml

@@ -0,0 +1,6 @@
+onlyBuiltDependencies:
+  - '@parcel/watcher'
+  - esbuild
+  - sharp
+  - vue-demi
+  - workerd

tailwind.config.js

@@ -99,25 +99,5 @@ module.exports = {
       },
     },
   },
-  plugins: [
-    animate,
-    function ({ addBase, theme }) {
-      function extractColorVars(colorObj, colorGroup = "") {
-        return Object.keys(colorObj).reduce((vars, colorKey) => {
-          const value = colorObj[colorKey]
-
-          const newVars =
-            typeof value === "string"
-              ? { [`--color${colorGroup}-${colorKey}`]: value }
-              : extractColorVars(value, `-${colorKey}`)
-
-          return { ...vars, ...newVars }
-        }, {})
-      }
-
-      addBase({
-        ":root": extractColorVars(theme("colors"))
-      })
-    }
-  ]
+  plugins: [animate]
 }