[Repo Assist] css: introduce --surface-background and --surface-border for theming (#1161)

* css: introduce --surface-background and --surface-border variables

Decouple component surface colours from --header-background/--header-border.

The new variables default to the header values for full backwards compatibility.
Themes that need a distinct surface colour (e.g. dark header + light content
surfaces) can now override --surface-background and --surface-border without
touching the header variables.

Affected components:
- .copy-code-button (background + border)
- --mobile-menu-background
- --aside-background (sidebar)
- --blockquote-bacground-color
- --page-menu-background-color + border
- --nav-item-border-color
- --dialog-background-color
- div.fsdocs-tip (border)
- API docs table row borders
- dialog list item borders
- #fsdocs-main-menu sidebar border

Closes #1156

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* ci: trigger checks

* css: rename --surface-* to --panel-* for clarity

The 'surface' naming was found to be non-intuitive by maintainers.
Rename to --panel-background and --panel-border which more clearly
communicates that these variables control backgrounds and borders
of panel/component UI elements (menus, dialogs, blockquotes, etc.)
as distinct from the page header colours.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* css: improve --panel-background/--panel-border comment for clarity

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* css: fix typo --blockquote-bacground-color → --blockquote-background-color

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Florian Verdonck <florian.verdonck@outlook.com>
Co-authored-by: Don Syme <dsyme@users.noreply.github.com>

Author: 4 people

RELEASE_NOTES.md

@@ -22,6 +22,7 @@
 * Fix `Markdown.ToMd` serialising unresolved indirect links as `[body](key)` (treating the reference key as a URL) instead of the correct `[body][key]` form. Unresolved indirect links are now preserved in their original indirect-reference form, consistent with how unresolved indirect images are handled.
 
 ### Added
+* Introduce `--panel-background` and `--panel-border` CSS custom properties in `fsdocs-default.css`. These decouple panel/component colours (copy-code button, blockquotes, sidebar, page menu, dialogs, tooltips, API tables) from `--header-background`/`--header-border`. Both variables default to the header values, so existing themes are unaffected; themes that need a different colour for content panels can now override `--panel-background` and `--panel-border` independently. [#1156](https://github.com/fsprojects/FSharp.Formatting/issues/1156)
 * Add tests for `Markdown.ToFsx` (direct serialisation to F# script format), which previously had no unit test coverage.
 * Add tests for `Markdown.ToPynb` (direct serialisation to Jupyter notebook format), which previously had no unit test coverage.
 * Add round-trip tests for `HardLineBreak` and `HorizontalRule` character preservation in `Markdown.ToMd`.

docs/content/fsdocs-default.css

@@ -63,7 +63,11 @@
     --header-background: light-dark(#f9fbfc, #0c1318);
     --header-border: light-dark(#e8ecf1, #3a3a42);
     --header-link-color: var(--text-color);
-    --mobile-menu-background: var(--header-background);
+    /* Panel variables (--panel-background, --panel-border): override to customise menus, dialogs,
+       blockquotes, copy buttons, and other UI panels independently from the page header. */
+    --panel-background: var(--header-background);
+    --panel-border: var(--header-border);
+    --mobile-menu-background: var(--panel-background);
     --menu-color: var(--text-color);
     --menu-item-hover-background: light-dark(#eff0f1, #2c2624);
     --menu-item-hover-color: var(--menu-color);
@@ -77,16 +81,16 @@
     --scrollbar-thumb-background: #686868;
     --shadow-color: hsla(0, 0%, 0%, .1);
     --main-shadow-color: hsla(0, 0%, 0%, .025);
-    --aside-background: var(--header-background);
-    --blockquote-bacground-color: var(--header-background);
+    --aside-background: var(--panel-background);
+    --blockquote-background-color: var(--panel-background);
     --blockquote-color: var(--text-color);
     --on-this-page-color: var(--menu-color);
-    --page-menu-background-color: var(--header-background);
-    --page-menu-background-border-color: var(--header-border);
+    --page-menu-background-color: var(--panel-background);
+    --page-menu-background-border-color: var(--panel-border);
     --page-menu-background-hover-border-color: var(--text-color);
-    --nav-item-border-color: var(--header-border);
+    --nav-item-border-color: var(--panel-border);
     --nav-item-active-border-color: var(--text-color);
-    --dialog-background-color: var(--header-background);
+    --dialog-background-color: var(--panel-background);
     --dialog-empty-color: var(--nav-category);
     --dialog-icon-color: var(--text-color);
     --dialog-link-color: var(--link-color);
@@ -347,7 +351,7 @@ main {
         margin: 0;
 
         & li {
-            border-left: 1px solid var(--header-border);
+            border-left: 1px solid var(--panel-border);
             margin: 0;
 
             &:hover, &:focus {
@@ -468,7 +472,7 @@ main {
         padding: var(--spacing-300) var(--spacing-500);
         background-color: var(--aside-background);
         width: var(--main-menu-width);
-        border-right: 1px solid var(--header-border);
+        border-right: 1px solid var(--panel-border);
         grid-row: var(--main-menu-grid-row);
         grid-column: var(--main-menu-grid-column);
         overflow-y: auto;
@@ -666,7 +670,7 @@ blockquote {
     margin: var(--spacing-200) 0;
     margin-left: var(--spacing-200);
     padding: var(--spacing-100) var(--spacing-300);
-    background-color: var(--blockquote-bacground-color);
+    background-color: var(--blockquote-background-color);
     color: var(--blockquote-color);
 
     > p {
@@ -731,8 +735,8 @@ pre.has-copy-button {
     top: var(--spacing-100);
     right: var(--spacing-100);
     padding: var(--spacing-50) var(--spacing-100);
-    background-color: var(--header-background);
-    border: 1px solid var(--header-border);
+    background-color: var(--panel-background);
+    border: 1px solid var(--panel-border);
     border-radius: var(--radius);
     color: var(--text-color);
     cursor: pointer;
@@ -989,7 +993,7 @@ table.pre, code, pre.fssnip {
 div.fsdocs-tip {
     background-color: var(--doc-tip-background);
     border-radius: var(--radius);
-    border: 1px solid var(--header-border);
+    border: 1px solid var(--panel-border);
     padding: var(--spacing-200);
     font-family: var(--monospace-font);
     font-variant-ligatures: none;
@@ -1070,7 +1074,7 @@ div.fsdocs-tip:popover-open {
     }
 
     & tbody td {
-        border-top: 1px solid var(--header-border);
+        border-top: 1px solid var(--panel-border);
         padding: var(--spacing-300) 0;
     }
 
@@ -1280,7 +1284,7 @@ dialog {
 
         & li {
             margin: 0;
-            border-bottom: 1px solid var(--header-border);
+            border-bottom: 1px solid var(--panel-border);
 
             &:hover {
                 & a, & a iconify-icon {