@fungi.computer/stipe

Type Aliases

EmbedThemeOptions

EmbedThemeOptions = Readonly<{ accent?: string; fontFamily?: string; }>

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

EmbedThemeProperties

EmbedThemeProperties = Readonly<Record<string, string>>>>

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

TerminalPalette

TerminalPalette = object

Semantic terminal colors projected from a maintained theme.

Properties

background

readonly background: string

foreground

readonly foreground: string

cursor

readonly cursor: string

cursorAccent

readonly cursorAccent: string

selectionBackground

readonly selectionBackground: string

primary

readonly primary: string

accent

readonly accent: string

success

readonly success: string

info

readonly info: string

warning

readonly warning: string

error

readonly error: string

black

readonly black: string

red

readonly red: string

green

readonly green: string

yellow

readonly yellow: string

blue

readonly blue: string

magenta

readonly magenta: string

cyan

readonly cyan: string

white

readonly white: string

brightBlack

readonly brightBlack: string

brightRed

readonly brightRed: string

brightGreen

readonly brightGreen: string

brightYellow

readonly brightYellow: string

brightBlue

readonly brightBlue: string

brightMagenta

readonly brightMagenta: string

brightCyan

readonly brightCyan: string

brightWhite

readonly brightWhite: string

selectionForeground?

readonly optional selectionForeground?: string

Variables

EMBED_THEME_TOKENS

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

embed

readonly embed: object

embed.base100

readonly base100: "#ffffff" = "#ffffff"

embed.baseContent

readonly baseContent: "#1f2328" = "#1f2328"

embed.primary

readonly primary: "#2f5fd0" = "#2f5fd0"

embed.primaryContent

readonly primaryContent: "#ffffff" = "#ffffff"

embed-dark

readonly embed-dark: object

embed-dark.base100

readonly base100: "#1b1d21" = "#1b1d21"

embed-dark.baseContent

readonly baseContent: "#e8eaed" = "#e8eaed"

embed-dark.primary

readonly primary: "#7aa2f7" = "#7aa2f7"

embed-dark.primaryContent

readonly primaryContent: "#000000" = "#000000"

STIPE_GOOEY_FILTER

const STIPE_GOOEY_FILTER: Readonly<{ alphaIntercept: -9; alphaSlope: 19; blurStdDeviation: 1.5; }>

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

STIPE_SPACING_NAMES

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_NAMES

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-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-layer-base", "--stipe-layer-popover", "--stipe-layer-modal", "--stipe-layer-toast", "--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-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.

Functions

readableContentColor()

readableContentColor(hex): "#ffffff" | "#000000"

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

Parameters

hex

string

Returns

"#ffffff" | "#000000"

embedThemeProperties()

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".