feat: @bchen/ui v0.1.0 — dark-mode token palette and 16px base rule #2
Reference in New Issue
Block a user
Delete Branch "feat/v0.1.0-tokens-extraction"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Summary
@bchen/uishared CSS package (public repo on gitea.bchen.dev)dist/tokens.css— the canonical dark-mode semantic-token palette (light:root+@media (prefers-color-scheme: dark)block), extracted from the cross-project dark-mode roll-out (inventory-canonical, cross-checked against authd and buchinese)dist/base.css—input, textarea, select { font-size: 16px; }(the universal iOS focus-zoom prevention rule).gitea/workflows/release.yml): tag-triggered, runsnpm test, validates CHANGELOG entry, runs security grep ondist/scripts/, attachesdist/as release artifactCloses #1
Security
Findings discovered in scope and how each was addressed:
dist/tokens.cssanddist/base.cssare pure CSS — no JS eval, no innerHTML, no script injection surfacerelease.ymlincludes an explicitdist/scripts/security grep step (guards against XSS vectors in future script additions), gated with[ -d dist/scripts ]so it skips cleanly in v0.1.0GITEA_TOKENis a Gitea CI secret referencenpm audit --omit=dev→ 0 vulnerabilities in production depsConsumer integration shape (documented in README)
Out of scope (follow-up features)
Test plan
npm test— 9 tests across 2 files, all pass:root(light) +@media (prefers-color-scheme: dark)for all 17 tokens--fg/--bg≥4.5:1 light and dark;--fg-muted/--bg≥4.5:1 light and dark;--border-strong/--bg≥3.0:1 light and darkdist/base.css16px form-input rule assertionnpm audit --omit=dev→ 0 vulnerabilities🤖 Generated with Claude Code (implementer tick)
- dist/tokens.css: canonical light + @media dark semantic-token palette extracted from inventory (cross-checked against authd and buchinese). Covers --fg, --fg-muted, --bg, --bg-elevated, --surface, --accent*, --danger*, --border*, --input-*, --warning, primitive --gray-* scale. - dist/base.css: `input, textarea, select { font-size: 16px; }` prevents iOS Safari auto-zoom on focus. - tests/tokens.test.ts: vitest — token presence in both light and dark blocks; WCAG AA contrast (>=4.5:1 body, >=3.0:1 UI) via inline hex-to-luminance math. All 10 tests green. - tests/base.test.ts: vitest — asserts 16px rule covers all three selectors. - .gitea/workflows/release.yml: tag-triggered CI — npm ci + npm test, CHANGELOG version gate, dist/scripts security grep, Gitea release artifact upload. - README.md: four-step consumer integration guide with copy-pasteable snippets (package.json dep, Dockerfile cp, HTML link tags, app CSS). - CHANGELOG.md: v0.1.0 entry. npm audit --omit=dev: 0 vulnerabilities Closes #1- Collapse extractRootBlock + extractDarkBlock into a single extractBlock helper; the two functions shared identical body logic (same regex, same return) and differed only in the string they received — now the call sites pass the appropriate slice inline. - Remove the second test in base.test.ts ("covers all three form control selectors in one rule"): the first test's regex already asserts all three selectors appear together with font-size: 16px, so the individual /input/, /textarea/, /select/ matches added no coverage.