CSS prefix__cls-xx does not apply for svg that has in-line style due to strict CSP

[aknguyen7]

What will this achieve?

I have @use "@carbon/ibm-products/scss/components/HTTPErrors" with import { HTTPError403 } from '@carbon/ibm-products'; for the 404 page and it renders fine but I just noticed that some of the css does not apply for the svg as the images is darker compare to the design here https://carbon-for-ibm-products.netlify.app/?path=/story/ibm-products-patterns-http-errors-httperror404--with-all-props-set

Inspecting the elements it has <style> as part of the svg:

The css classes with prefix__cls-xx does not get apply since it's in-line <style> therefore it's being prevent to load due to the strict CSP policies. You would see something like

To reproduce the problem, enable the CSP policies default-src 'self'; img-src 'self' data:; style-src 'self'; script-src 'self'; frame-ancestors 'self'

I just want to note this issue, right now we have a workaround by adding these prefix__cls-xx css class to our css.

How will success be measured?

Additional information

• Designs
• Existing code
• etc

[sstrubberg]

@aknguyen7 can we get a repro?