Adding a data-sauce-inverted-text attribute to any element will make its children use white text. This is called "inverted text" instead of "light on dark" or "white" because we might not be rendering white in all cases. If a user has requested dark mode then the result of "inverted" text would flip it from light text to dark text.
I've added some extra stuff to style links inside inverted text blocks too. No designer input there, but we can start using this and adjust those if necessary.
To use:
Make sure your app has imported the src/utilities sass file
Adding a
data-sauce-inverted-textattribute to any element will make its children use white text. This is called "inverted text" instead of "light on dark" or "white" because we might not be rendering white in all cases. If a user has requested dark mode then the result of "inverted" text would flip it from light text to dark text.I've added some extra stuff to style links inside inverted text blocks too. No designer input there, but we can start using this and adjust those if necessary.
To use:
src/utilitiessass filedata-sauce-inverted-textwherever you need toI've added a "with inverted text" example to the ImageBlock stories in the pattern library, so we can see the Astro Pi example from the Teach page with this utility applied: https://5f2aad1fe0f1e10022ff9403-ftxzaqprjp.chromatic.com/?path=/story/components-raspberry-pi-image-block--with-inverted-text-utility