@carbon/charts 1.11.21 → 1.13.0

package/scss/graphs/_circle-pack.scss

@@ -1,6 +1,7 @@
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/theme';
+@use '../globals';
 
-.#{$prefix}--#{$charts-prefix}--circle-pack {
+.#{globals.$prefix}--#{globals.$charts-prefix}--circle-pack {
 	circle.node {
 		stroke-width: 1.5px;
 
@@ -9,9 +10,9 @@
 		}
 
 		&.non-focal {
-			fill: $icon-disabled;
+			fill: theme.$icon-disabled;
 			fill-opacity: 30%;
-			stroke: $icon-disabled;
+			stroke: theme.$icon-disabled;
 		}
 
 		&.clickable {
@@ -20,9 +21,9 @@
 	}
 }
 
-.#{$prefix}--#{$charts-prefix}--chart-wrapper.zoomed-in {
+.#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper.zoomed-in {
 	cursor: zoom-out;
-	.#{$prefix}--#{$charts-prefix}--circle-pack {
+	.#{globals.$prefix}--#{globals.$charts-prefix}--circle-pack {
 		circle.node {
 			&.hovered-child {
 				stroke: 1.5px solid initial;

package/scss/graphs/_donut.scss

@@ -1,3 +1,5 @@
-.#{$prefix}--#{$charts-prefix}--donut {
+@use '../globals';
+
+.#{globals.$prefix}--#{globals.$charts-prefix}--donut {
 	overflow: visible;
 }

package/scss/graphs/_gauge.scss

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

package/scss/graphs/_heatmap.scss

@@ -1,7 +1,7 @@
-@use '@carbon/styles/scss/themes';
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/theme';
+@use '../globals';
 
-.#{$prefix}--#{$charts-prefix}--heatmap {
+.#{globals.$prefix}--#{globals.$charts-prefix}--heatmap {
 	g.highlighter-hidden {
 		visibility: hidden;
 	}
@@ -28,7 +28,7 @@
 	}
 
 	rect.pattern-fill {
-		fill: $border-strong-01;
+		fill: theme.$border-strong-01;
 	}
 
 	g.shadows {
@@ -51,10 +51,10 @@
 
 	rect.heat {
 		stroke-width: 0px;
-		stroke: $background;
+		stroke: theme.$background;
 	}
 
 	rect.null-state {
-		fill: $icon-inverse;
+		fill: theme.$icon-inverse;
 	}
 }

package/scss/graphs/_line.scss

@@ -1,9 +1,11 @@
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/theme';
+@use '@carbon/colors';
+@use '../globals';
 
-$lines-bg-color: $layer-accent-01;
-$lines-shimmer-color: $white-0;
+$lines-bg-color: theme.$layer-accent-01;
+$lines-shimmer-color: colors.$white-0;
 
-.#{$prefix}--#{$charts-prefix}--line {
+.#{globals.$prefix}--#{globals.$charts-prefix}--line {
 	path.line {
 		pointer-events: none;
 		fill: none;

package/scss/graphs/_lollipop.scss

@@ -1,4 +1,6 @@
-.#{$prefix}--#{$charts-prefix}--lollipop {
+@use '../globals';
+
+.#{globals.$prefix}--#{globals.$charts-prefix}--lollipop {
 	line.line {
 		pointer-events: none;
 	}

package/scss/graphs/_meter.scss

@@ -1,34 +1,35 @@
-@use '@carbon/styles/scss/themes';
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/theme';
+@use '../globals';
+@use '../tokens';
 
-.#{$prefix}--#{$charts-prefix}--meter {
+.#{globals.$prefix}--#{globals.$charts-prefix}--meter {
 	rect.container {
-		fill: $layer-01;
+		fill: theme.$layer-01;
 	}
 
 	line.rangeIndicator {
-		stroke: $meter-range-indicator;
+		stroke: tokens.$meter-range-indicator;
 		stroke-width: 1px;
 	}
 
 	rect.value {
 		&.status--danger {
-			fill: $support-error;
+			fill: theme.$support-error;
 		}
 
 		&.status--warning {
-			fill: $support-warning;
+			fill: theme.$support-warning;
 			stroke-width: 1px;
-			stroke: $alert-stroke;
+			stroke: tokens.$alert-stroke;
 		}
 
 		&.status--success {
-			fill: $support-success;
+			fill: theme.$support-success;
 		}
 	}
 
 	line.peak {
-		stroke: $border-inverse;
+		stroke: theme.$border-inverse;
 		stroke-width: 2px;
 	}
 }

package/scss/graphs/_pie.scss

@@ -1,3 +1,5 @@
-.#{$prefix}--#{$charts-prefix}--pie {
+@use '../globals';
+
+.#{globals.$prefix}--#{globals.$charts-prefix}--pie {
 	overflow: visible;
 }

package/scss/graphs/_radar.scss

@@ -1,7 +1,8 @@
-@use '@carbon/styles/scss/themes';
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/theme';
+@use '../globals';
+@use '../tokens';
 
-.#{$prefix}--#{$charts-prefix}--radar {
+.#{globals.$prefix}--#{globals.$charts-prefix}--radar {
 	.blobs path {
 		stroke-width: 1.5px;
 	}
