Button color calculation is drifting in version 1.0.1

[rweverwijk]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma 1.0.1 My browser is: Chrome on mac Version 126.0.6478.63

Description

I looks like the button background color calculation is drifting away from the defined color variable. I think due to some HSL -> RGB conversions with rounding between the steps. This results in different colors on buttons vs tabs for example.

Steps to Reproduce

I've created a fiddle to demonstrate the difference between the an active tab vs a button using the same HSL color. https://jsfiddle.net/any1xfmr/33/

using these code snippets:

<main class="p-5">
  <p class="buttons">
    <button type="button" class="button is-success">
      just a primary button
    </button>
  </p>

  <div class="tabs is-toggle is-fullwidth">
    <ul>
      <li class="is-active">
        <a>
          <span>foobar</span>
        </a>
      </li>
      <li>
        <a>
          <span>baz</span>
        </a>
      </li>

    </ul>
  </div>
</main>

:root {
  --bulma-success-h: 145;
  --bulma-success-s: 63%;
  --bulma-success-l: 42%;
  --bulma-link: hsl(145, 63%, 42%);
}

Expected behavior

The same input color variable should result in the same color on the component.

Actual behavior

hsl(145, 63%, 42%) as variable

results in the following RGB color on the active tab: rgb(40, 175, 96)

But on the button it became slightly "darker": rgb(50, 198, 112)

[rweverwijk]

Hi @bagedevimo

I see PR #3837 coming by, you think this will also fix the issue above?

[dvergeylen]

I am also experiencing this: background button color drifter from rgb(0, 137, 208) to rgb(0, 139, 209) (primary color: #0089D0)

[rweverwijk]

@dvergeylen Version 1.0.2 still has this issue. Unfortunately I don't have enough knowledge about "colors" to find a solution for this myself, so still hoping someone is coming by willing to fix this...

I can imagine there is some rounding issue in the calculation to support dark theme.