@carbon/charts 0.53.5 → 0.54.0

package/styles/color-palatte.scss

@@ -261,3 +261,99 @@ $white-theme-legend-area-item-colors: (
 );
 
 $white-theme-legend-area-item-stroke: getColorValue('gray', 50);
+
+$monochrome-quantize-colors: (
+	'mono-1': (
+		'1': #ffffff,
+		'2': getColorValue('purple', 10),
+		'3': getColorValue('purple', 20),
+		'4': getColorValue('purple', 30),
+		'5': getColorValue('purple', 40),
+		'6': getColorValue('purple', 50),
+		'7': getColorValue('purple', 60),
+		'8': getColorValue('purple', 70),
+		'9': getColorValue('purple', 80),
+		'10': getColorValue('purple', 90),
+		'11': getColorValue('purple', 100),
+	),
+	'mono-2': (
+		'1': #ffffff,
+		'2': getColorValue('blue', 10),
+		'3': getColorValue('blue', 20),
+		'4': getColorValue('blue', 30),
+		'5': getColorValue('blue', 40),
+		'6': getColorValue('blue', 50),
+		'7': getColorValue('blue', 60),
+		'8': getColorValue('blue', 70),
+		'9': getColorValue('blue', 80),
+		'10': getColorValue('blue', 90),
+		'11': getColorValue('blue', 100),
+	),
+	'mono-3': (
+		'1': #ffffff,
+		'2': getColorValue('cyan', 10),
+		'3': getColorValue('cyan', 20),
+		'4': getColorValue('cyan', 30),
+		'5': getColorValue('cyan', 40),
+		'6': getColorValue('cyan', 50),
+		'7': getColorValue('cyan', 60),
+		'8': getColorValue('cyan', 70),
+		'9': getColorValue('cyan', 80),
+		'10': getColorValue('cyan', 90),
+		'11': getColorValue('cyan', 100),
+	),
+	'mono-4': (
+		'1': #ffffff,
+		'2': getColorValue('teal', 10),
+		'3': getColorValue('teal', 20),
+		'4': getColorValue('teal', 30),
+		'5': getColorValue('teal', 40),
+		'6': getColorValue('teal', 50),
+		'7': getColorValue('teal', 60),
+		'8': getColorValue('teal', 70),
+		'9': getColorValue('teal', 80),
+		'10': getColorValue('teal', 90),
+		'11': getColorValue('teal', 100),
+	),
+);
+
+$divergent-quantize-colors: (
+	'diverge-1': (
+		'1': getColorValue('red', 80),
+		'2': getColorValue('red', 70),
+		'3': getColorValue('red', 60),
+		'4': getColorValue('red', 50),
+		'5': getColorValue('red', 40),
+		'6': getColorValue('red', 30),
+		'7': getColorValue('red', 20),
+		'8': getColorValue('red', 10),
+		'9': #ffffff,
+		'10': getColorValue('cyan', 10),
+		'11': getColorValue('cyan', 20),
+		'12': getColorValue('cyan', 30),
+		'13': getColorValue('cyan', 40),
+		'14': getColorValue('cyan', 50),
+		'15': getColorValue('cyan', 60),
+		'16': getColorValue('cyan', 70),
+		'17': getColorValue('cyan', 80),
+	),
+	'diverge-2': (
+		'1': getColorValue('purple', 80),
+		'2': getColorValue('purple', 70),
+		'3': getColorValue('purple', 60),
+		'4': getColorValue('purple', 50),
+		'5': getColorValue('purple', 40),
+		'6': getColorValue('purple', 30),
+		'7': getColorValue('purple', 20),
+		'8': getColorValue('purple', 10),
+		'9': #ffffff,
+		'10': getColorValue('teal', 10),
+		'11': getColorValue('teal', 20),
+		'12': getColorValue('teal', 30),
+		'13': getColorValue('teal', 40),
+		'14': getColorValue('teal', 50),
+		'15': getColorValue('teal', 60),
+		'16': getColorValue('teal', 70),
+		'17': getColorValue('teal', 80),
+	),
+);

package/styles/colors.scss

@@ -12,6 +12,13 @@
 	}
 }
 
+@function getGradientColors() {
+	$monochrome: color-property(null, $monochrome-quantize-colors);
+	$divergent: color-property(null, $divergent-quantize-colors);
+
+	@return map-merge($monochrome, $divergent);
+}
+
 @function getLegendAreaItemColors() {
 	@if $carbon--theme ==
 		$carbon--theme--g100 or
@@ -47,8 +54,31 @@
 	}
 }
 
