Skip to content

docs(connectors): design diff follows the corrected artboard — provider glyph in ink, 200px name column #1548

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lilyshen0722 merged 3 commits into from
Sep 5, 2026
Merged

docs(connectors): design diff follows the corrected artboard — provider glyph in ink, 200px name column #1548

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
552c9b5
docs(connectors): the row carries the provider glyph in ink — Sam's a…
lilyshen0722 Sep 4, 2026
7974981
docs(connectors): name column is 200px on the corrected artboard — pi…
lilyshen0722 Sep 4, 2026
22b59b8
Merge branch 'main' into docs/connectors-diff-glyph-rule
lilyshen0722 Sep 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions docs/plans/connectors-page-signal-diff.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ This is the diff between what the page draws today and what the artboard draws,
| | today (#1531 + #1538) | artboard | call |
|---|---|---|---|
| Frame | one column, `max-width: 720px`, two sections ("Your channels", "Add a channel") | one content card, `grid-template-columns: minmax(0,1fr) 400px`, gap 40; list left, aside right | **change.** Page head (display 32 "Connectors" + muted sentence), then the list, then the connect control, aside on the right |
| Rows | stacked cards with a 34px platform tile in the provider's tint, 14px bold name, green/orange/red dot, controls inside the card | one bordered container (radius 4, `#e4e7ec` dividers); each row a grid `160px minmax(0,1fr) 200px 120px`, gap 16, padding 16px 18px; dot + display 18 name, two-line middle, mono when, one action | **change.** Platform tiles and tint go from the rows; the name in display face is the mark. Tint tokens stay in both token files (the invariants test pins them) — nothing consumes them on this page any more, so the pin moves to `--v2-accent` on the dot (see §5) |
| Rows | stacked cards with a 34px platform tile in the provider's tint, 14px bold name, green/orange/red dot, controls inside the card | one bordered container (radius 4, `#e4e7ec` dividers); each row a grid `200px minmax(0,1fr) 200px 120px`, gap 16, padding 16px 18px; dot + display 18 name, two-line middle, mono when, one action | **change.** Platform tiles and tint go from the rows. Each row opens with the provider's **glyph at 20px in ink** (`PlatformGlyph`, `currentColor`, no tile, no tint — Sam, 2026-09-04, added to the artboard) before the display-face name; the state dot stays the only cobalt on the row. Not-yet rows draw the glyph in placeholder `#98a2b3`. Tint tokens stay in both token files (the invariants test pins them) — nothing consumes them on this page any more, so the pin moves to `--v2-accent` on the dot (see §5) |
| Dot colours | `--v2-success` green, `--v2-warning`, `--v2-danger` | cobalt solid, cobalt pulsing, hollow `#98a2b3`, dashed `#98a2b3`, idle `#e4e7ec` | **change** to the state grammar (§2). No green, no orange, no red anywhere on the page |
| Actions | Manage (cobalt text link), Copy command (cobalt fill), Authorize in Slack, Confirm, This is not me, New code, Disconnect (red text) | one action per row, right-aligned, 32px: bordered secondary or ink primary | **change.** One action per row; everything else moves to the aside for the selected row (§3). Ink fills the action that is the user's next step; bordered for Manage; no cobalt fills, no red text |
| Relay toggle + Attention/Mirror | inline under every connected Telegram/Slack row | not on the row | **move** to the aside's *What the channel sees* card for the selected row. Same PATCH calls, same tests |
Expand All @@ -22,7 +22,7 @@ This is the diff between what the page draws today and what the artboard draws,

## 2. State table — same states, the artboard's marks

Rows are one line each. `dot` is the 8px mark before the name. `line 1` and `line 2` are the middle column (line 2 is mono 12 muted). `when` is mono 12 muted. `action` is the one control on the row; ink = the next step, bordered = secondary.
Rows are one line each. `dot` is the 8px mark before the name; between the dot and the name sits the provider glyph, 20px, ink (`currentColor`), placeholder grey on the not-yet row — it is recognition, not state, so it never changes colour with the row. The name column is 200px (widened from the first artboard's 160px so glyph + `Discord · WhatsApp` sit on one line). `line 1` and `line 2` are the middle column (line 2 is mono 12 muted). `when` is mono 12 muted. `action` is the one control on the row; ink = the next step, bordered = secondary.

| state (unchanged) | dot | line 1 | line 2 | when | action |
|---|---|---|---|---|---|
Expand Down Expand Up @@ -70,9 +70,10 @@ The connect form (after *Connect a channel*) also opens in the aside when a row

A restyle re-pins, never deletes. Class names below are the proposal; Kai's names win, the pins do not move. Replace the connectors block with:

1. `.v2-connector-row` is `display: grid` with `grid-template-columns: 160px minmax(0, 1fr) 200px 120px`.
1. `.v2-connector-row` is `display: grid` with `grid-template-columns: 200px minmax(0, 1fr) 200px 120px`.
2. `.v2-connectors` (the content grid) contains `minmax(0, 1fr) 400px`.
3. `.v2-connector-row__dot--live` contains `var(--v2-accent)`; `.v2-connector-row__dot--idle` contains `var(--v2-border-soft)`; no rule under `.v2-connector` contains `var(--v2-success)`, `var(--v2-warning)` or `var(--v2-danger)`.
3b. The row glyph rule sets `width: 20px; height: 20px` and `color: var(--v2-ink)` (not-yet: `var(--v2-text-placeholder)`); no glyph rule contains `var(--v2-accent)` or a `--v2-platform-*` token — the glyph is never the state mark.
4. Every `background` under `.v2-connector` that is a fill is `var(--v2-ink)` or the command block; no `var(--v2-accent)` background except `.v2-connector-code__copy`.
5. `@media (max-width: 760px)` contains `.v2-connector-row { grid-template-columns: minmax(0, 1fr) auto }` and `.v2-connectors { grid-template-columns: minmax(0, 1fr) }`.
6. The platform tint tokens stay pinned in both token files (the existing test) — the page no longer consumes them; they are kept for the front door.
Expand Down
Loading