fix: warning banner content color is not obvious in dark theme

[a110605]

Summary

Fixes #15169

Occurred changes and/or fixed issues

Previous PR changed warning-text color to black to make warning button obvious, but it makes warning banner text not obvious in dark theme.

Remove .warning .banner__content color css
Update -warning-banner-text and --error-banner-text color schema in dark/light theme.

Technical notes summary

Areas or cases that should be tested

Areas which could experience regressions

Screenshot/Video

Before

After

Checklist

• The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
• The PR has a Milestone
• The PR template has been filled out
• The PR has been self reviewed
• The PR has a reviewer assigned
• The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
• The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes
• The PR has been reviewed in terms of Accessibility
• The PR has considered, and if applicable tested with, the three Global Roles Admin, Standard User and User Base

[rak-phillip]

Instead of removing the css variables, let's ensure that the colors are defined properly instead. After having a discussion with @kwwii, we decided that the text should just be black for the light theme, and white for the dark theme. This should be consistent for info, warning, and error:

BODY, .theme-light {
  --error-banner-text: #{$grey-100};
  --warning-banner-text: #{$grey-100};
}

BODY, .theme-dark {
  --warning-banner-text : #{$grey-0};
  --error-banner-text   : #{$grey-0};
}

[a110605]

Instead of removing the css variables, let's ensure that the colors are defined properly instead. After having a discussion with @kwwii, we decided that the text should just be black for the light theme, and white for the dark theme. This should be consistent for info, warning, and error:

BODY, .theme-light {
  --error-banner-text: #{$grey-100};
  --warning-banner-text: #{$grey-100};
}

BODY, .theme-dark {
  --warning-banner-text : #{$grey-0};
  --error-banner-text   : #{$grey-0};
}

Thanks for providing the color. Updated.

Error Banner

[rak-phillip]

LGTM