RCA-2026-03-24-001: adoc Script UI Mismatch

Executive Summary

The adoc script (AsciiDoc to standalone HTML converter) produced output with visual discrepancies compared to the Domus Antora UI: gray badges instead of cyan, double borders on code blocks, no theme switching, and Tridactyl hint incompatibility. Root cause: CSS was written without direct reference to the domus-antora-ui source files, resulting in approximations that diverged from the brand identity. Resolution: Updated CSS to match exact hex colors (#0077b6), fixed border cascade, added theme switcher, and ensured pointer-events compatibility.

Timeline

Time Event

2026-03-24 ~09:00

User requested batch conversion of MDN AsciiDoc files

2026-03-24 ~09:15

User identified visual mismatch: "this still does not match the ui of my domus hub and spoke"

2026-03-24 ~09:20

Screenshots provided showing side-by-side comparison

2026-03-24 ~09:30

First fix: double border issue resolved

2026-03-24 ~09:45

User feedback: "just follow my ui because it still off…​ mine looks WAYYYY better"

2026-03-24 ~10:00

Second fix: gray badges → cyan badges

2026-03-24 ~10:15

Theme switcher added (dark/light/catppuccin)

2026-03-24 ~10:30

Tridactyl pointer-events fixed

2026-03-24 ~10:45

User confirmed: "yes this is better now let’s get back on track"

2026-03-24 ~11:00

MDN batch conversion started (10,872 files)

2026-03-24 ~22:15

Tridactyl hint misalignment reported - hints below/right of copy button

2026-03-24 ~22:20

Root cause: Copy button had no visible background (CSS not applying)

2026-03-24 ~22:25

Fix: Added !important flags, changed badge to dark grey, button to cyan filled

2026-03-24 ~22:30

User confirmed: Tridactyl working, styling matches Domus

Problem Statement

Symptoms

Round 1 (Morning)

  • Gray badges - Language badges (BASH, JSON, etc.) had gray background instead of cyan

  • Double borders - Code blocks showed two cyan borders (outer + inner)

  • No theme switching - Standalone HTML had no dark/light toggle

  • Tridactyl hints misaligned - Copy buttons didn’t receive keyboard hints

Round 2 (Evening)

  • Tridactyl hints still misaligned - Hints appeared below/right of copy button, not centered

  • Copy button invisible - Button had no visible background despite CSS specifying cyan

  • Badge color wrong - Badge was cyan when Domus uses dark grey

  • Copy feedback different - Toast styling differs from Domus (deferred to future)

Expected Behavior

Standalone HTML output should match docs.domusdigitalis.dev exactly:

  • Cyan badges (#0077b6) with white text

  • Single border on code block container

  • Theme switcher (dark/light/catppuccin)

  • All interactive elements receive Tridactyl hints

Actual Behavior

  • Badges used rgba(0,0,0,0.6) (dark gray)

  • Both .listingblock .content AND inner pre had borders

  • No theme toggle functionality

  • Copy buttons had pointer-events: none inherited from parent

Impact

Severity

Metric Value

Severity

P3 (cosmetic)

Duration

~1 hour (discovery to resolution)

Files Affected

~4,700 (partial batch conversion before fix)

User Experience

Degraded - inconsistent branding

Business Impact

  • Inconsistent visual identity across documentation ecosystem

  • MDN conversion output didn’t match professional standards

  • Required rework of already-converted files

Metadata

Field Value

RCA ID

RCA-2026-03-24-001

Author

Evan Rosado

Date Created

2026-03-24

Status

Final

Category

Tooling / Visual QA