Revert "feat: ♻️ Rename dark to background, refactor themes"

This reverts commit 842033c.

app.vue

@@ -52,7 +52,7 @@ useHead({
     },
     noscript: [
         {
-            innerHTML: `<div class="grid min-h-screen place-items-center px-6 py-24 sm:py-32 lg:px-8 fixed inset-0 z-[1000000] bg-background-900" data-v-inspector="components/errors/noscript.vue:2:5"><svg class="absolute inset-0 h-full w-full stroke-white/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]" aria-hidden="true" data-v-inspector="components/graphics/square-pattern.vue:2:5"><defs data-v-inspector="components/graphics/square-pattern.vue:4:9"><pattern id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc" width="200" height="200" x="50%" y="-1" patternUnits="userSpaceOnUse" data-v-inspector="components/graphics/square-pattern.vue:5:13"><path d="M.5 200V.5H200" fill="none" data-v-inspector="components/graphics/square-pattern.vue:7:17"></path></pattern></defs><svg x="50%" y="-1" class="overflow-visible fill-text-800/20" data-v-inspector="components/graphics/square-pattern.vue:9:16"><path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z" stroke-width="0" data-v-inspector="components/graphics/square-pattern.vue:10:13"></path></svg><rect width="100%" height="100%" stroke-width="0" fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)" data-v-inspector="components/graphics/square-pattern.vue:13:9"></rect></svg><div class="prose prose-invert max-w-lg" data-v-inspector="components/errors/noscript.vue:4:9"><h1 class="mt-4 text-3xl font-bold tracking-tight text-text-100 sm:text-5xl" data-v-inspector="components/errors/noscript.vue:5:13">JavaScript is disabled </h1><p class="mt-6 text-base leading-7 text-text-400" data-v-inspector="components/errors/noscript.vue:7:13"> This website requires JavaScript to function properly. Please enable JavaScript in your browser settings. </p><p class="mt-6 text-base leading-7 text-text-400" data-v-inspector="components/errors/noscript.vue:11:13"> If you are using a browser that does not support JavaScript, please consider using a modern browser like <a href="https://www.mozilla.org/firefox/new/" class="underline" data-v-inspector="components/errors/noscript.vue:13:22">Firefox</a> or <a href="https://www.google.com/chrome/" class="underline" data-v-inspector="components/errors/noscript.vue:13:102">Chrome</a>. </p><p class="mt-6 text-base leading-7 text-text-400" data-v-inspector="components/errors/noscript.vue:16:13"> This application does not track you, collect user data, use cookies of any kind or send requests to servers outside of your account&#39;s instance. </p></div></div>`,
+            innerHTML: `<div class="grid min-h-screen place-items-center px-6 py-24 sm:py-32 lg:px-8 fixed inset-0 z-[1000000] bg-dark-900" data-v-inspector="components/errors/noscript.vue:2:5"><svg class="absolute inset-0 h-full w-full stroke-white/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]" aria-hidden="true" data-v-inspector="components/graphics/square-pattern.vue:2:5"><defs data-v-inspector="components/graphics/square-pattern.vue:4:9"><pattern id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc" width="200" height="200" x="50%" y="-1" patternUnits="userSpaceOnUse" data-v-inspector="components/graphics/square-pattern.vue:5:13"><path d="M.5 200V.5H200" fill="none" data-v-inspector="components/graphics/square-pattern.vue:7:17"></path></pattern></defs><svg x="50%" y="-1" class="overflow-visible fill-gray-800/20" data-v-inspector="components/graphics/square-pattern.vue:9:16"><path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z" stroke-width="0" data-v-inspector="components/graphics/square-pattern.vue:10:13"></path></svg><rect width="100%" height="100%" stroke-width="0" fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)" data-v-inspector="components/graphics/square-pattern.vue:13:9"></rect></svg><div class="prose prose-invert max-w-lg" data-v-inspector="components/errors/noscript.vue:4:9"><h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-100 sm:text-5xl" data-v-inspector="components/errors/noscript.vue:5:13">JavaScript is disabled </h1><p class="mt-6 text-base leading-7 text-gray-400" data-v-inspector="components/errors/noscript.vue:7:13"> This website requires JavaScript to function properly. Please enable JavaScript in your browser settings. </p><p class="mt-6 text-base leading-7 text-gray-400" data-v-inspector="components/errors/noscript.vue:11:13"> If you are using a browser that does not support JavaScript, please consider using a modern browser like <a href="https://www.mozilla.org/firefox/new/" class="underline" data-v-inspector="components/errors/noscript.vue:13:22">Firefox</a> or <a href="https://www.google.com/chrome/" class="underline" data-v-inspector="components/errors/noscript.vue:13:102">Chrome</a>. </p><p class="mt-6 text-base leading-7 text-gray-400" data-v-inspector="components/errors/noscript.vue:16:13"> This application does not track you, collect user data, use cookies of any kind or send requests to servers outside of your account&#39;s instance. </p></div></div>`,
         },
     ],
 });

