opsinjs

MaterialRung

A rung of the material ladder, meaning how a surface sits above what is behind it.

How this is generated

Source: lib/opsinjs.ts. Script: scripts/build-reference.mts. Command: pnpm run generate.

Everything below is copied from the symbol, so a page is improved by improving its doc comment. The API index says why there is a page per symbol and what these pages still do not carry.

MaterialRung

A rung of the material ladder, meaning how a surface sits above what is behind it.

These six names are the token names: every rung resolves a matching set of --opsin-material-<rung>-* custom properties for blur, tint, shadow and border. Where a specification page names a different set, the tokens win, because the tokens are what actually renders.

KindDeclared in
typelib/opsinjs.ts
export type MaterialRung =
  | "canvas"
  | "card"
  | "raised"
  | "sheet"
  | "overlay"
  | "scrim"

On this page