56 lines
1.6 KiB
CSS
56 lines
1.6 KiB
CSS
.button {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
align-items: center;
|
|
height: var(--row-height);
|
|
border-radius: var(--radius-control);
|
|
color: var(--color-text-secondary);
|
|
text-align: left;
|
|
}
|
|
|
|
.button[data-look='row'] {
|
|
width: 100%;
|
|
padding-inline: var(--row-inset);
|
|
}
|
|
|
|
.button[data-look='icon'] {
|
|
justify-content: center;
|
|
width: var(--row-height);
|
|
}
|
|
|
|
.button[data-look='action'],
|
|
.button[data-look='primary'] {
|
|
justify-content: center;
|
|
padding-inline: var(--space-5);
|
|
background-color: var(--color-raised);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
/* The main action of a form differs by a STEP of surface, not by colour: there are no green "save"
|
|
buttons in this interface (prompt §4.2). ⚠ That is exactly why it is NOT --color-selected here:
|
|
since S3.6 that is the blue colour of the selected row, and the button would become coloured
|
|
against the rule. */
|
|
.button[data-look='primary'] {
|
|
background-color: var(--color-raised-strong);
|
|
}
|
|
|
|
/* The only place where the muted tone stands UNDER TEXT, and this is not a caveat of the token's
|
|
contract but its named exception: WCAG 1.4.3 exempts a disabled element from the threshold, and
|
|
dimming is exactly what "cannot be pressed" is. The caveat lives next to the token itself
|
|
(tokens.css). */
|
|
.button[data-disabled] {
|
|
background-color: var(--color-panel);
|
|
color: var(--color-text-muted);
|
|
cursor: default;
|
|
}
|
|
|
|
.button[data-hovered] {
|
|
background-color: var(--color-raised);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
/* Focus is visible only from the keyboard: a mouse click on a button must not leave a ring. */
|
|
.button[data-focus-visible] {
|
|
outline: 1px solid var(--color-accent);
|
|
outline-offset: -1px;
|
|
}
|