@botsu/ui
Design tokens and minimal UI primitives for the BOTSU collaborative suite.
Default character
- monochrome dark canvas with a matching light mode;
- visible 1 px boundaries and 2 px brutalist corners;
- subtle glass surface at 0.08 opacity and 12 px blur;
- Inter typography;
- white accent until a member chooses another color.
Safe runtime controls
| Setting | Accepted values | Default |
|---|---|---|
mode |
dark, light |
dark |
accent |
six-digit hexadecimal color | #ffffff |
borderWidth |
0–4 px | 1 px |
radius |
0–24 px | 2 px |
glassOpacity |
0–1 | 0.08 |
glassBlur |
0–40 px | 12 px |
font |
inter, system, mono |
inter |
Out-of-range numbers are clamped. Unknown fonts, unsafe accent strings, and
accent colors below 3:1 contrast against the active canvas fall back to white
in dark mode or black in light mode. The API also derives a readable
on-accent foreground. It never accepts arbitrary CSS declarations.
Usage
Import applyTheme from @botsu/ui, apply settings to the application root,
and load @botsu/ui/styles.css. The target receives semantic --botsu-*
variables and a data-botsu-theme mode.
Reusable classes currently include botsu-theme, botsu-surface, and
botsu-button. Glass falls back to an opaque surface when the user requests
reduced transparency.
Verification
npm --prefix packages/ui test
npm --prefix packages/ui run typecheck