@carbon/charts 1.11.21 → 1.13.0

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

@@ -1,7 +1,9 @@
-@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/utilities/focus-outline' as focus;
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/theme';
+@use '../../globals';
+@use '../../tokens';
 
 @mixin stacked-card-node {
 	content: '';
@@ -9,89 +11,87 @@
 	width: 100%;
 	position: absolute;
 	z-index: 0;
-	border-top: 0.125rem solid $layer-accent-01;
-	border-right: 0.125rem solid $layer-accent-01;
+	border-top: 0.125rem solid theme.$layer-accent-01;
+	border-right: 0.125rem solid theme.$layer-accent-01;
 	pointer-events: none;
 }
 
-@include exports('cc-card-node') {
-	.#{$prefix}--#{$charts-prefix}--card-node {
-		display: flex;
-		position: relative;
-		background-color: $layer-01;
-		z-index: 1;
-		box-sizing: border-box;
-		font-family: var(--#{$prefix}-charts-font-family);
-		width: 100%;
-		height: 100%;
-		padding: $spacing-05 $spacing-03;
-		border-left: 0.25rem solid $border-inverse;
-	}
-
-	.#{$prefix}--#{$charts-prefix}--card-node--a,
-	.#{$prefix}--#{$charts-prefix}--card-node--button {
-		border-top: none;
-		border-right: none;
-		border-bottom: none;
-		color: inherit;
-		text-decoration: none;
-		cursor: pointer;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--card-node {
+	display: flex;
+	position: relative;
+	background-color: theme.$layer-01;
+	z-index: 1;
+	box-sizing: border-box;
+	font-family: var(--#{globals.$prefix}-charts-font-family);
+	width: 100%;
+	height: 100%;
+	padding: spacing.$spacing-05 spacing.$spacing-03;
+	border-left: 0.25rem solid theme.$border-inverse;
+}
 
-	.#{$prefix}--#{$charts-prefix}--card-node--button {
-		font-family: var(--#{$prefix}-charts-font-family);
-		text-align: left;
-		width: 100%;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--card-node--a,
+.#{globals.$prefix}--#{globals.$charts-prefix}--card-node--button {
+	border-top: none;
+	border-right: none;
+	border-bottom: none;
+	color: inherit;
+	text-decoration: none;
+	cursor: pointer;
+}
 
-	.#{$prefix}--#{$charts-prefix}--card-node--a:focus,
-	.#{$prefix}--#{$charts-prefix}--card-node--a:hover,
-	.#{$prefix}--#{$charts-prefix}--card-node--button:focus,
-	.#{$prefix}--#{$charts-prefix}--card-node--button:hover {
-		background-color: $network-diagrams-background-hover;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--card-node--button {
+	font-family: var(--#{globals.$prefix}-charts-font-family);
+	text-align: left;
+	width: 100%;
+}
 
-	.#{$prefix}--#{$charts-prefix}--card-node--a:focus,
-	.#{$prefix}--#{$charts-prefix}--card-node--button:focus {
-		@include focus-outline($type: outline);
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--card-node--a:focus,
+.#{globals.$prefix}--#{globals.$charts-prefix}--card-node--a:hover,
+.#{globals.$prefix}--#{globals.$charts-prefix}--card-node--button:focus,
+.#{globals.$prefix}--#{globals.$charts-prefix}--card-node--button:hover {
+	background-color: tokens.$network-diagrams-background-hover;
+}
 
-	.#{$prefix}--#{$charts-prefix}--card-node--stacked {
-		&::before {
-			@include stacked-card-node();
-			left: 0.3125rem;
-			bottom: 0.3125rem;
-		}
+.#{globals.$prefix}--#{globals.$charts-prefix}--card-node--a:focus,
+.#{globals.$prefix}--#{globals.$charts-prefix}--card-node--button:focus {
+	@include focus.focus-outline($type: outline);
+}
 
-		&::after {
-			@include stacked-card-node();
-			left: 0.6875rem;
-			bottom: 0.6875rem;
-		}
+.#{globals.$prefix}--#{globals.$charts-prefix}--card-node--stacked {
+	&::before {
+		@include stacked-card-node();
+		left: 0.3125rem;
+		bottom: 0.3125rem;
 	}
 
-	.#{$prefix}--#{$charts-prefix}--card-node__column {
-		padding: 0 $spacing-03;
+	&::after {
+		@include stacked-card-node();
+		left: 0.6875rem;
+		bottom: 0.6875rem;
 	}
+}
 
-	.#{$prefix}--#{$charts-prefix}--card-node__column--farside {
-		margin-left: auto;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--card-node__column {
+	padding: 0 spacing.$spacing-03;
+}
 
-	.#{$prefix}--#{$charts-prefix}--card-node__title {
-		@include type-style($name: productive-heading-01);
-		margin: 0;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--card-node__column--farside {
+	margin-left: auto;
+}
 
