Tiddlywiki Color Template: Too many colors to be set

288 views
Skip to first unread message

Mohammad Rahmani

unread,
Mar 11, 2021, 11:52:59 AM3/11/21
to tiddl...@googlegroups.com
Referencing to Tweakable colour palette

2. Open the Advanced search 
3. In the filter tab enter [[$:/palettes/Vanilla]indexes[]count[]]

You see there are 132 css selectors!

Trying to create a new template is a BIG headache!



Best wishes
Mohammad

clutterstack

unread,
Mar 11, 2021, 8:56:14 PM3/11/21
to TiddlyWiki
Hi Mohammad,

I very much agree that the palette is very uncomfortable to tweak selector-by-selector.

I think this has grown organically and cleaning it up (or rethinking the impact of changing it) is a tedious job. What breaks if we don't have all the selectors currently in Vanilla? I haven't investigated (except occasionally by accident, ha).

There are a bunch of "wikilist" ones at the end that I think are for TiddlyDesktop(?) and so add to the number without making the TW theming more complicated.

I haven't looked (and I should, if I'm going to be playing with this sort of thing), but I would guess that there are themes out there that don't need Vanilla, with fewer selectors.

I'm rambling. I agree with what you say. At the moment, it seems to me that grouping some selectors together, as I'm doing, but perhaps a bit less aggressively (or more aggressively?) will make it easier for users to make themes without making any changes to the core.

