chore(design-sync): add Claude Design sync inputs for the ui/ design system#3471
Merged
Conversation
…system First sync of the coven-cave design system to claude.ai/design (project "OpenCoven"). Commits the durable inputs so re-syncs are reproducible from any clone: - .design-sync/config.json — 41-component enumeration (synth-entry mode), Tailwind pre-compile buildCmd, card-mode overrides, conventions header - .design-sync/previews/ — 41 authored preview files, all graded good - .design-sync/conventions.md — design-agent conventions (validated names) - .design-sync/fonts.css — next/font --font-* variables + remote imports - .design-sync/build-css.mjs — Tailwind v4 CSS pre-compile step - .design-sync/icon-bootstrap.tsx — prefix-free iconify re-registration (bare icon names miss the ph-prefixed subset outside the app) - .design-sync/NOTES.md — repo gotchas + re-sync risks - .gitignore — design-sync machine state Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a reproducible “design-sync” input bundle to keep Coven Cave’s UI primitives (and Icon + tokens/fonts) in sync with claude.ai/design, without changing app runtime source.
Changes:
- Add
.design-sync/config.jsonplus supporting build/bootstrap assets (build-css.mjs,fonts.css,icon-bootstrap.tsx,conventions.md,NOTES.md). - Add authored preview stories for each UI primitive under
.design-sync/previews/. - Update
.gitignoreto exclude design-sync machine state and caches.
Reviewed changes
Copilot reviewed 47 out of 48 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| .gitignore | Ignores design-sync machine state/artifacts so they don’t pollute commits. |
| .design-sync/NOTES.md | Captures operational notes/gotchas for repeatable re-syncs. |
| .design-sync/build-css.mjs | Precompiles Tailwind v4 CSS-first globals.css into a static stylesheet for the sync bundle. |
| .design-sync/config.json | Enumerates components, build command, CSS entry, overrides, and extra entries for the design sync pipeline. |
| .design-sync/conventions.md | Design-system conventions header content to ship with the bundle. |
| .design-sync/fonts.css | Defines --font-* variables (normally injected by next/font) and imports canonical fonts. |
| .design-sync/icon-bootstrap.tsx | Re-registers the Phosphor subset prefix-free so bare icon names resolve in the standalone bundle. |
| .design-sync/previews/AiToggle.tsx | Design-sync preview for AiToggle. |
| .design-sync/previews/AuthedImage.tsx | Design-sync preview for AuthedImage. |
| .design-sync/previews/AvatarLightbox.tsx | Design-sync preview for AvatarLightbox. |
| .design-sync/previews/BarChart.tsx | Design-sync preview for BarChart. |
| .design-sync/previews/Button.tsx | Design-sync preview for Button. |
| .design-sync/previews/ColorPicker.tsx | Design-sync preview for ColorPicker. |
| .design-sync/previews/ConfirmProvider.tsx | Design-sync preview for ConfirmProvider. |
| .design-sync/previews/ContextMenu.tsx | Design-sync preview for ContextMenu. |
| .design-sync/previews/DonutChart.tsx | Design-sync preview for DonutChart. |
| .design-sync/previews/EmptyState.tsx | Design-sync preview for EmptyState. |
| .design-sync/previews/ErrorState.tsx | Design-sync preview for ErrorState. |
| .design-sync/previews/Field.tsx | Design-sync preview for Field. |
| .design-sync/previews/Heatmap.tsx | Design-sync preview for Heatmap. |
| .design-sync/previews/Icon.tsx | Design-sync preview for Icon. |
| .design-sync/previews/IconButton.tsx | Design-sync preview for IconButton. |
| .design-sync/previews/LifecycleBadge.tsx | Design-sync preview for LifecycleBadge. |
| .design-sync/previews/ListRowCard.tsx | Design-sync preview for ListRowCard. |
| .design-sync/previews/LiveRegionProvider.tsx | Design-sync preview for LiveRegionProvider. |
| .design-sync/previews/Modal.tsx | Design-sync preview for Modal. |
| .design-sync/previews/OriginChip.tsx | Design-sync preview for OriginChip. |
| .design-sync/previews/OverflowMenu.tsx | Design-sync preview for OverflowMenu. |
| .design-sync/previews/Popover.tsx | Design-sync preview for Popover. |
| .design-sync/previews/PropertyPill.tsx | Design-sync preview for PropertyPill. |
| .design-sync/previews/PulseBars.tsx | Design-sync preview for PulseBars. |
| .design-sync/previews/RelativeTime.tsx | Design-sync preview for RelativeTime. |
| .design-sync/previews/SearchInput.tsx | Design-sync preview for SearchInput. |
| .design-sync/previews/Segmented.tsx | Design-sync preview for Segmented. |
| .design-sync/previews/SelectionToolbar.tsx | Design-sync preview for SelectionToolbar. |
| .design-sync/previews/SeparatorHandle.tsx | Design-sync preview for SeparatorHandle. |
| .design-sync/previews/SessionInitiatorChip.tsx | Design-sync preview for SessionInitiatorChip. |
| .design-sync/previews/SettingsGroup.tsx | Design-sync preview for SettingsGroup. |
| .design-sync/previews/Skeleton.tsx | Design-sync preview for Skeleton. |
| .design-sync/previews/Sparkline.tsx | Design-sync preview for Sparkline. |
| .design-sync/previews/StandardSelect.tsx | Design-sync preview for StandardSelect. |
| .design-sync/previews/Tabs.tsx | Design-sync preview for Tabs. |
| .design-sync/previews/TextArea.tsx | Design-sync preview for TextArea. |
| .design-sync/previews/TextInput.tsx | Design-sync preview for TextInput. |
| .design-sync/previews/ThinkingIndicator.tsx | Design-sync preview for ThinkingIndicator. |
| .design-sync/previews/TrendChart.tsx | Design-sync preview for TrendChart. |
| .design-sync/previews/UndoToast.tsx | Design-sync preview for UndoToast. |
| .design-sync/previews/ViewHeader.tsx | Design-sync preview for ViewHeader. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+1
to
+2
| import { Button, IconButton, SearchInput, ViewHeader } from "coven-cave"; | ||
| import { useState } from "react"; |
| @@ -0,0 +1,53 @@ | |||
| # Building with Coven Cave (OpenCoven) | |||
|
|
|||
| Coven Cave is a dark, dense, lavender-inked desktop app ("grimoire" aesthetic). Read `guidelines/docs/coven-design-language.md` before composing larger layouts — it defines the density scale, elevation rules, and voice. | |||
Comment on lines
+30
to
+32
| - `styles.css` → imports `_ds_bundle.css`: all token definitions, the `.ui-*` component styles, and compiled utilities. Grep it before inventing a class. | ||
| - `guidelines/docs/coven-design-language.md`: density, elevation-via-lightness, the pill, disclosure ladder, chrome budget (≤3 visible actions + overflow), voice. | ||
| - Per component: `components/<group>/<Name>/<Name>.prompt.md` (usage + examples) and `<Name>.d.ts` (props). |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
First sync of the coven-cave design system to claude.ai/design (project "OpenCoven": https://claude.ai/design/p/530c9c44-8b06-4dfc-9215-ed70af0a743a). All 41
src/components/ui/primitives + Icon are live there with authored, graded previews, the full 21-theme token system, fonts, and the design-language doc.This PR commits the durable sync inputs so future re-syncs are reproducible from any clone (re-sync = one driver command; verified state carries via the uploaded anchor):
.design-sync/config.json— 41-component enumeration (synth-entry mode oversrc/components/ui/), Tailwind pre-compilebuildCmd, overlay card-mode overrides, conventions header wiring.design-sync/previews/— 41 authored preview.tsxfiles (the story set), every cell graded good on the absolute rubric.design-sync/conventions.md— the design agent's conventions header (token vocabulary, dark-surface idiom, icon names — every claim validated against the built artifacts).design-sync/fonts.css— the 25--font-*variables next/font injects at runtime + remote imports for the canonical trio.design-sync/build-css.mjs— compiles the Tailwind v4 CSS-firstglobals.cssinto a shippable static stylesheet.design-sync/icon-bootstrap.tsx— re-registers the Phosphor subset prefix-free (bare icon names miss theph-prefixed storage outside the app; without this every icon renders blank in the bundle).design-sync/NOTES.md— repo gotchas, component preview quirks, re-sync risks.gitignore— design-sync machine state (staged scripts, build output, caches)No app source is touched.
Repo finding (not addressed here)
--danger-bg/--danger-border/--danger-text,--accent-rose, and--bg-sunkenare referenced by app surfaces (craft-dossier, familiar-daily-notes, projects-view, save-template-modal) but defined nowhere in the repo — pre-existing dangling tokens.🤖 Generated with Claude Code