fix(site): unify action colors and mobile menu alignment

[PeterGuy326]

Problem and result

Refs #8 (revision r1) and bytefolk/design-system#29.

The RoleWeave site used brand violet for generic actions, while the shared product language reserves blue for those controls. This separates action colors from the existing brand/AI colors and fixes a download menu that was clipped on390px screens.

• Use the existing blue family for primary buttons, selected tabs, links, selection and keyboard focus, with paired light/dark normal/hover text colors.
• Center button contents; preserve reading/menu alignment. Anchor the narrow hero/CTA download menu to the full action row so it remains in the viewport. Navigation menu anchoring is unchanged.
• Expand contrast checks for action and inverse CTA states; update Unreleased changelog. HTML content, logo, links and business scripts are byte-for-byte unchanged outside CSS.

Validation

With locked dependencies and Node24.14.1:

• npm run verify: PASS,56 light/dark contrast pairs,9/9 reveal checks, active-tab behavior and no page/font errors.
• npm run verify:failclose: expected exit1 with exactly the two intentionally injected errors; confirms the original negative-path check.
• Actual Chromium rendering at1440/390px in both themes:16 screenshots reviewed;20 measured pairs, minimum5.53:1; no document overflow or page errors.
  -12 keyboard/menu combinations: Enter opens, Tab reaches a real download link without activation, Escape closes and restores focus. Direct menu-bound assertions pass; document scrollWidth alone had missed the clipped menu under overflow:hidden.
• git diff --check and independent three-file review: PASS. No threshold changes or generated artifacts.

This repository is a static page with no build command. Local rendered acceptance does not claim deployment or installer testing. Current-head hosted CI and formal human approval remain separate. Revert this commit to roll back.

Current-head hosted checks

The final commit passed the required hosted verify job. Formal human approval remains pending.

[Bindy-lbb]

Code Review: fix(site): unify action colors and mobile menu alignment

Overall Assessment: ✅ Looks good

Clean, well-scoped change that correctly separates interactive/action semantics (blue) from brand/identity semantics (purple). The rename is thorough and the contrast-check script keeps pace with the token changes.

---

1. Brand vs Action Color Separation ✅

The split is correctly applied throughout:

• --action (blue) used for interactive elements: buttons (.btn-primary), ghost button hover, tab hover/selected state, link hover (nav, footer, tier, .dl-more), ::selection, :focus-visible — all correct.
• --brand (purple) retained for identity/decorative elements: CTA band background, orbit centre label, .tree b (directory tree accent), eyebrow pill, inline code highlight, .cta-band background/text/ghost border — all correctly kept as brand.

The CTA band is a good example of the nuance handled well: the band itself stays --brand (decorative surface), but the .btn-primary inside it flips to --action-ink/--action with a hover state using --action-hover. That's the right call.

2. Contrast Check Pairs ✅

The scripts/contrast-check.js changes are thorough:

• brand-ink on brand → action-ink on action for buttons and tabs ✔
• brand on brand-ink → action on action-ink for CTA button label ✔
• brand-ink on brand-hover → action-ink on action-hover for button hover ✔
• New pairs added: action-hover on action-ink (CTA hover), action on paper/band/card (links on all surfaces) — good coverage ✔
• Brand-only pairs correctly retained: orbit centre, CTA body, eyebrow pill, inline code ✔

3. Mobile Menu Clipping Fix ✅

@media (max-width: 760px) {
  .hero-actions { position: relative; }
  .hero-actions .dl { position: static; }
}

This is a clean fix. Making .dl position: static on mobile causes the absolutely-positioned .dl-menu to position relative to .hero-actions instead, keeping the dropdown within viewport bounds. The position: relative on .hero-actions provides the containing block.

4. Missed Renames Check ✅

Remaining --brand references in the post-change context lines are all correctly identity/decorative:

Selector	Token	Purpose	Correct?
.cta-band	--brand / --brand-ink	Decorative band bg + text	✅
.cta-band .btn-ghost	--brand-ink	Ghost border/text on brand surface	✅
.cta-band :focus-visible	--brand-ink	Focus ring visibility on purple bg	✅
.tree b	--brand	Decorative directory tree accent	✅

No interactive elements missed.

5. CTA Band Accessibility ✅

.cta-band :focus-visible { outline-color: var(--brand-ink); }

Good addition. The global :focus-visible uses --action (blue), which would be invisible/low-contrast on the purple --brand CTA band surface. Overriding to --brand-ink (near-white in light, near-black in dark) ensures the keyboard focus ring is visible against the band background.

6. Minor Observations

.btn centering addition: The addition of justify-content: center; text-align: center; to .btn is a good alignment fix. Per the design language rules, buttons should be centered — this ensures that even if a button has a fixed width, its label is centered.

Token values match --azure: --action is defined with the same OKLCH values as --azure in both themes. The comment documents this intentionally ("Same blue family as the logo"). This is fine semantically — they share a value today but carry different meaning, and could diverge later.

Dark theme token definitions consistent: Light --action = oklch(52% 0.21 259), dark = oklch(74% 0.15 259). Hover direction is correct: darker on hover in light mode (44%), lighter in dark mode (82%). Both [data-theme="dark"] and @media (prefers-color-scheme: dark) blocks are kept in sync. ✔

No issues found. Ship it. 🚢

[Bindy-lbb]

Review 结论：LGTM (Approved) ✅
--brand 与 --action 颜色分离清晰、对比度检查对完整、移动端菜单裁切定位修复验证通过，CI 全绿，同意合并。