[FarhanAliRaza]

Summary

• Pin black text on the four fixed orange/lightblue Stack boxes in docs/styling/layout.md (WEB-013). This is not the component-reference page already fixed by Fix dark-mode contrast in the layout component demos #7676.
• Darken the red, teal and orange Foreach swatches consistently across list, indexed, dictionary and nested dictionary examples (DOC-F06), preserving the shared white labels. Calculated opaque sRGB contrast is now 5.21:1, 4.56:1 and 4.51:1 respectively.
• Add regression coverage for all six swatch colors and explicit Stack foregrounds, plus a docs changelog.

Existing fix / overlap checks

Checked current main c2d50fb2cb75c69fd11c82bef7e76efd800db8cf and open PR searches. #7676 fixes separate docs/library/layout/ pages, not this styling guide. #7657 fixes the Foreach todo/grid but not these swatches.
#7872 adds browser assertions for the old swatch hex/RGB values without fixing contrast. Its expectations must be updated to this palette when the branches are integrated (red rgb(206, 44, 49), teal rgb(0, 133, 115), orange rgb(204, 78, 0)). This PR deliberately does not duplicate its browser-test infrastructure.

Validation

• Regression tests written first: both failed on main, then passed after the changes.
• 8 focused contrast tests passed (new tests plus existing layout and Cond coverage).
• Repository-wide ruff check . passed; new test formatting and git diff --check passed.
• Evaluated executable/demo blocks and rendered all four affected Foreach examples successfully.
• pyright reflex tests: one error in unchanged tests/units/docgen/test_class_and_component.py:397 (field overload), plus two pre-existing unused-expression warnings.
• Full docs build and interactive light/dark/browser QA are not yet verified. Local Chromium cannot start: socket() failed: Operation not permitted. A supported local docs preview was also attempted after installing its dependencies, but stops because reflex-enterprise requires login or REFLEX_ACCESS_TOKEN; no preview was launched. No deployed-fix claim.

Before / after screenshots

Pending. Keep this PR draft. Genuine live before captures exist from the bug hunt; after captures require an accessible branch preview. Screenshot attachment/visual verification is an explicit completion requirement, not waived by passing source tests.

Review

Focused source review found no changes to public APIs or demo interactions. Remaining review concern: coordinate the literal color expectations with #7872. Nothing merged or deployed.

[greptile-apps]

Confidence Score: 5/5

[Low impact] The code appears safe to merge; the author’s planned visual checks remain pending.

Summary

This PR improves label contrast in the Stack and Foreach documentation demos and adds source-based regression tests.

• Foreach examples use darker colors for their white labels.
• Stack examples give their orange and light-blue boxes black text.

No actionable issues found. FarhanAliRaza explicitly leaves browser checks and after screenshots pending, keeps the PR draft, and defers updating #7872’s color expectations until integration.

_{Reviews (1) · Last reviewed commit: "fix(docs): keep fixed-color demo labels ..." · Reviewed by Greptile}

[codspeed]

Merging this PR will regress 2 benchmarks

2 warnings

⚠️ 17 benchmarks are dominated by system calls

System calls cannot be simulated consistently and are left out of the measure. The reported value understates the real cost. Switch to the Walltime instrument to measure them.

Learn more about system calls

See affected benchmarks

⚠️ 3 benchmarks with a significant change ran on different hardware

Their base and head results were measured on machines with a different CPU, core count or memory, so the changes might not come from the code. Run base and head on the same runner type.

Learn more about Macro Runners

See affected benchmarks

⚡ 1 improved benchmark
❌ 2 regressed benchmarks
✅ 148 untouched benchmarks

Warning

Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

	Benchmark	BASE	HEAD	Efficiency
❌	test_route_matching[1000]	48.1 µs	50.6 µs	-5.09%
❌	test_route_matching[10]	50.6 µs	53.3 µs	-5.07%
⚡	test_state_collection_assignment[1000]	12 ms	10.8 ms	+11.02%

Tip

Investigate this regression by commenting @codspeedbot fix this regression on this PR, or directly use the CodSpeed MCP with your agent.

---

_{Comparing fix/docs-fixed-color-demo-contrast (9b3b29c) with main (c2d50fb)}

[cubic-dev-ai]

No issues found across 4 files

_{View guided diff | Turn on auto-fix | Re-trigger cubic}