Getting palette colors from JavaScript

80 views
Skip to first unread message

Matt DeMoss

unread,
Sep 5, 2019, 12:57:23 AM9/5/19
to TiddlyWikiDev
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
    );
  }


PMario

unread,
Sep 5, 2019, 3:36:56 AM9/5/19
to TiddlyWikiDev
Hi Matt,
That looks right.

The palette editor directly modifies values in the data-tiddler and the vanilla stylesheet reads it from there.
-m

Jeremy Ruston

unread,
Sep 5, 2019, 8:38:04 AM9/5/19
to TiddlyWikiDev
Hi Matt
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:


I’ve raised a ticket proposing that we add a core API for obtaining palette values, and then use it to correct those cases.


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 tiddlywikide...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/b531c512-9404-4b4e-ab23-3e471ba70e40%40googlegroups.com.

Matt DeMoss

unread,
Sep 5, 2019, 2:55:15 PM9/5/19
to TiddlyWikiDev
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 that are used to define doT templates. 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:


I’ve raised a ticket proposing that we add a core API for obtaining palette values, and then use it to correct those cases.


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.

Jeremy Ruston

unread,
Sep 9, 2019, 10:15:36 AM9/9/19
to TiddlyWikiDev
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.

To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywikide...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/7943f11b-65f6-47e4-9dac-1d0105a06eba%40googlegroups.com.

Matt DeMoss

unread,
Sep 9, 2019, 5:23:06 PM9/9/19
to TiddlyWikiDev
I gave renderText a try and can confirm it works, but I've landed on custom properties 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);
  }


Jeremy Ruston

unread,
Sep 10, 2019, 9:40:45 AM9/10/19
to TiddlyWikiDev
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



To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywikide...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/519ac7b1-90af-4de5-97c3-9e4e9e07c9e2%40googlegroups.com.

Reply all
Reply to author
Forward
0 new messages