Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Badge text color is not correct for secondary background #568

Open
kp77 opened this issue Jan 8, 2024 · 1 comment
Open

Badge text color is not correct for secondary background #568

kp77 opened this issue Jan 8, 2024 · 1 comment

Comments

@kp77
Copy link
Contributor

kp77 commented Jan 8, 2024

After updating BCL 1.0.2 => 1.2.0 on UCPKN project, the text color for badges with secondary background changed from white to black. Our mockups are using white text color for badges with secondary and success background.

There is also a difference in text color in case of secondary and success bg badges between the default and the UCPKN themes:

The issue seems to be related to the changes done in #495.

I can't confirm that this would fix the issue, but it seems to me, that in the _badge.scss file there are 2 lines where the selectors were not updated to the new class names, and this could be related to why it's not correct in our case.

I think in src/themes/default/src/scss/_badge.scss L24-L25 should be:

@each $color, $value in $theme-colors {
  .text-bg-#{$color} a,
  .text-bg-#{$color} {
    @if $color == light or $color == warning {
...

instead of:

@each $color, $value in $theme-colors {
  .badge.bg-#{$color} a,
  .badge.bg-#{$color} {
    @if $color == light or $color == warning {
...
@gingapa
Copy link
Contributor

gingapa commented Jun 19, 2024

The badge with .text-bg-secondary has a background color rgba(242, 89, 36, 1) HEX #f25924.
This fails on Accessibility color contrast ratio.

I propose darken this orange color to rgba(212, 62, 12, 1) or HEX #D43E0C, this will suffice to comply with WCAG AA.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants