@carbon/charts 1.8.0 → 1.9.0-next.1.0

package/scss/_color-palette.scss

@@ -0,0 +1,458 @@
+@use 'sass:map';
+@use '@carbon/styles/scss/colors';
+
+@function getColorValue($color, $scale) {
+	@return map.get($colors, $color, $scale);
+}
+
+$white-theme-colors: (
+	'1': (
+		'1': (
+			'1': getColorValue(purple, 70)
+		),
+		'2': (
+			'1': getColorValue(blue, 80)
+		),
+		'3': (
+			'1': getColorValue(cyan, 50)
+		),
+		'4': (
+			'1': getColorValue(teal, 60)
+		)
+	),
+	'2': (
+		'1': (
+			'1': getColorValue(purple, 70),
+			'2': getColorValue(teal, 50)
+		),
+		'2': (
+			'1': getColorValue(purple, 60),
+			'2': getColorValue(red, 90)
+		),
+		'3': (
+			'1': getColorValue(magenta, 70),
+			'2': getColorValue(red, 90)
+		),
+		'4': (
+			'1': getColorValue(cyan, 50),
+			'2': getColorValue(teal, 70)
+		),
+		'5': (
+			'1': getColorValue(teal, 50),
+			'2': getColorValue(blue, 80)
+		)
+	),
+	'3': (
+		'1': (
+			'1': getColorValue(magenta, 50),
+			'2': getColorValue(cyan, 50),
+			'3': getColorValue(purple, 70)
+		),
+		'2': (
+			'1': getColorValue(magenta, 70),
+			'2': getColorValue(red, 50),
+			'3': getColorValue(red, 90)
+		),
+		'3': (
+			'1': getColorValue(purple, 50),
+			'2': getColorValue(teal, 70),
+			'3': getColorValue(blue, 80)
+		),
+		'4': (
+			'1': getColorValue(purple, 50),
+			'2': getColorValue(teal, 70),
+			'3': getColorValue(magenta, 70)
+		),
+		'5': (
+			'1': getColorValue(cyan, 90),
+			'2': getColorValue(purple, 70),
+			'3': getColorValue(teal, 50)
+		)
+	),
+	'4': (
+		'1': (
+			'1': getColorValue(purple, 70),
+			'2': getColorValue(cyan, 90),
+			'3': getColorValue(teal, 50),
+			'4': getColorValue(magenta, 50)
+		),
+		'2': (
+			'1': getColorValue(magenta, 70),
+			'2': getColorValue(red, 50),
+			'3': getColorValue(red, 90),
+			'4': getColorValue(purple, 50)
+		),
+		'3': (
+			'1': getColorValue(teal, 50),
+			'2': getColorValue(blue, 80),
+			'3': getColorValue(purple, 50),
+			'4': getColorValue(magenta, 70)
+		)
+	),
+	'5': (
+		'1': (
+			'1': getColorValue(purple, 70),
+			'2': getColorValue(cyan, 50),
+			'3': getColorValue(teal, 70),
+			'4': getColorValue(magenta, 70),
+			'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)
+		)
+	),
+	'14': (
+		'1': (
+			'1': getColorValue(purple, 70),
+			'2': getColorValue(cyan, 50),
+			'3': getColorValue(teal, 70),
+			'4': getColorValue(magenta, 70),
+			'5': getColorValue(red, 50),
+			'6': getColorValue(red, 90),
+			'7': getColorValue(green, 60),
+			'8': getColorValue(blue, 80),
+			'9': getColorValue(magenta, 50),
+			'10': #b28600,
+			//yellow 50, update when available in carbon color
+			'11': getColorValue(teal, 50),
+			'12': getColorValue(cyan, 90),
+			'13': #8a3800,
+			//orange 70, update when available in carbon color
+			'14': getColorValue(purple, 50)
+		)
+	)
+);
+
+$dark-theme-colors: (
+	'1': (
+		'1': (
+			'1': getColorValue(purple, 30)
+		),
+		'2': (
+			'1': getColorValue(blue, 50)
+		),
+		'3': (
+			'1': getColorValue(cyan, 40)
+		),
+		'4': (
+			'1': getColorValue(teal, 40)
+		)
+	),
+	'2': (
+		'1': (
+			'1': getColorValue(purple, 60),
+			'2': getColorValue(teal, 40)
+		),
+		'2': (
+			'1': getColorValue(purple, 60),
+			'2': getColorValue(magenta, 40)
+		),
+		'3': (
+			'1': getColorValue(magenta, 40),
+			'2': getColorValue(red, 10)
+		),
+		'4': (
+			'1': getColorValue(blue, 50),
+			'2': getColorValue(cyan, 20)
+		),
+		'5': (
+			'1': getColorValue(teal, 60),
+			'2': getColorValue(green, 30)
+		)
+	),
+	'3': (
+		'1': (
+			'1': getColorValue(purple, 60),
+			'2': getColorValue(teal, 40),
+			'3': getColorValue(cyan, 20)
+		),
+		'2': (
+			'1': getColorValue(purple, 60),
+			'2': getColorValue(magenta, 40),
+			'3': getColorValue(red, 10)
+		),
+		'3': (
+			'1': getColorValue(blue, 50),
+			'2': getColorValue(teal, 40),
+			'3': getColorValue(purple, 30)
+		),
+		'4': (
+			'1': getColorValue(blue, 50),
+			'2': getColorValue(green, 30),
+			'3': getColorValue(red, 10)
+		),
+		'5': (
+			'1': getColorValue(teal, 60),
+			'2': getColorValue(green, 30),
+			'3': getColorValue(cyan, 20)
+		)
+	),
+	'4': (
+		'1': (
+			'1': getColorValue(purple, 60),
+			'2': getColorValue(teal, 40),
+			'3': getColorValue(cyan, 20),
+			'4': getColorValue(blue, 50)
+		),
+		'2': (
+			'1': getColorValue(blue, 50),
+			'2': getColorValue(teal, 40),
+			'3': getColorValue(purple, 30),
+			'4': getColorValue(red, 10)
+		),
+		'3': (
+			'1': getColorValue(teal, 60),
+			'2': getColorValue(red, 10),
+			'3': getColorValue(cyan, 40),
+			'4': getColorValue(green, 30)
+		)
+	),
+	'5': (
+		'1': (
+			'1': getColorValue(purple, 60),
+			'2': getColorValue(teal, 40),
+			'3': getColorValue(cyan, 20),
+			'4': getColorValue(blue, 50),
+			'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)
+		)
+	),
+	'14': (
+		'1': (
+			'1': getColorValue(purple, 60),
+			'2': getColorValue(cyan, 40),
+			'3': getColorValue(teal, 60),
+			'4': getColorValue(magenta, 40),
+			'5': getColorValue(red, 50),
+			'6': getColorValue(red, 10),
+			'7': getColorValue(green, 30),
+			'8': getColorValue(blue, 50),
+			'9': getColorValue(magenta, 60),
+			'10': #d2a106,
+			//yellow 40, update when available in carbon color
+			'11': getColorValue(teal, 40),
+			'12': getColorValue(cyan, 20),
+			'13': #ba4e00,
+			//orange 60, update when available in carbon color
+			'14': getColorValue(purple, 30)
+		)
+	)
+);
+
+$dark-theme-legend-area-item-colors: (
+	'1': getColorValue(gray, 90),
+	'2': getColorValue(gray, 80),
+	'3': getColorValue(gray, 70)
+);
+
+$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)
+);
+
+$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)
+	)
+);
+
+$dark-monochrome-quantize-colors: (
+	'mono-1': (
+		'1': getColorValue(purple, 100),
+		'2': getColorValue(purple, 90),
+		'3': getColorValue(purple, 80),
+		'4': getColorValue(purple, 70),
+		'5': getColorValue(purple, 60),
+		'6': getColorValue(purple, 50),
+		'7': getColorValue(purple, 40),
+		'8': getColorValue(purple, 30),
+		'9': getColorValue(purple, 20),
+		'10': getColorValue(purple, 10),
+		'11': #ffffff,
+	),
+	'mono-2': (
+		'1': getColorValue(blue, 100),
+		'2': getColorValue(blue, 90),
+		'3': getColorValue(blue, 80),
+		'4': getColorValue(blue, 70),
+		'5': getColorValue(blue, 60),
+		'6': getColorValue(blue, 50),
+		'7': getColorValue(blue, 40),
+		'8': getColorValue(blue, 30),
+		'9': getColorValue(blue, 20),
+		'10': getColorValue(blue, 10),
+		'11': #ffffff,
+	),
+	'mono-3': (
+		'1': getColorValue(cyan, 100),
+		'2': getColorValue(cyan, 90),
+		'3': getColorValue(cyan, 80),
+		'4': getColorValue(cyan, 70),
+		'5': getColorValue(cyan, 60),
+		'6': getColorValue(cyan, 50),
+		'7': getColorValue(cyan, 40),
+		'8': getColorValue(cyan, 30),
+		'9': getColorValue(cyan, 20),
+		'10': getColorValue(cyan, 10),
+		'11': #ffffff,
+	),
+	'mono-4': (
+		'1': getColorValue(teal, 100),
+		'2': getColorValue(teal, 90),
+		'3': getColorValue(teal, 80),
+		'4': getColorValue(teal, 70),
+		'5': getColorValue(teal, 60),
+		'6': getColorValue(teal, 50),
+		'7': getColorValue(teal, 40),
+		'8': getColorValue(teal, 30),
+		'9': getColorValue(teal, 20),
+		'10': getColorValue(teal, 10),
+		'11': #ffffff,
+	),
+);
+
+$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)
+	)
+);
+
+$dark-divergent-quantize-colors: (
+	'diverge-1': (
+		'1': getColorValue(red, 10),
+		'2': getColorValue(red, 20),
+		'3': getColorValue(red, 30),
+		'4': getColorValue(red, 40),
+		'5': getColorValue(red, 50),
+		'6': getColorValue(red, 60),
+		'7': getColorValue(red, 70),
+		'8': getColorValue(red, 80),
+		'9': #ffffff,
+		'10': getColorValue(cyan, 80),
+		'11': getColorValue(cyan, 70),
+		'12': getColorValue(cyan, 60),
+		'13': getColorValue(cyan, 50),
+		'14': getColorValue(cyan, 40),
+		'15': getColorValue(cyan, 30),
+		'16': getColorValue(cyan, 20),
+		'17': getColorValue(cyan, 10),
+	),
+	'diverge-2': (
+		'1': getColorValue(purple, 10),
+		'2': getColorValue(purple, 20),
+		'3': getColorValue(purple, 30),
+		'4': getColorValue(purple, 40),
+		'5': getColorValue(purple, 50),
+		'6': getColorValue(purple, 60),
+		'7': getColorValue(purple, 70),
+		'8': getColorValue(purple, 80),
+		'9': #ffffff,
+		'10': getColorValue(teal, 80),
+		'11': getColorValue(teal, 70),
+		'12': getColorValue(teal, 60),
+		'13': getColorValue(teal, 50),
+		'14': getColorValue(teal, 40),
+		'15': getColorValue(teal, 30),
+		'16': getColorValue(teal, 20),
+		'17': getColorValue(teal, 10),
+	),
+);

