| 470 |
470 |
|
Tone is handed back on `[data-tone]` rather than on `.button`, because an
|
| 471 |
471 |
|
untoned button has no colour in the layer to roll back to and would land on
|
| 472 |
472 |
|
the UA default instead of --content. */
|
| 473 |
|
- |
.button {
|
|
473 |
+ |
.button,
|
|
474 |
+ |
.chip,
|
|
475 |
+ |
.segment,
|
|
476 |
+ |
.toggle {
|
| 474 |
477 |
|
/* respec-ok: a layer handoff, not a value. */
|
| 475 |
478 |
|
background: revert-layer;
|
| 476 |
479 |
|
box-shadow: revert-layer;
|
| 477 |
480 |
|
}
|
| 478 |
481 |
|
|
| 479 |
|
- |
.button:hover {
|
|
482 |
+ |
.button:hover,
|
|
483 |
+ |
.chip:hover,
|
|
484 |
+ |
.segment:hover,
|
|
485 |
+ |
.toggle:hover {
|
| 480 |
486 |
|
/* respec-ok: a layer handoff, not a value. */
|
| 481 |
487 |
|
background: revert-layer;
|
| 482 |
488 |
|
}
|
| 483 |
489 |
|
|
| 484 |
|
- |
.button:active {
|
|
490 |
+ |
.button:active,
|
|
491 |
+ |
.chip:active,
|
|
492 |
+ |
.segment:active,
|
|
493 |
+ |
.toggle:active {
|
| 485 |
494 |
|
/* respec-ok: a layer handoff, not a value. */
|
| 486 |
495 |
|
background: revert-layer;
|
| 487 |
496 |
|
box-shadow: revert-layer;
|
| 492 |
501 |
|
color: revert-layer;
|
| 493 |
502 |
|
}
|
| 494 |
503 |
|
|
|
504 |
+ |
/* A described link, same handoff on the `a` and `button` element rules.
|
|
505 |
+ |
`a { color: var(--content); text-decoration: none }` renders a described
|
|
506 |
+ |
link as body text -- the reader cannot tell it is a link at all, which is
|
|
507 |
+ |
the same defect as the lost tone above and worse for being silent.
|
|
508 |
+ |
|
|
509 |
+ |
`button.link` is the second arm: a link that posts is a button in the
|
|
510 |
+ |
markup, and makeover already flattens it (`background: none`, no border, no
|
|
511 |
+ |
padding, `font: inherit`). The element rule's chrome beat all four, so it
|
|
512 |
+ |
rendered as an ordinary raised button. Only the properties makeover sets on
|
|
513 |
+ |
this class are handed back; `font` is handed back on the button arm alone,
|
|
514 |
+ |
because an `a.link` has no lower-layer font to roll back to and would land
|
|
515 |
+ |
on the UA default face. */
|
|
516 |
+ |
.link {
|
|
517 |
+ |
/* respec-ok: a layer handoff, not a value. */
|
|
518 |
+ |
color: revert-layer;
|
|
519 |
+ |
text-decoration: revert-layer;
|
|
520 |
+ |
}
|
|
521 |
+ |
|
|
522 |
+ |
button.link {
|
|
523 |
+ |
/* respec-ok: a layer handoff, not a value. */
|
|
524 |
+ |
background: revert-layer;
|
|
525 |
+ |
border: revert-layer;
|
|
526 |
+ |
padding: revert-layer;
|
|
527 |
+ |
font: revert-layer;
|
|
528 |
+ |
box-shadow: revert-layer;
|
|
529 |
+ |
}
|
|
530 |
+ |
|
|
531 |
+ |
/* A described field on a `select` or a `textarea`. The input rule further down
|
|
532 |
+ |
sets padding and font only, which is why the shipped `.field` precedents
|
|
533 |
+ |
survived; these two also set `background` and `box-shadow`, so a described
|
|
534 |
+ |
field on either renders in --surface-sunken rather than the well. The focus
|
|
535 |
+ |
ring is handed back with them: makeover insets it (`calc(-1 * 2px)`) so it
|
|
536 |
+ |
does not collide with the bevel, and the app's outer 2px was winning. */
|
|
537 |
+ |
.field {
|
|
538 |
+ |
/* respec-ok: a layer handoff, not a value. */
|
|
539 |
+ |
background: revert-layer;
|
|
540 |
+ |
box-shadow: revert-layer;
|
|
541 |
+ |
}
|
|
542 |
+ |
|
|
543 |
+ |
.field:focus-visible {
|
|
544 |
+ |
/* respec-ok: a layer handoff, not a value. */
|
|
545 |
+ |
outline-offset: revert-layer;
|
|
546 |
+ |
}
|
|
547 |
+ |
|
| 495 |
548 |
|
.btn-primary {
|
| 496 |
549 |
|
background: var(--primary-dark);
|
| 497 |
550 |
|
color: var(--primary-light);
|