fix: make home icon navigate to site root on theme, scales, and tools pages (#277)

* fix: make home icon navigate to site root on theme, scales, and tools pages

Replace in-page tab switch with actual navigation to / so the home icon
links go to leonardocolor.io/ instead of changing content in-place.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix: clean up SPA navigation remnants after static page transition

- Remove tab_home partial from theme, scales, and tools pages (unreachable
  after home icon now navigates to index.html)
- Remove welcome.click() calls and openSideNavItem imports from theme.js,
  scales.js, tools.js
- Remove target="_blank" from homepage navigation cards so theme/scales/tools
  open in the same tab
- Normalize home icon href to index.html for consistency with other links
- Delete orphaned files: index.js, header.html, tab_home.html, home_sidenav.html

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: GarthDB

docs/ui/src/index.js

@@ -26,8 +26,6 @@
     <div id="page" style="opacity: 0">
       {{> header_scales }}
 
-      {{> tab_home }}
-
       {{> tab_sequentialScale scaleType="sequential" }}
       {{> tab_divergingScale scaleType="diverging" }}
       {{> tab_qualitativeScale scaleType="qualitative" }}

docs/ui/src/scales.html

@@ -79,7 +79,7 @@ import {_divergingScale} from './js/initialDivergingScale';
 import {_qualitativeScale} from './js/initialQualitativeScale';
 
 import {throttle} from './js/utils';
-import {openPanelTab, openTab, openAppTab, openScaleTab, openSideNavItem} from './js/tabs';
+import {openPanelTab, openTab, openAppTab, openScaleTab} from './js/tabs';
 
 import {colorScaleDiverging} from './js/colorScaleDiverging';
 import {colorScaleSequential} from './js/colorScaleSequential';
@@ -121,8 +121,6 @@ document.getElementById('tabsequentialDemo').click();
 document.getElementById('tabdivergingDemo').click();
 document.getElementById('tabqualitativeDemo').click();
 
-document.getElementById('welcome').click();
-
 colorScaleSequential();
 colorScaleDiverging();
 colorScaleQualitative();

docs/ui/src/scales.js

@@ -25,8 +25,6 @@
     <div id="page" style="opacity: 0">
       {{> header_theme }}
 
-      {{> tab_home }}
-
       {{> tab_palette }}
       {{> tab_accessibility }}
       {{> tab_theme }}

docs/ui/src/theme.html

@@ -89,7 +89,7 @@ import {showToast, hideToast, exitPreview, neverShowToast} from './js/toast';
 import {addFromURL, addFromURLDialog, cancelURL} from './js/addFromURL';
 import updateThemeTitle from './js/themeTitle';
 import {addRatio, sortRatios} from './js/ratios';
-import {openPanelTab, openTab, openDetailTab, openAppTab, openSideNavItem, openColorTab} from './js/tabs';
+import {openPanelTab, openTab, openDetailTab, openAppTab, openColorTab} from './js/tabs';
 import toggleTooltip from './js/tooltip';
 import {downloadUiKit, createSVGuiKit} from './js/createSVGuiKit';
 import {toggleSwatchAttributes} from './js/toggleSwatchAttributes';
@@ -174,7 +174,6 @@ document.getElementById('tabPanelColorScales').click();
 document.getElementById('tabJSParameters').click();
 document.getElementById('tabPalette').click();
 document.getElementById('tabContrastingPairs').click();
-document.getElementById('welcome').click();
 document.getElementById('tabColorWheel').click();
 
 window.onload = function () {

docs/ui/src/theme.js

@@ -25,7 +25,6 @@
 
     <div id="page" style="opacity: 0">
       {{> header_tools }}
-      {{> tab_home }}
       {{> tab_colorCompare }}
       {{> tab_colorConverter }}
     </div>

docs/ui/src/tools.html

@@ -72,7 +72,7 @@ loadIcons('./spectrum-icons.svg');
 
 // Import local Javascript functions
 import {throttle} from './js/utils';
-import {openPanelTab, openTab, openAppTab, openSideNavItem} from './js/tabs';
+import {openPanelTab, openTab, openAppTab} from './js/tabs';
 import toggleTooltip from './js/tooltip';
 import {compareColors} from './js/compareColors';
 import {convertColors} from './js/convertColors';
@@ -100,7 +100,6 @@ if (mq.matches) {
 
 document.getElementById('tabContrast').click();
 document.getElementById('tabSubPanelContrastChart').click();
-document.getElementById('welcome').click();
 
 document.getElementById('compareColorOneInput').dispatchEvent(new Event('input'));
 document.getElementById('compareColorTwoInput').dispatchEvent(new Event('input'));

docs/ui/src/tools.js

@@ -3,13 +3,13 @@
     {{> LogoLink }}
 
     <div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet spectrum-Tabs--fluid">
-      <div id="tabHome" class="spectrum-Tabs-item app-Tabs-item" tabindex="0" onclick="openAppTab(event, 'home')">
-        <label class="spectrum-Tabs-itemLabel">
+      <a href="index.html" class="spectrum-Tabs-item app-Tabs-item" id="tabHome" aria-label="Home">
+        <span class="spectrum-Tabs-itemLabel">
           <svg xmlns:xlink="http://www.w3.org/1999/xlink" class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
             <use xlink:href="#spectrum-icon-18-Home" />
           </svg>
-        </label>
-      </div>
+        </span>
+      </a>
 
       <div id="tabSequential" class="spectrum-Tabs-item app-Tabs-item" tabindex="0" onclick="openAppTab(event, 'sequential')">
         <label class="spectrum-Tabs-itemLabel">Sequential</label>

docs/ui/src/views/header.html

@@ -3,13 +3,13 @@
     {{> LogoLink }}
 
     <div role="tablist" class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet spectrum-Tabs--fluid">
-      <div role="tab" id="tabHome" aria-controls="home" tabindex="0" class="spectrum-Tabs-item app-Tabs-item" onclick="openAppTab(event, 'home')">
-        <label class="spectrum-Tabs-itemLabel">
+      <a href="index.html" class="spectrum-Tabs-item app-Tabs-item" id="tabHome" aria-label="Home">
+        <span class="spectrum-Tabs-itemLabel">
           <svg xmlns:xlink="http://www.w3.org/1999/xlink" class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
             <use xlink:href="#spectrum-icon-18-Home" />
           </svg>
-        </label>
-      </div>
+        </span>
+      </a>
 
       <div role="tab" aria-controls="palette" id="tabPalette" class="spectrum-Tabs-item app-Tabs-item" tabindex="0" onclick="openAppTab(event, 'palette')">
         <label class="spectrum-Tabs-itemLabel">Create</label>