add header background contrast warning and improve branding UX
All checks were successful
deploy / deploy (push) Successful in 1m12s

- extract dominant colors from header images during optimization
- calculate WCAG contrast ratios against theme text color
- show warning in theme editor when text may be hard to read
- prevent hiding shop name when no logo is uploaded
- auto-enable shop name when logo is deleted
- fix image cache invalidation on delete
- add missing .hidden utility class

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
jamey
2026-03-08 22:40:08 +00:00
parent 32cc425458
commit 476da8121a
13 changed files with 429 additions and 220 deletions

View File

@@ -929,41 +929,32 @@ defmodule BerrypodWeb.ShopComponents.Layout do
attr :logo_image, :map, default: nil
defp logo_inner(assigns) do
# Show logo if enabled and image exists
show_logo = assigns.theme_settings.show_logo && assigns.logo_image
# Show site name if enabled, or as fallback when logo should show but image is missing
show_site_name =
assigns.theme_settings.show_site_name ||
(assigns.theme_settings.show_logo && !assigns.logo_image)
assigns =
assigns
|> assign(:show_logo, show_logo)
|> assign(:show_site_name, show_site_name)
~H"""
<%= case @theme_settings.logo_mode do %>
<% "text-only" -> %>
<span class="shop-logo-text">
{@site_name}
</span>
<% "logo-text" -> %>
<%= if @logo_image do %>
<img
src={logo_url(@logo_image, @theme_settings)}
alt={@site_name}
class="shop-logo-img"
style={"height: #{@theme_settings.logo_size}px;"}
/>
<% end %>
<span class="shop-logo-text">
{@site_name}
</span>
<% "logo-only" -> %>
<%= if @logo_image do %>
<img
src={logo_url(@logo_image, @theme_settings)}
alt={@site_name}
class="shop-logo-img"
style={"height: #{@theme_settings.logo_size}px;"}
/>
<% else %>
<span class="shop-logo-text">
{@site_name}
</span>
<% end %>
<% _ -> %>
<span class="shop-logo-text">
{@site_name}
</span>
<%= if @show_logo do %>
<img
src={logo_url(@logo_image, @theme_settings)}
alt={@site_name}
class="shop-logo-img"
style={"height: #{@theme_settings.logo_size}px;"}
/>
<% end %>
<%= if @show_site_name do %>
<span class="shop-logo-text">
{@site_name}
</span>
<% end %>
"""
end