Three layers, composable

Default (tier 1)

Tier 2 — swap tokens

Each example wraps the same <atproto-post> in a <div> that sets different custom properties. No JS, no selector wizardry — the component inherits the tokens and re-skins itself.

--atproto-accent: #ea580c;
--atproto-accent-soft: rgba(234,88,12,0.12);
--atproto-radius: 4px;
--atproto-font: Georgia, serif;

--atproto-space-3: 0.4rem;
--atproto-space-4: 0.6rem;
--atproto-font-size: 0.85rem;
--atproto-font-size-sm: 0.78rem;
--atproto-line-height: 1.35;

--atproto-shadow: 0 10px 40px -12px rgba(17,133,254,0.35);
--atproto-border: transparent;
--atproto-radius: 16px;

--atproto-font: "Iowan Old Style", Georgia, serif;
--atproto-font-size: 1rem;
--atproto-letter-spacing-tight: -0.015em;
--atproto-radius: 2px;

Tier 3 — pierce with ::part()

When tokens don't reach deep enough, use ::part() to target the component's named internals. Every high-level component documents its parts on its page.

atproto-post::part(article) {
  box-shadow: var(--atproto-shadow-lg);
  border-color: var(--accent);
}
atproto-post::part(avatar) { border-radius: 4px }
atproto-post::part(counts) {
  background: var(--atproto-accent-soft);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
}

All tokens

Every named custom property the library reads. Override at any ancestor — tokens cross the shadow boundary by inheritance, so setting --atproto-accent on body restyles every component below.