feat: enable light mode on lp (#492)

HugoRCD · Feb 23, 2025 · 4979c50 · 4979c50
1 parent 2098bc6
commit 4979c50
Show file tree

Hide file tree

Showing 19 changed files with 33 additions and 96 deletions.
diff --git a/apps/lp/app/app.vue b/apps/lp/app/app.vue
@@ -77,7 +77,7 @@ defineShortcuts({
 
 <template>
   <Html lang="en">
-    <Body class="overscroll-y-none selection:bg-primary overflow-x-hidden text-black selection:text-inverted bg-white dark:bg-neutral-950 dark:text-white">
+    <Body class="overscroll-y-none selection:bg-primary overflow-x-hidden selection:text-inverted">
       <ShelveMeta :default-og-image :title="route.meta.title" :description="route.meta.description" />
 
       <NuxtLoadingIndicator color="#FFF" />

diff --git a/apps/lp/app/components/Header.vue b/apps/lp/app/components/Header.vue
@@ -19,7 +19,7 @@ defineShortcuts({
 </script>
 
 <template>
-  <UHeader class="bg-white dark:bg-neutral-950" :ui="{ left: 'min-w-0' }" mode="drawer" :menu="{ shouldScaleBackground: true }">
+  <UHeader :ui="{ left: 'min-w-0' }" mode="drawer" :menu="{ shouldScaleBackground: true }">
     <template #left>
       <Logo lp /> <span class="text-xs font-mono text-(--ui-text-muted)">| v{{ version }}</span>
     </template>

diff --git a/apps/lp/app/components/Signature.vue b/apps/lp/app/components/Signature.vue
@@ -25,8 +25,8 @@
 
 <style scoped>
 .signature {
-  stroke: #797979;
-  filter: drop-shadow(0 0 10px rgba(121, 121, 121, 0.5));
+  stroke: var(--ui-bg-accented);
+  filter: drop-shadow(0 0 10px var(--ui-bg-accented));
   stroke-dasharray: 2036;
   stroke-dashoffset: 2036;
   animation: sign 5s ease-in forwards;

diff --git a/apps/lp/app/components/Status.vue b/apps/lp/app/components/Status.vue
diff --git a/apps/lp/app/components/brand/TypographyShowcase.vue b/apps/lp/app/components/brand/TypographyShowcase.vue
@@ -5,24 +5,24 @@ defineProps<{
 </script>
 
 <template>
-  <div class="p-6 rounded-md border border-solid border-(--ui-border)/50 bg-neutral-950 hover:bg-neutral-900/50 transition-colors">
+  <div class="p-6 rounded-md border border-solid border-(--ui-border)/50 bg-(--ui-bg-elevated) hover:bg-(--ui-bg-elevated)/50 transition-colors">
     <template v-if="font === 'geist'">
       <NuxtLink class="space-y-6 cursor-pointer" to="https://vercel.com/font">
         <div>
           <span class="text-sm text-(--ui-text-muted)">Display</span>
-          <h1 class="text-4xl font-medium">
+          <h1 class="text-4xl font-medium text-(--ui-text-highlighted)">
             The quick brown fox
           </h1>
         </div>
         <div>
           <span class="text-sm text-(--ui-text-muted)">Heading</span>
-          <h2 class="text-2xl font-medium">
+          <h2 class="text-2xl font-medium text-(--ui-text-highlighted)">
             The quick brown fox
           </h2>
         </div>
         <div>
           <span class="text-sm text-(--ui-text-muted)">Body</span>
-          <p>
+          <p class="text-(--ui-text-muted)">
             The quick brown fox jumps over the lazy dog. This pangram contains every letter of the English alphabet at least once.
           </p>
         </div>
@@ -32,17 +32,17 @@ defineProps<{
       <NuxtLink class="space-y-6 cursor-pointer" to="https://fonts.google.com/specimen/JetBrains+Mono">
         <div>
           <span class="text-sm text-(--ui-text-muted)">Code</span>
-          <div class="font-mono bg-(--ui-gray-900) p-4 rounded-md">
-            <pre class="text-white">const shelve = {
+          <div class="font-mono bg-(--ui-bg) p-4 rounded-md">
+            <pre class="text-(--ui-text-muted)">const shelve = {
   name: 'Shelve',
   type: 'Awesome'
 }</pre>
           </div>
         </div>
         <div>
           <span class="text-sm text-(--ui-text-muted)">Terminal</span>
-          <div class="font-mono bg-(--ui-gray-900) p-4 rounded-md">
-            <pre class="text-white">$ npx create-nuxt-app my-project</pre>
+          <div class="font-mono bg-(--ui-bg) p-4 rounded-md">
+            <pre class="text-(--ui-text-muted)">$ npx create-nuxt-app my-project</pre>
           </div>
         </div>
       </NuxtLink>

diff --git a/apps/lp/app/components/layout/Footer.vue b/apps/lp/app/components/layout/Footer.vue
@@ -92,7 +92,7 @@ const columns = ref([
           </template>
         </UFooterColumns>
       </UContainer>
-      <USeparator icon="custom:shelve" type="dashed" />
+      <USeparator icon="custom:shelve" />
     </template>
 
 

diff --git a/apps/lp/app/components/layout/Navbar.vue b/apps/lp/app/components/layout/Navbar.vue
@@ -112,7 +112,7 @@ const headerUi = computed(() => ({
 const navigationUi = computed(() => ({
   item: 'py-0',
   linkTrailingIcon: 'hidden',
-  viewport: 'bg-(--ui-bg) font-mono',
+  viewport: 'bg-(--ui-bg) font-mono outline outline-offset-4 outline-(--ui-border)',
   viewportWrapper: 'w-[600px] transition-all duration-500 left-1/2 -translate-x-1/2',
 }))
 </script>

diff --git a/apps/lp/app/pages/about.vue b/apps/lp/app/pages/about.vue
@@ -2,9 +2,10 @@
 definePageMeta({
   title: 'About',
   description: 'Discover the story behind the project, its origins, and the journey to where we are today.',
-  colorMode: 'dark',
 })
 
+const colorMode = useColorMode()
+
 const { data } = await useAsyncData('about', () => {
   return queryCollection('about').first()
 })
@@ -17,7 +18,7 @@ const { data } = await useAsyncData('about', () => {
         <div class="text-center w-full h-full flex flex-col italic font-mono items-center justify-center">
           <CrossedDiv line>
             <div class="p-8 pointer-events-auto flex flex-col items-center justify-center">
-              <ParticlesImg src="/shelve.svg" alt="Shelve Logo" :max-width="200" />
+              <ParticlesImg :key="colorMode.value" src="/shelve.svg" alt="Shelve Logo" :max-width="200" :color="colorMode.value === 'dark' ? '#FFF' : '#000'" />
               <ScrambleText class="mt-8 mb-2 main-gradient text-4xl sm:text-5xl" label="About Shelve" />
               <p class="max-w-lg text-center text-xs text-(--ui-text-muted) sm:text-base">
                 Discover the story behind the project, its origins, and the journey to where we are today.
@@ -32,14 +33,14 @@ const { data } = await useAsyncData('about', () => {
       <div class="h-screen pointer-events-none" />
 
       <USeparator />
-      <div v-if="data" class="relative w-full pt-10 sm:pt-20 bg-neutral-950 z-10">
+      <div v-if="data" class="relative w-full pt-10 sm:pt-20 bg-(--ui-bg) z-10">
         <div v-for="(section, index) in data.about" :key="index" class="group max-w-5xl mx-auto px-4 pointer-events-auto">
           <div class="flex flex-col sm:grid sm:grid-cols-12 gap-16 py-16 group-last:pb-0">
             <div class="col-span-5 relative">
               <ProseImg
                 :src="section.image"
                 :alt="section.title"
-                class="grayscale col-span-12 w-full mix-blend-lighten"
+                class="grayscale col-span-12 w-full mix-blend-lighten invert dark:invert-0"
               />
             </div>
             <div class="col-span-7">
@@ -53,7 +54,7 @@ const { data } = await useAsyncData('about', () => {
                 <MDC class="text-sm leading-relaxed text-(--ui-text-muted)" :value="section.content" unwrap="p" />
               </div>
             </div>
-            <div class="hidden group-last:flex col-span-12 justify-end bg-neutral-950 mb-16">
+            <div class="hidden group-last:flex col-span-12 justify-end bg-(--ui-bg) mb-16">
               <Signature />
             </div>
           </div>

diff --git a/apps/lp/app/pages/blog/[...slug].vue b/apps/lp/app/pages/blog/[...slug].vue
@@ -2,10 +2,6 @@
 import type { ContentNavigationItem } from '@nuxt/content'
 import { findPageBreadcrumb, mapContentNavigation } from '#ui-pro/utils/content'
 
-definePageMeta({
-  colorMode: 'dark',
-})
-
 const route = useRoute()
 
 const { data: page } = await useAsyncData(route.path, () =>
@@ -72,17 +68,6 @@ const editThisPage = computed(() => ({
             </ULink>
           </div>
         </UPageBody>
-
-        <!--        <template v-if="page?.body?.toc?.links?.length" #right>
-          <UContentToc highlight :links="page.body.toc.links" class="z-[2] bg-white dark:bg-neutral-950">
-            <template #default>
-              <div class="flex items-center gap-2">
-                <UIcon name="i-lucide-align-left" />
-                On this page
-              </div>
-            </template>
-          </UContentToc>
-        </template>-->
       </UPage>
     </UContainer>
   </UMain>

diff --git a/apps/lp/app/pages/blog/index.vue b/apps/lp/app/pages/blog/index.vue
@@ -2,7 +2,6 @@
 definePageMeta({
   title: 'Blog',
   description: 'Explore our blog to learn more about our latest features, updates, and insights.',
-  colorMode: 'dark',
 })
 
 const route = useRoute()

diff --git a/apps/lp/app/pages/brand.vue b/apps/lp/app/pages/brand.vue
@@ -2,7 +2,6 @@
 definePageMeta({
   title: 'Brand Guidelines',
   description: 'Welcome to Shelve\'s brand guidelines. These guidelines ensure a consistent and professional representation of Shelve across all platforms, emphasizing our commitment to simplicity, elegance, and developer experience.',
-  colorMode: 'dark',
 })
 
 const { data: page } = await useAsyncData('brand', () => {

diff --git a/apps/lp/app/pages/docs/[...slug].vue b/apps/lp/app/pages/docs/[...slug].vue
@@ -97,7 +97,7 @@ const communityLinks = computed(() => [
       </UPageBody>
 
       <template v-if="page?.body?.toc?.links?.length" #right>
-        <UContentToc highlight :links="page.body.toc.links" class="z-[2] bg-white dark:bg-neutral-950">
+        <UContentToc highlight :links="page.body.toc.links" class="z-[2] bg-(--ui-bg)">
           <template #default>
             <div class="flex items-center gap-2">
               <UIcon name="i-lucide-align-left" />

diff --git a/apps/lp/app/pages/index.vue b/apps/lp/app/pages/index.vue
@@ -77,7 +77,7 @@ function useClipboard(text: string) {
           </div>
 
           <div class="relative flex items-center justify-center">
-            <div class="flex size-16 items-center justify-center rounded-full border border-(--ui-border) bg-(--ui-bg-inverted)/5 p-3 shadow-xl">
+            <div class="flex size-16 items-center justify-center rounded-full border border-white/10 bg-(--ui-bg-inverted)/2.5 p-3 shadow-md">
               <UIcon name="lucide:lock" class="size-8 text-(--ui-text-muted)" />
             </div>
           </div>

diff --git a/apps/lp/app/pages/roadmap.vue b/apps/lp/app/pages/roadmap.vue
@@ -1,8 +1,4 @@
 <script setup lang="ts">
-definePageMeta({
-  colorMode: 'dark',
-})
-
 useHead({
   title: 'Roadmap'
 })
@@ -11,7 +7,7 @@ const appConfig = useAppConfig()
 
 const token = 'eyJ2aWV3IjoiYm9hcmQiLCJib2FyZFN0YXR1c2VzIjpbInRyaWFnZSIsImJhY2tsb2ciLCJ0b2RvIiwiaW5fcHJvZ3Jlc3MiLCJpbl9yZXZpZXciLCJkb25lIiwicmVsZWFzZWQiLCJjYW5jZWxsZWQiXSwiYm9hcmRMaW5rZWRQcnMiOnRydWUsImxpc3RHcm91cCI6InN0YXR1cyIsImxpc3RPcmRlciI6ImNyZWF0ZWRfYXQiLCJ0aW1lbGluZVpvb20iOiJtb250aCIsInRpbWVsaW5lT3JkZXIiOiJzdGF0ZSIsInRpbWVsaW5lRGlzcGxheSI6ImFsbF9taWxlc3RvbmVzIiwiZmlsdGVycyI6e30sIm93bmVyIjoiSHVnb1JDRCIsIm5hbWUiOiJzaGVsdmUifQ=='
 
-const src = computed(() => `https://volta.net/embed/${token}?neutral=${appConfig.ui.neutral}&primary=${appConfig.ui.primary}`)
+const src = computed(() => `https://volta.net/embed/${token}?neutral=${appConfig.ui.colors.neutral}&primary=${appConfig.ui.colors.primary}`)
 </script>
 
 <template>

diff --git a/apps/shelve/app/components/layout/Divider.vue b/apps/shelve/app/components/layout/Divider.vue
@@ -9,7 +9,7 @@ defineProps({
 <template>
   <div class="linebreak">
     <div class="absolute flex w-full -translate-y-1/2 items-center justify-center text-(--ui-text-muted)">
-      <span class="bg-white/50 px-2 dark:bg-neutral-800">
+      <span class="bg-(--ui-bg-elevated) px-2">
         {{ text }}
       </span>
     </div>

diff --git a/apps/shelve/app/components/layout/NavItem.vue b/apps/shelve/app/components/layout/NavItem.vue
@@ -10,7 +10,7 @@ const { navItem, active = false } = defineProps<NavItemProps>()
 </script>
 
 <template>
-  <div class="nav-item select-none" :class="{ active }" @click="$router.push(navItem.path)">
+  <div class="nav-item select-none" :class="{ active }" :data-active="active" @click="$router.push(navItem.path)">
     <UIcon :name="navItem.icon" class="font-medium" />
     <span class="text-sm">
       {{ capitalize(navItem.name) }}
@@ -23,16 +23,7 @@ const { navItem, active = false } = defineProps<NavItemProps>()
 
 .nav-item {
   @apply cursor-pointer rounded-lg px-3 py-1.5 flex flex-row items-center gap-2 transition-transform duration-200 ease-in-out;
-}
-
-.nav-item:hover {
-  @apply bg-neutral-100 text-white dark:bg-neutral-800;
-  @apply border-neutral-200 dark:border-neutral-700;
-}
-
-.nav-item.active {
-  @apply bg-neutral-100 text-white dark:bg-neutral-800;
-  @apply border-neutral-200 dark:border-neutral-700;
-  @apply shadow-sm;
+  @apply border border-transparent hover:border-(--ui-border) data-[active=true]:border-(--ui-border);
+  @apply bg-transparent hover:bg-(--ui-bg-muted) data-[active=true]:bg-(--ui-bg-accented)/50;
 }
 </style>
diff --git a/apps/shelve/app/components/team/Manager.vue b/apps/shelve/app/components/team/Manager.vue
@@ -52,7 +52,7 @@ const groups = computed(() => [
 
 <template>
   <UModal v-model:open="open" title="Switch team" description="Select a team to switch to">
-    <button class="w-full cursor-pointer flex items-center justify-between hover:bg-neutral-100 dark:hover:bg-neutral-800 p-2 rounded-lg">
+    <button class="w-full cursor-pointer flex items-center justify-between hover:bg-(--ui-bg-elevated) p-2 rounded-lg">
       <span class="flex items-center gap-2">
         <USkeleton v-if="loading" class="size-7 rounded-full" />
         <UAvatar v-else-if="currentTeam" :src="currentTeam.logo" size="sm" alt="team name" />

diff --git a/apps/shelve/app/components/variable/GithubSync.vue b/apps/shelve/app/components/variable/GithubSync.vue
@@ -118,7 +118,7 @@ async function onSubmit(event: FormSubmitEvent<SyncVariablesSchema>) {
                     v-model="state.repository"
                     :placeholder="sanitizeGithubUrl(state.repository)"
                     disabled
-                    class="w-full !bg-white dark:!bg-neutral-900"
+                    class="w-full bg-(--ui-bg-elevated)"
                   />
                 </div>
               </UFormField>

diff --git a/apps/shelve/app/pages/index.vue b/apps/shelve/app/pages/index.vue
@@ -45,9 +45,9 @@ async function navigateToTeam(team: Team) {
           Logout
         </UButton>
       </div>
-      <div class="size-80 absolute rounded-full bg-neutral-100/20 -top-20 -z-1 -left-20 blur-[200px]" />
+      <div class="size-80 absolute rounded-full dark:bg-(--ui-bg-inverted)/20 -top-20 -z-1 -left-20 blur-[200px]" />
       <CrossedDiv line>
-        <div class="bg-white dark:bg-neutral-900/70 p-8 dark:shadow-lg border border-(--ui-border) w-full backdrop-blur-md">
+        <div class="bg-(--ui-bg-muted) p-8 dark:shadow-lg border border-(--ui-border) w-full backdrop-blur-md">
           <div class="flex flex-col items-center gap-2">
             <UAvatar :src="user?.avatar" class="size-18 avatar" />
             <div class="flex flex-col items-center">
@@ -63,7 +63,7 @@ async function navigateToTeam(team: Team) {
             <div
               v-for="team in teams"
               :key="team.id"
-              class="flex items-center justify-between gap-4 cursor-pointer dark:bg-neutral-950 bg-neutral-100/50 p-4 rounded-lg dark:shadow-md ring-2 ring-transparent hover:ring-orange-500 transition-colors duration-300 ease-in-out"
+              class="flex items-center justify-between gap-4 cursor-pointer bg-(--ui-bg) p-4 rounded-lg dark:shadow-md ring-2 ring-transparent hover:ring-(--ui-primary) transition-colors duration-300 ease-in-out"
               @click="navigateToTeam(team)"
             >
               <div class="flex items-center gap-2">
@@ -79,7 +79,7 @@ async function navigateToTeam(team: Team) {
             </div>
           </div>
           <div v-else class="flex flex-col gap-4 mt-6">
-            <div v-for="i in 2" :key="i" class="flex items-center justify-between gap-4 dark:bg-neutral-950 bg-neutral-100/50 p-4 rounded-lg dark:shadow-md">
+            <div v-for="i in 2" :key="i" class="flex items-center justify-between gap-4 bg-(--ui-bg) p-4 rounded-lg dark:shadow-md">
               <div class="flex items-center gap-2">
                 <USkeleton class="size-10 rounded-full" />
                 <div class="flex flex-col gap-2">