Simplify navbar theme picker and download action

Author: rodrix2000

IMPLEMENTATION-NOTES.md

@@ -212,6 +212,31 @@ Screenshots were visually reviewed; no-JavaScript fallback and reduced motion
 were checked by the source/regression suite. The prior keyboard-test-tool
 limitation remains; controls retain native select/radio semantics.
 
+### Compact navbar actions — 2026-08-30
+
+Starting from `308f5b00ffd2311ff6f1b47ab5b48f62cda74472`, the navbar's 160px-wide
+theme field becomes a small, code-native color-swatch icon in a 44px-square
+target. The actual native select still occupies the control, retains its
+accessible name and seven options, and receives pointer/keyboard focus. Its
+wrapper displays a visible focus ring. The native tooltip identifies the
+current theme and updates from either selector, restoration or cross-tab sync.
+
+The navbar ISO link is now a quiet, theme-colored outline button, approximately
+129 × 36px on desktop instead of 158 × 45px. On phones it retains a 44px height
+and now displays the full "Get Omarchy" label. Hero and other page download
+buttons, destinations, theme palettes and saved-preference behavior are unchanged.
+Files changed: `index.html`, `assets/css/home.css`, `assets/css/home-themes.css`,
+`assets/js/modules/home.js`, `tests/home-themes.mjs` and this document.
+
+Browser checks confirmed the icon's hit target is the native select, its focus
+ring is visible, changing the theme works, the tooltip follows both dropdown
+and swatch selection, and the mobile menu still opens/navigates/closes. Header
+layout checks at 320, 390, 768, 1024 and 1440px found no overlap or horizontal
+overflow. Desktop/mobile screenshots were reviewed against the oversized-field
+feedback. Only the existing localhost analytics warning appeared. Preflight,
+HTML validation, contrast/reduced-motion regressions, link policy and public
+packaging passed; no dependencies or separate image assets were added.
+
 ### Push-to-deploy automation — 2026-08-30
 
 Starting from `f728d6ab0d47da60b49269affa7cced2d2bd94e7`, the existing validation

assets/css/home-themes.css

@@ -104,55 +104,79 @@ html[data-site-theme]:not([data-site-theme="sovereign"]) .home {
 }
 
 .site-theme {
+  align-items: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  display: grid;
+  height: 2.75rem;
+  justify-items: center;
   min-width: 0;
   position: relative;
-  width: 10rem;
+  width: 2.75rem;
 }
 
 .site-theme[hidden] {
   display: none;
 }
 
 .site-theme__label {
-  color: var(--sm-muted);
-  font-family: var(--sm-font-interface);
-  font-size: 0.5rem;
-  font-weight: 700;
-  left: 0.65rem;
-  letter-spacing: 0.1em;
-  pointer-events: none;
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
   position: absolute;
-  text-transform: uppercase;
-  top: 0.2rem;
+  white-space: nowrap;
+  width: 1px;
 }
 
 .site-theme select {
-  appearance: none;
   background: var(--sm-panel);
-  border: 1px solid var(--sm-muted);
-  border-radius: 2px;
   color: var(--sm-text);
   cursor: pointer;
   display: block;
   font-family: var(--sm-font-interface);
-  font-size: 0.65rem;
-  font-weight: 700;
-  min-height: 2.8rem;
-  padding: 0.9rem 1.6rem 0.25rem 0.65rem;
+  font-size: 0.875rem;
+  height: 100%;
+  inset: 0;
+  opacity: 0;
+  position: absolute;
   width: 100%;
+  z-index: 1;
 }
 
