Soma — Design Tokens for AgentLayerZero

CSS variables, component classes, animations, and a Tailwind preset for the AgentLayerZero design system.

Soma is the cell body of a neuron — the structural foundation everything else grows from.

Install

npm install @agent-layer-zero/soma

Usage

Import All Styles

import '@agent-layer-zero/soma/all.css'

Import Individual Layers

import '@agent-layer-zero/soma/theme.css'        // CSS variables (colors, spacing, typography)
import '@agent-layer-zero/soma/animations.css'    // glow, pulse, spin keyframes
import '@agent-layer-zero/soma/base.css'          // scrollbar, font smoothing
import '@agent-layer-zero/soma/components.css'    // buttons, inputs, cards, badges, modals
import '@agent-layer-zero/soma/chat.css'          // markdown prose styles for chat

Tailwind Preset

// tailwind.config.js
module.exports = {
  presets: [require('@agent-layer-zero/soma/tailwind-preset')],
}

Then use: bg-alz-bg, text-alz-accent, border-alz-border, rounded-alz-lg, etc.

Themes

<!-- Dark (default) -->
<div data-alz-theme="dark">

<!-- Light -->
<div data-alz-theme="light">

<!-- Transparent — inherits from parent -->
<div data-alz-theme="transparent">

<!-- Custom override -->
<div style="--alz-accent: #e11d48;">

CSS Variables

Colors

--alz-bg · --alz-bg-secondary · --alz-bg-tertiary · --alz-text · --alz-text-muted · --alz-accent · --alz-accent-hover · --alz-border · --alz-error · --alz-success · --alz-warning

Chat

--alz-user-bubble · --alz-user-text · --alz-assistant-bubble · --alz-assistant-text

Spacing

--alz-space-xs · --alz-space-sm · --alz-space-md · --alz-space-lg · --alz-space-xl

Typography

--alz-font · --alz-font-mono · --alz-text-xs · --alz-text-sm · --alz-text-base · --alz-text-lg

Radii

--alz-radius-sm · --alz-radius-md · --alz-radius-lg · --alz-radius-xl · --alz-radius-full

Component Classes

| Class | What | |-------|------| | .alz-btn .alz-btn-primary .alz-btn-sm | Buttons | | .alz-input .alz-textarea .alz-label | Form inputs | | .alz-toggle | On/off switch | | .alz-card .alz-card-hover | Bordered containers | | .alz-badge .alz-badge-accent | Status pills | | .alz-modal .alz-modal-backdrop | Dialog overlay | | .alz-spinner .alz-spinner-sm .alz-spinner-lg | Loading spinners | | .alz-divider | Horizontal separator | | .alz-link | Styled anchor |

Animation Classes

| Class | Effect | |-------|--------| | .alz-glow | Bright sparkle glow (3s) | | .alz-glow-slow | Subtle breathing glow (8s) | | .alz-glow-subtle | Very subtle opacity pulse (10s) | | .alz-pulse | Opacity pulse (2s) | | .alz-spin | Rotation (1s) |

License

GPL-3.0