File size: 1,701 Bytes
7c5ed63 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | import type { ReactNode } from 'react';
export type PillTone =
| 'conversation'
| 'config'
| 'lifecycle'
| 'subagent'
| 'approval'
| 'ephemeral'
| 'meta'
| 'tools'
| 'user'
| 'assistant'
| 'tool'
| 'compaction'
| 'turn'
| 'info'
| 'success'
| 'warning'
| 'error'
| 'neutral';
const TONE_VAR: Record<PillTone, string> = {
conversation: '--color-cat-conversation',
config: '--color-cat-config',
lifecycle: '--color-cat-lifecycle',
subagent: '--color-cat-subagent',
approval: '--color-cat-approval',
ephemeral: '--color-cat-ephemeral',
meta: '--color-cat-meta',
tools: '--color-cat-tools',
user: '--color-user',
assistant: '--color-assistant',
tool: '--color-tool',
compaction: '--color-compaction',
turn: '--color-turn',
info: '--color-sev-info',
success: '--color-sev-success',
warning: '--color-sev-warning',
error: '--color-sev-error',
neutral: '--color-fg-2',
};
interface PillProps {
tone?: PillTone;
variant?: 'solid' | 'soft' | 'outline';
children: ReactNode;
title?: string;
className?: string;
}
export function Pill({
tone = 'neutral',
variant = 'soft',
children,
title,
className = '',
}: PillProps) {
const color = `var(${TONE_VAR[tone]})`;
const style =
variant === 'solid'
? { backgroundColor: color, color: 'var(--color-on-accent)' }
: variant === 'outline'
? { border: `1px solid ${color}`, color }
: {
backgroundColor: `color-mix(in oklab, ${color} 18%, transparent)`,
color,
};
return (
<span
className={`pill ${className}`}
style={style}
title={title}
>
{children}
</span>
);
}
|