@probatem/web-design-system (0.1.1)
Installation
@probatem:registry=https://git.probatem.com/api/packages/probatem/npm/npm install @probatem/web-design-system@0.1.1"@probatem/web-design-system": "0.1.1"About this package
PROBATEM Web Design System
This repository contains @probatem/web-design-system, the
framework-independent implementation of the PROBATEM design system for web
interfaces.
It is the shared source for web UI foundations such as design tokens, typography, responsive layout, approved brand assets, and CSS-level component and interaction contracts. It is intended for use by both the Vue application and the Keycloak authentication theme without requiring either consumer to use the other's rendering framework.
The Figma foundations define the desired UI and UX direction. The PROBATEM Brand Style Guide is authoritative when color definitions conflict.
The compiled design system will be distributed as the private
@probatem/web-design-system package through the Probatem Gitea npm registry.
The registry URL is configured in bunfig.toml; authentication is supplied at
runtime through the GITEA_PACKAGE_TOKEN environment variable and must not be
committed to this repository.
Package contents
The 0.1 release line provides the first web foundations:
- DTCG-format brand, semantic, spacing, radius, typography, breakpoint, and grid tokens;
- generated CSS custom properties and a combined token JSON file;
- bundled Inter Tight and Kaisei Opti webfonts with their licenses;
- opt-in named typography classes; and
- the responsive 4, 6, and 12-column page-grid primitive.
The source tokens live in src/tokens. Hand-authored structural CSS lives in
src/styles. The build generates the publishable dist directory; generated
files are not committed.
Unit policy
Scalable dimensions use rem by default, including typography, spacing,
radii, grid margins, and maximum widths. The package does not set a root font
size, so these values respect the browser or user's root preference.
Responsive media queries use the equivalent em breakpoint values. Unitless
line heights remain unitless. Context-dependent component dimensions may use
em, while fixed details such as one-pixel borders may use px intentionally.
Development
make deps
make check
make package
The static examples/index.html page loads the generated package output and
exercises its initial tokens, typography, and responsive grid.
Validation and release
Gitea Actions validates pull requests and pushes to main with Bun 1.3.14.
The validation workflow installs the frozen dependency graph, builds and tests
the package, and inspects the publishable contents.
Releases are tag-driven. A tag must exactly match the version in package.json
(for example, 0.1.1), and its commit must be on main. The release
workflow builds and tests the package, installs the packed tarball into a clean
temporary consumer, and publishes that same tarball to the Probatem registry.
The release workflow requires a repository Actions secret named
PACKAGE_PUBLISH_TOKEN containing a Gitea token with package Read and Write
permission. Gitea Actions secret names cannot begin with GITEA_, so the
workflow maps this secret to the environment names used by Bun only during the
publish step.
Consumption
Import the complete foundation from application code:
import '@probatem/web-design-system'
Or from CSS:
@import "@probatem/web-design-system";
Or import individual entry points such as
@probatem/web-design-system/tokens.css,
@probatem/web-design-system/typography.css, and
@probatem/web-design-system/grid.css.
Dependencies
Development Dependencies
| ID | Version |
|---|---|
| @fontsource-variable/inter-tight | 5.2.7 |
| @fontsource/kaisei-opti | 5.2.8 |
| typescript | 5.6.3 |