CSS variable to override the required form input background-image

Not possible to use CSS variable directly inside url() because it is a new whole virtual file that is manipulated so CSS variables of the current document are not available.

The MR provides UI Skins integration as well as an example in the example subtheme for compiled CSS in custom theme.

@pdureau: are you ok with that? Especially the machine names of CSS variables.

Hello,

I disagree about the introduction of a new CSS variable which doesn't belong to the Bootstrap API, and it is not ui_suite_bootstrap job to create or extend an API.

Because the color of the required mark is already the one, I suggest to hardcode the initial value:

background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23dc3545'/%3E%3C/svg%3E%0A");

And add a UI Ssins related hook/event/alter which "listen" the change of the primary color CSS variable and inject an inline CSS code if different from default.

Example if primary === navy:

<style>
.required-mark::after {
background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='navy'/%3E%3C/svg%3E%0A");
}
</style>

Thanks,

Review taken into account. Ready for new review.

Reviewed

Automatically closed - issue fixed for 2 weeks with no activity.