API reference

components/monogram

Import

import * as api from "@fungi.computer/caps/components/monogram";

Kind	Export	Description
type alias	MonogramTone	Theme tones a Monogram may take; the current Stipe theme supplies each color.
type alias	MonogramSize	Monogram scales: `default` sits inline with text; larger sizes stand alone as an identity mark.
type alias	MonogramSubject	Who the Monogram marks: people and Agents get a disc, Apps a rounded tile.
type alias	MonogramProps	Props accepted by Monogram.
constant	Monogram	A small decorative identity mark: the name’s first letter on a quiet tinted disc. The enclosing control owns the accessible name.
function	monogramTone()	A stable tone for an identity: the same seed always gets the same tone.

type MonogramTone =
  "primary" | "secondary" | "accent" | "info" | "success" | "warning";

Theme tones a Monogram may take; the current Stipe theme supplies each color.

type MonogramSize = "default" | "lg" | "xl";

Monogram scales: default sits inline with text; larger sizes stand alone as an identity mark.

type MonogramSubject = "actor" | "app";

Who the Monogram marks: people and Agents get a disc, Apps a rounded tile.

type MonogramProps = object & Omit<HTMLAttributes<HTMLSpanElement>, "children">;

Props accepted by Monogram.

Name	Type	Description
`name`	`string`	The name whose first letter is shown.
`seed?`	`string`	Stable identity that picks the tone; defaults to the name.
`size?`	`MonogramSize`	-
`subject?`	`MonogramSubject`	-
`variant?`	`"initial" \| "specimen"`	-

const Monogram: ForwardRefExoticComponent<
  object &
    Omit<HTMLAttributes<HTMLSpanElement>, "children"> &
    RefAttributes<HTMLSpanElement>
>;

A small decorative identity mark: the name’s first letter on a quiet tinted disc. The enclosing control owns the accessible name.

function monogramTone(seed): MonogramTone;

A stable tone for an identity: the same seed always gets the same tone.

Parameter	Type
`seed`	`string`