@sujho/design-system

Shared design tokens and global CSS for Sujho products.

Install

npm install @sujho/design-system

Export

@import "@sujho/design-system/css";

@sujho/design-system/css is the only public package export. It includes:

• tokens.css: palette primitives, semantic surface/text/action/status roles (including --surface-paper for neutral document surfaces), typography scale, line heights, borders, document print roles, spacing, elevation, and z-index.
• base.css: element resets and shared keyframes.
• actions.css: shared action surfaces and button controls such as .action-primary, .action-default, .action-header-active, .icon-button, and .icon-button-primary.
• surfaces.css: shared content surfaces such as .card and .empty-panel.
• forms.css: shared CSS-only form controls such as input[type="search"], input[type="password"], .field-label, and .toggle.
• feedback.css: shared feedback and focus affordances such as .error-banner.
• utilities.css: root typography, scrollbar helpers, skeletons, and fade masks.
• content.css: shared document and markdown layout classes.

Contract

Classes and variables exported from css/ are public API for consumers. Before removing or renaming a token or class, migrate every consumer in the same change.

Products should compose shared surfaces such as .action-primary instead of re-declaring the same gradient, shadow, or token mapping locally.

Publishing

This package is public in the @sujho npm scope. package.json sets "publishConfig": { "access": "public" }.

Release flow:

1. Bump version in package.json.
2. Commit: git commit -m "chore: release vX.Y.Z".
3. Tag: git tag vX.Y.Z && git push origin main --tags.
4. GitHub Actions publishes the package with npm publish --access public.

Manual publish from this directory: npm publish --access public.