Rename unselectedBackground to alternateBackground

This color is now used for more than just the unselected background.
nextstrain · Nov 13, 2023 · 1ad4376 · 1ad4376
1 parent e441dae
commit 1ad4376
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 22 deletions.
diff --git a/docs/customise-client/api.rst b/docs/customise-client/api.rst
@@ -55,25 +55,27 @@ 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"
      }
    }
 
-+--------------------------+------------------------------+----------------------------------------------------+
-| Properties               | CSS string of                | Description                                        |
-+==========================+==============================+====================================================+
-| selectedColor            | color                        | Text color of selected text / button text          |
-+--------------------------+------------------------------+----------------------------------------------------+
-| unselectedColor          | color                        | Text color of unselected text / button text        |
-+--------------------------+------------------------------+----------------------------------------------------+
-| color                    | color                        | Text color of all other text                       |
-+--------------------------+------------------------------+----------------------------------------------------+
-| unselectedBackground     | color                        | Background color of unselected toggle              |
-+--------------------------+------------------------------+----------------------------------------------------+
-| font-family              | font                         | Font used throughout the sidebar                   |
-+--------------------------+------------------------------+----------------------------------------------------+
-| background               | color                        | Background color of the entire sidebar             |
-+--------------------------+------------------------------+----------------------------------------------------+
++-----------------------------------+---------------+------------------------------------------------------------------------------+
+| Properties                        | CSS string of | Description                                                                  |
++===================================+===============+==============================================================================+
+| selectedColor                     | color         | Text color of selected text / button text                                    |
++-----------------------------------+---------------+------------------------------------------------------------------------------+
+| unselectedColor                   | color         | Text color of unselected text / button text                                  |
++-----------------------------------+---------------+------------------------------------------------------------------------------+
+| color                             | color         | Text color of all other text                                                 |
++-----------------------------------+---------------+------------------------------------------------------------------------------+
+| 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                                             |
++-----------------------------------+---------------+------------------------------------------------------------------------------+
+| background                        | color         | Background color of the entire sidebar                                       |
++-----------------------------------+---------------+------------------------------------------------------------------------------+
 
 Components
 ----------

diff --git a/src/components/controls/styles.js b/src/components/controls/styles.js
@@ -37,10 +37,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
@@ -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
@@ -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};