@carbon/charts 1.8.0 → 1.9.0-rc.1

package/{styles → dist/styles}/color-palatte.scss

@@ -1,5 +1,5 @@
-@use "sass:map";
-@use "@carbon/styles/scss/colors";
+@use 'sass:map';
+@use '@carbon/styles/scss/colors';
 
 @function getColorValue($color, $scale) {
 	@return map.get($colors, $color, $scale);
@@ -8,86 +8,86 @@
 $white-theme-colors: (
 	'1': (
 		'1': (
-			'1': getColorValue(purple, 70),
+			'1': getColorValue(purple, 70)
 		),
 		'2': (
-			'1': getColorValue(blue, 80),
+			'1': getColorValue(blue, 80)
 		),
 		'3': (
-			'1': getColorValue(cyan, 50),
+			'1': getColorValue(cyan, 50)
 		),
 		'4': (
-			'1': getColorValue(teal, 60),
-		),
+			'1': getColorValue(teal, 60)
+		)
 	),
 	'2': (
 		'1': (
 			'1': getColorValue(purple, 70),
-			'2': getColorValue(teal, 50),
+			'2': getColorValue(teal, 50)
 		),
 		'2': (
 			'1': getColorValue(purple, 60),
-			'2': getColorValue(red, 90),
+			'2': getColorValue(red, 90)
 		),
 		'3': (
 			'1': getColorValue(magenta, 70),
-			'2': getColorValue(red, 90),
+			'2': getColorValue(red, 90)
 		),
 		'4': (
 			'1': getColorValue(cyan, 50),
-			'2': getColorValue(teal, 70),
+			'2': getColorValue(teal, 70)
 		),
 		'5': (
 			'1': getColorValue(teal, 50),
-			'2': getColorValue(blue, 80),
-		),
+			'2': getColorValue(blue, 80)
+		)
 	),
 	'3': (
 		'1': (
 			'1': getColorValue(magenta, 50),
 			'2': getColorValue(cyan, 50),
-			'3': getColorValue(purple, 70),
+			'3': getColorValue(purple, 70)
 		),
 		'2': (
 			'1': getColorValue(magenta, 70),
 			'2': getColorValue(red, 50),
-			'3': getColorValue(red, 90),
+			'3': getColorValue(red, 90)
 		),
 		'3': (
 			'1': getColorValue(purple, 50),
 			'2': getColorValue(teal, 70),
-			'3': getColorValue(blue, 80),
+			'3': getColorValue(blue, 80)
 		),
 		'4': (
 			'1': getColorValue(purple, 50),
 			'2': getColorValue(teal, 70),
-			'3': getColorValue(magenta, 70),
+			'3': getColorValue(magenta, 70)
 		),
 		'5': (
 			'1': getColorValue(cyan, 90),
 			'2': getColorValue(purple, 70),
-			'3': getColorValue(teal, 50),
-		),
+			'3': getColorValue(teal, 50)
+		)
 	),
 	'4': (
 		'1': (
 			'1': getColorValue(purple, 70),
 			'2': getColorValue(cyan, 90),
 			'3': getColorValue(teal, 50),
-			'4': getColorValue(magenta, 50),
+			'4': getColorValue(magenta, 50)
 		),
 		'2': (
 			'1': getColorValue(magenta, 70),
 			'2': getColorValue(red, 50),
 			'3': getColorValue(red, 90),
-			'4': getColorValue(purple, 50),
+			'4': getColorValue(purple, 50)
 		),
 		'3': (
 			'1': getColorValue(teal, 50),
 			'2': getColorValue(blue, 80),
 			'3': getColorValue(purple, 50),
-			'4': getColorValue(magenta, 70),
-		),
+			'4': getColorValue(magenta, 70)
+		)
 	),
 	'5': (
 		'1': (
@@ -95,15 +95,15 @@ $white-theme-colors: (
 			'2': getColorValue(cyan, 50),
 			'3': getColorValue(teal, 70),
 			'4': getColorValue(magenta, 70),
-			'5': getColorValue(red, 90),
+			'5': getColorValue(red, 90)
 		),
 		'2': (
 			'1': getColorValue(blue, 80),
 			'2': getColorValue(teal, 50),
 			'3': getColorValue(magenta, 70),
 			'4': getColorValue(red, 90),
-			'5': getColorValue(purple, 50),
-		),
+			'5': getColorValue(purple, 50)
+		)
 	),
 	'14': (
 		'1': (
@@ -122,94 +122,94 @@ $white-theme-colors: (
 			'12': getColorValue(cyan, 90),
 			'13': #8a3800,
 			//orange 70, update when available in carbon color
-			'14': getColorValue(purple, 50),
-		),
-	),
+			'14': getColorValue(purple, 50)
+		)
+	)
 );
 
 $dark-theme-colors: (
 	'1': (
 		'1': (
-			'1': getColorValue(purple, 30),
+			'1': getColorValue(purple, 30)
 		),
 		'2': (
-			'1': getColorValue(blue, 50),
+			'1': getColorValue(blue, 50)
 		),
 		'3': (
-			'1': getColorValue(cyan, 40),
+			'1': getColorValue(cyan, 40)
 		),
 		'4': (
-			'1': getColorValue(teal, 40),
-		),
+			'1': getColorValue(teal, 40)
+		)
 	),
 	'2': (
 		'1': (
 			'1': getColorValue(purple, 60),
-			'2': getColorValue(teal, 40),
+			'2': getColorValue(teal, 40)
 		),
 		'2': (
 			'1': getColorValue(purple, 60),
-			'2': getColorValue(magenta, 40),
+			'2': getColorValue(magenta, 40)
 		),
 		'3': (
 			'1': getColorValue(magenta, 40),
-			'2': getColorValue(red, 10),
+			'2': getColorValue(red, 10)
 		),
 		'4': (
 			'1': getColorValue(blue, 50),
-			'2': getColorValue(cyan, 20),
+			'2': getColorValue(cyan, 20)
 		),
 		'5': (
 			'1': getColorValue(teal, 60),
-			'2': getColorValue(green, 30),
-		),
+			'2': getColorValue(green, 30)
+		)
 	),
 	'3': (
 		'1': (
 			'1': getColorValue(purple, 60),
 			'2': getColorValue(teal, 40),
-			'3': getColorValue(cyan, 20),
+			'3': getColorValue(cyan, 20)
 		),
 		'2': (
 			'1': getColorValue(purple, 60),
 			'2': getColorValue(magenta, 40),
-			'3': getColorValue(red, 10),
+			'3': getColorValue(red, 10)
 		),
 		'3': (
 			'1': getColorValue(blue, 50),
 			'2': getColorValue(teal, 40),
-			'3': getColorValue(purple, 30),
+			'3': getColorValue(purple, 30)
 		),
 		'4': (
 			'1': getColorValue(blue, 50),
 			'2': getColorValue(green, 30),
-			'3': getColorValue(red, 10),
+			'3': getColorValue(red, 10)
 		),
 		'5': (
 			'1': getColorValue(teal, 60),
 			'2': getColorValue(green, 30),
-			'3': getColorValue(cyan, 20),
-		),
+			'3': getColorValue(cyan, 20)
+		)
 	),
 	'4': (
 		'1': (
 			'1': getColorValue(purple, 60),
 			'2': getColorValue(teal, 40),
 			'3': getColorValue(cyan, 20),
-			'4': getColorValue(blue, 50),
+			'4': getColorValue(blue, 50)
 		),
 		'2': (
 			'1': getColorValue(blue, 50),
 			'2': getColorValue(teal, 40),
 			'3': getColorValue(purple, 30),
-			'4': getColorValue(red, 10),
+			'4': getColorValue(red, 10)
 		),
 		'3': (
 			'1': getColorValue(teal, 60),
 			'2': getColorValue(red, 10),
 			'3': getColorValue(cyan, 40),
-			'4': getColorValue(green, 30),
-		),
+			'4': getColorValue(green, 30)
+		)
 	),
 	'5': (
 		'1': (
@@ -217,15 +217,15 @@ $dark-theme-colors: (
 			'2': getColorValue(teal, 40),
 			'3': getColorValue(cyan, 20),
 			'4': getColorValue(blue, 50),
-			'5': getColorValue(magenta, 40),
+			'5': getColorValue(magenta, 40)
 		),
 		'2': (
 			'1': getColorValue(blue, 50),
 			'2': getColorValue(teal, 40),
 			'3': getColorValue(purple, 30),
 			'4': getColorValue(red, 10),
-			'5': getColorValue(green, 30),
-		),
+			'5': getColorValue(green, 30)
+		)
 	),
 	'14': (
 		'1': (
@@ -244,15 +244,15 @@ $dark-theme-colors: (
 			'12': getColorValue(cyan, 20),
 			'13': #ba4e00,
 			//orange 60, update when available in carbon color
-			'14': getColorValue(purple, 30),
-		),
-	),
+			'14': getColorValue(purple, 30)
+		)
+	)
 );
 
 $dark-theme-legend-area-item-colors: (
 	'1': getColorValue(gray, 90),
 	'2': getColorValue(gray, 80),
-	'3': getColorValue(gray, 70),
+	'3': getColorValue(gray, 70)
 );
 
 $dark-theme-legend-area-item-stroke: getColorValue(gray, 60);
