@carbon/charts 0.58.1 → 1.0.1

package/styles/graphs/_alluvial.scss

@@ -1,30 +1,17 @@
-.#{$prefix}--#{$charts-prefix}--alluvial {
-	@if $carbon--theme ==
-		$carbon--theme--g90 or
-		$carbon--theme ==
-		$carbon--theme--g100
-	{
-		rect.node,
-		rect.node-text-bg {
-			fill: white;
-		}
+@use "@carbon/styles/scss/themes";
+@use "@carbon/styles/scss/theme" as *;
 
-		text.node-text {
-			fill: black;
-		}
+.#{$prefix}--#{$charts-prefix}--alluvial {
+	rect.node,
+	rect.node-text-bg {
+		fill: $layer-inverse-absolute;
 	}
 
-	@if $carbon--theme ==
-		$carbon--theme--g10 or
-		$carbon--theme ==
-		$carbon--theme--white
-	{
-		text.node-text {
-			fill: white;
-		}
+	text.node-text {
+		fill: $layer-01-absolute;
+	}
 
-		polygon.arrow-down {
-			fill: black;
-		}
+	polygon.arrow-down {
+		fill: $layer-01;
 	}
 }

package/styles/graphs/_bubble.scss

@@ -1,14 +1,15 @@
-@import './../vendor/@carbon/motion/scss/motion.scss';
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/theme' as *;
 
 .#{$prefix}--#{$charts-prefix}--bubble {
 	circle.dot.hovered {
 		fill-opacity: 1;
 		transition: all 0.1s;
-		@include carbon--motion(standard, expressive);
+		@include motion(standard, expressive);
 	}
 
 	circle.dot.unfilled {
-		fill: $ui-01;
+		fill: $layer-01;
 	}
 
 	g.lines path.line {

package/styles/graphs/_bullet.scss

@@ -1,43 +1,25 @@
-@import './../vendor/@carbon/motion/scss/motion.scss';
+@use "@carbon/styles/scss/themes";
+@use "@carbon/styles/scss/theme";
+
+@use "@carbon/styles/scss/motion" as *;
 
 .#{$prefix}--#{$charts-prefix}--bullet {
 	path.range-box {
 		pointer-events: none;
 
 		&.order-1 {
-			@if ($carbon--theme == $carbon--theme--g90) or
-				($carbon--theme == $carbon--theme--g100)
-			{
-				fill: $carbon--gray-90;
-				stroke: $carbon--gray-60;
-			} @else {
-				fill: $carbon--gray-10;
-				stroke: $carbon--gray-50;
-			}
+			fill: $zone-fill-01;
+			stroke: $zone-stroke-01;
 		}
 
 		&.order-2 {
-			@if ($carbon--theme == $carbon--theme--g90) or
-				($carbon--theme == $carbon--theme--g100)
-			{
-				fill: $carbon--gray-80;
-				stroke: $carbon--gray-60;
-			} @else {
-				fill: $carbon--gray-20;
-				stroke: $carbon--gray-50;
-			}
+			fill: $zone-fill-02;
+			stroke: $zone-stroke-02;
 		}
 
 		&.order-3 {
-			@if ($carbon--theme == $carbon--theme--g90) or
-				($carbon--theme == $carbon--theme--g100)
-			{
-				fill: $carbon--gray-70;
-				stroke: $carbon--gray-60;
-			} @else {
-				fill: $carbon--gray-30;
-				stroke: $carbon--gray-50;
-			}
+			fill: $zone-fill-03;
+			stroke: $zone-stroke-03;
 		}
 	}
 
@@ -45,23 +27,10 @@
 	path.quartile {
 		pointer-events: none;
 		stroke-width: 1.5px;
-
-		@if ($carbon--theme == $carbon--theme--g90) or
-			($carbon--theme == $carbon--theme--g100)
-		{
-			stroke: #fff;
-		} @else {
-			stroke: #000;
-		}
+		stroke: $layer-inverse-absolute;
 	}
 
 	path.quartile.over-bar {
-		@if ($carbon--theme == $carbon--theme--g90) or
-			($carbon--theme == $carbon--theme--g100)
-		{
-			stroke: #000;
-		} @else {
-			stroke: #fff;
-		}
+		stroke: $layer-01-absolute;
 	}
 }

package/styles/graphs/_circle-pack.scss

@@ -1,3 +1,5 @@
+@use "@carbon/styles/scss/theme" as *;
+
 .#{$prefix}--#{$charts-prefix}--circle-pack {
 	circle.node {
 		stroke-width: 1.5px;
@@ -7,9 +9,9 @@
 		}
 
 		&.non-focal {
-			fill: $disabled-02;
+			fill: $icon-disabled;
 			fill-opacity: 30%;
-			stroke: $disabled-02;
+			stroke: $icon-disabled;
 		}
 
 		&.clickable {

package/styles/graphs/_gauge.scss

@@ -1,21 +1,23 @@
+@use "@carbon/styles/scss/theme" as *;
+
 .#{$prefix}--#{$charts-prefix}--gauge {
 	overflow: visible;
 
 	path.arc-background {
-		fill: $ui-01;
+		fill: $layer-01;
 	}
 
 	.gauge-delta-arrow {
 		&.status--danger {
-			fill: $support-01;
+			fill: $support-error;
 		}
 
 		&.status--warning {
-			fill: $support-03;
+			fill: $support-warning;
 		}
 
 		&.status--success {
-			fill: $support-02;
+			fill: $support-success;
 		}
 	}
 }

package/styles/graphs/_heatmap.scss

@@ -1,3 +1,6 @@
+@use "@carbon/styles/scss/themes";
+@use "@carbon/styles/scss/theme" as *;
+
 .#{$prefix}--#{$charts-prefix}--heatmap {
 	g.highlighter-hidden {
 		visibility: hidden;
@@ -25,7 +28,7 @@
 	}
 
 	rect.pattern-fill {
-		fill: $ui-04;
+		fill: $border-strong-01;
 	}
 
 	g.shadows {
@@ -46,25 +49,12 @@
 		}
 	}
 
