Sp-dev-docs: Theme tokens in SCSS files in SPFx 1.10.0 don't work anymore

[OliverZeiser]

Category

• [ ] Question
• [ ] Typo
• [X] Bug
• [ ] Additional article idea

Expected or Desired Behavior

Theme tokens like this one border-color: "[theme: themePrimary, default: #0078d7]"; in our scss files should work as documented here: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-theme-colors-in-your-customizations

Observed Behavior

Theme tokens for css property border-color does not work.
I guess for some css properties those tokens don't work, while for others they do work. Lets take a very simple example and assign that to some div.

    background-color:"[theme: themePrimary, default: #0078d7]";
    border-top:2px solid;
    border-color: "[theme: themePrimary, default: #0078d7]";

In this case, background-color still works. But border-color does not work and always defaults to the standard blue #0078d7.

Steps to Reproduce

Add a clean spfx 1.10.0 webpart, add a div to it and add a class in your scss file and apply border and background-color as outlined above to it.
Make sure to test your webpart on a site that is not using the OOTB blue color, but has a different theme (e.g. the new teal) applied to it.

@patmill is this related to the other theming issues or simply a bug? Because in SPFx 1.9.1 it was still working for us just fine.

After downgrading our solution to 1.9.1 everything is working as expected again.

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[OliverZeiser]

As an additional info:
I just tested some more using 1.10.0-plusbeta...

The generated css in the .js file in the bundle has an entry like this for border-color that somehow gets duplicated and an additional currentcolor added:

border-color:currentcolor "[theme: themePrimary, default: #0078d7]" "[theme: themePrimary, default: #0078d7]";

where as for background-color it looks correct like this:

background-color:"[theme: themePrimary, default: #0078d7]";

So it looks like an issue during the build pipline.

[andrewconnell]

I can repro this... I agree, this does look like an issue in the build @patmill @johnguy0

[VesaJuvonen]

Ack - we'll have a closer look on this.

[JakeStanger]

It is perhaps worth mentioning that setting the color for the side does (did, I was too quick to notice this was 1.10 specific and haven't tested yet) seem to work:

border-top:2px solid;
border-top-color: "[theme: themePrimary, default: #0078d7]";

And also that the shorthand seemingly does not (I have not investigated whereabouts this seems to go wrong):

border-top: 2px solid "[theme: themePrimary, default: #0078d7]"

This has been an outstanding issue rather than something introduced in 1.10 however.

EDIT: home PC doesn't want to gulp serve (Linux...), I'll properly test this tomorrow.
EDIT 2: been ill, have not forgotten...

[StfBauer]

I investigated this issue further and it seems that the default overwrites the color as mentioned before. Instead if the default is not specified the theme color work.

To make it working just specify.

    background-color:"[theme: themePrimary]";
    border: 2px solid;
    border-color: "[theme: themePrimary]";

My guess is that this was adjusted to make it possible to theme the web part on a coloured section. The default always was in there always for failsafe reasons and was overwritten by the actually theme.

I had the same issue with other theme slots too like for example the:
"[theme:primaryButtonBackground]"

In 1.9.1 this and including shorthanded on border this also worked as I documented here:
https://n8d.at/create-an-office-ui-fabric-button-without-office-ui-fabric-in-sharepoint-online/

My guess is that the issue is caused by the update to Office UI Fabric 7.0.0 on the SharePoint online user interface too.

[dev-a11y]

Do we have any updates on this?
Issue is still with us in SPFx 1.11.0...

[riubaring]

Same here. Tried 1.11.0 and 1.11.0-plusbeta - issues still not resolved.