@viglet/viglet-design-system 2026.3.4 → 2026.3.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -13
- package/dist/bento/bento-panel.d.ts +35 -0
- package/dist/bento/bento-panel.d.ts.map +1 -0
- package/dist/bento/index.d.ts +1 -0
- package/dist/bento/index.d.ts.map +1 -1
- package/dist/bento.cjs +1 -1
- package/dist/bento.es.js +42 -31
- package/dist/components/login/login.d.ts.map +1 -1
- package/dist/exports.json +3 -1
- package/dist/index.cjs +1 -1
- package/dist/index.es.js +1 -1
- package/dist/preset.css +71 -26
- package/dist/viglet-design-system.css +1 -1
- package/dist/vite/boot-loader.d.ts +4 -2
- package/dist/vite/boot-loader.d.ts.map +1 -1
- package/docs/BENTO-AUTHORING.md +225 -0
- package/docs/BENTO-BOUNDARY.md +114 -0
- package/docs/reference/README.md +46 -0
- package/docs/reference/canvas.json +108 -0
- package/docs/reference/detail.dc.html +167 -0
- package/docs/reference/form-hero.dc.html +135 -0
- package/docs/reference/grounds.dc.html +140 -0
- package/docs/reference/list.dc.html +147 -0
- package/docs/reference/page-anatomy.dc.html +173 -0
- package/docs/reference/panel.dc.html +119 -0
- package/docs/reference/primary.dc.html +132 -0
- package/docs/reference/reading-column.dc.html +116 -0
- package/docs/reference/shell.dc.html +133 -0
- package/package.json +9 -4
- package/scripts/check-duplicates.mjs +12 -1
- package/scripts/page-reference.mjs +298 -0
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<script src="./support.js"></script>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<x-dc>
|
|
9
|
+
<helmet>
|
|
10
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700&display=swap">
|
|
11
|
+
<style>
|
|
12
|
+
body { margin: 0; background: #ffffff; }
|
|
13
|
+
/* Opened straight from the file tree, `x-dc` is an unknown element and so
|
|
14
|
+
lays out inline, and `helmet` would render its own contents as text. The
|
|
15
|
+
canvas runtime replaces both; these two rules only matter for the raw
|
|
16
|
+
open, which is how a reader in this repository will look at it. */
|
|
17
|
+
x-dc { display: block; }
|
|
18
|
+
helmet { display: none; }
|
|
19
|
+
a { color: #1447e6; text-decoration: none; }
|
|
20
|
+
a:hover { color: #193cb8; }
|
|
21
|
+
.vg { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
|
|
22
|
+
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
|
|
23
|
+
.eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; }
|
|
24
|
+
.glass { background: rgba(255,255,255,0.72); border: 1px solid rgba(229,229,229,0.7); }
|
|
25
|
+
/* One label per row of the gutter, so no two can ever land on each other. */
|
|
26
|
+
.lab { position: absolute; right: 0; display: flex; align-items: center; gap: 7px; justify-content: flex-end; width: 100%; }
|
|
27
|
+
.lab b { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
|
|
28
|
+
.lab i { font-style: normal; font-size: 9.5px; color: #a1a1a1; white-space: nowrap; }
|
|
29
|
+
.lead { height: 1px; width: 22px; flex: 0 0 auto; }
|
|
30
|
+
.dot { width: 8px; height: 8px; border-radius: 3px; flex: 0 0 auto; display: inline-block; }
|
|
31
|
+
.note { border-radius: 12px; padding: 11px 13px; }
|
|
32
|
+
</style>
|
|
33
|
+
</helmet>
|
|
34
|
+
|
|
35
|
+
<div class="vg" style="position:relative;width:1400px;height:980px;background:#fafafa;color:#0a0a0a;overflow:hidden;display:flex;flex-direction:column">
|
|
36
|
+
|
|
37
|
+
<div style="padding:16px 26px 0">
|
|
38
|
+
<div class="eyebrow" style="color:#1447e6">REFERENCE</div>
|
|
39
|
+
<div style="display:flex;align-items:baseline;gap:12px;margin-top:4px">
|
|
40
|
+
<div style="font-size:21px;font-weight:600;letter-spacing:-0.015em">The page's regions, and who owns each</div>
|
|
41
|
+
<div style="font-size:12.5px;color:#737373">Every region is owned once. Nearly all the divergence between two products is an argument about which.</div>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<!-- diagram: a label gutter, then the page -->
|
|
46
|
+
<div style="margin:14px 26px 0;display:flex;gap:0;height:620px">
|
|
47
|
+
|
|
48
|
+
<!-- the gutter. one row per label. -->
|
|
49
|
+
<div style="position:relative;width:168px;flex:0 0 auto">
|
|
50
|
+
<div class="lab" style="top:26px"><b style="color:#1447e6">SHELL · HEADER</b><i>80px</i><span class="lead" style="background:#1447e6"></span></div>
|
|
51
|
+
<div class="lab" style="top:132px"><b style="color:#1447e6">SHELL · NAV</b><i>64px, fixed</i><span class="lead" style="background:#1447e6"></span></div>
|
|
52
|
+
<div class="lab" style="top:186px"><b style="color:#1447e6">SHELL · COLUMN</b><i>set once</i><span class="lead" style="background:#1447e6"></span></div>
|
|
53
|
+
<div class="lab" style="top:250px"><b style="color:#7f22fe">PAGE · ASIDE</b><i>optional</i><span class="lead" style="background:#7f22fe"></span></div>
|
|
54
|
+
<div class="lab" style="top:304px"><b style="color:#7f22fe">PAGE · CONTENT</b><span class="lead" style="background:#7f22fe"></span></div>
|
|
55
|
+
<div class="lab" style="top:556px"><b style="color:#c10007">FOOTER</b><i>undecided</i><span class="lead" style="background:#fb2c36"></span></div>
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
<!-- the page -->
|
|
59
|
+
<div style="position:relative;flex:1;min-width:0;border-radius:14px;background:#ffffff;border:1px solid #e5e5e5;overflow:hidden;box-shadow:0 24px 50px -38px rgba(0,0,0,0.4)">
|
|
60
|
+
|
|
61
|
+
<!-- header, 80px -->
|
|
62
|
+
<div style="position:absolute;left:0;right:0;top:0;height:80px;z-index:4;display:flex;align-items:center;gap:10px;padding:0 18px;background:rgba(20,71,230,0.05);border-bottom:1px solid rgba(229,229,229,0.7)">
|
|
63
|
+
<div style="display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background-image:linear-gradient(to bottom right,#155dfc,#4f39f6);color:#ffffff"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M5 12h14M12 5v14"></path></svg></div>
|
|
64
|
+
<div style="font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:15px;font-weight:600;letter-spacing:-0.015em">Product</div>
|
|
65
|
+
<div style="display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid #e5e5e5;border-radius:8px;background:#ffffff;color:#525252;margin-left:6px"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M14 6l-6 6 6 6"></path></svg></div>
|
|
66
|
+
<div style="display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;margin-left:8px;border:1px solid #e5e5e5;border-radius:10px;background:#ffffff;width:200px">
|
|
67
|
+
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#737373" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.4-4.4"></path></svg>
|
|
68
|
+
<span style="font-size:11.5px;color:#737373;flex:1">Search</span>
|
|
69
|
+
<span class="mono" style="font-size:9.5px;color:#a1a1a1">Ctrl K</span>
|
|
70
|
+
</div>
|
|
71
|
+
<div style="flex:1"></div>
|
|
72
|
+
<span class="dot" style="background:#009966"></span>
|
|
73
|
+
<div style="display:inline-flex;align-items:center;height:26px;padding:0 9px;border:1px solid rgba(0,153,102,0.5);border-radius:8px;font-size:10.5px;color:#007a55;font-weight:600">Tenant</div>
|
|
74
|
+
<div style="display:inline-flex;align-items:center;height:26px;padding:0 8px;border:1px solid #e5e5e5;border-radius:8px;background:#ffffff;font-size:10.5px;color:#525252">EN</div>
|
|
75
|
+
<div style="display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid #e5e5e5;border-radius:8px;background:#ffffff;color:#525252"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><circle cx="12" cy="12" r="4"></circle><path d="M12 3v2M12 19v2M3 12h2M19 12h2"></path></svg></div>
|
|
76
|
+
<span class="dot" style="background:#009966"></span>
|
|
77
|
+
<div style="width:28px;height:28px;border-radius:999px;background-image:linear-gradient(to bottom right,#155dfc,#4f39f6)"></div>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<!-- rail, 64px -->
|
|
81
|
+
<div style="position:absolute;left:0;top:80px;bottom:0;width:64px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 0;background:rgba(20,71,230,0.05);border-right:1px solid rgba(229,229,229,0.7)">
|
|
82
|
+
<div style="display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;border:1px solid rgba(23,23,23,0.4);background:rgba(23,23,23,0.09);color:#171717"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M4 11.5 12 5l8 6.5"></path><path d="M6 10.5V19h12v-8.5"></path></svg></div>
|
|
83
|
+
<div style="width:38px;height:38px;border-radius:12px;background:#f0f0f0"></div>
|
|
84
|
+
<div style="width:38px;height:38px;border-radius:12px;background:#f0f0f0"></div>
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<!-- everything the shell hands to a page -->
|
|
88
|
+
<div style="position:absolute;left:64px;right:0;top:80px;bottom:0;display:flex;flex-direction:column">
|
|
89
|
+
<div style="flex:1;min-height:0;display:flex;justify-content:center;padding:0 28px">
|
|
90
|
+
<!-- the column: one max-width, one pair of gutters, set here -->
|
|
91
|
+
<div style="width:100%;max-width:940px;border-left:1px dashed rgba(20,71,230,0.5);border-right:1px dashed rgba(20,71,230,0.5);padding:22px 22px 0;display:flex;gap:16px;min-height:0">
|
|
92
|
+
|
|
93
|
+
<!-- a page's aside -->
|
|
94
|
+
<div style="width:190px;flex:0 0 auto;border-radius:20px;background:rgba(127,34,254,0.05);border:1px solid rgba(127,34,254,0.28);padding:12px;display:flex;flex-direction:column;gap:8px">
|
|
95
|
+
<div style="font-size:9.5px;font-weight:700;letter-spacing:0.06em;color:#7f22fe">FILTERS</div>
|
|
96
|
+
<div style="height:26px;border-radius:8px;background:rgba(127,34,254,0.14)"></div>
|
|
97
|
+
<div style="height:26px;border-radius:8px;background:#f2f2f2"></div>
|
|
98
|
+
<div style="height:26px;border-radius:8px;background:#f2f2f2"></div>
|
|
99
|
+
<div style="flex:1"></div>
|
|
100
|
+
<div class="mono" style="font-size:9px;color:#7f22fe;line-height:1.4">scrolls with the page,<br>not beside the rail</div>
|
|
101
|
+
</div>
|
|
102
|
+
|
|
103
|
+
<!-- the content -->
|
|
104
|
+
<div style="flex:1;min-width:0">
|
|
105
|
+
<div style="height:11px;width:120px;border-radius:999px;background:#ededed;margin-bottom:9px"></div>
|
|
106
|
+
<div style="height:22px;width:260px;border-radius:8px;background:#e6e6e6;margin-bottom:16px"></div>
|
|
107
|
+
<div style="display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:12px">
|
|
108
|
+
<div class="glass" style="grid-column:span 2;border-radius:24px;height:104px"></div>
|
|
109
|
+
<div class="glass" style="grid-column:span 2;border-radius:24px;height:104px"></div>
|
|
110
|
+
<div class="glass" style="grid-column:span 2;border-radius:24px;height:88px"></div>
|
|
111
|
+
<div class="glass" style="grid-column:span 2;border-radius:24px;height:88px"></div>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<!-- the footer region, drawn as absent -->
|
|
118
|
+
<div style="flex:0 0 auto;margin:0 28px 16px;border-top:1px dashed #fb2c36;padding-top:12px;display:flex;align-items:center;justify-content:center;gap:9px">
|
|
119
|
+
<div style="width:16px;height:16px;border-radius:5px;background:#ededed"></div>
|
|
120
|
+
<span style="font-size:11px;color:#bdbdbd">Product 2026.3</span>
|
|
121
|
+
<span style="font-size:11px;color:#e0e0e0">·</span>
|
|
122
|
+
<span style="font-size:10.5px;color:#cfcfcf">Link</span>
|
|
123
|
+
<span style="font-size:11px;color:#e0e0e0">·</span>
|
|
124
|
+
<span style="font-size:10.5px;color:#cfcfcf">Link</span>
|
|
125
|
+
<span class="mono" style="font-size:9px;color:#c10007;margin-left:10px">no bento shell mounts one</span>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
<!-- legend and the notes -->
|
|
132
|
+
<div style="margin:16px 26px 18px;display:grid;grid-template-columns:212px 292px 1fr 1fr;gap:16px;align-items:stretch">
|
|
133
|
+
|
|
134
|
+
<div class="note" style="border:1px solid #e5e5e5;background:#ffffff">
|
|
135
|
+
<div class="eyebrow" style="color:#737373;margin-bottom:8px">WHO OWNS A REGION</div>
|
|
136
|
+
<div style="display:flex;flex-direction:column;gap:7px;font-size:11px;color:#404040">
|
|
137
|
+
<div style="display:flex;align-items:center;gap:7px"><span class="dot" style="background:#1447e6"></span><strong>Shell</strong> — once, for all</div>
|
|
138
|
+
<div style="display:flex;align-items:center;gap:7px"><span class="dot" style="background:#7f22fe"></span><strong>Page</strong> — inside the column</div>
|
|
139
|
+
<div style="display:flex;align-items:center;gap:7px"><span class="dot" style="background:#009966"></span><strong>Product</strong> — passed as a prop</div>
|
|
140
|
+
<div style="display:flex;align-items:center;gap:7px"><span class="dot" style="background:#ffffff;border:1px dashed #fb2c36"></span><strong>Undecided</strong></div>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
<div class="note" style="border:1px solid rgba(0,153,102,0.35);background:rgba(0,153,102,0.05)">
|
|
145
|
+
<div class="eyebrow" style="color:#007a55;margin-bottom:7px">THE SIGNED-IN USER</div>
|
|
146
|
+
<div style="border-radius:14px;background:#ffffff;border:1px solid rgba(229,229,229,0.9);overflow:hidden;margin-bottom:7px">
|
|
147
|
+
<div style="display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid #f0f0f0">
|
|
148
|
+
<div style="width:26px;height:26px;border-radius:999px;background-image:linear-gradient(to bottom right,#155dfc,#4f39f6)"></div>
|
|
149
|
+
<div style="font-size:11px;font-weight:600">Display name</div>
|
|
150
|
+
</div>
|
|
151
|
+
<div style="padding:5px 6px">
|
|
152
|
+
<div style="display:flex;align-items:center;gap:7px;padding:5px 7px;font-size:10.5px;color:#404040"><span class="mono" style="font-size:9px;color:#007a55">accountRoute</span>Account</div>
|
|
153
|
+
<div style="display:flex;align-items:center;gap:7px;padding:5px 7px;font-size:10.5px;color:#c10007"><span class="mono" style="font-size:9px;color:#007a55">logoutUrl</span>Sign out</div>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
<div style="font-size:10.5px;color:#404040;line-height:1.45">Two routes, no default for either. Anything past them — a tenant, a review count — is the product's.</div>
|
|
157
|
+
</div>
|
|
158
|
+
|
|
159
|
+
<div class="note" style="border:1px solid rgba(254,154,0,0.45);background:rgba(254,154,0,0.07)">
|
|
160
|
+
<div class="eyebrow" style="color:#973c00;margin-bottom:4px">THE FOOTER IS THE REGION NOBODY DECIDED</div>
|
|
161
|
+
<div style="font-size:11.5px;color:#404040;line-height:1.5"><span class="mono" style="font-size:11px">AppFooter</span> is exported — a hairline, then the product name, its version and a few links — and it is written <span class="mono" style="font-size:11px">mt-auto</span>, so it expects a shell that is a flex column with the main growing. No bento shell mounts one. Either the shell carries a footer for every page or the chrome has none; what must not happen is one page growing its own.</div>
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
<div class="note" style="border:1px solid rgba(127,34,254,0.35);background:rgba(127,34,254,0.06)">
|
|
165
|
+
<div class="eyebrow" style="color:#7f22fe;margin-bottom:4px">TWO THINGS CALLED A SIDEBAR</div>
|
|
166
|
+
<div style="font-size:11.5px;color:#404040;line-height:1.5">The console era's collapses, remembers its width and pushes content, so it needs a provider. The rail does none of that: fixed, one width, hidden below <span class="mono" style="font-size:11px">md</span>. "No sidebar provider" is about the <em>shell</em> — a page that needs a secondary column still has one, inside the reading column, owned by that page and scrolling with it.</div>
|
|
167
|
+
</div>
|
|
168
|
+
</div>
|
|
169
|
+
|
|
170
|
+
</div>
|
|
171
|
+
</x-dc>
|
|
172
|
+
</body>
|
|
173
|
+
</html>
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<script src="./support.js"></script>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<x-dc>
|
|
9
|
+
<helmet>
|
|
10
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
|
|
11
|
+
<style>
|
|
12
|
+
body { margin: 0; background: #ffffff; }
|
|
13
|
+
/* Opened straight from the file tree, `x-dc` is an unknown element and so
|
|
14
|
+
lays out inline, and `helmet` would render its own contents as text. The
|
|
15
|
+
canvas runtime replaces both; these two rules only matter for the raw
|
|
16
|
+
open, which is how a reader in this repository will look at it. */
|
|
17
|
+
x-dc { display: block; }
|
|
18
|
+
helmet { display: none; }
|
|
19
|
+
a { color: #1447e6; text-decoration: none; }
|
|
20
|
+
a:hover { color: #193cb8; }
|
|
21
|
+
.vg { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
|
|
22
|
+
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
|
|
23
|
+
.eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; }
|
|
24
|
+
.glass { background: rgba(255,255,255,0.72); border: 1px solid rgba(229,229,229,0.7); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); border-radius: 24px; }
|
|
25
|
+
.slot { position: absolute; font-size: 9px; padding: 0 5px; background: #ffffff; }
|
|
26
|
+
.trow { display: grid; grid-template-columns: 1fr 90px 70px; gap: 10px; align-items: center; padding: 7px 14px; border-bottom: 1px solid #f4f4f4; font-size: 11px; }
|
|
27
|
+
</style>
|
|
28
|
+
</helmet>
|
|
29
|
+
|
|
30
|
+
<div class="vg" style="position:relative;width:1080px;height:680px;background:#fafafa;color:#0a0a0a;overflow:hidden;display:flex;flex-direction:column">
|
|
31
|
+
|
|
32
|
+
<div style="padding:16px 24px 0">
|
|
33
|
+
<div class="eyebrow" style="color:#1447e6">REFERENCE</div>
|
|
34
|
+
<div style="display:flex;align-items:baseline;gap:12px;margin-top:4px">
|
|
35
|
+
<div style="font-size:21px;font-weight:600;letter-spacing:-0.015em">The panel, and why it has no heading</div>
|
|
36
|
+
<div style="font-size:12.5px;color:#737373">A frosted box with arbitrary content. Three of them, and the same component each time.</div>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<div style="flex:1;min-height:0;display:grid;grid-template-columns:1fr 320px;gap:20px;padding:14px 24px 0">
|
|
41
|
+
|
|
42
|
+
<div style="border-radius:14px;background:#ffffff;border:1px solid #e5e5e5;padding:16px;overflow:hidden;display:flex;flex-direction:column;gap:13px">
|
|
43
|
+
|
|
44
|
+
<!-- the hero already names the page -->
|
|
45
|
+
<div style="display:flex;align-items:baseline;gap:10px">
|
|
46
|
+
<div style="font-size:17px;font-weight:600;letter-spacing:-0.015em">Page title</div>
|
|
47
|
+
<div class="mono" style="font-size:9.5px;color:#1447e6">the hero already named it -- h1</div>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<!-- a stats strip, py default -->
|
|
51
|
+
<div style="position:relative">
|
|
52
|
+
<div class="glass" style="padding:14px;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:14px">
|
|
53
|
+
<div><div style="font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1">128</div><div style="font-size:10.5px;color:#737373;margin-top:2px">Label</div></div>
|
|
54
|
+
<div><div style="font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1">94</div><div style="font-size:10.5px;color:#737373;margin-top:2px">Label</div></div>
|
|
55
|
+
<div><div style="font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1">6</div><div style="font-size:10.5px;color:#737373;margin-top:2px">Label</div></div>
|
|
56
|
+
<div><div style="font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1">2</div><div style="font-size:10.5px;color:#737373;margin-top:2px">Label</div></div>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="slot mono" style="right:10px;top:-7px;color:#737373">a stats strip</div>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<!-- a toolbar, py-2 -->
|
|
62
|
+
<div style="position:relative">
|
|
63
|
+
<div class="glass" style="padding:8px 12px;display:flex;align-items:center;gap:8px">
|
|
64
|
+
<div style="display:flex;align-items:center;gap:7px;height:28px;padding:0 10px;border:1px solid #e5e5e5;border-radius:10px;background:#ffffff;flex:1;max-width:230px">
|
|
65
|
+
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#737373" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.4-4.4"></path></svg>
|
|
66
|
+
<span style="font-size:11.5px;color:#737373">Filter</span>
|
|
67
|
+
</div>
|
|
68
|
+
<div style="display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:8px;background:#171717;color:#fafafa;font-size:11px;font-weight:500">All</div>
|
|
69
|
+
<div style="display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:8px;border:1px solid #e5e5e5;color:#525252;font-size:11px">Subset</div>
|
|
70
|
+
<div style="flex:1"></div>
|
|
71
|
+
<span class="mono" style="font-size:10px;color:#a1a1a1">contentClassName py-2</span>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="slot mono" style="right:10px;top:-7px;color:#737373">a toolbar</div>
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
<!-- a table, p-0 -->
|
|
77
|
+
<div style="position:relative;flex:1;min-height:0">
|
|
78
|
+
<div class="glass" style="overflow:hidden;height:100%">
|
|
79
|
+
<div class="trow" style="background:rgba(245,245,245,0.6);font-size:9.5px;font-weight:600;letter-spacing:0.06em;color:#737373"><div>COLUMN</div><div>COLUMN</div><div>COLUMN</div></div>
|
|
80
|
+
<div class="trow"><div>Row</div><div style="color:#737373">Value</div><div style="color:#737373">Value</div></div>
|
|
81
|
+
<div class="trow"><div>Row</div><div style="color:#737373">Value</div><div style="color:#737373">Value</div></div>
|
|
82
|
+
<div class="trow"><div>Row</div><div style="color:#737373">Value</div><div style="color:#737373">Value</div></div>
|
|
83
|
+
<div class="trow" style="border-bottom:none"><div>Row</div><div style="color:#737373">Value</div><div style="color:#737373">Value</div></div>
|
|
84
|
+
</div>
|
|
85
|
+
<div class="slot mono" style="right:10px;top:-7px;color:#737373">a listing -- contentClassName p-0</div>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<!-- rules -->
|
|
90
|
+
<div style="display:flex;flex-direction:column;gap:11px;min-height:0">
|
|
91
|
+
<div style="border:1px solid #e5e5e5;background:#ffffff;border-radius:14px;padding:13px">
|
|
92
|
+
<div class="eyebrow" style="color:#737373;margin-bottom:6px">NO HEADING, ON PURPOSE</div>
|
|
93
|
+
<div style="font-size:11.5px;color:#404040;line-height:1.5">These surfaces sit under a hero that already names the page. A heading on them is noise, and it also puts a section in the document outline the page does not have.</div>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<div style="border:1px solid #e5e5e5;background:#ffffff;border-radius:14px;padding:13px">
|
|
97
|
+
<div class="eyebrow" style="color:#737373;margin-bottom:6px">TWO CLASS SLOTS, NO PADDING OF ITS OWN</div>
|
|
98
|
+
<div style="font-size:11.5px;color:#404040;line-height:1.5"><span class="mono" style="font-size:11px">className</span> on the frosted container and <span class="mono" style="font-size:11px">contentClassName</span> on the inner wrapper. A table wants <span class="mono" style="font-size:11px">p-0</span>; a toolbar wants <span class="mono" style="font-size:11px">py-2</span>. That is why the padding is yours.</div>
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
<div style="border:1px solid rgba(251,44,54,0.3);background:rgba(251,44,54,0.05);border-radius:14px;padding:13px">
|
|
102
|
+
<div class="eyebrow" style="color:#c10007;margin-bottom:5px">NEVER HAND-ROLL IT</div>
|
|
103
|
+
<div style="font-size:11.5px;color:#404040;line-height:1.5">The moment two call sites pick different radii, the product is inconsistent for a reason no diff shows -- one file says 24 and another says 16 and neither is wrong on its own.</div>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
<div style="flex:1"></div>
|
|
107
|
+
|
|
108
|
+
<div style="border:1px solid #e5e5e5;background:#ffffff;border-radius:14px;padding:13px">
|
|
109
|
+
<div class="eyebrow" style="color:#737373;margin-bottom:5px">WHERE THE HEADING DOES BELONG</div>
|
|
110
|
+
<div style="font-size:11.5px;color:#404040;line-height:1.5">In a form, where a group of fields is a named thing. That component is the form section, and its heading is an <span class="mono" style="font-size:11px">h2</span> under the hero's <span class="mono" style="font-size:11px">h1</span>.</div>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
|
|
115
|
+
<div style="height:18px"></div>
|
|
116
|
+
</div>
|
|
117
|
+
</x-dc>
|
|
118
|
+
</body>
|
|
119
|
+
</html>
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<script src="./support.js"></script>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<x-dc>
|
|
9
|
+
<helmet>
|
|
10
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
|
|
11
|
+
<style>
|
|
12
|
+
body { margin: 0; background: #ffffff; }
|
|
13
|
+
/* Opened straight from the file tree, `x-dc` is an unknown element and so
|
|
14
|
+
lays out inline, and `helmet` would render its own contents as text. The
|
|
15
|
+
canvas runtime replaces both; these two rules only matter for the raw
|
|
16
|
+
open, which is how a reader in this repository will look at it. */
|
|
17
|
+
x-dc { display: block; }
|
|
18
|
+
helmet { display: none; }
|
|
19
|
+
a { color: #1447e6; text-decoration: none; }
|
|
20
|
+
a:hover { color: #193cb8; }
|
|
21
|
+
.vg { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
|
|
22
|
+
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
|
|
23
|
+
.eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; }
|
|
24
|
+
.surface { border: 1px solid #ededed; border-radius: 12px; padding: 12px; background: #ffffff; }
|
|
25
|
+
.slabel { font-size: 10px; color: #737373; margin-bottom: 9px; }
|
|
26
|
+
</style>
|
|
27
|
+
</helmet>
|
|
28
|
+
|
|
29
|
+
<div class="vg" style="position:relative;width:1080px;height:640px;background:#fafafa;color:#0a0a0a;overflow:hidden;display:flex;flex-direction:column">
|
|
30
|
+
|
|
31
|
+
<div style="padding:16px 24px 0">
|
|
32
|
+
<div class="eyebrow" style="color:#1447e6">REFERENCE</div>
|
|
33
|
+
<div style="display:flex;align-items:baseline;gap:12px;margin-top:4px">
|
|
34
|
+
<div style="font-size:21px;font-weight:600;letter-spacing:-0.015em">What <span class="mono" style="font-size:18px">--primary</span> reaches</div>
|
|
35
|
+
<div style="font-size:12.5px;color:#737373">Four surfaces, and the accent tokens reach none of them.</div>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
<div style="flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:14px 24px 0">
|
|
40
|
+
|
|
41
|
+
<!-- not claimed -->
|
|
42
|
+
<div style="border-radius:14px;background:#ffffff;border:1px solid #e5e5e5;padding:14px;display:flex;flex-direction:column;gap:11px">
|
|
43
|
+
<div style="display:flex;align-items:center;gap:9px">
|
|
44
|
+
<span style="display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;border:1px solid #e5e5e5;background:#fafafa;color:#525252;font-size:11px;font-weight:600"><span style="width:5px;height:5px;border-radius:999px;background:#a1a1a1"></span>not claimed</span>
|
|
45
|
+
<span class="mono" style="font-size:10.5px;color:#737373">the preset's neutral</span>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<div class="surface">
|
|
49
|
+
<div class="slabel">the rail's active item</div>
|
|
50
|
+
<div style="display:flex;gap:6px">
|
|
51
|
+
<div style="display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;border:1px solid rgba(23,23,23,0.4);background:rgba(23,23,23,0.09);color:#171717"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><rect x="4" y="4" width="7" height="7" rx="2"></rect><rect x="13" y="4" width="7" height="7" rx="2"></rect><rect x="4" y="13" width="7" height="7" rx="2"></rect></svg></div>
|
|
52
|
+
<div style="display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;color:#737373"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M9 6h11M9 12h11M9 18h11"></path></svg></div>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
<div class="surface">
|
|
57
|
+
<div class="slabel">a tile, hovered</div>
|
|
58
|
+
<div style="height:52px;border-radius:24px;background:rgba(255,255,255,0.72);border:1px solid rgba(229,229,229,0.7);box-shadow:0 18px 40px -18px rgba(23,23,23,0.4),0 4px 12px -4px rgba(0,0,0,0.08);transform:translateY(-3px)"></div>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<div class="surface">
|
|
62
|
+
<div class="slabel">a field being edited in place</div>
|
|
63
|
+
<div style="height:32px;border-radius:10px;border:1px solid rgba(23,23,23,0.6);background:#ffffff"></div>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<div class="surface">
|
|
67
|
+
<div class="slabel">the default Button</div>
|
|
68
|
+
<div style="display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:10px;background:#171717;color:#fafafa;font-size:13px;font-weight:500">Save changes</div>
|
|
69
|
+
<div class="mono" style="font-size:10px;color:#737373;margin-top:7px">white on #171717 -- 17.4:1</div>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<div style="flex:1"></div>
|
|
73
|
+
<div style="font-size:11px;color:#404040;line-height:1.45">Nothing is broken and nothing says the product's name. This is what a console looks like when it keyed the accent and stopped.</div>
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
<!-- claimed -->
|
|
77
|
+
<div style="border-radius:14px;background:#ffffff;border:1px solid rgba(20,71,230,0.35);padding:14px;display:flex;flex-direction:column;gap:11px">
|
|
78
|
+
<div style="display:flex;align-items:center;gap:9px">
|
|
79
|
+
<span style="display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;border:1px solid rgba(20,71,230,0.4);background:rgba(20,71,230,0.08);color:#1447e6;font-size:11px;font-weight:600"><span style="width:5px;height:5px;border-radius:999px;background:#1447e6"></span>claimed</span>
|
|
80
|
+
<span class="mono" style="font-size:10.5px;color:#737373">the same four surfaces</span>
|
|
81
|
+
</div>
|
|
82
|
+
|
|
83
|
+
<div class="surface">
|
|
84
|
+
<div class="slabel">the rail's active item</div>
|
|
85
|
+
<div style="display:flex;gap:6px">
|
|
86
|
+
<div style="display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;border:1px solid rgba(20,71,230,0.4);background:rgba(20,71,230,0.15);color:#1447e6"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><rect x="4" y="4" width="7" height="7" rx="2"></rect><rect x="13" y="4" width="7" height="7" rx="2"></rect><rect x="4" y="13" width="7" height="7" rx="2"></rect></svg></div>
|
|
87
|
+
<div style="display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;color:#737373"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M9 6h11M9 12h11M9 18h11"></path></svg></div>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<div class="surface">
|
|
92
|
+
<div class="slabel">a tile, hovered</div>
|
|
93
|
+
<div style="height:52px;border-radius:24px;background:rgba(255,255,255,0.72);border:1px solid rgba(229,229,229,0.7);box-shadow:0 18px 40px -18px rgba(20,71,230,0.4),0 4px 12px -4px rgba(0,0,0,0.08);transform:translateY(-3px)"></div>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<div class="surface">
|
|
97
|
+
<div class="slabel">a field being edited in place</div>
|
|
98
|
+
<div style="height:32px;border-radius:10px;border:1px solid rgba(20,71,230,0.6);background:#ffffff"></div>
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
<div class="surface">
|
|
102
|
+
<div class="slabel">the default Button</div>
|
|
103
|
+
<div style="display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:10px;background:#1447e6;color:#ffffff;font-size:13px;font-weight:500">Save changes</div>
|
|
104
|
+
<div class="mono" style="font-size:10px;color:#737373;margin-top:7px">white on #1447e6 -- 6.8:1, and 6.8:1 on dark too</div>
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
<div style="flex:1"></div>
|
|
108
|
+
<div style="font-size:11px;color:#404040;line-height:1.45">The same layer, the same components, one token claimed. Nothing here was forked to get it.</div>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
|
|
112
|
+
<div style="margin:14px 24px 18px;border:1px solid #e5e5e5;background:#ffffff;border-radius:12px;padding:12px 14px;display:flex;gap:18px;align-items:flex-start">
|
|
113
|
+
<div style="flex:0 0 auto">
|
|
114
|
+
<div class="eyebrow" style="color:#737373;margin-bottom:6px">HOW</div>
|
|
115
|
+
<div class="mono" style="font-size:10.5px;line-height:1.7;color:#404040;background:#fafafa;border:1px solid #f0f0f0;border-radius:10px;padding:9px 11px">:root {
|
|
116
|
+
--vg-primary-base: …;
|
|
117
|
+
--vg-primary-base-dark: …;
|
|
118
|
+
--vg-primary-foreground-base: …;
|
|
119
|
+
--vg-primary-foreground-base-dark: …;
|
|
120
|
+
}</div>
|
|
121
|
+
</div>
|
|
122
|
+
<div style="flex:1">
|
|
123
|
+
<div class="eyebrow" style="color:#c10007;margin-bottom:4px">NOT BY SETTING --VG-PRIMARY</div>
|
|
124
|
+
<div style="font-size:12px;color:#404040;line-height:1.5">A consumer stylesheet imports the preset and then declares its own <span class="mono" style="font-size:11px">:root</span>, which lands after the dark block at the same specificity and in no layer. One value set there wins on <em>both</em> grounds, and the dark ground silently takes the light value. The inputs are read per ground, so a product never writes a dark block -- the same shape the accent uses for <span class="mono" style="font-size:11px">-text-dark</span>.</div>
|
|
125
|
+
<div style="font-size:12px;color:#404040;line-height:1.5;margin-top:6px">The fill carries text, so keep that pair at 4.5:1 on both grounds. A gradient stop at full chroma usually will not; the value is a deeper step than the chip is drawn with.</div>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
</div>
|
|
130
|
+
</x-dc>
|
|
131
|
+
</body>
|
|
132
|
+
</html>
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<script src="./support.js"></script>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<x-dc>
|
|
9
|
+
<helmet>
|
|
10
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
|
|
11
|
+
<style>
|
|
12
|
+
body { margin: 0; background: #ffffff; }
|
|
13
|
+
/* Opened straight from the file tree, `x-dc` is an unknown element and so
|
|
14
|
+
lays out inline, and `helmet` would render its own contents as text. The
|
|
15
|
+
canvas runtime replaces both; these two rules only matter for the raw
|
|
16
|
+
open, which is how a reader in this repository will look at it. */
|
|
17
|
+
x-dc { display: block; }
|
|
18
|
+
helmet { display: none; }
|
|
19
|
+
a { color: #1447e6; text-decoration: none; }
|
|
20
|
+
a:hover { color: #193cb8; }
|
|
21
|
+
.vg { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
|
|
22
|
+
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
|
|
23
|
+
.eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; }
|
|
24
|
+
.bar { border-radius: 999px; background: #ededed; }
|
|
25
|
+
.page { position: relative; background: #ffffff; border: 1px solid #ededed; border-radius: 10px; height: 116px; overflow: hidden; }
|
|
26
|
+
.glabel { position: absolute; bottom: 5px; font-size: 9px; }
|
|
27
|
+
</style>
|
|
28
|
+
</helmet>
|
|
29
|
+
|
|
30
|
+
<div class="vg" style="position:relative;width:1280px;height:720px;background:#fafafa;color:#0a0a0a;overflow:hidden;display:flex;flex-direction:column">
|
|
31
|
+
|
|
32
|
+
<div style="padding:16px 24px 0">
|
|
33
|
+
<div class="eyebrow" style="color:#1447e6">REFERENCE</div>
|
|
34
|
+
<div style="display:flex;align-items:baseline;gap:12px;margin-top:4px">
|
|
35
|
+
<div style="font-size:21px;font-weight:600;letter-spacing:-0.015em">Who owns the reading column</div>
|
|
36
|
+
<div style="font-size:12.5px;color:#737373">Three pages of one product, drawn twice. The only difference is where the measure is set.</div>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<div style="flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:16px 24px 0">
|
|
41
|
+
|
|
42
|
+
<!-- shell-owned -->
|
|
43
|
+
<div style="display:flex;flex-direction:column;gap:10px;min-height:0">
|
|
44
|
+
<div style="display:flex;align-items:center;gap:9px">
|
|
45
|
+
<span style="display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;border:1px solid rgba(0,188,125,0.4);background:rgba(0,188,125,0.1);color:#007a55;font-size:11px;font-weight:600"><span style="width:5px;height:5px;border-radius:999px;background:#00bc7d"></span>the shell sets it, once</span>
|
|
46
|
+
<span class="mono" style="font-size:10.5px;color:#525252">main: mx-auto max-w-7xl px-4 py-6 md:px-8 md:py-10</span>
|
|
47
|
+
</div>
|
|
48
|
+
|
|
49
|
+
<div style="position:relative;flex:1;min-height:0;border-radius:14px;background:#ffffff;border:1px solid #e5e5e5;padding:14px;display:flex;flex-direction:column;gap:12px;overflow:hidden">
|
|
50
|
+
<!-- one guide, because there is one measure -->
|
|
51
|
+
<div style="position:absolute;left:46px;top:0;bottom:0;width:1px;background:rgba(20,71,230,0.45)"></div>
|
|
52
|
+
<div style="position:absolute;right:46px;top:0;bottom:0;width:1px;background:rgba(20,71,230,0.45)"></div>
|
|
53
|
+
|
|
54
|
+
<div class="page">
|
|
55
|
+
<div style="padding:14px 32px"><div class="bar" style="height:9px;width:56%;margin-bottom:8px"></div><div class="bar" style="height:20px;width:70%;background:#e6e6e6;margin-bottom:8px"></div><div style="display:grid;grid-template-columns:1fr 1fr;gap:8px"><div style="height:34px;border-radius:12px;background:#f5f5f5"></div><div style="height:34px;border-radius:12px;background:#f5f5f5"></div></div></div>
|
|
56
|
+
<div class="glabel mono" style="left:34px;color:#a1a1a1">a list page</div>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="page">
|
|
59
|
+
<div style="padding:14px 32px"><div class="bar" style="height:9px;width:40%;margin-bottom:8px"></div><div class="bar" style="height:20px;width:58%;background:#e6e6e6;margin-bottom:8px"></div><div style="height:34px;border-radius:12px;background:#f5f5f5"></div></div>
|
|
60
|
+
<div class="glabel mono" style="left:34px;color:#a1a1a1">a detail page</div>
|
|
61
|
+
</div>
|
|
62
|
+
<div class="page">
|
|
63
|
+
<div style="padding:14px 32px"><div class="bar" style="height:9px;width:48%;margin-bottom:8px"></div><div class="bar" style="height:20px;width:64%;background:#e6e6e6;margin-bottom:8px"></div><div style="height:34px;border-radius:12px;background:#f5f5f5"></div></div>
|
|
64
|
+
<div class="glabel mono" style="left:34px;color:#a1a1a1">a form page</div>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<div style="font-size:11.5px;color:#404040;line-height:1.45">Every page starts on the same line and ends on the same line. A page that needs a narrower column asks the shell for the variant; it does not set a measure of its own.</div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<!-- page-owned -->
|
|
72
|
+
<div style="display:flex;flex-direction:column;gap:10px;min-height:0">
|
|
73
|
+
<div style="display:flex;align-items:center;gap:9px">
|
|
74
|
+
<span style="display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;border:1px solid rgba(251,44,54,0.4);background:rgba(251,44,54,0.1);color:#c10007;font-size:11px;font-weight:600"><span style="width:5px;height:5px;border-radius:999px;background:#fb2c36"></span>the shell sets nothing</span>
|
|
75
|
+
<span class="mono" style="font-size:10.5px;color:#525252">so each page repeats one, and they disagree</span>
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<div style="position:relative;flex:1;min-height:0;border-radius:14px;background:#ffffff;border:1px solid #e5e5e5;padding:14px;display:flex;flex-direction:column;gap:12px;overflow:hidden">
|
|
79
|
+
<div style="position:absolute;left:38px;top:0;bottom:0;width:1px;background:rgba(251,44,54,0.4)"></div>
|
|
80
|
+
<div style="position:absolute;left:54px;top:0;bottom:0;width:1px;background:rgba(251,44,54,0.4)"></div>
|
|
81
|
+
<div style="position:absolute;left:70px;top:0;bottom:0;width:1px;background:rgba(251,44,54,0.4)"></div>
|
|
82
|
+
|
|
83
|
+
<div class="page">
|
|
84
|
+
<div style="padding:14px 24px"><div class="bar" style="height:9px;width:56%;margin-bottom:8px"></div><div class="bar" style="height:20px;width:70%;background:#e6e6e6;margin-bottom:8px"></div><div style="display:grid;grid-template-columns:1fr 1fr;gap:8px"><div style="height:34px;border-radius:12px;background:#f5f5f5"></div><div style="height:34px;border-radius:12px;background:#f5f5f5"></div></div></div>
|
|
85
|
+
<div class="glabel mono" style="left:26px;color:#c10007">px-6, pb-12</div>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="page">
|
|
88
|
+
<div style="padding:20px 40px 8px"><div class="bar" style="height:9px;width:40%;margin-bottom:8px"></div><div class="bar" style="height:20px;width:58%;background:#e6e6e6;margin-bottom:8px"></div><div style="height:30px;border-radius:12px;background:#f5f5f5"></div></div>
|
|
89
|
+
<div class="glabel mono" style="left:42px;color:#c10007">max-w-4xl, px-6</div>
|
|
90
|
+
</div>
|
|
91
|
+
<div class="page">
|
|
92
|
+
<div style="padding:10px 56px 8px"><div class="bar" style="height:9px;width:48%;margin-bottom:8px"></div><div class="bar" style="height:20px;width:64%;background:#e6e6e6;margin-bottom:8px"></div><div style="height:34px;border-radius:12px;background:#f5f5f5"></div></div>
|
|
93
|
+
<div class="glabel mono" style="left:58px;color:#c10007">px-8, py-4</div>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
<div style="font-size:11.5px;color:#404040;line-height:1.45">Nothing here is wrong on its own screen. The defect only exists between screens, which is why review never catches it: nobody opens two pages side by side.</div>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
<div style="margin:14px 24px 18px;border:1px solid #e5e5e5;background:#ffffff;border-radius:12px;padding:11px 14px;display:flex;gap:18px;align-items:flex-start">
|
|
102
|
+
<div style="flex:1">
|
|
103
|
+
<div class="eyebrow" style="color:#737373;margin-bottom:4px">THE RULE</div>
|
|
104
|
+
<div style="font-size:12px;color:#404040;line-height:1.5">The shell's <span class="mono" style="font-size:11px">main</span> owns the max width, the gutters and the vertical rhythm. A page sets none of the three. This is the cheapest of the four decisions to get right and the most expensive to retrofit, because the fix is a class removed from every page rather than one added to the shell.</div>
|
|
105
|
+
</div>
|
|
106
|
+
<div style="width:1px;align-self:stretch;background:#ededed"></div>
|
|
107
|
+
<div style="width:330px">
|
|
108
|
+
<div class="eyebrow" style="color:#737373;margin-bottom:4px">THE ONE EXCEPTION</div>
|
|
109
|
+
<div style="font-size:12px;color:#404040;line-height:1.5">A narrower column for a single-question form is a variant the shell offers by name, so it is set in one place and the same everywhere it is asked for.</div>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
</div>
|
|
114
|
+
</x-dc>
|
|
115
|
+
</body>
|
|
116
|
+
</html>
|