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

Customize is-info inverted color via SASS in 1.0 #3793

Closed
max-arnold opened this issue Apr 21, 2024 · 1 comment
Closed

Customize is-info inverted color via SASS in 1.0 #3793

max-arnold opened this issue Apr 21, 2024 · 1 comment

Comments

@max-arnold
Copy link

max-arnold commented Apr 21, 2024

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma 1.0

Description

I'm trying to get the same is-info colors as in 0.9.4 (for navbar, tags, etc). Got the background working:

    @use "bulma/sass/utilities" with (
        $info: hsl(207, 61%, 53%)
    );
    
    @use "bulma/sass/themes/light";
    @use "bulma/sass/themes/setup";

But the text color of is-info elements is black and I want it to be white. How to customize it? It seems to be derived in a complex and multi-faceted way...

@ANovokmet
Copy link

I agree with you that this is too convoluted. This works:

@use "bulma/sass/utilities" with (
    $custom-colors: (
       "info": hsl(207, 61%, 53%)
    )
);

You can define at most 4 values for each color (base, invert, light, dark, the missing are derived from the others), but I do not know which one is used, or how it is used, for text color.

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