New: SolarizedDark Palette for TW

178 views
Skip to first unread message

Adithya B M

unread,
Jul 13, 2020, 8:28:15 AM7/13/20
to TiddlyWiki
I made adapted the SolarizedDark Palette for TW. Checkit here: http://adithyab.tiddlyspot.com/
It requres some css things to work properly (http://adithyab.tiddlyspot.com/#adithyab%2Fcss)

How to push this into the main TW repository? Should I fork and give a pull request?

Please share your comments. 

Adithya B M

unread,
Jul 13, 2020, 8:43:51 AM7/13/20
to TiddlyWiki
I had some doubts:
* How to make colours visible in the settings menu's pallette preview (look for SolarizedDark in the pallette tab at http://adithyab.tiddlyspot.com/#%24%3A%2FControlPanel)

Adithya

Jeremy Ruston

unread,
Jul 14, 2020, 5:37:56 AM7/14/20
to tiddl...@googlegroups.com
Hi Adithya

The problem with the preview swatches in control panel is a bug. I’ve filed an issue here:


If you’d like to submit the palette to the core we’ll need to avoid the attendant CSS: palettes in TW5 just consist of the palette tiddler.

Best wishes

Jeremy

--
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/0c73915a-4b47-40ca-96ee-dcee47d1ca9co%40googlegroups.com.

Adithya B M

unread,
Jul 14, 2020, 12:02:07 PM7/14/20
to TiddlyWiki
Hi Jeremy, 

I have created a made the pallette free of the attendant CSS.  I have also created a corresponding Solarized Light palette which I think is better than the current one. How to proceed?
I have spotted some bugs as well:

in $:/themes/tiddlywiki/vanilla/base

  • .tc-drop-down button.tc-btn-invisible:hover svg background-color should be the colour background to ensure that highlighted row's icon in the dropdown menu looks good when highlighed.
  • .tc-block-dropdown a:hover can be the foreground colour instead so the links can be more interesting colours (This is not a bug just a better choice IMHO)
  • In .tc-editor-toolbar: background-color: <<colour tiddler-controls-foreground>>; can be <<colour tiddler-background>> instead. Even inherit is better than the current tiddler-controls-foreground choice.
  • To remove the ouline visible on clicking in chrome, add: button, textarea, input, select {outline-width: 0;}

Bug with tag's x button fill?

In $:/core/ui/EditTemplate/tags, this code doesnt seem to work properly for some reason ():

\define tag-styles()
background-color:$(backgroundColor)$;
fill:$(foregroundColor)$;
color:$(foregroundColor)$;
\end

It outputs the following instead of actual values (I get this by inspecting the tag):

background-color:;
fill:<<colour sbase0>>;
color:<<colour sbase0>>;

Thanks for your response,
Adithya


On Tuesday, July 14, 2020 at 3:07:56 PM UTC+5:30, Jeremy Ruston wrote:
Hi Adithya

The problem with the preview swatches in control panel is a bug. I’ve filed an issue here:


If you’d like to submit the palette to the core we’ll need to avoid the attendant CSS: palettes in TW5 just consist of the palette tiddler.

Best wishes

Jeremy

On 13 Jul 2020, at 13:43, Adithya B M <bmad...@gmail.com> wrote:

I had some doubts:
* How to make colours visible in the settings menu's pallette preview (look for SolarizedDark in the pallette tab at http://adithyab.tiddlyspot.com/#%24%3A%2FControlPanel)

Adithya

On Monday, July 13, 2020 at 5:58:15 PM UTC+5:30, Adithya B M wrote:
I made adapted the SolarizedDark Palette for TW. Checkit here: http://adithyab.tiddlyspot.com/
It requres some css things to work properly (http://adithyab.tiddlyspot.com/#adithyab%2Fcss)

How to push this into the main TW repository? Should I fork and give a pull request?

Please share your comments. 

--
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 tiddl...@googlegroups.com.

Jeremy Ruston

unread,
Jul 14, 2020, 12:33:30 PM7/14/20
to tiddl...@googlegroups.com
Hi Adithya

I have created a made the pallette free of the attendant CSS.  I have also created a corresponding Solarized Light palette which I think is better than the current one. How to proceed?

A GitHub Pull Request is the preferred route for contributing changes to the core, but in a simple case like this I can add the files on your behalf.

I have spotted some bugs as well:

in $:/themes/tiddlywiki/vanilla/base

  • .tc-drop-down button.tc-btn-invisible:hover svg background-color should be the colour background to ensure that highlighted row's icon in the dropdown menu looks good when highlighed.
This seems to make an ugly white border around highlighted items:


  • .tc-block-dropdown a:hover can be the foreground colour instead so the links can be more interesting colours (This is not a bug just a better choice IMHO)
Are you referring to this rule? I don’t quite understand what change you are recommending.

.tc-block-dropdown a.tc-tiddlylink:hover {
color: <<colour tiddler-link-background>>;
background-color: <<colour tiddler-link-foreground>>;
text-decoration: none;
}

  • In .tc-editor-toolbar: background-color: <<colour tiddler-controls-foreground>>; can be <<colour tiddler-background>> instead. Even inherit is better than the current tiddler-controls-foreground choice.

This removes the grey background from the editor toolbar buttons. That’s a valid choice, but it’s not the one we’ve chosen for the core.


  • To remove the ouline visible on clicking in chrome, add: button, textarea, input, select {outline-width: 0;}
That’s interesting, and certainly improves things in Chrome (the same problem doesn’t seem to occur in Firefox or Safari). Apparently it is not recommended because it regresses accessibility, but the information I found was quite old.

Bug with tag's x button fill?

In $:/core/ui/EditTemplate/tags, this code doesnt seem to work properly for some reason ():

\define tag-styles()
background-color:$(backgroundColor)$;
fill:$(foregroundColor)$;
color:$(foregroundColor)$;
\end

It outputs the following instead of actual values (I get this by inspecting the tag):

background-color:;
fill:<<colour sbase0>>;
color:<<colour sbase0>>;
I don’t think that that code is expecting to deal with indirectly defined colours; how can the problem you’re seeing be reproduced?

Best wishes

Jeremy


Thanks for your response,
Adithya

On Tuesday, July 14, 2020 at 3:07:56 PM UTC+5:30, Jeremy Ruston wrote:
Hi Adithya

The problem with the preview swatches in control panel is a bug. I’ve filed an issue here:


If you’d like to submit the palette to the core we’ll need to avoid the attendant CSS: palettes in TW5 just consist of the palette tiddler.

Best wishes

Jeremy

On 13 Jul 2020, at 13:43, Adithya B M <bmad...@gmail.com> wrote:

I had some doubts:
* How to make colours visible in the settings menu's pallette preview (look for SolarizedDark in the pallette tab at http://adithyab.tiddlyspot.com/#%24%3A%2FControlPanel)

Adithya

On Monday, July 13, 2020 at 5:58:15 PM UTC+5:30, Adithya B M wrote:
I made adapted the SolarizedDark Palette for TW. Checkit here: http://adithyab.tiddlyspot.com/
It requres some css things to work properly (http://adithyab.tiddlyspot.com/#adithyab%2Fcss)

How to push this into the main TW repository? Should I fork and give a pull request?

Please share your comments. 

--
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 tiddl...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/0c73915a-4b47-40ca-96ee-dcee47d1ca9co%40googlegroups.com.


--
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/e41eb5b7-ed40-418a-8e26-989922619382o%40googlegroups.com.

Adithya B M

unread,
Jul 14, 2020, 2:31:04 PM7/14/20
to TiddlyWiki
Hi Jeremy,
Sorry for the confusion. I am specifically recommending:
  • For ".tc-drop-down button.tc-btn-invisible:hover svg" fill should be set to the colour 'background' to ensure that highlighted rows in the dropdown menu look good when highlighted. This would look like this: 
  • .tc-drop-down button.tc-btn-invisible:hover svg {
        fill: <<colour background>>;
    }
Screen Shot 2020-07-14 at 11.37.40 PM.png

  • .tc-block-dropdown a:hover can be the foreground colour instead so the links can be more interesting colours (This is not a bug just a better choice - using the link-foreground here makes it visually very jarring IMHO)
    • .tc-block-dropdown a:hover {   
      background-color: <<colour muted-foreground>>;
      }
    • Which would look like this:
Screen Shot 2020-07-14 at 11.43.33 PM.png
  • Making editor toolbar buttons' background transparent will make the toolbar look super cool (in dark palettes):
Screen Shot 2020-07-14 at 11.37.48 PM.png
Else it looks like this:
Screen Shot 2020-07-14 at 11.46.47 PM.png
(Because I have to choose light colours both for the link-foreground and the tiddler-controls-foreground)

Bug with tag's x button fill?

background-color:;
fill:<<colour sbase0>>;
color:<<colour sbase0>>;
I don’t think that that code is expecting to deal with indirectly defined colours; how can the problem you’re seeing be reproduced?

This problem can be reproduced by simply using this pallette: http://adithyab.tiddlyspot.com/#adithyab%2Fpalettes%2FSolarizedLight
As you said, the problem goes away if I replace all the references in the palette with their linked colours.

Cheers,
Adithya 
Reply all
Reply to author
Forward
0 new messages