openeuropa / bootstrap-component-library

Openeuropa Bootstrap Component Library
https://oelibrary.netlify.app/
MIT License
14 stars 9 forks source link

Badge text color is not correct for secondary background #568

Open kp77 opened 8 months ago

kp77 commented 8 months ago

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 commented 2 months ago

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.