Sample hide-body / tri-state button not using custom icon color

[TW_Tones]

Folks,

I am building a template for “tri-state toggle button” creation.

Here is an instance of the buttons you can use it to create a tristate hide body button.
hide-body-button.json (3.6 KB)

I know there are other hide-body buttons around, this is just an example to display the problem.

It has a newly discovered (by me at least) way to simplify handling three states none, yes no in a single button statement that some may find useful. See snipit below;

You can see from the code I reference three different icon tiddlers, and each of these should be a different colour but they are not.

Question: Can anyone see why the icons are not displayed in their correct colors?

Snipit;

\define hide-body-button()
\whitespace trim
   <$button  class="tc-btn-invisible" >
      <$list filter="[all[current]hide-body[yes]]" variable=~>
         <$action-setfield  $field="hide-body" $value="no"/>
         {{$:/PSaT/buttons/hide-body-button/icon-yes}}
      </$list>
      <$list filter="[all[current]hide-body[no]]" variable=~>
         <$action-setfield  $field="hide-body" $value="yes"/>
         {{$:/PSaT/buttons/hide-body-button/icon-no}}
      </$list>
      <$list filter="[all[current]!has[hide-body]]" variable=~>
         <$action-setfield  $field="hide-body" $value="yes"/>
         {{$:/PSaT/buttons/hide-body-button/icon}}
      </$list>
      <$list filter="[<tv-config-toolbar-text>match[yes]]">
         <span class="tc-btn-text"><$text text="Toggle hide-body"/>
      </$list>
</$button>
\end

[Edit] For people wanting to make use of the above code pattern note how both the actions and the lable or icon are conditional for all the three states. With the correct logic this could be extended to a single or multi-state button trivially.

Thanks in advance, Tones

[CodaCoder]

That’s strange Tones. Using colored spans works:

\define hide-body-button()
\whitespace trim
   <$button  class="tc-btn-invisible" >
      <$list filter="[all[current]hide-body[yes]]" variable=~>
         <$action-setfield  $field="hide-body" $value="no"/>
         <span style="background-color:pink">yes</span>
      </$list>
      <$list filter="[all[current]hide-body[no]]" variable=~>
         <$action-setfield  $field="hide-body" $value="yes"/>
         <span style="background-color:lightgreen">no</span>
      </$list>
      <$list filter="[all[current]!has[hide-body]]" variable=~>
         <$action-setfield  $field="hide-body" $value="yes"/>
         <span style="background-color:orange">indeterminate</span>
      </$list>
      <$list filter="[<tv-config-toolbar-text>match[yes]]">
         <span class="tc-btn-text"><$text text="Toggle hide-body"/>
      </$list>
</$button>
\end

<<hide-body-button>>

[TW_Tones]

@CodaCoder good observation. Perhaps it’s something in the svg? when you open the svg tiddlers they are colored.

here is something about SVG’s in buttons I just do not understand, and keeps biting me again and again.

[CodaCoder]

@TW_Tones

here is something about SVG’s in buttons I just do not understand

I get that, too. I half-promise myself to learn SVG in depth “one day” but I’ve yet to do that. Here’s a couple resources I read (once) and never got back to:

Three Ways to Blob with CSS and SVG | CSS-Tricks

SVG Tutorial: How to Code SVG Icons by Hand | Aleksandr Hovhannisyan

[TiddlyTweeter]

@TW_Tones

here is something about SVG’s in buttons I just do not understand, and keeps biting me again and again.

I agree. It is confusing. IMO it is because we need better grasp what is going on in TW SVG. I think it is actually easy once you “get” it. But the SVG format is seriously non-trivial. Part of the issue is how to ensure conforming of SVG to the TW supported methods. Some SVGs need to be edited in order for TW styling to apply in a standard way.

I have started, but not finished, an exploration of these issue with @morosanue at, FYI, https://github.com/morosanuae/tw-icons/discussions/2

Side note, but relevant in the sense that SVG is a major (good) part of TW, that it maybe needs more illumination?

Side note
TT

[twMat]

I didnt dive into the intricacies of this issue but just to make sure:
SVGs are not colored with ‘color:red’ but instead ‘fill:red’.

[TiddlyTweeter]

Reading this again @TW_Tones, I realised I don’t know what SVG image you are using. The image itself may be part of the issue? External CSS won’t always work with SVG’s if they have embedded styles already.

Just a comment
TT

[telumire]

This is because of these css rules (defined in $:/themes/tiddlywiki/vanilla/base) :

.tc-tiddler-controls button svg, .tc-tiddler-controls button img,
.tc-search button svg, .tc-search a svg {
	fill: <<colour tiddler-controls-foreground>>;
}

.tc-tiddler-controls button.tc-selected svg,
.tc-page-controls button.tc-selected svg  {
	fill: <<colour tiddler-controls-foreground-selected>>;
}

.tc-tiddler-controls button.tc-btn-invisible:hover svg,
.tc-search button:hover svg, .tc-search a:hover svg {
	fill: <<colour tiddler-controls-foreground-hover>>;
}

