Composition / foldkit-composition/appearance

Appearance

namespace · packages/composition/src/appearance/index.ts:202

const Appearance = { make, token, attach }

In the guides

Members

Appearance.make

function · packages/composition/src/appearance/index.ts:74

make<Slots>(
  slots: Slots,
  config: {
    readonly recipe?: RecipeLike<Slots>
    readonly tokens?: Readonly<Record<string, TokenAxis<Slots>>>
    readonly layer?: StyleOptions['layer']
  },
): Look<Slots>

A look over a Block's Slots: a slot recipe's variant axes, token axes, or both. layer places its rules, as Style.forSlots does.

Appearance.token

function · packages/composition/src/appearance/index.ts:209

token<Slots>(
  tokens: Readonly<Record<string, string>>,
  at: {
    readonly slot: keyof Slots & string
    readonly property: keyof Declarations & string
    readonly breakpoints?: Readonly<Record<string, string>>
  },
): TokenAxis<Slots>

A token axis: the names of tokens (a group of Theme.ref(theme)) as one declaration on a slot.

Appearance.attach

function · packages/composition/src/appearance/index.ts:222

attach<Slots>(look: Look<Slots>): <B extends AnyBlock>(block: B) => B

Pipe step: the Block's appearance axes are the look's.