CSS reset added to Navigation module's toolbar and top bar

A CSS reset has been added to the Navigation module to prevent front-end theme styles from leaking into the administrative toolbar and top bar. This reset uses the :is() pseudo-class to pair the toolbar selector with a non-existent ID, giving the entire selector the specificity of an ID.

Inside the new ruleset, the all: revert;declaration resets all descendant elements back to the browser’s default styles. This ensures the toolbar renders consistently regardless of the front-end theme.

:is(#extra-specificity-hack, [data-drupal-admin-styles]) {
  box-sizing: border-box;

  *:not(:where(svg, svg *)) {
    all: revert;
    box-sizing: border-box;

    button {
      font-family: inherit;
    }

    &::after,
    &::before {
      all: revert;
      box-sizing: border-box;
    }
  }
}

If a module or theme includes custom styling that targets the top bar, those selectors will need to be updated to use the new, higher-specificity selector.

Before

[data-drupal-admin-styles] {
  .my-button {
    /* Styles */
  }
}

After

:is(#extra-specificity-hack, [data-drupal-admin-styles]) {
  .my-button {
    /* Styles */
  }
}