components/avatars/avatar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-bind="$attrs" class="bg-background-700 overflow-hidden flex items-center justify-center">
+    <div v-bind="$attrs" class="bg-dark-700 overflow-hidden flex items-center justify-center">
         <Skeleton :enabled="!imageLoaded" class="!h-full !w-full !rounded-none">
             <img class="cursor-pointer ring-1 w-full h-full object-cover" :src="src" :alt="alt" />
         </Skeleton>

components/composer/autocomplete-suggestbox.vue

@@ -2,7 +2,7 @@
     <Transition enter-active-class="transition duration-300 ease-in-out" enter-from-class="opacity-0 scale-95"
         enter-to-class="opacity-100 scale-100" leave-active-class="duration-200 ease-in-out"
         leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
-        <div class="max-h-40 max-w-full rounded ring-1 ring-background-300 bg-background-800 fixed z-20" :style="{
+        <div class="max-h-40 max-w-full rounded ring-1 ring-dark-300 bg-dark-800 fixed z-20" :style="{
             left: `${x}px`,
             top: `${y}px`,
             width: `${width}px`,
@@ -11,7 +11,7 @@
                 <div v-for="(suggestion, index) in topSuggestions" :key="suggestion.key"
                     @click="emit('autocomplete', suggestion.key)"
                     :ref="el => { if (el) suggestionRefs[index] = el as Element }" :title="suggestion.key"
-                    :class="['flex justify-center shrink-0 items-center size-12 p-2 hover:bg-background-900/70', index === selectedSuggestionIndex && 'bg-primary-500']">
+                    :class="['flex justify-center shrink-0 items-center size-12 p-2 hover:bg-dark-900/70', index === selectedSuggestionIndex && 'bg-primary-500']">
                     <slot :suggestion="suggestion"></slot>
                 </div>
             </OverlayScrollbarsComponent>

components/composer/button.vue

@@ -1,6 +1,6 @@
 <template>
     <button v-bind="$props"
-        :class="['rounded text-text-300 hover:bg-background-900/70 p-2 flex items-center justify-center duration-200', toggled && 'bg-primary-500/70 hover:bg-primary-900/70']">
+        :class="['rounded text-gray-300 hover:bg-dark-900/70 p-2 flex items-center justify-center duration-200', toggled && 'bg-primary-500/70 hover:bg-primary-900/70']">
         <slot />
     </button>
 </template>

components/composer/composer.vue

@@ -10,7 +10,7 @@
         <!-- Content warning textbox -->
         <div v-if="cw" class="mb-4">
             <input type="text" v-model="cwContent" placeholder="Add a content warning"
-                class="w-full p-2 mt-1 text-sm prose prose-invert bg-background-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none"
+                class="w-full p-2 mt-1 text-sm prose prose-invert bg-dark-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none"
                 aria-label="Content warning" />
         </div>
         <FileUploader v-model:files="files" ref="uploader" />

components/composer/file-uploader.vue

