Components

First look at all the interactive components

amp-story-interactive-quiz

font-size: 0.25em
--interactive-accent-color: dodgerblue;
--interactive-prompt-background:
β€Žβ€β€β€Ž β€Ž β€Žβ€β€β€Ž β€Žlinear-gradient(120deg, red, orange);

amp-story-interactive-poll

[chip-style="shadow"]
font-size: 0.25em
--interactive-accent-color: red;
β€β€β€Žβ€Žβ€Žβ€Žβ€Ž--interactive-prompt-background:
β€Žβ€β€β€Ž β€Ž β€Žβ€β€β€Ž β€Žlinear-gradient(120deg, red, orange);

amp-story-interactive-binary-poll

[theme="dark"]
font-size: 0.25em
--interactive-accent-color: yellow;
--interactive-prompt-text-color: rgb(0, 102, 219);

amp-story-interactive-results

font-size: 0.25em
--interactive-accent-color: #F34E4E;

Themes

Attributes to theme interactive components

Light [default]

[theme="light"]
[chip-style="flat"]
font-size: 0.25em

Light [default]

[theme="light"]
[chip-style="flat"]
font-size: 0.25em

Dark

[theme="dark"]
[chip-style="flat"]
font-size: 0.25em

Dark

[theme="dark"]
[chip-style="flat"]
font-size: 0.25em

Light shadow

[theme="light"]
[chip-style="shadow"]
font-size: 0.25em

Light shadow

[theme="light"]
[chip-style="shadow"]
font-size: 0.25em

Dark shadow

[theme="dark"]
[chip-style="shadow"]
font-size: 0.25em
--interactive-accent-color: rgb(241, 123, 12);

Dark shadow

[theme="dark"]
[chip-style="shadow"]
font-size: 0.25em
--interactive-accent-color: rgb(241, 123, 12);

Light transparent

[theme="light"]
[chip-style="transparent"]
font-size: 0.25em

Light transparent

[theme="light"]
[chip-style="transparent"]
font-size: 0.25em

Dark transparent

[theme="dark"]
[chip-style="transparent"]
font-size: 0.25em
--interactive-accent-color: rgb(236, 53, 160);

Dark transparent

[theme="dark"]
[chip-style="transparent"]
font-size: 0.25em
--interactive-accent-color: rgb(236, 53, 160);