Skip to content

D-1: DesignSystem — add Card primitive #251

@kirich1409

Description

@kirich1409

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

  • Decision recorded: extend existing DSCardModifier with styles or add new Card component (with rationale).
  • Chosen approach implemented with public API accepting style, padding, content.
  • Three styles render distinctly: plain, emphasized, inset — verified in ColorScheme(.light) and .dark with HCR contrast on.
  • No hardcoded values — all padding / radius / color from DS.* tokens.
  • Added to DesignSystemCatalog scheme with previews: each style in 4 appearances (light / dark / HCR / reduceTransparency).
  • Unit test covers public API and default padding.
  • Owner approval for ds-api label (public API change).
  • MacApp/Packages/DesignSystem/README.md mentions card pattern (component or modifier) in component list.

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    complexity:SdialogueDialogue feature — structured chat UI for agent sessionsds-apiChanges to DesignSystem public API — requires owner approvalfrontendwave-1

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions