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

feat: implement density-aware spacing system

Browse Source 
- Move density-aware spacing variables from :root to .preview-frame in theme-layer2-attributes.css
  This ensures the variables can reference the correct --t-density value set by data attributes
- Remove density variables from theme-semantic.css to avoid CSS variable scoping issues
- Update home.html.heex to use var(--space-*) instead of Tailwind spacing classes
  Hero section, product grid, and cards now respond to density changes
- Verified all three density modes work correctly (compact: 0.85, balanced: 1, spacious: 1.25)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Jamey Greenwood 2025-12-31 00:51:28 +00:00
parent 0871570b7e
commit 8aedb3466a
3 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -156,6 +156,16 @@
--t-density: 0.85;
}
/* Density-aware spacing variables */
.preview-frame {
--space-xs: calc(var(--p-space-2) * var(--t-density));
--space-sm: calc(var(--p-space-3) * var(--t-density));
--space-md: calc(var(--p-space-4) * var(--t-density));
--space-lg: calc(var(--p-space-6) * var(--t-density));
--space-xl: calc(var(--p-space-8) * var(--t-density));
--space-2xl: calc(var(--p-space-12) * var(--t-density));
}
/* Header Layout */
.shop-nav {
display: flex;

8
assets/css/theme-semantic.css
View File

@ -50,14 +50,6 @@
--weight-heading: var(--t-heading-weight);
--tracking-heading: var(--t-heading-tracking);
/* Responsive spacing (density-aware) */
--space-xs: calc(var(--p-space-2) * var(--t-density));
--space-sm: calc(var(--p-space-3) * var(--t-density));
--space-md: calc(var(--p-space-4) * var(--t-density));
--space-lg: calc(var(--p-space-6) * var(--t-density));
--space-xl: calc(var(--p-space-8) * var(--t-density));
--space-2xl: calc(var(--p-space-12) * var(--t-density));
/* Border radius */
--radius-button: var(--t-radius-button);
--radius-card: var(--t-radius-card);

12
lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex
View File

@ -19,7 +19,7 @@
<!-- Hero Section -->
<div class="relative" style="background-color: var(--t-surface-raised);">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
<div class="max-w-7xl mx-auto" style="padding: var(--space-2xl) var(--space-md);">
<div class="text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);">
Welcome to Our Store
@ -38,20 +38,20 @@
</div>
<!-- Featured Products -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="max-w-7xl mx-auto" style="padding: var(--space-2xl) var(--space-md);">
<h2 class="text-3xl font-bold mb-8" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight);">
Featured Products
</h2>
<div class={[
"grid gap-6 grid-cols-1 sm:grid-cols-2",
"grid grid-cols-1 sm:grid-cols-2",
case @theme_settings.grid_columns do
"2" -> "lg:grid-cols-2"
"3" -> "lg:grid-cols-3"
"4" -> "lg:grid-cols-4"
_ -> "lg:grid-cols-3"
end
]}>
]} style="gap: var(--space-lg);">
<%= for product <- Enum.take(@preview_data.products, 6) do %>
<div
class="group overflow-hidden transition-all"
@ -64,8 +64,8 @@
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
/>
</div>
<div class="p-4">
<h3 class="font-semibold mb-2" style="font-family: var(--t-font-heading); color: var(--t-text-primary);">
<div style="padding: var(--space-md);">
<h3 class="font-semibold" style="font-family: var(--t-font-heading); color: var(--t-text-primary); margin-bottom: var(--space-xs);">
<%= product.name %>
</h3>
<p class="text-sm mb-3" style="color: var(--t-text-secondary);">