@@ -9,10 +10,10 @@
 	.y-axes path,
 	.x-axes line {
 		stroke-width: 1px;
-		stroke: $layer-accent-01;
+		stroke: theme.$layer-accent-01;
 	}
 
 	.x-axes line.hovered {
-		stroke: $layer-inverse-absolute;
+		stroke: tokens.$layer-inverse-absolute;
 	}
 }

package/scss/graphs/_scatter-stacked.scss

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

package/scss/graphs/_scatter.scss

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

package/scss/graphs/_tree.scss

@@ -1,9 +1,11 @@
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/theme';
+@use '../globals';
+@use '../transition';
 
-.#{$prefix}--#{$charts-prefix}--chart-wrapper .#{$prefix}--#{$charts-prefix}--tree {
+.#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper .#{globals.$prefix}--#{globals.$charts-prefix}--tree {
 	g.links {
 		fill: none;
-		stroke: $border-strong-01;
+		stroke: theme.$border-strong-01;
 		stroke-opacity: 0.4;
 		stroke-width: 1.5;
 	}
@@ -19,27 +21,27 @@
 			}
 
 			circle {
-				fill: $text-primary;
-				@include default_transition;
+				fill: theme.$text-primary;
+				@include transition.default_transition;
 			}
 		}
 	}
 
 	circle {
 		&.parent {
-			fill: $text-secondary;
+			fill: theme.$text-secondary;
 		}
 
 		&.child {
-			fill: $border-strong-01;
+			fill: theme.$border-strong-01;
 		}
 	}
 
 	text {
-		fill: $text-primary;
+		fill: theme.$text-primary;
 
 		&.text-stroke {
-			stroke: $text-inverse;
+			stroke: theme.$text-inverse;
 			stroke-width: 2px;
 		}
 	}

package/scss/graphs/_treemap.scss

@@ -1,4 +1,6 @@
-.#{$prefix}--#{$charts-prefix}--treemap {
+@use '../globals';
+
+.#{globals.$prefix}--#{globals.$charts-prefix}--treemap {
 	text {
 		pointer-events: none;
 	}

package/scss/graphs/_wordcloud.scss

@@ -1,4 +1,6 @@
-.#{$prefix}--#{$charts-prefix}--wordcloud {
+@use '../globals';
+
+.#{globals.$prefix}--#{globals.$charts-prefix}--wordcloud {
 	text.word {
 		&.light {
 			// TODO-V11

package/scss/graphs/index.scss

@@ -1,19 +1,19 @@
-@import './area';
-@import './bubble';
-@import './bullet';
-@import './donut';
-@import './line';
-@import './scatter';
-@import './meter';
-@import './scatter-stacked';
-@import './radar';
-@import './tree';
-@import './treemap';
-@import './gauge';
-@import './pie';
-@import './lollipop';
-@import './circle-pack';
-@import './wordcloud';
-@import './alluvial';
-@import './heatmap';
-@import './choropleth';
+@use 'alluvial';
+@use 'area';
+@use 'bubble';
+@use 'bullet';
+@use 'choropleth';
+@use 'circle-pack';
+@use 'donut';
+@use 'gauge';
+@use 'heatmap';
+@use 'line';
+@use 'lollipop';
+@use 'meter';
+@use 'pie';
+@use 'radar';
+@use 'scatter';
+@use 'scatter-stacked';
+@use 'tree';
+@use 'treemap';
+@use 'wordcloud';

package/scss/index.scss

@@ -1,31 +1,10 @@
-$charts-prefix: 'cc';
-
-// Variables picked up by @carbon/styles/scss/config in imports
-$prefix: 'cds'; // Default value
-$css--body: false; // Do not emit styles for body element
-$css--default-type: false; // Do not include default type
-$css--font-face: false; // Do not include font face mixins from scss/fonts
-$css--reset: false; // Do not include reset CSS
-
-// Custom charting tokens
-@use '@carbon/styles/scss/theme' as theme;
-@import 'tokens';
-@include theme.add-component-tokens($custom-charting-tokens);
-@import '@carbon/styles/scss/components/button/tokens';
-
-@mixin default_transition { // used by ./colors
-	transition: all 0.1s ease-out;
-}
-@import '@carbon/colors';
-@import 'colors'; // mixins, color palette, color maps, tooltip and legend color settings
-
-@import '@carbon/import-once/scss'; // exports mixin
-@import 'components'; // use exports mixin to ensure component modules only loaded once
-
-@import 'graphs'; // chart-specific
-@import 'type'; // font size, fill, color, weight (but not family)
-@import 'chart-holder'; // container settings
-
-.#{$prefix}--#{$charts-prefix}--chart-wrapper {
-	overflow: visible;
-}
+@use 'colors'; 
+@use 'tokens';
+@use 'components';
+@use 'graphs';
+@use 'type';
+@use 'chart-holder';
+@use 'chart-wrapper';
+
+@use '@carbon/styles/scss/theme';
+@include theme.add-component-tokens(tokens.$custom-charting-tokens);