Complete Decoupling of Tiddlywiki Theme and Palette

[kookma]

I am working on simple and smart creating TW color palettes. There is two problems

• There are color setting in themes,
• The number of direct color setting for css selector is too much

The first idea is to completely decouple themes and color palette. This mean theme shall NOT have any direct setting of colors or statement like this <<colour page-background>>

As Jeremy suggested we should have few color setting and all other elements shall get their colors programmatically. This can be done using small script to generate a color palette with all color values as hex8.

In Color play I use color schemes (normally four basic/main colors) and then generate all colors (text color / background color) using shades and tints! Thomas ColorAction plugin can be used to check the readability! Color play has many tools to work with colors and do the fine tuning!

The interface is simple to create a new palette, test it and export it! Most elements can be set through a simple searchable UI. The issues are

• Not all elements have css selector
• Some elements get their color from other elements which makes fine tuning very tough ( I think it is best to get color from basic colors shade and tints directly)
• Thr color relation and philosophy is not clear! For example bg/fg color of editor toolbar buttons!

There is some ongoing work worth to be mentioned here

1. Thomas Palette Tool at https://tid.li/tw5/apps/palette.html
2. Chris Mood plugin at https://clutterstack.github.io/TW5-moods/
3. Color play by me at https://colorplay.tiddlyhost.com/

I would like to get feedbacks and advices by developers to help implement a simple smart palette generator with minimum number of click!

[kookma]

@Jermolene - I use the Vanilla color palette to retrieve the css selectors and then through Color Palette Studio based on the selected color scheme I tune the color of each element!

In am trying to limit this to few elements and all other elements get their color automatically! I think Thomas Palette tool is a good example of what I mean!

What do you think?

[pmario]

There is an interesting article about color-contrast. see: https://stripe.com/blog/accessible-color-systems

[pmario]

slightly OT. The article listed in the references https://programmingdesignsystems.com/introduction/ is even more interesting.

[twMat]

@kookma

I think you proposal makes sense but we'd then need a better way to create new entries in the palette dictionaries for when hacking.

Also, will this mean substantially longer palette dictionaries? I.e how many such <<colour page-background>> are there in the themes?

I'm uncertain what exactly constitutes a theme, but how about other stylesheets? Don't they contain <<colour page-background>> ? Or maybe all stylesheets are part of themes.

In your vision, what would be best practice if one creates a stylesheet and wants to colorize things?

[kookma]

I think you proposal makes sense but we'd then need a better way to create new entries in the palette dictionaries for when hacking.

That is correct!

Also, will this mean substantially longer palette dictionaries? I.e how many such <<colour page-background>> are there in the themes?

Every element inherits colors from its parent ! If you want to set explicitly color of an element, then it should have a css selector in the palette dictionary. We should keep this small.

I'm uncertain what exactly constitutes a theme, but how about other stylesheets? Don't they contain <<colour page-background>> ? Or maybe all stylesheets are part of themes.

A theme deal with layout! So all layout sizing etc ... come from theme, all coloring come from palettes.

In your vision, what would be best practice if one creates a stylesheet and wants to colorize things?
In Shiraz we do that! If a core element needs to be colorized then we need to know its css selector to customize it n our stylesheet.

Please note the ultimate goal is to find a simple way to create new palettes and control the coloring! Right now there is no clear way to do that! Part of coloring is in palette part of that in theme! If everything stored in palette then control and customizing is much more simpler! Yet we can develop scripts to generate color palette or even we can hack the current color settings simply by overwriting colors in the color palette.