mirror of
https://github.com/olehomelchenko/astrolabe.git
synced 2026-08-08 02:02:33 +00:00
Add shared Icon primitive and controlled glyph vocabulary (Carbon, filled)
This commit is contained in:
@@ -995,6 +995,45 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ICONS -->
|
||||
<section>
|
||||
<h2>Iconography — Carbon glyphs, fill: currentColor</h2>
|
||||
<div class="cap" style="margin-bottom: var(--space-5)">
|
||||
The controlled vocabulary (arch 09 §5). One glyph per meaning; 16px default, paired
|
||||
to 14px body. Filled (not stroked) — they inherit text colour and theme.
|
||||
</div>
|
||||
<div class="row" style="gap: var(--space-7); flex-wrap: wrap; align-items: flex-start">
|
||||
<span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><polygon points="17.4141 16 24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16"/></svg>
|
||||
<span class="cap">close</span>
|
||||
</span>
|
||||
<span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><path d="M13.5025,5.4136A15.0755,15.0755,0,0,0,25.096,23.6082a11.1134,11.1134,0,0,1-7.9749,3.3893c-.1385,0-.2782.0051-.4178,0A11.0944,11.0944,0,0,1,13.5025,5.4136M14.98,3a1.0024,1.0024,0,0,0-.1746.0156A13.0959,13.0959,0,0,0,16.63,28.9973c.1641.006.3282,0,.4909,0a13.0724,13.0724,0,0,0,10.702-5.5556,1.0094,1.0094,0,0,0-.7833-1.5644A13.08,13.08,0,0,1,15.8892,4.38,1.0149,1.0149,0,0,0,14.98,3Z"/></svg>
|
||||
<span class="cap">moon</span>
|
||||
</span>
|
||||
<span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><rect x="15" y="2" width="2" height="5"/><rect x="21.6675" y="6.8536" width="4.958" height="1.9998" transform="translate(1.5191 19.3744) rotate(-45)"/><rect x="25" y="15" width="5" height="2"/><rect x="23.1466" y="21.6675" width="1.9998" height="4.958" transform="translate(-10.0018 24.1465) rotate(-45)"/><rect x="15" y="25" width="2" height="5"/><rect x="5.3745" y="23.1466" width="4.958" height="1.9998" transform="translate(-14.7739 12.6256) rotate(-45)"/><rect x="2" y="15" width="5" height="2"/><rect x="6.8536" y="5.3745" width="1.9998" height="4.958" transform="translate(-3.253 7.8535) rotate(-45)"/><path d="M16,12a4,4,0,1,1-4,4,4.0045,4.0045,0,0,1,4-4m0-2a6,6,0,1,0,6,6,6,6,0,0,0-6-6Z"/></svg>
|
||||
<span class="cap">sun</span>
|
||||
</span>
|
||||
<span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><rect x="8" y="18" width="4" height="2"/><rect x="14" y="18" width="4" height="2"/><rect x="8" y="14" width="4" height="2"/><rect x="14" y="22" width="4" height="2"/><rect x="20" y="14" width="4" height="2"/><rect x="20" y="22" width="4" height="2"/><path d="M27,3H5A2.0025,2.0025,0,0,0,3,5V27a2.0025,2.0025,0,0,0,2,2H27a2.0025,2.0025,0,0,0,2-2V5A2.0025,2.0025,0,0,0,27,3Zm0,2,0,4H5V5ZM5,27V11H27l0,16Z"/></svg>
|
||||
<span class="cap">dataset</span>
|
||||
</span>
|
||||
<span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><polygon points="17,15 17,8 15,8 15,15 8,15 8,17 15,17 15,24 17,24 17,17 24,17 24,15"/></svg>
|
||||
<span class="cap">add</span>
|
||||
</span>
|
||||
<span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><rect x="12" y="12" width="2" height="12"/><rect x="18" y="12" width="2" height="12"/><path d="M4,6V8H6V28a2,2,0,0,0,2,2H24a2,2,0,0,0,2-2V8h2V6ZM8,28V8H24V28Z"/><rect x="12" y="2" width="8" height="2"/></svg>
|
||||
<span class="cap">delete</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="cap" style="margin-top: var(--space-6)">
|
||||
In context: icon + text is the default; icon-only is the universal/destructive
|
||||
exception. ✕ means close only — delete is the trash glyph.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TABS + STATUS -->
|
||||
<section>
|
||||
<h2>Tabs · status · tags</h2>
|
||||
@@ -1010,19 +1049,8 @@
|
||||
<span class="tag-pill"><span class="dot draft"></span> Draft changes</span>
|
||||
<span class="tag-pill"><span class="dot published"></span> Published</span>
|
||||
<span class="tag-pill">
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<ellipse cx="12" cy="6" rx="8" ry="3" />
|
||||
<path d="M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6" />
|
||||
<path d="M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3" />
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
|
||||
<rect x="8" y="18" width="4" height="2" /><rect x="14" y="18" width="4" height="2" /><rect x="8" y="14" width="4" height="2" /><rect x="14" y="22" width="4" height="2" /><rect x="20" y="14" width="4" height="2" /><rect x="20" y="22" width="4" height="2" /><path d="M27,3H5A2.0025,2.0025,0,0,0,3,5V27a2.0025,2.0025,0,0,0,2,2H27a2.0025,2.0025,0,0,0,2-2V5A2.0025,2.0025,0,0,0,27,3Zm0,2,0,4H5V5ZM5,27V11H27l0,16Z" />
|
||||
</svg>
|
||||
2 datasets
|
||||
</span>
|
||||
@@ -1125,11 +1153,27 @@
|
||||
<!-- TOASTS -->
|
||||
<section>
|
||||
<h2>Toasts</h2>
|
||||
<div class="cap" style="margin-bottom: var(--space-4)">
|
||||
Filled status glyph + colour + text — a non-colour severity channel (arch 09 §5.2 /
|
||||
10 §3). The triangle shape-codes warning apart from the round error/success/info.
|
||||
</div>
|
||||
<div class="stack" style="max-width: 360px">
|
||||
<div class="toast info">Snippet duplicated.</div>
|
||||
<div class="toast success">Published “Quarterly revenue”.</div>
|
||||
<div class="toast warning">Snippet storage is 82% full.</div>
|
||||
<div class="toast error">Could not save — storage is full.</div>
|
||||
<div class="toast info">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor; flex: none; color: var(--support-info)"><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,6a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,8Zm4,16.125H12v-2.25h2.875v-5.75H13v-2.25h4.125v8H20Z"/></svg>
|
||||
Snippet duplicated.
|
||||
</div>
|
||||
<div class="toast success">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor; flex: none; color: var(--support-success)"><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM14,21.5908l-5-5L10.5906,15,14,18.4092,21.41,11l1.5957,1.5859Z"/></svg>
|
||||
Published “Quarterly revenue”.
|
||||
</div>
|
||||
<div class="toast warning">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor; flex: none; color: var(--support-warning-fg, #8a6d00)"><path d="M16.002,6.1714h-.004L4.6487,27.9966,4.6506,28H27.3494l.0019-.0034ZM14.875,12h2.25v9h-2.25ZM16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Z"/></svg>
|
||||
Snippet storage is 82% full.
|
||||
</div>
|
||||
<div class="toast error">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor; flex: none; color: var(--support-error)"><path d="M16,2A13.914,13.914,0,0,0,2,16,13.914,13.914,0,0,0,16,30,13.914,13.914,0,0,0,30,16,13.914,13.914,0,0,0,16,2Zm5.4449,21L9,10.5557,10.5557,9,23,21.4448Z"/></svg>
|
||||
Could not save — storage is full.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user