@@ -3,7 +3,7 @@
         <input type="file" ref="fileInput" @change="handleFileInput" style="display: none" multiple />
         <div class="flex flex-row gap-2 overflow-x-auto *:shrink-0 p-1 mb-4" v-if="files.length > 0">
             <div v-for="(data) in files" :key="data.id" role="button" tabindex="0"
-                :class="['size-28 bg-background-800 rounded flex items-center relative justify-center ring-1 ring-white/20 overflow-hidden', data.progress !== 1.0 && 'animate-pulse']"
+                :class="['size-28 bg-dark-800 rounded flex items-center relative justify-center ring-1 ring-white/20 overflow-hidden', data.progress !== 1.0 && 'animate-pulse']"
                 @keydown.enter="removeFile(data.id)">
                 <template v-if="data.file.type.startsWith('image/')">
                     <img :src="createObjectURL(data.file)" class="w-full h-full object-cover cursor-default"
@@ -17,31 +17,31 @@
                 </template>
                 <!-- Shadow on media to better see buttons -->
                 <div class="absolute inset-0 bg-black/70"></div>
-                <div class="absolute bottom-1 right-1 p-1 bg-background-800 text-white text-xs rounded cursor-default flex flex-row items-center gap-x-1"
+                <div class="absolute bottom-1 right-1 p-1 bg-dark-800 text-white text-xs rounded cursor-default flex flex-row items-center gap-x-1"
                     aria-label="File size">
                     {{ formatBytes(data.file.size) }}
                     <!-- Loader spinner -->
                     <iconify-icon v-if="data.progress < 1.0" icon="tabler:loader-2" width="none"
                         class="size-4 animate-spin text-primary-500" />
                 </div>
-                <button class="absolute top-1 right-1 p-1 bg-background-800 text-white text-xs rounded size-6"
-                    role="button" tabindex="0" @pointerup="removeFile(data.id)" @keydown.enter="removeFile(data.id)">
+                <button class="absolute top-1 right-1 p-1 bg-dark-800 text-white text-xs rounded size-6" role="button"
+                    tabindex="0" @pointerup="removeFile(data.id)" @keydown.enter="removeFile(data.id)">
                     <iconify-icon icon="tabler:x" width="none" class="size-4" />
                 </button>
                 <!-- Alt text editor -->
                 <Popover.Root :positioning="{
                     strategy: 'fixed',
                 }" v-if="data.api_id" @update:open="o => !o && updateAltText(data.id, data.alt_text)">
                     <Popover.Trigger aria-hidden="true"
-                        class="absolute top-1 left-1 p-1 bg-background-800 ring-1 ring-white/5 text-white text-xs rounded size-6">
+                        class="absolute top-1 left-1 p-1 bg-dark-800 ring-1 ring-white/5 text-white text-xs rounded size-6">
                         <iconify-icon icon="tabler:alt" width="none" class="size-4" />
                     </Popover.Trigger>
                     <Popover.Positioner class="!z-[100]">
                         <Popover.Content
-                            class="p-1 bg-background-400 rounded text-sm ring-1 ring-white/10 shadow-lg text-text-300 !min-w-72">
+                            class="p-1 bg-dark-400 rounded text-sm ring-1 ring-white/10 shadow-lg text-gray-300 !min-w-72">
                             <textarea :disabled="data.progress < 1.0" @keydown.enter.stop v-model="data.alt_text"
                                 placeholder="Add alt text"
-                                class="w-full p-2 text-sm prose prose-invert bg-background-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none" />
+                                class="w-full p-2 text-sm prose prose-invert bg-dark-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none" />
                             <Button theme="secondary" @click="updateAltText(data.id, data.alt_text)" class="w-full"
                                 :loading="data.progress < 1.0">
                                 <span>Edit</span>

components/composer/modal.client.vue

@@ -18,7 +18,7 @@
                         leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
                         <Dialog.Content class="overflow-y-auto w-full max-h-full md:py-16">
                             <div