@@ -260,7 +260,7 @@ $dark-theme-legend-area-item-stroke: getColorValue(gray, 60);
 $white-theme-legend-area-item-colors: (
 	'1': getColorValue(gray, 10),
 	'2': getColorValue(gray, 20),
-	'3': getColorValue(gray, 30),
+	'3': getColorValue(gray, 30)
 );
 
 $white-theme-legend-area-item-stroke: getColorValue(gray, 50);
@@ -277,7 +277,7 @@ $monochrome-quantize-colors: (
 		'8': getColorValue(purple, 70),
 		'9': getColorValue(purple, 80),
 		'10': getColorValue(purple, 90),
-		'11': getColorValue(purple, 100),
+		'11': getColorValue(purple, 100)
 	),
 	'mono-2': (
 		'1': #ffffff,
@@ -290,7 +290,7 @@ $monochrome-quantize-colors: (
 		'8': getColorValue(blue, 70),
 		'9': getColorValue(blue, 80),
 		'10': getColorValue(blue, 90),
-		'11': getColorValue(blue, 100),
+		'11': getColorValue(blue, 100)
 	),
 	'mono-3': (
 		'1': #ffffff,
@@ -303,7 +303,7 @@ $monochrome-quantize-colors: (
 		'8': getColorValue(cyan, 70),
 		'9': getColorValue(cyan, 80),
 		'10': getColorValue(cyan, 90),
-		'11': getColorValue(cyan, 100),
+		'11': getColorValue(cyan, 100)
 	),
 	'mono-4': (
 		'1': #ffffff,
@@ -316,8 +316,8 @@ $monochrome-quantize-colors: (
 		'8': getColorValue(teal, 70),
 		'9': getColorValue(teal, 80),
 		'10': getColorValue(teal, 90),
-		'11': getColorValue(teal, 100),
-	),
+		'11': getColorValue(teal, 100)
+	)
 );
 
 $dark-monochrome-quantize-colors: (
@@ -393,7 +393,7 @@ $divergent-quantize-colors: (
 		'14': getColorValue(cyan, 50),
 		'15': getColorValue(cyan, 60),
 		'16': getColorValue(cyan, 70),
-		'17': getColorValue(cyan, 80),
+		'17': getColorValue(cyan, 80)
 	),
 	'diverge-2': (
 		'1': getColorValue(purple, 80),
@@ -412,8 +412,8 @@ $divergent-quantize-colors: (
 		'14': getColorValue(teal, 50),
 		'15': getColorValue(teal, 60),
 		'16': getColorValue(teal, 70),
-		'17': getColorValue(teal, 80),
-	),
+		'17': getColorValue(teal, 80)
+	)
 );
 
 $dark-divergent-quantize-colors: (

package/{styles → dist/styles}/colors.scss

@@ -1,8 +1,8 @@
-@use "sass:color";
-@use "sass:map";
+@use 'sass:color';
+@use 'sass:map';
 
-@use "@carbon/styles/scss/themes";
-@use "@carbon/styles/scss/theme" as *;
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/theme' as *;
 
 @import './color-palatte.scss';
 
@@ -18,17 +18,9 @@
 	}
 }
 
