NightPalette, notes and questions about ColorPalette, suggestions for TW core

[Yakov]

Hi,

as (probably) for many of us, the principles of building ColorPalette (shadow tiddler) are somewhat unclear. On the other hand, without any important task there's no need for deep consideration, so I guess for many ColorPalette stays unexplored.

! Night mode

Today I tweaked with it because I want a "night mode" colors for TWs on my mobile device and instantly got a set of questions and comments.

Basic idea was to reverse colors so that I'll get "white on black" instead of "black on white". How to do this? Well, the numbers in ColorPalette are in hexadecimal which means

1 2 3 4 5 6 7 8 9   a  b   c  d   e  f

is the same as

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Background: #fff means "maximum (f) of blue, green and red which is white".

In PrimaryLight: #18f  1 (first position) is the number, corresopnding to red (try Foreground: #f00), second one corresponds to green and the third one -- to blue. To reverse a color (#18f), one has to reverse each number.

That is done as follows:

1. make the number decimal:

1 = 1

8 = 8

f = 15

2. revert it:

15 - 1 = 14

15 - 8 = 7

15 - 15 = 0

3. make it hexadecimal again:

14 = e

7 = 7

0 = 0

So reverted number is #e70. After doing the same thing with each other number, I've got the following ColorPalette:

Background: #000
Foreground: #fff
PrimaryPale: #730
PrimaryLight: #e70
PrimaryMid: #fb4
PrimaryDark: #feb
SecondaryPale: #003
SecondaryLight: #017
SecondaryMid: #24b
SecondaryDark: #7be
TertiaryPale: #111
TertiaryLight: #333
TertiaryMid: #666
TertiaryDark: #999
Error: #f44

(I haven't reverted the Error color, instead made it more reddish).

! Questions and notes

After doing that I can see some issues [*] which I'd like to share (partially can be seen on the screenshot attached):

* in the edit mode, colors are not reverted. More precisely, those are elements with class='editor' macro='edit text' (or 'edit tags' or 'edit title')

* more generally, colors of test fields are not reverted: <<option>> and <<search>> macros are "black on white" as well

* also, scrolling bars (not sure if those are called so) are not customly styled (see the screenshot)

* what do Primary/Secondary/Tetriary and Pale/Light/Mid/Dark mean? Which of them are supposed to be the colors of fonts and which -- of background?

** for instance, I'd like to make tiddler titles orange as the most of the interface colors became, but I'm not sure if this would make some things "invisible" (orange on orange)

** studying StyleSheetColors shows that "Light" colors are used mostly for background and borders, but that is not strictly true: for instance, there's

    toolbar a {color:[[ColorPalette::TertiaryLight]];}

* some users find the annotations of ColorPalette as not helpful enough [1]. May be adding just "see StyleSheetColors" would improve it considerably:

  "These values in this shadow tiddler determine the colour scheme of the TiddlyWiki user interface, see StyleSheetColors"

  (if this looks good for others, I can create a ticket [**]; other comments on what is unclear are welcome)

* some names of slices in ColorPalette are WikiWords so create extra items in the "missing" list when it's no longer a shadow. I propose to make those start from "~" as in ToolbarCommands (again, if this sounds good, I can create a ticket)

* ColorPalette is somewhat "not visualized": when you open it, you see just numbers. Is anyone aware of some plugin that:

** automatically creates something like colorful square after each slice? I mean so that ColorPalette looks like this:

...

PrimaryDark: #feb [square colored with #feb]
SecondaryPale: #003 [square colored with #003]

...

   (though, I personally prefer table notation for such representation)

** helps in picking colors? I mean, to generate one of those #e70, you have somehow know that the color you need has this number.. 

Best regards,

Yakov.

[*] Note: all the tests were done in Opera 12.12.

[**] I have one open pull request, and don't know if I can make another one which will be separate from another

[1] https://groups.google.com/forum/?hl=en&fromgroups=#!searchin/tiddlywiki/colorpalette/tiddlywiki/Ij75uyXSfbQ/Jr25tMSnOxYJ

[Yakov]

Oh, God, I wanted to post this at the TiddlyWiki group. I reposted [1], should I delete this post here? I mean, some core stuff may be worth being discussed separetely..

[1] https://groups.google.com/forum/?hl=en&fromgroups=#!topic/tiddlywiki/llXlBx64w6M

четверг, 31 января 2013 г., 17:36:10 UTC+4 пользователь Yakov написал:

[PMario]

If you need different shades I use this tool
http://meyerweb.com/eric/tools/color-blend/

fnd's PalettViewMacro
http://devpad.tiddlyspot.com/#PaletteViewMacro

have fun!
mario

[Yakov]

Thanks Mario,

fnd's PalettViewMacro
http://devpad.tiddlyspot.com/#PaletteViewMacro
 

in the parallel thread Eric pointed to the PaletteMaker [1] which is more powerful; though, I like the simplicity of the PaletteViewMacro code which can be easily reviewed.

If you need different shades I use this tool
http://meyerweb.com/eric/tools/color-blend/

Ah, this is nice! I see, this allows to easily create those Dark/Mid/Light/Pale things. So I guess there should be also some tools to select Primary/Secondary/Tetriary, right?

In fact, I can see that some of my questions are about StyleSheetColors, not about ColorPalette. I'll write those thoughts in the discussion in TiddlyWiki group;

here, I'd like to add one more thing that looks for me useful for the core:

as <input type='text'> and <textarea> elements haven't changed after reverting the ColorPalette values, I'd propose adding

input[type="text"],
textarea { color:[[ColorPalette::Foreground]]; background-color:[[ColorPalette::Background]]; }

to the StyleSheetColors. As I can see from it (looking through rules for .viewer, .tiddler, #tiddlerDisplay and #displayArea), the background for tiddler text is inherited from the main page (Background slice) and that's I propose this slice as background for textareas, the same thing for the font color.

Not sure about the scrollbars yet, they have complicated styling and probably different support in different browsers..

Best regards,

Yakov.

[1] http://www.tiddlytools.com/#PaletteMaker

[Tobias Beer]

Hi Mario,

Nice (reminder)! I have directly added Color Blender to the @color space...

http://color.tiddlyspace.com/#%5B%5BColor%20Blender%5D%5D

Cheers, Tobias.

[PMario]

On Feb 2, 11:39 am, Tobias Beer <beertob...@gmail.com> wrote:
> Hi Mario,
>
> Nice (reminder)! I have directly added Color Blender to the @color space...
>
> http://color.tiddlyspace.com/#%5B%5BColor%20Blender%5D%5D

nice.

You'll need to add eg. to the slider text.
ColorBlender is Creative Commons Licensed [[(CC BY-SA 1.0)|http://
creativecommons.org/licenses/by-sa/1.0/]]

-m

[Tobias Beer]

Added...