@import '../settings/tw';

/*
 * Placeholders, once, for every admin screen.
 *
 * The credential examples had drifted into looking like filled-in fields:
 * monospace, full opacity, and long enough to run the width of the box. Three
 * rows of that read as three saved keys, and the eye went to them ahead of the
 * labels - which is backwards, because the placeholder is the one thing on the
 * row that is not real.
 *
 * Two of those three were the cause. Monospace is the strongest "this is a
 * value" signal a field has, so a placeholder never gets it: it now takes the
 * face and size of the text it stands in for, and the shape of an example key
 * comes across perfectly well in the same sans as everything else. The
 * examples themselves were shortened; nobody needed thirty-two characters to
 * learn that a secret is a long random string.
 *
 * What did not change is the colour. Browsers default to around #757575 at 60%
 * opacity, which composites to roughly 2.8:1, and slate-400 is 3.28:1 - both
 * below the 4.5:1 that AA asks of text of any size, placeholders included.
 * slate-500 is the lightest that passes, so quieter had to come from the
 * typography rather than from greying it further.
 */
.mhub-admin-dasboard-bg {

    input::placeholder,
    textarea::placeholder {
        color: $slate-500; /* 4.76:1 on white. */

        /* Firefox dims placeholders by default; this puts it back, so the
           measured ratio is the one that ships. */
        opacity: 1;

        /* The same face and size as the value that replaces it - so nothing
           jumps when somebody starts typing, and nothing reads as data. */
        font-family: inherit;
        font-size: inherit;
        font-weight: 400;
        font-style: normal;
        letter-spacing: normal;
    }
}