-                                class="relative overflow-hidden max-w-xl mx-auto rounded-lg bg-background-700 ring-1 ring-background-800 text-left shadow-xl transition-all w-full">
+                                class="relative overflow-hidden max-w-xl mx-auto rounded-lg bg-dark-700 ring-1 ring-dark-800 text-left shadow-xl transition-all w-full">
                                 <Composer v-if="instance" :instance="instance as any" />
                             </div>
                         </Dialog.Content>

components/composer/suggestbox.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="w-full max-w-full rounded ring-1 ring-background-300 bg-background-800 absolute z-20 flex flex-col">
+    <div class="w-full max-w-full rounded ring-1 ring-dark-300 bg-dark-800 absolute z-20 flex flex-col">
         <slot />
     </div>
 </template>

components/dropdowns/AdaptiveDropdown.vue

@@ -17,9 +17,9 @@
                     leave-active-class="transition ease-out duration-75"
                     leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
                     <Menu.Content v-if="open"
-                        :class="['z-20 mt-2 rounded overflow-hidden p-1 space-y-1 bg-background-700 shadow-lg ring-1 ring-white/10 focus:outline-none min-w-56', id]">
+                        :class="['z-20 mt-2 rounded overflow-hidden p-1 space-y-1 bg-dark-700 shadow-lg ring-1 ring-white/10 focus:outline-none min-w-56', id]">
                         <div v-if="isSmallScreen" class="w-full py-2">
-                            <div class="rounded-full h-1 bg-text-400 w-12 mx-auto"></div>
+                            <div class="rounded-full h-1 bg-gray-400 w-12 mx-auto"></div>
                         </div>
                         <slot name="items"></slot>
                     </Menu.Content>

components/errors/ErrorBoundary.vue

@@ -2,9 +2,9 @@
     <slot name="error" v-if="error" v-bind="{ error }">
         <div id="error" class="grid min-h-screen place-items-center px-6 py-24 sm:py-32 lg:px-8">
             <div class="text-center prose prose-invert max-w-md w-full">
-                <h1 class="mt-4 text-3xl font-bold tracking-tight text-text-100 sm:text-5xl">{{ error.title }}
+                <h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-100 sm:text-5xl">{{ error.title }}
                 </h1>
-                <p class="mt-6 text-base leading-7 text-text-400" v-html="error.message"></p>
+                <p class="mt-6 text-base leading-7 text-gray-400" v-html="error.message"></p>
                 <div class="mt-10 grid grid-cols-2 gap-x-6 mx-auto max-w-md">
                     <Button theme="primary" class="w-full" @click="back">Go back</Button>
                     <a href="https://github.com/lysand-org/frontend/issues" target="_blank">

components/errors/noscript.vue

@@ -3,22 +3,21 @@ import SquarePattern from "../graphics/square-pattern.vue";
 </script>
 
 <template>
-    <div
-        class="grid min-h-screen place-items-center px-6 py-24 sm:py-32 lg:px-8 fixed inset-0 z-[1000000] bg-background-900">
+    <div class="grid min-h-screen place-items-center px-6 py-24 sm:py-32 lg:px-8 fixed inset-0 z-[1000000] bg-dark-900">
         <SquarePattern />
         <div class="prose prose-invert max-w-lg">
-            <h1 class="mt-4 text-3xl font-bold tracking-tight text-text-100 sm:text-5xl">JavaScript is disabled
+            <h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-100 sm:text-5xl">JavaScript is disabled
             </h1>
-            <p class="mt-6 text-base leading-7 text-text-400">
+            <p class="mt-6 text-base leading-7 text-gray-400">
                 This website requires JavaScript to function properly. Please enable JavaScript in your browser
                 settings.
             </p>
-            <p class="mt-6 text-base leading-7 text-text-400">
+            <p class="mt-6 text-base leading-7 text-gray-400">
                 If you are using a browser that does not support JavaScript, please consider using a modern browser
                 like <a href="https://www.mozilla.org/firefox/new/" class="underline">Firefox</a> or <a
                     href="https://www.google.com/chrome/" class="underline">Chrome</a>.
             </p>