package/scss/_colors.scss

@@ -0,0 +1,131 @@
+@use 'sass:color';
+@use 'sass:map';
+
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/theme' as *;
+
+@import './color-palette.scss';
+
+@function generateCSSCustomProperty($token, $fallback) {
+	@return var(--cds-charts-#{$token}, $fallback);
+}
+
+@function getThemeColors($theme_type) {
+	@if $theme_type == 'dark' {
+		@return color-property(null, $dark-theme-colors);
+	} @else {
+		@return color-property(null, $white-theme-colors);
+	}
+}
+
+@function getGradientColors() {
+	$monochrome: color-property(null, $monochrome-quantize-colors);
+	$divergent: color-property(null, $divergent-quantize-colors);
+
+	@return map-merge($monochrome, $divergent);
+}
+
+@function 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);
+	}
+}
+
+$color-map-light: map-merge(getThemeColors('light'), getGradientColors());
+.#{$prefix}--chart-holder {
+	@each $token, $color in $color-map-light {
+		--cds-charts-#{$token}: #{$color};
+		--cds-charts-#{$token}-hovered: #{darken($color, 7%)};
+	}
+}
+
+$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 {
+		--cds-charts-#{$token}: #{$color};
+		--cds-charts-#{$token}-hovered: #{darken($color, 7%)};
+	}
+}
+
+$color-map: map-merge(getThemeColors('light'), getGradientColors());
+.#{$prefix}--#{$charts-prefix}--chart-wrapper {
+	@each $token, $color in $color-map {
+		.fill-#{$token} {
+			fill: generateCSSCustomProperty($token, $color);
+
+			&.hovered {
+				fill: generateCSSCustomProperty(#{$token}-hovered, $color);
+				@include default_transition;
+			}
+		}
+
+		.background-#{$token} {
+			background-color: generateCSSCustomProperty($token, $color);
+
+			&.hovered {
+				background-color: generateCSSCustomProperty(#{$token}-hovered, $color);
+				@include default_transition;
+			}
+		}
+
+		.stroke-#{$token} {
+			stroke: generateCSSCustomProperty($token, $color);
+		}
+
+		.stop-color-#{$token} {
+			stop-color: generateCSSCustomProperty($token, $color);
+		}
+	}
+}
+
+.#{$prefix}--#{$charts-prefix}--tooltip {
+	$color-map: getThemeColors('light');
+
+	@each $token, $color in $color-map {
+		.tooltip-#{$token} {
+			background-color: generateCSSCustomProperty($token, $color);
+		}
+	}
+}
+
+.#{$prefix}--#{$charts-prefix}--legend {
+	.additional > .icon {
+		.area-1 {
+			fill: $zone-fill-01;
+			stroke: $zone-stroke-01;
+		}
+
+		.area-2 {
+			fill: $zone-fill-02;
+			stroke: $zone-stroke-02;
+		}
+
+		.area-3 {
+			fill: $zone-fill-03;
+			stroke: $zone-stroke-03;
+		}
+
+		.quartile {
+			&-wrapper {
+				fill: $zone-fill-02;
+				stroke: $zone-stroke-01;
+			}
+
+			&-line {
+				fill: $layer-inverse-absolute;
+			}
+		}
+	}
+}