refactor(ui): redesign theme switcher as compact segmented control

Author: streltcov

_includes/header_custom.html

@@ -1,26 +1,31 @@
 <div id="feast-theme-switcher" class="feast-theme-switcher" role="group" aria-label="Theme mode switcher">
-  <span class="feast-theme-switcher__label text-small">Theme</span>
   <button
     type="button"
-    class="btn feast-theme-switcher__button js-feast-theme-option"
+    class="feast-theme-switcher__button js-feast-theme-option"
     data-theme-option="system"
     aria-pressed="false"
+    aria-label="Use system theme setting"
+    title="System"
   >
-    System
+    Auto
   </button>
   <button
     type="button"
-    class="btn feast-theme-switcher__button js-feast-theme-option"
+    class="feast-theme-switcher__button js-feast-theme-option"
     data-theme-option="light"
     aria-pressed="false"
+    aria-label="Use light theme"
+    title="Light"
   >
     Light
   </button>
   <button
     type="button"
-    class="btn feast-theme-switcher__button js-feast-theme-option"
+    class="feast-theme-switcher__button js-feast-theme-option"
     data-theme-option="dark"
     aria-pressed="false"
+    aria-label="Use dark theme"
+    title="Dark"
   >
     Dark
   </button>

_sass/custom/custom.scss

@@ -1,36 +1,57 @@
 .feast-theme-switcher {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
-  margin: 0 0.5rem;
+  gap: 0;
+  margin: 0 0.35rem;
+  padding: 0.15rem;
+  border: 1px solid $border-color;
+  border-radius: 999px;
+  background-color: $body-background-color;
+  box-shadow: 0 1px 2px rgba($black, 0.05);
   white-space: nowrap;
 }
 
-.feast-theme-switcher__label {
+.feast-theme-switcher__button {
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
   color: $search-result-preview-color;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  padding: 0.38rem 0.58rem;
+  min-width: 3.1rem;
+  cursor: pointer;
+  transition:
+    background-color 140ms ease,
+    color 140ms ease,
+    box-shadow 140ms ease;
 }
 
-.feast-theme-switcher__button {
-  min-width: 3.75rem;
-  padding: 0.25rem 0.45rem;
+.feast-theme-switcher__button:hover {
+  color: $body-text-color;
+  background-color: rgba($btn-primary-color, 0.12);
+}
+
+.feast-theme-switcher__button:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba($link-color, 0.35);
 }
 
 .feast-theme-switcher__button.is-active {
   color: $white;
   background-color: $btn-primary-color;
-  border-color: $btn-primary-color;
+  box-shadow: 0 1px 2px rgba($black, 0.2);
 }
 
 @media (max-width: 50rem) {
   .feast-theme-switcher {
-    margin: 0 0.25rem;
-  }
-
-  .feast-theme-switcher__label {
-    display: none;
+    margin: 0 0.2rem;
   }
 
   .feast-theme-switcher__button {
-    min-width: 3.2rem;
+    min-width: 2.75rem;
+    padding: 0.34rem 0.45rem;
+    font-size: 0.7rem;
   }
 }