From 93ba2dc8843171407ddcb61fb428ab16597e799d 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>