From 7ec511a43a3909688c8570c4bd4dfae4e4438f91 Mon Sep 17 00:00:00 2001
From: xcexec <hattori.hansa@protonmail.com>
Date: Sat, 19 Oct 2024 09:56:06 +0200
Subject: [PATCH] violet-3 to black-title; added fomo-card colors; changed
 mbz-purple color/dark-background colour; changed body-background-color

---
 src/assets/oruga-tailwindcss.css                       |  2 +-
 src/assets/tailwind.css                                |  2 +-
 src/components/Dashboard/NumberDashboardTile.vue       |  2 +-
 src/components/Discussion/DiscussionListItem.vue       |  2 +-
 src/components/Event/DateCalendarIcon.vue              |  2 +-
 src/components/Event/EventMinimalistCard.vue           |  2 +-
 src/components/Event/EventParticipationCard.vue        |  4 ++--
 src/components/Event/SkeletonDateCalendarIcon.vue      |  2 +-
 src/components/Event/StartTimeIcon.vue                 |  2 +-
 src/components/FullCalendar/EventsCalendar.vue         |  2 +-
 src/components/Group/GroupCard.vue                     |  2 +-
 src/components/Group/GroupSection.vue                  |  2 +-
 src/components/Local/MoreContent.vue                   |  2 +-
 src/components/TagElement.vue                          |  2 +-
 src/views/Event/EventView.vue                          |  2 +-
 src/views/SettingsView.vue                             |  2 +-
 tailwind.config.cjs                                    | 10 ++++++----
 .../Group/__snapshots__/GroupSection.spec.ts.snap      |  4 ++--
 .../Post/__snapshots__/PostListItem.spec.ts.snap       |  2 +-
 19 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/assets/oruga-tailwindcss.css b/src/assets/oruga-tailwindcss.css
index afc56d64a..d9b2bea2c 100644
--- a/src/assets/oruga-tailwindcss.css
+++ b/src/assets/oruga-tailwindcss.css
@@ -1,5 +1,5 @@
 body {
-  @apply bg-body-background-color dark:bg-zinc-800 dark:text-white;
+  @apply bg-body-background-color dark:bg-gray-900 dark:text-white;
 }
 
 .out {
diff --git a/src/assets/tailwind.css b/src/assets/tailwind.css
index 9d1ebab06..979ed40c6 100644
--- a/src/assets/tailwind.css
+++ b/src/assets/tailwind.css
@@ -24,7 +24,7 @@
 
 @layer components {
   .mbz-card {
-    @apply block bg-mbz-yellow-alt-300 hover:bg-mbz-yellow-alt-200 text-violet-title dark:text-white dark:hover:text-white rounded-lg dark:border-violet-title shadow-md dark:bg-mbz-purple dark:hover:dark:bg-mbz-purple-400 dark:text-white dark:hover:text-white;
+    @apply block bg-white hover:bg-white text-black-title dark:text-white dark:hover:text-white rounded-lg dark:border-black-title shadow-md dark:bg-mbz-purple dark:hover:dark:bg-mbz-purple-800 dark:text-white dark:hover:text-white;
   }
 }
 
diff --git a/src/components/Dashboard/NumberDashboardTile.vue b/src/components/Dashboard/NumberDashboardTile.vue
index 28f2d9127..e4cd66a2e 100644
--- a/src/components/Dashboard/NumberDashboardTile.vue
+++ b/src/components/Dashboard/NumberDashboardTile.vue
@@ -2,7 +2,7 @@
   <article
     :class="{ 'bg-white dark:bg-black mb-4 shadow-md rounded p-4': style }"
   >
-    <p class="text-violet-3 text-4xl font-bold">{{ number }}</p>
+    <p class="text-black-title text-4xl font-bold">{{ number }}</p>
     <slot name="subtitle">
       {{ subtitle }}
     </slot>
diff --git a/src/components/Discussion/DiscussionListItem.vue b/src/components/Discussion/DiscussionListItem.vue
index 08808bcae..cd3983b23 100644
--- a/src/components/Discussion/DiscussionListItem.vue
+++ b/src/components/Discussion/DiscussionListItem.vue
@@ -26,7 +26,7 @@
     </div>
     <div class="flex-1">
       <div class="flex items-center">
-        <p class="text-violet-3 dark:text-white text-lg font-semibold flex-1">
+        <p class="text-black-title dark:text-white text-lg font-semibold flex-1">
           {{ discussion.title }}
         </p>
         <span class="" :title="formatDateTimeString(actualDate)">
diff --git a/src/components/Event/DateCalendarIcon.vue b/src/components/Event/DateCalendarIcon.vue
index 65d4c543d..ef2a2923a 100644
--- a/src/components/Event/DateCalendarIcon.vue
+++ b/src/components/Event/DateCalendarIcon.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white"
+    class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-black-title dark:text-white"
     :class="{ small }"
     :style="`--small: ${smallStyle}`"
   >
diff --git a/src/components/Event/EventMinimalistCard.vue b/src/components/Event/EventMinimalistCard.vue
index 7b93424fe..172ae2781 100644
--- a/src/components/Event/EventMinimalistCard.vue
+++ b/src/components/Event/EventMinimalistCard.vue
@@ -18,7 +18,7 @@
     </div>
     <div class="p-2">
       <h3
-        class="pb-2 text-lg leading-6 line-clamp-3 font-bold text-violet-title dark:text-white"
+        class="pb-2 text-lg leading-6 line-clamp-3 font-bold text-black-title dark:text-white"
         :lang="event.language"
         dir="auto"
       >
diff --git a/src/components/Event/EventParticipationCard.vue b/src/components/Event/EventParticipationCard.vue
index 0376ee13e..bc2d338bd 100644
--- a/src/components/Event/EventParticipationCard.vue
+++ b/src/components/Event/EventParticipationCard.vue
@@ -3,7 +3,7 @@
     class="bg-white dark:bg-mbz-purple dark:hover:bg-mbz-purple-400 mb-5 mt-4 pb-2 md:p-0 rounded-t-lg"
   >
     <div
-      class="bg-mbz-yellow-alt-100 flex p-2 text-violet-title rounded-t-lg"
+      class="bg-mbz-yellow-alt-100 flex p-2 text-black-title rounded-t-lg"
       dir="auto"
     >
       <figure
@@ -79,7 +79,7 @@
               }"
             >
               <h3
