Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #33 from AlexisNP/features/light-theme

Browse Source 
Add the light theme features
This commit is contained in:
AlexisNP
2024-09-01 21:21:20 +02:00
committed by GitHub
parent 386b714f3c 7f2b5e2811
commit fc91e4825a
23 changed files with 289 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app.vue
View File

@@ -38,12 +38,20 @@ const useIdFunction = () => useId()
<NuxtLayout> <NuxtLayout>
<ConfigProvider :use-id="useIdFunction"> <ConfigProvider :use-id="useIdFunction">
<div class="h-full grid grid-cols-[auto_1fr]"> <div class="h-full grid grid-cols-[auto_1fr] dark:bg-black transition-colors">
<Sidebar /> <Sidebar />
<NuxtPage/> <div class="wrapper shadow-body-light dark:shadow-body-dark transition-all">
<NuxtPage />
</div>
</div> </div>
</ConfigProvider> </ConfigProvider>
</NuxtLayout> </NuxtLayout>
</div> </div>
</template> </template>
<style lang="scss" scoped>
.wrapper > * {
height: 100%;
}
</style>

129
assets/main.css
View File

@@ -19,8 +19,8 @@
--border: 214.3 31.8% 91.4%; --border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%;
--primary: 222.2 47.4% 11.2%; --primary: 245 58% 51%;
--primary-foreground: 210 40% 98%; --primary-foreground: 0 0% 100%;
--secondary: 210 40% 96.1%; --secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%; --secondary-foreground: 222.2 47.4% 11.2%;
@@ -37,28 +37,28 @@
} }
.dark { .dark {
--background: 222.2 84% 4.9%; --background: 180 0 4.9%;
--foreground: 210 40% 98%; --foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%; --muted: 244 47% 20%;
--muted-foreground: 215 20.2% 65.1%; --muted-foreground: 215 20.2% 65.1%;
--popover: 222.2 84% 4.9%; --popover: 180 0 4.9%;
--popover-foreground: 210 40% 98%; --popover-foreground: 210 40% 98%;
--card: 222.2 84% 4.9%; --card: 180 0 4.9%;
--card-foreground: 210 40% 98%; --card-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%; --border: 217 0 10%;
--input: 217.2 32.6% 17.5%; --input: 244 47% 20%;
--primary: 210 40% 98%; --primary: 245 58% 51%;
--primary-foreground: 222.2 47.4% 11.2%; --primary-foreground: 0 0% 100%;
--secondary: 217.2 32.6% 17.5%; --secondary: 244 47% 20%;
--secondary-foreground: 210 40% 98%; --secondary-foreground: 210 40% 98%;
--accent: 217.2 32.6% 17.5%; --accent: 244 47% 20%;
--accent-foreground: 210 40% 98%; --accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%; --destructive: 0 62.8% 30.6%;
@@ -133,70 +133,128 @@
@apply text-white bg-stone-500 hover:bg-stone-700 @apply text-white bg-stone-500 hover:bg-stone-700
} }
.event-white { .event-white {
@apply text-slate-900 bg-white hover:bg-yellow-200 @apply text-slate-900 bg-white hover:bg-yellow-200 border-[1px] border-slate-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 { .event-details-red {
--base-color: var(--color-red-800); --base-color: var(--color-red-300);
} }
.event-details-orange { .event-details-orange {
--base-color: var(--color-orange-800); --base-color: var(--color-orange-300);
} }
.event-details-amber { .event-details-amber {
--base-color: var(--color-amber-800); --base-color: var(--color-amber-300);
} }
.event-details-yellow { .event-details-yellow {
--base-color: var(--color-yellow-800); --base-color: var(--color-yellow-300);
} }
.event-details-lime { .event-details-lime {
--base-color: var(--color-lime-800); --base-color: var(--color-lime-300);
} }
.event-details-green { .event-details-green {
--base-color: var(--color-green-800); --base-color: var(--color-green-300);
} }
.event-details-emerald { .event-details-emerald {
--base-color: var(--color-emerald-800); --base-color: var(--color-emerald-300);
} }
.event-details-teal { .event-details-teal {
--base-color: var(--color-teal-800); --base-color: var(--color-teal-300);
} }
.event-details-cyan { .event-details-cyan {
--base-color: var(--color-cyan-800); --base-color: var(--color-cyan-300);
} }
.event-details-sky { .event-details-sky {
--base-color: var(--color-sky-800); --base-color: var(--color-sky-300);
} }
.event-details-blue { .event-details-blue {
--base-color: var(--color-blue-800); --base-color: var(--color-blue-300);
} }
.event-details-indigo { .event-details-indigo {
--base-color: var(--color-indigo-800); --base-color: var(--color-indigo-300);
} }
.event-details-violet { .event-details-violet {
--base-color: var(--color-violet-800); --base-color: var(--color-violet-300);
} }
.event-details-purple { .event-details-purple {
--base-color: var(--color-purple-800); --base-color: var(--color-purple-300);
} }
.event-details-fuchsia { .event-details-fuchsia {
--base-color: var(--color-fuchsia-800); --base-color: var(--color-fuchsia-300);
} }
.event-details-pink { .event-details-pink {
--base-color: var(--color-pink-800); --base-color: var(--color-pink-300);
} }
.event-details-rose { .event-details-rose {
--base-color: var(--color-rose-800); --base-color: var(--color-rose-300);
} }
.event-details-black { .event-details-black {
--base-color: var(--color-stone-800); --base-color: var(--color-stone-300);
} }
.event-details-white { .event-details-white {
--base-color: var(--color-white); --base-color: var(--color-white);
} }
.event-details { .event-details {
--bg-color: color-mix(in srgb, var(--base-color), var(--color-slate-950) 80%); --bg-color: color-mix(in srgb, var(--base-color), var(--color-white) 80%);
--border-color: color-mix(in srgb, var(--base-color), var(--color-slate-800) 50%); --border-color: color-mix(in srgb, var(--base-color), var(--color-white) 50%);
background-color: var(--bg-color); background-color: var(--bg-color);
border-color: var(--border-color); border-color: var(--border-color);
@@ -205,6 +263,11 @@
} }
} }
.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%);
}
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: all .5s ease; transition: all .5s ease;

