Skip to content
Stipe0.1.0
API reference

stipe

Import

Section titled “Import”
Import
import * as api from "@fungi.computer/stipe";

Exports

Section titled “Exports”
Kind Export Description
type alias EmbedThemeOptions Host inputs for the embed and embed-dark themes. Both are optional.
type alias EmbedThemeProperties Custom properties the embed themes read, keyed by property name.
type alias TerminalPalette Semantic terminal colors projected from a maintained theme.
constant EMBED_THEME_TOKENS The embed themes’ default chrome tokens, for surfaces outside Daisy (the loader’s launcher in a host page’s shadow root). styles.css defines the same values; a test keeps the two in step.
constant STIPE_GOOEY_FILTER Frozen Gooey SVG filter constants for Stipe’s visual law.
constant STIPE_SPACING_NAMES Named spacing scale shared by CSS utilities and class conflict resolution.
constant STIPE_TOKEN_NAMES Canonical Stipe token names in declaration order.
function readableContentColor() Black or white, whichever has the higher WCAG contrast on hex.
function embedThemeProperties() Project host inputs onto the embed themes’ custom properties. The host applies them (for example with style.setProperty) beside data-theme="embed" or data-theme="embed-dark".
function terminalPalette() Return the maintained terminal palette for an exact theme name.

EmbedThemeOptionstype alias

Section titled “EmbedThemeOptions”
Signature
type EmbedThemeOptions = Readonly<{
  accent?: string;
  fontFamily?: string;
}>;

Host inputs for the embed and embed-dark themes. Both are optional.

EmbedThemePropertiestype alias

Section titled “EmbedThemeProperties”
Signature
type EmbedThemeProperties = Readonly<Record<string, string>>;

Custom properties the embed themes read, keyed by property name.

TerminalPalettetype alias

Section titled “TerminalPalette”
Signature
type TerminalPalette = object;

Semantic terminal colors projected from a maintained theme.

Properties

Section titled “Properties”

background

Section titled “background”
Signature
readonly background: string;

foreground

Section titled “foreground”
Signature
readonly foreground: string;

cursor

Section titled “cursor”
Signature
readonly cursor: string;

cursorAccent

Section titled “cursorAccent”
Signature
readonly cursorAccent: string;

selectionBackground

Section titled “selectionBackground”
Signature
readonly selectionBackground: string;

surface

Section titled “surface”
Signature
readonly surface: string;

primary

Section titled “primary”
Signature
readonly primary: string;

accent

Section titled “accent”
Signature
readonly accent: string;

success

Section titled “success”
Signature
readonly success: string;

info

Section titled “info”
Signature
readonly info: string;

warning

Section titled “warning”
Signature
readonly warning: string;

error

Section titled “error”
Signature
readonly error: string;

black

Section titled “black”
Signature
readonly black: string;

red

Section titled “red”
Signature
readonly red: string;

green

Section titled “green”
Signature
readonly green: string;

yellow

Section titled “yellow”
Signature
readonly yellow: string;

blue

Section titled “blue”
Signature
readonly blue: string;

magenta

Section titled “magenta”
Signature
readonly magenta: string;

cyan

Section titled “cyan”
Signature
readonly cyan: string;

white

Section titled “white”
Signature
readonly white: string;

brightBlack

Section titled “brightBlack”
Signature
readonly brightBlack: string;

brightRed

Section titled “brightRed”
Signature
readonly brightRed: string;

brightGreen

Section titled “brightGreen”
Signature
readonly brightGreen: string;

brightYellow

Section titled “brightYellow”
Signature
readonly brightYellow: string;

brightBlue

Section titled “brightBlue”
Signature
readonly brightBlue: string;

brightMagenta

Section titled “brightMagenta”
Signature
readonly brightMagenta: string;

brightCyan

Section titled “brightCyan”
Signature
readonly brightCyan: string;

brightWhite

Section titled “brightWhite”
Signature
readonly brightWhite: string;

selectionForeground

Section titled “selectionForeground”
Signature
readonly selectionForeground: string;

EMBED_THEME_TOKENSconstant

Section titled “EMBED_THEME_TOKENS”
Signature
const EMBED_THEME_TOKENS: object;

The embed themes’ default chrome tokens, for surfaces outside Daisy (the loader’s launcher in a host page’s shadow root). styles.css defines the same values; a test keeps the two in step.

Type Declaration

Section titled “Type Declaration”
Name Type Default value
embed object -
embed.base100 "#ffffff" "#ffffff"
embed.baseContent "#1f2328" "#1f2328"
embed.primary "#2f5fd0" "#2f5fd0"
embed.primaryContent "#ffffff" "#ffffff"
embed-dark object -
embed-dark.base100 "#1b1d21" "#1b1d21"
embed-dark.baseContent "#e8eaed" "#e8eaed"
embed-dark.primary "#7aa2f7" "#7aa2f7"
embed-dark.primaryContent "#000000" "#000000"

STIPE_GOOEY_FILTERconstant

Section titled “STIPE_GOOEY_FILTER”
Signature
const STIPE_GOOEY_FILTER: Readonly<{
  alphaIntercept: -9;
  alphaSlope: 19;
  blurStdDeviation: 1.5;
}>;