+@function gradient-color-property($name, $theme-colors) {
+	$color-items: ();
+
+	@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)
+				);
+			} @else {
+				$color-items: map-merge(
+					$color-items,
+					color-property('#{$name}-#{$category}', $value)
+				);
+			}
+		}
+		@return $color-items;
+	} @else {
+		@return (#{$name}: $theme-colors);
+	}
+}
+
 .#{$prefix}--#{$charts-prefix}--chart-wrapper {
-	$color-map: getThemeColors();
+	$color-map: map-merge(getThemeColors(), getGradientColors());
 
 	@each $token, $color in $color-map {
 		.fill-#{$token} {
@@ -72,6 +102,10 @@
 		.stroke-#{$token} {
 			stroke: $color;
 		}
+
+		.stop-color-#{$token} {
+			stop-color: $color;
+		}
 	}
 }
 

package/styles/components/_axis.scss

@@ -10,6 +10,47 @@
 			visibility: hidden;
 		}
 
+		g.tick-hover rect.axis-holder {
+			fill: transparent;
+			stroke: transparent;
+			stroke-width: 2px;
+		}
+
+		g.tick-hover:hover,
+		g.tick-hover:focus {
+			@if $carbon--theme ==
+				$carbon--theme--g90 or
+				$carbon--theme ==
+				$carbon--theme--g100
+			{
+				rect.axis-holder {
+					fill: white;
+					stroke: white;
+					stroke-width: 2px;
+				}
+
+				text {
+					fill: invert($text-02);
+				}
+			}
+
+			@if $carbon--theme ==
+				$carbon--theme--g10 or
+				$carbon--theme ==
+				$carbon--theme--white
+			{
+				rect.axis-holder {
+					fill: black;
+					stroke: black;
+					stroke-width: 2px;
+				}
+
+				text {
+					fill: white;
+				}
+			}
+		}
+
 		g.tick text {
 			fill: $text-02;
 			font-family: carbon--font-family('sans-condensed');

package/styles/components/_color-legend.scss

@@ -0,0 +1,24 @@
+svg.#{$prefix}--#{$charts-prefix}--color-legend {
+	display: flex;
+	user-select: none;
+
+	@if $carbon--theme ==
+		$carbon--theme--g90 or
+		$carbon--theme ==
+		$carbon--theme--g100
+	{
+		g.legend-title text {
+			color: white;
+		}
+	}
+
+	@if $carbon--theme ==
+		$carbon--theme--g10 or
+		$carbon--theme ==
+		$carbon--theme--white
+	{
+		g.legend-title text {
+			fill: black;
+		}
+	}
+}

package/styles/components/index.scss

@@ -17,3 +17,4 @@
 @import './zoom-bar';
 @import './highlights';
 @import './diagrams/index.scss';
+@import './color-legend';

package/styles/graphs/_heatmap.scss

@@ -0,0 +1,70 @@
+.#{$prefix}--#{$charts-prefix}--heatmap {
+	g.highlighter-hidden {
+		visibility: hidden;
+	}
+
+	g.cell-highlight {
+		line {
+			stroke: white;
+			stroke-width: 1px;
+		}
+	}
+
+	g.cell-2 {
+		line {
+			stroke: white;
+			stroke-width: 2px !important;
+		}
+	}
+
+	g.multi-cell {
+		line {
+			stroke: white;
+			stroke-width: 2px;
+		}
+	}
+
+	rect.pattern-fill {
+		fill: $ui-04;
+	}
+
+	g.shadows {
+		line.top {
+			filter: drop-shadow(0px -3px 2px black);
+		}
+
+		line.down {
+			filter: drop-shadow(0px 3px 2px black);
+		}
+
+		line.left {
+			filter: drop-shadow(-3px 0px 2px black);
+		}
+
+		line.right {
+			filter: drop-shadow(3px 0px 2px black);
+		}
+	}
+
+	rect.null-state {
+		stroke: transparent !important;
+	}
+
+	rect.heat {
+		stroke-width: 0px;
+	}
+
+	rect.heat {
+		stroke: $ui-background;
+	}
+
+	rect.null-state {
+		fill: $ui-01;
+	}
+
+	@if $carbon--theme == $carbon--theme--g90 {
+		rect.null-state {
+			fill: $inverse-01;
+		}
+	}
+}

package/styles/graphs/index.scss

@@ -15,3 +15,4 @@
 @import './circle-pack';
 @import './wordcloud';
 @import './alluvial';
+@import './heatmap';