Improve consistency when handling colors in surveys.

[kyleswank]

Co-authored-by: Tate wintermydog@gmail.com

💡 Motivation and Context

This was written by Tate, but due to our projects not having the ability to allow external contributors at the moment I am sort of sponsoring this. I'll let Tate explain:

Goals:
Unifying styling in PostHog Flutter SDK and fix bug where some text inherits its color directly from app context, while other elements have hard-coded colors, frequently creating invisible text within PostHog surveys.

Overview of changes:
Briefly, I tried to preserve the current theming behavior of the PostHog surveys in Flutter while unifying all the style information into survey_appearance.dart​ and providing more comprehensive coverage of theme elements to avoid cases of, e.g., invisible text.
Since directly changing the theme of surveys is supposed to be behind a paywall, I simply added more theme coverage (to hopefully include colors of all the elements that could possibly appear in a survey, especially text). For perfect functionality, you will need to update the Web UI to include theming options for the elements that were previously not covered. When you do this, you will need to update Appearance​ to receive those theme options from the PostHog API (see below for details).

Detailed changes

• Centralized all color definitions to SurveyAppearance​ class.
• Added color definitions for (hopefully) all elements that appear in surveys.
• SurveyAppearance​ color definitions are no longer nullable and are initialized with the defaults that previously appeared dispersed amongst many files.
• The following had color definitions buried in other files. I extracted them and moved them to SurveyAppearance​:
  • backgroundColor​ - white
  • descriptionTextColor​ - black
  • ratingButtonColor​ - Color(0xFFEEEEEE)
  • ratingButtonActiveColor​ - black
  • borderColor​ - Color(0xFFBDBDBD)
• New color definition coverage (need to be added to theme options in Web UI for surveys which is currently behind a paywall). These were previously inherited from the app context, therefore creating invisible text in many cases, especially with light-colored text:
  • questionTextColor​ - black
  • closeButtonColor​ - black
  • ratingButtonSelectedTextColor​ - white
  • ratingButtonUnselectedTextColor​ - black with 50% alpha
  • inputBackgroundColor​ - white
  • inputTextcolor​ - black [This is the bug I came here to fix!!!]
  • inputPlaceholderColor​ - Color(0xFF757575)
  • choiceButtonBorderColor​ - black
  • choiceButtonTextColor​ - black
• I removed the ?? Colors.[color]​ (null coalescing) blocks from the following files:
  • survey_bottom_sheet.dart​
  • question_header.dart​
  • number_rating_button.dart​
  • rating_icons.dart​
• I removed hardcoded colors from these files, instead using definitions in SurveyAppearance​
  • survey_choice_button.dart​
  • open_text_question.dart​
  • rating_question.dart
• Necessary updates to Web theme UI
  • Color options to add
    • Question text color
    • Input text color
    • Choice button color
    • Close button color
    • Description text color
    • Rating button color
    • Rating button active color

Summary of remaining issues:

💚 How did you test it?

I, Kyle, modified the style of the example app on iOS and tested against a sample survey of varying colors and styles.

📝 Checklist

• I reviewed the submitted code.
• I added tests to verify the changes.
• I updated the docs if needed.
• No breaking change or entry added to the changelog.

[github-actions]

	Fails
🚫	Please consider adding a changelog entry for the next release.

Instructions and example for changelog

Please add an entry to CHANGELOG.md to the "Next" section. Make sure the entry includes this PR's number.
Example:

## Next
- Improve consistency when handling colors in surveys ([#233](https://github.com/PostHog/posthog-flutter/pull/233))

If none of the above apply, you can opt out of this check by adding #skip-changelog to the PR description.

Generated by 🚫 dangerJS against 3e75325

[ioannisj]

@PostHog/team-surveys hey guys, since you recently worked on themes for react-native, mind taking a look at this as well?

[adboio]

thank you for this PR!!! taking a look now 😄

[adboio]

made a couple changes:

• added a function to calculate contrasting colors to match the behavior in the rest of our SDKs
• added support for textColor, inputTextColor, and inputBackground (manual text color override, supported in other SDKs)

documenting test cases, each item below was something done independently:

default survey	dark bg	light submit button	dark submit button

not everything is working yet because the native ios sdk does not parse these new fields - but i'll have another PR up to add that soon, which should get us all good!

[t8rn8r]

Thank you @adboio ! That's an even better solution than before!

[adboio]

• chore(surveys): enable thumb survey display #257
• Improve consistency when handling colors in surveys. #233 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[ioannisj]

Just a couple of comments, lgtm. Did not do a test run though
Also we should run a make format before merging

[ioannisj]

nit: Right above we use withValues(alpha: 0.5), which I think produces the same but worth standardizing and being consistent here

[ioannisj]

This will only match only purely white background. Should we be testing for high luminance values instead? e.g if backgroundColor.computeLuminance() > 0.95

[adboio]

good point, this matches all the other SDKs, but computeLuminance looks like a much better approach - can try to do something similar in other sdks too!

[ioannisj]

Did not check but is Android side consistent with these changes as well?

[adboio]

react-native, ios, and (now) flutter will all be consistent once this is merged

i didn't think android had any built-in survey UI rendering?

[marandaneto]

no, just the infra that powers the other SDKs

[marandaneto]

just unblocking here since @ioannisj did the review already