-.site-theme::after {
-  border-bottom: 1.5px solid var(--sm-cyan);
-  border-right: 1.5px solid var(--sm-cyan);
-  content: '';
-  height: 0.4rem;
+.site-theme__icon {
+  height: 1.5rem;
   pointer-events: none;
-  position: absolute;
-  right: 0.65rem;
-  top: 1.15rem;
-  transform: rotate(45deg);
-  width: 0.4rem;
+  width: 1.5rem;
+}
+
+.site-theme__swatch--cyan {
+  fill: var(--sm-cyan);
+}
+
+.site-theme__swatch--gold {
+  fill: var(--sm-gold);
+}
+
+.site-theme__swatch--magenta {
+  fill: var(--sm-magenta);
+}
+
+.site-theme__swatch--outline {
+  fill: none;
+  stroke: var(--sm-muted);
+  stroke-width: 1.5;
+}
+
+.site-theme:hover,
+.site-theme:has(select:focus-visible) {
+  background: var(--sm-panel);
+  border-color: var(--sm-line-strong);
+}
+
+.site-theme:has(select:focus-visible) {
+  outline: 2px solid var(--sm-cyan);
+  outline-offset: 3px;
 }
 
 .home .sm-button {
@@ -170,16 +194,6 @@ html[data-site-theme]:not([data-site-theme="sovereign"]) .home {
 @media (max-width: 39.99rem) {
   .site-nav:has(.site-theme:not([hidden])) {
     gap: 0.5rem;
-    grid-template-columns: auto minmax(0, 1fr) auto auto;
-  }
-
-  .site-theme {
-    justify-self: end;
-    max-width: 10rem;
-    width: 100%;
-  }
-
-  .site-theme select {
-    font-size: 0.6rem;
+    grid-template-columns: 1fr auto auto auto;
   }
 }

assets/css/home.css

@@ -233,8 +233,7 @@ html:has(.home) {
   transform: scaleX(1);
 }
 
-.site-menu,
-.site-nav__cta-short {
+.site-menu {
   display: none;
 }
 
@@ -279,9 +278,27 @@ html:has(.home) {
   color: var(--sm-cyan-soft) !important;
 }
 
-.site-nav__cta {
-  min-height: 2.8rem;
-  padding: 0.75rem 1rem;
+.home .site-nav__cta {
+  background: transparent;
+  border-color: color-mix(in srgb, var(--sm-gold) 55%, var(--sm-void));
+  color: var(--sm-gold);
+  font-size: 0.65rem;
+  gap: 0.55rem;
+  letter-spacing: 0.08em;
+  min-height: 2.25rem;
+  padding: 0.55rem 0.85rem;
+}
+
+.home .site-nav__cta:hover,
+.home .site-nav__cta:focus-visible {
+  background: color-mix(in srgb, var(--sm-gold) 9%, var(--sm-void));
+  border-color: var(--sm-gold);
+  color: var(--sm-gold-soft);
+}
+
+.site-nav__cta svg {
+  height: 0.85rem;
+  width: 0.85rem;
 }
 
 .hero {
@@ -1546,18 +1563,16 @@ html:has(.home) {
     width: 1.75rem;
   }
 
-  .site-nav__cta {
-    min-height: 2.6rem;
-    padding: 0.65rem 0.9rem;
-  }
-
-  .site-nav__cta svg,
-  .site-nav__cta-long {
-    display: none;
+  .home .site-nav__cta {
+    font-size: 0.6rem;
+    gap: 0.45rem;
+    min-height: 2.75rem;
+    padding: 0.55rem 0.65rem;
   }
 
-  .site-nav__cta-short {
-    display: inline;
+  .site-nav__cta svg {
+    height: 0.75rem;
+    width: 0.75rem;
   }
 
   .site-menu > nav {

assets/js/modules/home.js

@@ -115,7 +115,10 @@ function setupThemePreview() {
     image.src = theme.image;
     image.alt = theme.alt;
     controls.forEach((input) => { input.checked = input.value === selected; });
-    if (select instanceof HTMLSelectElement) select.value = selected;
+    if (select instanceof HTMLSelectElement) {
+      select.value = selected;
+      select.title = `Theme: ${selected === 'sovereign' ? 'Sovereign (original)' : theme.name}`;
+    }
     if (status != null) {
       status.textContent = selected === 'sovereign'
         ? 'Original site palette · Tokyo Night desktop preview.'

index.html

@@ -63,7 +63,13 @@
 
         <label class="site-theme" hidden>
           <span class="site-theme__label">Theme</span>
-          <select name="site-theme" aria-label="Site color theme" data-site-theme-select>
+          <svg class="site-theme__icon" viewBox="0 0 24 24" aria-hidden="true">
+            <rect class="site-theme__swatch--cyan" x="3" y="3" width="7" height="7" rx="1"/>
+            <rect class="site-theme__swatch--gold" x="14" y="3" width="7" height="7" rx="1"/>
+            <rect class="site-theme__swatch--magenta" x="3" y="14" width="7" height="7" rx="1"/>
+            <rect class="site-theme__swatch--outline" x="14" y="14" width="7" height="7" rx="1"/>
+          </svg>
+          <select name="site-theme" aria-label="Site color theme" title="Theme: Sovereign (original)" data-site-theme-select>
             <option value="sovereign" selected>Sovereign</option>
             <option value="tokyo-night">Tokyo Night</option>
             <option value="catppuccin">Catppuccin</option>
@@ -74,9 +80,8 @@
           </select>
         </label>
 
-        <a class="sm-button sm-button--primary site-nav__cta" href="https://iso.omarchy.org/omarchy-4.0.1.iso" aria-label="Download the current Omarchy ISO">
+        <a class="sm-button site-nav__cta" href="https://iso.omarchy.org/omarchy-4.0.1.iso" aria-label="Download the current Omarchy ISO">
           <span class="site-nav__cta-long">Get Omarchy</span>
-          <span class="site-nav__cta-short" aria-hidden="true">Get</span>
           <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 17 17 7M9 7h8v8"/></svg>
         </a>
 

tests/home-themes.mjs

@@ -18,7 +18,12 @@ const dropdown = html.match(/<select\b[^>]*data-site-theme-select[^>]*>([\s\S]*?
 assert.deepEqual([...dropdown.matchAll(/<option value="([^"]+)"/g)].map((match) => match[1]), ['sovereign', ...expected]);
 assert.match(dropdown, /<option value="sovereign" selected>/);
 assert.match(html, /<label class="site-theme" hidden>/, 'Do not expose a nonfunctional dropdown without JavaScript');
+assert.match(html, /<select[^>]*aria-label="Site color theme"[^>]*title="Theme: Sovereign \(original\)"/);
+assert.match(html, /<svg class="site-theme__icon"[^>]*aria-hidden="true"/);
+assert.match(palettes, /\.site-theme:has\(select:focus-visible\)/, 'The icon wrapper must expose native select focus');
 assert.match(html, /data-theme-status aria-live="polite"/);
+assert.match(html, /class="sm-button site-nav__cta"/, 'Only the navbar CTA uses the compact outline treatment');
+assert.match(html, /class="sm-button sm-button--primary" href="https:\/\/iso\.omarchy\.org\//, 'The hero keeps its larger filled download button');
 
 class Element {
   dataset = {};
@@ -81,6 +86,7 @@ const { image, status, preview, body, select, inputs, storage, events, context }
 assert.deepEqual(Object.keys(context.themes), expected, 'Markup and module choices must stay synchronized');
 assert.equal(body.dataset.siteTheme, 'sovereign');
 assert.equal(select.value, 'sovereign');
+assert.equal(select.title, 'Theme: Sovereign (original)');
 assert.equal(select.label.hidden, false);
 assert.equal(inputs.some((input) => input.checked), false);
 assert.equal(storage.size, 0, 'Do not write a preference before a user chooses one');
@@ -100,6 +106,7 @@ for (const input of inputs) {
   assert.equal(preview.dataset.themePreview, input.value);
   assert.equal(body.dataset.siteTheme, input.value);
   assert.equal(select.value, input.value);
+  assert.equal(select.title, `Theme: ${theme.name}`);
   assert.equal(storage.get('omarchy-sovereign-theme'), input.value);
   assert.equal(image.src, theme.image);
   assert.equal(image.alt, theme.alt);
@@ -122,6 +129,7 @@ for (const value of expected) {
 
 select.value = 'sovereign';
 select.change();
+assert.equal(select.title, 'Theme: Sovereign (original)');
 assert.equal(body.dataset.siteTheme, 'sovereign');
 assert.equal(inputs.some((input) => input.checked), false);
 assert.equal(preview.dataset.themePreview, 'tokyo-night');