Thomas Elmiger and Jeremy have evidently been thinking about colour and colour harmony tools for some time, from the thread you referenced (Jeremy's response and TT's link to telmiger's colour tools page).

Best,
Chris

Mohammad Rahmani

unread,
Mar 11, 2021, 11:50:30 PM3/11/21
to tiddl...@googlegroups.com
Hi Chris,
 Thank you for your reply!
  Yes, I think so, getting to sort out the vanilla palette and try removing extra selectors is a tough job!
 I like to know what Jeremy thinks about this.


Best wishes
Mohammad


--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/391bb0be-beb1-49be-b5b8-7db652f773e6n%40googlegroups.com.

Jeremy Ruston

unread,
Mar 13, 2021, 8:41:41 AM3/13/21
to TiddlyWiki Group
Of the 123 selectors, an awful lot fall into some special categories like diffs, alerts, modals, and TiddlyDesktop’s wikilist. Adding foldable groups to the palette editor would go a long way to making things more comprehensible.

Ideally, the user would select a handful of cornerstone colours and there would be sensible defaults to ripple them through the specific entries, most of which should be expressed in terms of those cornerstone colours.

To do that, we’d probably need some colour mixing macros, so that one could set a palette entry to, say, the primary colour at 50% brightness.

Best wishes

Jeremy

Thomas Elmiger

unread,
Mar 13, 2021, 11:41:22 AM3/13/21
to TiddlyWiki
To do that, we’d probably need some colour mixing macros, so that one could set a palette entry to, say, the primary colour at 50% brightness.

Here’s a plugin that offers a lot of functions for exactly this kind of colour variants:

Maybe a good starting point for something baked into the core?

Cheers,
Thomas

Thomas Elmiger

unread,
Mar 13, 2021, 11:57:50 AM3/13/21
to TiddlyWiki
Ideally, the user would select a handful of cornerstone colours and there would be sensible defaults

That was my intention too, but I did never find the time to finish the idea. Something like this:


Note 1: All colours are present as a sample here, something the standard palette editor does not offer. (Colours defined as rgba(0,0,255,0.25) or <<colour muted-foreground>> seem to be black there.)

Note 2: The testing section at the bottom where you should be able to see the consequences for important elements.

Have a nice weekend, you all!
Thomas

Mohammad Rahmani

unread,
Mar 13, 2021, 3:05:38 PM3/13/21
to tiddl...@googlegroups.com

Hi Thomas


Best wishes
Mohammad


On Sat, Mar 13, 2021 at 8:11 PM Thomas Elmiger <thomas....@gmail.com> wrote:

To do that, we’d probably need some colour mixing macros, so that one could set a palette entry to, say, the primary colour at 50% brightness.

Here’s a plugin that offers a lot of functions for exactly this kind of colour variants:

This is awesome and it can be very handy in creating a palette!

Maybe a good starting point for something baked into the core?

Yes, It is important to have some color handling macro here!


Cheers,
Thomas

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

Mohammad Rahmani

unread,
Mar 13, 2021, 3:07:00 PM3/13/21
to tiddl...@googlegroups.com



Best wishes
Mohammad


On Sat, Mar 13, 2021 at 8:27 PM Thomas Elmiger <thomas....@gmail.com> wrote:
Ideally, the user would select a handful of cornerstone colours and there would be sensible defaults

That was my intention too, but I did never find the time to finish the idea. Something like this:


Note 1: All colours are present as a sample here, something the standard palette editor does not offer. (Colours defined as rgba(0,0,255,0.25) or <<colour muted-foreground>> seem to be black there.)


Lovely!

 
Note 2: The testing section at the bottom where you should be able to see the consequences for important elements.

Is there any list to recognize the important elements?

 

Have a nice weekend, you all!
Thomas

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

Thomas Elmiger

unread,
Mar 13, 2021, 4:19:22 PM3/13/21
to TiddlyWiki
Is there any list to recognize the important elements?

But it depends both on the design and the usage.
Example for theme complexity: I found it really hard to style a theme with bright colours (dark font on light background) in the story river and dark mode (bright fonts on dark background) in the sidebar.
Examples for usage importance: The saving confirmation popping up in the top right corner is important for folks like me using the single page version and a browser plugin. It might be less important for people working on Node.js.

By the way, you can see that my solution is not working for all colour definitions. In CSS and in TiddlyWiki you can define a colour value as "inherit" – but it is impossible to test that with my macros.

Hovering over the test lines with the mouse will show you the macro input (near the border) and the output colours tested.

All the best,
Thomas

Álvaro

unread,
Mar 13, 2021, 9:12:26 PM3/13/21
to TiddlyWiki
Maybe we are dealing with this problem in the wrong way. 
  • 132 selectors are too many to group directly
  • It is also a headache to try to do it with 50-60 colors that there are in Vanilla (this was the way that I tried long ago)

However there are 15-20 colors in ContrastLight palette. We could do the groups more easily and also separate selectors of "special categories" commented by Jeremy.

When I tried it I thought that TWCrosslinks (by akhater) could be useful to move selectors between groups.

Mohammad Rahmani

unread,
Mar 14, 2021, 12:15:24 AM3/14/21
to tiddl...@googlegroups.com
Hi Thomas,

On Sun, Mar 14, 2021 at 12:49 AM Thomas Elmiger <thomas....@gmail.com> wrote:
Is there any list to recognize the important elements?

But it depends both on the design and the usage.

Thank you! I think this is a good start! I think it is also useful to have all possible items (e.g text, links, button, other inputs edittext, range, ...) to test in the above readability tiddler.

Example for theme complexity: I found it really hard to style a theme with bright colours (dark font on light background) in the story river and dark mode (bright fonts on dark background) in the sidebar.
Examples for usage importance: The saving confirmation popping up in the top right corner is important for folks like me using the single page version and a browser plugin. It might be less important for people working on Node.js.

By the way, you can see that my solution is not working for all colour definitions. In CSS and in TiddlyWiki you can define a colour value as "inherit" – but it is impossible to test that with my macros.

Hovering over the test lines with the mouse will show you the macro input (near the border) and the output colours tested.

Yes, I found it really tough! I am not sure if it is possible to start with a theme+palette from scratch! and build build everything on top of them.

 


All the best,
Thomas

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

Mohammad Rahmani

unread,
Mar 14, 2021, 12:24:40 AM3/14/21
to tiddl...@googlegroups.com
Hi Jeremy,


On Sat, Mar 13, 2021 at 5:11 PM Jeremy Ruston <jeremy...@gmail.com> wrote:
Of the 123 selectors, an awful lot fall into some special categories like diffs, alerts, modals, and TiddlyDesktop’s wikilist. Adding foldable groups to the palette editor would go a long way to making things more comprehensible.


So, we can with much smaller set!

 
Ideally, the user would select a handful of cornerstone colours and there would be sensible defaults to ripple them through the specific entries, most of which should be expressed in terms of those cornerstone colours.


Do you recommend having a dynamic stylesheet or have a tool to create the static stylesheet? The question is true for the color palette.
 

To do that, we’d probably need some colour mixing macros, so that one could set a palette entry to, say, the primary colour at 50% brightness.

In color play I have used a small blend macro (JS) to create shades and tints the outs are acceptable and you can mix any other color. It uses a simple formula like below:

// 4: blend
var color3 = [ 
(1 - percentage) * color1[0] + percentage * color2[0],
(1 - percentage) * color1[1] + percentage * color2[1],
(1 - percentage) * color1[2] + percentage * color2[2] ];
 

(see: https://colorplay.tiddlyhost.com/#Color%20Scheme%20UI%20with%20Stripe)
other properties like alpha value can be added.

Mohammad

unread,
Mar 17, 2021, 4:05:14 AM3/17/21
to TiddlyWiki
Hi Thomas,
 It seems there is a problem with the site!
 Would you please have a look?

Thomas Elmiger

unread,
Mar 17, 2021, 6:45:33 AM3/17/21
to TiddlyWiki
Hi Mohammad (and all others),

My hoster moved tid.li to a new server today and the SSL certificates seem still to be in the renewal process. So please try again later (or try the button "accept the risk" in your browser if you dare).

All the best,
Thomas

Mohammad Rahmani

unread,
Mar 17, 2021, 6:48:11 AM3/17/21
to tiddl...@googlegroups.com
Hi Thomas,
 Many thanks for clarification!


Best wishes
Mohammad


--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/9d8e9153-c7b3-475c-a90a-2bd5d882b68fn%40googlegroups.com.

David Gifford

unread,
Mar 17, 2021, 10:31:15 AM3/17/21
to TiddlyWiki
I enjoyed this discussion! It would help to organize the colors by topic, then list them in order from general to specific.

Global UI styles (i.e., page, tiddler, basic sidebar)

Global backgrounds
  • General background
  • Page background
  • Sidebar background
  • Tiddler background
  • etc
Global foregrounds (text)
  • e.g., sitetitle, etc
Global links
Global borders

Specific UI element styles

Alerts
Buttons
Code
Dragger
Dropdowns
Dropzone
Modals
Tabs
etc

Mohammad Rahmani

unread,
Mar 17, 2021, 12:05:23 PM3/17/21
to tiddl...@googlegroups.com
Hello Dave,
 Thank you for the suggestion! 
Based on Jeremy and Thomas discussions I think the best is to have four to six main colors (scheme/mood)
and then every item gets its color (foreground/background) automatically! Users can then do fine adjustment!

The categories you suggested can be very useful for developing the code to adjust the colors of different elements.

I am still digging to see what is the philosophy behind the current design! I could not find a logic to be able to set colors programmatically!
For example the foreground color of view toolbar controls is used for the background of editor toolbar control!!
I am thinking if I can develop a new base palette but it is a lot of work.


Best wishes
Mohammad


--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages