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)