feat(enketo): add background color appearances for form questions

[megha1807]

Summary

Adds new general-purpose background color appearance classes for Enketo form questions.

Changes

• Added 5 new CSS classes in medic.less under .enketo:
  • .or-appearance-background-red
  • .or-appearance-background-green
  • .or-appearance-background-blue
  • .or-appearance-background-yellow
  • .or-appearance-background-lime

How to use

In the XLS form config, set the appearance column to any of:
background-red, background-green, background-blue, background-yellow, background-lime

Notes

• Unlike the existing color appearances, these work on all question types, not just notes inside summary groups
• Existing .or-appearance-red/blue/... classes are retained for backwards compatibility
• Colors match the existing summary color palette for consistency

Closes #9893

[jkuester]

Nice! I confirmed the background colors are applied as expected. However, I think we are going to have to have some extra styling at least to change the text color to white. Here is how things look now with some different form widgets:

I am not sure about the text boxes, etc. 🤔 We could probably leave them white, but it might look better to have them be a shaded version of the same color... My main concern with that is that the different question types might need different styling. We could try to test most of them and see. 🤷

@delcroip do you have any thoughts here?

[megha1807]

Thanks for the review and screenshots, @jkuester! Good catch on the contrast.
My proposed fix:

Add color: white (or a dark shade for lighter colors like yellow/lime) to the .or-appearance-background-* classes
For text inputs/selects inside those groups, apply a slightly lighter/tinted version of the background so they stay visually cohesive but readable

I'll test across note fields, text inputs, selects, and radio/checkbox groups before pushing. Does that approach sound reasonable, or would you prefer I wait for @delcroip's input first?

[jkuester]

That proposal sounds good. I think white text should be fine. Here is the form I was using to test with: appearances.xlsx

We should be good to keep iterating on this and @delcroip can weigh in when/if he gets the chance. 👍

[megha1807]

Thanks, @jkuester! Will get started on the fixes and push an update soon.

[megha1807]

@jkuester Fixed the contrast ratios for green (#75b2b2 → #2e7d7d) and blue (#6b9acd → #2c5f9e) background colors to meet WCAG accessibility requirements. Ready for re-review!

[megha1807]

@jkuester The contrast ratios for green and blue have been fixed. The remaining CI failures appear to be pre-existing flaky integration tests unrelated to this CSS change. Ready for re-review!