Rename unselectedBackground to alternateBackground

This color is now used for more than just the unselected background.

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                   |
 +--------------------------+------------------------------+----------------------------------------------------+

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.

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;

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};