From cfaea678291708f01c2ad7e97e96d28d09b90081 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Thu, 24 Jul 2025 20:30:31 +0200
Subject: [PATCH] Refactor CSS variables and update button variant in
 CatchPhrase and [slug] components

---
 app/assets/css/main.css             | 10 ++++++++--
 app/components/home/CatchPhrase.vue | 12 ++++++++++++
 app/pages/writings/[slug].vue       |  9 ++++-----
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index ec997ee..2dcd858 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -3,6 +3,12 @@
 
 @plugin "@tailwindcss/typography";
 
-body {
-    @apply bg-white dark:bg-neutral-950;
+:root {
+    --ui-white: #ffffff;
+    --ui-black: #000000;
+}
+
+.dark {
+    --ui-white: #ffffff;
+    --ui-black: #000000;
 }
\ No newline at end of file
diff --git a/app/components/home/CatchPhrase.vue b/app/components/home/CatchPhrase.vue
index e99a9dc..f70b397 100644
--- a/app/components/home/CatchPhrase.vue
+++ b/app/components/home/CatchPhrase.vue
@@ -33,3 +33,15 @@ const { t } = useI18n({
   }
 }
 </i18n>
+
+<style scoped>
+@keyframes wave {
+    0%,
+    100% {
+      transform: rotate(-3deg) scale(1);
+    }
+    50% {
+      transform: rotate(3deg) scale(1.1);
+    }
+  }
+</style>
diff --git a/app/pages/writings/[slug].vue b/app/pages/writings/[slug].vue
index da5bc3f..e6508e9 100644
--- a/app/pages/writings/[slug].vue
+++ b/app/pages/writings/[slug].vue
@@ -122,21 +122,20 @@ function scrollToSection(id: string) {
           side: 'bottom',
           sideOffset: 8,
         }"
-        :ui="{ content: 'cursor-pointer z-50 bg-[#fff] dark:bg-neutral-900 shadow-lg rounded-md ring ring-gray-100 dark:ring-neutral-800 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto' }"
       >
         <UButton
           :label="t('toc')"
-          variant="subtle"
+          variant="solid"
           color="neutral"
-          class="cursor-pointer text-white"
+          class="cursor-pointer"
         />
 
         <template #content>
-          <div class="p-2 z-50 bg-white flex flex-col gap-y-2">
+          <div class="p-2 z-50 flex flex-col gap-y-2">
             <div
               v-for="link in post!.body!.toc!.links"
               :key="link.id"
-              class="inline bg-white"
+              class="inline"
             >
               <UButton
                 size="lg"