-                class="line-clamp-3 font-bold mx-auto my-0 text-lg text-violet-title dark:text-white"
+                class="line-clamp-3 font-bold mx-auto my-0 text-lg text-black-title dark:text-white"
                 :lang="participation.event.language"
               >
                 {{ participation.event.title }}
diff --git a/src/components/Event/SkeletonDateCalendarIcon.vue b/src/components/Event/SkeletonDateCalendarIcon.vue
index b31ad986d..f66f208d5 100644
--- a/src/components/Event/SkeletonDateCalendarIcon.vue
+++ b/src/components/Event/SkeletonDateCalendarIcon.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white"
+    class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-black-title dark:text-white"
   >
     <div class="datetime-container-content">
       <div class="ml-2 h-8 bg-slate-200 w-16"></div>
diff --git a/src/components/Event/StartTimeIcon.vue b/src/components/Event/StartTimeIcon.vue
index 77fd04869..3a591c2b8 100644
--- a/src/components/Event/StartTimeIcon.vue
+++ b/src/components/Event/StartTimeIcon.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="starttime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white"
+    class="starttime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-black-title dark:text-white"
     :class="{ small }"
     :style="`--small: ${smallStyle}`"
   >
diff --git a/src/components/FullCalendar/EventsCalendar.vue b/src/components/FullCalendar/EventsCalendar.vue
index 92c85dec7..9edcba324 100644
--- a/src/components/FullCalendar/EventsCalendar.vue
+++ b/src/components/FullCalendar/EventsCalendar.vue
@@ -2,7 +2,7 @@
   <FullCalendar ref="calendarRef" :options="calendarOptions">
     <template v-slot:eventContent="arg">
       <span
-        class="text-violet-3 dark:text-white font-bold m-2"
+        class="text-black-title dark:text-white font-bold m-2"
         :title="arg.event.title"
       >
         {{ arg.event.title }}
diff --git a/src/components/Group/GroupCard.vue b/src/components/Group/GroupCard.vue
index 9b5151fc4..c2ba1ab92 100644
--- a/src/components/Group/GroupCard.vue
+++ b/src/components/Group/GroupCard.vue
@@ -27,7 +27,7 @@
       <div class="flex gap-1 mb-2">
         <div class="overflow-hidden flex-auto">
           <h3
-            class="text-2xl leading-5 line-clamp-3 font-bold text-violet-3 dark:text-white"
+            class="text-2xl leading-5 line-clamp-3 font-bold text-black-title dark:text-white"
             dir="auto"
           >
             {{ displayName(group) }}
diff --git a/src/components/Group/GroupSection.vue b/src/components/Group/GroupSection.vue
index 038409c04..f5e4cd9d7 100644
--- a/src/components/Group/GroupSection.vue
+++ b/src/components/Group/GroupSection.vue
@@ -6,7 +6,7 @@
       'border-yellow-1': !privateSection,
     }"
   >
