Skip to content

[Repo Assist] css: introduce --surface-background and --surface-border for theming#1159

Draft
github-actions[bot] wants to merge 2 commits intomainfrom
repo-assist/perf-compile-regex-2026-04-10-471e4843287d2aa8
Draft

[Repo Assist] css: introduce --surface-background and --surface-border for theming#1159
github-actions[bot] wants to merge 2 commits intomainfrom
repo-assist/perf-compile-regex-2026-04-10-471e4843287d2aa8

Conversation

@github-actions
Copy link
Copy Markdown
Contributor

🤖 This is an automated pull request from Repo Assist.

Summary

Closes #1156.

This PR introduces two new CSS custom properties to fsdocs-default.css:

  • --surface-background - background colour for UI surface components (copy-code button, blockquotes, sidebar menus, dialogs, tooltips, API tables)
  • --surface-border - border colour for those same components

Both variables default to the header values (--header-background / --header-border), so all existing themes are fully backwards-compatible with no changes required.

Motivation

As reported in #1156, --header-background was used for both the actual page header and every surface component background. A theme with a dark header ended up with mismatched UI elements (e.g. a black copy-code button on a light code block).

Changes

  • Added --surface-background: var(--header-background) and --surface-border: var(--header-border) to :root in fsdocs-default.css
  • Updated all non-header component references to use the new variables: --mobile-menu-background, --aside-background, --blockquote-bacground-color, --page-menu-background-color, --page-menu-background-border-color, --nav-item-border-color, --dialog-background-color, .copy-code-button, div.fsdocs-tip, sidebar border, page-menu nav items, API table row borders, and dialog list item borders
  • Header elements (<header> background, header's border-bottom, menu-toggle button border) keep --header-*

Usage after this change

Themes with a dark header but neutral content surfaces:

:root {
    --header-background: #1a1a2e;
    --header-border: #333355;
    --surface-background: #f5f5f5;
    --surface-border: #ddd;
}

Test Status

Build: 0 warnings, 0 errors
Tests: 281/281 Markdown tests pass


Generated by 🌈 Repo Assist, see workflow run.

Generated by 🌈 Repo Assist, see workflow run. Learn more.

To install this agentic workflow, run

gh aw add githubnext/agentics/workflows/repo-assist.md@e1ecf341a90b7bc2021e77c58685d7e269e20b99

Five locations were creating a new uncompiled Regex on every call:

- PageContentList.mkPageContentMenu: new Regex per page rendered
- Formatting.fs (search index): Regex.Replace (static, uncompiled) per HTML page
- HtmlFormatting.formatAnchor: Regex.Matches per heading processed
- Menu.snakeCase: Regex.Replace (static, uncompiled) per menu item
- LlmsTxt (collapseBlankLines, normaliseTitle): two Regex.Replace per page entry

Each is now a module-level let binding with RegexOptions.Compiled, so the
pattern is compiled once at startup and reused for the lifetime of the
process.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
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.

Decouple surface/component colors from --header-background

0 participants