[Enhancement] Apply current theme to RichText control (starting with border color)

[michaelmaillot]

Category

[x] Enhancement

[ ] Bug

[ ] Question

Version

Please specify what version of the library you are using: [3.12.0]

Expected / Desired Behavior / Question

When working with the RichText control, we should have the same theme used as the one on the target site.

Observed Behavior

Currently, the target site's theme isn't reflected on the RichText control:

Steps to Reproduce

• Init a SPFx project which contains the RichText control
• Start local server and display the control on a SharePoint site that has a specific theme (other than the default one)

Additional info

Maybe this issue can regroup other improvments regarding control's theme adjustments. I was thinking about #669 for example.

[ghost]

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

[michaelmaillot]

The direct resolution for the border color is to update the RichText.module.scss file and to update the border-color attribute:

.ql-active .ql-editor:active:hover {
    border-color: '[theme:themePrimary, default:#0078d7]'; // instead of $ms-color-themePrimary
}

But there are probably other updates to do in the SASS module.

I'm open to discussion about improvments and if that's ok, I can give a try on this one.

[nbelyh]

Most issues with RichText theme should be fixed with #1467
The "black" toolbar is there by design, as far as I understand. But now the theme should be reflected properly (border and active color, in particular)

[michaelmaillot]

Awesome news! Thanks for working on this and your feedback!

[michaelmaillot]

Closing this as fixed through @nbelyh's improvment, thanks again!