22
components/calendar/CalendarEventDetails.vue
View File

@@ -62,7 +62,7 @@ function deployDeleteModal() {
<template> <template>
<UiPopoverContent <UiPopoverContent
class=" w-96 bg-slate-900 border-slate-800" class=" w-96 "
:align="'center'" :align="'center'"
:align-offset="50" :align-offset="50"
:side="'left'" :side="'left'"
@@ -96,15 +96,15 @@ function deployDeleteModal() {
<div class="mb-1 space-y-1"> <div class="mb-1 space-y-1">
<template v-if="event.location"> <template v-if="event.location">
<p class="text-sm italic opacity-75 flex items-center gap-1"> <p class="text-sm italic dark:opacity-75 flex items-center gap-1">
<PhMapPinArea size="16" weight="fill" /> {{ event.location }} <PhMapPinArea size="16" weight="fill" /> {{ event.location }}
</p> </p>
</template> </template>
<p class="text-sm italic opacity-75 flex items-center gap-1"> <p class="text-sm italic dark:opacity-75 flex items-center gap-1">
<PhAlarm size="16" weight="fill" /> {{ dateDifference }} <PhAlarm size="16" weight="fill" /> {{ dateDifference }}
</p> </p>
<template v-if="dateDuration"> <template v-if="dateDuration">
<p class="text-sm italic opacity-75 flex items-center gap-1"> <p class="text-sm italic dark:opacity-75 flex items-center gap-1">
<PhHourglassMedium size="16" weight="fill" /> Pendant {{ dateDuration }} <PhHourglassMedium size="16" weight="fill" /> Pendant {{ dateDuration }}
</p> </p>
</template> </template>
@@ -113,13 +113,13 @@ function deployDeleteModal() {
<template v-if="event.category || event.secondaryCategories"> <template v-if="event.category || event.secondaryCategories">
<ul class="flex gap-1"> <ul class="flex gap-1">
<li v-if="event.category"> <li v-if="event.category">
<UiBadge class="mix-blend-luminosity font-bold bg-gray-600 lowercase" variant="secondary"> <UiBadge class="mix-blend-luminosity font-bold bg-gray-400 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-600 lowercase" variant="secondary">
{{ event.category?.name }} {{ event.category?.name }}
</UiBadge> </UiBadge>
</li> </li>
<li v-for="cat in event.secondaryCategories" :key="cat.id"> <li v-for="cat in event.secondaryCategories" :key="cat.id">
<UiBadge class="mix-blend-luminosity bg-gray-600 lowercase" variant="secondary"> <UiBadge class="mix-blend-luminosity bg-gray-300 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600 lowercase" variant="secondary">
{{ cat.name }} {{ cat.name }}
</UiBadge> </UiBadge>
</li> </li>
@@ -129,7 +129,7 @@ function deployDeleteModal() {
<template v-if="event.description"> <template v-if="event.description">
<hr class="border-slate-500 mt-2" > <hr class="border-slate-500 mt-2" >
<div class="mt-2 text-sm text-slate-300"> <div class="mt-2 text-sm text-slate-600 dark:text-slate-300">
{{ event.description }} {{ event.description }}
</div> </div>
</template> </template>
@@ -138,7 +138,7 @@ function deployDeleteModal() {
<menu class="absolute top-4 right-4" :class="cn({ 'top-6': event.hidden })"> <menu class="absolute top-4 right-4" :class="cn({ 'top-6': event.hidden })">
<UiPopover v-model:open="commandMenuOpened"> <UiPopover v-model:open="commandMenuOpened">
<UiPopoverTrigger as-child> <UiPopoverTrigger as-child>
<UiButton size="icon" variant="ghost"> <UiButton size="icon" variant="outline" class="mix-blend-luminosity bg-gray-300 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600">
<PhDotsThreeOutlineVertical size="20" weight="fill" /> <PhDotsThreeOutlineVertical size="20" weight="fill" />
</UiButton> </UiButton>
</UiPopoverTrigger> </UiPopoverTrigger>
@@ -156,7 +156,7 @@ function deployDeleteModal() {
</menu> </menu>
<nav v-if="event.startDate && event.endDate" class="mt-2 flex gap-2"> <nav v-if="event.startDate && event.endDate" class="mt-2 flex gap-2">
<UiBadge class="hover:opacity-100 hover:bg-slate-300" as-child> <UiBadge class="hover:bg-indigo-400 dark:hover:bg-slate-300" as-child>
<button <button
class="flex gap-1" class="flex gap-1"
title="Naviguer au début" title="Naviguer au début"
@@ -165,7 +165,7 @@ function deployDeleteModal() {
<PhHourglassHigh size="16" weight="fill" /> Début <PhHourglassHigh size="16" weight="fill" /> Début
</button> </button>
</UiBadge> </UiBadge>
<UiBadge class="hover:opacity-100 hover:bg-slate-300" as-child title="Naviguer à la fin"> <UiBadge class="hover:bg-indigo-400 dark:hover:bg-slate-300" as-child title="Naviguer à la fin">
<button <button
class="flex gap-1" class="flex gap-1"
title="Naviguer à la fin" title="Naviguer à la fin"
@@ -179,7 +179,7 @@ function deployDeleteModal() {
<UiTooltipProvider v-if="event.hidden" :delay-duration="250"> <UiTooltipProvider v-if="event.hidden" :delay-duration="250">
<UiTooltip> <UiTooltip>
<UiTooltipTrigger as-child> <UiTooltipTrigger as-child>
<UiBadge class="absolute -top-2 right-2 flex gap-1 hover:bg-slate-300 hover:opacity-100"> <UiBadge class="absolute -top-2 right-2 flex gap-1">
<PhEye size="16" weight="fill" /> Évènement privé <PhEye size="16" weight="fill" /> Évènement privé
</UiBadge> </UiBadge>
</UiTooltipTrigger> </UiTooltipTrigger>

2
components/calendar/CalendarMenu.vue
View File

@@ -7,7 +7,7 @@ const { revealAdvancedSearch } = useCalendar()
</script> </script>
<template> <template>
<header class="pt-4 border-slate-700 border-b-[1px]"> <header class="pt-4 border-slate-400 dark:border-slate-700 border-b-[1px]">
<div class="px-6 flex justify-between"> <div class="px-6 flex justify-between">
<menu class="flex items-center gap-2"> <menu class="flex items-center gap-2">
<li class="flex items-center"> <li class="flex items-center">

14
components/calendar/CalendarMenuSubnav.vue
View File

@@ -62,7 +62,7 @@ function handleGotoPreviousEventPage(position: "next" | "prev" = "next") {
<template> <template>
<div class="flex gap-2"> <div class="flex gap-2">
<div class="grid items-end w-40 px-4 py-2 border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm text-sm"> <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">
<ClientOnly> <ClientOnly>
<span>{{ currentDate.currentDateTitle }}</span> <span>{{ currentDate.currentDateTitle }}</span>
@@ -73,14 +73,14 @@ function handleGotoPreviousEventPage(position: "next" | "prev" = "next") {
</template> </template>
</ClientOnly> </ClientOnly>
</div> </div>
<div class="border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm"> <div>
<UiTooltipProvider :delay-duration="250"> <UiTooltipProvider :delay-duration="250">
<UiTooltip> <UiTooltip>
<UiTooltipTrigger as-child> <UiTooltipTrigger as-child>
<UiButton <UiButton
variant="ghost" variant="outline"
size="icon" size="icon"
class="rounded-t-sm rounded-b-none" class="rounded-t-sm rounded-b-none border-b-0"
@click="handleGotoPreviousEventPage('prev')" @click="handleGotoPreviousEventPage('prev')"
> >
<PhArrowLineLeft size="22" /> <PhArrowLineLeft size="22" />
@@ -92,14 +92,14 @@ function handleGotoPreviousEventPage(position: "next" | "prev" = "next") {
</UiTooltip> </UiTooltip>
</UiTooltipProvider> </UiTooltipProvider>
</div> </div>
<div class="border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm"> <div>
<UiTooltipProvider :delay-duration="250"> <UiTooltipProvider :delay-duration="250">
<UiTooltip> <UiTooltip>
<UiTooltipTrigger as-child> <UiTooltipTrigger as-child>
<UiButton <UiButton
variant="ghost" variant="outline"
size="icon" size="icon"
class="rounded-t-sm rounded-b-none" class="rounded-t-sm rounded-b-none border-b-0"
@click="handleGotoPreviousEventPage('next')" @click="handleGotoPreviousEventPage('next')"
> >
<PhArrowLineRight size="22" /> <PhArrowLineRight size="22" />

4
components/calendar/dialog/Delete.vue
View File

@@ -47,7 +47,7 @@ function handleClosing() {
<UiAlertDialogContent <UiAlertDialogContent
:disable-outside-pointer-events="true" :disable-outside-pointer-events="true"
:trap-focus="true" :trap-focus="true"
class="min-w-96 bg-slate-900 border-slate-800" class="min-w-96"
@escape-key-down="handleClosing" @escape-key-down="handleClosing"
@focus-outside="handleClosing" @focus-outside="handleClosing"
@interact-outside="handleClosing" @interact-outside="handleClosing"
@@ -69,7 +69,7 @@ function handleClosing() {
</div> </div>
<footer class="flex gap-2 justify-between"> <footer class="flex gap-2 justify-between">
<UiButton type="button" size="sm" variant="ghost" @click="handleClosing"> <UiButton type="button" size="sm" variant="outline" @click="handleClosing">
Retour Retour
</UiButton> </UiButton>

2
components/calendar/form/CreateEvent.vue
View File

@@ -88,7 +88,7 @@ function handleCancel() {
:collision-padding="60" :collision-padding="60"
:disable-outside-pointer-events="true" :disable-outside-pointer-events="true"
:trap-focus="true" :trap-focus="true"
class="pl-3 min-w-96 bg-slate-900 border-slate-800" class="pl-3 min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
@escape-key-down="handleClosing" @escape-key-down="handleClosing"
@focus-outside="handleClosing" @focus-outside="handleClosing"
@interact-outside="handleClosing" @interact-outside="handleClosing"

4
components/calendar/form/DeleteEvent.vue
View File

@@ -63,7 +63,7 @@ function handleCancel(): void {
<UiAlertDialogContent <UiAlertDialogContent
:disable-outside-pointer-events="true" :disable-outside-pointer-events="true"
:trap-focus="true" :trap-focus="true"
class="min-w-96 bg-slate-900 border-slate-800" class="min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
@escape-key-down="handleClosing" @escape-key-down="handleClosing"
@focus-outside="handleClosing" @focus-outside="handleClosing"
@interact-outside="handleClosing" @interact-outside="handleClosing"
@@ -85,7 +85,7 @@ function handleCancel(): void {
</div> </div>
<footer class="flex gap-2 justify-between"> <footer class="flex gap-2 justify-between">
<UiButton type="button" size="sm" variant="ghost" @click="() => isDeleteEventModalOpen = false"> <UiButton type="button" size="sm" variant="outline" @click="() => isDeleteEventModalOpen = false">
Retour Retour
</UiButton> </UiButton>

7
components/calendar/form/UpdateEvent.vue
View File

@@ -1,6 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhPencilSimpleLine, PhTag } from "@phosphor-icons/vue" import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhPencilSimpleLine, PhTag } from "@phosphor-icons/vue"
import { VisuallyHidden } from "radix-vue"
const { resetSkeleton, updateEventFromSkeleton, cancelLatestRequest } = useCalendar() const { resetSkeleton, updateEventFromSkeleton, cancelLatestRequest } = useCalendar()
const { eventSkeleton, lastActiveEvent, isEditEventModalOpen } = storeToRefs(useCalendar()) const { eventSkeleton, lastActiveEvent, isEditEventModalOpen } = storeToRefs(useCalendar())
@@ -64,19 +63,19 @@ function handleCancel() {
<UiDialogContent <UiDialogContent
:disable-outside-pointer-events="true" :disable-outside-pointer-events="true"
:trap-focus="true" :trap-focus="true"
class="pl-3 min-w-96 bg-slate-900 border-slate-800" class="pl-3 min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
@escape-key-down="handleClosing" @escape-key-down="handleClosing"
@focus-outside="handleClosing" @focus-outside="handleClosing"
@interact-outside="handleClosing" @interact-outside="handleClosing"
@pointer-down-outside="(e) => e.preventDefault()" @pointer-down-outside="(e) => e.preventDefault()"
> >
<VisuallyHidden> <header class="pl-8 grid gap-y-2">
<UiDialogTitle> Modifier l'évènement</UiDialogTitle> <UiDialogTitle> Modifier l'évènement</UiDialogTitle>
<UiDialogDescription> <UiDialogDescription>
Mettre à jour les données de l'évènement Mettre à jour les données de l'évènement
</UiDialogDescription> </UiDialogDescription>
</VisuallyHidden> </header>
<form @submit.prevent="handleAction"> <form @submit.prevent="handleAction">
<div class="grid grid-cols-2 gap-y-3"> <div class="grid grid-cols-2 gap-y-3">

2
components/calendar/input/MonthList.vue
View File

@@ -78,7 +78,7 @@ useSortable(monthSortableList, model.value, { animation: 150, handle: ".handle"
</UiButton> </UiButton>
</div> </div>
<div class="md:col-span-full"> <div class="md:col-span-full">
<div class="border-[1px] dark:border-slate-800 p-4 rounded-sm" :class="model.length ? 'md:grid md:grid-cols-12 md:gap-4 md:items-center' : ''"> <div class="border-[1px] dark:border-slate-800 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"> <div v-if="model.length" class="hidden md:block col-span-1">
<ul class="grid gap-y-4 justify-center"> <ul class="grid gap-y-4 justify-center">
<li v-for="(m, i) in model" :key="`num-${m.name}`"> <li v-for="(m, i) in model" :key="`num-${m.name}`">

9
components/calendar/input/RPGDate.vue
View File

@@ -117,7 +117,7 @@ function handleValueReset() {
v-if="model" v-if="model"
align="start" align="start"
side="bottom" side="bottom"
class="bg-slate-900 border-slate-800" class="border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
> >
<div class="grid grid-cols-2 items-center gap-x-2 gap-y-3"> <div class="grid grid-cols-2 items-center gap-x-2 gap-y-3">
<UiSelect @update:model-value="handleMonthChange"> <UiSelect @update:model-value="handleMonthChange">
@@ -151,8 +151,11 @@ function handleValueReset() {
<button <button
v-for="day in monthData.days" v-for="day in monthData.days"
:key="`popover-day-grid-${id}-${day}`" :key="`popover-day-grid-${id}-${day}`"
class="aspect-square rounded-full text-[.8em] transition-colors hover:bg-slate-700" class="aspect-square rounded-full text-[.8em] transition-colors"
:class="{'bg-blue-500 hover:bg-blue-700': day === model.day}" :class="{
'hover:bg-indigo-200 dark:hover:bg-indigo-700': day !== model.day,
'bg-indigo-500 hover:bg-indigo-700 text-white': day === model.day
}"
@click="setModelDay(day)" @click="setModelDay(day)"
> >
{{ day }} {{ day }}

6
components/calendar/search/lists/EventCallout.vue
View File

@@ -61,7 +61,7 @@ const dateDuration: string | null = props.event.endDate
<UiTooltipProvider :delay-duration="250"> <UiTooltipProvider :delay-duration="250">
<UiTooltip> <UiTooltip>
<UiTooltipTrigger as-child> <UiTooltipTrigger as-child>
<UiBadge class="flex gap-1 border-[1px] border-slate-900 hover:bg-slate-300 hover:opacity-100"> <UiBadge class="flex gap-1">
<PhEye size="16" weight="fill" /> Évènement privé <PhEye size="16" weight="fill" /> Évènement privé
</UiBadge> </UiBadge>
</UiTooltipTrigger> </UiTooltipTrigger>
@@ -92,13 +92,13 @@ const dateDuration: string | null = props.event.endDate
<div v-if="event.category || event.secondaryCategories" class="absolute top-3 right-4"> <div v-if="event.category || event.secondaryCategories" class="absolute top-3 right-4">
<ul class="flex gap-1"> <ul class="flex gap-1">
<li v-if="event.category"> <li v-if="event.category">
<UiBadge class="mix-blend-luminosity font-bold bg-gray-600 lowercase" variant="secondary"> <UiBadge class="mix-blend-luminosity font-bold bg-gray-300 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600 lowercase" variant="secondary">
{{ event.category?.name }} {{ event.category?.name }}
</UiBadge> </UiBadge>
</li> </li>
<li v-for="cat in event.secondaryCategories" :key="cat.id"> <li v-for="cat in event.secondaryCategories" :key="cat.id">
<UiBadge class="mix-blend-luminosity bg-gray-600 lowercase" variant="secondary"> <UiBadge class="mix-blend-luminosity bg-gray-300 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600 lowercase" variant="secondary">
{{ cat.name }} {{ cat.name }}
</UiBadge> </UiBadge>
</li> </li>

12
components/calendar/state/monthly/DayTile.vue
View File

@@ -73,10 +73,10 @@ const eventsNotDisplayed: ComputedRef<number> = computed<number>(() => eventsFo
<template> <template>
<div <div
ref="calendarTile" ref="calendarTile"
class="tile relative text-xs p-2 border-slate-700" class="tile relative text-xs p-2 border-slate-400 dark:border-slate-700 dark:bg-black transition-colors"
:class="{ :class="{
'text-slate-500': props.faded, 'text-slate-300 dark:text-slate-500': props.faded,
'text-slate-300': !props.faded 'text-slate-500 dark:text-slate-300': !props.faded
}" }"
> >
<button <button
@@ -85,10 +85,10 @@ const eventsNotDisplayed: ComputedRef<number> = computed<number>(() => eventsFo
> >
<ClientOnly> <ClientOnly>
<span <span
class="inline-flex w-8 h-8 aspect-square items-center justify-center rounded-full border-2 border-transparent font-bold transition-colors group-hover:border-slate-800" class="inline-flex w-8 h-8 aspect-square items-center justify-center rounded-full border-2 border-transparent font-bold transition-colors group-hover:border-indigo-300 dark:group-hover:border-indigo-700"
:class="{ :class="{
'bg-slate-800': isDefaultDate && !isSelectedDate, 'text-white bg-slate-600 dark:bg-slate-800': isDefaultDate && !isSelectedDate,
'text-white bg-blue-500': isSelectedDate 'text-white bg-indigo-500': isSelectedDate
}" }"
> >
{{ date.day }} {{ date.day }}

8
components/calendar/state/yearly/DayTile.vue
View File

@@ -40,14 +40,14 @@ const hasAtLeastOneEvent = computed<boolean>(() => {
<button <button
class="relative grid place-items-center aspect-square rounded-full border-2 border-transparent transition-colors after:content-[''] after:absolute after:top-1 after:right-1 after:w-[.3rem] after:h-[.3rem] after:rounded-full after:transition-colors" class="relative grid place-items-center aspect-square rounded-full border-2 border-transparent transition-colors after:content-[''] after:absolute after:top-1 after:right-1 after:w-[.3rem] after:h-[.3rem] after:rounded-full after:transition-colors"
:class="{ :class="{
'hover:bg-slate-800 hover:border-slate-800': !isDefaultDate && !isSelectedDate, 'text-slate-500 hover:border-indigo-300 hover:text-slate-900': !isDefaultDate && !isSelectedDate,
'bg-slate-800 hover:bg-slate-600 hover:border-slate-600': isDefaultDate && !isSelectedDate, 'font-semibold text-white bg-slate-600 dark:bg-slate-800 hover:border-indigo-400': isDefaultDate && !isSelectedDate,
'text-white bg-blue-500 hover:bg-blue-600 hover:border-blue-600': isSelectedDate, 'font-semibold text-white bg-indigo-500 hover:bg-indigo-600 hover:border-indigo-500': isSelectedDate,
'after:bg-green-600': hasAtLeastOneEvent, 'after:bg-green-600': hasAtLeastOneEvent,
'after:bg-slate-950': hasAtLeastOneEvent && isSelectedDate 'after:bg-slate-950': hasAtLeastOneEvent && isSelectedDate
}" }"
@click="selectDate(tileDate)" @click="selectDate(tileDate)"
> >
<span ref="tileRef" class="text-slate-300 text-[.85em]">{{ dayNumber }}</span> <span ref="tileRef" class="text-[.85em]">{{ dayNumber }}</span>
</button> </button>
</template> </template>

2
components/calendar/state/yearly/MonthTile.vue
View File

@@ -11,7 +11,7 @@ defineProps<{
<div class="font-medium"> <div class="font-medium">
{{ month.name }} {{ month.name }}
</div> </div>
<div class="grid grid-cols-7"> <div class="grid grid-cols-7 gap-1">
<CalendarStateYearlyDayTile <CalendarStateYearlyDayTile
v-for="day in month.days" v-for="day in month.days"
:key="day" :key="day"

57
components/global/sidebar/Sidebar.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { PhGlobeHemisphereWest, PhHouse, PhList } from "@phosphor-icons/vue" import { PhGlobeHemisphereWest, PhList } from "@phosphor-icons/vue"
import type { SidebarMenuActionType } from "./SidebarProps"; import type { SidebarMenuActionType } from "./SidebarProps";
const { revealAdvancedSearch } = useCalendar() const { revealAdvancedSearch } = useCalendar()
@@ -15,7 +15,7 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
</script> </script>
<template> <template>
<nav class="w-16 py-6 border-r-[1px] border-l-slate-500 grid grid-rows-[1fr_auto] justify-center"> <nav class="w-16 py-6 border-r-[1px] bg-indigo-700 dark:bg-black text-white border-r-indigo-700 dark:border-r-indigo-950 grid grid-rows-[1fr_auto] justify-center transition-colors">
<menu class="flex flex-col gap-4"> <menu class="flex flex-col gap-4">
<li class="mb-12"> <li class="mb-12">
<UiButton variant="ghost" size="icon" class="rounded-full" @click="console.log"> <UiButton variant="ghost" size="icon" class="rounded-full" @click="console.log">
@@ -23,43 +23,22 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
</UiButton> </UiButton>
</li> </li>
<template v-if="!user"> <li v-if="user">
<li> <UiTooltipProvider :delay-duration="50">
<UiTooltipProvider :delay-duration="50"> <UiTooltip>
<UiTooltip> <UiTooltipTrigger as-child>
<UiTooltipTrigger as-child> <UiButton variant="ghost" size="icon" class="rounded-full" as-child>
<UiButton variant="ghost" size="icon" class="rounded-full" as-child> <RouterLink to="/my">
<RouterLink to="/"> <PhGlobeHemisphereWest size="24" weight="fill" />
<PhHouse size="24" weight="fill" /> </RouterLink>
</RouterLink> </UiButton>
</UiButton> </UiTooltipTrigger>
</UiTooltipTrigger> <UiTooltipContent :side="'right'" :side-offset="6">
<UiTooltipContent :side="'right'" :side-offset="6"> <p>Mondes</p>
<p>Accueil</p> </UiTooltipContent>
</UiTooltipContent> </UiTooltip>
</UiTooltip> </UiTooltipProvider>
</UiTooltipProvider> </li>
</li>
</template>
<template v-else>
<li>
<UiTooltipProvider :delay-duration="50">
<UiTooltip>
<UiTooltipTrigger as-child>
<UiButton variant="ghost" size="icon" class="rounded-full" as-child>
<RouterLink to="/my">
<PhGlobeHemisphereWest size="24" weight="fill" />
</RouterLink>
</UiButton>
</UiTooltipTrigger>
<UiTooltipContent :side="'right'" :side-offset="6">
<p>Mondes</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>
</li>
</template>
<li v-for="(item, i) in currentMenu" :key="i"> <li v-for="(item, i) in currentMenu" :key="i">
<UiTooltipProvider :delay-duration="50"> <UiTooltipProvider :delay-duration="50">

39
components/global/user/CTA.vue
View File

@@ -1,10 +1,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from "vue" import { computed } from "vue"
import { PhGear, PhGlobeHemisphereWest, PhLaptop, PhMoon, PhPalette, PhSignOut, PhSun, PhTranslate, PhUserCircle } from "@phosphor-icons/vue" import { PhCheckCircle, PhGear, PhGlobeHemisphereWest, PhLaptop, PhMoon, PhPalette, PhSignOut, PhSun, PhTranslate, PhUserCircle } from "@phosphor-icons/vue"
import { cn } from "~/lib/utils";
const router = useRouter() const router = useRouter()
const { preference } = useColorMode()
const { auth } = useSupabaseClient() const { auth } = useSupabaseClient()
const user = useSupabaseUser() const user = useSupabaseUser()
@@ -83,24 +83,39 @@ function pushRoute(to: AvailableRoutes) {
<UiDropdownMenuSeparator /> <UiDropdownMenuSeparator />
<UiDropdownMenuSub> <UiDropdownMenuSub>
<UiDropdownMenuSubTrigger class="p-0"> <UiDropdownMenuSubTrigger class="p-0 rounded-none">
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none"> <UiDropdownMenuItem class="flex gap-[.5ch] items-center pointer-events-none">
<PhPalette size="20" weight="fill" /> <PhPalette size="20" weight="fill" />
<span>Apparence</span> <span>Apparence</span>
</UiDropdownMenuItem> </UiDropdownMenuItem>
</UiDropdownMenuSubTrigger> </UiDropdownMenuSubTrigger>
<UiDropdownMenuPortal> <UiDropdownMenuPortal>
<UiDropdownMenuSubContent> <UiDropdownMenuSubContent>
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'dark'"> <UiDropdownMenuItem
<PhMoon size="20" /> class="flex gap-[.5ch] items-center rounded-none"
:class="cn({ 'text-emerald-600': $colorMode.preference === 'dark' })"
@select.prevent="$colorMode.preference = 'dark'"
>
<PhCheckCircle v-if="$colorMode.preference === 'dark'" size="20" weight="fill" />
<PhMoon v-else size="20" />
<span>Sombre</span> <span>Sombre</span>
</UiDropdownMenuItem> </UiDropdownMenuItem>
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'light'"> <UiDropdownMenuItem
<PhSun size="20" /> class="flex gap-[.5ch] items-center rounded-none"
:class="cn({ 'text-emerald-600': $colorMode.preference === 'light' })"
@select.prevent="$colorMode.preference = 'light'"
>
<PhCheckCircle v-if="$colorMode.preference === 'light'" size="20" weight="fill" />
<PhSun v-else size="20" />
<span>Clair</span> <span>Clair</span>
</UiDropdownMenuItem> </UiDropdownMenuItem>
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'system'"> <UiDropdownMenuItem
<PhLaptop size="20" /> class="flex gap-[.5ch] items-center rounded-none"
:class="cn({ 'text-emerald-600': $colorMode.preference === 'system' })"
@select.prevent="$colorMode.preference = 'system'"
>
<PhCheckCircle v-if="$colorMode.preference === 'system'" size="20" weight="fill" />
<PhLaptop v-else size="20" />
<span>Système</span> <span>Système</span>
</UiDropdownMenuItem> </UiDropdownMenuItem>
</UiDropdownMenuSubContent> </UiDropdownMenuSubContent>
@@ -108,8 +123,8 @@ function pushRoute(to: AvailableRoutes) {
</UiDropdownMenuSub> </UiDropdownMenuSub>
<UiDropdownMenuSub> <UiDropdownMenuSub>
<UiDropdownMenuSubTrigger class="p-0"> <UiDropdownMenuSubTrigger class="p-0 rounded-none">
<UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none"> <UiDropdownMenuItem class="flex gap-[.5ch] items-center pointer-events-none">
<PhTranslate size="20" /> <PhTranslate size="20" />
<span>Langage</span> <span>Langage</span>
</UiDropdownMenuItem> </UiDropdownMenuItem>

4
components/ui/button/index.ts
View File

@@ -3,13 +3,13 @@ import { type VariantProps, cva } from "class-variance-authority"
export { default as Button } from "./Button.vue" export { default as Button } from "./Button.vue"
export const buttonVariants = cva( 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-50", "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",
{ {
variants: { variants: {
variant: { variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90", default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", outline: "border border-input hover:bg-accent hover:text-accent-foreground",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground", ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline" link: "text-primary underline-offset-4 hover:underline"

28
pages/my/index.vue
View File

@@ -85,7 +85,7 @@ onUnmounted(() => {
</script> </script>
<template> <template>
<main class="p-8"> <main class="p-8 after:fill-red-400">
<Heading>{{ user?.user_metadata.full_name }}</Heading> <Heading>{{ user?.user_metadata.full_name }}</Heading>
<section v-if="worlds" class="mt-4"> <section v-if="worlds" class="mt-4">
@@ -133,3 +133,29 @@ onUnmounted(() => {
</section> </section>
</main> </main>
</template> </template>
<style lang="scss" scoped>
main {
position: relative;
isolation: isolate;
overflow: clip;
&::after {
display: block;
content: '';
position: absolute;
right: 2.4rem;
bottom: -5%;
height: 75%;
width: 100%;
background-image: url('/images/galaxy.svg');
background-size: contain;
background-repeat: no-repeat;
background-position-y: bottom;
background-position-x: right;
z-index: -1;
mask-image: radial-gradient(ellipse 100% 100% at 120% 80%, black, transparent);
opacity: .3;
}
}
</style>

31
pages/my/worlds/[id].vue
View File

@@ -149,8 +149,7 @@ function hideDeleteModal() {
<ul v-if="world.calendars && world.calendars?.length > 0" class="grid md:grid-cols-3 gap-2"> <ul v-if="world.calendars && world.calendars?.length > 0" class="grid md:grid-cols-3 gap-2">
<li v-for="calendar in world.calendars" :key="calendar.id"> <li v-for="calendar in world.calendars" :key="calendar.id">
<UiCard <UiCard
v-if="calendar" class="w-full transition-all hover:bg-slate-50 dark:bg-gray-950 dark:hover:bg-indigo-950 dark:focus-within:outline-gray-900"
class="w-full transition-all text-slate-100 bg-slate-900 border-slate-700 hover:bg-slate-700 dark:hover:bg-slate-800 dark:border-slate-900 dark:focus-within:outline-slate-900"
:link="`/my/calendars/${calendar.id}`" :link="`/my/calendars/${calendar.id}`"
> >
<UiCardHeader> <UiCardHeader>
@@ -160,7 +159,7 @@ function hideDeleteModal() {
<UiCardContent> <UiCardContent>
<p class="italic">Description future (ou alors des informations sur le nb d'évènements)</p> <p class="italic">Description future (ou alors des informations sur le nb d'évènements)</p>
<UiButton size="icon" variant="ghost" class="absolute top-2 right-2 z-20 hover:bg-slate-600" @click="deployDeleteModal(calendar)"> <UiButton size="icon" variant="ghost" class="absolute top-2 right-2 z-20 hover:text-white hover:bg-rose-400 dark:hover:bg-rose-700" @click="deployDeleteModal(calendar)">
<PhTrash size="16" /> <PhTrash size="16" />
</UiButton> </UiButton>
</UiCardContent> </UiCardContent>
@@ -180,3 +179,29 @@ function hideDeleteModal() {
<CalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteEventModalOpen" @on-close="hideDeleteModal" /> <CalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteEventModalOpen" @on-close="hideDeleteModal" />
</main> </main>
</template> </template>
<style lang="scss" scoped>
main {
position: relative;
isolation: isolate;
overflow: clip;
&::after {
display: block;
content: '';
position: absolute;
right: 2.4rem;
bottom: -5%;
height: 75%;
width: 100%;
background-image: url('/images/planet.svg');
background-size: contain;
background-repeat: no-repeat;
background-position-y: bottom;
background-position-x: right;
z-index: -1;
mask-image: radial-gradient(ellipse 100% 100% at 120% 80%, black, transparent);
opacity: .3;
}
}
</style>

28
public/images/galaxy.svg Normal file
View File

@@ -0,0 +1,28 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#6366f1" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 611.999 611.999" xml:space="preserve">
<g>
<path d="M611.502,203.367c-3.889-53.216-30.921-100.838-93.276-125.006c-69.361-26.884-151.96-13.033-216.77,16.813
c-67.784,31.216-151.313,93.935-171.682,171.605c-7.962,30.357-5.303,63.94,10.093,91.288
c19.789,35.152,59.002,56.863,99.094,61.324c55.248,6.147,112.773-16.493,155.435-50.741c24.317-19.521,46.5-44.992,58.997-73.774
c11.212-25.821,13.864-56.419,1.925-81.911c-16.243-34.679-54.683-49.835-91.121-44.132c-4.787,0.735-9.337,1.776-13.657,3.016
c-4.322,1.234-8.419,2.662-12.295,4.256c-7.765,3.148-14.653,6.919-20.773,10.925c-6.109,4.03-11.447,8.348-16.022,12.747
c-1.037,1.043-2.056,2.067-3.054,3.071c-1.08,1.074-2.021,2.094-2.964,3.1c-1.877,2.012-3.588,3.995-5.207,5.882
c-3.208,3.799-5.955,7.307-8.307,10.499c-4.731,6.35-8.047,11.323-10.284,14.671c-1.1,1.684-1.934,2.961-2.494,3.817
c-0.55,0.863-0.829,1.301-0.829,1.301c-0.92,1.449-0.97,3.367,0.036,4.894c1.366,2.076,4.157,2.652,6.233,1.285
c0,0,0.433-0.285,1.288-0.846c0.846-0.567,2.108-1.413,3.772-2.529c3.307-2.238,8.187-5.589,14.48-9.753
c6.333-4.129,14.012-9.048,23.248-13.695c2.175-1.069,4.431-2.096,6.846-3.028c2.399-0.946,4.893-1.86,7.522-2.638
c5.229-1.598,10.883-2.863,16.803-3.589c2.961-0.352,5.978-0.597,9.027-0.671c3.05-0.067,6.128,0.03,9.183,0.299
c10.759,1.003,24.149,4.372,30.659,13.714c4.245,6.092,4.815,14.123,3.391,21.409c-2.471,12.644-10.28,23.585-18.883,33.174
c-30.278,33.744-74.119,56.946-119.526,60.718c-37.814,2.947-73.075-14.422-78.121-55.732
c-3.607-29.523,10.253-58.809,29.349-81.612c26.954-32.186,60.518-59.114,98.754-76.011c14.09-6.227,28.7-11.46,43.667-15.311
c39.803-10.321,86.856-13.345,125.381,3.353c36.924,16.004,60.458,52.144,59.714,92.483c-0.223,11.808-2.412,23.851-6.114,35.878
c-3.66,12.037-8.996,24.017-15.499,35.56c-6.539,11.542-14.238,22.664-22.764,33.124C454.222,364.819,387.62,404.605,326.223,430.7
c-74.109,31.498-215.664,68.734-268.588-17.843c-27.588-45.131-17.468-102.863-2.502-150.461c0.541-1.722,0.006-3.684-1.497-4.867
c-1.942-1.528-4.754-1.193-6.282,0.748c0,0-1.277,1.622-3.752,4.764c-0.624,0.768-1.287,1.718-2.039,2.741
c-0.746,1.027-1.563,2.153-2.451,3.375C17.106,299.452,2.396,336.089,0.264,373.622c-1.962,34.546,6.992,69.97,26.952,98.236
c23.939,33.9,62.223,55.79,102.375,66.286c63.644,16.637,134.014,11.022,196.48-7.885c14.716-4.454,29.379-9.645,43.893-15.61
c14.505-5.984,28.826-12.8,42.955-20.315c51.202-27.233,99.882-64.099,136.409-109.452
C588.79,335.885,616.063,265.779,611.502,203.367z" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

1
public/images/planet.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none" /><path fill="#6366f1" d="M245.11,60.68c-7.65-13.19-27.85-16.16-58.5-8.66A96,96,0,0,0,32.81,140.3C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4,96,96,0,0,0,153.78-88.25c12.51-13,20.83-25.35,23.66-35.92C248.83,72.51,248.24,66.07,245.11,60.68Zm-13.69,15c-6.11,22.78-48.65,57.31-87.52,79.64-67.81,39-113.62,41.52-119.16,32-1.46-2.51-.65-7.24,2.22-13a80.06,80.06,0,0,1,10.28-15.05,95.53,95.53,0,0,0,6.23,14.18,4,4,0,0,0,4,2.12,122.14,122.14,0,0,0,16.95-3.32c21.23-5.55,46.63-16.48,71.52-30.78s47-30.66,62.45-46.15A122.74,122.74,0,0,0,209.7,82.45a4,4,0,0,0,.17-4.52,96.26,96.26,0,0,0-9.1-12.46c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 817 B

4
tailwind.config.js
View File

@@ -58,6 +58,10 @@ module.exports = {
foreground: "hsl(var(--card-foreground))", foreground: "hsl(var(--card-foreground))",
}, },
}, },
boxShadow: {
"body-dark": "hsla(250, 50%, 10%, 0.75) 0 0 32px 2px inset",
"body-light": "hsl(250, 60%, 85%) 0 0 18px 3px inset",
},
borderRadius: { borderRadius: {
xl: "calc(var(--radius) + 4px)", xl: "calc(var(--radius) + 4px)",
lg: "var(--radius)", lg: "var(--radius)",