@pantoken/plugin-custom-components

Custom, cssdoc-documented component rules for downstream consumers.

This package currently ships:

• An extra-small --instui-breakpoints-xs: 20em declaration in the aggregate stylesheet
• card rules (the plugin output)
• banner rules (the plugin output)
• agent-shell rules (the plugin output)
• button-set rules (the plugin output)

Install

npm i @pantoken/plugin-custom-components

Also available as pantoken/custom-components.

Usage

Use the plugin to append the custom component sheet to token CSS output:

import { toCss } from "@pantoken/css";
import { byTheme } from "@pantoken/tokens";
import { customComponents } from "@pantoken/plugin-custom-components";

const css = toCss(byTheme("rebrand"), { plugins: [customComponents()] });

Import the built stylesheet directly when you only need the static CSS:

import "@pantoken/plugin-custom-components/custom-components.css";

Or import one component:

import "@pantoken/plugin-custom-components/card.css";

API

• customComponents(options?) — returns a CSS plugin with position: "append" | "prepend".
• breakpointDeclarations() — returns the extra-small viewport token declaration.
• cardRules(prefix?) — returns the card rules as CSS text.
• bannerRules(prefix?) — returns the banner rules as CSS text.
• agentShellRules(prefix?) — returns the agent-shell rules as CSS text.
• buttonSetRules(prefix?) — returns the button-set rules as CSS text.
• ./custom-components.css — aggregate stylesheet export.
• ./card.css, ./banner.css, ./agent-shell.css, ./button-set.css — per-component stylesheet exports.

cssdoc

./model.json publishes the documented component records as a CssDocEntry[] model. Add it to your cssdoc.json providers so a consumer project resolves these classes/modifiers:

{
  "providers": [{ "path": "./node_modules/@pantoken/plugin-custom-components/model.json" }],
  // Built with a different prefix than the default "instui-" (or none)? Rewrite it — `to` is used
  // verbatim, no separator assumed:
  //   "prefix": { "from": "instui-", "to": "acme-" }
}