The fill you set on your icons is overridden by it.

I’d suggest that you use an individual stylesheet to set the color since you’re using three time the same icon, but if you really wish to have an icon tiddler for each color, then you can override the css by using inline css instead of svg attribute :

<svg style="fill:red"> instead of <svg fill=red>.

You wont be able to set a different color on :hover that way thought.

See this article for more info on how style specificity is calculated : Specificity - CSS: Cascading Style Sheets | MDN

TL;DR :

SVG attributes < CSS Stylesheet selector specificity < Inline CSS < !important css keyword

The link above link to this great infographic by https://specifishity.com/ :

[TW_Tones]

Thanks for this @telumire This knowledge is invaluable, it does highlight the many approaches to color in SVG’s which is perhaps why this subject is so “fraught”.

As @TiddlyTweeter asks

@TiddlyTweeter

I realised I don’t know what SVG image you are using

I got these from TWIcons but of course I can modify them as needed because they are independent from the core icons.

Perhaps a manual set of instructions to transform a SVG such as found at TWIcons into an easy to color customise SVG for use in the toolbars is all we need. Even into a form that works with hover and I can have only one tiddler for all colours in my button.

I already have instructions to convert these to an image to use as a valid favicon;

Perhaps the way to describe this is

SVG’s can be built, customised and used in so many different ways we need to provide a list of items that can or must be tweaked for various outcomes;

Possible applications of SVG and the various parameters and settings

• Making a favicon from an SVG
• using SVG in the toolbars
• Placing SVG’s inline in code/buttons
• Using a SVG as a image or logo (larger form)
• Sizing when using/transcluding SVG’s into tiddler and inline text or elements
  • eg set height and Width to a size in em eg width=“0.8em” responds to the current line height
• Customising SVG images (in different contexts)
  • Color
  • Size
  • <svg style="fill:red"> vs <svg fill=red>
  • Using styles, tiddlywiki classes, custom classes
• Other Ways of getting variations of SVG’s including core SVG’s
  • eg underline, boarders, background etc…
  • Edit to colour or delete particular elements
  • How to add unicode or text to an SVG

The easiest approach may be to list the items that limit the useability of a given SVG in different application of SVG, and allow the user to edit them to “rebase” them, then apply the parameters and settings associated with “the various parameters and settings” we document.

Then of course we will add this to the tiddlywiki.com documentation.

[telumire]

@TW_Tones

to use as a valid favicon

You can also do this dynamically with transclusion : Trick to convert the core images to SVG image for CSS background - #10 by telumire

Other useful use case for SVG : emoji icons, animations, icon with dynamic text/data, supporting darkmod, etc.

Also, a word of warning : when you want to use SVG in a CSS background, hexadecimal color values can cause issues. The “#” needs to be url encoded (because it is an url), so # must be replaced with %23.

I made a tool to do that automatically, maybe that will interest you :
https://Telumire.github.io/TiddlyTweaks/index.html#:[[$:/ThemeTweaks/FaviconWizard]]

[TW_Tones]

@telumire these look like fantastic resources I will work through them and build my own references based on these to gain a deeper understanding to start with.

What I think we may need to ask our self is ;

what preconditions exist within an existing SVG , that we may need to review or change to ensure these different uses and applications of SVG’s work

Such as in your tools, creating backgrounds and favicons, svgs as viewtoolbar items etc…

It’s the old problem of us not making an “ASS out of U & ME” that is ASSUME a svg will do as asked.

It is this variation in SVG encoding, I think, that makes it hard for many of us, to gain a holistic understanding of them, how we find them in the wild or the core and how they behave in the different places we may want to use them such as the favicon, background, toolbars etc…

[telumire]

@TW_Tones

what preconditions exist within an existing SVG , that we may need to review or change to ensure these different uses and applications of SVG’s work

The neat thing with svg is that you can use one into another, so if you worries that a svg does not contains an appropriate workspace set (xmlns attribute), you can always encapsulate the svg into another one with the workspace set (this is what my tool does).

So that’s one less worry to have

I’m not sure what others issues you could get with an SVG … maybe with a use SVG element referencing a symbol, that require the source SVG to be included into the document. However I dont think it’s a common usecase so I’m not sure it’s worth it to make a tool for that, but if you want to explain in the doc how to work with SVG then that can be useful to mention.

…Using symbols could also be a way to improve performances with svg transclusions, now that I think about it.

However IMO there are already great doc out there on the topic of SVG, so it should not really be necessary for tiddlywiki to delve into these topics with great lengths … but providing more examples relying on tiddlywiki specific features could be very useful to give an idea of what’s possible to new users.

[TW_Tones]

@telumire

tiddlywiki specific features

If these are documented with reference to vanilla SVG then the user is free to pursue generic SVG documentation knowing they can integrate with TiddlyWiki.

Where things always come undone is when there is “missing information” or dependencies that are not documented (Tiddlywiki specifics), because then you need to be a domain expert in SVG rather than only a “SVG script kiddy”. Eg to use in toolbar, or how core icons are snippets not full svg which needs the svg type set.