thePR0M3TH3AN/bitvid
1
0 Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2026-10-27 07:52:24 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
main
bitvid/todo/TODO_2026-07-09_design-sync.md
T
thePR0M3TH3ANandClaude Opus 4.8 df06d84e93 docs(todo): add Design-Sync tracking list (bitvid → Claude Design port) 
Records the incremental port of bitvid's token + component system into the
Claude Design project (projectId 6b3b1e2e-…): what it is, the DesignSync
workflow + card conventions (pixel-faithful, resolve @apply, token-linked,
both themes), Pass 1 done (5 Foundations + 2 Components cards synced), and the
queued expansion groups (menus/overlays, badges/pills, buttons/forms, modals,
larger surfaces) plus foundational gaps (red override accent, blur/breakpoint
tokens).

Co-Authored-By: Claude Opus 4.8 <[email protected]>
2026-07-09 08:46:26 -04:00

4.9 KiB
Raw Permalink Blame History

TODO — Design-Sync: port bitvid's design system → Claude Design

Started 2026-07-09. Tracks the incremental port of bitvid's token + component system into the Claude Design project so it becomes a shared, faithful, versioned source-of-truth (readable by Claude when building bitvid UI and, later, other apps in the same visual language).

What this is (and isn't)

  • Is: a curated, pixel-faithful reproduction of bitvid's real design system as a gallery of self-contained preview cards in a Claude Design project. Each card is rebuilt from the actual css/tokens.css values + tailwind.source.css component rules + component JS markup.
  • Is not: a one-shot automated export, and not a runtime package other apps import. The project is a reference library; the repo stays the code source.
  • Sync is incremental — one component at a time, never a wholesale replace (the DesignSync tool enforces this).

Project + tooling

  • Project: "bitvid Design System" — type: PROJECT_TYPE_DESIGN_SYSTEM
    • projectId: 6b3b1e2e-8d55-4b95-873a-52b6d886c186
  • Tool: DesignSync (claude.ai/design). One-time auth per session via /design-login.
  • The project itself is the durable store. Card sources this pass were staged in the session scratchpad (ephemeral) — to edit a card later, get_file it back, edit, then finalize_plan → write_files. Don't rely on scratchpad persisting.

Card conventions (follow for every new card)

  • First line MUST be <!-- @dsCard group="…" viewport="WxH" name="…" subtitle="…" --> (the pane compiles the card index from these markers on its self-check).
  • Self-contained + pixel-faithful: resolve every Tailwind @apply to concrete CSS; drive all values from the real tokens (--space-*, --radius-*, --status-*, the exact admin ring/star box-shadow, --color-zap, …). No approximations.
  • Link the token files (../tokens/*.css) + ../styles.css so var() resolves and both themes work (tokens carry [data-theme="light"|"dark"] scopes).
  • External images are blocked in the render sandbox → gradient placeholders for thumbnails; reuse in-project assets (../assets/svg/default-profile.svg) for avatars.

Done

Seeded by the UI generator (pre-existing, verified accurate)

  • Token foundation tokens/{colors,semantic,typography,spacing,effects,fonts}.css — a faithful ~155-token curated subset of the real 670-prop tokens.css; values match production exactly (accent indigo rgb(99 102 241), dark surfaces, --color-zap btc-orange, spacing/radii/type all verified). Both themes.
  • Colors group (5 cards): accent, status, surfaces-dark, surfaces-light, text.
  • Real bitvid assets/logos imported (assets/, bitvid_logo/).

Pass 1 — foundation backfill + flagship components (synced 2026-07-09)

  • Foundations group (5 cards): typography (Inter/Fira Code + full type scale), spacing (4xs→2xl-plus ramp), radii (incl. sidebar/modal shells), shadows → "Elevation" (sm→modal + zap popover), motion (live easing curves).
  • Components group (2 cards): - video-card — default (admin creator: gold ring + corner star), Private (data-state="private"), Moderation-blurred (warning moderation-badge overlay w/ "Show anyway" / "Always show creator"). - nostr-profile — compact account card (createCompactProfileSummary + .profile-account-card): subscription, admin-override (ring+star), blocked.

Queued (expansion, roughly value-ordered)

  • Group A — overlays/menus: the ⋯ more-menu / dropdown, notification toast (appNotify / NotificationController), confirm + prompt dialogs (confirmDialog.js / promptDialog.js / showPasswordPrompt).
  • Group B — badges & pills: moderation-badge neutral variant, standalone admin star, sats/zap badge, acting-as pill, .pill.
  • Group C — buttons & form controls: .form-control, .btn-ghost (accent/danger), primary button, focus-ring treatment.
  • Group D — modal shell → then the big modals: upload, profile, login, share-nostr, embed-video.
  • Group E — larger surfaces: sidebar/nav (sidebar.html), account switcher, video player modal, DM surfaces, search/filter modal.

Foundational gaps to capture later

  • Red "override" accent theme — --color-accent-override: rgb(254 0 50) + strong/pressed. bitvid ships an alternate red accent; not in the curated set.
  • Blur tokens (--blur-*), breakpoints (--breakpoint-*), avatar sizes, component-sizing tokens — reference cards if/when a component needs them.

Verify (user)

  • Open claude.ai/design → bitvid Design System; confirm the 7 new cards render in both themes and the admin ring/star + zap-orange read correctly. If any card is missing from the index, it needs explicit register_assets.
Reference in new issue View Git Blame Copy Permalink