[PP-1] Improve the perceptibility of contextual link buttons

Ok, lets minimize the SVG and have it use the ButtonFace so it is more easily customizable

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="ButtonFace" d="M14.6 3 13 1.4a1 1 0 0 0-1.4 0l-1.3 1.4 3 3 1.2-1.3a1 1 0 0 0 0-1.4M5.2 13.6l-3-3 7-7 3 3zm-4.3 1c0 .3 0 .5.3.4l2-.7-1.6-1.6z"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path stroke="ButtonFace" stroke-width="3" d="m2.3 2.3 11.4 11.4m-11.4 0L13.7 2.3"/></svg>

I think there will be better ways to do this, but just looking at the issue of the forced colors mode

@media (forced-colors: active) {
  /* Contextual trigger (pen icon) */
  .contextual .trigger {
    forced-color-adjust: none !important;
    background-color: ButtonFace !important;
    color: ButtonText !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='ButtonFace' d='M14.6 3 13 1.4a1 1 0 0 0-1.4 0l-1.3 1.4 3 3 1.2-1.3a1 1 0 0 0 0-1.4M5.2 13.6l-3-3 7-7 3 3zm-4.3 1c0 .3 0 .5.3.4l2-.7-1.6-1.6z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    border: 1px solid ButtonText !important;
    width: 26px;
    height: 26px;
    opacity: 1 !important;
  }

  .contextual .trigger:hover,
  .contextual .trigger:focus-visible {
    background-color: Highlight !important;
    color: HighlightText !important;
    outline: 2px solid Highlight !important;
  }

  /* Remove button (X icon) */
  .media-library-item__remove {
    forced-color-adjust: none !important;
    background-color: ButtonFace !important;
    color: ButtonText !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='ButtonFace' stroke-width='3' d='m2.3 2.3 11.4 11.4m-11.4 0L13.7 2.3'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.75rem;
    border: 1px solid ButtonText !important;
    opacity: 1 !important;
  }

  .media-library-item__remove:hover,
  .media-library-item__remove:focus-visible {
    background-color: Highlight !important;
    color: HighlightText !important;
    outline: 2px solid Highlight !important;
  }

  /* Edit button (pen icon) */
  .media-library-item__edit {
    forced-color-adjust: none !important;
    background-color: ButtonFace !important;
    color: ButtonText !important;
    border: 1px solid ButtonText !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='ButtonFace' d='M14.6 3 13 1.4a1 1 0 0 0-1.4 0l-1.3 1.4 3 3 1.2-1.3a1 1 0 0 0 0-1.4M5.2 13.6l-3-3 7-7 3 3zm-4.3 1c0 .3 0 .5.3.4l2-.7-1.6-1.6z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.75rem;
    opacity: 1 !important;
  }

  .media-library-item__edit:hover,
  .media-library-item__edit:focus-visible {
    background-color: Highlight !important;
    color: HighlightText !important;
    outline: 2px solid Highlight !important;
  }
}

There is some JS which is is hiding edit pen when the mouse isn't hovering over the form:

<form class="views-exposed-form" aria-label="Filter the contents of the Media view" data-drupal-selector="views-exposed-form-media-library-page" action="/admin/content/media-grid" method="get" id="views-exposed-form-media-library-page" accept-charset="UTF-8" data-once="exposed-form">

It converts this:

<button class="trigger focusable visually-hidden" type="button" aria-pressed="false">Open  configuration options</button>

to this:
<button class="trigger focusable" type="button" aria-pressed="false">Open configuration options</button>

But it doesn't trigger for keyboard users (focus).

It should always be visible, especially in a high contrast mode.

This CSS is an issue in both Gin & Claro, so this isn't a Gin specific issue. The CSS works reasonably well in both.

This occurs in the media system, but not sure it is restricted to it.

In Drupal core changes are made on on 11.x (our main development branch) first, and are then back ported as needed according to the Core change policies. Thanks

If I understand correctly, I'm inclined to say that this is a Gin / Default Admin issue.

The icon originates from the contextual module, but AFAICT it's (currently) overridden by Default Admin in contextual_links.css.

I think it's likely that the theme's dark mode will need an override by itself even if the light mode version is unified somehow.

Postponing based on #3582351: [Meta] Clean up CSS until the CSS restructure / refactor is done.

I thought about moving this back to the Gin theme and then copying it so that it is also part of Core (and linking them), but just making it more visible for the Admin theme queue.

Leaving it in #3506302: [Meta] Improve the accessibility of the Gin theme

I also wonder if deleting CSS might be acceptable in the CSS cleanup.