Mixins / foldkit-mixins/utilities

Utilities

namespace · packages/mixins/src/utilities.ts:81

const Utilities = {
  p,
  px,
  py,
  m,
  mx,
  my,
  gap,
  text,
  font,
  leading,
  rounded,
  color,
  bg,
  items,
  justify,
  flex,
  column,
  grid,
  block,
  hidden,
  wFull,
  textCenter,
  uppercase,
  truncate,
  srOnly,
  pointer,
  selectNone,
  scrollFade,
  steady,
}

In the guides

Members

Utilities.p

function · packages/mixins/src/utilities.ts:83

p(step: Space): StyleValue

padding on every side.

Utilities.px

function · packages/mixins/src/utilities.ts:85

px(step: Space): StyleValue

padding-inline.

Utilities.py

function · packages/mixins/src/utilities.ts:87

py(step: Space): StyleValue

padding-block.

Utilities.m

function · packages/mixins/src/utilities.ts:89

m(step: Margin): StyleValue

margin on every side.

Utilities.mx

function · packages/mixins/src/utilities.ts:91

mx(step: Margin): StyleValue

margin-inline; mx('auto') centers a block.

Utilities.my

function · packages/mixins/src/utilities.ts:93

my(step: Margin): StyleValue

margin-block.

Utilities.gap

function · packages/mixins/src/utilities.ts:95

gap(step: Space): StyleValue

gap between flex or grid children.

Utilities.text

function · packages/mixins/src/utilities.ts:97

text(size: keyof Tokens['size'] & string): StyleValue

font-size from the size scale.

Utilities.font

function · packages/mixins/src/utilities.ts:99

font(weight: keyof Tokens['weight'] & string): StyleValue

font-weight from the weight scale.

Utilities.leading

function · packages/mixins/src/utilities.ts:102

leading(name: keyof Tokens['leading'] & string): StyleValue

line-height from the leading scale.

Utilities.rounded

function · packages/mixins/src/utilities.ts:105

rounded(radius: keyof Tokens['radius'] & string): StyleValue

border-radius from the radius scale.

Utilities.color

function · packages/mixins/src/utilities.ts:108

color(name: ColorName): StyleValue

Text color from the palette.

Utilities.bg

function · packages/mixins/src/utilities.ts:110

bg(name: ColorName): StyleValue

background from the palette.

Utilities.items

function · packages/mixins/src/utilities.ts:112

items(align: keyof typeof alignments): StyleValue

align-items of a flex or grid container.

Utilities.justify

function · packages/mixins/src/utilities.ts:114

justify(justify: keyof typeof justifications): StyleValue

justify-content of a flex or grid container.

Utilities.flex

const · packages/mixins/src/utilities.ts:116

flex: StyleValue

Utilities.column

const · packages/mixins/src/utilities.ts:118

column: StyleValue

A flex column.

Utilities.grid

const · packages/mixins/src/utilities.ts:119

grid: StyleValue

Utilities.block

const · packages/mixins/src/utilities.ts:120

block: StyleValue

Utilities.hidden

const · packages/mixins/src/utilities.ts:121

hidden: StyleValue

Utilities.wFull

const · packages/mixins/src/utilities.ts:122

wFull: StyleValue

Utilities.textCenter

const · packages/mixins/src/utilities.ts:123

textCenter: StyleValue

Utilities.uppercase

const · packages/mixins/src/utilities.ts:124

uppercase: StyleValue

Utilities.truncate

const · packages/mixins/src/utilities.ts:126

truncate: StyleValue

One line, cut with an ellipsis.

Utilities.srOnly

const · packages/mixins/src/utilities.ts:128

srOnly: StyleValue

Visually hidden but announced: screen-reader-only content.

Utilities.pointer

const · packages/mixins/src/utilities.ts:139

pointer: StyleValue

Utilities.selectNone

const · packages/mixins/src/utilities.ts:140

selectNone: StyleValue

Utilities.scrollFade

function · packages/mixins/src/utilities.ts:149

scrollFade(axis?: 'block' | 'inline'): StyleValue

A scroller's content dissolving toward an edge with more to scroll, as shadcn's scroll-fade: a mask whose two ends a scroll timeline moves, so the true start and end stay crisp until something is past them. A browser without scroll timelines (Firefox) gets no fade, since a still one would sit on an edge with nothing beyond it. The gradient is physical, so in a right-to-left page inline fades the left edge first.

Utilities.steady

function · packages/mixins/src/utilities.ts:161

steady(weight: keyof Tokens['weight'] & string): StyleValue

Room for a label at weight, so it turns heavier (chosen, pressed) without moving what is beside it. The element's data-label holds the label's text, which a hidden ::after sets at that weight with no height: a block as wide as its widest child takes the heavier width whatever the label's own weight. The element stays a block container, so a text-box trim on it still works; without data-label, nothing. Hidden, the copy is no part of the element's accessible name: Chrome's own accessibility tree names a steady button once. (Vitest's in-page locator reads it twice, so a test presses such a button with click().)