mirror of
https://github.com/hanzoai/design.git
synced 2026-10-30 14:58:37 +00:00
zooqueen
7ae5daecf5
Depth was three separable parts a component had to remember to compose. It now also has a vocabulary: --sheet-0/1/2 name the workspace, an active tool and what opened, and --shadow-sheet-1/2 carry the top edge-light and the drop as one value — so a surface asks for a level instead of writing its own box-shadow, which is how two panels end up lit from two lamps. The tints are the surface recipes rather than new values, so sheets stack the way paper does. Nothing is restated in .light: every part defers to a token that already flips, and check 4 stops expanding at exactly those. --fold/--fold-face paint a turned-back corner as a background-image on the sheet itself, spent only where an item expands. check-tokens gains the invariant the whole language rests on: every shadow in elevation.css is `0 <y> …`. A sideways offset is invisible per component and only the screen stops making sense.
23 lines
1.8 KiB
HTML
23 lines
1.8 KiB
HTML
<!-- @dsCard group="Brand" viewport="700x240" name="Paper" subtitle="Three sheets, one light, and a fold that means this opens" -->
|
|
<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Paper</title><link rel="stylesheet" href="../styles.css">
|
|
<style>body{margin:0;padding:20px;background:var(--sheet-0);font-family:var(--font-sans);color:var(--foreground)}
|
|
.n{font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
|
|
.v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono);margin-top:3px}
|
|
.sheet{padding:14px;border-radius:var(--radius-lg);font-size:12px;color:var(--neutral-400)}
|
|
.s1{background:var(--sheet-1);box-shadow:var(--shadow-sheet-1)}
|
|
.s2{background:var(--sheet-2);box-shadow:var(--shadow-sheet-2)}
|
|
.fold{background-image:var(--fold-face);border-bottom-right-radius:0}
|
|
</style></head><body>
|
|
<div style="display:flex;gap:16px;align-items:stretch">
|
|
<div class="sheet" style="flex:1">the workspace — no lift, no box<div class="n" style="margin-top:10px">--sheet-0</div><div class="v">the ground</div></div>
|
|
<div class="sheet s1" style="flex:1">an active tool<div class="n" style="margin-top:10px">--sheet-1</div><div class="v">+ --shadow-sheet-1</div></div>
|
|
<div class="sheet s2" style="flex:1">what opened<div class="n" style="margin-top:10px">--sheet-2</div><div class="v">+ --shadow-sheet-2</div></div>
|
|
<div class="sheet s1 fold" style="flex:1">this one expands<div class="n" style="margin-top:10px">--fold-face</div><div class="v">the only mark</div></div>
|
|
</div>
|
|
<div style="margin-top:18px;display:flex;gap:16px">
|
|
<div class="sheet s1" style="flex:1">a sheet on a sheet lands a step lighter
|
|
<div class="sheet s1" style="margin-top:10px">nested<div class="sheet s1" style="margin-top:10px">nested again</div></div>
|
|
</div>
|
|
</div>
|
|
</body></html>
|