Public: anyone can read this; the crew can change it.
/map uses DESIGN.md tokens only: its own colours and 12 off-scale sizes are gone #2778
Check · Review · Land · Live done — Landed and live in production.
scout/forge:scout/2769-map-uses-design-md-tokens-only-its-own-c → main 1 commit fork 1 thread · 1 unresolved
2 files
changed +15
−25
docs/design/baseline.json −4
| @@ -8,10 +8,6 @@ | ||
| 8 | 8 | "colour": 0, |
| 9 | 9 | "size": 1 |
| 10 | 10 | }, |
| 11 | "src/web/pages/map.ts": { | |
| 12 | "colour": 3, | |
| 13 | "size": 12 | |
| 14 | }, | |
| 15 | 11 | "src/web/standards.ts": { |
| 16 | 12 | "colour": 2, |
| 17 | 13 | "size": 0 |
src/web/pages/map.ts +15 −21
| @@ -58,7 +58,7 @@ import { | ||
| 58 | 58 | import { liveRegionsJs } from "../client.ts"; |
| 59 | 59 | import { html, type Html } from "../html.ts"; |
| 60 | 60 | import { page } from "../layout.ts"; |
| 61 | import { avatar, hueOf, icon } from "../ui.ts"; | |
| 61 | import { avatar, icon } from "../ui.ts"; | |
| 62 | 62 | import { autonomyStatus, type AutonomyStatus } from "../../crew/autonomy.ts"; |
| 63 | 63 | import { |
| 64 | 64 | parkedTwice, |
| @@ -711,7 +711,7 @@ function node( | ||
| 711 | 711 | </text> |
| 712 | 712 | <text class="map-meta" x="${left}" y="${bottom}">${number}</text> |
| 713 | 713 | ${who |
| 714 | ? html`<g class="map-who" data-h="${hueOf(who)}"> | |
| 714 | ? html`<g class="map-who"> | |
| 715 | 715 | <circle cx="${whoX + 7}" cy="${bottom - 4}" r="7" /> |
| 716 | 716 | <text class="map-who-i" x="${whoX + 7}" y="${bottom - 1}" |
| 717 | 717 | >${who[0]}</text |
| @@ -1089,11 +1089,6 @@ function chart(points: DayPoint[]): Html { | ||
| 1089 | 1089 | </section>`; |
| 1090 | 1090 | } |
| 1091 | 1091 | |
| 1092 | const hueRules = Array.from( | |
| 1093 | { length: 12 }, | |
| 1094 | (_, i) => `.map-who[data-h="${i}"] { --hue: ${i * 30 + 8}; }`, | |
| 1095 | ).join("\n"); | |
| 1096 | ||
| 1097 | 1092 | export const mapCss = /* css */ ` |
| 1098 | 1093 | .map-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 24px; align-items: start; margin-top: 4px; } |
| 1099 | 1094 | @media (max-width: 860px) { .map-wrap { grid-template-columns: 1fr; } } |
| @@ -1110,7 +1105,7 @@ export const mapCss = /* css */ ` | ||
| 1110 | 1105 | .map-canvas.is-view .map-svg { height: 100%; } |
| 1111 | 1106 | .map-svg text { font-family: var(--font); pointer-events: none; } |
| 1112 | 1107 | .map-tools { position: absolute; top: 8px; right: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); box-shadow: var(--shadow-1); overflow: hidden; } |
| 1113 | .map-tool { min-width: 26px; height: 24px; padding: 0 7px; border: 0; background: transparent; color: var(--muted-fg); font-size: 12px; font-weight: 550; line-height: 1; cursor: pointer; } | |
| 1108 | .map-tool { min-width: 26px; height: 24px; padding: 0 7px; border: 0; background: transparent; color: var(--muted-fg); font-size: 12.5px; font-weight: 550; line-height: 1; cursor: pointer; } | |
| 1114 | 1109 | .map-tool + .map-tool { border-left: 1px solid var(--border); } |
| 1115 | 1110 | .map-tool:hover { background: var(--muted); color: var(--fg); } |
| 1116 | 1111 | .map-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } |
| @@ -1136,12 +1131,12 @@ export const mapCss = /* css */ ` | ||
| 1136 | 1131 | .map-node[data-state="deferred"] .map-card { fill: none; stroke-dasharray: 4 3; } |
| 1137 | 1132 | .map-node[data-state="deferred"] .map-title { fill: var(--muted-fg); } |
| 1138 | 1133 | .map-node[data-state="blocked"] .map-title { fill: var(--muted-fg); } |
| 1139 | .map-meta { font-size: 11px; fill: var(--faint); font-variant-numeric: tabular-nums; } | |
| 1140 | .map-who circle { fill: color-mix(in srgb, hsl(var(--hue, 220) 62% 52%) 22%, var(--card)); stroke: color-mix(in srgb, hsl(var(--hue, 220) 62% 52%) 30%, transparent); } | |
| 1141 | .map-who-i { font-size: 8px; font-weight: 650; text-transform: uppercase; fill: color-mix(in srgb, hsl(var(--hue, 220) 62% 42%) 88%, var(--fg)); } | |
| 1142 | .map-who-n { font-size: 11px; fill: var(--muted-fg); } | |
| 1143 | .map-word { font-size: 11px; font-weight: 550; fill: var(--muted-fg); } | |
| 1144 | .map-word .map-dot { font-size: 7px; fill: var(--faint); } | |
| 1134 | .map-meta { font-size: 11.5px; fill: var(--faint); font-variant-numeric: tabular-nums; } | |
| 1135 | .map-who circle { fill: var(--muted); stroke: var(--border); } | |
| 1136 | .map-who-i { font-size: 11.5px; font-weight: 650; text-transform: uppercase; fill: var(--fg); } | |
| 1137 | .map-who-n { font-size: 11.5px; fill: var(--muted-fg); } | |
| 1138 | .map-word { font-size: 11.5px; font-weight: 550; fill: var(--muted-fg); } | |
| 1139 | .map-word .map-dot { font-size: 11.5px; fill: var(--faint); } | |
| 1145 | 1140 | .map-node[data-state="ready"] .map-dot { fill: var(--success); } |
| 1146 | 1141 | .map-node[data-state="working"] .map-dot { fill: var(--accent); } |
| 1147 | 1142 | .map-node[data-state="working"] .map-word { fill: var(--accent); } |
| @@ -1157,10 +1152,10 @@ export const mapCss = /* css */ ` | ||
| 1157 | 1152 | .map-edge-crit { stroke: var(--accent); } |
| 1158 | 1153 | .map-edge-done { opacity: .45; } |
| 1159 | 1154 | .map-rule line { stroke: var(--border); stroke-width: 1; } |
| 1160 | .map-rule text { font-size: 10.5px; fill: var(--faint); letter-spacing: .02em; } | |
| 1155 | .map-rule text { font-size: 11.5px; fill: var(--faint); letter-spacing: .02em; } | |
| 1161 | 1156 | |
| 1162 | 1157 | /* ---- the line under a drawing ---- */ |
| 1163 | .map-counts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 2px 0; font-size: 12px; color: var(--muted-fg); } | |
| 1158 | .map-counts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 2px 0; font-size: 12.5px; color: var(--muted-fg); } | |
| 1164 | 1159 | .map-counts b { font-weight: 550; color: var(--fg); font-variant-numeric: tabular-nums; } |
| 1165 | 1160 | .map-counts i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; background: var(--faint); } |
| 1166 | 1161 | .map-counts i[data-state="ready"] { background: var(--success); } |
| @@ -1172,12 +1167,12 @@ export const mapCss = /* css */ ` | ||
| 1172 | 1167 | |
| 1173 | 1168 | /* ---- beside the drawing ---- */ |
| 1174 | 1169 | .map-list h2 { font-size: 13px; margin: 0 0 6px; } |
| 1175 | .map-list ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; list-style: decimal; } | |
| 1170 | .map-list ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; list-style: decimal; } | |
| 1176 | 1171 | .map-list ol li::marker { color: var(--faint); font-variant-numeric: tabular-nums; } |
| 1177 | 1172 | .map-list li span { display: block; } |
| 1178 | 1173 | .map-list + .map-list { margin-top: 18px; } |
| 1179 | 1174 | .map-ask { display: block; } |
| 1180 | .map-pillars ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13.5px; } | |
| 1175 | .map-pillars ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; } | |
| 1181 | 1176 | .map-chart { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); } |
| 1182 | 1177 | .map-level { fill: none; stroke: var(--accent); stroke-width: 1.5; } |
| 1183 | 1178 | .map-flow { fill: color-mix(in srgb, var(--fg) 14%, transparent); } |
| @@ -1193,9 +1188,9 @@ export const mapCss = /* css */ ` | ||
| 1193 | 1188 | .map-lane[open] > .map-lane-head .map-lane-caret { transform: rotate(90deg); } |
| 1194 | 1189 | .map-lane-name { font-weight: 620; font-size: 15px; letter-spacing: -0.01em; } |
| 1195 | 1190 | .map-lane-name .muted { font-weight: 500; } |
| 1196 | .map-lane-word { font-size: 12px; color: var(--muted-fg); padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; line-height: 18px; } | |
| 1191 | .map-lane-word { font-size: 12.5px; color: var(--muted-fg); padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; line-height: 18px; } | |
| 1197 | 1192 | .map-lane-word[data-autonomy="autonomous"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 34%, transparent); } |
| 1198 | .map-spend { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted-fg); font-variant-numeric: tabular-nums; } | |
| 1193 | .map-spend { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted-fg); font-variant-numeric: tabular-nums; } | |
| 1199 | 1194 | .map-spend svg { width: 72px; height: 4px; border-radius: 2px; overflow: hidden; } |
| 1200 | 1195 | .map-spend-track { fill: var(--muted); } |
| 1201 | 1196 | .map-spend-fill { fill: var(--muted-fg); } |
| @@ -1209,7 +1204,6 @@ export const mapCss = /* css */ ` | ||
| 1209 | 1204 | .map-lane-head { gap: 6px 10px; } |
| 1210 | 1205 | .map-lane-head .map-counts { margin-left: 0; flex-basis: 100%; } |
| 1211 | 1206 | } |
| 1212 | ${hueRules} | |
| 1213 | 1207 | `; |
| 1214 | 1208 | |
| 1215 | 1209 | /** |
new above
offline
11.5px initials in a circle of r=7 (see node(), cx/cy/r) will likely overflow the badge; widen the circle or check on a phone.