✨ Improve accessibility by enhancing text opacity for better readability in various components

Author: HassanZahirnia

resources/css/app.css

@@ -156,6 +156,10 @@ nav > ul > li > ul {
     @apply bg-gray-100 ring-gray-300 dark:bg-black/50 dark:ring-gray-700/70;
 }
 
+.DocSearch-Button:hover .DocSearch-Button-Placeholder {
+    @apply text-black dark:text-white;
+}
+
 .DocSearch-Button .DocSearch-Search-Icon {
     height: 0.87rem;
     @apply text-gray-500 dark:text-white/60;
@@ -169,7 +173,7 @@ nav > ul > li > ul {
 }
 
 .DocSearch-Button-Placeholder {
-    @apply hidden pr-20 text-sm min-[500px]:block dark:text-white/60;
+    @apply hidden pr-20 text-sm text-black/60 min-[500px]:block dark:text-white/60;
 }
 
 .DocSearch-Button-Keys {

resources/views/components/toc-and-sponsors.blade.php

@@ -1,5 +1,5 @@
 {{-- On this page --}}
-<h3 class="inline-flex items-center gap-1.5 text-sm opacity-50">
+<h3 class="inline-flex items-center gap-1.5 text-sm opacity-60">
     {{-- Icon --}}
     <x-icons.stacked-lines class="size-[18px]" />
 
@@ -37,7 +37,7 @@ class="mt-5 grid w-40 place-items-center gap-2 rounded-xl bg-pink-100 px-5 pb-3
 </a>
 
 {{-- Featured sponsors --}}
-<h3 class="inline-flex items-center gap-1.5 pt-3.5 text-sm opacity-50">
+<h3 class="inline-flex items-center gap-1.5 pt-3.5 text-sm opacity-60">
     {{-- Icon --}}
     <x-icons.star-circle class="size-[18px]" />
 
@@ -50,7 +50,7 @@ class="mt-5 grid w-40 place-items-center gap-2 rounded-xl bg-pink-100 px-5 pb-3
 
 {{-- Corporate sponsors --}}
 <h3
-    class="mt-5 inline-flex items-center gap-1.5 border-t border-t-black/20 pt-3.5 text-sm opacity-50 dark:border-t-white/15"
+    class="mt-5 inline-flex items-center gap-1.5 border-t border-t-black/20 pt-3.5 text-sm opacity-60 dark:border-t-white/15"
 >
     {{-- Icon --}}
     <x-icons.briefcase class="size-[18px]" />

resources/views/docs/index.blade.php

@@ -63,7 +63,7 @@ class="mt-5"
             <x-link-button href="{{ $previousPage['path'] }}">
                 <div class="self-center justify-self-start">
                     <div
-                        class="flex items-center justify-start gap-1.5 text-gray-500"
+                        class="flex items-center justify-start gap-1.5 opacity-60"
                     >
                         <x-icons.right-arrow
                             class="size-3 shrink-0 -scale-x-100"
@@ -79,7 +79,7 @@ class="size-3 shrink-0 -scale-x-100"
             <x-link-button href="{{ $nextPage['path'] }}">
                 <div class="self-center justify-self-end">
                     <div
-                        class="flex items-center justify-end gap-1.5 text-gray-500"
+                        class="flex items-center justify-end gap-1.5 opacity-60"
                     >
                         <div class="text-sm">Next</div>
                         <x-icons.right-arrow class="size-3 shrink-0" />