takescake

Shared CardRow for dark studio surfaces

2026-07-19 | 1 min read

Shared CardRow for dark studio surfaces

List rows used to fight the navy/teal canvas. CardRow still carried light-surface hover washes and equal-weight pill clusters, so Deck Studio and Shared Decks each patched contrast and CTAs inline. That made every list feel slightly different—and harder to scan.

This pass makes one shared list-row primitive the source of truth for dark surfaces.

The pattern

Keep the structure: thumbnail → body → actions. Lists stay lists.

What changed:

  1. tone="studio" — additive variant for navy/teal surfaces. Default tone stays available for any remaining light contexts.
  2. Readable contrast — title, type line, and meta use --studio-ink / --studio-muted / --studio-faint instead of light-theme leftovers.
  3. Action hierarchy — RowPrimaryButton + RowActions More overflow (same idea as scanner match rows: one Log/Swap CTA, secondary actions tucked away).
  4. Meta badges — RowBadge with owned / missing / price / neutral tones so collection coverage reads the same across Deck and Shared Decks.

API (additive)

import {
  CardRow,
  RowActions,
  RowBadge,
  RowPrimaryButton
} from '@/components/CardRow';

<CardRow
  tone="studio"
  name={card.name}
  oracleId={card.oracle_id}
  typeLine={card.type_line}
  compact
  meta={
    <div className="tc-row__meta-stack">
      <div className="tc-row__meta-chips">
        <RowBadge tone="missing">Missing</RowBadge>
        <RowBadge tone="price">Market: $1.20</RowBadge>
      </div>
    </div>
  }
  actions={
    <RowActions
      primary={<RowPrimaryButton>Log</RowPrimaryButton>}
      more={[
        { label: 'View', onClick: onView },
        { label: 'Lock', onClick: onLock }
      ]}
    />
  }
/>

Existing consumers that omit tone keep the previous default class set. No breaking prop removals.

Migrated surfaces

  • Deck Studio (DeckBuilderPanel) — studio rows; missing cards primary Log, owned cards primary Swap; View/Lock (and Swap when logging) live under More.
  • Shared Decks (SharedDeckClient) — same row + badge language; dropped the double-wrapped outer card chrome so the row is the surface.

Collection, staples, and search can adopt tone="studio" + RowBadge / RowActions when those list UIs are next in line—without inventing new row chrome.

What we avoided

  • Purple themes, cream+serif terracotta, broadsheet density
  • Emoji lock pills and equal-weight action clusters
  • Novelty layouts (cards-as-tiles, dashboard widgets in the list)

Try it

Open /deck, build a list, then scan Owned/Missing badges and the Log / More actions. Shared deck pages at /decks use the same row.

Related Posts