Fix light-mode command demo contrast

[abdulwahabone]

Root cause

Dark-mode compatibility rules in home-kinpaku.css were not scoped to html.dark. When the light theme inverted --color-ink and --color-paper, those rules forced dark text onto dark CTA/avatar fills and pale warning text onto a pale warning panel.

Clarify (Light Mode)

Before	After

Bolder (Light Mode)

Before	After

Polish (Light Mode)

Before	After

---

Note

Low Risk
CSS presentation and test-only changes in demo styling; no auth, data, or runtime logic.

Overview
Fixes light-mode contrast on homepage command split demos by scoping kinpaku compatibility overrides to the active theme instead of applying them in both modes.

Dark-only: Amber warning copy (#92400e and related) and primary controls using background: var(--color-ink) are remapped only under html.dark, so light mode keeps inline brown warning text and natural ink/paper CTA pairing.

Light-only: Demo labels that use color: var(--color-accent) now map to --ks-link-on-paper under html.light for readable gold accent text on paper.

Adds a docs integrity test that renders clarify/quieter/bolder/polish demos, asserts expected CTA markup, and guards that home-kinpaku.css contains theme-scoped selectors and no unscoped amber/ink overrides.

^{Reviewed by Cursor Bugbot for commit b1c8fc3. Bugbot is set up for automated code reviews on this repo. Configure here.}

[cloudflare-workers-and-pages]

Deploying impeccable with    Cloudflare Pages

Latest commit:	b1c8fc3
Status:	✅  Deploy successful!
Preview URL:	https://a797ca14.impeccable-2rv.pages.dev
Branch Preview URL:	https://codex-light-mode-command-rep.impeccable-2rv.pages.dev

View logs

[greptile-apps]

Greptile Summary

This PR fixes light-mode contrast for command demos on the home page. The main changes are:

• Dark-mode-only scoping for amber warning text overrides.
• Dark-mode-only scoping for var(--color-ink) CTA fill overrides.
• A light-mode accent text override for small demo labels on paper.
• Tests that keep the demo markup and theme CSS selectors aligned.

Confidence Score: 5/5

Safe to merge with minimal risk.

The changes are narrow CSS selector updates with tests for this change, and no blocking issues were found.

No files require special attention.

T-Rex Logs

What T-Rex did

• Ran bun test tests/docs-integrity.test.js and confirmed all tests passed (3 tests, 18 expectations).
• Verified the capture log shows the affected UI text across Clarify, Bolder, and Polish demos: Clarify shows Delete this project? and Save and Continue; Bolder shows Introducing Our Product, A solution for modern teams, and Learn More; Polish shows JD and Edit Profile.
• Compared before/after screenshots for the Clarify, Bolder, and Polish demos and confirmed the after-state images render readable copy and CTAs.
• Collected and cataloged visual and runtime artifacts to support reviewer inspection of the changes.

_{Ran code and verified through T-Rex}

Important Files Changed

Filename	Overview
site/styles/home-kinpaku.css	Scopes command demo contrast overrides to dark mode and adds a light-mode accent text override for affected demo labels.
tests/docs-integrity.test.js	Adds tests that keep affected demo markup and theme CSS selector expectations aligned.

_{Reviews (1): Last reviewed commit: "Fix light-mode command demo contrast" | Re-trigger Greptile}

[pbakaus]

Nice! That one has bothered me :)