Material background on KTextbox

[nucleogenesis]

This is a draft for now - this should not be merged until KSelect is also available in KDS and has the same or similar styles applied.

Fixes #124
Fixes #167

• Gray #e9e9e9 background on KTextbox
• CSS changes to align things roughly like the sample field https://material.io/components/text-fields
• Changed the value given to the translate() CSS function to ensure the label is centered (original value pushed the label to the baseline)
• Add a   empty div fallback for the part of the DOM flow where the error/help message would show. A counter shows on the same horizontal line but is position: absolute; so when there is no help/error text, subsequent elements are closer to the previous one than they ought to be and they look squished.

I took this first screenshot w/ a delay feature on my screenshot extension so I could properly focus the field to show that the theme colors work still.

These are just a few more examples with error messages, text, no text.+

[nucleogenesis]

I don't recall why this is a draft "Until we get KSelect" in. I actually am okay now with merging it. The fact that KSelect will still be without the background (like in the image below) isn't super offensive compared to the images included at the top.

@indirectlylit @jtamiace do you agree?

[jtamiace]

I'm interpreting that the main benefit of waiting would be to have complete consistency once this background color change is merged in?

I guess my question is how prevalent KSelect is. If like half of them would end up with different backgrounds, may be worth waiting. If there are only a few KSelects, probably ok?

[nucleogenesis]

@jtamiace I don't think it's very prevalent. The only places I can think of are in table filters and a couple of device and/or facility settings.

[jtamiace]

Cool. It's a 👍 for me then!

[indirectlylit]

same here

[radinamatic]

Can't but notice that if we implement the text field background, contrast becomes insufficient for labels and error message placeholders.

Label	Error

[indirectlylit]

@radinamatic can you give us the darkest compliant grey value for the label case?

The error text looks much lighter than our token which should be red 700 (#d32f2f):

• https://design-system.learningequality.org/colors/#tokens-error
• https://design-system.learningequality.org/colors/#palette-red-v_700

[radinamatic]

With the red 700 (#d32f2f) foreground color, darkest compliant grey value for the background would be #F5F5F5, which is already the main background color.

Our main purple was already on the edge, so the only compliant background color would be #FAFAFA, just a notch off white 😕

(Crazy idea)
How about we make the text fields background color full white...? 😈

[indirectlylit]

How about we make the text fields background color full white...? 😈

@radinamatic for the context of this change see #167

[jtamiace]

We could also choose a darker purple from our palette that's compliant with #F5F5F5?

[nucleogenesis]

@radinamatic @jtamiace @indirectlylit I've updated to use more accessible colors - but I did not change the background to a lighter grey for reasons to be mentioned below:

WebAIM	Color	After (Before can be seen above or at https://kolibribeta.learningequality.org)
	Primary Dark
	Error

So - I darkened the purple to primaryDark which is improved - but using #f5f5f5 can have product implications because that's the color in Kolibri we use for the background of the sign in page - so you don't actually see the background that we're trying to implement.

An alternative thought is that we could change the themeTokens.error to use the slightly darker red that themeTokens.incorrect uses, which passes the WebAIM AA test (but not the AAA):

[jtamiace]

Thanks for doing this exploration @nucleogenesis!

[indirectlylit]

we could change the themeTokens.error to use the slightly darker red that themeTokens.incorrect uses

I chose these tokens somewhat arbitrarily – there was not an intentional design decision to use different red shades for the two meanings.

[nucleogenesis]

Thanks @indirectlylit - I've changed the theme to use the darker red now - will await an approval from @radinamatic and if she's good with this then will merge

[radinamatic]

primaryDark is looking much better!!! 💯

Thank you, Jacob! 👍🏽