@carbon/charts 1.8.0 → 1.9.0-next.0

package/styles/_chart-holder.scss

@@ -1,50 +0,0 @@
-@use "@carbon/styles/scss/theme" as *;
-@use "@carbon/styles/scss/themes";
-
-.#{$prefix}--chart-holder {
-	position: relative;
-	display: block;
-	width: 100%;
-	height: 100%;
-
-	&.filled,
-	&.fullscreen {
-		background-color: $background;
-
-		.#{$prefix}--#{$charts-prefix}--chart-wrapper {
-			background-color: $background;
-		}
-	}
-
-	.DONT_STYLE_ME_css_styles_verifier {
-		overflow: hidden;
-		opacity: 0;
-	}
-}
-
-.#{$prefix}--chart-holder {
-	@include theme(themes.$white);
-}
-
-.#{$prefix}--chart-holder[data-carbon-theme="g10"] {
-	@include theme(themes.$g10);
-}
-
-.#{$prefix}--chart-holder[data-carbon-theme="g90"] {
-	@include theme(themes.$g90);
-}
-
-.#{$prefix}--chart-holder[data-carbon-theme="g100"] {
-	@include theme(themes.$g100);
-}
-
-.#{$prefix}--chart-holder.fullscreen,
-.#{$prefix}--chart-holder:-webkit-full-screen {
-	/* !important is used here to get closer to
-	a truly fullscreen experience */
-	width: 100% !important;
-	height: 100% !important;
-	max-width: unset !important;
-	max-height: unset !important;
-	padding: 2em;
-}

package/styles/color-palatte.scss

@@ -1,458 +0,0 @@
-@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/styles/colors.scss

@@ -1,155 +0,0 @@
-@use "sass:color";
-@use "sass:map";
-
-@use "@carbon/styles/scss/themes";
-@use "@carbon/styles/scss/theme" as *;
-
-@import './color-palatte.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($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);
-	}
-
-	@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('light')
-);
-
-.#{$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('dark'));
-
-.#{$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('light'));
-
-.#{$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;
-			}
-		}
-	}
-}

package/styles/components/_color-legend.scss

@@ -1,11 +0,0 @@
-@use "@carbon/styles/scss/themes";
-@use "@carbon/styles/scss/theme";
-
-svg.#{$prefix}--#{$charts-prefix}--color-legend {
-	display: flex;
-	user-select: none;
-
-	g.legend-title text {
-		fill: $layer-inverse-absolute;
-	}
-}