-	.#{$prefix}--#{$charts-prefix}--card-node__subtitle {
-		@include type-style($name: body-short-01);
-		margin: 0;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--card-node__title {
+	@include type.type-style($name: productive-heading-01);
+	margin: 0;
+}
 
-	.#{$prefix}--#{$charts-prefix}--card-node__label {
-		display: block;
-		@include type-style($name: label-01);
-		color: $text-secondary;
-		padding-top: $spacing-06;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--card-node__subtitle {
+	@include type.type-style($name: body-short-01);
+	margin: 0;
+}
+
+.#{globals.$prefix}--#{globals.$charts-prefix}--card-node__label {
+	display: block;
+	@include type.type-style($name: label-01);
+	color: theme.$text-secondary;
+	padding-top: spacing.$spacing-06;
 }

package/scss/components/diagrams/_edge.scss

@@ -1,66 +1,63 @@
-@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/theme';
+@use '../../globals';
 
-@include exports('cc-edge') {
-	.#{$prefix}--#{$charts-prefix}--edge {
-		fill: transparent;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--edge {
+	fill: transparent;
+}
 
-	.#{$prefix}--#{$charts-prefix}--edge__container {
-		stroke-width: $spacing-06;
-		stroke: transparent;
-		stroke-dasharray: none;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--edge__container {
+	stroke-width: spacing.$spacing-06;
+	stroke: transparent;
+	stroke-dasharray: none;
+}
 
-	.#{$prefix}--#{$charts-prefix}--edge__inner {
-		stroke-width: 0.0625rem;
-		stroke: $border-strong-01;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--edge__inner {
+	stroke-width: 0.0625rem;
+	stroke: theme.$border-strong-01;
+}
+
+.#{globals.$prefix}--#{globals.$charts-prefix}--edge__outer {
+	stroke-width: 0.15625rem;
+	stroke: transparent;
+}
 
-	.#{$prefix}--#{$charts-prefix}--edge__outer {
+.#{globals.$prefix}--#{globals.$charts-prefix}--edge:hover {
+	.#{globals.$prefix}--#{globals.$charts-prefix}--edge__inner {
 		stroke-width: 0.15625rem;
-		stroke: transparent;
 	}
+}
 
-	.#{$prefix}--#{$charts-prefix}--edge:hover {
-		.#{$prefix}--#{$charts-prefix}--edge__inner {
-			stroke-width: 0.15625rem;
-		}
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--edge--dash-sm {
+	stroke-dasharray: 2 4;
+}
 
-	.#{$prefix}--#{$charts-prefix}--edge--dash-sm {
-		stroke-dasharray: 2 4;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--edge--dash-md {
+	stroke-dasharray: 4 4;
+}
 
-	.#{$prefix}--#{$charts-prefix}--edge--dash-md {
-		stroke-dasharray: 4 4;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--edge--dash-lg {
+	stroke-dasharray: 8 4;
+}
 
-	.#{$prefix}--#{$charts-prefix}--edge--dash-lg {
-		stroke-dasharray: 8 4;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--edge--dash-xl {
+	stroke-dasharray: 16 4;
+}
 
-	.#{$prefix}--#{$charts-prefix}--edge--dash-xl {
-		stroke-dasharray: 16 4;
+.#{globals.$prefix}--#{globals.$charts-prefix}--edge--tunnel {
+	.#{globals.$prefix}--#{globals.$charts-prefix}--edge__outer {
+		stroke: theme.$layer-accent-01;
+		stroke-width: 0.375rem;
 	}
+}
 
-	.#{$prefix}--#{$charts-prefix}--edge--tunnel {
-		.#{$prefix}--#{$charts-prefix}--edge__outer {
-			stroke: $layer-accent-01;
-			stroke-width: 0.375rem;
-		}
+.#{globals.$prefix}--#{globals.$charts-prefix}--edge--double {
+	.#{globals.$prefix}--#{globals.$charts-prefix}--edge__inner {
+		stroke: theme.$background;
 	}
 
-	.#{$prefix}--#{$charts-prefix}--edge--double {
-		.#{$prefix}--#{$charts-prefix}--edge__inner {
-			stroke: $background;
-		}
-
-		.#{$prefix}--#{$charts-prefix}--edge__outer {
-			stroke: $border-inverse;
-			stroke-width: 0.28125rem;
-		}
+	.#{globals.$prefix}--#{globals.$charts-prefix}--edge__outer {
+		stroke: theme.$border-inverse;
+		stroke-width: 0.28125rem;
 	}
 }

package/scss/components/diagrams/_marker.scss

@@ -1,7 +1,6 @@
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/theme';
+@use '../../globals';
 
-@include exports('cc-marker') {
-	.#{$prefix}--#{$charts-prefix}--marker {
-		fill: $border-inverse;
-	}
+.#{globals.$prefix}--#{globals.$charts-prefix}--marker {
+	fill: theme.$border-inverse;
 }

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