-	rect.null-state {
-		stroke: transparent !important;
-	}
-
 	rect.heat {
 		stroke-width: 0px;
-	}
-
-	rect.heat {
-		stroke: $ui-background;
+		stroke: $background;
 	}
 
 	rect.null-state {
-		fill: $ui-01;
-	}
-
-	@if $carbon--theme == $carbon--theme--g90 {
-		rect.null-state {
-			fill: $inverse-01;
-		}
+		fill: $icon-inverse;
 	}
 }

package/styles/graphs/_line.scss

@@ -1,5 +1,7 @@
-$lines-bg-color: $ui-03;
-$lines-shimmer-color: $carbon--white-0;
+@use '@carbon/styles/scss/theme' as *;
+
+$lines-bg-color: $layer-accent-01;
+$lines-shimmer-color: $white-0;
 
 .#{$prefix}--#{$charts-prefix}--line {
 	path.line {

package/styles/graphs/_meter.scss

@@ -1,45 +1,34 @@
+@use '@carbon/styles/scss/themes';
+@use "@carbon/styles/scss/theme" as *;
+
 .#{$prefix}--#{$charts-prefix}--meter {
 	rect.container {
-		fill: $ui-01;
+		fill: $layer-01;
 	}
 
 	line.rangeIndicator {
-		stroke: $carbon--gray-40;
+		stroke: $meter-range-indicator;
 		stroke-width: 1px;
-		@if $carbon--theme ==
-			$carbon--theme--g90 or
-			$carbon--theme ==
-			$carbon--theme--g100
-		{
-			stroke: $carbon--gray-60;
-		}
 	}
 
 	rect.value {
 		&.status--danger {
-			fill: $support-01;
+			fill: $support-error;
 		}
 
 		&.status--warning {
-			fill: $support-03;
+			fill: $support-warning;
 			stroke-width: 1px;
-			stroke: $carbon-dataviz-alert;
-			@if $carbon--theme ==
-				$carbon--theme--g90 or
-				$carbon--theme ==
-				$carbon--theme--g100
-			{
-				stroke: none;
-			}
+			stroke: $alert-stroke;
 		}
 
 		&.status--success {
-			fill: $support-02;
+			fill: $support-success;
 		}
 	}
 
 	line.peak {
-		stroke: $ui-05;
+		stroke: $border-inverse;
 		stroke-width: 2px;
 	}
 }

package/styles/graphs/_radar.scss

@@ -1,3 +1,6 @@
+@use '@carbon/styles/scss/themes';
+@use "@carbon/styles/scss/theme" as *;
+
 .#{$prefix}--#{$charts-prefix}--radar {
 	.blobs path {
 		stroke-width: 1.5px;
@@ -6,19 +9,10 @@
 	.y-axes path,
 	.x-axes line {
 		stroke-width: 1px;
-		stroke: $ui-03;
+		stroke: $layer-accent-01;
 	}
 
 	.x-axes line.hovered {
-		@if $ui-background == map-get($carbon--theme--g90, 'ui-background') {
-			stroke: $carbon--white-0;
-		} @else if
-			$ui-background ==
-			map-get($carbon--theme--g100, 'ui-background')
-		{
-			stroke: $carbon--white-0;
-		} @else {
-			stroke: $carbon--black-100;
-		}
+		stroke: $layer-inverse-absolute;
 	}
 }

