jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

replace Tailwind in content + collection, remove shop Tailwind entirely (Phase 5c)

Browse Source 
- Replace all Tailwind utilities in content.ex and collection.ex with
  semantic CSS classes (content body, contact form, cards, reviews, etc.)
- Delete app-shop.css (Tailwind shop entry point)
- Remove shop Tailwind config from config.exs, dev.exs, mix.exs
- Remove shop Tailwind stylesheet link from shop_root.html.heex
- Add collection filter bar, empty state, and select dropdown styles
- Fix filter pill sizing (use theme font vars instead of hardcoded rem)
- Fix active pill contrast (tinted accent background + dark accent text)
- Fix --t-text-on-accent fallback for pill legibility
- Add padding/font-size to .themed-select

Shop pages now use zero Tailwind. Admin Tailwind remains for Phase 6.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
2026-02-17 19:07:15 +00:00
parent 04b6ee3f37
commit f5f6374f7b
13 changed files with 530 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
lib/simpleshop_theme_web/live/shop/collection.ex
View File

@@ -88,7 +88,7 @@ defmodule SimpleshopThemeWeb.Shop.Collection do
product_count={length(@products)}
/>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="page-container collection-body">
<.collection_filter_bar
categories={@categories}
current_slug={
@@ -115,13 +115,9 @@ defmodule SimpleshopThemeWeb.Shop.Collection do
</.product_grid>
<%= if @products == [] do %>
<div class="text-center py-16" style="color: var(--t-text-secondary);">
<p class="text-lg">No products found in this collection.</p>
<.link
navigate={~p"/collections/all"}
class="mt-4 inline-block underline"
style="color: var(--t-text-accent);"
>
<div class="collection-empty">
<p>No products found in this collection.</p>
<.link navigate={~p"/collections/all"} class="collection-empty-link">
View all products
</.link>
</div>
@@ -134,7 +130,7 @@ defmodule SimpleshopThemeWeb.Shop.Collection do
defp collection_filter_bar(assigns) do
~H"""
<div class="flex flex-wrap items-center justify-between gap-3 mb-6">
<div class="filter-bar">
<nav
aria-label="Collection filters"
id="collection-filters"
@@ -146,10 +142,7 @@ defmodule SimpleshopThemeWeb.Shop.Collection do
<.link
navigate={collection_path("all", @current_sort)}
aria-current={@current_slug == nil && "page"}
class={[
"collection-filter-pill",
if(@current_slug == nil, do: "active", else: "hover:opacity-80")
]}
class={["collection-filter-pill", @current_slug == nil && "active"]}
>
All
</.link>
@@ -158,10 +151,7 @@ defmodule SimpleshopThemeWeb.Shop.Collection do
<.link
navigate={collection_path("sale", @current_sort)}
aria-current={@current_slug == "sale" && "page"}
class={[
"collection-filter-pill",
if(@current_slug == "sale", do: "active", else: "hover:opacity-80")
]}
class={["collection-filter-pill", @current_slug == "sale" && "active"]}
>
Sale
</.link>
@@ -171,10 +161,7 @@ defmodule SimpleshopThemeWeb.Shop.Collection do
<.link
navigate={collection_path(category.slug, @current_sort)}
aria-current={@current_slug == category.slug && "page"}
class={[
"collection-filter-pill",
if(@current_slug == category.slug, do: "active", else: "hover:opacity-80")
]}
class={["collection-filter-pill", @current_slug == category.slug && "active"]}
>
{category.name}
</.link>
@@ -188,7 +175,6 @@ defmodule SimpleshopThemeWeb.Shop.Collection do
name="sort"
options={@sort_options}
selected={@current_sort}
class="px-3 py-1.5 sm:px-4 sm:py-2 text-xs sm:text-sm"
aria-label="Sort products"
/>
</form>