feat: add breadcrumbs color properties, Lumo and Aura variants#11900
feat: add breadcrumbs color properties, Lumo and Aura variants#11900web-padawan wants to merge 1 commit into
Conversation
4869805 to
049414f
Compare
jouni
left a comment
There was a problem hiding this comment.
The idea was that base styles retain the distinction between links vs non-links, with the default link text color. Aura and Lumo make the opinionated decision to change that default and offer a separate variant that distinguishes between links and non-links.
The expectation is that most use cases will have all trail items as links (best practice), but in cases where some items are not interactive, the opt-in variants (accent and primary) add a bit of visual separation to them.
|
Arguably, the link underline could be handled similarly, that base styles retain it, and themes remove it. I simply felt that most themes would want the underline removed anyways, to reduce visual noise. |
a5a88f8 to
fe90d46
Compare
|
Thanks for the comments. I think we can proceed with the initial base styles PR instead. Closing in favor of it. |
049414f to
a830a01
Compare
|
Reopened and modified this PR to include both link / text color properties + Lumo and Aura theme variants. |
Expose --vaadin-breadcrumbs-text-color (defaults to var(--vaadin-text-color-secondary)) for the trail's resting text color and --vaadin-breadcrumbs-link-color (defaults to LinkText) for [part='link'] items. Base styles retain the distinction between links and non-link items via the browser's default link text color. Lumo and Aura make the opinionated decision to change that default to inherit so links and non-link items render in the same color, and ship an opt-in variant (theme="primary" on Lumo, theme="accent" on Aura) that restores a distinct link color. The expectation is that most trails have all-link items (best practice); the variants add visual separation when some items are not interactive.
a830a01 to
b4f9b9a
Compare
|



Description
Extracted from #11868
--vaadin-breadcrumbs-link-colorand--vaadin-breadcrumbs-text-colorpropertiesprimary(Lumo) andaccent(Aura) theme variants changing the link color🤖 Generated with Claude Code