feat: centralize frontend Vuetify styling

frontend/src/assets/main.css

@@ -24,86 +24,110 @@ body,
     background: #f4f6f3;
 }
 
+html {
+    --app-color-background: rgb(var(--v-theme-background));
+    --app-color-on-background: rgb(var(--v-theme-on-background));
+    --app-color-surface: rgb(var(--v-theme-surface));
+    --app-color-surface-muted: rgb(var(--v-theme-surface-muted));
+    --app-color-on-surface: rgb(var(--v-theme-on-surface));
+    --app-color-control: rgb(var(--v-theme-control));
+    --app-color-control-hover: rgb(var(--v-theme-control-hover));
+    --app-color-control-focus: rgb(var(--v-theme-control-focus));
+    --app-color-border: rgb(var(--v-theme-border));
+    --app-color-border-strong: rgb(var(--v-theme-border-strong));
+    --app-color-primary: rgb(var(--v-theme-primary));
+    --app-color-on-primary: rgb(var(--v-theme-on-primary));
+    --app-color-secondary: rgb(var(--v-theme-secondary));
+    --app-color-on-secondary: rgb(var(--v-theme-on-secondary));
+    --app-color-tertiary: rgb(var(--v-theme-tertiary));
+    --app-color-on-tertiary: rgb(var(--v-theme-on-tertiary));
+    --app-color-accent: rgb(var(--v-theme-accent));
+    --app-color-accent-strong: rgb(var(--v-theme-accent-strong));
+    --app-color-highlight: rgb(var(--v-theme-highlight));
+    --app-color-danger: rgb(var(--v-theme-error));
+    --app-color-on-danger: rgb(var(--v-theme-on-error));
+    --app-text-muted: #526178;
+    --app-text-subtle: #7a8799;
+    --app-border-subtle: rgba(23, 32, 51, 0.08);
+    --app-border-muted: rgba(23, 32, 51, 0.06);
+    --app-surface-glass: rgba(251, 250, 246, 0.84);
+    --app-surface-raised: #ffffff;
+    --app-control-subtle: rgb(var(--v-theme-control));
+    --app-control-hover: rgb(var(--v-theme-control-hover));
+    --app-control-active: rgba(23, 32, 51, 0.1);
+    --app-danger-muted: rgb(var(--v-theme-error));
+    --app-shadow-popover: 0 18px 40px var(--app-border-subtle);
+}
+
+a {
+    color: inherit;
+}
+
 input::placeholder,
 textarea::placeholder {
     color: #68778a;
-    opacity: 1;
 }
 
 @layer components {
-    .btn {
-        @apply min-w-24 w-full;
-        @apply p-4;
-        @apply flex flex-nowrap gap-4 items-center justify-center;
-        @apply rounded-lg;
-        @apply capitalize text-base font-sans font-medium;
-        @apply px-10;
-        @apply cursor-pointer;
+    .app-sidebar .sidebar-control {
+        @apply flex min-w-0 items-center gap-3 rounded-[1.1rem] px-4 py-3 text-sm font-semibold no-underline transition-colors;
+        background: transparent;
+        color: #44516a;
     }
 
-    button.primary {
-        @apply min-w-24 w-full;
-        @apply p-4;
-        @apply flex flex-nowrap gap-4 items-center justify-center;
-        @apply rounded-lg;
-        @apply capitalize text-base font-sans font-medium;
-        @apply px-10;
-        @apply cursor-pointer;
-        @apply bg-hPrimary text-hOnPrimary;
-        @apply hover:brightness-125;
+    .app-sidebar .sidebar-control:hover {
+        background: var(--app-control-hover);
+        color: var(--app-color-on-surface);
     }
 
-    button.secondary {
-        @apply min-w-24 w-full;
-        @apply p-4;
-        @apply flex flex-nowrap gap-4 items-center justify-center;
-        @apply rounded-lg;
-        @apply capitalize text-base font-sans font-medium;
-        @apply px-10;
-        @apply cursor-pointer;
-        @apply bg-hSecondary text-hOnSecondary;
-        @apply hover:brightness-125;
+    .app-sidebar .sidebar-control-active {
+        background: linear-gradient(135deg, rgba(255, 138, 61, 0.14), rgba(239, 68, 68, 0.1));
+        box-shadow: inset 0 0 0 1px rgba(255, 138, 61, 0.2);
+        color: var(--app-color-on-surface);
     }
 
-    div.dialog {
-        @apply max-h-[90vh];
-        @apply place-self-center;
+    .app-sidebar .sidebar-icon-button {
+        @apply flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-[1rem] transition-colors no-underline;
+        background: transparent;
+        color: var(--app-text-muted);
     }
 
-    div.card {
-        @apply w-full max-w-[1024px];
-        @apply rounded-xl p-4;
-        @apply flex flex-col gap-4;
-        @apply bg-hSurface text-hOnSurface;
+    .app-sidebar .sidebar-icon-button:hover {
+        background: var(--app-control-hover);
+        color: var(--app-color-on-surface);
     }
 
-    /* Specific styling for dialog cards */
-    div.card.dialog {
-        @apply bg-hSurface text-hOnSurface;
-        @apply rounded-xl;
-        @apply shadow-lg;
+    .app-sidebar .sidebar-menu-surface {
+        @apply z-30 flex flex-col gap-1 rounded-[1.25rem] border p-2;
+        background: var(--app-surface-raised);
+        border-color: var(--app-border-subtle);
+        box-shadow: var(--app-shadow-popover);
     }
 
-    div.card-title {
-        @apply font-sans font-bold text-2xl;
-        @apply p-2;
-        @apply text-hOnSurface;
+    .app-sidebar .sidebar-menu-option {
+        @apply flex items-center gap-3 rounded-[0.95rem] px-4 py-3 text-left text-sm font-semibold transition-colors;
+        color: var(--app-color-on-surface);
     }
 
-    div.card-content {
-        @apply flex flex-col gap-4;
-        @apply p-2;
-        @apply text-hOnSurface;
-        @apply overflow-y-auto max-h-[60vh];
+    .app-sidebar .sidebar-menu-option:hover {
+        background: var(--app-control-hover);
     }
 
-    div.card-actions {
-        @apply p-2;
-        @apply flex flex-row gap-4 justify-end;
+    .app-sidebar .sidebar-menu-option .v-icon {
+        @apply text-base;
+        color: var(--app-text-muted);
     }
 
-    div.card-actions > * {
-        @apply w-fit;
-        @apply sm:min-w-40 min-w-0;
+    .app-sidebar .sidebar-menu-option-danger {
+        color: var(--app-danger-muted);
+    }
+
+    .app-sidebar .sidebar-menu-option-danger .v-icon {
+        color: var(--app-danger-muted);
+    }
+
+    .app-sidebar .sidebar-menu-separator {
+        @apply my-1;
+        border-top: 1px solid var(--app-border-subtle);
     }
 }