ASOwnerYTandClaude Opus 5
3970cf9a00
Docker / build (push) Failing after 1m43s
Import this repo's components into a Claude Design project so the design
agent builds with the real Cloudrite library instead of generic components.
The repo is a Next.js app, not a component library: no dist/, no exports
map, no .d.ts tree, and Tailwind exists only as build directives. So
.design-sync/ carries a small build that manufactures a consumable package
from source (staged to the gitignored .ds-pkg/):
- tsconfig.dts.json declaration emit, for real <Name>Props contracts
- build-css.mjs Tailwind v4 -> a static stylesheet via @tailwindcss/postcss
- make-pkg.mjs stages the package; index.js exports all 292 symbols
while index.d.ts exports only the 61 roots, so shadcn's
flat compound parts don't each become a preview card.
Also generates the per-root parts tables in docs/
- shims/next-link router-free anchor; the real next/link needs
AppRouterContext and drags in the App Router runtime
- fonts/ Space Grotesk + Inter woff2 (SIL OFL). next/font supplies
these at runtime in the app, so the bundle has none
previews/ holds 40 authored preview stories, conventions.md is prepended to
the generated README as the design agent's usage guide, and NOTES.md records
the gotchas a future sync would otherwise rediscover.
Co-Authored-By: Claude Opus 5 <[email protected]>
50 lines
2.1 KiB
CSS
50 lines
2.1 KiB
CSS
/* Design-sync Tailwind entry.
|
|
*
|
|
* The app's own app/globals.css is a Tailwind v4 *source* file (`@import
|
|
* 'tailwindcss'`), not a shippable stylesheet, and it leans on Next to supply
|
|
* two things the DS bundle has to supply itself:
|
|
*
|
|
* 1. Utilities. Compiled here via @tailwindcss/cli into .design-sync/compiled.css.
|
|
* 2. Font variables. next/font/google assigns --font-sans / --font-body on
|
|
* <body> at runtime, so globals.css can write the self-referential
|
|
* `--font-sans: var(--font-sans), 'Space Grotesk', …`. Outside Next that
|
|
* cycle is invalid at computed-value time and the whole declaration drops,
|
|
* leaving every font-sans/font-body utility unset. The @theme block below
|
|
* re-declares both with real family stacks.
|
|
*
|
|
* Regenerate whenever component sources or authored previews change:
|
|
* pnpm exec @tailwindcss/cli -i .design-sync/tailwind-entry.css -o .design-sync/compiled.css --minify
|
|
*/
|
|
|
|
@import '../app/globals.css';
|
|
@import './fonts/fonts.css';
|
|
|
|
/* Tailwind v4 auto-detects sources from this file's directory, which would miss
|
|
* the repo's component tree. Name both scan roots explicitly. */
|
|
@source '../components';
|
|
@source './previews';
|
|
|
|
@theme inline {
|
|
--font-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
|
|
--font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
|
|
/* app/globals.css puts the dark palette on :root, so the DS is dark by default
|
|
* (matching cloudrite.co.nz). Tell the UA so form controls and scrollbars match. */
|
|
:root {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* Designs built with this DS get the dark page by default. Deliberately `body`
|
|
* only, at plain specificity: the preview-card harness sets its own
|
|
* `body{background:#fff}` in a later inline <style>, so it still wins inside a
|
|
* card (which is what the product wants), while a real design gets the brand
|
|
* surface without having to remember it. Do NOT add `html` here — the harness's
|
|
* white body over a dark html paints a black band under every card. */
|
|
body {
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-body);
|
|
}
|