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
This commit is contained in:
root
2026-06-24 16:03:21 +02:00
parent 391458ce49
commit 3d5f94f9b9
28 changed files with 250 additions and 93 deletions
@@ -1,17 +1,17 @@
@props(['iconUrl' => '', 'color' => '', 'classes' => ''])
<div class="w-full flex flex-col gap-y-4 rounded overflow-hidden bg-[#2b303c] pb-3 shadow-sm text-gray-100 {{ $classes }}">
<div class="flex gap-x-2 bg-[#21242e] p-3 text-gray-100">
<div class="w-full flex flex-col gap-y-4 rounded overflow-hidden bg-[#2b303c] pb-3 shadow-sm {{ $classes }}" style="color: var(--color-text);">
<div class="flex gap-x-2 bg-[#21242e] p-3">
@if (!empty($iconUrl))
<div style="background-image: url({{ $iconUrl }}); background-color: {{ $color }}; background-repeat: no-repeat; background-position: center;" class="max-w-[50px] max-h-[50px] min-w-[50px] min-h-[50px] rounded-full relative flex items-center justify-center "></div>
@endif
<div class="flex flex-col justify-center text-sm w-full">
<div class="w-full text-[16px]">{{ $title }}</div>
<div class="w-full" style="font-size: var(--size-body-text, 16px);">{{ $title }}</div>
@if(isset($underTitle))
<p class="text-gray-300">{{ $underTitle }}</p>
<p class="text-muted">{{ $underTitle }}</p>
@endif
</div>
</div>