Skip to content

fix(painters/dom, super-editor): set explicit document text color floor (SD-3456)#3525

Open
gpardhivvarma wants to merge 1 commit into
superdoc-dev:mainfrom
gpardhivvarma:fix/sd-3456-page-text-color-floor
Open

fix(painters/dom, super-editor): set explicit document text color floor (SD-3456)#3525
gpardhivvarma wants to merge 1 commit into
superdoc-dev:mainfrom
gpardhivvarma:fix/sd-3456-page-text-color-floor

Conversation

@gpardhivvarma
Copy link
Copy Markdown
Contributor

Closes #3456.

Summary

.superdoc-page (layout-engine page surface) and .sd-editor-scoped .ProseMirror (editor isolation surface) both relied on the browser default color. On dark-themed OSes that resolves to the canvastext system color (white), so any document text without an explicit <w:color> — auto-numbered list markers in particular — rendered invisible on the white page. There is no source CSS rule that sets color: rgb(255,255,255) in the repo; the reporter's devtools trace pointed at .superdoc-page because that was the highest-up element in the cascade where the color happened to resolve (via the user-agent default), not the rule that set it.

This PR sets an explicit color: var(--sd-layout-page-text, #000) floor on both surfaces. OOXML-explicit colors still win (inline style.color on runs has higher specificity than the inherited page color). Consumers customize via the --sd-layout-page-text token, documented in variables.css alongside --sd-layout-page-bg/--sd-layout-page-shadow.

Why two surfaces in one PR

.superdoc-page covers presentation-mode rendering (where the reported bug manifests). .sd-editor-scoped .ProseMirror covers the editor isolation surface for super-editor direct mounts (header/footer section editors, popovers, rich-text Field editors, etc.). Both are reverted to canvastext by isolation.css (all: revert) and both need the same floor. Bundling them avoids shipping the symptom-fix while leaving a sibling surface broken for the same reason.

Files

File Change
packages/layout-engine/painters/dom/src/styles.ts PageStyles.color?: string; DEFAULT_PAGE_STYLES.color = 'var(--sd-layout-page-text, #000)'; pageStyles() returns color: merged.color in the inline-style payload.
packages/layout-engine/painters/dom/src/styles.test.ts 3 new tests: default contract, consumer override path, DEFAULT_PAGE_STYLES exposure.
packages/super-editor/src/editors/v1/assets/styles/elements/prosemirror.css Adds color: var(--sd-layout-page-text, #000) to .sd-editor-scoped .ProseMirror with an inline comment linking it to the page-painter fix.
packages/superdoc/src/assets/styles/elements/editor-scoped-color-floor.test.js 4 new tests guarding the editor-scoped rule (modeled on existing search-match-precedence.test.js).
packages/superdoc/src/assets/styles/helpers/variables.css Adds --sd-layout-page-text: #000; to the "Styles: layout" section.

Test plan

  • pnpm --filter @superdoc/painter-dom test -- styles.test.ts — 8/8 (3 new + 5 existing)
  • pnpm --filter superdoc test — 1030/1030 (4 new + 1026 existing)
  • Manual verification on macOS Chrome with system dark mode: open any DOCX with multi-level numbered lists (e.g. a legal MSA). Confirm clause numbers (1., 1.1, 1.1.1) are visible against the white page.
  • Manual verification on light mode: confirm no visible change (text was black before via canvastext-on-light, still black after via the explicit floor).
  • Layout-comparison run against published baseline — diff should show only the new color: ... property on the page element's inline style, no pixel deltas on Linux CI.

Reviewer notes / consumer impact

  • Consumers using .superdoc-page { color: white } without !important to force dark text on the page will now lose to the inline style. The intended way to customize is --sd-layout-page-text (or pageStyles.color via the SuperDoc constructor). !important overrides still win.
  • Token naming: --sd-layout-page-text is named after the layout page but is reused inside the editor isolation surface. Considered introducing a separate --sd-editor-text token but kept one shared token so theme authors set it once for both surfaces.
  • Visual regression test not added: visual tests run on light-mode Linux CI where canvastext is already black, so a pixel-diff baseline would never catch this class. The CSS-content tests added here are the right safety net.

Follow-ups (not in this PR)

  • Consider adding an architecture guard (sibling to Guards D/E in architecture-boundaries.test.ts) enforcing "every container hosting inherited document text must declare color explicitly in DEFAULT_*_STYLES."

@gpardhivvarma gpardhivvarma requested a review from a team as a code owner May 27, 2026 08:01
@gpardhivvarma gpardhivvarma force-pushed the fix/sd-3456-page-text-color-floor branch from 94dab3f to 0fd2ea7 Compare May 27, 2026 08:01
@gpardhivvarma
Copy link
Copy Markdown
Contributor Author

@caio-pizzol

Copy link
Copy Markdown

@cubic-dev-ai cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues found across 5 files

Re-trigger cubic

@codecov-commenter
Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

@caio-pizzol caio-pizzol self-assigned this May 27, 2026
@gpardhivvarma gpardhivvarma force-pushed the fix/sd-3456-page-text-color-floor branch 3 times, most recently from 39d4255 to 93323a0 Compare May 29, 2026 18:04
…or (SD-3456)

`.superdoc-page` (layout-engine page surface) and `.sd-editor-scoped .ProseMirror`
(editor isolation surface) both relied on the browser default `color`. On
dark-themed OSes that resolves to the `canvastext` system color (white), so
any document text without an explicit `<w:color>` — auto-numbered list
markers in particular — rendered invisible on the white page.

Set an explicit `color: var(--sd-layout-page-text, #000)` floor on both
surfaces. OOXML-explicit colors still win (inline `style.color` on runs has
higher specificity). Consumers customize via the `--sd-layout-page-text`
token, documented alongside `--sd-layout-page-bg` in variables.css.

Adds CSS-content regression tests guarding both surfaces against future
removal of the floor.
@gpardhivvarma gpardhivvarma force-pushed the fix/sd-3456-page-text-color-floor branch from 93323a0 to 72f1188 Compare May 30, 2026 14:11
@gpardhivvarma
Copy link
Copy Markdown
Contributor Author

hey @caio-pizzol just wanted to remind you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Auto-numbered list markers render as white text (invisible) — .superdoc-page sets color: rgb(255,255,255)

3 participants