Public: anyone can read this; the crew can change it.
The content stylesheet's focus, forced colours, input size and target size meet specification.website #3586
Check · Review · Land · Live done — Landed and live in production.
scout/forge:scout/3551-the-content-stylesheet-s-focus-forced-co → main 2 commits fork
2 files
changed +15
−8
docs/design/baseline.json +4 −4
| @@ -49,10 +49,10 @@ | ||
| 49 | 49 | "colour": 0, |
| 50 | 50 | "size": 0, |
| 51 | 51 | "motion": 0, |
| 52 | "forced": 1, | |
| 53 | "focus": 1, | |
| 54 | "input": 1, | |
| 55 | "target": 2 | |
| 52 | "forced": 0, | |
| 53 | "focus": 0, | |
| 54 | "input": 0, | |
| 55 | "target": 0 | |
| 56 | 56 | } |
| 57 | 57 | } |
| 58 | 58 | } |
src/web/style/content.ts +11 −4
| @@ -329,7 +329,9 @@ a.origin-chip:hover { border-color: var(--border-strong); color: var(--fg); } | ||
| 329 | 329 | .grants thead th { border-top: 0; font-weight: 600; } |
| 330 | 330 | .grants th[scope="col"], .grants td { text-align: center; } |
| 331 | 331 | .grants th[scope="row"] { text-align: left; font-weight: 500; white-space: nowrap; } |
| 332 | .grants input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); } | |
| 332 | .grants { --grant-box: 16px; } | |
| 333 | .grants input[type="checkbox"] { width: var(--grant-box); height: var(--grant-box); accent-color: var(--accent); } | |
| 334 | @media (pointer: coarse) { .grants { --grant-box: 24px; } } | |
| 333 | 335 | .grants-foot { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--border); } |
| 334 | 336 | /* A subscription's headroom for people: a small number beside its windows. */ |
| 335 | 337 | .headroom { display: flex; align-items: center; gap: 6px; } |
| @@ -1067,7 +1069,7 @@ form.inline { display: inline; margin-left: auto; } | ||
| 1067 | 1069 | .editor-gutter { |
| 1068 | 1070 | flex: none; width: 3.5rem; padding: 10px 8px 10px 0; |
| 1069 | 1071 | text-align: right; user-select: none; |
| 1070 | font-family: var(--mono); font-size: 12.5px; line-height: 1.55; | |
| 1072 | font-family: var(--mono); font-size: var(--editor-fs); line-height: 1.55; | |
| 1071 | 1073 | color: var(--faint); background: var(--muted); |
| 1072 | 1074 | border-right: 1px solid var(--border); |
| 1073 | 1075 | overflow: hidden; |
| @@ -1088,14 +1090,14 @@ textarea.editor { | ||
| 1088 | 1090 | grid-area: 1 / 1; |
| 1089 | 1091 | margin: 0; border: none; background: none; |
| 1090 | 1092 | padding: 10px 12px; min-height: 14rem; |
| 1091 | font-family: var(--mono); font-size: 12.5px; line-height: 1.55; | |
| 1093 | font-family: var(--mono); font-size: var(--editor-fs); line-height: 1.55; | |
| 1092 | 1094 | tab-size: 2; white-space: pre; |
| 1093 | 1095 | overflow: auto; |
| 1094 | 1096 | } |
| 1095 | 1097 | .editor-wrap.mirrored .editor-mirror, |
| 1096 | 1098 | .editor-wrap.mirrored textarea.editor { min-height: 0; } |
| 1097 | 1099 | textarea.editor { resize: vertical; field-sizing: content; } |
| 1098 | textarea.editor:focus { outline: none; } | |
| 1100 | textarea.editor:focus-visible { outline: none; } | |
| 1099 | 1101 | .editor-mirror { |
| 1100 | 1102 | overflow: hidden; pointer-events: none; user-select: none; |
| 1101 | 1103 | color: var(--fg); |
| @@ -1117,7 +1119,12 @@ textarea.editor:focus { outline: none; } | ||
| 1117 | 1119 | .editor-mirror .ml.cur { |
| 1118 | 1120 | background: color-mix(in srgb, var(--muted) 75%, transparent); |
| 1119 | 1121 | } |
| 1122 | .editor-wrap { --editor-fs: 12.5px; } | |
| 1120 | 1123 | .editor-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } |
| 1124 | /* Touch screens zoom a field set under 16px; the gutter, mirror and textarea share the size so they stay aligned. */ | |
| 1125 | @media (pointer: coarse) { .editor-wrap { --editor-fs: 16px; } } | |
| 1126 | /* The ring above is a shadow, which forced colours drop; the textarea's own outline is off, so draw one. */ | |
| 1127 | @media (forced-colors: active) { .editor-wrap:focus-within { outline: 2px solid Highlight; outline-offset: 2px; } } | |
| 1121 | 1128 | .editor-preview { |
| 1122 | 1129 | border: 1px solid var(--border); border-top: none; |
| 1123 | 1130 | border-radius: 0 0 var(--radius) var(--radius); |
new above
offline