Skip to content

pantoken / pendo

pendo

Beta

@pantoken/pendo — an Instructure-styled global stylesheet for Pendo guides.

Pendo injects guide HTML into a host page; this renders that guide DOM (._pendo-*) to match Instructure UI, using pantoken's --instui-* token layer for alignment. It includes responsive violet and sea banner guide treatments alongside alerts, popovers, surveys, and controls. The component CSS is ported from @instructure/pendo-global-css; pantoken supplies the tokens and the assembly. A single theme class containing instui activates the scoped stylesheet; compact suffixes on that class select banner colours and glyphs, and an instui-banner prefix extends the banner surface to popovers and surveys while keeping their overlay elevation.

buildPendoCss composes the stylesheet; pendoCss is the ready-made rebrand build (scoped, !important). A static file is published at @pantoken/pendo/global.css.

Example

ts
import { pendoCss } from "@pantoken/pendo";
// or a variant: buildPendoCss({ theme: "canvas", scope: false })

Interfaces

Variables

Functions

References

default

Renames and re-exports pendoCss