Colors are missing when importing charts/styles/styles.scss

[kgibb]

• Feature request
• Design defect
• Source code defect
• Demo/documentation defect
• Other

charts version:

0.40.11 Vanilla

Issue description

Colors are missing when importing charts/styles/styles.scss SCSS file directly.

Using [email protected].

Screenshot or recording

carbon-charts/packages/core/src/styles/colors.scss

Lines 275 to 280 in 27e1725

	$color-map: map-merge(
	$color-map,
	(
	"#{$name}-#{$category}": $value
	)
	);

The above block should use the !global flag to update the global scope $color-map.

carbon-charts/packages/core/src/styles/colors.scss

Line 250 in 27e1725

$color-map: ();

$color-map: map-merge(
    $color-map,
    (
        "#{$name}-#{$category}": $value
    )
) !global;

Example: https://codesandbox.io/s/carbon-chart-missing-colors-2jgh2

[sophiiae]

@kgibb can you provide more details about how to produce this issue? Thank you.

[kgibb]

I've just forked a codepen sample. Updated description with the link.

[kgibb]

I am aware it's working when pulling in the built out CSS. I am using node-sass as the description notes.

Fixing the $color-map variable shadowing will resolve the issue, see description.

[theiliad]

I've just downloaded the sandbox and got it working. Seems like your imports are the issue here

Here's what worked for me:

@import "~@carbon/themes/scss/themes";
$carbon--theme: $carbon--theme--g10;

@import "~@carbon/charts/styles/styles.scss";

1. You're using @carbon/themes off of the carbon charts vendor libraries, not recommended although it wouldn't break the code.
2. Without the ~ the compiler doesn't seem to be able to resolve the libraries (not sure why codesandbox doesn't report this but downloading the sandbox and running locally will).

Fixing those I get this:

[kgibb]

The chart styles are resolved in the remote sandbox without the tilde, it's just the "./colors.scss" import is essentially empty due to the aforementioned scope issue.

I've created a Storybook sample using node-sass: https://ibm.box.com/s/4sm5t0oiboktmr64u8ns4guq7vfn0wh8

[theiliad]

Storybook is a bit weird. When importing the colors module manually everything works... Eitherway, I've added the global flag