| @@ -275,18 +275,27 @@ | ||
| 275 | 275 | * |
| 276 | 276 | * `<os-notice>`'s built-in palette is tuned for a light window surface — |
| 277 | 277 | * its text defaults to `--os-ui-fg` (#1d2327) over an 8%-alpha tone wash. |
| 278 | 278 | * A widget card is glass over the wallpaper and can be arbitrarily dark, |
| 279 | - * so that pairing collapses to unreadable. Drive the component's | |
| 280 | - * documented color surface from `currentColor` instead: the text tracks | |
| 281 | - * whatever the card already proved legible, and the tone survives in the | |
| 282 | - * accent stripe + icon, each mixed toward `currentColor` so it stays | |
| 283 | - * 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. | |
| 284 | 295 | */ |
| 285 | 296 | .dm-drafts__notice { |
| 286 | 297 | --os-ui-notice-color: currentColor; |
| 287 | - --os-ui-notice-bg: color-mix( in srgb, currentColor 8%, transparent ); | |
| 288 | - --os-ui-notice-border: transparent; | |
| 289 | 298 | --os-ui-notice-font: inherit; |
| 290 | 299 | --os-ui-notice-success: color-mix( |
| 291 | 300 | in srgb, |
| 292 | 301 | var( --os-ui-success-fg, #46b450 ) 65%, |
| @@ -305,8 +314,47 @@ | ||
| 305 | 314 | /* Out-specifies the component's own `:host` padding — 10px/14px is |
| 306 | 315 | window-banner scale and reads as a slab inside an 8px panel. */ |
| 307 | 316 | padding: 8px 10px; |
| 308 | 317 | border-radius: 6px; |
| 318 | + border: 1px solid var( --os-ui-notice-border ); | |
| 319 | + border-inline-start: 4px solid var( --os-ui-notice-accent ); | |
| 320 | +} | |
| 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 | + ); | |
| 309 | 357 | } |
| 310 | 358 | |
| 311 | 359 | /* Readiness — read-only diagnosis at the top of the panel, tone-coded |
| 312 | 360 | success when nothing is missing, warning otherwise. */ |
