From ef7dc2a481e0c9b662d17295d1fd5a9ea64762d0 Mon Sep 17 00:00:00 2001
From: matteoscrugli <ma.scrugli@gmail.com>
Date: Sun, 11 Jan 2026 15:38:39 +0100
Subject: [PATCH] Add parametric CSS variables for section and tab bar spacing

- Add --tabs-content-gap variable (24px) for consistent tab bar gaps
- Add --section-gap-lg (32px) and --section-gap-xl (48px) for section spacing
- Update Layout.css to use parametric spacing for all tab positions
- Update ThemeSettings.css to use section gap variables

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/styles/Layout.css           | 10 +++++-----
 frontend/src/styles/ThemeSettings.css    | 18 +++++++++---------
 frontend/src/styles/theme/dimensions.css |  8 ++++++++
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/frontend/src/styles/Layout.css b/frontend/src/styles/Layout.css
index d6bb9ae..528ae0f 100644
--- a/frontend/src/styles/Layout.css
+++ b/frontend/src/styles/Layout.css
@@ -811,7 +811,7 @@ label,
 
 [data-tab-position='top'] .page-content,
 [data-tab-position='top'] .admin-tab-content {
-  padding-top: calc(var(--page-padding-y) + var(--tabs-bar-height, 72px));
+  padding-top: calc(var(--tabs-content-gap, 24px) + var(--tabs-bar-height, 72px));
 }
 
 @media (max-width: 768px) {
@@ -859,7 +859,7 @@ label,
 
   [data-tab-position='responsive'] .page-content,
   [data-tab-position='responsive'] .admin-tab-content {
-    padding-top: calc(var(--page-padding-y) + var(--tabs-bar-height, 72px));
+    padding-top: calc(var(--tabs-content-gap, 24px) + var(--tabs-bar-height, 72px));
   }
 }
 
@@ -896,7 +896,7 @@ label,
 [data-tab-position='bottom'] .main-content[data-has-tabs='true'] .page-content,
 [data-tab-position='bottom'] .main-content[data-has-tabs='true'] .admin-tab-content {
   padding-bottom: calc(
-    var(--page-padding-y) +
+    var(--tabs-content-gap, 24px) +
     var(--tabs-bar-height, calc(72px + env(safe-area-inset-bottom, 0px)))
   );
 }
@@ -929,7 +929,7 @@ label,
 
   [data-tab-position='bottom'] .main-content[data-has-tabs='true'] .page-content,
   [data-tab-position='bottom'] .main-content[data-has-tabs='true'] .admin-tab-content {
-    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
+    padding-bottom: calc(var(--tabs-content-gap, 24px) + env(safe-area-inset-bottom, 0px));
   }
 }
 
@@ -966,6 +966,6 @@ label,
 
   [data-tab-position='responsive'] .main-content[data-has-tabs='true'] .page-content,
   [data-tab-position='responsive'] .main-content[data-has-tabs='true'] .admin-tab-content {
-    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
+    padding-bottom: calc(var(--tabs-content-gap, 24px) + env(safe-area-inset-bottom, 0px));
   }
 }
diff --git a/frontend/src/styles/ThemeSettings.css b/frontend/src/styles/ThemeSettings.css
index a45af8e..ea1ce5b 100644
--- a/frontend/src/styles/ThemeSettings.css
+++ b/frontend/src/styles/ThemeSettings.css
@@ -91,7 +91,7 @@
 
 /* Theme Section - Consistent spacing */
 .theme-section {
-    margin-bottom: 3rem;
+    margin-bottom: var(--section-gap-xl);
 }
 
 .theme-section:last-child {
@@ -106,7 +106,7 @@
 .color-grid-enhanced {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    gap: 1.5rem;
+    gap: var(--section-gap);
 }
 
 .color-card {
@@ -273,7 +273,7 @@
 .appearance-grid {
     display: flex;
     flex-direction: column;
-    gap: 3rem;
+    gap: var(--section-gap-xl);
 }
 
 /* Remove margin from sections inside appearance grid */
@@ -531,7 +531,7 @@
 .preview-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-    gap: 2rem;
+    gap: var(--section-gap-lg);
 }
 
 .preview-card {
@@ -688,13 +688,13 @@
 .advanced-colors-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    gap: 3rem;
+    gap: var(--section-gap-xl);
 }
 
 .color-theme-section {
     display: flex;
     flex-direction: column;
-    gap: 1.5rem;
+    gap: var(--section-gap);
 }
 
 .color-theme-title {
@@ -1245,12 +1245,12 @@
     }
 
     .appearance-grid {
-        gap: 2rem;
+        gap: var(--section-gap-lg);
     }
 
     .advanced-colors-grid {
         grid-template-columns: 1fr;
-        gap: 2rem;
+        gap: var(--section-gap-lg);
     }
 
 }
@@ -1275,7 +1275,7 @@
 
     /* Appearance Grid Mobile Overrides */
     .appearance-grid {
-        gap: 2rem;
+        gap: var(--section-gap-lg);
     }
 
     .appearance-grid .theme-section {
diff --git a/frontend/src/styles/theme/dimensions.css b/frontend/src/styles/theme/dimensions.css
index 5b6826c..20dc48c 100644
--- a/frontend/src/styles/theme/dimensions.css
+++ b/frontend/src/styles/theme/dimensions.css
@@ -50,6 +50,10 @@
   /* 12px offset + 80px width */
   --sidebar-mobile-width: 280px;
 
+  /* Tab Bar */
+  --tabs-content-gap: var(--space-6);
+  /* 24px - gap between content and tab bar */
+
   /* Page Layout Spacing */
   --page-padding-x: 2.5rem;
   /* Horizontal padding for page content */
@@ -115,6 +119,10 @@
   /* increased from 1.25rem */
   --section-gap-sm: 1.125rem;
   /* increased from 0.875rem */
+  --section-gap-lg: 2rem;
+  /* 32px - for larger section spacing */
+  --section-gap-xl: 3rem;
+  /* 48px - for major section spacing */
   --section-title-gap: var(--section-gap);
   /* Title-to-content spacing for section headers */