Mercurial
diff design_system/src/components/primitives.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 | 2b6e732087ff |
| children |
line wrap: on
line diff
--- a/design_system/src/components/primitives.js Tue Aug 04 16:49:11 2026 -0700 +++ b/design_system/src/components/primitives.js Wed Aug 05 05:25:40 2026 -0700 @@ -6,6 +6,7 @@ "zen-badge", "zen-breadcrumb", "zen-bubble", + "zen-box", "zen-button-group", "zen-chart", "zen-direction", @@ -15,6 +16,7 @@ "zen-item", "zen-kbd", "zen-label", + "zen-heading", "zen-marker", "zen-message", "zen-native-select", @@ -25,6 +27,7 @@ "zen-skeleton", "zen-spinner", "zen-table", + "zen-text", "zen-textarea", "zen-typography", ]; @@ -60,7 +63,7 @@ switch (this.localName) { case "zen-aspect-ratio": this.style.setProperty( - "--zen-aspect-ratio", + "--zenbu-aspect-ratio", parseRatio(this.getAttribute("ratio")), ); break; @@ -118,11 +121,11 @@ case "zen-skeleton": if (this.hasAttribute("width")) { this.style.setProperty( - "--zen-skeleton-width", + "--zenbu-skeleton-width", this.getAttribute("width"), ); } else { - this.style.removeProperty("--zen-skeleton-width"); + this.style.removeProperty("--zenbu-skeleton-width"); } if (!this.hasAttribute("role")) this.setAttribute("aria-hidden", "true"); break;