Shouldn't the tag-pill-styles macro have a border-color property?

1

Let’s say that I want to remove the background color of my tags and use it on their border instead. Is it possible with css alone ? If not, the tag-pill-styles macro in $:/core/macros/tag should set the border-color too :

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

That way we can use css :

.tc-tag-label {
background:none!important;
color:<<color foreground>>!important;
border-width:2px!important;
border-style: solid;
}

Same thing for $:/core/ui/EditTemplate/tags and the tag-styles macro.
Or is there a way to do that without overriding core tiddlers ?

2

If you’re satisfied with having to do it manually for each concerned tag, then you can use this dirty trick:

In the tag tiddler (because such is needed for non-default tag appearances) you can create a custom color field. If there already is one, you can override it by creating it again. In it, you “trick” the system by injecting also a border property, e.g like so:

image
image1219×229 10.8 KB

Here you see how the background was previously set to red but you override that with a custom field that states it should be orange and with a beautifool border.

3

And if you want all tags to automatically not have a background colour and instead one-and-the-same border instead, then it should be simple to do so with a stylesheet. But I’m guessing already realized this and you want differently coloured borders, right?

4

I think css alone shall give what you want!

I use the below styles in a tiddler tagged with $:/tags/Stylesheet

.tc-tag-list-item .tc-tag-label {
background:none;
color:<<color foreground>>;
border-width:2px;
border-style: solid;
}

and it works fine! This also respects the background color for tags, their color is explicitly set!

5

I think you may be able to do this using the CSS currentColor keyword:

Something like:

.tc-tag-label {
background:none!important;
color:<<color foreground>>!important;
border-color:currentColor;
border-width:2px!important;
border-style: solid;
}
6

I think it’s not needed to use !important here. Mohammad posted a bit of CSS code, that seems to work fine. Shouldn't the tag-pill-styles macro have a border-color property? - #4 by Mohammad

7

@telumire - I read again your original post! It seems you do not want the background color and instead you want the tag color set by color field as border color! Am I right?

8

Oh wow, nice trick ! Thanks a lot @twMat ! This produce a color next to the title but it should be possible to get ride of this with CSS. That’s right, the goal here was to set different border color for multiple tags :slight_smile:

With this trick I can use transparent;border:1px solid red;color:currentColor!important in the color field to get a transparent tag pill with a border color without need for more css. Neat !

@Mohammad the issue I was pointing out here is that I though there was no way to selectively customize tags pills since there is no content-based css selector (except for :empty) and the tags does not have data attributes … I was wrong thought ! By the way, your css selector is better than mine, thanks ! I tried to increase the specificity but didnt manage to make it work somehow.

@jeremyruston I already tried to use currentColor however it does not inherit color from the background and as far as I understand the color field set the background color :confused: Altough it may be possible to do this with pseudo element after/before or a colored box-shadow and a css mask, clip path or a filter to display the text underneath but I didnt managed to find how.

9

Yes that’s right ! :slight_smile:

10

@telumire you want;

tag color set by color field as border color!

Would it not be a safer design approach to add the feature of border color than reuse the color (background)?

  • its like loosing one standard feature and replacing it with a non-standard feature.
  • Surely you could have both?, additive rather than override.
  • There are also automated ways you could populate or set a new border feature or field value.
11

Sure, another field solely for the border color would work too. However, setting the default border color to the background color is great because it allows you to easily remove the fill color of a tag pill, and it doesnt require a new field. This is great for switching themes - and it still make sense because the field is called “color” and not “fill-color” or “background-color”.

You could ALSO specify another color for the border, nothing would prevent you to do that - but that’s a new feature and not a “fix”.