Align the builder UI with the Default Admin theme

Problem/Motivation

The Display Builder UI uses Shoelace's own look: zinc neutrals, a sky blue accent, Bootstrap Icons and animated tooltips. Next to Drupal's Default Admin theme and the Navigation module it looks like a different product. That theme family uses Phosphor icons, its own semantic color variables (including a site's own accent color), its own button and tab styles, and tooltips that are not animated.

Some of the current styles also had accessibility problems:

• Shoelace's --sl-color-primary-600 on an active tab label gives a 4.10:1 contrast on the toolbar background. That is below WCAG AA, and axe reports it as a serious violation.
• Contextual tabs inside a collapsed sidebar get scroll buttons. These are aria-hidden but contain a focusable button (axe: aria-hidden-focus), and they keep the tab row overflowing after the sidebar opens.

Steps to reproduce

1. Use Default Admin as the admin theme, with the Navigation module enabled.
2. Open any display builder (entity view display, page layout or Views).
3. Compare the toolbar, buttons, tabs, menus, icons and tooltips with the rest of the admin UI, in both light and dark mode.

Proposed resolution

• Shoelace theme mapped to Default Adminss/shoelace_admin_theme.css, attached to the
  shoelace library and loaded after Shoelace's lig
  • It rebuilds the neutral, primary and status scales, and maps the radius, elevation, spacing, motion, typography, focus ring, form control
    and overlay tokens.
  • Every value reads a semantic --admin-color-* variable first. If that variable is missing, it falls back to the admin theme's
    own value through light-dark(). The fallback is r routes are not admin routes, so the admin theme's variablesare often not on the page. Only semantic variables are read, never primitives, as the admin theme's module compatibility guide asks.
  • Shoelace's named palettes (used as node identity coft unchanged.
• Phosphor icons: add a new assets/js/shoelace_admin.js that registers Phosphor (@phosphor-icons/core
  2.1.1) as Shoelace's default and

  system</c
      <ul>
        <li>Icon weights are set with a name suffix, for example>.</li>
        <li>Bootstrap Icons names the module used before are aliased to their Phosphor equivalents, so existing third-party island plugins still show an
  icon.</li>
        <li>All module icons (islands, twig templates, JS, storor names.</li>
        <li>The same script turns off Shoelace's tooltip show a Navigation module does.</li>
      </ul>
    </li>
    <li><strong>Component styling</strong>, following Default Admin:
      <ul>
        <li>Icon-only buttons are square and drawn as ghost butidebar toggle is.</li>
        <li>The main view tabs in the toolbar are pills, as Default Admin's primary tabs are. Other tabs are underlined secondary tabs.</li>
        <li>Menus, toggle menu items (always drawn with a checkanel, the summary hover chrome, dropzones, placeholders, layers and the sidebar are restyled.</li>
      </ul>
    </li>
    <li><strong>Accessibility</strong>:
      <ul>
        <li>The active tab label uses the admin accent: about<code>#015efe

  .

• Contextual tabs set no-scroll-controls

Remaining tasks

• Review
• Manual testing in light and dark mode on admin routes (nd theme routes (entity view display, page layout)
• Check with a custom admin accent color
• Run the Playwright accessibility tests
• Default Admin is still experimental: check core/themes/default_admin/css/_variables/variables-color-semantic.css again when core is updated

User interface changes

The builder now looks like the Default Admin theme, using its colors (including a site's own accent color), radii, shadows, spacing and typography. In detail:

• Icons change from Bootstrap Icons to Phosphor.
• Icon buttons are square ghost buttons.
• The main view tabs are pills.
• Tooltips are not animated.
• The active tab label meets the WCAG AA contrast ratio.

Screenshots: TBD

API changes

• The island plugin icon property now takes a Phosphor icon name, with an optional weight suffix (-fill, -bold, -light, -thin, -duotone). The Bootstrap Icons names the module used before are aliased, so this is backwards compatible for them. Bootstrap-only names that are not aliased will no longer show an icon.
• The default value of the icon prop on the e> component changes from window tobrowser.
• New drupalSettings.displayBuilder.phosphorPath setting.
• When local libraries are used (_shoelace_local</cstalled in <code>web/libraries/phosphor. Seedocs/install.md.

Data model changes

None.