Mercurial

comparison design_system/src/index.html @ 254:2b6e732087ff

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add complete native component catalog Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 15:12:09 -0700
parents 7a7581f040e8
children 30c2196d03d4
comparison
equal deleted inserted replaced
253:fdf3816959cb 254:2b6e732087ff
16 <a class="catalog-brand" href="/" data-catalog-link> 16 <a class="catalog-brand" href="/" data-catalog-link>
17 <span class="catalog-mark" aria-hidden="true">全</span> 17 <span class="catalog-mark" aria-hidden="true">全</span>
18 Zenbu UI 18 Zenbu UI
19 </a> 19 </a>
20 20
21 <zen-input-group class="catalog-search">
22 <zen-icon name="search"></zen-icon>
23 <input
24 id="componentSearch"
25 type="search"
26 placeholder="Search components"
27 aria-label="Search components"
28 aria-describedby="componentSearchStatus"
29 autocomplete="off"
30 />
31 <kbd aria-hidden="true">/</kbd>
32 </zen-input-group>
33 <p id="componentSearchStatus" class="search-status" role="status"></p>
34
21 <h2>Foundations</h2> 35 <h2>Foundations</h2>
22 <nav class="catalog-nav" aria-label="Foundations"> 36 <nav class="catalog-nav" aria-label="Foundations">
23 <a href="/" data-catalog-link>Overview</a> 37 <a href="/" data-catalog-link>Overview</a>
24 <a href="/tokens" data-catalog-link>Tokens</a> 38 <a href="/tokens" data-catalog-link>Tokens</a>
39 <a href="/icons" data-catalog-link>Icons</a>
25 </nav> 40 </nav>
26 41
27 <h2>Components</h2> 42 <h2>Components</h2>
28 <nav class="catalog-nav" aria-label="Components"> 43 <nav class="catalog-nav" aria-label="Components">
29 <a href="/components/button" data-catalog-link>Button</a> 44 <a href="/components/button" data-catalog-link>Button</a>
95 <h1>Design tokens</h1> 110 <h1>Design tokens</h1>
96 <p>Import one CSS file and override any <code>--zen-*</code> property at the application boundary.</p> 111 <p>Import one CSS file and override any <code>--zen-*</code> property at the application boundary.</p>
97 </header> 112 </header>
98 <div class="token-grid"> 113 <div class="token-grid">
99 <section class="token-group"> 114 <section class="token-group">
100 <h2>Color</h2> 115 <h2>Semantic color</h2>
101 <dl class="swatch-list"> 116 <dl class="swatch-list">
102 <div><span class="swatch" style="--swatch: var(--zen-color-accent)"></span><div><dt>--zen-color-accent</dt><dd>Primary action</dd></div></div> 117 <div><span class="swatch" style="--zen-color-swatch: var(--zen-color-accent)"></span><div><dt>--zen-color-accent</dt><dd>Primary action</dd></div></div>
103 <div><span class="swatch" style="--swatch: var(--zen-color-info)"></span><div><dt>--zen-color-info</dt><dd>Informational state</dd></div></div> 118 <div><span class="swatch" style="--zen-color-swatch: var(--zen-color-info)"></span><div><dt>--zen-color-info</dt><dd>Informational state</dd></div></div>
104 <div><span class="swatch" style="--swatch: var(--zen-color-success)"></span><div><dt>--zen-color-success</dt><dd>Successful state</dd></div></div> 119 <div><span class="swatch" style="--zen-color-swatch: var(--zen-color-success)"></span><div><dt>--zen-color-success</dt><dd>Successful state</dd></div></div>
105 <div><span class="swatch" style="--swatch: var(--zen-color-danger)"></span><div><dt>--zen-color-danger</dt><dd>Dangerous state</dd></div></div> 120 <div><span class="swatch" style="--zen-color-swatch: var(--zen-color-danger)"></span><div><dt>--zen-color-danger</dt><dd>Dangerous state</dd></div></div>
106 </dl> 121 </dl>
122 </section>
123 <section class="token-group token-group-wide">
124 <h2>Material palette</h2>
125 <p>Warm, quiet colors inspired by paper, natural dye, clay, and wood.</p>
126 <div class="palette-grid">
127 <div><span style="--zen-color-swatch: var(--zen-color-paper)"></span><code>paper</code></div>
128 <div><span style="--zen-color-swatch: var(--zen-color-washi)"></span><code>washi</code></div>
129 <div><span style="--zen-color-swatch: var(--zen-color-linen)"></span><code>linen</code></div>
130 <div><span style="--zen-color-swatch: var(--zen-color-sumi)"></span><code>sumi</code></div>
131 <div><span style="--zen-color-swatch: var(--zen-color-brick)"></span><code>brick</code></div>
132 <div><span style="--zen-color-swatch: var(--zen-color-persimmon)"></span><code>persimmon</code></div>
133 <div><span style="--zen-color-swatch: var(--zen-color-ochre)"></span><code>ochre</code></div>
134 <div><span style="--zen-color-swatch: var(--zen-color-moss)"></span><code>moss</code></div>
135 <div><span style="--zen-color-swatch: var(--zen-color-patina)"></span><code>patina</code></div>
136 <div><span style="--zen-color-swatch: var(--zen-color-indigo)"></span><code>indigo</code></div>
137 <div><span style="--zen-color-swatch: var(--zen-color-plum)"></span><code>plum</code></div>
138 <div><span style="--zen-color-swatch: var(--zen-color-clay)"></span><code>clay</code></div>
139 <div><span style="--zen-color-swatch: var(--zen-color-wood)"></span><code>wood</code></div>
140 </div>
141 </section>
142 <section class="token-group token-group-wide">
143 <h2>Data palette</h2>
144 <p>Ten distinct aliases for charts and categorical comparisons.</p>
145 <div class="data-palette" aria-label="Data color tokens">
146 <span style="--zen-color-swatch: var(--zen-color-data-1)" title="--zen-color-data-1"></span>
147 <span style="--zen-color-swatch: var(--zen-color-data-2)" title="--zen-color-data-2"></span>
148 <span style="--zen-color-swatch: var(--zen-color-data-3)" title="--zen-color-data-3"></span>
149 <span style="--zen-color-swatch: var(--zen-color-data-4)" title="--zen-color-data-4"></span>
150 <span style="--zen-color-swatch: var(--zen-color-data-5)" title="--zen-color-data-5"></span>
151 <span style="--zen-color-swatch: var(--zen-color-data-6)" title="--zen-color-data-6"></span>
152 <span style="--zen-color-swatch: var(--zen-color-data-7)" title="--zen-color-data-7"></span>
153 <span style="--zen-color-swatch: var(--zen-color-data-8)" title="--zen-color-data-8"></span>
154 <span style="--zen-color-swatch: var(--zen-color-data-9)" title="--zen-color-data-9"></span>
155 <span style="--zen-color-swatch: var(--zen-color-data-10)" title="--zen-color-data-10"></span>
156 </div>
157 </section>
158 <section class="token-group">
159 <h2>Color ramps</h2>
160 <zen-stack gap="tight">
161 <code>neutral · red · orange · amber</code>
162 <code>green · teal · blue · violet</code>
163 <code>rose · brown</code>
164 <small>Each ramp includes 50–900 plus 950.</small>
165 </zen-stack>
107 </section> 166 </section>
108 <section class="token-group"> 167 <section class="token-group">
109 <h2>Spacing</h2> 168 <h2>Spacing</h2>
110 <zen-stack gap="tight"> 169 <zen-stack gap="tight">
111 <code>--zen-space-1: 0.25rem</code> 170 <code>--zen-space-1: 0.25rem</code>
122 <code>--zen-radius-lg</code> 181 <code>--zen-radius-lg</code>
123 <code>--zen-shadow-sm / md</code> 182 <code>--zen-shadow-sm / md</code>
124 </zen-stack> 183 </zen-stack>
125 </section> 184 </section>
126 </div> 185 </div>
186 </section>
187
188 <section class="catalog-page" data-catalog-page="icons" hidden>
189 <header class="page-heading">
190 <p class="eyebrow">Foundations</p>
191 <h1>Icons</h1>
192 <p>First-party SVG icons rendered by <code>zen-icon</code>. Icons inherit color and never depend on emoji, fonts, or an external package.</p>
193 </header>
194 <div id="iconGrid" class="icon-grid" aria-label="Zenbu icon names"></div>
127 </section> 195 </section>
128 196
129 <section class="catalog-page" data-catalog-page="button" hidden> 197 <section class="catalog-page" data-catalog-page="button" hidden>
130 <header class="page-heading"> 198 <header class="page-heading">
131 <p class="eyebrow">Component</p> 199 <p class="eyebrow">Component</p>