Licence
MIT
Version
0.0.5
Deps
0
Size
1.1 MB
Vulns
0
Weekly
0
@agent-ui-kit/shared
Design tokens and foundation stylesheets for the agent-ui family: the --md-sys-* color/dimension token system (an extension of Material Design 3), the typographic scale, and loadable theme packs. Zero dependencies, CSS-first.
Install
npm install @agent-ui-kit/shared
Usage
// The foundation, in order: color tokens, then the dimensional ramp.
import '@agent-ui-kit/shared/tokens.css'
import '@agent-ui-kit/shared/dimensions.css'
// Optional: the document base layer, and named theme packs.
import '@agent-ui-kit/shared/base.css'
Most consumers don't import these directly — @agent-ui-kit/components/foundation-styles.css aggregates them in the right order. Import this package directly when you only want the token layer.
- Color roles:
--md-sys-color-{family}-{role}, scheme-complete vialight-dark(). - Type scale:
--md-sys-typescale-{role}-{size}-{size|weight|line-height|tracking}(M3-verbatim core rows). - Theme packs:
@agent-ui-kit/shared/themes/<name>.cssre-declare the color surface under[theme='<name>'].
CDN (no build step)
<link rel="stylesheet" href="https://esm.sh/@agent-ui-kit/shared@0.0.5/tokens.css">
<link rel="stylesheet" href="https://esm.sh/@agent-ui-kit/shared@0.0.5/dimensions.css">
Link tokens.css before dimensions.css (the ramp reads the color layer's variables). These two sheets are fully self-contained — no bare imports.
The @agent-ui-kit family
| Package | What it is |
|---|---|
@agent-ui-kit/components |
The component framework: signals kernel, 50+ light-DOM ui-* custom elements |
@agent-ui-kit/shared |
Design tokens + foundation stylesheets (color, dimensions, themes) |
@agent-ui-kit/icons |
Swappable icon-pack adapter (+ a Phosphor pack) |
@agent-ui-kit/a2ui |
A2UI protocol renderer, validator, and component catalog |
@agent-ui-kit/a2a |
A2A (Agent2Agent) protocol wire types + validation (spec v0.3.0) |
@agent-ui-kit/router |
Memory-first SPA router with opt-in URL reflection |
@agent-ui-kit/code |
Code + prose: highlighter registry, markdown renderer, source editor |
@agent-ui-kit/app |
App-surface compositions: shells, conversation, agent admin |
MIT Kim Granlund · Source