Disabled styles do not match USWDS

Current Behavior

Our disabled input styles have been customized and do not look like USWDS's.

NOTE: Suggest time boxing investigation as to why USWDS's disabled styles are not being pulled (see additional context below) to a few hours. If no progress, just edit the existing scss in forms.scss and determine whether we make a ticket to investigate the devops bug more thoroughly.

Expected Behavior

Disabled inputs should have the same background and text color as USWDS's disabled inputs.

Steps to Reproduce

Navigate to a form with a disabled text input (also check disabled select)

Environment

No response

Additional Context

Review of PR #

Noting that our disabled background color for the text input is not matching what USWDS uses. Rachid, I know you had adjusted this a while back? Was it due to contrast errors?

USWDS's storybook input

Our input

I believe @zandercymatics wrote the relevant code:

@media (prefers-color-scheme: light) {
  .usa-input:disabled, .usa-select:disabled, .usa-textarea:disabled {
    background-color: #eeeeee;
    color: #666666;
  }
}

@media (prefers-color-scheme: dark) {
  .usa-input:disabled, .usa-select:disabled, .usa-textarea:disabled {
    background-color: var(--body-fg);
    color: var(--close-button-hover-bg);
  }
}

It looks like this had to be done because the usa-input disabled classes you see on USWDS are not being compiled in our project, for some reason. I recommend creating a bug ticket to look into this and revise (if needed) as this is a pre-existing issue that does not have to hold up this PR.

Issue Links

No response

cisagov / manage.get.gov