update docs and theme tokens to use wa

docs/_includes/default.njk

@@ -34,18 +34,13 @@
     <meta property="og:image" content="{{ assetUrl(meta.image, true) }}" />
 
     {# Shoelace #}
-    <link rel="stylesheet" href="/dist/themes/light.css" />
-    <link rel="stylesheet" href="/dist/themes/dark.css" />
+    <link rel="stylesheet" href="/dist/themes/default.css" />
     <script type="module" src="/dist/shoelace-autoloader.js"></script>
 
-    {# Set the initial theme and menu states here to prevent flashing #}
-    <script>
-      (() => {
-        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        const theme = localStorage.getItem('theme') || 'auto';
-        document.documentElement.classList.toggle('sl-theme-dark', theme === 'dark' || (theme === 'auto' && prefersDark));
-      })();
-    </script>
+    {# Web Fonts #}
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Noto+Sans+Mono&display=swap" rel="stylesheet">
 
     {# Turbo + Scroll positioning #}
     <script src="{{ assetUrl('scripts/turbo.js') }}" type="module"></script>
@@ -68,37 +63,10 @@
       </svg>
     </button>
 
-    {# Icon toolbar #}
-    <div id="icon-toolbar">
-      {# GitHub #}
-      <a href="https://github.com/shoelace-style/shoelace" title="View Shoelace on GitHub">
-        <sl-icon name="github"></sl-icon>
-      </a>
-
-      {# Twitter #}
-      <a href="https://twitter.com/shoelace_style" title="Follow Shoelace on Twitter">
-        <sl-icon name="twitter"></sl-icon>
-      </a>
-
-      {# Theme selector #}
-      <sl-dropdown id="theme-selector" placement="bottom-end" distance="3">
-        <sl-button slot="trigger" size="small" variant="text" caret title="Press \ to toggle">
-          <sl-icon class="only-light" name="sun-fill"></sl-icon>
-          <sl-icon class="only-dark" name="moon-fill"></sl-icon>
-        </sl-button>
-        <sl-menu>
-          <sl-menu-item type="checkbox" value="light">Light</sl-menu-item>
-          <sl-menu-item type="checkbox" value="dark">Dark</sl-menu-item>
-          <sl-divider></sl-divider>
-          <sl-menu-item type="checkbox" value="auto">System</sl-menu-item>
-        </sl-menu>
-      </sl-dropdown>
-    </div>
-
     <aside id="sidebar" data-preserve-scroll>
       <header>
         <a href="/">
-          <img src="{{ assetUrl('images/wordmark.svg') }}" alt="Shoelace" />
+          {% include 'workmark.njk' %}
         </a>
         <div class="sidebar-version">
           {{ meta.version }}

docs/_includes/sidebar.njk

@@ -1,4 +1,10 @@
 <ul>
+  <li>
+    <h2>Experimental</h2>
+    <ul>
+      <li><a href="/experimental/themer">Themer</a></li>
+    </ul>
+  </li>
   <li>
     <h2>Getting Started</h2>
     <ul>
@@ -47,8 +53,8 @@
       <li><a href="/tokens/typography">Typography</a></li>
       <li><a href="/tokens/color">Color</a></li>
       <li><a href="/tokens/spacing">Spacing</a></li>
-      <li><a href="/tokens/elevation">Elevation</a></li>
-      <li><a href="/tokens/border-radius">Border Radius</a></li>
+      <li><a href="/tokens/borders">Borders</a></li>
+      <li><a href="/tokens/shadows">Shadows</a></li>
       <li><a href="/tokens/transition">Transition</a></li>
       <li><a href="/tokens/z-index">Z-index</a></li>
       <li><a href="/tokens/more">More Tokens</a></li>