-@function getGradientColors($theme_type) {
-	$monochrome: ();
-	$divergent: ();
-
-	@if $theme_type == 'dark' {
-		$monochrome: color-property(null, $dark-monochrome-quantize-colors);
-		$divergent: color-property(null, $dark-divergent-quantize-colors);
-	} @else {
-		$monochrome: color-property(null, $monochrome-quantize-colors);
-		$divergent: color-property(null, $divergent-quantize-colors);
-	}
+@function getGradientColors() {
+	$monochrome: color-property(null, $monochrome-quantize-colors);
+	$divergent: color-property(null, $divergent-quantize-colors);
 
 	@return map-merge($monochrome, $divergent);
 }
@@ -36,32 +28,21 @@
 @function color-property($name, $theme-colors) {
 	$color-items: ();
 
-	@if type-of($theme-colors) ==map {
+	@if type-of($theme-colors) == map {
 		@each $category, $value in $theme-colors {
-			@if $name ==null {
-				$color-items: map-merge(
-					$color-items,
-					color-property('#{$category}', $value)
-				);
+			@if $name == null {
+				$color-items: map-merge($color-items, color-property('#{$category}', $value));
 			} @else {
-				$color-items: map-merge(
-					$color-items,
-					color-property('#{$name}-#{$category}', $value)
-				);
+				$color-items: map-merge($color-items, color-property('#{$name}-#{$category}', $value));
 			}
 		}
-
 		@return $color-items;
 	} @else {
 		@return (#{$name}: $theme-colors);
 	}
 }
 
-$color-map-light: map-merge(
-	getThemeColors('light'),
-	getGradientColors('light')
-);
-
+$color-map-light: map-merge(getThemeColors('light'), getGradientColors());
 .#{$prefix}--chart-holder {
 	@each $token, $color in $color-map-light {
 		--cds-charts-#{$token}: #{$color};
@@ -69,8 +50,7 @@ $color-map-light: map-merge(
 	}
 }
 
-$color-map-dark: map-merge(getThemeColors('dark'), getGradientColors('dark'));
-
+$color-map-dark: map-merge(getThemeColors('dark'), getGradientColors());
 .#{$prefix}--chart-holder[data-carbon-theme='g90'],
 .#{$prefix}--chart-holder[data-carbon-theme='g100'] {
 	@each $token, $color in $color-map-dark {
@@ -79,8 +59,7 @@ $color-map-dark: map-merge(getThemeColors('dark'), getGradientColors('dark'));
 	}
 }
 
-$color-map: map-merge(getThemeColors('light'), getGradientColors('light'));
-
+$color-map: map-merge(getThemeColors('light'), getGradientColors());
 .#{$prefix}--#{$charts-prefix}--chart-wrapper {
 	@each $token, $color in $color-map {
 		.fill-#{$token} {
@@ -96,10 +75,7 @@ $color-map: map-merge(getThemeColors('light'), getGradientColors('light'));
 			background-color: generateCSSCustomProperty($token, $color);
 
 			&.hovered {
-				background-color: generateCSSCustomProperty(
-					#{$token}-hovered,
-					$color
-				);
+				background-color: generateCSSCustomProperty(#{$token}-hovered, $color);
 				@include default_transition;
 			}
 		}

package/{styles → dist/styles}/components/_color-legend.scss

@@ -1,5 +1,5 @@
-@use "@carbon/styles/scss/themes";
-@use "@carbon/styles/scss/theme";
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/theme';
 
 svg.#{$prefix}--#{$charts-prefix}--color-legend {
 	display: flex;

package/{styles → dist/styles}/components/_edge.scss

@@ -1,8 +1,8 @@
-@import "@carbon/themes/scss/tokens";
-@import "@carbon/layout/scss/spacing";
-@import "@carbon/import-once/scss/index";
+@import '@carbon/themes/scss/tokens';
+@import '@carbon/layout/scss/spacing';
+@import '@carbon/import-once/scss/index';
 
-@include exports("cc-edge") {
+@include exports('cc-edge') {
 	.#{$prefix}--#{$charts-prefix}--edge {
 		fill: transparent;
 	}

package/{styles → dist/styles}/components/_grid.scss

@@ -1,5 +1,5 @@
-@use "@carbon/styles/scss/themes";
-@use "@carbon/styles/scss/theme" as *;
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/theme' as *;
 
 .#{$prefix}--#{$charts-prefix}--grid {
 	rect.chart-grid-backdrop {

package/dist/styles/components/_marker.scss

@@ -0,0 +1,7 @@
+@import '@carbon/import-once/scss/index';
+
+@include exports('cc-marker') {
+	.#{$prefix}--#{$charts-prefix}--marker {
+		fill: $border-inverse;
+	}
+}

package/{styles → dist/styles}/components/_meter-title.scss

@@ -1,5 +1,5 @@
-@use "@carbon/styles/scss/themes";
-@use "@carbon/styles/scss/theme" as *;
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/theme' as *;
 
 .#{$prefix}--#{$charts-prefix}--meter-title {
 	overflow: visible;

package/{styles → dist/styles}/components/_tooltip.scss

@@ -1,6 +1,6 @@
-@use "@carbon/styles/scss/type" as *;
-@use "@carbon/styles/scss/motion" as *;
-@use "@carbon/styles/scss/theme" as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/theme' as *;
 
 .#{$prefix}--#{$charts-prefix}--tooltip {
 	background-color: $layer-02;

package/{styles → dist/styles}/components/diagrams/_card-node.scss

@@ -1,6 +1,6 @@
-@use "@carbon/styles/scss/utilities/focus-outline" as *;
-@use "@carbon/styles/scss/spacing" as *;
-@use "@carbon/styles/scss/type" as *;
+@use '@carbon/styles/scss/utilities/focus-outline' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/theme' as *;
 
 @mixin stacked-card-node {

package/{styles → dist/styles}/components/diagrams/_edge.scss

@@ -1,9 +1,9 @@
-@use "@carbon/styles/scss/utilities/focus-outline" as *;
-@use "@carbon/styles/scss/spacing" as *;
-@use "@carbon/styles/scss/type" as *;
-@use "@carbon/styles/scss/theme" as *;
+@use '@carbon/styles/scss/utilities/focus-outline' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/theme' as *;
 
-@include exports("cc-edge") {
+@include exports('cc-edge') {
 	.#{$prefix}--#{$charts-prefix}--edge {
 		fill: transparent;
 	}

package/{styles → dist/styles}/components/diagrams/_shape-node.scss

@@ -1,6 +1,6 @@
-@use "@carbon/styles/scss/utilities/focus-outline" as *;
-@use "@carbon/styles/scss/spacing" as *;
-@use "@carbon/styles/scss/type" as *;
+@use '@carbon/styles/scss/utilities/focus-outline' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/theme' as *;
 
 @include exports('cc-shape-node') {

package/dist/styles/components/diagrams/index.scss

@@ -0,0 +1,4 @@
+@import './card-node';
+@import './shape-node';
+@import './edge';
+@import './marker';

package/{styles → dist/styles}/graphs/_alluvial.scss

@@ -1,5 +1,5 @@
-@use "@carbon/styles/scss/themes";
-@use "@carbon/styles/scss/theme" as *;
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/theme' as *;
 
 .#{$prefix}--#{$charts-prefix}--alluvial {
 	rect.node,

package/{styles → dist/styles}/graphs/_bullet.scss

@@ -1,7 +1,7 @@
-@use "@carbon/styles/scss/themes";
-@use "@carbon/styles/scss/theme";
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/theme';
 
-@use "@carbon/styles/scss/motion" as *;
+@use '@carbon/styles/scss/motion' as *;
 
 .#{$prefix}--#{$charts-prefix}--bullet {
 	path.range-box {

package/{styles → dist/styles}/graphs/_circle-pack.scss

@@ -1,4 +1,4 @@
-@use "@carbon/styles/scss/theme" as *;
+@use '@carbon/styles/scss/theme' as *;
 
 .#{$prefix}--#{$charts-prefix}--circle-pack {
 	circle.node {

package/{styles → dist/styles}/graphs/_gauge.scss

@@ -1,4 +1,4 @@
-@use "@carbon/styles/scss/theme" as *;
+@use '@carbon/styles/scss/theme' as *;
 
 .#{$prefix}--#{$charts-prefix}--gauge {
 	overflow: visible;

package/{styles → dist/styles}/graphs/_heatmap.scss

@@ -1,5 +1,5 @@
-@use "@carbon/styles/scss/themes";
-@use "@carbon/styles/scss/theme" as *;
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/theme' as *;
 
 .#{$prefix}--#{$charts-prefix}--heatmap {
 	g.highlighter-hidden {

package/{styles → dist/styles}/graphs/_meter.scss

@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/themes';
-@use "@carbon/styles/scss/theme" as *;
+@use '@carbon/styles/scss/theme' as *;
 
 .#{$prefix}--#{$charts-prefix}--meter {
 	rect.container {

package/{styles → dist/styles}/graphs/_radar.scss

@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/themes';
-@use "@carbon/styles/scss/theme" as *;
+@use '@carbon/styles/scss/theme' as *;
 
 .#{$prefix}--#{$charts-prefix}--radar {
 	.blobs path {

package/{styles → dist/styles}/graphs/_scatter-stacked.scss

@@ -1,4 +1,4 @@
-@use "@carbon/styles/scss/theme" as *;
+@use '@carbon/styles/scss/theme' as *;
 
 .#{$prefix}--#{$charts-prefix}--scatter-stacked {
 	circle.dot.unfilled {

package/{styles → dist/styles}/graphs/_tree.scss

@@ -1,7 +1,6 @@
-@use "@carbon/styles/scss/theme" as *;
+@use '@carbon/styles/scss/theme' as *;
 
-.#{$prefix}--#{$charts-prefix}--chart-wrapper
-	.#{$prefix}--#{$charts-prefix}--tree {
+.#{$prefix}--#{$charts-prefix}--chart-wrapper .#{$prefix}--#{$charts-prefix}--tree {
 	g.links {
 		fill: none;
 		stroke: $border-strong-01;

package/{styles → dist/styles}/styles.scss

@@ -5,9 +5,14 @@ $css--default-type: false;
 
 $prefix: 'cds';
 
-// @use "@carbon/styles";
-@use "@carbon/styles/scss/type";
-@use "@carbon/styles/scss/theme";
+// Carbon Charts expects the user to load IBM Plex on their own per the storybooks
+@use '@carbon/styles/scss/config' with (
+	$css--font-face: false
+);
+
+@use '@carbon/styles';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/theme';
 
 // Custom charting tokens
 @import './tokens';