Mercurial
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];