I would recommend a solution that only requires 5.2.2+ features, detailed at the end of the documentation for HTML in WikiText:
In an extension to HTML, TiddlyWiki also supports accessing individual CSS styles as independent attributes. For example:
<div style.color="red">Hello</div>The advantage of this syntax is that it simplifies assigning computed values to CSS styles. For example:
<div style.color={{!!color}}>Hello</div>
Edit: I now notice the reason for the wikify and will edit this answer accordingly.
I wrote custom filter functions to replace the color macro, but which will retrieve the actual value from the pallet (recursively) without needing to use <$wikify>:
\define colorRegexp() <<colou?r .*>>
\define removeRegex() <<colou?r |"|'|>>
\function getColor(c) [{$:/palette}getindex<c>!is[blank]] ~[[$:/palettes/Vanilla]getindex<c>!is[blank]] ~[[$:/config/DefaultColourMappings/]addsuffix<c>get[text]] :map[function[recolor],<currentTiddler>]
\function recolor(c) [<c>regexp<colorRegexp>] :then[<c>search-replace:g:regexp<removeRegex>,[]split[ ]!is[blank]first[]] :map[function[getColor],<currentTiddler>] :else[<c>]
This allows you to do things like this:
<div style.color=<<getColor foreground>> style.background-color=<<getColor table-header-background>> >
(contents)
</div>
I’m American, so I spell it “color,” but you can name the functions whatever you like.
As @pmario points out, if you need styles that can’t be hardcoded, then using classes and adding stylesheets is a good idea. I would add:
- A link to the documentation on using stylesheets
- A note that, since stylesheets themselves can contain variables (which will be wikified there), you’ll probably be able to hardcode the class in most cases