package/styles/graphs/_scatter-stacked.scss

@@ -1,6 +1,8 @@
+@use "@carbon/styles/scss/theme" as *;
+
 .#{$prefix}--#{$charts-prefix}--scatter-stacked {
 	circle.dot.unfilled {
-		fill: $ui-01;
+		fill: $layer-01;
 		stroke-width: 1.5;
 	}
 

package/styles/graphs/_scatter.scss

@@ -1,14 +1,15 @@
-@import './../vendor/@carbon/motion/scss/motion.scss';
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/theme' as *;
 
 .#{$prefix}--#{$charts-prefix}--scatter {
 	circle.dot.hovered {
 		fill-opacity: 1;
 		transition: all 0.1s;
-		@include carbon--motion(standard, expressive);
+		@include motion(standard, expressive);
 	}
 
 	circle.dot.unfilled {
-		fill: $ui-01;
+		fill: $layer-01;
 		stroke-width: 1.5;
 	}
 

package/styles/graphs/_tree.scss

@@ -1,8 +1,10 @@
+@use "@carbon/styles/scss/theme" as *;
+
 .#{$prefix}--#{$charts-prefix}--chart-wrapper
 	.#{$prefix}--#{$charts-prefix}--tree {
 	g.links {
 		fill: none;
-		stroke: $ui-04;
+		stroke: $border-strong-01;
 		stroke-opacity: 0.4;
 		stroke-width: 1.5;
 	}
@@ -12,11 +14,13 @@
 
 		&:hover {
 			text {
-				font-weight: carbon--font-weight('semibold');
+				// TODO-V11
+				// font-weight: font-weight('semibold');
+				font-weight: 600;
 			}
 
 			circle {
-				fill: $text-01;
+				fill: $text-primary;
 				@include default_transition;
 			}
 		}
@@ -24,19 +28,19 @@
 
 	circle {
 		&.parent {
-			fill: $text-02;
+			fill: $text-secondary;
 		}
 
 		&.child {
-			fill: $ui-04;
+			fill: $border-strong-01;
 		}
 	}
 
 	text {
-		fill: $text-01;
+		fill: $text-primary;
 
 		&.text-stroke {
-			stroke: $inverse-01;
+			stroke: $text-inverse;
 			stroke-width: 2px;
 		}
 	}

package/styles/graphs/_treemap.scss

@@ -1,5 +1,3 @@
-@import './../vendor/@carbon/motion/scss/motion.scss';
-
 .#{$prefix}--#{$charts-prefix}--treemap {
 	text {
 		pointer-events: none;

package/styles/graphs/_wordcloud.scss

@@ -1,6 +1,8 @@
 .#{$prefix}--#{$charts-prefix}--wordcloud {
 	text.word {
 		&.light {
+			// TODO-V11
+			// font-weight: font-weight('light');
 			font-weight: 300;
 		}
 	}

package/styles/styles.scss

@@ -1,34 +1,34 @@
 $charts-prefix: 'cc';
 
-// Custom dataviz palette colors
-$carbon-dataviz-alert: #b28600;
-$carbon-dataviz-yellow-10: #fcf4d6;
-
 $css--reset: false;
 $css--default-type: false;
 
-// Carbon imports
-@import './vendor/@carbon/colors/scss/colors';
-@import './vendor/@carbon/type/scss/prefix';
+$prefix: 'cds';
 
-@if variable-exists($name: 'carbon--theme') == false {
-	@warn "$carbon--theme not found, or is undefined. \
-	Either import the Carbon SCSS and set a theme or, if you're using Charts without Carbon, \
-	import one of the styles-[theme name here].scss files";
-}
+// @use "@carbon/styles";
+@use "@carbon/styles/scss/type";
+@use "@carbon/styles/scss/theme";
+
+// Custom charting tokens
+@import './tokens';
+@include theme.add-component-tokens($custom-charting-tokens);
+
+@import '@carbon/import-once/scss/import-once';
+
+// Carbon imports
+@import '@carbon/colors/index.scss';
+@import '@carbon/styles/scss/components/button/_tokens.scss';
 
 @mixin default_transition {
 	transition: all 0.1s ease-out;
 }
 
 // Internal
-@import './mixins.scss';
 @import './colors.scss';
 @import './components/index.scss';
 @import './graphs/index.scss';
 @import './type';
 @import './chart-holder';
-@import './chart-feature-flags';
 
 .#{$prefix}--#{$charts-prefix}--chart-wrapper {
 	overflow: visible;