Migrate Gin CSS classes from default_admin twig overrides

After landing the landmark fix for #3583486, the default_admin theme will lose Gin-specific CSS classes that provide custom styling for the top bar and breadcrumbs.

The MR !15389 adjusts top-bar--gin.html.twig to use <aside> with an aria-label for the landmark. If this change (or a similar one) modifies or removes the Gin-specific twig template, the following CSS classes will no longer be applied:

1. gin--navigation-top-bar — used in css/layout/top-bar.css for:
   • Background color (var(--admin-color-bg-surface))
   • Border styling (var(--admin-color-border-soft))
   • High contrast mode handling
   • Backdrop blur effect
   • Layout (flex display, gap, padding)
   • Dropdown menu styling
2. gin-breadcrumb — used in css/components/breadcrumb.css for:
   • Breadcrumb text styling
   • Link colors and hover states
   • Separator styling
   • Spacing and layout

Proposed Solution

Step 1: Audit current CSS dependencies

Review all selectors in core/themes/default_admin/css/ that target:

• .gin--navigation-top-bar
• .gin-breadcrumb
• .gin-breadcrumb__* (list, item, link, text)

Step 2: Migrate CSS to work without twig overrides

Either:

• Option A: Update the CSS selectors to target the new markup (e.g., <aside> with standard classes)
• Option B: Ensure the new twig template still applies equivalent classes

Step 3: Preserve visual regression test baselines

After migrating CSS, update VRT baselines to reflect the new markup structure while maintaining the same visual appearance.

Related Issues

• #3583486 — Adjust default_admin's top bar to use the landmark used with the navigation module
• #3540607 — Upstream Gin issue for color handling

Files to Review

• core/themes/default_admin/templates/navigation/top-bar--gin.html.twig
• core/themes/default_admin/templates/navigation/breadcrumb.html.twig
• core/themes/default_admin/templates/page/page.html.twig
• core/themes/default_admin/css/layout/top-bar.css
• core/themes/default_admin/css/layout/top-bar.pcss.css
• core/themes/default_admin/css/components/breadcrumb.css
• core/themes/default_admin/css/components/breadcrumb.pcss.css

Patch

See attached color-migration.patch for the proposed changes:

1. top-bar.pcss.css: Adds .top-bar selectors alongside .gin--navigation-top-bar
2. page.html.twig: Updates gin--navigation-top-bar--offset to top-bar--offset
3. breadcrumb.pcss.css: Adds nav[aria-labelledby="system-breadcrumb"] selectors for standard breadcrumb markup

Acceptance Criteria

• Todo: All gin--navigation-top-bar styling works without the Gin-specific twig template
• Todo: All gin-breadcrumb styling works without the Gin-specific twig template
• Todo: Visual appearance matches current state (VRT passes)
• Todo: High contrast mode still works correctly
• Todo: Landmark semantics are correct (<aside> with appropriate aria-label)

AI Disclaimier: Yes, AI was used in the creation of this issue.