Daniel/ndsolutionswebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update color preset buttons to be fully light and dark mode adaptive
All checks were successful
Production Build & Deploy / build-and-deploy (push) Successful in 27s
Details

Browse Source
This commit is contained in:
DanielS
2026-07-19 00:00:40 +02:00
parent a3222ec496
commit 92af42b2c5
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/OnboardingWizard.astro
View File

@@ -168,27 +168,27 @@
<div> <div>
<label class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-2">Standard-Farbkombinationen</label> <label class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-2">Standard-Farbkombinationen</label>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-2"> <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
<button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#3b82f6" data-secondary="#ffffff"> <button type="button" class="color-preset-btn p-2 rounded-xl border border-slate-200 dark:border-white/10 text-[10px] font-bold bg-slate-100 dark:bg-zinc-900 text-slate-800 dark:text-zinc-100 flex items-center gap-1.5 hover:border-sky-500" data-primary="#3b82f6" data-secondary="#ffffff">
<span class="w-3 h-3 rounded-full bg-[#3b82f6]"></span> <span class="w-3 h-3 rounded-full bg-[#3b82f6]"></span>
<span>Klassisch Blau</span> <span>Klassisch Blau</span>
</button> </button>
<button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#10b981" data-secondary="#e2e8f0"> <button type="button" class="color-preset-btn p-2 rounded-xl border border-slate-200 dark:border-white/10 text-[10px] font-bold bg-slate-100 dark:bg-zinc-900 text-slate-800 dark:text-zinc-100 flex items-center gap-1.5 hover:border-sky-500" data-primary="#10b981" data-secondary="#e2e8f0">
<span class="w-3 h-3 rounded-full bg-[#10b981]"></span> <span class="w-3 h-3 rounded-full bg-[#10b981]"></span>
<span>Smaragd & Silber</span> <span>Smaragd & Silber</span>
</button> </button>
<button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#6366f1" data-secondary="#c7d2fe"> <button type="button" class="color-preset-btn p-2 rounded-xl border border-slate-200 dark:border-white/10 text-[10px] font-bold bg-slate-100 dark:bg-zinc-900 text-slate-800 dark:text-zinc-100 flex items-center gap-1.5 hover:border-sky-500" data-primary="#6366f1" data-secondary="#c7d2fe">
<span class="w-3 h-3 rounded-full bg-[#6366f1]"></span> <span class="w-3 h-3 rounded-full bg-[#6366f1]"></span>
<span>Purple & Lilac</span> <span>Purple & Lilac</span>
</button> </button>
<button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#4b5563" data-secondary="#f59e0b"> <button type="button" class="color-preset-btn p-2 rounded-xl border border-slate-200 dark:border-white/10 text-[10px] font-bold bg-slate-100 dark:bg-zinc-900 text-slate-800 dark:text-zinc-100 flex items-center gap-1.5 hover:border-sky-500" data-primary="#4b5563" data-secondary="#f59e0b">
<span class="w-3 h-3 rounded-full bg-[#4b5563]"></span> <span class="w-3 h-3 rounded-full bg-[#4b5563]"></span>
<span>Coal & Amber</span> <span>Coal & Amber</span>
</button> </button>
<button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#f43f5e" data-secondary="#fbbf24"> <button type="button" class="color-preset-btn p-2 rounded-xl border border-slate-200 dark:border-white/10 text-[10px] font-bold bg-slate-100 dark:bg-zinc-900 text-slate-800 dark:text-zinc-100 flex items-center gap-1.5 hover:border-sky-500" data-primary="#f43f5e" data-secondary="#fbbf24">
<span class="w-3 h-3 rounded-full bg-[#f43f5e]"></span> <span class="w-3 h-3 rounded-full bg-[#f43f5e]"></span>
<span>Muted Rose</span> <span>Muted Rose</span>
</button> </button>
<button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#06b6d4" data-secondary="#ffffff"> <button type="button" class="color-preset-btn p-2 rounded-xl border border-slate-200 dark:border-white/10 text-[10px] font-bold bg-slate-100 dark:bg-zinc-900 text-slate-800 dark:text-zinc-100 flex items-center gap-1.5 hover:border-sky-500" data-primary="#06b6d4" data-secondary="#ffffff">
<span class="w-3 h-3 rounded-full bg-[#06b6d4]"></span> <span class="w-3 h-3 rounded-full bg-[#06b6d4]"></span>
<span>Ocean Cyan</span> <span>Ocean Cyan</span>
</button> </button>