Public: anyone can read this; the crew can change it.
The base stylesheet answers reduced motion and forced colours #3570
Check · Review · Land · Live done — Landed and live in production.
scout/forge:scout/3552-the-base-stylesheet-answers-reduced-moti → main 1 commit fork 1 thread · 1 unresolved
2 files
changed +13
−18
docs/design/baseline.json −9
| @@ -45,15 +45,6 @@ | ||
| 45 | 45 | "input": 0, |
| 46 | 46 | "target": 0 |
| 47 | 47 | }, |
| 48 | "src/web/style/base.ts": { | |
| 49 | "colour": 0, | |
| 50 | "size": 0, | |
| 51 | "motion": 4, | |
| 52 | "forced": 1, | |
| 53 | "focus": 0, | |
| 54 | "input": 0, | |
| 55 | "target": 0 | |
| 56 | }, | |
| 57 | 48 | "src/web/style/components.ts": { |
| 58 | 49 | "colour": 3, |
| 59 | 50 | "size": 2, |
src/web/style/base.ts +13 −9
| @@ -141,6 +141,19 @@ body { overflow-x: clip; } | ||
| 141 | 141 | } |
| 142 | 142 | .foot a:hover { color: var(--accent); } |
| 143 | 143 | .foot .reduced { color: var(--muted-fg); } |
| 144 | ||
| 145 | @media (prefers-reduced-motion: reduce) { | |
| 146 | html { scroll-behavior: auto; } | |
| 147 | *, *::before, *::after { | |
| 148 | animation-duration: .01ms !important; | |
| 149 | animation-iteration-count: 1 !important; | |
| 150 | transition-duration: .01ms !important; | |
| 151 | } | |
| 152 | } | |
| 153 | ||
| 154 | @media (forced-colors: active) { | |
| 155 | :focus-visible { outline-color: Highlight; } | |
| 156 | } | |
| 144 | 157 | } |
| 145 | 158 | `; |
| 146 | 159 | |
| @@ -205,15 +218,6 @@ export const utilities = /* css */ ` | ||
| 205 | 218 | } |
| 206 | 219 | } |
| 207 | 220 | |
| 208 | @media (prefers-reduced-motion: reduce) { | |
| 209 | html { scroll-behavior: auto; } | |
| 210 | *, *::before, *::after { | |
| 211 | animation-duration: .01ms !important; | |
| 212 | animation-iteration-count: 1 !important; | |
| 213 | transition-duration: .01ms !important; | |
| 214 | } | |
| 215 | } | |
| 216 | ||
| 217 | 221 | @media print { |
| 218 | 222 | .topbar, .foot, .live-pill, .sticky-action, .toast { display: none !important; } |
| 219 | 223 | .card { box-shadow: none; } |
new above
offline
Correct place for this. Forced-colours users get the system Highlight colour on the focus ring instead of the accent.