Announcing Confluence Cloud Theming Preview for Developer Canary Program

@UmeshChaudhary For SVGs, you could rely on using the currentColor CSS attribute in your stroke or other color-related attribute. Then you set the text color to a design token, such as color: var(--ds-text, #000000). You can also use design tokens IN your SVGs if you’d prefer - it just depends on your use case.

@DeepakSharma Apologies for any confusion on this. This ticket was ONLY to support CSS variables for providing design tokens in the markup of static content macros. If there are additional CSS properties you would like to use in static content macros that are currently being filtered out, please create a new Suggestion. It was only a bug that tokens were filtered out - not generically any CSS. We have strict whitelisting for security purposes - since static content macros are rendered directly into the Confluence page and not via iframe as is the case with dynamic content macros. We can evaluate additional whitelisting based on request and importance. The good news is that enhancing this sanitization will be simpler now that we have done it for the tokens.

An example template for a static macro using design tokens would look like this:

{{!< layout}}
<span
        style="border-radius:4px;padding:4px;color:var(--ds-text-accent-lime, #32CD32);border-color:var(--ds-border-danger, #FFFF00);border-style:solid;"
        class="cc-eco-test-macros-block-output">
    Static Content Macro using design tokens for colors
</span>
1 Like

Hello @AlexWhite ,

I am unable to implement the suggested solution for svg images. The svg is generated on server side by third party library and is sent as xhtml. Here is the sample code on how we are utilizing it.

        let modifiedSvg = out.svg.replace(/fill="[^"]*"/g, 'fill="var(--ds-text, #fffff)"');

        // Now you can use modifiedSvg in your XHTML

        const xhtml = '<img data-theme="dark" data-color-mode="dark" style="' +
          out.style +
          '; height:' +
          out.height +
          '; width:' +
          out.width +
          '; font-size: inherit; display: inline-block;" src="data:image/svg+xml, ' +
          encodeURIComponent(modifiedSvg) +
          '"/>';
        res.send(xhtml);

here is full output from svg:

<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="5.399ex" height="6.176ex" style="vertical-align: -2.505ex;" viewBox="0 -1580.7 2324.5 2659.1" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" aria-labelledby="MathJax-SVG-1-Title">
<defs aria-hidden="true">
<path.....>
</defs>
<g stroke="currentColor" fill="var(--ds-text, #fffff)" stroke-width="0" transform="matrix(1 0 0 -1 0 0)" aria-hidden="true">
<g transform="translate(167,0)">
<g transform="translate(-11,0)">
 <use xlink:href="#E1-MJMAIN-31" x="0" y="650"></use>
 <use xlink:href="#E1-MJMAIN-33" x="0" y="-750"></use>
</g>
<g transform="translate(1490,0)">
 <use xlink:href="#E1-MJMAIN-32" x="0" y="650"></use>
 <use xlink:href="#E1-MJMAIN-34" x="0" y="-750"></use>
</g>
</g>
</g>
</svg>

can you take a look at the approach and provide possible solution on this one? Am i missing something?

1 Like

Thank you @AlexWhite for the example. Could you please also add an example with SVG image?

@AlexWhite we are still waiting for your response to above query. Please give us update.

@AlexWhite please update us, we are still waiting!