refactor: add light mode for product landing page

See: FE-144

Author: marcel-bitfly

frontend/i18n/locales/en.json

@@ -15,6 +15,11 @@
             "side_navigation": "Side Navigation"
         },
         "footer": {
+            "color_mode": {
+                "dark": "Dark",
+                "light": "Light",
+                "title": "Color Mode"
+            },
             "copyright": "© {year} beaconcha.in. All rights reserved",
             "imprint": "Imprint",
             "links": {

frontend/layers/base/app/components/BaseButtonIcon.vue

@@ -31,9 +31,9 @@ const {
   <component
     :is="to ? NuxtLink : 'button'"
     :to
-    class="border border-transparent flex rounded-full bg-linear-to-b disabled:opacity-40 aria-disabled:opacity-40 active:opacity-80 size-fit"
+    class="border flex rounded-full bg-linear-to-b disabled:opacity-40 aria-disabled:opacity-40 active:opacity-80 size-fit"
     :class="[
-      variant === 'secondary' && 'from-gray-300 to-gray-200 dark:from-charcoal-600 dark:to-charcoal-700 opacity-90',
+      variant === 'secondary' && 'from-gray-300 to-gray-200 dark:from-charcoal-600 dark:to-charcoal-700 opacity-90 border-transparent',
       variant === 'tertiary' && 'dark:border-charcoal-400 border-gray-200',
       size === 'md' && 'p-md',
       size === 'lg' && 'p-md',

frontend/layers/base/app/components/BaseCard.vue

@@ -26,7 +26,7 @@ const id = useId()
 </script>
 
 <template>
-  <div class="dark:bg-gray-950 p-3xl rounded-4xl flex flex-col gap-2xl w-full">
+  <div class="dark:bg-gray-950 border border-gray-100 dark:border-gray-900 p-3xl rounded-4xl flex flex-col gap-2xl w-full">
     <slot name="header">
       <header
         v-if="title"

frontend/layers/base/app/components/BaseIcon.vue

@@ -16,7 +16,9 @@ const customize = (content: string) => {
 
 <template>
   <Icon
+    aria-hidden="true"
     :name="`tabler:${name}`"
     :customize
+    mode="svg"
   />
 </template>

frontend/layers/base/app/components/BaseNavigation.vue

@@ -19,7 +19,7 @@ const v1Domain = useV1Domain()
 </script>
 
 <template>
-  <nav class="p-2xl isolate">
+  <nav class="p-2xl isolate bg-gray-50 dark:bg-transparent">
     <div class="max-w-8xl mx-auto grid gap-2xl [&>*]:[grid-area:1/1]">
       <span class="flex gap-2xl items-center z-10 w-fit">
         <BaseButtonIcon

frontend/layers/base/app/components/BaseNavigationItem.vue

@@ -13,7 +13,7 @@ defineProps<BaseNavigationItem>()
 
 <template>
   <NuxtLink
-    class="font-semibold flex gap-md items-center p-md bg-linear-to-b rounded-full from-gray-300 to-gray-200 dark:from-charcoal-600 dark:to-charcoal-700 opacity-90 hover:opacity-95 text-sm"
+    class="font-semibold flex gap-md items-center py-sm px-md bg-linear-to-b rounded-full border border-gray-200 dark:border-transparent dark:from-charcoal-600 dark:to-charcoal-700 opacity-90 hover:opacity-95 text-sm"
     :to
   >
     <BaseIcon :name="icon" />

frontend/layers/base/app/components/BaseSearchInput.vue

@@ -85,7 +85,7 @@ const handleClickOutside = (e: PointerDownOutsideEvent) => {
         :aria-busy="isLoading"
         :placeholder
         class="search-input w-full text-2xl font-semibold rounded-3xl pt-3xl pr-5xl pb-6xl pl-2xl dark:bg-gray-950
-        dark:focus:bg-black placeholder:dark:text-gray-500 dark:text-white border-1 dark:border-charcoal-500
+        bg-white dark:focus:bg-black placeholder:dark:text-gray-500 dark:text-white border border-gray-500 dark:border-charcoal-500
         dark:focus:border-charcoal-50 dark:focus-within:outline-0"
         @update:model-value="(value) => { if (!value) hasSearched = false }"
       />

frontend/layers/base/app/components/BaseSwitch.vue

@@ -60,17 +60,20 @@ watch(modelValue, () => {
         :class="classList?.trackItem"
         class="relative"
       >
-        <span
-          class="relative z-10"
-        >
-          {{ values[0]?.label }}
+        <span class="relative z-10">
+          <slot
+            name="first"
+            :label="values[0]?.label"
+          >
+            {{ values[0]?.label }}
+          </slot>
         </span>
         <input
           :id="idFirstValue"
           v-model="modelValue"
           :value="values[0]?.key"
           type="radio"
-          class="appearance-none"
+          class="sr-only"
           :name
         >
         <span
@@ -85,16 +88,19 @@ watch(modelValue, () => {
         :class="classList?.trackItem"
         :for="idSecondValue"
       >
-        <span
-          class="relative z-10"
-        >
-          {{ values[1]?.label }}
+        <span class="relative z-10">
+          <slot
+            name="second"
+            :label="values[1]?.label"
+          >
+            {{ values[1]?.label }}
+          </slot>
         </span>
         <input
           :id="idSecondValue"
           v-model="modelValue"
           :value="values[1]?.key"
-          class="appearance-none"
+          class="sr-only"
           type="radio"
           :name
         >

frontend/layers/base/app/components/BaseTabs.vue

@@ -9,6 +9,7 @@ const props = defineProps<{
     activeTabIndicator?: string,
     tab?: string,
     tablist?: string,
+    tabpanel?: string,
   },
   defaultSelectedTab?: number,
   hasFocusableElement?: boolean,
@@ -137,6 +138,7 @@ watch(selectedTab, (newValue, oldValue) => {
         <article
           v-if="selectedTab === index"
           :id="`${idTabPanel}-${index}`"
+          :class="classList?.tabpanel"
           tabindex="0"
           role="tabpanel"
           :aria-labelledby="`${idTab}-${index}`"

frontend/layers/base/app/components/TheFooter.vue

@@ -40,11 +40,12 @@ const resourceLinks: Link[] = [
     href: 'https://status.beaconcha.in/', icon: 'circle-check-filled', text: $t('base.footer.resources.links.site_status'),
   },
 ]
+const colorMode = useColorMode()
 </script>
 
 <template>
   <div
-    class="bg-gray-50 dark:bg-gray-950 flex flex-col gap-3xl sm:gap-5xl pt-3xl px-xl pb-7xl sm:px-5xl sm:py-7xl sm:rounded-4xl sm:mb-xl max-w-24xl mx-auto"
+    class="bg-gray-50 dark:bg-gray-950 flex flex-col gap-3xl sm:gap-5xl pt-3xl px-xl pb-7xl sm:px-5xl sm:py-7xl sm:rounded-4xl sm:mb-xl max-w-24xl mx-auto [&_*:focus-visible]:rounded-3xl [&_*:focus-visible]:outline-offset-4"
   >
     <NuxtLink
       to="/"
@@ -168,6 +169,35 @@ const resourceLinks: Link[] = [
             />
           </li>
         </ul>
+        <BaseSwitch
+          v-model="colorMode.value"
+          class="w-fit -ml-[1px]"
+          :values="[
+            {
+              label: $t('base.footer.color_mode.light'),
+              key: 'light',
+            },
+            {
+              label: $t('base.footer.color_mode.dark'),
+              key: 'dark',
+            },
+          ]"
+          :class-list="{
+            trackItem: 'p-md +py-md +px-lg border border-transparent rounded-4xl text-gray-600 dark:text-gray-400 has-checked:text-black has-checked:dark:text-white has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-brand-300',
+            track: 'border border-gray-100 dark:border-gray-900 flex gap-md [&>*]:grow text-center bg-white dark:bg-gray-950 rounded-4xl shadow-[0_1px_0.5px_0_rgba(255,255,255,0.08)_inset,0-1px_0_0_rgba(255,255,255,0.18)_inset]',
+            thumb: 'bg-gray-50 dark:bg-gray-800 rounded-4xl shadow-[0_2px_2px_0_rgba(0,0,0,0.25),_0_0.5px_0.5px_0_rgba(255,255,255,0.12)_inset]',
+          }"
+          screenreader-title="base.footer.color_mode.title"
+        >
+          <template #first=" { label } ">
+            <BaseIcon name="sun" />
+            <span class="sr-only">{{ label }}</span>
+          </template>
+          <template #second=" { label } ">
+            <BaseIcon name="moon" />
+            <span class="sr-only">{{ label }}</span>
+          </template>
+        </BaseSwitch>
       </div>
     </div>