From aa6e3df788853bb12cde4c8968847c5cc05dfbc3 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Wed, 8 Nov 2023 11:13:05 -0800
Subject: [PATCH] Rename unselectedBackground to alternateBackground

This color is now used for more than just the unselected background.
---
 docs/customise-client/api.rst     | 6 ++++--
 src/components/controls/styles.js | 6 ++----
 src/components/controls/toggle.js | 2 +-
 src/components/main/styles.js     | 7 ++++++-
 4 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/docs/customise-client/api.rst b/docs/customise-client/api.rst
index c389dbf48..4eef90709 100644
--- a/docs/customise-client/api.rst
+++ b/docs/customise-client/api.rst
@@ -55,7 +55,7 @@ For instance, here is the customisation used by nextstrain.org:
        "font-family": "Lato, Helvetica Neue, Helvetica, sans-serif",
        "selectedColor": "#5097BA",
        "unselectedColor": "#333",
-       "unselectedBackground": "#888"
+       "alternateBackground": "#888"
      }
    }
 
@@ -68,7 +68,9 @@ For instance, here is the customisation used by nextstrain.org:
 +--------------------------+------------------------------+----------------------------------------------------+
 | color                    | color                        | Text color of all other text                       |
 +--------------------------+------------------------------+----------------------------------------------------+
-| unselectedBackground     | color                        | Background color of unselected toggle              |
+| unselectedBackground (deprecated)     | color                        | Old key for ``alternateBackground``              |
++--------------------------+------------------------------+----------------------------------------------------+
+| alternateBackground      | color                        | Background color of some elements (unselected toggle, panel section borders)              |
 +--------------------------+------------------------------+----------------------------------------------------+
 | font-family              | font                         | Font used throughout the sidebar                   |
 +--------------------------+------------------------------+----------------------------------------------------+
diff --git a/src/components/controls/styles.js b/src/components/controls/styles.js
index 3930eb1f4..8c28c450b 100644
--- a/src/components/controls/styles.js
+++ b/src/components/controls/styles.js
@@ -38,10 +38,8 @@ export const PanelSectionContainer = styled.div`
   padding-bottom: 8px;
 
   // Add borders to delineate panel sections from other sections.
-  // TODO: Rename unselectedBackground to alternateBackground.
-  // https://github.com/nextstrain/auspice/pull/1704#discussion_r1385917481
-  border-top: 1px solid ${(props) => props.theme.unselectedBackground};
-  border-bottom: 1px solid ${(props) => props.theme.unselectedBackground};
+  border-top: 1px solid ${(props) => props.theme.alternateBackground};
+  border-bottom: 1px solid ${(props) => props.theme.alternateBackground};
 
   // Don't add a top border when there is already a bottom border from a sibling
   // above.
diff --git a/src/components/controls/toggle.js b/src/components/controls/toggle.js
index e0ba253af..85c68a199 100644
--- a/src/components/controls/toggle.js
+++ b/src/components/controls/toggle.js
@@ -31,7 +31,7 @@ const Slider = styled.div`
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: ${(props) => props.theme.unselectedBackground};
+    background-color: ${(props) => props.theme.alternateBackground};
     -webkit-transition: .4s;
     transition: .4s;
     border-radius: 12px;
diff --git a/src/components/main/styles.js b/src/components/main/styles.js
index b0a7ab245..4ef644443 100644
--- a/src/components/main/styles.js
+++ b/src/components/main/styles.js
@@ -42,10 +42,15 @@ const sidebarThemeDefaults = {
   sidebarBoxShadow: "rgba(255, 255, 255, 1)",
   selectedColor: "#5DA8A3",
   unselectedColor: "#BBB",
-  unselectedBackground: "#888"
+  alternateBackground: "#888"
 };
 let sidebarThemeExtensions = {};
 if (hasExtension("sidebarTheme")) {
   sidebarThemeExtensions = getExtension("sidebarTheme");
+
+  // unselectedBackground → alternateBackground
+  if (Object.prototype.hasOwnProperty.call(sidebarThemeExtensions, "unselectedBackground")) {
+    sidebarThemeExtensions["alternateBackground"] = sidebarThemeExtensions["unselectedBackground"];
+  }
 }
 export const sidebarTheme = {...sidebarThemeDefaults, ...sidebarThemeExtensions};