Public: anyone can read this; the crew can change it.
Design: the origins page's handoff and connect path use the design system, and handoff/connect-* leave §5d #4124
Check · Review · Land · Live done — Landed and live in production.
scout/forge:scout/3839-design-the-origins-page-s-handoff-and-co → main 12 commits fork 1 thread · 1 unresolved
2 files
changed +1
−33
docs/DESIGN.md +1 −1
| @@ -394,7 +394,7 @@ gone, so this list only shrinks. | ||
| 394 | 394 | A `.field` directly inside a `.bar` drops its bottom margin and the bar aligns to the end, so a labelled input and its button share a baseline |
| 395 | 395 | - **`style/components.ts`** — parts of the §5 components that the table does not spell out — the palette's list, the menu's items, a dialog's head and foot, comments, the theme picker — and a few small helpers beside them: `.cat` `.clone` `.clone-text` `.comment` `.comment-body` `.comment-form` `.dash` `.dialog-body` `.dialog-foot` `.dialog-head` `.empty-title` `.error-note` `.field-row` `.form-actions` `.hex` `.ico` `.ico-loader` `.list` `.live-status` `.menu-item` `.menu-panel` `.menu-sep` `.menu-title` `.palette-empty` `.palette-foot` `.palette-group` `.palette-heading` `.palette-input` `.palette-item` `.palette-list` `.passkey` `.passkey-lead` `.passkey-note` `.passkey-off` `.passkey-on` `.preview` `.sep` `.split` `.sprite` `.swatch` `.table-scroll` `.tell-here` `.theme-apply` `.theme-option` `.tick` `.timeline` `.tl-dot` `.toast-body` `.topbar-search` |
| 396 | 396 | - **`style/components.ts`, settings rows** — a list whose rows are settings (limits, capacity): the `<ul class="list setting-list">` lets title and meta wrap instead of ellipsizing, and a row's controls take their own line under 640px. `.row-fields` is the form in that row's trail (input, Save, Default): always visible, never hover-gated, wrapping under the text before it would clip. Use both for any page whose rows show a name, a current value, and a control to change it; use `.row-actions` only for secondary actions (delete, wake, pin, revoke). Flags, telemetry, cloud, people, crew roles and subscription headroom/budget use `.row-fields`. Classes: `.row-fields` `.setting-list` |
| 397 | - **`style/content.ts`, page furniture** — what frames a page's content: page and repo heads, the merge box, the front page and its tiles, explore, backups, boards, the fleet chart's series colours, following, lineage: `.act` `.app-shelf` `.app-tile` `.app-tile-body` `.app-tile-desc` `.app-tile-look` `.app-tile-name` `.backups-drill` `.backups-error` `.backups-now` `.backups-restore` `.bform` `.bgrid` `.big` `.bmanage` `.boards-result` `.bp-h2` `.bp-h3` `.bp-w2` `.bp-w3` `.break` `.bt-bar` `.bt-grid` `.bt-group` `.bt-hist` `.bt-name` `.bt-procs` `.bt-row` `.bt-val` `.chart` `.chart-box` `.commit-body` `.commit-head` `.connect-more` `.connect-path` `.domain-records` `.explore-filters` `.explore-line` `.explore-main` `.explore-name` `.explore-row` `.fg-s0` `.fg-s1` `.fg-s2` `.fg-s3` `.fg-s4` `.fg-s5` `.fg-s6` `.fg-s7` `.filters` `.flag-form` `.following` `.following-actions` `.following-eyebrow` `.following-foot` `.following-head` `.following-sentence` `.fork-bar` `.front-admin` `.front-controls` `.front-crew` `.front-featured` `.front-featured-body` `.front-featured-look` `.front-issues` `.front-live` `.front-more` `.front-pick` `.front-pin-any` `.front-weights` `.frozen` `.frozen-form` `.frozen-sentence` `.handoff` `.handoff-links` `.headroom` `.issue-head` `.issue-meta` `.merge-box` `.merge-form` `.merge-headline` `.merge-sub` `.mirror-form` `.number` `.origin-link` `.origin-mark` `.origin-name` `.origin-row` `.owner` `.page-head` `.path-head` `.policy-line` `.qf` `.repo-actions` `.repo-audience` `.repo-desc` `.repo-layout` `.repo-lineage` `.repo-title` `.search` `.slash` `.stage-detail` `.stage-dot` `.steps` `.sub` `.sys-pair` `.table-wrap` `.terminal-line` `.tok` `.tree-row` `.tree-total` `.wall-cells` `.where-sep` | |
| 397 | - **`style/content.ts`, page furniture** — what frames a page's content: page and repo heads, the merge box, the front page and its tiles, explore, backups, boards, the fleet chart's series colours, following, lineage: `.act` `.app-shelf` `.app-tile` `.app-tile-body` `.app-tile-desc` `.app-tile-look` `.app-tile-name` `.backups-drill` `.backups-error` `.backups-now` `.backups-restore` `.bform` `.bgrid` `.big` `.bmanage` `.boards-result` `.bp-h2` `.bp-h3` `.bp-w2` `.bp-w3` `.break` `.bt-bar` `.bt-grid` `.bt-group` `.bt-hist` `.bt-name` `.bt-procs` `.bt-row` `.bt-val` `.chart` `.chart-box` `.commit-body` `.commit-head` `.domain-records` `.explore-filters` `.explore-line` `.explore-main` `.explore-name` `.explore-row` `.fg-s0` `.fg-s1` `.fg-s2` `.fg-s3` `.fg-s4` `.fg-s5` `.fg-s6` `.fg-s7` `.filters` `.flag-form` `.following` `.following-actions` `.following-eyebrow` `.following-foot` `.following-head` `.following-sentence` `.fork-bar` `.front-admin` `.front-controls` `.front-crew` `.front-featured` `.front-featured-body` `.front-featured-look` `.front-issues` `.front-live` `.front-more` `.front-pick` `.front-pin-any` `.front-weights` `.frozen` `.frozen-form` `.frozen-sentence` `.headroom` `.issue-head` `.issue-meta` `.merge-box` `.merge-form` `.merge-headline` `.merge-sub` `.mirror-form` `.number` `.origin-link` `.origin-mark` `.origin-name` `.origin-row` `.owner` `.page-head` `.path-head` `.policy-line` `.qf` `.repo-actions` `.repo-audience` `.repo-desc` `.repo-layout` `.repo-lineage` `.repo-title` `.search` `.slash` `.stage-detail` `.stage-dot` `.steps` `.sub` `.sys-pair` `.table-wrap` `.terminal-line` `.tok` `.tree-row` `.tree-total` `.wall-cells` `.where-sep` | |
| 398 | 398 | - **`style/content.ts`, code view** — the source view and the syntax-highlight token classes `highlight-html.ts` builds as `tok-${kind}`: `.blob-view` `.ln` `.tok-attribute` `.tok-comment` `.tok-constant` `.tok-decorator` `.tok-deleted` `.tok-emphasis` `.tok-function` `.tok-heading` `.tok-inserted` `.tok-keyword` `.tok-link` `.tok-meta` `.tok-number` `.tok-operator` `.tok-plain` `.tok-property` `.tok-punctuation` `.tok-regex` `.tok-string` `.tok-tag` `.tok-type` `.tok-variable` |
| 399 | 399 | - **`style/content.ts`, prose (markdown)** — table cell alignment, built by `markdown.ts` as `ta-${align}`: `.ta-c` `.ta-r` |
| 400 | 400 | - **`style/content.ts`, diff viewer** — the diff table: its gutters, line kinds, file head and inline review comments: `.add` `.del` `.dh` `.diff` `.diff-body` `.diff-head` `.diff-note` `.diff-path` `.diff-stat` `.diff-stub` `.diff-summary` `.diff-table` `.dl` `.dl-review` `.dn` `.dn-comment` `.nonl` `.rc-hidden` `.rc-resolve` `.rc-resolved` `.wd` |
src/web/style/content.ts −32
| @@ -151,24 +151,6 @@ a.origin-chip:hover { border-color: var(--border-strong); color: var(--fg); } | ||
| 151 | 151 | .origin-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } |
| 152 | 152 | .origin-row .origin-mark .ico { color: var(--muted-fg); } |
| 153 | 153 | .origin-name { display: block; font-weight: 560; } |
| 154 | .connect-path + .connect-path { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); } | |
| 155 | /* The two OAuth paths, folded away. Both need somebody to register an | |
| 156 | application once, and a page whose first control cannot be used until an | |
| 157 | operator sets an environment variable teaches people the product is | |
| 158 | fiddly — so the path that always works is open and these are one click. */ | |
| 159 | .connect-more { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } | |
| 160 | .connect-more > summary { | |
| 161 | cursor: pointer; font-weight: 560; list-style: none; | |
| 162 | display: flex; align-items: center; gap: 6px; | |
| 163 | } | |
| 164 | .connect-more > summary::-webkit-details-marker { display: none; } | |
| 165 | .connect-more > summary::before { | |
| 166 | content: "›"; display: inline-block; color: var(--faint); | |
| 167 | transition: transform 120ms var(--ease); | |
| 168 | } | |
| 169 | .connect-more[open] > summary::before { transform: rotate(90deg); } | |
| 170 | .connect-more > summary:hover { color: var(--accent); } | |
| 171 | .connect-more > p { margin: 6px 0 4px; } | |
| 172 | 154 | /* Why an issue closes, beside the button that closes it. */ |
| 173 | 155 | .form-actions select[name="reason"] { width: auto; } |
| 174 | 156 | .form-actions input[name="into"] { display: none; width: 7em; } |
| @@ -187,9 +169,6 @@ a.origin-chip:hover { border-color: var(--border-strong); color: var(--fg); } | ||
| 187 | 169 | row needs for "Close issue", and the buttons keep their full height. */ |
| 188 | 170 | .comment-form .form-actions .btn .ico { display: none; } |
| 189 | 171 | } |
| 190 | .connect-more .connect-path { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } | |
| 191 | .connect-path h3 { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } | |
| 192 | .connect-path h3 .ico { color: var(--muted-fg); } | |
| 193 | 172 | .steps { margin: 8px 0 12px 18px; padding: 0; color: var(--muted-fg); } |
| 194 | 173 | .steps li + li { margin-top: 6px; } |
| 195 | 174 | .mirror-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } |
| @@ -205,17 +184,6 @@ a.origin-chip:hover { border-color: var(--border-strong); color: var(--fg); } | ||
| 205 | 184 | font-variant-numeric: tabular-nums; letter-spacing: 0.14em; |
| 206 | 185 | text-align: center; user-select: all; word-break: break-all; |
| 207 | 186 | } |
| 208 | /* Handing a connect to another device: a code to scan, a short link to type, | |
| 209 | the long one to copy. The QR keeps its own white ground in every theme — | |
| 210 | a scanner reads dark modules on light and refuses the inverse, so this is | |
| 211 | the one thing on the page the theme does not get a vote on. */ | |
| 212 | .handoff { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin-top: 12px; } | |
| 213 | .handoff > svg { | |
| 214 | flex: none; width: 168px; height: 168px; | |
| 215 | background: var(--qr-ground); border: 1px solid var(--border); border-radius: var(--radius-sm); | |
| 216 | } | |
| 217 | .handoff-links { flex: 1 1 16rem; min-width: 0; } | |
| 218 | .handoff-links .mono { user-select: all; overflow-wrap: anywhere; } | |
| 219 | 187 | .break { overflow-wrap: anywhere; } |
| 220 | 188 | [data-apps] { overflow-wrap: anywhere; } |
| 221 | 189 |
new above
offline