Hi Matt Custom properties is a neat solution.
By the way, you can avoid the double hyphen in stylesheets from being munged by restricting the parse rules active in the tiddler. For example, it’s common to use something like this to allow macros and transclusions, but disallow other parse rules: \rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock Best wishes Jeremy > On 9 Sep 2019, at 22:23, Matt DeMoss <[email protected]> wrote: > > 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] <>> 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#L45> >> https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/editor/engines/framed.js#L100 >> >> <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 >> <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 tiddly...@ <>googlegroups.com <http://googlegroups.com/>. >>> 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] <>. >> 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] > <mailto:[email protected]>. > To view this discussion on the web visit > https://groups.google.com/d/msgid/tiddlywikidev/519ac7b1-90af-4de5-97c3-9e4e9e07c9e2%40googlegroups.com > > <https://groups.google.com/d/msgid/tiddlywikidev/519ac7b1-90af-4de5-97c3-9e4e9e07c9e2%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/B4EC4784-7E83-4A9E-A62A-6BD4ED0B5A35%40gmail.com.