-    <div class="flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title">
+    <div class="flex items-stretch py-3 px-1 bg-yellow-1 text-black-title">
       <div class="flex flex-1 gap-1">
         <o-icon :icon="icon" custom-size="36" />
         <h2 class="text-2xl font-medium mt-0">{{ title }}</h2>
diff --git a/src/components/Local/MoreContent.vue b/src/components/Local/MoreContent.vue
index 3360e1eb5..452265b8d 100644
--- a/src/components/Local/MoreContent.vue
+++ b/src/components/Local/MoreContent.vue
@@ -52,7 +52,7 @@
       class="flex h-full justify-between self-end flex-col p-2 pt-1 md:p-4 md:pt-2 leading-normal w-full"
     >
       <h2
-        class="mb-2 text-xl font-bold tracking-tight text-violet-title dark:text-white"
+        class="mb-2 text-xl font-bold tracking-tight text-black-title dark:text-white"
       >
         <slot name="default" />
       </h2>
diff --git a/src/components/TagElement.vue b/src/components/TagElement.vue
index 25448d0fa..69b704cc5 100644
--- a/src/components/TagElement.vue
+++ b/src/components/TagElement.vue
@@ -26,7 +26,7 @@ const typeClasses = computed(() => {
   switch (props.variant) {
     default:
     case "light":
-      return "bg-purple-3 dark:text-violet-3";
+      return "bg-purple-3 dark:text-black-title";
     case "info":
       return "bg-mbz-info dark:text-black";
     case "warning":
diff --git a/src/views/Event/EventView.vue b/src/views/Event/EventView.vue
index 25e54c9bb..643d1297a 100755
--- a/src/views/Event/EventView.vue
+++ b/src/views/Event/EventView.vue
@@ -138,7 +138,7 @@
                     eventCategory
                   }}</tag>
                   <router-link
-                    class="rounded-md truncate text-sm text-violet-title py-1 bg-purple-3 dark:text-violet-3 category"
+                    class="rounded-md truncate text-sm text-black-title py-1 bg-purple-3 dark:text-black-title category"
                     v-for="tag in event?.tags ?? []"
                     :key="tag.title"
                     :to="{ name: RouteName.TAG, params: { tag: tag.title } }"
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index 5442ca434..c5c593402 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container mx-auto">
-    <h1 class="text-violet-3 dark:text-white">{{ t("Settings") }}</h1>
+    <h1 class="text-black-title dark:text-white">{{ t("Settings") }}</h1>
     <div class="flex flex-wrap gap-4">
       <SettingsMenu class="max-w-xs w-full" />
       <div class="flex-1">
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 443e028c5..096899d0c 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -6,10 +6,12 @@ module.exports = {
       colors: {
         primary: "#1e7d97",
         secondary: "#ffd599",
-        "violet-title": "#3c376e",
+        "black-title": "#000000",
         tag: "rgb(var(--color-tag) / <alpha-value>)",
         "frama-violet": "#725794",
         "frama-orange": "#cc4e13",
+        "fomo-card-1": "#21bef3",
+        "fomo-card-2": "#9e9ef2",
         "mbz-yellow": {
           DEFAULT: "#FFD599",
           50: "#FFFFFF",
@@ -37,7 +39,7 @@ module.exports = {
           900: "#452D02",
         },
         "mbz-purple": {
-          DEFAULT: "#424056",
+          DEFAULT: "#2a3646",
           50: "#CAC9D7",
           100: "#BEBDCE",
           200: "#A8A6BC",
@@ -46,7 +48,7 @@ module.exports = {
           500: "#666385",
           600: "#54516D",
           700: "#424056",
-          800: "#292836",
+          800: "#1e293b",
           900: "#111016",
         },
         "mbz-bluegreen": {
@@ -67,7 +69,7 @@ module.exports = {
         "violet-3": "#3c376e",
         "yellow-1": "#ffd599",
         "yellow-2": "#fff1de",
-        "body-background-color": "#efeef4",
+        "body-background-color": "#f0ecf4",
         "purple-1": "#757199",
         "purple-2": "#cdcaea",
         "purple-3": "#e6e4f4",
diff --git a/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap b/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap
index 7dc38b91c..8b061ff39 100644
--- a/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap
+++ b/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`GroupSection > renders group section with basic informations 1`] = `
 "<section class=\\"flex flex-col mb-3 border-2 border-mbz-purple\\">
-  <div class=\\"flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title\\">
+  <div class=\\"flex items-stretch py-3 px-1 bg-yellow-1 text-black-title\\">
     <div class=\\"flex flex-1 gap-1\\"><span class=\\"o-icon\\"><i class=\\"mdi mdi-bullhorn 36\\"></i></span>
       <h2 class=\\"text-2xl font-medium mt-0\\">My group section</h2>
     </div><a href=\\"/@my_group@remotedomain.net/p\\" class=\\"self-center\\">View all</a>
@@ -16,7 +16,7 @@ exports[`GroupSection > renders group section with basic informations 1`] = `
 
 exports[`GroupSection > renders public group section 1`] = `
 "<section class=\\"flex flex-col mb-3 border-2 border-yellow-1\\">
-  <div class=\\"flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title\\">
+  <div class=\\"flex items-stretch py-3 px-1 bg-yellow-1 text-black-title\\">
     <div class=\\"flex flex-1 gap-1\\"><span class=\\"o-icon\\"><i class=\\"mdi mdi-bullhorn 36\\"></i></span>
       <h2 class=\\"text-2xl font-medium mt-0\\">My group section</h2>
     </div><a href=\\"/@my_group@remotedomain.net/p\\" class=\\"self-center\\">View all</a>
diff --git a/tests/unit/specs/components/Post/__snapshots__/PostListItem.spec.ts.snap b/tests/unit/specs/components/Post/__snapshots__/PostListItem.spec.ts.snap
index cc0c700c7..a94d0d342 100644
--- a/tests/unit/specs/components/Post/__snapshots__/PostListItem.spec.ts.snap
+++ b/tests/unit/specs/components/Post/__snapshots__/PostListItem.spec.ts.snap
@@ -32,7 +32,7 @@ exports[`PostListItem > renders post list item with tags 1`] = `
   <div data-v-6ca7cc69=\\"\\" class=\\"flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1\\">
     <h3 data-v-6ca7cc69=\\"\\" class=\\"text-xl color-violet-3 line-clamp-3 mb-2 font-bold\\" lang=\\"en\\">My Blog Post</h3>
     <p data-v-6ca7cc69=\\"\\" class=\\"flex gap-2\\"><span data-v-6ca7cc69=\\"\\" aria-hidden=\\"true\\" class=\\"material-design-icon clock-icon\\" role=\\"img\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z\\"><!--v-if--></path></svg></span><span data-v-6ca7cc69=\\"\\" dir=\\"auto\\" class=\\"\\">Dec 2, 2020</span></p>
-    <div data-v-6ca7cc69=\\"\\" class=\\"flex flex-wrap gap-y-0 gap-x-2\\"><span data-v-6ca7cc69=\\"\\" aria-hidden=\\"true\\" class=\\"material-design-icon tag-icon\\" role=\\"img\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M5.5,7A1.5,1.5 0 0,1 4,5.5A1.5,1.5 0 0,1 5.5,4A1.5,1.5 0 0,1 7,5.5A1.5,1.5 0 0,1 5.5,7M21.41,11.58L12.41,2.58C12.05,2.22 11.55,2 11,2H4C2.89,2 2,2.89 2,4V11C2,11.55 2.22,12.05 2.59,12.41L11.58,21.41C11.95,21.77 12.45,22 13,22C13.55,22 14.05,21.77 14.41,21.41L21.41,14.41C21.78,14.05 22,13.55 22,13C22,12.44 21.77,11.94 21.41,11.58Z\\"><!--v-if--></path></svg></span><span data-v-6955ca87=\\"\\" data-v-6ca7cc69=\\"\\" class=\\"rounded-md truncate text-sm text-violet-title px-2 py-1 bg-purple-3 dark:text-violet-3\\">A tag</span></div>
+    <div data-v-6ca7cc69=\\"\\" class=\\"flex flex-wrap gap-y-0 gap-x-2\\"><span data-v-6ca7cc69=\\"\\" aria-hidden=\\"true\\" class=\\"material-design-icon tag-icon\\" role=\\"img\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M5.5,7A1.5,1.5 0 0,1 4,5.5A1.5,1.5 0 0,1 5.5,4A1.5,1.5 0 0,1 7,5.5A1.5,1.5 0 0,1 5.5,7M21.41,11.58L12.41,2.58C12.05,2.22 11.55,2 11,2H4C2.89,2 2,2.89 2,4V11C2,11.55 2.22,12.05 2.59,12.41L11.58,21.41C11.95,21.77 12.45,22 13,22C13.55,22 14.05,21.77 14.41,21.41L21.41,14.41C21.78,14.05 22,13.55 22,13C22,12.44 21.77,11.94 21.41,11.58Z\\"><!--v-if--></path></svg></span><span data-v-6955ca87=\\"\\" data-v-6ca7cc69=\\"\\" class=\\"rounded-md truncate text-sm text-black-title px-2 py-1 bg-purple-3 dark:text-black-title\\">A tag</span></div>
     <!--v-if-->
     <!--v-if-->
   </div>