Improve text visibility in atom and dusk themes

- Add CSS variable support to dusk theme components for dynamic text colors
- Fix low-contrast preset color combinations (cyberpunk, neon, magma, forest, obsidian, space)
- Add text-shadow utility classes and apply to site header and backgrounds
- Style logout buttons as proper buttons matching other button styles
- Fix hardcoded text colors in atom theme components

resources/themes/atom/css/app.css

@@ -400,3 +400,13 @@ html.dark .badge-drawer-button .toggled {
   background-color: #fff;
   opacity: 0.1;
 }
+
+/* Text utility classes using CSS variables */
+.text-body { color: var(--color-text); }
+.text-muted { color: var(--color-text-muted); }
+.text-nav { color: var(--color-navbar-text); }
+
+/* Text shadow for readability */
+.text-shadow { text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
+.text-shadow-sm { text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
+.text-shadow-lg { text-shadow: 0 2px 8px rgba(0,0,0,0.9); }

resources/themes/atom/views/components/content/guest-content-card.blade.php

@@ -7,10 +7,10 @@
  </div>
 
  <div class="flex flex-col">
- <p class="font-semibold text-black dark:text-gray-200">{{ $title }}</p>
+ <p class="font-semibold text-body">{{ $title }}</p>
 
  @if(isset($underTitle))
- <p class="dark:text-gray-500">{{ $underTitle }}</p>
+ <p class="text-muted">{{ $underTitle }}</p>
  @endif
  </div>
  </div>

resources/themes/atom/views/components/form/input.blade.php

@@ -11,7 +11,7 @@
  onblur="this.style.borderColor='var(--input-border-color, var(--color-text-muted))'">
 
 @error($name, $errorBag)
- <p class="mt-1 text-xs italic" style="color: #ef4444;">
+ <p class="mt-1 text-xs italic" style="color: var(--button-danger-color, #ef4444);">
  {{ $message }}
  </p>
 @enderror

resources/themes/atom/views/components/navigation/user-dropdown.blade.php

@@ -25,9 +25,9 @@
  @auth
  <form action="{{ route('logout') }}" method="POST" class="block">
  @csrf
- <button type="submit"
- class="dropdown-item flex items-center gap-2 w-full text-left hover:!bg-red-500/20"
- style="color: var(--button-danger-color)">
+  <button type="submit"
+  class="dropdown-item flex items-center gap-2 justify-center w-full py-2 px-4 rounded-md font-semibold transition duration-200 ease-in-out"
+  style="background-color: var(--button-danger-color, #ef4444); color: var(--button-danger-text-color, #ffffff);">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
  <path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
  </svg>

resources/themes/atom/views/components/site-header.blade.php

@@ -52,24 +52,24 @@
  @guest
  <x-modals.modal-wrapper>
  <div class="flex justify-center">
- <div class="font-semibold flex-col md:w-[600px] " style="color: var(--color-text)">
- <p class="hidden text-center text-xl md:block " style="color: var(--color-text)">
- {{ __('An online virtual world where you can create your own avatar, make friends, chat, create rooms and much more!') }}
- </p>
+ <div class="font-semibold flex-col md:w-[600px]" style="color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.7);">
+  <p class="hidden text-center text-xl md:block" style="color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.7);">
+  {{ __('An online virtual world where you can create your own avatar, make friends, chat, create rooms and much more!') }}
+  </p>
 
- <div class="flex flex-col items-center justify-center gap-x-6 gap-y-4 md:mt-6 md:flex-row md:gap-y-0">
- <button type="button" x-on:click="open = true"
- class="rounded-full border-2 px-8! py-2! uppercase transition! duration-200! ease-in-out!"
- style="border-color: var(--color-primary); background-color: var(--color-primary); color: var(--button-text-color)">
- {{ __('Login') }}
- </button>
+  <div class="flex flex-col items-center justify-center gap-x-6 gap-y-4 md:mt-6 md:flex-row md:gap-y-0">
+  <button type="button" x-on:click="open = true"
+  class="rounded-full border-2 px-8! py-2! uppercase transition! duration-200! ease-in-out!"
+  style="border-color: var(--color-primary); background-color: var(--color-primary); color: var(--button-text-color)">
+  {{ __('Login') }}
+  </button>
 
- <p class="text-sm uppercase " style="color: var(--color-text-muted)">{{ __('Or') }}</p>
+  <p class="text-sm uppercase" style="color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.7);">{{ __('Or') }}</p>
 
  <a data-turbolinks="false" href="{{ route('register') }}">
  <button
  class="uppercase px-8! py-2.5! rounded-full transition! ease-in-out! duration-200!"
- style="background-color: var(--color-accent); color: #ffffff;">
+ style="background-color: var(--color-accent); color: var(--button-text-color, #ffffff);">
  {{ __('Create an account') }}
  </button>
  </a>

resources/themes/atom/views/components/top-header.blade.php

@@ -66,7 +66,7 @@
 
  <form action="{{ route('logout') }}" method="POST" class="block">
  @csrf
- <button type="submit" class="dropdown-item w-full text-left hover:!bg-red-500/20" style="color: var(--button-danger-color);">
+  <button type="submit" class="dropdown-item w-full text-center py-2 px-4 rounded-md font-semibold transition duration-200 ease-in-out" style="background-color: var(--button-danger-color, #ef4444); color: var(--button-danger-text-color, #ffffff);">
  {{ __('Logout') }}
  </button>
  </form>

resources/themes/atom/views/layouts/app.blade.php

@@ -105,9 +105,21 @@
  /* Spinner */
  --spinner-color: {{ setting('spinner_color', '#eeb425') }};
 
- /* Navbar */
- --navbar-height: {{ setting('navbar_height', '64') }}px;
- }
+  /* Navbar */
+  --navbar-height: {{ setting('navbar_height', '64') }}px;
+  }
+
+  /* Text shadow for readability on the site background */
+  .site-bg {
+    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+  }
+  .site-bg [class*="bg-"],
+  .site-bg [class*="rounded"],
+  .site-bg [style*="background"],
+  .site-bg .swiper-slide,
+  .site-bg img {
+    text-shadow: none;
+  }
 
  /* Button Effects */
  @keyframes sparkle {