Frozen Gooey SVG filter constants for Stipe’s visual law.

STIPE_SPACING_NAMESconstant

Section titled “STIPE_SPACING_NAMES”
Signature
const STIPE_SPACING_NAMES: readonly [
  "2xs",
  "xs",
  "sm",
  "md",
  "lg",
  "xl",
  "2xl",
  "3xl",
  "4xl",
];

Named spacing scale shared by CSS utilities and class conflict resolution.

STIPE_TOKEN_NAMESconstant

Section titled “STIPE_TOKEN_NAMES”
Signature
const STIPE_TOKEN_NAMES: readonly [
  "--stipe-font-synthesis",
  "--stipe-surface-frame-width",
  "--stipe-surface-frame-image",
  "--stipe-surface-molding-contrast",
  "--stipe-shadow-raised",
  "--stipe-shadow-inset",
  "--stipe-shadow-edge",
  "--stipe-display-gasket-face",
  "--stipe-display-texture-image",
  "--stipe-display-text-shadow",
  "--stipe-canvas",
  "--stipe-surface",
  "--stipe-surface-raised",
  "--stipe-surface-selected",
  "--stipe-fg-muted",
  "--stipe-linework",
  "--stipe-hairline",
  "--stipe-figure-ink",
  "--stipe-density-compact",
  "--stipe-density-comfortable",
  "--stipe-motion-spring",
  "--stipe-motion-squish",
  "--stipe-motion-fast",
  "--stipe-motion-normal",
  "--stipe-motion-slow",
  "--stipe-motion-ease",
  "--stipe-motion-ease-exit",
  "--stipe-motion-bounce",
  "--stipe-motion-spring-duration",
  "--stipe-motion-stretch",
  "--stipe-motion-distance",
  "--stipe-motion-stagger",
  "--stipe-motion-blur",
  "--stipe-motion-shake",
  "--stipe-motion-steps",
  "--stipe-motion-fuse",
  "--stipe-press-depth",
  "--stipe-press-scale",
  "--stipe-layer-desktop",
  "--stipe-layer-windows",
  "--stipe-layer-chrome",
  "--stipe-layer-popover",
  "--stipe-layer-dialog",
  "--stipe-layer-toast",
  "--stipe-layer-tooltip",
  "--stipe-overlay-shadow-outset",
  "--stipe-icon-size-sm",
  "--stipe-icon-size-md",
  "--stipe-icon-size-lg",
  "--stipe-icon-stroke",
  "--stipe-card-rim",
  "--stipe-card-rim-edge",
  "--stipe-card-face",
  "--stipe-card-panel",
  "--stipe-card-ink",
  "--stipe-card-ink-muted",
  "--stipe-card-accent",
  "--stipe-card-shadow",
  "--stipe-card-foil-highlight",
  "--stipe-card-foil-warm",
  "--stipe-card-foil-cool",
  "--stipe-avatar-shadow",
  "--stipe-art-coral",
  "--stipe-art-blue",
  "--stipe-art-mint",
  "--stipe-art-grape",
  "--stipe-art-yellow",
  "--stipe-art-cream",
  "--stipe-art-ink",
  "--stipe-art-inkcap",
  "--stipe-art-graphite",
  "--stipe-sketch-ink",
];

Canonical Stipe token names in declaration order.

readableContentColor()function

Section titled “readableContentColor()”
Signature
function readableContentColor(hex): "#ffffff" | "#000000";

Black or white, whichever has the higher WCAG contrast on hex.

Parameters

Section titled “Parameters”
Parameter Type
hex string

Returns

Section titled “Returns”

"#ffffff" | "#000000"

embedThemeProperties()function

Section titled “embedThemeProperties()”
Signature
function embedThemeProperties(options): EmbedThemeProperties;

Project host inputs onto the embed themes’ custom properties. The host applies them (for example with style.setProperty) beside data-theme="embed" or data-theme="embed-dark".

Parameters

Section titled “Parameters”
Parameter Type
options EmbedThemeOptions

Returns

Section titled “Returns”

EmbedThemeProperties

terminalPalette()function

Section titled “terminalPalette()”
Signature
function terminalPalette(theme): TerminalPalette | undefined;

Return the maintained terminal palette for an exact theme name.

Parameters

Section titled “Parameters”
Parameter Type
theme string

Returns

Section titled “Returns”

TerminalPalette | undefined

References

Section titled “References”

pierreTreesStyle

Section titled “pierreTreesStyle”

Re-exports pierreTreesStyle

PierreTreesStyleOptions

Section titled “PierreTreesStyleOptions”

Re-exports PierreTreesStyleOptions

STIPE_THEMES

Section titled “STIPE_THEMES”

Re-exports STIPE_THEMES

stipeThemeSchema

Section titled “stipeThemeSchema”

Re-exports stipeThemeSchema

applyTheme

Section titled “applyTheme”

Re-exports applyTheme

getTheme

Section titled “getTheme”

Re-exports getTheme

subscribeTheme

Section titled “subscribeTheme”

Re-exports subscribeTheme

StipeTheme

Section titled “StipeTheme”

Re-exports StipeTheme

ThemeListener

Section titled “ThemeListener”

Re-exports ThemeListener