Mixins / foldkit-mixins-ui

Typography

namespace · packages/mixins-ui/src/typography.ts:1

export * as Typography from './typography.js'

In the guides

Members

Typography.TypographyLevel

type · packages/mixins-ui/src/typography.ts:21

type TypographyLevel =
  | 'h1'
  | 'h2'
  | 'h3'
  | 'h4'
  | 'lead'
  | 'body'
  | 'small'
  | 'muted'
  | 'quote'
  | 'code'
  | 'display'
  | 'title'
  | 'subtitle'
  | 'caption'
  | 'micro'

One voice of the type scale, and the element it speaks through. The interface roles (display to micro) are paragraphs; a role that names a section is a heading's look, so give it h2 and that role's style.

Typography.TypographySlots

const · packages/mixins-ui/src/typography.ts:12

const TypographySlots: Slots.Contract<{
  readonly text: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
}>

Set type publishes one slot; it owns no state, messages, or bundles. The level chooses the element: headings stay headings, body copy stays a paragraph, and asides keep their small, blockquote, and code semantics. Longform rhythm between unlike elements stays Prose's; this is the single voice, wherever it stands.

Typography.TypographyView

interface · packages/mixins-ui/src/typography.ts:43

interface TypographyView<Message = never> {
  readonly level: TypographyLevel
  readonly text: string
  readonly style?: NamedStyle<typeof TypographySlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

One voice of the type scale in one call: its level, its words, a style for its slot, and mixins beside the style. No upstream component stands behind it.

Typography.view

function · packages/mixins-ui/src/typography.ts:52

function view<Message = never>(
  options: TypographyView<Message>,
  h: HtmlBuilder<Message>,
): Html