CSS Variable Overrides

Scratch the “arbitrary value” itch without breaking token alignment.

Tailwind users love gap-[13px] for one-off values. Airframe provides safe escapes via CSS variables.

Layout Gaps

Override gap on any layout recipe:

<!-- Custom gap -->
<div class="af-stack" style="--af-space-3: 20px;">
  <div>
    Item 1
  </div>
  <div>
    Item 2
  </div>
</div>
<!-- Or use a custom variable -->
<div class="af-stack" style="--af-layout-gap: 1.5rem;">
  <div>
    Item 1
  </div>
  <div>
    Item 2
  </div>
</div>

CSS:

.af-stack {
  gap: var(--af-layout-gap, var(--af-space-3));
}

Component Overrides

Button Radius

<button class="af-btn" style="--af-btn-radius: 999px;">
  Rounded Button
</button>

Card Padding

<div class="af-card" style="--af-card-padding: 2rem;">
  Custom padding
</div>

Grid Gap

<div class="af-grid af-cols-3" style="--af-space-3: 2rem;">
  <div>
    Item 1
  </div>
  <div>
    Item 2
  </div>
  <div>
    Item 3
  </div>
</div>

React Example

interface CardProps {
padding?: string;
radius?: string;
children: React.ReactNode;
}

export function Card({ padding, radius, children }: CardProps) {
const style = {
  ...(padding && { '--af-card-padding': padding }),
  ...(radius && { '--af-btn-radius': radius }),
} as React.CSSProperties;

return (

<div className="af-card" style={style}>
{children}
</div>
);
}

// Usage

<Card padding="2rem" radius="12px">
Content
</Card>

Scoped Overrides

Create component-scoped overrides:

/* In your component CSS */
.my-custom-card {
  --af-card-padding: 2rem;
  --af-card-radius: 16px;
}

<div class="af-card my-custom-card">
  Custom styled card
</div>

Best Practices

1. Prefer tokens - Use --af-space-* when possible
2. Document overrides - Comment why you’re overriding
3. Keep it readable - Don’t abuse arbitrary values
4. Use CSS vars - Not inline styles for repeated patterns

When to Use

✅ Good:

• One-off spacing needs
• Component-specific tweaks
• Prototyping
• Design system gaps

❌ Avoid:

• Replacing entire token system
• Creating inconsistent spacing
• Hard-coding values that should be tokens