grow food, not lawn.

Skip to content

feat: integrate design tokens from www.makepostsell.com styleguide

Russell Ballestrini requested to merge explore/design-tokens into master
  • Add tokens.css as foundation layer (loaded before common.css)
    • Color system: brand, surface, text, border, state, alert tokens
    • Typography: major third scale with 14 semantic classes
    • Spacing: 4px base, 12-step scale with utility classes
    • Shape: 7 radius levels from none to pill
    • Elevation: 5 shadow levels with dual-shadow technique
    • Motion: 4 easing curves, 7 durations, entrance animations
    • Loading: skeleton shimmer + spinner (3 sizes)
    • Scroll reveal, state layers, ripple effect, focus rings
    • Accessibility: prefers-reduced-motion, :focus-visible
  • Rewrite styleguide.j2 to comprehensive design system reference
    • New sections: tokens, elevation, motion, spacing, shape, states, loading, status notices, cart buttons, checkout layout, toggle
    • All app components documented with live demos
    • TOC navigation for all sections
  • Add STYLEGUIDE rule to CLAUDE.md
  • Wire tokens.css into base.j2 before common.css

Exploration branch — tokens.css provides new variables alongside existing common.css variables. No visual regressions expected as common.css values take precedence for shared property names.

Summary by CodeRabbit

  • New Features

    • Gift cards: purchase, apply discounts at checkout, check balance, and manage inventory
    • Bring Your Own Bucket (BYOB): shops can configure custom S3 storage for media uploads
    • Shop environments: production, staging, and development designation options
    • 21-day free trial for newly created shops
    • Enhanced design system with tokens, components, and typography utilities
  • Improvements

    • Updated media delivery to use shop-specific CDN endpoints
    • Enhanced cart with gift card discount support alongside coupons
    • Discovery search respects shop environment settings
  • Documentation

    • Added comprehensive design system documentation
    • Updated architecture reference with new features
    • Enhanced development guidelines and test coverage requirements
Edited by CodeRabbit

Merge request reports