-            <p class="mt-6 text-base leading-7 text-text-400">
+            <p class="mt-6 text-base leading-7 text-gray-400">
                 This application does not track you, collect user data, use cookies of any kind or send requests to
                 servers outside of your account's instance.
             </p>

components/graphics/square-pattern.vue

@@ -6,7 +6,7 @@
                 patternUnits="userSpaceOnUse">
                 <path d="M.5 200V.5H200" fill="none"></path>
             </pattern>
-        </defs><svg x="50%" y="-1" class="overflow-visible fill-text-800/20">
+        </defs><svg x="50%" y="-1" class="overflow-visible fill-gray-800/20">
             <path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
                 stroke-width="0"></path>
         </svg>

components/headers/greeting.vue

@@ -1,14 +1,14 @@
 <template>
-    <div v-if="identity" class="bg-background-800 z-0 p-6 my-5 relative overflow-hidden rounded ring-1 ring-white/5">
+    <div v-if="identity" class="bg-dark-800 z-0 p-6 my-5 relative overflow-hidden rounded ring-1 ring-white/5">
         <div class="sm:flex sm:items-center sm:justify-between gap-3">
             <div class="sm:flex sm:space-x-5 grow">
                 <Avatar :src="identity.account.avatar"
                     class="mx-auto shrink-0 size-20 rounded overflow-hidden ring-1 ring-white/10"
                     :alt="'Your avatar'" />
                 <div
-                    class="mt-4 text-center flex flex-col justify-center sm:mt-0 sm:text-left bg-background-800 py-2 px-4 rounded grow ring-1 ring-white/10">
-                    <p class="text-sm font-medium text-text-300">Welcome back,</p>
-                    <p class="text-xl font-bold text-text-50 sm:text-2xl line-clamp-1" v-html="display_name"></p>
+                    class="mt-4 text-center flex flex-col justify-center sm:mt-0 sm:text-left bg-dark-800 py-2 px-4 rounded grow ring-1 ring-white/10">
+                    <p class="text-sm font-medium text-gray-300">Welcome back,</p>
+                    <p class="text-xl font-bold text-gray-50 sm:text-2xl line-clamp-1" v-html="display_name"></p>
                 </div>
             </div>
         </div>

components/inputs/label.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="flex flex-row justify-between">
         <label v-bind="$attrs"
-            class="select-none font-semibold text-base/6 disabled:opacity-50 sm:text-sm/6 text-text-100">
+            class="select-none font-semibold text-base/6 disabled:opacity-50 sm:text-sm/6 text-gray-100">
             <slot />
         </label>
         <div :id="`${$attrs.for}-label-slot`"></div>

components/inputs/password-input.vue

@@ -2,7 +2,7 @@
     <TextInput @input="e => content = (e.target as HTMLInputElement).value" v-bind="$attrs, $props" v-model="content"
         :type="showPassword ? 'text' : 'password'" :spellcheck="false" />
     <Progress.Root class="flex flex-row items-center gap-x-2" v-if="showStrength">
-        <Progress.Label class="text-xs text-text-300 font-semibold w-12">
+        <Progress.Label class="text-xs text-gray-300 font-semibold w-12">
             {{ text }}
         </Progress.Label>
         <Progress.Track class="rounded-sm w-full h-2 duration-300" :style="{
@@ -13,7 +13,7 @@
     </Progress.Root>
     <Teleport :to="`#${$attrs.id}-label-slot`" v-if="teleport">
         <button type="button" @click="showPassword = !showPassword"
-            class="text-xs ml-auto block mt-2 font-semibold text-text-400">
+            class="text-xs ml-auto block mt-2 font-semibold text-gray-400">
             <iconify-icon icon="tabler:eye" class="size-4 align-text-top" height="none" />
             {{ showPassword ? "Hide password" : "Show password" }}
         </button>