mirror of
https://github.com/we-promise/sure.git
synced 2026-05-07 21:04:12 +00:00
e250d266e8
* refactor(css): rename maybe-design-system → sure-design-system Rename design system CSS file and directory to match the project name post-rebrand. Update internal imports plus references in CLAUDE.md, copilot instructions, and Junie guidelines. No CSS rules change; Tailwind compiled output is byte-identical. * build(tokens): introduce single-source tokens.json + build script Make the design system a tool-agnostic single source of truth. - tokens/sure.tokens.json: every primitive, semantic alias, and Tailwind utility token in one W3C DTCG-flavored file. - tools/tokens/build.mjs: ~120 LOC plain Node script (zero deps) that resolves token references and emits Tailwind v4 source CSS. - app/assets/tailwind/sure-design-system/_generated.css: build output — the @theme block, dark-mode overrides, and 50 @utility blocks. - Hand-written CSS split into base.css (element resets), components.css (form-field/checkbox/tooltip/qrcode), and prose.css (prose dark overrides). The 5 maybe-design-system/*-utils.css files are removed — their contents now live inside _generated.css. - application.css gains `@source not "../../../tokens"` so Tailwind's content scanner ignores the JSON file (it would otherwise treat token keys like `bg-surface` as "used" classes and skip tree-shaking). - package.json: `npm run tokens:build` and `npm run tokens:check`. - .gitattributes: _generated.css marked linguist-generated. Functional parity verified: compiled `tailwind.css` has the same 378 CSS variables and byte-identical non-:root rules as before. The only diff is which of Tailwind's internal `:root,:host` blocks each variable lands in, which is invisible to the browser. * build(tokens): wire tokens build into bin/setup Run `npm install && npm run tokens:build` after bundle so a fresh checkout reaches a runnable state with one command. * docs(css): explain @source not exclusion of tokens dir Adds a comment so future readers know why tokens/ is excluded from Tailwind's content scanner (utility keys in the JSON would otherwise be treated as used classes and bypass tree-shaking). * docs(tokens): add tokens/README Schema overview, workflow, custom $extensions reference, and a list of the edge cases the build script handles. Lands as a follow-up commit on the same branch so reviewers landing on the diff have something to read before opening sure.tokens.json. * Update tokens/README.md Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Guillem Arias Fauste <gariasf@proton.me> * docs(tokens): swap em-dashes for colons in README * refactor(tokens): move tokens to design/, build script to bin/ Per PR review feedback (jjmata): - tokens/ → design/tokens/ — top-level design/ namespace leaves room for future design assets (Figma exports, design docs, etc.) without cluttering the repo root. - tools/tokens/build.mjs → bin/tokens.mjs — keeps all developer-facing scripts in one place (bin/) regardless of language. Path references updated in: - bin/tokens.mjs (TOKENS / OUT / generated header) - package.json (tokens:build, tokens:check) - app/assets/tailwind/application.css (@source not directive) - app/assets/tailwind/sure-design-system.css (comment) - app/assets/tailwind/sure-design-system/_generated.css (regenerated) - design/tokens/README.md (workflow examples) bin/tokens.mjs gains a +x bit. Tailwind compile verified. * docs(tokens): normalize README paths to repo-root style Files section was mixing relative-to-README paths (`../../bin/...`) with repo-root paths (`design/tokens/...`) used elsewhere in the same README. Switching everything to repo-root style for consistency. * fix(tokens): validate {ref} placeholders against the known token set CodeRabbit caught: resolveTemplate() and refToClass() would happily emit var(--foo-bar) or bg-foo-bar for any {foo.bar} input, so a typo in design/tokens/sure.tokens.json would silently ship broken CSS. Now build() pre-computes the set of valid token paths from the walker, and resolveTemplate() / refToClass() throw a clean "[tokens] Unknown token reference ..." error when a placeholder doesn't match. Top-level catch surfaces just the message and exits 1, no Node stack trace noise. Smoke-tested both directions: - Valid JSON: builds. - {color.gray.NONEXISTENT|5%}: fails with clear message, exit 1. * docs(tokens): humanize README prose * One more refenrece to `maybe-design-system` --------- Signed-off-by: Guillem Arias Fauste <gariasf@proton.me> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Juan José Mata <jjmata@jjmata.com>