Mercurial
comparison mrjunejune/test/snapshots/tools.snapshot @ 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 |
comparison
equal
deleted
inserted
replaced
| 257:609d3c6aff4e | 258:60a876c4587a |
|---|---|
| 52 #themeControl:hover { | 52 #themeControl:hover { |
| 53 transform: scale(1.05); | 53 transform: scale(1.05); |
| 54 } | 54 } |
| 55 | 55 |
| 56 #themeToggle { | 56 #themeToggle { |
| 57 display: flex; | |
| 57 flex-direction: column; | 58 flex-direction: column; |
| 58 min-width: 4.5rem; | 59 padding: 0; |
| 59 padding: 0.35rem; | 60 border: 0; |
| 60 border-radius: 1.5rem; | 61 background: transparent; |
| 61 } | |
| 62 | |
| 63 #themeName { | |
| 64 font-family: "More", sans-serif; | |
| 65 font-size: 0.65rem; | |
| 66 line-height: 1; | |
| 67 } | 62 } |
| 68 | 63 |
| 69 /* Professional header */ | 64 /* Professional header */ |
| 70 header { | 65 header { |
| 71 margin: auto; | 66 margin: auto; |
| 72 padding: 1.5em 1em; | 67 padding: 1.5em 1em; |
| 73 font-family: "More", sans-serif; | 68 font-family: "More", sans-serif; |
| 74 box-shadow: var(--zen-shadow-sm); | |
| 75 width: 720px; | 69 width: 720px; |
| 76 max-width: calc(100% - 2em); | 70 max-width: calc(100% - 2em); |
| 77 text-align: center; | 71 text-align: center; |
| 78 } | 72 } |
| 79 | 73 |
| 171 filter: var(--epi-grayscale); | 165 filter: var(--epi-grayscale); |
| 172 transition: filter 0.3s ease; | 166 transition: filter 0.3s ease; |
| 173 } | 167 } |
| 174 </style> | 168 </style> |
| 175 | 169 |
| 176 <zen-button id="themeControl" variant="quiet"> | 170 <zen-button id="themeControl" appearance="plain" size="xl"> |
| 177 <button | 171 <button |
| 178 id="themeToggle" | 172 id="themeToggle" |
| 179 type="button" | 173 type="button" |
| 180 aria-label="Change site theme" | 174 aria-label="Change site theme" |
| 181 > | 175 > |
| 185 alt="" | 179 alt="" |
| 186 src="/public/epi_all_colors.svg" | 180 src="/public/epi_all_colors.svg" |
| 187 height="50" | 181 height="50" |
| 188 width="50" | 182 width="50" |
| 189 > | 183 > |
| 190 <span id="themeName" aria-live="polite">Auto</span> | 184 <span id="themeName" class="zen-visually-hidden" aria-live="polite">Auto</span> |
| 191 </button> | 185 </button> |
| 192 </zen-button> | 186 </zen-button> |
| 193 | 187 |
| 194 <header> | 188 <header> |
| 195 <h1><a href="/">MrJuneJune</a></h1> | 189 <h1><a href="/" data-zen-link-effect="none">MrJuneJune</a></h1> |
| 196 </header> | 190 </header> |
| 197 <script src="/index.js"></script> | 191 <script src="/index.js"></script> |
| 198 | 192 |
| 199 <main> | 193 <main> |
| 200 <h1 class="title"> Tools </h1> | 194 <h1 class="title"> Tools </h1> |