| @@ -53,9 +53,10 @@ | ||
| 53 | 53 | margin: 0 -8px; |
| 54 | 54 | border-radius: 8px; |
| 55 | 55 | } |
| 56 | 56 | |
| 57 | -.dm-drafts__row:hover { | |
| 57 | +.dm-drafts__row:hover, | |
| 58 | +.dm-drafts__row:has( a.dm-drafts__link:focus-visible ) { | |
| 58 | 59 | background: color-mix( in srgb, currentColor 10%, transparent ); |
| 59 | 60 | } |
| 60 | 61 | |
| 61 | 62 | .dm-drafts__row.is-trashing { |
| @@ -70,17 +71,73 @@ | ||
| 70 | 71 | align-items: baseline; |
| 71 | 72 | justify-content: space-between; |
| 72 | 73 | gap: 10px; |
| 73 | 74 | padding: 6px 8px; |
| 75 | + text-decoration: none; | |
| 76 | +} | |
| 77 | + | |
| 78 | +/* | |
| 79 | + * Colour and focus ring, restated with the element in the selector. | |
| 80 | + * | |
| 81 | + * wp-admin repaints every `<a>` on interaction: `a:hover, a:active` | |
| 82 | + * to #135e96 and `a:focus` to #043959, plus a hairline ring and a 2px | |
| 83 | + * radius. Those selectors out-specify a plain | |
| 84 | + * `.dm-drafts__link { color: inherit }`, so the row a user had just | |
| 85 | + * clicked went dark navy on dark glass, about 1.5:1 against the card | |
| 86 | + * it sits on. The one draft they could no longer read was the one | |
| 87 | + * they were working on. Leading `a.` out-specifies core in turn, and | |
| 88 | + * every interactive state is named so none of them can leak back. | |
| 89 | + * | |
| 90 | + * The ring is ours for the same reason the text is. Core's is the | |
| 91 | + * neat accent on a 2px radius: it neither follows the row's 8px | |
| 92 | + * corner nor holds contrast on a card that can be arbitrarily light | |
| 93 | + * or dark, since the widget is glass over the wallpaper. | |
| 94 | + * `--dm-drafts-accent` (defined further down) is the accent already | |
| 95 | + * mixed toward `currentColor` for exactly that reason. | |
| 96 | + */ | |
| 97 | +a.dm-drafts__link, | |
| 98 | +a.dm-drafts__link:hover, | |
| 99 | +a.dm-drafts__link:focus, | |
| 100 | +a.dm-drafts__link:active, | |
| 101 | +a.dm-drafts__link:visited { | |
| 74 | 102 | color: inherit; |
| 75 | - text-decoration: none; | |
| 103 | + border-radius: 8px; | |
| 76 | 104 | } |
| 77 | 105 | |
| 78 | 106 | /* |
| 79 | - * Row actions (Trash, Suggest) are `<wpd-button variant="ghost">` hosts — | |
| 107 | + * Press feedback. | |
| 108 | + * | |
| 109 | + * Core's was a colour swap (`a:active` to #135e96), and it went out | |
| 110 | + * with the rest of the leak above, which left a press saying nothing | |
| 111 | + * at all. The shell answers a press with a scale rather than a hue: | |
| 112 | + * `.os-constellation__row`, a row of this same shape, uses the same | |
| 113 | + * 0.985. It costs no colour, which is what a card sitting on an | |
| 114 | + * arbitrary wallpaper can least afford to spend, and unlike a hover | |
| 115 | + * fill it works under a finger as well as a pointer. | |
| 116 | + */ | |
| 117 | +a.dm-drafts__link:active { | |
| 118 | + transform: scale( 0.985 ); | |
| 119 | +} | |
| 120 | + | |
| 121 | +a.dm-drafts__link:focus-visible { | |
| 122 | + outline: 2px solid var( --dm-drafts-accent, #2271b1 ); | |
| 123 | + outline-offset: -2px; | |
| 124 | + box-shadow: none; | |
| 125 | +} | |
| 126 | + | |
| 127 | +/* Core rings on `:focus`, not `:focus-visible`, so a click parks a | |
| 128 | + ring on the row long after the draft has opened in its window. | |
| 129 | + Keyboard focus keeps the ring above; pointer focus drops it. */ | |
| 130 | +a.dm-drafts__link:focus:not( :focus-visible ) { | |
| 131 | + outline: none; | |
| 132 | + box-shadow: none; | |
| 133 | +} | |
| 134 | + | |
| 135 | +/* | |
| 136 | + * Row actions (Trash, Suggest) are `<os-button variant="ghost">` hosts — | |
| 80 | 137 | * the component owns the focus ring, disabled semantics and theming; these |
| 81 | 138 | * rules only tune it into a 26px icon square via the documented |
| 82 | - * `--wpd-button-*` surface and the `button` shadow part. Both stay hidden | |
| 139 | + * `--os-ui-button-*` surface and the `button` shadow part. Both stay hidden | |
| 83 | 140 | * until the row is hovered or the control takes focus. |
| 84 | 141 | */ |
| 85 | 142 | .dm-drafts__trash, |
| 86 | 143 | .dm-drafts__spark { |
| @@ -86,15 +143,15 @@ | ||
| 86 | 143 | .dm-drafts__spark { |
| 87 | 144 | flex: 0 0 auto; |
| 88 | 145 | opacity: 0; |
| 89 | 146 | transition: opacity 120ms ease-out; |
| 90 | - --wpd-button-padding: 0; | |
| 91 | - --wpd-button-border: none; | |
| 92 | - --wpd-button-border-radius: 6px; | |
| 93 | - --wpd-button-bg: transparent; | |
| 147 | + --os-ui-button-padding: 0; | |
| 148 | + --os-ui-button-border: none; | |
| 149 | + --os-ui-button-border-radius: 6px; | |
| 150 | + --os-ui-button-bg: transparent; | |
| 94 | 151 | /* Inherit the card's text color instead of the component's own |
| 95 | 152 | light-theme default — widget cards can be dark glass. */ |
| 96 | - --wpd-button-fg: currentColor; | |
| 153 | + --os-ui-button-fg: currentColor; | |
| 97 | 154 | } |
| 98 | 155 | |
| 99 | 156 | .dm-drafts__trash { |
| 100 | 157 | margin-right: 4px; |
| @@ -106,42 +163,50 @@ | ||
| 106 | 163 | height: 26px; |
| 107 | 164 | } |
| 108 | 165 | |
| 109 | 166 | .dm-drafts__row:hover .dm-drafts__trash, |
| 110 | -.dm-drafts__row:hover .dm-drafts__spark, | |
| 167 | +.dm-drafts__row:hover .dm-drafts__spark { | |
| 168 | + opacity: 0.65; | |
| 169 | +} | |
| 170 | + | |
| 171 | +/* Keyboard focus goes to full strength, where the pointer only gets | |
| 172 | + there on hover: at 0.65 the control's own focus ring was being faded | |
| 173 | + along with it, and a focus indicator is the one thing that cannot | |
| 174 | + afford to be three-quarters there. `:focus-within` on the host | |
| 175 | + matches when the button inside the shadow root has focus. */ | |
| 111 | 176 | .dm-drafts__trash:focus-within, |
| 112 | 177 | .dm-drafts__spark:focus-within { |
| 113 | - opacity: 0.65; | |
| 178 | + opacity: 1; | |
| 114 | 179 | } |
| 115 | 180 | |
| 116 | 181 | .dm-drafts__trash:hover { |
| 117 | 182 | opacity: 1; |
| 118 | - --wpd-button-bg-hover: color-mix( | |
| 183 | + --os-ui-button-bg-hover: color-mix( | |
| 119 | 184 | in srgb, |
| 120 | - var( --wpd-danger, #d63638 ) 22%, | |
| 185 | + var( --os-ui-danger, #d63638 ) 22%, | |
| 121 | 186 | transparent |
| 122 | 187 | ); |
| 123 | - --wpd-button-fg: var( --dm-drafts-danger, #d63638 ); | |
| 188 | + --os-ui-button-fg: var( --dm-drafts-danger, #d63638 ); | |
| 124 | 189 | } |
| 125 | 190 | |
| 126 | 191 | .dm-drafts__spark:hover { |
| 127 | 192 | opacity: 1; |
| 128 | - --wpd-button-bg-hover: color-mix( | |
| 193 | + --os-ui-button-bg-hover: color-mix( | |
| 129 | 194 | in srgb, |
| 130 | - var( --wpd-accent, #2271b1 ) 22%, | |
| 195 | + var( --os-ui-accent, #2271b1 ) 22%, | |
| 131 | 196 | transparent |
| 132 | 197 | ); |
| 133 | - --wpd-button-fg: var( --dm-drafts-accent, #2271b1 ); | |
| 198 | + --os-ui-button-fg: var( --dm-drafts-accent, #2271b1 ); | |
| 134 | 199 | } |
| 135 | 200 | |
| 136 | 201 | .dm-drafts__spark[aria-expanded='true'] { |
| 137 | 202 | opacity: 1; |
| 138 | - --wpd-button-bg: color-mix( | |
| 203 | + --os-ui-button-bg: color-mix( | |
| 139 | 204 | in srgb, |
| 140 | - var( --wpd-accent, #2271b1 ) 18%, | |
| 205 | + var( --os-ui-accent, #2271b1 ) 18%, | |
| 141 | 206 | transparent |
| 142 | 207 | ); |
| 143 | - --wpd-button-fg: var( --dm-drafts-accent, #2271b1 ); | |
| 208 | + --os-ui-button-fg: var( --dm-drafts-accent, #2271b1 ); | |
| 144 | 209 | } |
| 145 | 210 | |
| 146 | 211 | .dm-drafts__trash .dashicons, |
| 147 | 212 | .dm-drafts__spark .dashicons { |
| @@ -152,16 +217,16 @@ | ||
| 152 | 217 | line-height: 16px; |
| 153 | 218 | } |
| 154 | 219 | |
| 155 | 220 | /* The shell forces `cursor: default !important`; out-specify it. The |
| 156 | - `<wpd-button>` controls set their own cursor inside the shadow root, | |
| 221 | + `<os-button>` controls set their own cursor inside the shadow root, | |
| 157 | 222 | which that rule can't reach. */ |
| 158 | -body.desktop-mode-active .dm-drafts__link { | |
| 223 | +body.os-active .dm-drafts__link { | |
| 159 | 224 | cursor: pointer !important; |
| 160 | 225 | } |
| 161 | 226 | |
| 162 | 227 | /* |
| 163 | - * Adaptive accent for text + glyphs. `--wpd-accent` neat is a mid blue | |
| 228 | + * Adaptive accent for text + glyphs. `--os-ui-accent` neat is a mid blue | |
| 164 | 229 | * that sinks into a dark glass card; mixing it toward `currentColor` |
| 165 | 230 | * keeps it legible whichever way the card leans. Backgrounds still use |
| 166 | 231 | * the neat token — a low-alpha wash doesn't have a contrast problem. |
| 167 | 232 | */ |
| @@ -168,14 +233,14 @@ | ||
| 168 | 233 | .dm-drafts__row, |
| 169 | 234 | .dm-drafts__suggest { |
| 170 | 235 | --dm-drafts-accent: color-mix( |
| 171 | 236 | in srgb, |
| 172 | - var( --wpd-accent, #2271b1 ) 55%, | |
| 237 | + var( --os-ui-accent, #2271b1 ) 55%, | |
| 173 | 238 | currentColor |
| 174 | 239 | ); |
| 175 | 240 | --dm-drafts-danger: color-mix( |
| 176 | 241 | in srgb, |
| 177 | - var( --wpd-danger, #d63638 ) 65%, | |
| 242 | + var( --os-ui-danger, #d63638 ) 65%, | |
| 178 | 243 | currentColor |
| 179 | 244 | ); |
| 180 | 245 | } |
| 181 | 246 | |
| @@ -207,35 +272,44 @@ | ||
| 207 | 272 | |
| 208 | 273 | /* |
| 209 | 274 | * Notices inside the panel (readiness, load failure). |
| 210 | 275 | * |
| 211 | - * `<wpd-notice>`'s built-in palette is tuned for a light window surface — | |
| 212 | - * its text defaults to `--wpd-fg` (#1d2327) over an 8%-alpha tone wash. | |
| 276 | + * `<os-notice>`'s built-in palette is tuned for a light window surface — | |
| 277 | + * its text defaults to `--os-ui-fg` (#1d2327) over an 8%-alpha tone wash. | |
| 213 | 278 | * A widget card is glass over the wallpaper and can be arbitrarily dark, |
| 214 | - * so that pairing collapses to unreadable. Drive the component's | |
| 215 | - * documented color surface from `currentColor` instead: the text tracks | |
| 216 | - * whatever the card already proved legible, and the tone survives in the | |
| 217 | - * accent stripe + icon, each mixed toward `currentColor` so it stays | |
| 218 | - * visible on a dark and a light card alike. | |
| 279 | + * so that pairing collapses to unreadable. Drive the component's text | |
| 280 | + * from `currentColor` instead: it tracks whatever the card already | |
| 281 | + * proved legible. | |
| 282 | + * | |
| 283 | + * The tone has to carry the surface, not only the stripe. A neutral | |
| 284 | + * currentColor wash over the panel's own currentColor wash is a grey | |
| 285 | + * box inside a grey box, and an error read as background — the exact | |
| 286 | + * complaint that landed the failure notices here. So each tone paints | |
| 287 | + * its wash and a full hairline border from the palette's own notice | |
| 288 | + * tokens (declared for a dark surface), falling back to the tone | |
| 289 | + * colour mixed toward transparent, which survives a light card too. | |
| 290 | + * The stripe colour is mixed toward currentColor so it stays visible | |
| 291 | + * on either. | |
| 292 | + * | |
| 293 | + * These are document-tree rules on the host, so they outrank the | |
| 294 | + * component's own `:host( [ tone ] )` declarations by design. | |
| 219 | 295 | */ |
| 220 | 296 | .dm-drafts__notice { |
| 221 | - --wpd-notice-color: currentColor; | |
| 222 | - --wpd-notice-bg: color-mix( in srgb, currentColor 8%, transparent ); | |
| 223 | - --wpd-notice-border: transparent; | |
| 224 | - --wpd-notice-font: inherit; | |
| 225 | - --wpd-notice-success: color-mix( | |
| 297 | + --os-ui-notice-color: currentColor; | |
| 298 | + --os-ui-notice-font: inherit; | |
| 299 | + --os-ui-notice-success: color-mix( | |
| 226 | 300 | in srgb, |
| 227 | - var( --wpd-success-fg, #46b450 ) 65%, | |
| 301 | + var( --os-ui-success-fg, #46b450 ) 65%, | |
| 228 | 302 | currentColor |
| 229 | 303 | ); |
| 230 | - --wpd-notice-warning: color-mix( | |
| 304 | + --os-ui-notice-warning: color-mix( | |
| 231 | 305 | in srgb, |
| 232 | - var( --wpd-warning-fg, #dba617 ) 65%, | |
| 306 | + var( --os-ui-warning-fg, #dba617 ) 65%, | |
| 233 | 307 | currentColor |
| 234 | 308 | ); |
| 235 | - --wpd-notice-error: color-mix( | |
| 309 | + --os-ui-notice-error: color-mix( | |
| 236 | 310 | in srgb, |
| 237 | - var( --wpd-danger, #d63638 ) 65%, | |
| 311 | + var( --os-ui-danger, #d63638 ) 65%, | |
| 238 | 312 | currentColor |
| 239 | 313 | ); |
| 240 | 314 | /* Out-specifies the component's own `:host` padding — 10px/14px is |
| 241 | 315 | window-banner scale and reads as a slab inside an 8px panel. */ |
| @@ -240,10 +314,49 @@ | ||
| 240 | 314 | /* Out-specifies the component's own `:host` padding — 10px/14px is |
| 241 | 315 | window-banner scale and reads as a slab inside an 8px panel. */ |
| 242 | 316 | padding: 8px 10px; |
| 243 | 317 | border-radius: 6px; |
| 318 | + border: 1px solid var( --os-ui-notice-border ); | |
| 319 | + border-inline-start: 4px solid var( --os-ui-notice-accent ); | |
| 244 | 320 | } |
| 245 | 321 | |
| 322 | +.dm-drafts__notice[ tone='success' ] { | |
| 323 | + --os-ui-notice-accent: var( --os-ui-notice-success ); | |
| 324 | + --os-ui-notice-bg: var( | |
| 325 | + --os-ui-notice-success-bg, | |
| 326 | + color-mix( in srgb, var( --os-ui-success-fg, #46b450 ) 14%, transparent ) | |
| 327 | + ); | |
| 328 | + --os-ui-notice-border: var( | |
| 329 | + --os-ui-notice-success-border, | |
| 330 | + color-mix( in srgb, var( --os-ui-success-fg, #46b450 ) 40%, transparent ) | |
| 331 | + ); | |
| 332 | +} | |
| 333 | + | |
| 334 | +.dm-drafts__notice[ tone='warning' ] { | |
| 335 | + --os-ui-notice-accent: var( --os-ui-notice-warning ); | |
| 336 | + --os-ui-notice-bg: var( | |
| 337 | + --os-ui-notice-warning-bg, | |
| 338 | + color-mix( in srgb, var( --os-ui-warning-fg, #dba617 ) 14%, transparent ) | |
| 339 | + ); | |
| 340 | + --os-ui-notice-border: var( | |
| 341 | + --os-ui-notice-warning-border, | |
| 342 | + color-mix( in srgb, var( --os-ui-warning-fg, #dba617 ) 40%, transparent ) | |
| 343 | + ); | |
| 344 | +} | |
| 345 | + | |
| 346 | +.dm-drafts__notice[ tone='error' ], | |
| 347 | +.dm-drafts__notice[ tone='danger' ] { | |
| 348 | + --os-ui-notice-accent: var( --os-ui-notice-error ); | |
| 349 | + --os-ui-notice-bg: var( | |
| 350 | + --os-ui-notice-error-bg, | |
| 351 | + color-mix( in srgb, var( --os-ui-danger, #d63638 ) 14%, transparent ) | |
| 352 | + ); | |
| 353 | + --os-ui-notice-border: var( | |
| 354 | + --os-ui-notice-error-border, | |
| 355 | + color-mix( in srgb, var( --os-ui-danger, #d63638 ) 40%, transparent ) | |
| 356 | + ); | |
| 357 | +} | |
| 358 | + | |
| 246 | 359 | /* Readiness — read-only diagnosis at the top of the panel, tone-coded |
| 247 | 360 | success when nothing is missing, warning otherwise. */ |
| 248 | 361 | .dm-drafts__readiness-summary { |
| 249 | 362 | font-size: 12px; |
| @@ -275,22 +388,22 @@ | ||
| 275 | 388 | letter-spacing: 0.04em; |
| 276 | 389 | opacity: 0.72; |
| 277 | 390 | } |
| 278 | 391 | |
| 279 | -/* Suggestion buttons — `<wpd-button variant="ghost">` tuned to read as | |
| 392 | +/* Suggestion buttons — `<os-button variant="ghost">` tuned to read as | |
| 280 | 393 | list rows (title / excerpt) or pills (tags / categories). */ |
| 281 | 394 | .dm-drafts__suggest-item, |
| 282 | 395 | .dm-drafts__suggest-tag { |
| 283 | - --wpd-button-border: none; | |
| 284 | - --wpd-button-bg: transparent; | |
| 285 | - --wpd-button-fg: currentColor; | |
| 396 | + --os-ui-button-border: none; | |
| 397 | + --os-ui-button-bg: transparent; | |
| 398 | + --os-ui-button-fg: currentColor; | |
| 286 | 399 | } |
| 287 | 400 | |
| 288 | 401 | .dm-drafts__suggest-item { |
| 289 | 402 | display: flex; |
| 290 | - --wpd-button-padding: 4px 6px; | |
| 291 | - --wpd-button-border-radius: 6px; | |
| 292 | - --wpd-button-bg-hover: color-mix( in srgb, currentColor 12%, transparent ); | |
| 403 | + --os-ui-button-padding: 4px 6px; | |
| 404 | + --os-ui-button-border-radius: 6px; | |
| 405 | + --os-ui-button-bg-hover: color-mix( in srgb, currentColor 12%, transparent ); | |
| 293 | 406 | } |
| 294 | 407 | |
| 295 | 408 | .dm-drafts__suggest-item::part( button ) { |
| 296 | 409 | width: 100%; |
| @@ -307,15 +420,15 @@ | ||
| 307 | 420 | gap: 4px; |
| 308 | 421 | } |
| 309 | 422 | |
| 310 | 423 | .dm-drafts__suggest-tag { |
| 311 | - --wpd-button-padding: 2px 8px; | |
| 312 | - --wpd-button-border-radius: 999px; | |
| 313 | - --wpd-button-border: 1px solid | |
| 424 | + --os-ui-button-padding: 2px 8px; | |
| 425 | + --os-ui-button-border-radius: 999px; | |
| 426 | + --os-ui-button-border: 1px solid | |
| 314 | 427 | color-mix( in srgb, currentColor 30%, transparent ); |
| 315 | - --wpd-button-bg-hover: color-mix( | |
| 428 | + --os-ui-button-bg-hover: color-mix( | |
| 316 | 429 | in srgb, |
| 317 | - var( --wpd-accent, #2271b1 ) 16%, | |
| 430 | + var( --os-ui-accent, #2271b1 ) 16%, | |
| 318 | 431 | transparent |
| 319 | 432 | ); |
| 320 | 433 | } |
| 321 | 434 | |
| @@ -324,10 +437,10 @@ | ||
| 324 | 437 | font-weight: 400; |
| 325 | 438 | } |
| 326 | 439 | |
| 327 | 440 | .dm-drafts__suggest-tag:hover { |
| 328 | - --wpd-button-fg: var( --dm-drafts-accent, #2271b1 ); | |
| 329 | - --wpd-button-border: 1px solid | |
| 441 | + --os-ui-button-fg: var( --dm-drafts-accent, #2271b1 ); | |
| 442 | + --os-ui-button-border: 1px solid | |
| 330 | 443 | color-mix( in srgb, var( --dm-drafts-accent, #2271b1 ) 55%, transparent ); |
| 331 | 444 | } |
| 332 | 445 | |
| 333 | 446 | /* |
| @@ -345,17 +458,17 @@ | ||
| 345 | 458 | .dm-drafts__suggest-item.is-applied, |
| 346 | 459 | .dm-drafts__suggest-tag.is-applied { |
| 347 | 460 | --dm-drafts-applied: color-mix( |
| 348 | 461 | in srgb, |
| 349 | - var( --wpd-success-fg, #46b450 ) 55%, | |
| 462 | + var( --os-ui-success-fg, #46b450 ) 55%, | |
| 350 | 463 | currentColor |
| 351 | 464 | ); |
| 352 | - --wpd-button-fg: currentColor; | |
| 353 | - --wpd-button-bg: color-mix( in srgb, currentColor 15%, transparent ); | |
| 465 | + --os-ui-button-fg: currentColor; | |
| 466 | + --os-ui-button-bg: color-mix( in srgb, currentColor 15%, transparent ); | |
| 354 | 467 | /* Same as the resting fill — an applied suggestion is inert, so it |
| 355 | 468 | must not light up under the pointer as if it were still actionable. */ |
| 356 | - --wpd-button-bg-hover: color-mix( in srgb, currentColor 15%, transparent ); | |
| 357 | - --wpd-button-border: 1px solid | |
| 469 | + --os-ui-button-bg-hover: color-mix( in srgb, currentColor 15%, transparent ); | |
| 470 | + --os-ui-button-border: 1px solid | |
| 358 | 471 | color-mix( in srgb, var( --dm-drafts-applied ) 60%, transparent ); |
| 359 | 472 | opacity: 1; |
| 360 | 473 | cursor: default; |
| 361 | 474 | } |
