@carbon/charts 1.11.21 → 1.12.0

package/scss/components/diagrams/_shape-node.scss

@@ -1,89 +1,88 @@
-@use '@carbon/styles/scss/utilities/focus-outline' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/type' as *;
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/theme';
+@use '../../globals';
+@use '../../tokens';
 
-@include exports('cc-shape-node') {
-	.#{$prefix}--#{$charts-prefix}--shape-node {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		background-color: $layer-01;
-		box-sizing: border-box;
-		font-family: var(--#{$prefix}-charts-font-family);
-		width: 100%;
-		height: 100%;
-		position: relative;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: theme.$layer-01;
+	box-sizing: border-box;
+	font-family: var(--#{globals.$prefix}-charts-font-family);
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
 
-	.#{$prefix}--#{$charts-prefix}--shape-node--circle {
-		border-radius: 100%;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--circle {
+	border-radius: 100%;
+}
 
-	.#{$prefix}--#{$charts-prefix}--shape-node--square {
-		border-radius: 0;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--square {
+	border-radius: 0;
+}
 
-	.#{$prefix}--#{$charts-prefix}--shape-node--rounded-square {
-		border-radius: 0.5rem;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--rounded-square {
+	border-radius: 0.5rem;
+}
 
-	.#{$prefix}--#{$charts-prefix}--shape-node--a,
-	.#{$prefix}--#{$charts-prefix}--shape-node--button {
-		border: none;
-		color: inherit;
-		text-decoration: none;
-		cursor: pointer;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--a,
+.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--button {
+	border: none;
+	color: inherit;
+	text-decoration: none;
+	cursor: pointer;
+}
 
-	.#{$prefix}--#{$charts-prefix}--shape-node--button {
-		font-family: var(--#{$prefix}-charts-font-family);
-		text-align: left;
-		width: 100%;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--button {
+	font-family: var(--#{globals.$prefix}-charts-font-family);
+	text-align: left;
+	width: 100%;
+}
 
-	.#{$prefix}--#{$charts-prefix}--shape-node--a:focus,
-	.#{$prefix}--#{$charts-prefix}--shape-node--a:hover,
-	.#{$prefix}--#{$charts-prefix}--shape-node--button:focus,
-	.#{$prefix}--#{$charts-prefix}--shape-node--button:hover {
-		background-color: $network-diagrams-background-hover;
+.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--a:focus,
+.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--a:hover,
+.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--button:focus,
+.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--button:hover {
+	background-color: tokens.$network-diagrams-background-hover;
 
-		.#{$prefix}--#{$charts-prefix}--shape-node__title,
-		.#{$prefix}--#{$charts-prefix}--shape-node__subtitle {
-			// TODO-V11
-			// font-weight: font-weight('semibold');
-			font-weight: 600;
-		}
+	.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node__title,
+	.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node__subtitle {
+		// TODO-V11
+		// font-weight: font-weight('semibold');
+		font-weight: 600;
 	}
+}
 
-	.#{$prefix}--#{$charts-prefix}--shape-node--a:focus,
-	.#{$prefix}--#{$charts-prefix}--shape-node--button:focus {
-		&:focus {
-			outline: none;
-			box-shadow: 0 0 0 2px $focus;
-		}
+.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--a:focus,
+.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node--button:focus {
+	&:focus {
+		outline: none;
+		box-shadow: 0 0 0 2px theme.$focus;
 	}
+}
 
-	.#{$prefix}--#{$charts-prefix}--shape-node__body {
-		position: absolute;
-		top: calc(100% + #{$spacing-01});
-		text-align: center;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node__body {
+	position: absolute;
+	top: calc(100% + #{spacing.$spacing-01});
+	text-align: center;
+}
 
-	.#{$prefix}--#{$charts-prefix}--shape-node__subtitle {
-		padding-bottom: $spacing-01;
-		@include type-style($name: body-short-01);
-		color: $text-primary;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node__subtitle {
+	padding-bottom: spacing.$spacing-01;
+	@include type.type-style($name: body-short-01);
+	color: theme.$text-primary;
+}
 
-	.#{$prefix}--#{$charts-prefix}--shape-node__icon {
-		display: flex;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node__icon {
+	display: flex;
+}
 
-	.#{$prefix}--#{$charts-prefix}--shape-node__title {
-		@include type-style($name: body-short-01);
-		color: $text-primary;
-		padding-top: $spacing-01;
-		margin-bottom: 1px;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--shape-node__title {
+	@include type.type-style($name: body-short-01);
+	color: theme.$text-primary;
+	padding-top: spacing.$spacing-01;
+	margin-bottom: 1px;
 }

package/scss/components/diagrams/index.scss

@@ -1,4 +1,4 @@
-@import './card-node';
-@import './shape-node';
-@import './edge';
-@import './marker';
+@use 'card-node';
+@use 'shape-node';
+@use 'edge';
+@use 'marker';

package/scss/components/index.scss

@@ -1,20 +1,20 @@
-@import './axis';
-@import './callouts';
-@import './grid-brush';
-@import './grid';
-@import './ruler';
-@import './skeleton';
-@import './skeleton-lines';
-@import './zero-line';
-@import './layout';
-@import './legend';
-@import './modal';
-@import './title';
-@import './meter-title';
-@import './toolbar';
-@import './tooltip';
-@import './threshold';
-@import './zoom-bar';
-@import './highlights';
-@import './diagrams/index.scss';
-@import './color-legend';
+@use 'axis';
+@use 'callouts';
+@use 'color-legend';
+@use 'diagrams';
+@use 'grid';
+@use 'grid-brush';
+@use 'highlights';
+@use 'layout';
+@use 'legend';
+@use 'meter-title';
+@use 'modal';
+@use 'ruler';
+@use 'skeleton';
+@use 'skeleton-lines';
+@use 'threshold';
+@use 'title';
+@use 'toolbar';
+@use 'tooltip';
+@use 'zero-line';
+@use 'zoom-bar';

package/scss/demos.scss

@@ -33,6 +33,7 @@ $css--reset: false; // Do not include reset CSS
 
 .#{$prefix}--#{$charts-prefix}--chart-wrapper {
 	overflow: visible;
+	font-family: var(--#{$prefix}-charts-font-family-condensed);
 }
 
 html {

package/scss/graphs/_alluvial.scss

@@ -1,17 +1,18 @@
-@use '@carbon/styles/scss/themes';
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/theme';
+@use '../globals';
+@use '../tokens';
 
-.#{$prefix}--#{$charts-prefix}--alluvial {
+.#{globals.$prefix}--#{globals.$charts-prefix}--alluvial {
 	rect.node,
 	rect.node-text-bg {
-		fill: $layer-inverse-absolute;
+		fill: tokens.$layer-inverse-absolute;
 	}
 
 	text.node-text {
-		fill: $layer-01-absolute;
+		fill: tokens.$layer-01-absolute;
 	}
 
 	polygon.arrow-down {
-		fill: $layer-01;
+		fill: theme.$layer-01;
 	}
 }

package/scss/graphs/_area.scss

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

package/scss/graphs/_bubble.scss

@@ -1,15 +1,16 @@
-@use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/motion';
+@use '@carbon/styles/scss/theme';
+@use '../globals';
 
-.#{$prefix}--#{$charts-prefix}--bubble {
+.#{globals.$prefix}--#{globals.$charts-prefix}--bubble {
 	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;
 	}
 
 	g.lines path.line {

package/scss/graphs/_bullet.scss

@@ -1,25 +1,23 @@
-@use '@carbon/styles/scss/themes';
-@use '@carbon/styles/scss/theme';
+@use '../globals';
+@use '../tokens';
 
-@use '@carbon/styles/scss/motion' as *;
-
-.#{$prefix}--#{$charts-prefix}--bullet {
+.#{globals.$prefix}--#{globals.$charts-prefix}--bullet {
 	path.range-box {
 		pointer-events: none;
 
 		&.order-1 {
-			fill: $zone-fill-01;
-			stroke: $zone-stroke-01;
+			fill: tokens.$zone-fill-01;
+			stroke: tokens.$zone-stroke-01;
 		}
 
 		&.order-2 {
-			fill: $zone-fill-02;
-			stroke: $zone-stroke-02;
+			fill: tokens.$zone-fill-02;
+			stroke: tokens.$zone-stroke-02;
 		}
 
 		&.order-3 {
-			fill: $zone-fill-03;
-			stroke: $zone-stroke-03;
+			fill: tokens.$zone-fill-03;
+			stroke: tokens.$zone-stroke-03;
 		}
 	}
 
@@ -27,10 +25,10 @@
 	path.quartile {
 		pointer-events: none;
 		stroke-width: 1.5px;
-		stroke: $layer-inverse-absolute;
+		stroke: tokens.$layer-inverse-absolute;
 	}
 
 	path.quartile.over-bar {
-		stroke: $layer-01-absolute;
+		stroke: tokens.$layer-01-absolute;
 	}
 }

package/scss/graphs/_choropleth.scss

@@ -1,18 +1,18 @@
-@use "@carbon/styles/scss/themes";
-@use "@carbon/styles/scss/theme" as *;
+@use "@carbon/styles/scss/theme";
+@use '../globals';
 
-.#{$prefix}--#{$charts-prefix}--choropleth {
+.#{globals.$prefix}--#{globals.$charts-prefix}--choropleth {
 	path.border {
-		stroke: $border-subtle-selected-01;
+		stroke: theme.$border-subtle-selected-01;
 	}
 
 	g.missing-data path {
-		stroke: $border-subtle-selected-01;
-		fill: $background;
+		stroke: theme.$border-subtle-selected-01;
+		fill: theme.$background;
 	}
 
 	pattern path.pattern-fill {
-		stroke: $border-strong-01;
+		stroke: theme.$border-strong-01;
 		stroke-width: 0.5px;
 	}
 }

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;
 	}