root/Jyotisha
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): stop the personal report rendering white on white in dark mode
Independent Staging Quality Gate / validate (push) Successful in 10m50s
Details
Independent Staging Quality Gate / publish (push) Has been cancelled
Details

Browse Source 
.personal-report-reader declared --report-paper, --report-rule and
--report-accent on itself. A custom property resolves from the nearest
element that declares it, so an element-local declaration beats :root
regardless of media queries or source order — the dark override added
with the theme was dead the moment it was written.

The inks did follow the theme, because they live on :root. So dark mode
put --color-ink (#f2f0ea) on paper that stayed #f8f5ee: 1.05:1 for
headings and 1.22:1 for body. The report was effectively invisible.

Printing had the same defect from the other side: the print block forces
white backgrounds but never reset the inks, so printing from a dark
screen produced a blank page. It now pins the palette back to light —
paper is always paper.

Every report ink now clears AA on report paper in both themes, and the
new contract test forbids re-declaring the report palette anywhere but
:root, which is the trap that caused this.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0155nFCgCHtoA7jhSDGmZmMu
This commit is contained in:
Jesse_Chen
2026-08-30 11:29:58 +00:00
parent 85b14b13ae
commit a96df75473
2 changed files with 102 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/globals.css
+32 -3
View File
@@ -119,6 +119,11 @@
--space-24: 96px;
--composer-reserve: 148px;
--ease-out: cubic-bezier(.22, 1, .36, 1);
/* The personal report's paper surface. Declared here so the dark blocks can
override it; see the note on .personal-report-reader. */
--report-accent: #85432f;
--report-paper: #f8f5ee;
--report-rule: #c9c2b7;
/* Hairlines and sheens that are dark-on-light here and light-on-dark there. */
--ring-hairline: oklch(0 0 0 / .1);
--sheen: rgba(255, 255, 255, .54);
@@ -3169,9 +3174,10 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
scroll boundary because the chat shell intentionally locks html/body.
============================================================ */
.personal-report-reader {
--report-accent: #85432f;
--report-paper: #f8f5ee;
--report-rule: #c9c2b7;
/* The report palette lives on :root, not here. A custom property declared on
this element wins over :root no matter what a media query says, so keeping
it local made the theme override dead: dark mode kept the light paper while
--color-ink went light with the theme, leaving white text on white paper. */
width: 100%;
height: 100%;
min-height: 0;
@@ -3309,6 +3315,29 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
}
@media print {
/* Paper is always paper. Without this, printing while the screen is in dark
mode kept the light-forced backgrounds below but left every ink light,
which prints as a blank page. */
:root {
color-scheme: light;
--color-ink: #1d1d1f;
--color-ink-strong: #32322f;
--color-ink-secondary: #5f5f59;
--color-ink-tertiary: #6a6963;
--color-canvas: #fbfaf7;
--color-canvas-soft: #f3f2ee;
--color-border: #d8d6cf;
--color-border-strong: #b8b5ad;
--color-action: #85432f;
--color-action-hover: #6f3627;
--color-focus: #85432f;
--color-danger: #9a2f2f;
--color-success: #28633e;
--color-warning: #b07b22;
--report-accent: #85432f;
--report-paper: #f8f5ee;
--report-rule: #c9c2b7;
}
html, body { width: auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important; background: #fff !important; }
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
.personal-report-screen-only { display: none !important; }