fix(spacing): connect section spacing to design token system

gcushen · gcushen · commit a955161dbbf3 · 2026-04-08T18:19:15.000+01:00
Wire .hbb-section to var(--hb-spacing-section) instead of hardcoded 6rem, enabling hugoblox.layout.spacing (compact/comfortable/spacious) to take effect. - Default to "spacious" (6rem) to preserve existing visual layouts - Per-section override via design.spacing.padding still works (inline > class) - Remove dead design.spacing frontmatter field from all templates - Set correct layout.spacing token in each template's params.yaml Closes #3314
diff --git a/modules/blox/assets/css/framework/components.css b/modules/blox/assets/css/framework/components.css
@@ -2,8 +2,8 @@
 @layer components {
   /* Section styles for Hugo Blox blocks */
   .hbb-section {
-    padding-top: 6rem;
-    padding-bottom: 6rem;
+    padding-top: var(--hb-spacing-section, 6rem);
+    padding-bottom: var(--hb-spacing-section, 6rem);
   }
 
   .section-subheading {
diff --git a/modules/blox/layouts/_partials/functions/get_theme_config.html b/modules/blox/layouts/_partials/functions/get_theme_config.html
@@ -148,7 +148,7 @@
 {{ $hb_layout := $hb.layout | default dict }}
 {{ $layout := dict 
     "radius" ($hb_layout.radius | default "md")
-    "spacing" ($hb_layout.spacing | default "comfortable")
+    "spacing" ($hb_layout.spacing | default "spacious")
 }}
 
 {{/* Return theme config dict */}}
diff --git a/modules/blox/layouts/_partials/functions/layout_tokens.html b/modules/blox/layouts/_partials/functions/layout_tokens.html
@@ -28,9 +28,9 @@
 {{ end }}
 
 {{/* Map spacing tokens to CSS values */}}
-{{ $spacing := .layout.spacing | default "comfortable" }}
-{{ $spacing_base := "1rem" }}
-{{ $spacing_section := "4rem" }}
+{{ $spacing := .layout.spacing | default "spacious" }}
+{{ $spacing_base := "1.25rem" }}
+{{ $spacing_section := "6rem" }}
 {{ if eq $spacing "compact" }}
   {{ $spacing_base = "0.75rem" }}
   {{ $spacing_section = "2.5rem" }}
@@ -41,7 +41,7 @@
   {{ $spacing_base = "1.25rem" }}
   {{ $spacing_section = "6rem" }}
 {{ else }}
-  {{ warnf "LAYOUT TOKEN WARNING: Unknown spacing value '%s'. Expected: compact | comfortable | spacious. Falling back to 'comfortable'." $spacing }}
+  {{ warnf "LAYOUT TOKEN WARNING: Unknown spacing value '%s'. Expected: compact | comfortable | spacious. Falling back to 'spacious'." $spacing }}
 {{ end }}
 
 <style>
diff --git a/templates/academic-cv/config/_default/params.yaml b/templates/academic-cv/config/_default/params.yaml
@@ -70,7 +70,7 @@ hugoblox:
     # Border radius: 'none', 'sm', 'md', 'lg', or 'full'
     radius: "md"
     # Spacing density: 'compact', 'comfortable', or 'spacious'
-    spacing: "comfortable"
+    spacing: "spacious"
     # Avatar shape in author profiles
     avatar_shape: circle                # circle | square | rounded
 
diff --git a/templates/academic-cv/content/_index.md b/templates/academic-cv/content/_index.md
@@ -5,10 +5,6 @@ summary: ''
 date: 2022-10-24
 type: landing
 
-design:
-  # Default section spacing
-  spacing: '6rem'
-
 sections:
   - block: resume-biography-3
     content:
diff --git a/templates/academic-cv/content/projects/_index.md b/templates/academic-cv/content/projects/_index.md
@@ -3,10 +3,6 @@ title: 'Projects'
 date: 2024-05-19
 type: landing
 
-design:
-  # Section spacing
-  spacing: '5rem'
-
 # Page sections
 sections:
   - block: collection
diff --git a/templates/dev-portfolio/content/_index.md b/templates/dev-portfolio/content/_index.md
@@ -5,10 +5,6 @@ summary: ''
 date: 2026-01-05
 type: landing
 
-design:
-  # Default section spacing
-  spacing: '0'
-
 sections:
   # Developer Hero - Gradient background with name, role, social, and CTAs
   - block: dev-hero
diff --git a/templates/dev-portfolio/content/projects/_index.md b/templates/dev-portfolio/content/projects/_index.md
@@ -3,10 +3,6 @@ title: 'Projects'
 date: 2024-05-19
 type: landing
 
-design:
-  # Section spacing
-  spacing: '5rem'
-
 # Page sections
 sections:
   - block: collection
diff --git a/templates/documentation/config/_default/params.yaml b/templates/documentation/config/_default/params.yaml
@@ -70,7 +70,7 @@ hugoblox:
     # Border radius: 'none', 'sm', 'md', 'lg', or 'full'
     radius: "md"
     # Spacing density: 'compact', 'comfortable', or 'spacious'
-    spacing: "comfortable"
+    spacing: "spacious"
     # Avatar shape in author profiles
     avatar_shape: circle                # circle | square | rounded
 
diff --git a/templates/documentation/content/_index.md b/templates/documentation/content/_index.md
@@ -3,10 +3,6 @@ title: 'Home'
 date: 2023-10-24
 type: landing
 
-design:
-  # Default section spacing
-  spacing: "6rem"
-
 sections:
   - block: hero
     content:
diff --git a/templates/markdown-slides/content/_index.md b/templates/markdown-slides/content/_index.md
@@ -4,9 +4,6 @@ summary: ''
 date: 2025-01-01
 type: landing
 
-design:
-  spacing: '4rem'
-
 sections:
   # Hero Section
   - block: hero
diff --git a/templates/resume/content/_index.md b/templates/resume/content/_index.md
@@ -3,10 +3,6 @@ title: 'Home'
 date: 2023-10-24
 type: landing
 
-design:
-  # Default section spacing
-  spacing: '4rem'
-
 # Note: `username` refers to the user's folder name in `content/authors/`
 
 # Page sections
diff --git a/templates/startup-landing-page/config/_default/params.yaml b/templates/startup-landing-page/config/_default/params.yaml
@@ -80,7 +80,7 @@ hugoblox:
     # Border radius: 'none', 'sm', 'md', 'lg', or 'full'
     radius: "md"
     # Spacing density: 'compact', 'comfortable', or 'spacious'
-    spacing: "comfortable"
+    spacing: "spacious"
     # Avatar shape in author profiles
     avatar_shape: circle                # circle | square | rounded
 
diff --git a/templates/startup-landing-page/content/_index.md b/templates/startup-landing-page/content/_index.md
@@ -3,10 +3,6 @@ title: 'Home'
 date: 2023-10-24
 type: landing
 
-design:
-  # Default section spacing
-  spacing: "6rem"
-
 sections:
   - block: hero
     content:
