Widget Component Gap Analysis - Missing Design Primitives

[michiglueck]

Feature Requests to improve Design Choices

We've built 8+ production widgets for our Process App. Across all of them, we consistently hit the same gaps:

1. Custom Color Tokens / Theme Configuration
Request: Allow organizations to define custom color tokens that map to their brand palette.
UseCase would be that Enterprise customers want brand consistency across their AI interfaces. So far Only 6 semantic colors available; we have 6+ distinct role colors for different Agents in our design system

e.g. in our UseCase

chatkit.configure({
theme: {
colors: {
"brand-teal": "#4fd1c5",
"role-analyst": "#3b82f6",
"role-orchestrator": "#a855f7",
"role-modeler": "#3b82f6",
"role-compliance": "#22c55e",
"role-layout": "#a855f7",
}
}
});

Then use in widgets:
Badge(label="ANALYST", color="role-analyst") // Instead of limited to "info"

2. Extended Badge Color Prop
Request: Accept hex colors or CSS variables in addition to semantic tokens.

Current limitation:
color: "info" | "success" | "warning" | "danger" | "secondary" | "discovery"

Requested:
color: SemanticToken | #${string} | var(--${string})

3. CSS Variable Injection at Widget Level
Request: Allow passing style overrides via CSS custom properties.

Card({
style: {
"--badge-analyst-bg": "#3b82f620",
"--badge-analyst-fg": "#3b82f6",
},
children: [...]
})

4. Role-Aware Badge Component
Request: A specialized RoleBadge component that accepts role identifiers and maps to configurable colors.

RoleBadge(role="analyst") // Looks up color from org theme config

5. Accent Color Cascade
Request: Let the ChatKit accent color cascade to child components beyond just links/buttons.

e.g. Badge variant="soft" inherit from accent when color="accent"

6. ProgressBar Component

e.g. ProgressBar({ value: 0.5, max: 1.0, color: "success", size: "sm" })
This is the most universally useful missing component. Every task tracker, upload indicator, loading state, and step-through widget needs it.

7. Lack of visual hierarchy tools - No opacity, no border styles, no dividers

9. No hover states - Widgets feel like static images, not interactive UI

10. Zero animation - e.g. "LIVE" status that pulses