References

• Orange Design System: Modules > Local Headers:
  • Breadcrumb On White - WEB-LOC-BCR-001
  • Breadcrumb On Black - WEB-LOC-BCR-001
  • Breadcrumb On Supporting Colour - WEB-LOC-BCR-003

More info

Two cents from @ffoodd:

Well, I guess it already kind of work: to fully support colored background, I think we'd need to add some color inheritance to breadcrumb items.

.breadcrumb-item a {
  color: inherit;
}

Also the separator should get that color too, so it'd need some mask-image love:

1. set content to an empty string ("")
2. apply the SVG in var() as a mask-image (and probably set mask-size and mask-position alongside)
3. inherit color as background, thanks to background-color: currentColor;

Should do the trick! See Back-to-top link or social buttons for examples.

• Tweak breadcrumbs to use mask and inherit color, so that .bg-* utilities work on them.