fix: #3607230 Match the breadcrumb type, colour and chevron to the design

Rajab Natshahrequested to merge
issue/vartheme_bs5_horizonaid-3607230:3607230-breadcrumb-design into 1.0.x

The breadcrumb rendered with Bootstrap's defaults (16px, regular weight, link blue, underlined) instead of the design.

Matches the Figma design system (VBNGO Stylesheet, breadcrumb page, desktop molecule node 177:4255, mobile molecule 9735:1649, hover atoms 12228:5572 / 12957:6751):

  • Crumbs 12px bold on desktop, 10px bold below the md breakpoint, line height 1.35
  • Crumb colour is the design's own "text/subtle-text" token, rgba(0, 29, 56, 0.7) (its own value, not the theme's $secondary navy and not $subtle-text gray)
  • Crumb links inherit that colour and weight with no underline; on hover/focus they darken to #212529 ($gray-900) and underline, per the design's hover state
  • Divider is the small bootstrap-icons chevron (10px, weight 400) in the brand navy, with the design's 2px gap on each side
  • Line height is expressed in em so the floated divider inherits it as a length and the chevron shares the crumb's line box instead of riding above the text
  • Dark mode keeps the same treatment against a light foreground

Closes #3607230 (comment scope: breadcrumb only; the issue tracks multiple design-matching tasks for this theme).

Verified on a live Varbase 11 build in a real browser, computed styles (not class names): desktop crumb 12px / 700 / rgba(0, 29, 56, 0.7) / line-height 16.2px / no underline; divider content the chevron glyph in bootstrap-icons at 10px / 400 / rgb(13, 44, 84) with 2px gaps; real mouse hover gives rgb(33, 37, 41) + underline; at a 375px viewport crumbs drop to 10px.

components/molecules/breadcrumb/breadcrumb.css is the real compiled output of the SCSS via yarn components:build, committed as-is.

AI-Generated: Yes

Checkpoints:

  • File an issue
  • Addition/Change/Update/Fix
  • Testing to ensure no regression
  • Automated unit testing coverage
  • Automated functional testing coverage
  • UX/UI designer responsibilities
  • Readability
  • Accessibility
  • Performance
  • Security
  • Developer Documentation
  • User Guide Documentation
  • Reviewed by human
  • Code review by maintainers
  • Full testing and approval
  • Credit contributors
  • Review with the product owner
  • Release notes snippet
  • Release
Edited by Rajab Natshah

Merge request reports