search

jgthms / bulma

Modern CSS framework based on Flexbox
https://bulma.io
MIT License
49.16k stars 3.95k forks source link

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

Closed max-arnold closed 3 months ago

max-arnold commented 5 months ago

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

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.