Chat
The Chat component provides a reusable pattern for chat in the interface.
Chat
@chat([])
@endchat
CSS API
| Variable | Default | Type | Values | Description |
|---|---|---|---|---|
|
--c-chat--base
|
var(--base) | range | - | Main unit that drives radius and spacing scales. |
|
--c-chat--border-radius
|
var(--border-radius) | range | - | Border Radius |
|
--c-chat--color--surface
|
var(--color--surface) | color | - | Surface |
|
--c-chat--color--surface-alt
|
var(--color--surface-alt) | color | - | Manual companion token for subtle surface backgrounds. |
|
--c-chat--color--surface-contrast
|
var(--color--surface-contrast) | color | - | Used for text and icons on surface backgrounds with less contrast. |
|
--c-chat--color--surface-border
|
var(--color--surface-border) | color | - | Manual companion token for borders on surface elements. |
|
--c-chat--color--surface-contrast-muted
|
var(--color--surface-contrast-muted) | color | - | Derived muted contrast for text and icons on surface backgrounds. |
|
--c-chat--border-width
|
var(--border-width) | range | - | Size |
|
--c-chat--color--secondary
|
var(--color--secondary) | color | - | Secondary |
|
--c-chat--color--secondary-contrast
|
var(--color--secondary-contrast) | color | - | Secondary Contrast |
|
--c-chat--color--secondary-border
|
var(--color--secondary-border) | color | - | Manual companion token for secondary border and hover states. |
|
--c-chat--corner-shape
|
var(--corner-shape) | select | square, round, squircle, circular, bevel, scoop | Corner Shape |
|
--c-chat--border-radius-multiplier
|
2 | range | - | Scales the border radius locally without changing the global border radius scale. |