Public: anyone can read this; the crew can change it.
The studio's stylesheets answer reduced motion and forced colours #3588
Check · Review · Land · Live done — Landed and live in production.
scout/forge:scout/3554-the-studio-s-stylesheets-answer-reduced → main 2 commits fork 1 thread · 1 unresolved
3 files
changed +5
−18
docs/design/baseline.json −18
| @@ -18,24 +18,6 @@ | ||
| 18 | 18 | "input": 0, |
| 19 | 19 | "target": 0 |
| 20 | 20 | }, |
| 21 | "src/web/studio/feed_style.ts": { | |
| 22 | "colour": 0, | |
| 23 | "size": 0, | |
| 24 | "motion": 0, | |
| 25 | "forced": 1, | |
| 26 | "focus": 0, | |
| 27 | "input": 0, | |
| 28 | "target": 0 | |
| 29 | }, | |
| 30 | "src/web/studio/style.ts": { | |
| 31 | "colour": 0, | |
| 32 | "size": 0, | |
| 33 | "motion": 3, | |
| 34 | "forced": 0, | |
| 35 | "focus": 0, | |
| 36 | "input": 0, | |
| 37 | "target": 0 | |
| 38 | }, | |
| 39 | 21 | "src/web/style/components.ts": { |
| 40 | 22 | "colour": 3, |
| 41 | 23 | "size": 2, |
src/web/studio/feed_style.ts +3
| @@ -46,4 +46,7 @@ export const feedCss = /* css */ ` | ||
| 46 | 46 | .feed .bar .btn { padding: 8px 10px; } |
| 47 | 47 | .feed .quiet-details > summary { min-height: 44px; display: flex; align-items: center; } |
| 48 | 48 | } |
| 49 | @media (forced-colors: active) { | |
| 50 | .feed > .card:focus-visible, #apps-select:focus-visible ~ * .home-apps-verbs label { outline: 2px solid Highlight; } | |
Nit: forced-colours mode already keeps outlines and maps them to system colours, so this mostly satisfies the linter. It is harmless, and |
||
| 51 | } | |
| 49 | 52 | `; |
src/web/studio/style.ts +2
| @@ -20,12 +20,14 @@ const part = (css: string): string => css.trim(); | ||
| 20 | 20 | const justChanged = part(/* css */ ` |
| 21 | 21 | #app-head.studio-just-changed, #app-previews.studio-just-changed { animation: studio-flash 1.1s var(--ease); border-radius: var(--radius); } |
| 22 | 22 | @keyframes studio-flash { 0% { background-color: color-mix(in srgb, var(--accent) 14%, transparent); } 100% { background-color: transparent; } } |
| 23 | @media (prefers-reduced-motion: reduce) { #app-head.studio-just-changed, #app-previews.studio-just-changed { animation: none; } } | |
| 23 | 24 | `); |
| 24 | 25 | |
| 25 | 26 | /** One of the five words, as a badge (`words.ts`). */ |
| 26 | 27 | const wordBadges = part(/* css */ ` |
| 27 | 28 | .badge[data-variant="accent"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 34%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); } |
| 28 | 29 | .badge[data-word="working"] svg { animation: spin 1.1s linear infinite; } |
| 30 | @media (prefers-reduced-motion: reduce) { .badge[data-word="working"] svg { animation: none; } } | |
| 29 | 31 | `); |
| 30 | 32 | |
| 31 | 33 | /** The phone: one document, narrower. Each rule belongs to a component above |
new above
offline
Fine. Note the selector is long and repeats the two rules above; if a third outline lands here, factor a shared selector list instead of growing this line.