Description
Add a reusable generic Card component to DesignSystem. Prerequisite for Dialogue chat UI (consumed by ToolCallCardView, AssistantMessageView, ApprovalPromptView) and reusable outside of Dialogue.
⚠️ Re-verify before implementation. DS already ships DSCardModifier (Modifiers/DSCardModifier.swift, applied via .dsCard()). Before creating a new Card component, decide whether the existing modifier is sufficient — if so, this task reduces to documenting the pattern and possibly extending DSCardModifier with style variants (plain / emphasized / inset). If a full component view is needed for composition reasons, build it on top of the existing modifier (shared surface / radius / padding logic), do not duplicate tokens.
Spec: Epic #250 §4.1 (DesignSystem) + §6 (UI concept).
Scope
Either extend DSCardModifier with style variants, or create a new Card view component (decide after review of existing API):
public struct Card<Content: View>: View {
public enum Style: Equatable, Sendable {
case plain // surface fill + radius
case emphasized // + subtle border + slight elevation via material
case inset // flat inset (for nested cards inside a parent card)
}
public init(style: Style = .plain, padding: EdgeInsets = .init(top: DS.Spacing.md, leading: DS.Spacing.md, bottom: DS.Spacing.md, trailing: DS.Spacing.md), @ViewBuilder content: () -> Content)
}
- Surface background:
DS.Color.surfaceContent; emphasized adds DS.Color.separator 1pt border and .thinMaterial overlay at 0.04 opacity.
- Corner radius:
DS.Radius.md (.continuous style).
- Padding defaults to
.md on all sides; override via initializer.
- No hover/press states (those belong to specific consumers wrapping in
Button).
Acceptance Criteria
Relationships
Notes
- ISP:
DesignSystem must not import Textual / swift-markdown / AgentChat — keep it neutral.
- Whether component or modifier — provides a styled container; specialized cards (ToolCallCardView etc.) compose over this primitive.
Description
Add a reusable generic
Cardcomponent toDesignSystem. Prerequisite for Dialogue chat UI (consumed byToolCallCardView,AssistantMessageView,ApprovalPromptView) and reusable outside of Dialogue.Spec: Epic #250 §4.1 (DesignSystem) + §6 (UI concept).
Scope
Either extend
DSCardModifierwith style variants, or create a newCardview component (decide after review of existing API):DS.Color.surfaceContent; emphasized addsDS.Color.separator1pt border and.thinMaterialoverlay at 0.04 opacity.DS.Radius.md(.continuous style)..mdon all sides; override via initializer.Button).Acceptance Criteria
DSCardModifierwith styles or add newCardcomponent (with rationale).style,padding,content.plain,emphasized,inset— verified inColorScheme(.light)and.darkwithHCRcontrast on.DS.*tokens.DesignSystemCatalogscheme with previews: each style in 4 appearances (light / dark / HCR / reduceTransparency).ds-apilabel (public API change).MacApp/Packages/DesignSystem/README.mdmentions card pattern (component or modifier) in component list.Relationships
Notes
DesignSystemmust not import Textual / swift-markdown / AgentChat — keep it neutral.