Mercurial
comparison design_system/src/components/icon.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 | 41a49c29a28f |
comparison
equal
deleted
inserted
replaced
| 257:609d3c6aff4e | 258:60a876c4587a |
|---|---|
| 26 history: ["M4 5v5h5", "M5 9a8 8 0 1 0 2-4", "M12 7v5l3 2"], | 26 history: ["M4 5v5h5", "M5 9a8 8 0 1 0 2-4", "M12 7v5l3 2"], |
| 27 info: ["M12 11v6", "M12 7h.01", "M3 12a9 9 0 1 0 18 0 9 9 0 1 0-18 0"], | 27 info: ["M12 11v6", "M12 7h.01", "M3 12a9 9 0 1 0 18 0 9 9 0 1 0-18 0"], |
| 28 menu: ["M4 6h16", "M4 12h16", "M4 18h16"], | 28 menu: ["M4 6h16", "M4 12h16", "M4 18h16"], |
| 29 moon: ["M20 15a8 8 0 0 1-11-11 9 9 0 1 0 11 11Z"], | 29 moon: ["M20 15a8 8 0 0 1-11-11 9 9 0 1 0 11 11Z"], |
| 30 more: ["M5 12h.01", "M12 12h.01", "M19 12h.01"], | 30 more: ["M5 12h.01", "M12 12h.01", "M19 12h.01"], |
| 31 offline: [ | |
| 32 "M5 12a7 7 0 0 1 10.5-6", | |
| 33 "M19 12a7 7 0 0 0-.7-3", | |
| 34 "M8.5 15.5a5 5 0 0 1 7 0", | |
| 35 "M11.5 19h1", | |
| 36 "M3 3l18 18", | |
| 37 ], | |
| 31 pause: ["M8 5v14", "M16 5v14"], | 38 pause: ["M8 5v14", "M16 5v14"], |
| 39 paw: [ | |
| 40 "M8 11c-1.7 0-3-1.5-3-3.3S6 4.5 7.7 4.5s2.5 1.5 2.5 3.3S9.7 11 8 11Z", | |
| 41 "M16 11c-1.7 0-2.2-1.5-2.2-3.2s.8-3.3 2.5-3.3S19 6 19 7.7 17.7 11 16 11Z", | |
| 42 "M5.3 15c-1.5 0-2.8-1.2-2.8-2.7s1.2-2.8 2.7-2.8S8 10.7 8 12.2 6.8 15 5.3 15Z", | |
| 43 "M18.7 15c-1.5 0-2.7-1.2-2.7-2.8s1.2-2.7 2.8-2.7 2.7 1.2 2.7 2.8-1.3 2.7-2.8 2.7Z", | |
| 44 "M7 18.5c0-3 2.2-5.5 5-5.5s5 2.5 5 5.5c0 1.5-1.2 2.5-2.7 2.5-.8 0-1.5-.4-2.3-.4s-1.5.4-2.3.4C8.2 21 7 20 7 18.5Z", | |
| 45 ], | |
| 32 play: ["m8 5 11 7-11 7Z"], | 46 play: ["m8 5 11 7-11 7Z"], |
| 33 repository: ["M4 4h13a3 3 0 0 1 3 3v13H7a3 3 0 0 1-3-3Z", "M8 4v16"], | 47 repository: ["M4 4h13a3 3 0 0 1 3 3v13H7a3 3 0 0 1-3-3Z", "M8 4v16"], |
| 34 retry: ["M4 4v6h6", "M5 9a8 8 0 1 1 2 8"], | 48 retry: ["M4 4v6h6", "M5 9a8 8 0 1 1 2 8"], |
| 35 search: ["M4 11a7 7 0 1 0 14 0 7 7 0 1 0-14 0", "m16 16 4 4"], | 49 search: ["M4 11a7 7 0 1 0 14 0 7 7 0 1 0-14 0", "m16 16 4 4"], |
| 36 settings: [ | 50 settings: [ |
| 97 this.removeAttribute("role"); | 111 this.removeAttribute("role"); |
| 98 this.removeAttribute("aria-label"); | 112 this.removeAttribute("aria-label"); |
| 99 this.setAttribute("aria-hidden", "true"); | 113 this.setAttribute("aria-hidden", "true"); |
| 100 } | 114 } |
| 101 this.dataset.zenIcon = known ? requested : "alert"; | 115 this.dataset.zenIcon = known ? requested : "alert"; |
| 102 this.style.setProperty("--zen-icon-size", safeSize(this.getAttribute("size"))); | 116 this.style.setProperty( |
| 117 "--zenbu-icon-size", | |
| 118 safeSize(this.getAttribute("size")), | |
| 119 ); | |
| 103 this.replaceChildren(svg); | 120 this.replaceChildren(svg); |
| 104 } | 121 } |
| 105 } | 122 } |
| 106 | 123 |
| 107 if (!customElements.get("zen-icon")) { | 124 if (!customElements.get("zen-icon")) { |