Problem customising color palette

[javirandor]

Hey there!

Thanks a lot for your resources. I am trying to customise the default color palette but I am encountering some problems in the process. I am using React, TypeScript and Bootstrap in my setup.

I did the following:

1. Created a custom file from your template (https://github.com/webpixels/css/blob/master/stubs/_theme-variables.scss)
2. Modified the colors (primary, secondary, ...)
3. In my App.scss file, I import the following

@use "@webpixels/css";
@use "utils/styling/_template_variables.scss";

However, nothing seems to change. What am I doing wrong? Thanks a lot for your help.

[javirandor]

I was able to solve it by changing slightly the imports:

@use "~@webpixels/css/core/functions";

// scss-docs-start theme-colors-map
$theme-colors: (
        "primary":    #000000,
        "secondary":  #000000,
        "tertiary":   #000000,
);

@use "~@webpixels/css/base";
@use "~@webpixels/css/forms";
@use "~@webpixels/css/components";
@use "~@webpixels/css/utilities";

[extrabright]

Hi @javirandor. Right now I was replying to this discussion. I see you figured it out.

That is the correct way to do it. Here's the example from the documentation, in case other devs are having the same issue: https://webpixels.io/docs/css/1.0/theme

[javirandor]

Hi @alexisenache! Actually, I didn't. I was caching a style modification in your source files. Apparently, variables are not overwritten as expected. Any help would be really appreciated.

This is my current code according to your docs (not working, and I guess it should):

@use "~@webpixels/css/core/functions";

// Theme colors - MODIFIED
//
// Choose the colors corresponding to your brand


$primary:       $black;
$secondary:     $black;
$tertiary:      $gray-200;
$success:       $green;
$info:          $cyan;
$warning:       $orange;
$danger:        $red;
$light:         $gray-200;
$dark:          $gray-900;

$theme-colors: (
        "primary":    $primary,
        "secondary":  $secondary,
        "tertiary":   $tertiary,
);

@use "~@webpixels/css/base";
@use "~@webpixels/css/forms";
@use "~@webpixels/css/components";
@use "~@webpixels/css/utilities";

[extrabright]

I see you are using @use instead of @import. Although that is the correct way of importing files in the latest Sass version, Bootstrap is still using the old @imports. This might cause the issue.

We are working on bringing the Sass structure to the latest version of Sass, however, this depends on Bootstrap to make the switch.

[javirandor]

This solved the issue. Thanks a lot!