Ensure that primary and secondary buttons have a high enough color contrast

Adding a related issue.

Sadly we can't use color-contrast() yet
https://caniuse.com/?search=color-contrast

Eventually, I think we might be able to do something like:

.button--primary {
  background-color: var(--accent);
  color: color-contrast(var(--accent) vs ButtonText, Black, White);
}

We really need to fix the accent colors. People can make choices with bad color contrast, but Drupal should not be presenting bad defaults to admins. We can't assume they are testing for color contrast (if we aren't).

.button--primary:hover,
input[type="submit"].button--primary:hover {
  background-color: #003078;
  border-color: #003078;
}

.button--secondary:hover {
  background-color: #f3f2f1;
  color: #003078;
  border-color: #003078;
}

@media (prefers-contrast: more) {
  /* Save Button (more prominent) */
  #edit-submit.form-submit,
  [data-drupal-selector="gin-sticky-edit-submit"] {
    background-color: #000 !important;
    color: #fff !important;
    border: 2px solid #000 !important;
    font-weight: bold;
  }

  /* Preview Button (less prominent) */
  [data-drupal-selector="gin-sticky-edit-preview"] {
    background-color: #fff !important;
    color: #000 !important;
    border: 2px solid #000 !important;
  }

  /* Shared focus style */
  #edit-submit.form-submit:focus-visible,
  [data-drupal-selector="gin-sticky-edit-preview"]:focus-visible {
    outline: 3px solid #000 !important;
    outline-offset: 2px;
    background-color: #ffbf47 !important; 
    color: #000 !important;
  }
}

@media (forced-colors: active) {
  /* Save Button (more prominent) */
  #edit-submit.form-submit,
  [data-drupal-selector="gin-sticky-edit-submit"] {
    forced-color-adjust: none;
    background-color: ButtonText !important;
    color: ButtonFace !important;
    border: 2px solid ButtonText !important;
    font-weight: bold;
  }

  /* Preview Button (less prominent) */
  [data-drupal-selector="gin-sticky-edit-preview"] {
    forced-color-adjust: none;
    background-color: Canvas !important;
    color: ButtonText !important;
    border: 2px solid ButtonText !important;
  }

  /* Focus visibility */
  #edit-submit.form-submit:focus-visible,
  [data-drupal-selector="gin-sticky-edit-preview"]:focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
    background-color: Highlight !important;
    color: HighlightText !important;
  }
}

We really need to fix the accent colors. People can make choices with bad color contrast, but Drupal should not be presenting bad defaults to admins. We can't assume they are testing for color contrast (if we aren't).

agreed... and that is the reason why there is also ✨ Add color contrast checks to custom focus and accent color dialogs Active so ensure that custom picked colors are checked for color contrast in the future as well. to prevent that custom focus and accent colors have a too low color contrast for the chosen color theme (light or dark)

As discussed in the A11y Practice Area Meeting.

ll66382 → made their first commit to this issue’s fork.

I've started working on this and exploring coded solutions. I should have an update soon. A challenge seems to be that "Accent color" is used as the font color in many places, and over transparent or light backgrounds . Meaning for "light mode" accents, a user can choose a nice, bright pink or yellow accent but pink or yellow text over a light background. I expect to have an update tomorrow. It seems this can be improved coding for font color.

I’ve pushed work in progress to the fork https://git.drupalcode.org/issue/gin-3506316 but, this needs work before it’s test-ready or suitable for a merge request.

This issue is complicated because many theme components depend on the color or generated color variants. Improving contrast on one affects the others and there are trade-offs. I included an update to make isolating colors easier (which I think would help iteration) and added hover/ active in ~ 2 spots where it was missing. It would be helpful to have someone on the Gin team address my approach rather than specific code lines, so I'll ask in #accessibility for some help or information about conferencing.

The following updates were prepared:

- Provide variables to separate normal vs active color and background.
- Improve contrast on auto-generated variants (hover, active, etc.)
- Danger buttons:
  - Increase default and hover contrast
  - Add hover state colors
- Action links:
  - Add hover state 

Next steps:
Validate approach with Gin team;
Address dark-mode per ticket;
Request review with #Accessibility;