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

Button color calculation is drifting in version 1.0.1 #3847

Open
rweverwijk opened this issue Jun 26, 2024 · 0 comments
Open

Button color calculation is drifting in version 1.0.1 #3847

rweverwijk opened this issue Jun 26, 2024 · 0 comments

Comments

@rweverwijk
Copy link

rweverwijk commented Jun 26, 2024

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)

image
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

1 participant