From 8aedb3466a145433977d84a85799ffb40f324b0c Mon Sep 17 00:00:00 2001
From: Jamey Greenwood <jamey@greenwood.im>
Date: Wed, 31 Dec 2025 00:51:28 +0000
Subject: [PATCH] feat: implement density-aware spacing system
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 assets/css/theme-layer2-attributes.css               | 10 ++++++++++
 assets/css/theme-semantic.css                        |  8 --------
 .../live/theme_live/preview_pages/home.html.heex     | 12 ++++++------
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/assets/css/theme-layer2-attributes.css b/assets/css/theme-layer2-attributes.css
index e929350..8d18ee9 100644
--- a/assets/css/theme-layer2-attributes.css
+++ b/assets/css/theme-layer2-attributes.css
@@ -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;
diff --git a/assets/css/theme-semantic.css b/assets/css/theme-semantic.css
index 390e51b..527b7d8 100644
--- a/assets/css/theme-semantic.css
+++ b/assets/css/theme-semantic.css
@@ -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);
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex
index 8884d01..13387c6 100644
--- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex
+++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex
@@ -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);">