diff mrjunejune/src/index.js @ 258:60a876c4587a

[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 05:25:40 -0700
parents 30c2196d03d4
children
line wrap: on
line diff
--- a/mrjunejune/src/index.js	Tue Aug 04 16:49:11 2026 -0700
+++ b/mrjunejune/src/index.js	Wed Aug 05 05:25:40 2026 -0700
@@ -19,7 +19,7 @@
 
 function updateThemeColor() {
   const probe = document.createElement('span');
-  probe.style.background = 'var(--zen-color-canvas)';
+  probe.style.background = 'var(--zenbu-sys-color-surface-page)';
   document.body.append(probe);
   const color = getComputedStyle(probe).backgroundColor;
   probe.remove();
@@ -57,6 +57,34 @@
   localStorage.setItem(THEME_STORAGE_KEY, currentPreference);
 }
 
+function enhanceLinks(root = document) {
+  const links = root instanceof HTMLAnchorElement
+    ? [root]
+    : [...root.querySelectorAll?.('a') || []];
+  for (const link of links) {
+    if (link.closest('zen-link, zen-button') ||
+        link.dataset.zenLinkEffect === 'none') {
+      continue;
+    }
+    const wrapper = document.createElement('zen-link');
+    wrapper.setAttribute('effect', 'paw');
+    link.before(wrapper);
+    wrapper.append(link);
+  }
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+  enhanceLinks();
+  const observer = new MutationObserver(records => {
+    for (const record of records) {
+      for (const node of record.addedNodes) {
+        if (node instanceof Element) enhanceLinks(node);
+      }
+    }
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+});
+
 document.querySelector('#themeToggle')?.addEventListener('click', () => {
   const current = getThemePreference();
   const next = THEMES[(THEMES.indexOf(current) + 1) % THEMES.length];