Use the FORRT --color-* tokens directly and set 14px body text

[LukasWallrich]

Stacked on #20. Merge #20 first; GitHub will then retarget this PR to main.

The explorer kept its own --flora-* colour layer next to the FORRT tokens: 318 uses in styles.css against 7 for --color-*. Only some --flora-* names were aliased, so dark mode mixed the plum FORRT surfaces with leftover blue-grey ones (inputs, callouts, subtle panels, borders, muted text). This brings back the single-token-layer part of the closed #7 and applies your decision on body size.

Changes

• One token layer. All 305 --flora-* uses in CSS, HTML and JS map onto --color-*, and the three --flora-* definition blocks are deleted. Notable mappings:
  • muted text → --color-muted-fg, not --color-text-muted, because #888 fails 4.5:1;
  • borders → --color-border;
  • panels → --color-surface-subtle / --color-surface-alt;
  • top bar → --color-neutral.
• Four app tokens in ds-tokens.css: --color-link (#2563eb light, 5.17:1 on white, replacing #4299e1 at 2.97:1; #93b4fd dark), --color-shadow, --color-shadow-hover and --color-callout-accent.
• Dark mode: 21 dark-only rules that re-coloured headings with --flora-primary-dark-accent are deleted. --color-primary already lightens in dark mode, so one rule now serves both themes; dark-only rules go from 35 to 12, all of them Bootstrap/DataTables overrides.
• Text on brand fills (active chips, filter buttons, pagination, hover states) uses --color-on-primary instead of #fff. White on the dark-mode pink was 2.56:1. Solid outcome badges keep their theme-independent colours.
• Focus rings, modal backdrop and modal shadow use --shadow-focus-primary, --color-scrim and --shadow-lg.
• Plain links and inline code use --color-link and --color-primary instead of Bootstrap's defaults. The footer tagline opacity goes from 0.5 to 0.62.
• Body text is 14px (--text-md), including Bootstrap's --bs-body-font-size, so tables and controls follow. Running copy (intro, FAQ answers, chart descriptions, callouts, citation box) uses the same size. .note drops to 13px (--text-base) to stay a step below body. Headings, titles and KPI numbers are unchanged.

Verification

• Contrast audit: every visible text element on all seven tabs, in both themes, with the composited background.

  	Replace inline note styles and share outlined button rules #20 base	this PR
  Light: text styles below WCAG AA	7	2
  Dark: text styles below WCAG AA	9	2

  Remaining:

  • the Mean Citedness stat numbers use outcome colours set from JavaScript, which Resolve chart colours from theme tokens #19 makes theme-aware; light-mode amber "mixed" stays at 2.3:1;
  • .study-type-note muted text on the page background is 4.39:1, from the FORRT --color-muted-fg token.

• Screenshots: four tabs in both themes. No page errors; computed body size is 14px.

• Python tests pass locally; the browser suite is left to CI.

🤖 Generated with Claude Code

---

Summary by cubic

Replaces the explorer's --flora-* colour tokens with the FORRT --color-* tokens directly, so dark mode no longer mixes plum surfaces with leftover blue-grey ones, and sets body text to 14px. Stacked on #20 — merge that first; GitHub will then retarget this PR to main.

One token layer

• All 305 --flora-* uses in CSS, HTML, and JS now map to --color-*, and the --flora-* definition blocks are deleted. Chart rendering is consolidated on the same layer: Mean Citedness charts go through FloraCharts.theme(), which drops the stale #8b1a4a fallback.
• Muted text maps to --color-muted-fg (#888 fails 4.5:1); panels, borders, and the top bar and footer use --color-surface-*, --color-border, and --color-neutral.
• Four app tokens are added in ds-tokens.css: --color-link, --color-shadow, --color-shadow-hover, and --color-callout-accent.
• The 21 dark-only heading re-colour rules are deleted; --color-primary already lightens in dark mode, so dark-only rules drop from 35 to 12.
• Text on brand fills (active chips, filter buttons, pagination, hover states) uses --color-on-primary instead of #fff, which was 2.56:1 on the dark-mode pink. Outcome badges keep their theme-independent colours.
• Links and inline code use --color-link and --color-primary instead of Bootstrap's defaults; focus rings, the modal backdrop, and modal shadow use --shadow-focus-primary, --color-scrim, and --shadow-lg. Footer tagline opacity goes from 0.5 to 0.62, and the stats-card hover border returns via --color-primary-border (it had become a no-op after the rename).

Typography and contrast

• Body text is now 14px (--text-md), including Bootstrap's --bs-body-font-size; running copy and the citation box use the same size, while .note drops to 13px. Headings and KPI numbers are unchanged.
• Text styles below WCAG AA drop from 7 to 2 in light mode and 9 to 2 in dark mode across all seven tabs.
• The two remaining cases are the JS-set Mean Citedness stat colours (Resolve chart colours from theme tokens #19 makes those theme-aware) and .study-type-note at 4.39:1.

^{Written for commit afbc2c4. Summary will update on new commits.}

[coderabbitai]

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 56 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 31f46adf-7a65-425f-86b8-8a27de7106c2

---

📥 Commits

Reviewing files that changed from the base of the PR and between 062ab76 and afbc2c4.

---

📒 Files selected for processing (5)

• assets/app.js
• assets/citation-impact.js
• assets/ds-tokens.css
• assets/styles.css
• index.html

---

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

---

_{Comment @coderabbitai help to get the list of available commands.}

[cubic-dev-ai]

All reported issues were addressed across 5 files

<sub>Reply with feedback, questions, or to request a fix.

View guided diff | Turn on auto-fix | Re-trigger cubic</sub>