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

replace Tailwind utilities in product + cart components with CSS (Phase 5b)

Browse Source 
Remove ~140 Tailwind utility classes from product.ex and cart.ex, replacing
with semantic CSS classes in components.css. Delete helper functions that
generated Tailwind class strings (card_classes, image_container_classes,
content_padding_class, title_classes, hero_cta_classes, grid_classes).
Use data-* attributes for variant styling, grid columns, and sticky
positioning. Update theme-layer2 selectors for renamed classes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
2026-02-17 10:32:48 +00:00
parent fc9c33ab0c
commit 04b6ee3f37
5 changed files with 775 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
assets/css/theme-layer2-attributes.css
View File

@@ -85,15 +85,15 @@
}
/* Layout Width */
&[data-layout="contained"] .max-w-7xl {
&[data-layout="contained"] :is(.max-w-7xl, .page-container, .collection-header-inner) {
max-width: var(--t-layout-max-width, 1100px);
}
&[data-layout="wide"] .max-w-7xl {
&[data-layout="wide"] :is(.max-w-7xl, .page-container, .collection-header-inner) {
max-width: var(--t-layout-max-width, 1400px);
}
&[data-layout="full"] .max-w-7xl {
&[data-layout="full"] :is(.max-w-7xl, .page-container, .collection-header-inner) {
max-width: var(--t-layout-max-width, 100%);
padding-left: 2rem;
padding-right: 2rem;
@@ -175,7 +175,7 @@
}
/* Image Aspect Ratio */
& .product-card .product-image-container {
& .product-card .product-card-image-wrap {
aspect-ratio: var(--t-image-aspect-ratio, 1 / 1);
}
@@ -330,7 +330,7 @@
}
/* Product Card Images — mobile: swipe, desktop: hover crossfade */
.product-image-container {
.product-card-image-wrap {
position: relative;
}