Invalid output when declaring a custom shade map

[Tomuke]

This is about Bulma.

Overview of the problem

When declaring a custom shade map, the colour helper functions for "has-background-{shade}" and "has-text-{shade}" outputs in an invalid css format.

This issue was previously reported but has been subsequently closed without a fix.

Description

Using Bulma 0.7.4, I am trying to define custom shades and add a color to it (i.e. fuchsia). I need to find a way for having the corresponding helper classes generated (.has-text-fuchsia .has-background-fuchsia).

Steps to Reproduce

Add $fuchsia to $custom-shades, like so:

$fuchsia: #d705a3
$custom-shades: ("fuchsia": $fuchsia);

When I do that, Bulma first runs mergeColorMaps and then generates the classes, except the ones corresponding to $custom-shades are wrong, because findColorInvert is also called, which adds #fff as the default inverted color.

This works without problems if I use $custom-colors (either specifying the inverted color or not).

Expected behavior

The CSS output should be:

.has-text-fuchsia { color: #d705a3 !important; }

Actual behavior

The CSS output is:

.has-text-fuchsia { color: #d705a3, #fff !important; }

[jgthms]

Indeed, that's an issue. Let me look into it.

[matheusgrieger]

Is there a future release date for this fix?

[bostrom]

@jgthms Any plans on releasing a new version with this fix soon?

[twaiiiin]

I still see this problem on version 0.8.0. Anyone else has this problem?

[twaiiiin]

I still see this problem on version 0.8.0. Anyone else has this problem?

In base/helpers.sass, should update :

@each $name, $shade in $shades
  $shade: nth($shade, 1)
  .has-text-#{$name}
    color: $shade !important
  .has-background-#{$name}
    background-color: $shade !important

The line $shade: nth($shade, 1) is missing.

[matheusgrieger]

This issue is still happening, and it actually got even worse than on previous versions, as now the resulting color: holds four values.

[CalamarBicefalo]

I am seeing the same behaviour in 9.0.0, as @matheusgrieger pointed out with 4 values now.

[matheusgrieger]

This issue is definitely not closed as I still see four values for has-text-[shadeName] on Bulma 0.9.1.

[CalamarBicefalo]

@jgthms This is still happening with 0.9.3, it would be great to reopen the issue...

$dark6: rgba(35, 38, 44, 0.06);
$dark10: rgba(35, 38, 44, 0.1);
$dark16: rgba(35, 38, 44, 0.16);
$dark28: rgba(35, 38, 44, 0.28);
$dark40: rgba(35, 38, 44, 0.4);
$dark59: rgba(35, 38, 44, 0.59);
$dark75: rgba(35, 38, 44, 0.75);
$light6: rgba(243, 243, 243, 0.06);
$light10: rgba(243, 243, 243, 0.1);
$light16: rgba(243, 243, 243, 0.16);
$light28: rgba(243, 243, 243, 0.28);
$light40: rgba(255, 255, 255, 0.4);
$light59: rgba(255, 255, 255, 0.59);
$light75: rgba(255, 255, 255, 0.75);
$light88: rgba(255, 255, 255, 0.88);

$custom-shades: (
  dark6: $dark6,
  dark10: $dark10,
  dark16: $dark16,
  dark28: $dark28,
  dark40: $dark40,
  dark59: $dark59,
  dark75: $dark75,
  light6: $light6,
  light10: $light10,
  light16: $light16,
  light28: $light28,
  light40: $light40,
  light59: $light59,
  light75: $light75,
  light88: $light88,
);

BULMA CSS:

.has-text-light59 {
    color: rgba(255, 255, 255, 0.59), rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.59), rgba(74, 74, 74, 0.59) !important;
}