Breadcrumb links' color

[CharpentierLucas]

Context

Find a resolution for XWIKI-21115: @breadcrumb-color doesn’t apply to links in the Breadcrumb.
Right now, the @breadcrumb-color variable only applies to the carets and the slashes in between levels of the breadcrumb. As an example, here is what this looks like when we pick a light green color for this with Iceberg defaults for the other colors:

This visualization highlights that this color is only used on a small portion of the characters in the breadcrumb. The user reported that this was an issue that all the links were not easily customizable. They currently follow the same color as the text content links. This is an issue because it prevents the user from a whole range of breadcrumb styles. Moreover, the actual use of the variable does not meet user expectations (generic name but specific application).

Possible solutions

1. Apply the @breadcrumb-color to the links in the breadcrumb. With the conditions above (and a small change in the highlighted item color at the end of the breadcrumb), this would look like:
   
   
   
   With the standard Iceberg, this would look like:
   
   
2. Introduce a new color, @breadcrumb-link-color to customize the links in the breadcrumb.

Opinion

I’d rather go with option 1. Note that we need to make sure to update the color of the last item on the default colortheme so that it’s still properly marked as different from the other items.
Option 2. makes the color themes more complex and heavy, and the benefits compared to option 1. do not warant that cost in my opinion.

Conclusion

What do you think of this issue and the solutions proposed? Do you have any idea for an alternative third solution?

---

Thanks in advance for your help on finding a correct compromise to solve this issue
Lucas C.

[MichaelHamann]

@CharpentierLucas

With the standard Iceberg, this would look like:

I didn’t expect that change when I reviewed your pull request. To me this change doesn’t look good and makes it quite non-obvious that these are links. Also, the difference between the current page and the parent page is way too subtle (but I guess that’s something you want to change?). If we want to go with option 1, I think we also need to change the default color. How does this look with other color themes?

If there is really a need to customize the link color in breadcrumbs, I think we should go with option 2 and let the values default to the standard link colors. So +1 for option 2 from me unless we really adapt the colors in all color themes.

[CharpentierLucas]

@MichaelHamann

I didn’t expect that change when I reviewed your pull request. To me this change doesn’t look good and makes it quite non-obvious that these are links. Also, the difference between the current page and the parent page is way too subtle (but I guess that’s something you want to change?)

Yup, it was the same for me, I only realized it when writing this post. That’s something I’d want to change if we go with option 1.

@MichaelHamann

How does this look with other color themes?

Darkly

Readable

Garden

Charcoal

Slate

[mflorea]

@CharpentierLucas

Yup, it was the same for me, I only realized it when writing this post. That’s something I’d want to change if we go with option 1.

What if we underline the breadcrumb links, except for the last one (corresponding to the current page)?

[CharpentierLucas]

I agree with this idea +1
I was remembered about another discussion we had about underlining the breadcrumb links for accessibility, there were a few issues with it:
A major one was that the other breadcrumbs would look heavier and that would clutter the UI in places such as the page index:

This style does not apply to other breadcrumbs so we wouldn’t need to underline the other breadcrumbs.

---

@tkrieck What do you think of the issue and the solutions we’re looking into to provide an improvement to the breadcrumb color customization feature?

[mflorea]

@CharpentierLucas

A major one was that the other breadcrumbs would look heavier and that would clutter the UI in places such as the page index

I can see how the underlined links in the breadcrumb can feel heavy, but IMO those are inline links, and AFAIU the recommendation is to underline inline links. One benefit I see (especially in the live data where the tree dropdown caret is missing) is that it makes it more clear that those are multiple links and not a single link. The slash separator between the breadcrumb elements is very pale and can easily be mistaken of having a bluish color.

[tkrieck]

@CharpentierLucas

What do you think of the issue and the solutions we’re looking into to provide an improvement to the breadcrumb color customization feature?

I agree that underlining them everywhere will fell very heavy with the default styles. However, while researching this for Cristal, I came across the CSS properties text-underline-offset and text-decoration-colorto mitigate the problem (I think you even commented on this). They seem to be well supported, and we could have something like this little test below, where I increased the offset to 3px and applied #595959 as underline color. As you can see, we can have a great deal of agency over this, and maybe even expose these new variables for user customization.

Note: this screenshot was done very quickly in Chrome’s dev tools and there are a lot of inconsistencies.

Edit: and I forgot to answer the question about options, lol, my bad. But I would go for option 2 and create @breadcrumb-link-color. We need to remember that when customizing, the user is expecting options and not having control over something can feel frustrating. Ex.:“Why can I customize the breadcrumb text and background color but not the links?”.

This is valid also for @breadcrumb-active-color

[CharpentierLucas]

Thank you for your feedback!
It seems that the consensus goes towards option 2.
The default style will not be changed, but an extra variable will be introduced in the Flamingo colorThemes and their customization UI .