@seyph/prism

Prism Design System — CSS custom properties and design tokens for Seyph.

Install

npm install @seyph/prism
# or
pnpm add @seyph/prism

Usage

Import the stylesheet in your project's entry point:

@import '@seyph/prism/styles.css';

Or with a bundler:

import '@seyph/prism/styles.css';

Components

Components ship as compiled Lit Web Components. Import the subpath for its side-effect (registers the custom element), then use the tag in any framework — Astro, React, Vue, Svelte, or plain HTML:

import '@seyph/prism/button';

<prism-button variant="primary" size="md">Click me</prism-button>

The ./button subpath resolves to dist/button.js (compiled ESM) with type declarations at dist/button.d.ts.

Documentation

https://docs.seyph.com

Distribution notes

Why attw excludes ., ./styles.css, and ./tailwind

attw checks whether each exports entrypoint resolves to importable JavaScript or TypeScript declarations. The CSS-only entrypoints do not:

• . and ./styles.css → dist/index.css (CSS file, not a JS module)
• ./tailwind → dist/tailwind-preset.css (CSS file, not a JS module)

Each would report "no types" / "Resolution failed" on every resolution mode, which is expected for a CSS distribution, not a bug. CI invokes attw with the CSS entrypoints excluded (centralized in packages/prism/package.json#scripts.attw) so the gate validates only what attw is the right tool for — ./package.json and ./button (which ships dist/button.js + dist/button.d.ts). Once v0.3+ ships additional .ts exports with emitted .d.ts, those entrypoints will be automatically discovered and validated.

When future phases add new .css-only subpath exports, extend the space-separated exclusion list in scripts.attw (the locally-installed attw binary — do not reintroduce pnpm dlx):

// packages/prism/package.json
"scripts": {
  "attw": "attw --pack . --exclude-entrypoints \".\" \"./styles.css\" \"./tailwind\" \"./newCssSubpath\""
}

The --exclude-entrypoints flag is variadic — pass each entrypoint as its own quoted argument (verified with pnpm --filter @seyph/prism exec attw --help against @arethetypeswrong/[email protected]).

Framework-agnostic distribution

Components ship as compiled Lit Web Components — no peer dependency on any UI framework. lit is declared as a runtime dependency (resolved from the consumer's node_modules) and works identically in Astro, React, Vue, Svelte, and plain HTML. CSS-only consumers can install the package without ever loading the component bundles.