How to override style of the % text inside amp poll?

Question

I'm trying to create some polls inside amp-stories using the new component, but I'm having some difficulties with styling. Is there any way of setting colour of the %text in results section separately from the bottom section background? Right now both are being set using interactive accent colour, but in some cases, that is very bright background, both colours are getting blended and the text is irreadable. I know how to do it using !important, but i would also like to pass the validation.

Answer 1

I assume you're talking about binary-polls since regular polls don't use the accent color as a background for the bottom section. There's currently no way of changing the background independently from the text in binary-polls, as they both use the same accent color for consistency.

Here there are two alternatives: you can set the theme to dark, and the accent color will be used in the prompt section (but the poll will have a dark background and white accents); or you can set the --interactive-prompt-background variable to the color you want to use as the accent, and then use a darker color as the accent that will contrast well. If the prompt has a light background, setting the text color to dark is also a good idea.

Eg:

.binary-poll-class {
    --interactive-accent-color: orange;
    --interactive-prompt-background: yellow;
    --interactive-prompt-text-color: black;
}

Feel free to file a Feature Request here to get it in the loop if the above alternatives don't work.