Palette Manager - Test Version

Developers
#1

Screenshot

palette-manager-wip-04

General ideas for the new preview function

  1. It should be easy to see, what changing colours does to the wiki UI
    1.1 All previews should show “live” UI elements (if possible) so interaction is possible
    1.2 Especially hovering and selecting UI elements
    1.3 There should be a visual connection between the colour and the UI elements
  2. Users should be able to add new previews on their own
  3. Existing previews should be easy to overwrite or hide
  4. Replacing or hiding the whole existing system should be easy. So users can use their own code if needed
  5. Search / Filter is possible
  6. <<colour search is possible
  7. Undo is possible
  8. Focus on an element is possible

Known issues:

  • There is no undo yet
  • Some colours don’t have an effect in the UI yet. That’s not a new problem, but now it is obvious. Investigations are ongoing.

Demo

Demo: Palette Manager — EXPERIMENTAL

Have fun!

Feedback is very welcome.
This code should have a chance to be part of the core in the future.

6 Likes
How Can I Overwrite the Basic Theme: Vanilla?
Palette Manager Teaser :)
#2

On 2022.08.30 at about 9:00 UTC+2 – I did remove the download link … Sorry for the inconvenience. 14:00 UTC+2 … The link is back :sweat_smile:

#3

This is a great job and a step toward having a better hackable palette.
The good point is I see some missing colors are added.

#4

If you know other colours that are part of the vanilla-base stylesheet already and should be in the manager too, just let me know.

As I wrote in the intro. It shuold be easy for users to add their own previews too.

2 Likes
#5

Gruvbox dark has alert-highlight but it is the same internal link color.
I am not sure if these shall be corrected or not.

#7

Hi folks,
I did remove the download-link to the bundle code in the OP, to be able to replace it with a link to a plugin, for easier management.

Sorry for the inconvenience … but I try to be quick.
-mario

4 Likes
#8

Sorry mario but where is the link to get the demo. Its not overy obviouse.

1 Like
#9

@TW_Tones I did update the OP with a link to the demo edition, to play with. No need to export import something. … More info about the plugin and the intended use can be found at the demo page

3 Likes
#10

Great work @pmario. I like this a lot. The preview feature is great!

#11

@pmario this is looking great. As I understand it, to make each example work you need some inside knowledge to make a custom preview. It seems to me at this point it would be worth capturing such information and provide it as additional info to the class in question. perhaps behind an icon eg;

  • Stylesheet source $:/themes/tiddlywiki/vanilla
  • [[AlertMechanism]] <<tag $:/tags/Alert>>
#12

A little off-topic

Hi Mario,
Is there any benefit using color macro instead of css variables? I mean while you can use CSS standard like below

color: var(--somebasecolor)

Why still we use

color: <<macro somebasecolor>>

If it was possible to define a set of base colors and then use of calc+var in css to create all shades, colors for other elements, that would be great.

Some references:

  1. Generating Shades of Color Using CSS Variables - Jim Nielsen’s Blog (jim-nielsen.com)
  2. What do you name color variables? | CSS-Tricks - CSS-Tricks
2 Likes
#13

A short update —

I think, I did improve the functionality quite a bit. … The following functions will be published soon.

  • A search field
  • Search can also handle <<colour xxx, which is a tricky filter
  • The workflow for “editing / cloning” is improved
  • Undo colour changes since clones know the “origin” now.
  • The preview elements got a “focus” button, which will allow us to limit the number of colours shown at the same time
3 Likes
Disable alpha sort order for Palette Manager?
#14

Hi Folks,
I did just update the OP with a new screencast and the plugin is live at the demo page

This is still experimental, but I think it’s pretty usable already. It would be nice if someone would have a look at the existing palettes … AND fix them. They have some flows. … most of them.

have fun!
Mario

2 Likes
#15

I appreciate your work on this. I think it’s great to have previews and annotations inline with the editor!

I am also working on making some adjustments to my wiki’s palette manager. I want to convert each definition’s hex code to HSL and be able to sort on each of the three components.

I’m having a bit of difficulty finding where the color macros output the actual hex code of the color input fields.

Anyway, I think it would be nicer if, for each entry in the index, it always showed just one color input field, and that it correspond to the actual color. There could be a little link icon that shows when it is referring to another style definition, with a link to that definition. If another color is selected via the color input field or the text box, that link would disappear. And if there could be three ways to specify a color: 1. input the hex etc code, 2. choose a color from the input field, 3. choose an already specified color – a little drop-down box with tiny swatches perhaps – I think that would be ideal.

Also I’d like to “plus plus” the idea of having LESS-style variables in play, which might be achievable now with pure CSS, wherein one can specify shades of colors easily, ala <<red lighter 20%>>

1 Like
#16

This is a pure CSS darken/lighten color method. I think this can easily added to Palette manager

Darken and Lighten colors with CSS | kevingimbel.de — Web Development, DevOps, and everything in between.

#17

@JenniferS
I highly support improvement of current color/colour macro and palette. If they could work with hsl, then there is a huge flexibility to play with color.

Macro color can be extended to accept more parameters like alpha/filter, etc.

2 Likes
#18

Can’t lie, this is really nice to use when modifying color palettes.

I just used it to make a nice alternative to the contrast (dark) and the live examples were fantastic for the parts I actually wasn’t aware of.

I don’t have anything so far as a critique yet, but just wanted to say that this will make for a fantastic addition to the default tiddlyWiki, IMO

1 Like
#19

Thanks for the feedback.

It is intended to be part of the core. … In the meantime I did create a new colour-widget, that is specifically designed to be able to work with resolved colour values. … So instead of an initially “black” color-picker, it will start with the “real” colour given by any <<colour xx or any other future colour-macro.

I hope to push the new test version very soon.

2 Likes
#20

This thread will be closed in favour of the new one:

#21