Excellent work from everyone involved. I checked my wiki with the 5.4.0-prerelease and everything appears to be working so far. The only thing I’ve noticed is a minor cosmetic change, which is SVGs wrapped in hyperlink <a> tags now don’t honor a color: inherit rule … I poked around in the inspector but couldn’t locate any specific new rule that was overriding this.
5.4.0
5.3.8
@XLBilly do you have any thoughts on this?
It has to do whit the change of vanilla base CSS, that we use fill: currentColor now. So to change the icon color, we need to use color: something now instead of fill: something.
I do have the same problem with the link-to-tabs plugin. But not with every wiki. I currently do not know how to fix it. It’s probably a simple fix, but tricky to spot
The PR that changed the settings was: Use currentColor to style svg by Leilei332 · Pull Request #9316 · TiddlyWiki/TiddlyWiki5 · GitHub, which is in preparation to be able to use Lucide “line based” icons in the future. They are much, much smaller than, what we use now.
What helped for me was, to add the color: … definition to the svg-rule.
Something similar should work for you too.
.wltc-link-to-tab svg{
width: 1.4em;
height: 1.4em;
color: <<colour muted-foreground>>;
}
As you described, SVGs now inherit the color from the “outer” HTML A element, created by TW link-widget. By default A has blue color. …
The link-widget has a class parameter, so it should be straight forward to add a class, similar to my .wltc-... to fix the problem
Hope that helps
-m
Since using currentColor can cause conflicts, I have a new proposal:
Use a custom CSS variable --tp-svg-color for customizing the color of SVGs. The implementation may be:
.tc-body {
--tp-svg-color: #333333;
fill: var(--tp-svg-color);
}
.lucide {
fill: none;
stroke: var(--tp-svg-color);
}
We did expect that. I think the advantage of being prepared to use “native” Lucide icons, will outweigh the inconvenience to adjust some customisations with CSS.
IMO we should not “haste” with new experiments at the moment.