facebook / facebook/astryx

Edge compensation: deriving spacing/radius/size relationships from visual intent

Open
#958 17 comments 0 reactions 1 assignee Claimed by @cixzhang View on GitHub
design research theming
Dominant language
TypeScript
Stars
13k
Forks
1.1k
Avg merge
1d 15h
Merged PRs (30d)
690

Description

## Problem

Theme authors think in **visual features** — concentricity, centered alignment, visually aligned content — not raw token values. But today, tuning a theme means manually juggling `radius`, `spacing`, `size`, and `font-size`/`line-height` values that are deeply interdependent.

**Edge compensation** is the umbrella term for the math that connects these values. Getting it right means theme owners can express high-level visual intent and have the system derive correct concrete values.

## Why this is hard

These properties constrain each other:

- **Concentricity** — inner radius must account for the padding between nested rounded rects (`inner-radius = outer-radius - gap`), but "gap" itself depends on spacing tokens
- **Centered alignment** — vertical centering of text inside a sized container depends on `line-height`, `font-size`, *and* the container's padding, not just `align-items: center`. Often times we want to avoid using center alignment directly items because we want items to appear vertically centered when there's only one line of content, but remain top aligned when there's multiple lines of content. However, in cases where we're guaranteed a single line, center alignment can be achieved in a much more straightforward manner, though edge compensation may still be required where content overflows padded bounds.
- **Visual alignment** — content edges across different components (e.g. a label next to an input) need to land on the same optical line, which means their padding + border + radius crop all interact

One knob turns and three others need to move with it.

## Goal

Tease out the **conceptual requirements** from the theme author ("I want concentric corners", "I want text vertically centered in this pill") and translate those into the mathematical relationships between tokens. Then encode those relationships so the system can enforce them automatically.

## Collecting edge cases

Use this issue to gather specific scenarios where edge compensation matters. We'll look broadly across them later to find the common patterns.

---

_Drop examples, screenshots, or sketches of tricky compensation cases in the comments._

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.