I gave renderText a try and can confirm it works, but I've landed on custom
properties <https://developer.mozilla.org/en-US/docs/Web/CSS/--*> as the
way of getting styles from user palettes into the shadow DOM.
There was another wrinkle: the '--' needed to define a custom property
would get converted into an n-dash! Another macro at the top of the style
sheet solves the issue.
The stylesheet looks like this:
\define custom-color(name, color)
<$text text="""--$name$: """ /><<colour $color$>>
\end
/*
The macro is necessary because tiddlywiki will munge '--'
Trying to be clever with inserting a comment inside the '--' didn't work.
*/
to-do {
<<custom-color hover-background-color message-background>>;
<<custom-color hover-foreground-color message-foreground>>;
<<custom-color delete-background-color diff-delete-background>>;
<<custom-color delete-foreground-color diff-delete-foreground>>;
<<custom-color remove-button-background-color
sidebar-tab-background-selected>>;
<<custom-color remove-button-border-color sidebar-tab-background>>;
<<custom-color remove-button-foreground-color sidebar-muted-foreground>>;
}
And the style inside the shadow DOM looks like this:
div.line-item:hover {
background-color: var(--hover-background-color);
color: var(--hover-foreground-color);
}
On Monday, September 9, 2019 at 10:15:36 AM UTC-4, Jeremy Ruston wrote:
>
> Hi Matt
>
> Here’s a snippet for parsing a string of wikitext and rendering it as
> plaint text. It’s a bit clumsy because of the import pragma required to
> obtain the “colour” macro:
>
> $tw.wiki.renderText("text/plain","text/vnd.tiddlywiki","\\import
> [[$:/core/ui/PageMacros]]
> [all[shadows+tiddlers]tag[$:/tags/Macro]!has[draft.of]]\n<<colour
> background>>")
>
> Best wishes
>
> Jeremy.
>
> On 5 Sep 2019, at 19:55, Matt DeMoss <[email protected] <javascript:>>
> wrote:
>
> I could also work with a method that lets you evaluate a macro or a
> snippet of wikitext. I'm unsure if that exists already.
>
> Or, I could possibly change how I define my templates. Right now they are
> html
> files
> <https://github.com/mdemoss/TW5-TimeTodo/blob/master/html/todoList.html> that
> are used to define doT templates
> <https://github.com/mdemoss/TW5-TimeTodo/blob/master/js/todoList.js#L10>.
> I'm mostly happy with how this works, but I wonder if I haven't missed a
> way of defining templates for custom elements that is more in line with how
> things are usually done in TiddlyWiki.
>
>
> On Thursday, September 5, 2019 at 8:38:04 AM UTC-4, Jeremy Ruston wrote:
>>
>> Hi Matt
>>
>> Is there a recommended way of getting palette colors in JavaScript? I
>> think I need this for working with HTML custom elements where CSS outside
>> of the shadow shadow DOM cannot apply.
>>
>> This is what I'm doing right now:
>>
>> twColor(colorName){
>> return $tw.wiki.extractTiddlerDataItem(
>> $tw.wiki.getTiddlerText("$:/palette","$:/palettes/Vanilla"),
>> colorName
>> );
>> }
>>
>>
>>
>> There’s a bit more to it than that because palette colours can indirect
>> through to other colours (e.g. in the default “Vanilla” palette, the colour
>> "blockquote-bar” is set to "<<colour muted-foreground>>”).
>>
>> But, it turns out that the core erroneously uses the above technique in a
>> recent update to the framed editor:
>>
>>
>> https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/editor/engines/framed.js#L45
>>
>> https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/editor/engines/framed.js#L100
>>
>> I’ve raised a ticket proposing that we add a core API for obtaining
>> palette values, and then use it to correct those cases.
>>
>> https://github.com/Jermolene/TiddlyWiki5/issues/4242
>>
>> Best wishes
>>
>> Jeremy
>>
>>
>>
>>
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "TiddlyWikiDev" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to [email protected].
>> To view this discussion on the web visit
>> https://groups.google.com/d/msgid/tiddlywikidev/b531c512-9404-4b4e-ab23-3e471ba70e40%40googlegroups.com
>>
>> <https://groups.google.com/d/msgid/tiddlywikidev/b531c512-9404-4b4e-ab23-3e471ba70e40%40googlegroups.com?utm_medium=email&utm_source=footer>
>> .
>>
>>
>>
> --
> You received this message because you are subscribed to the Google Groups
> "TiddlyWikiDev" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected] <javascript:>.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/tiddlywikidev/7943f11b-65f6-47e4-9dac-1d0105a06eba%40googlegroups.com
>
> <https://groups.google.com/d/msgid/tiddlywikidev/7943f11b-65f6-47e4-9dac-1d0105a06eba%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
>
>
>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywikidev/519ac7b1-90af-4de5-97c3-9e4e9e07c9e2%40googlegroups.com.
