[UX] Restyle global breadcrumbs

[joshuarrrr]

As a follow-on to #1583 and a supporting feature for #1248, we'd like to enhance the breadcrumb component in the global header to be more useful and integrated into the overall look and feel.

[kavilla]

Adding @kaddy645 as they will develop this.

[kavilla]

This should not include any breaking changes.

[KrooshalUX]

Here are the proposed look & feel updates to breadcrumbs:

Current Design:

Proposed Design:

Details:

What to retain:

• Retain current truncation rules for breadcrumb titles
• Retain current breadcrumb step truncation logic
• Retain typography treatment

What to update:

• Remove auto generated “/” characters between breadcrumb steps
• Introduce background shapes with the following details:
  • Colors:
    • Active / Current Breadcrumb Step : #b9d9eb
    • Inactive / Previous Step: #d9e1e2
  • Shape:

    • Global:

      • Corner Radius: 2px
      • Spacing: Steps within breadcrumb appear to have a gap and never intersect
      

    • Single Breadcrumb and/or First Breadcrumb Step: Left rectangular end scalable to fit using current truncation rules, right angle end
      

    • Second and all following breadcrumb steps: Left angle end, rectangular center scalable to fit using current text truncation rules, right angle end.
      

    • Previous step retains background treatment, but color changes from Active/Current step to Inactive/Previous Step
      

    • Truncated Step: Updated alignment, padding and color (#002A3A)