Found reviewing the sign-in screen as it appears inside
seamless-idea-web, which
themes this package through the --seamless-* bridge.
What it looks like
On the registration screen, Register is disabled until the email is valid,
and while disabled it is painted as a solid, filled, mid-grey button. That is the
shape and weight of a primary button that has stopped working, on the screen with
the highest stakes in that product's funnel.
button disabled: true
background: rgb(153, 162, 179) from --seamless-disabled
label colour: rgb(11, 16, 32) from --seamless-accent-contrast
Why the consuming app cannot fix it
--seamless-disabled is used exactly once, as a background-color, and the
label keeps --seamless-accent-contrast, which flips between light and dark with
the theme. So every value an application can supply improves one theme and breaks
the other:
- lighten it, and white-on-pale fails in the light theme
- darken it, and near-black-on-dark fails in the dark theme
There is no value that works for both, because the two colours are chosen in
different places. That is why this is filed here rather than fixed there.
Suggested
Give the disabled state its own pair, or drop the fill entirely: a disabled
control usually reads better as an outline or a reduced-opacity version of the
enabled one than as a filled button in a different colour.
Worth pairing with saying why it is disabled. The consuming product replaced
its own disabled submit with a line that says which of three things is true (no
words yet, not enough yet, ready when you are), and that turned out to matter
more than the colour did, because the person a silent refusal fails is the one
least likely to guess the reason.
Found reviewing the sign-in screen as it appears inside
seamless-idea-web, which
themes this package through the
--seamless-*bridge.What it looks like
On the registration screen, Register is disabled until the email is valid,
and while disabled it is painted as a solid, filled, mid-grey button. That is the
shape and weight of a primary button that has stopped working, on the screen with
the highest stakes in that product's funnel.
Why the consuming app cannot fix it
--seamless-disabledis used exactly once, as abackground-color, and thelabel keeps
--seamless-accent-contrast, which flips between light and dark withthe theme. So every value an application can supply improves one theme and breaks
the other:
There is no value that works for both, because the two colours are chosen in
different places. That is why this is filed here rather than fixed there.
Suggested
Give the disabled state its own pair, or drop the fill entirely: a disabled
control usually reads better as an outline or a reduced-opacity version of the
enabled one than as a filled button in a different colour.
Worth pairing with saying why it is disabled. The consuming product replaced
its own disabled submit with a line that says which of three things is true (no
words yet, not enough yet, ready when you are), and that turned out to matter
more than the colour did, because the person a silent refusal fails is the one
least likely to guess the reason.