@carbon/charts 1.11.21 → 1.12.0

package/scss/components/_ruler.scss

@@ -1,7 +1,10 @@
-.#{$prefix}--#{$charts-prefix}--ruler,
-.#{$prefix}--#{$charts-prefix}--ruler-binned {
+@use '../globals';
+@use '../tokens';
+
+.#{globals.$prefix}--#{globals.$charts-prefix}--ruler,
+.#{globals.$prefix}--#{globals.$charts-prefix}--ruler-binned {
 	line.ruler-line {
-		stroke: $layer-inverse-absolute;
+		stroke: tokens.$layer-inverse-absolute;
 		stroke-width: 1px;
 		stroke-dasharray: 2;
 		pointer-events: none;

package/scss/components/_skeleton-lines.scss

@@ -1,14 +1,17 @@
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/theme';
+@use '@carbon/colors';
+@use '../globals';
+@use '../tokens';
 
-$lines-bg-color: $layer-accent-01;
-$lines-shimmer-color: $white-0;
+$lines-bg-color: theme.$layer-accent-01;
+$lines-shimmer-color: colors.$white-0;
 $areas-bg-color: rgba(127, 127, 127, 0.1);
-$areas-shimmer-color: rgba($white-0, 0.15);
+$areas-shimmer-color: rgba(colors.$white-0, 0.15);
 
-.#{$prefix}--#{$charts-prefix}--skeleton-lines {
+.#{globals.$prefix}--#{globals.$charts-prefix}--skeleton-lines {
 	// lines
 	rect.chart-skeleton-backdrop {
-		fill: $grid-bg;
+		fill: tokens.$grid-bg;
 	}
 
 	.shimmer-effect-lines {

package/scss/components/_skeleton.scss

@@ -1,14 +1,17 @@
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/theme';
+@use '@carbon/colors';
+@use '../globals';
+@use '../tokens';
 
-$lines-bg-color: $layer-accent-01;
-$lines-shimmer-color: $white-0;
+$lines-bg-color: theme.$layer-accent-01;
+$lines-shimmer-color: colors.$white-0;
 $areas-bg-color: rgba(127, 127, 127, 0.1);
-$areas-shimmer-color: rgba($white-0, 0.15);
+$areas-shimmer-color: rgba(colors.$white-0, 0.15);
 
-.#{$prefix}--#{$charts-prefix}--skeleton {
+.#{globals.$prefix}--#{globals.$charts-prefix}--skeleton {
 	// lines
 	rect.chart-skeleton-backdrop {
-		fill: $grid-bg;
+		fill: tokens.$grid-bg;
 	}
 
 	.shimmer-effect-lines {

package/scss/components/_threshold.scss

@@ -1,10 +1,11 @@
-@use '@carbon/styles/scss/type' as *;
-@use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/motion';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/colors';
+@use '../globals';
 
-.#{$prefix}--#{$charts-prefix}--threshold {
+.#{globals.$prefix}--#{globals.$charts-prefix}--threshold {
 	line.threshold-line {
-		stroke: $red-50;
+		stroke: colors.$red-50;
 		stroke-width: 1;
 		stroke-dasharray: 4;
 		cursor: pointer;
@@ -27,19 +28,19 @@
 	}
 }
 
-.#{$prefix}--#{$charts-prefix}--threshold--label {
-	background-color: $red-50;
+.#{globals.$prefix}--#{globals.$charts-prefix}--threshold--label {
+	background-color: colors.$red-50;
 	pointer-events: none;
 	transition: opacity 0.1s;
-	@include motion(standard, expressive);
+	@include motion.motion(standard, expressive);
 	display: inline;
 	box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
 	position: absolute;
 	word-wrap: break-word;
 	z-index: 1059;
-	font-family: var(--#{$prefix}-charts-font-family-condensed);
+	font-family: var(--#{globals.$prefix}-charts-font-family-condensed);
 
-	color: $text-primary;
+	color: theme.$text-primary;
 	line-height: 16px;
 	font-size: 12px;
 	padding: 4px;
@@ -48,6 +49,6 @@
 	&.hidden {
 		opacity: 0;
 		transition: opacity 0.1s;
-		@include motion(standard, expressive);
+		@include motion.motion(standard, expressive);
 	}
 }

package/scss/components/_title.scss

@@ -1,11 +1,11 @@
-@use '@carbon/styles/scss/type' as *;
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/theme';
+@use '../globals';
 
-.#{$prefix}--#{$charts-prefix}--title {
+.#{globals.$prefix}--#{globals.$charts-prefix}--title {
 	p.title {
-		color: $text-primary;
+		color: theme.$text-primary;
 		font-size: 16px;
-		font-family: var(--#{$prefix}-charts-font-family);
+		font-family: var(--#{globals.$prefix}-charts-font-family);
 		// TODO-V11
 		// font-weight: font-weight('semibold');
 		font-weight: 600;

package/scss/components/_toolbar.scss

@@ -1,15 +1,15 @@
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/components/overflow-menu';
+@use '../globals';
 
-$css--reset: false;
-
-.#{$prefix}--chart-holder {
+.#{globals.$prefix}--chart-holder {
 	.cds--overflow-menu,
 	.cds--overflow-menu__trigger {
 		width: 2rem;
 		height: 2rem;
 	}
 
-	.#{$prefix}--#{$charts-prefix}--toolbar {
+	.#{globals.$prefix}--#{globals.$charts-prefix}--toolbar {
 		display: flex;
 
 		div.toolbar-control {
@@ -29,7 +29,7 @@ $css--reset: false;
 				}
 
 				svg {
-					fill: $icon-on-color-disabled;
+					fill: theme.$icon-on-color-disabled;
 				}
 			}
 		}

package/scss/components/_tooltip.scss

@@ -1,29 +1,30 @@
-@use '@carbon/styles/scss/type' as *;
-@use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/motion';
+@use '@carbon/styles/scss/theme';
+@use '../globals';
+@use '../tokens';
 
-.#{$prefix}--#{$charts-prefix}--tooltip {
-	background-color: $layer-02;
+.#{globals.$prefix}--#{globals.$charts-prefix}--tooltip {
+	background-color: theme.$layer-02;
 	pointer-events: none;
-	@include motion(standard, expressive);
+	@include motion.motion(standard, expressive);
 	display: inline;
 	visibility: visible;
 	box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
 	position: absolute;
 	word-wrap: break-word;
 	z-index: 1059;
-	font-family: var(--#{$prefix}-charts-font-family-condensed);
+	font-family: var(--#{globals.$prefix}-charts-font-family-condensed);
 	transition: visibility 0s linear 0.1s, opacity 0.1s;
 
 	&.hidden {
 		opacity: 0;
 		visibility: hidden;
 		transition: visibility 0s linear 0s, opacity 0.1s;
-		@include motion(standard, expressive);
+		@include motion.motion(standard, expressive);
 	}
 
 	.content-box {
-		color: $text-primary;
+		color: theme.$text-primary;
 
 		.title-tooltip {
 			width: auto;
@@ -62,7 +63,7 @@
 					vertical-align: top;
 					padding-left: 4px;
 					width: auto;
-					fill: $layer-inverse-absolute;
+					fill: tokens.$layer-inverse-absolute;
 				}
 			}
 
@@ -102,7 +103,7 @@
 				position: relative;
 
 				&:not(:last-child) {
-					border-bottom: 1px solid $tooltip-line-border;
+					border-bottom: 1px solid tokens.$tooltip-line-border;
 				}
 			}
 		}

package/scss/components/_zero-line.scss

@@ -1,5 +1,6 @@
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/theme';
+@use '../globals';
 
-.#{$prefix}--#{$charts-prefix}--zero-line line.domain {
-	stroke: $border-strong-01;
+.#{globals.$prefix}--#{globals.$charts-prefix}--zero-line line.domain {
+	stroke: theme.$border-strong-01;
 }

package/scss/components/_zoom-bar.scss

@@ -1,42 +1,44 @@
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/theme';
+@use '@carbon/colors';
+@use '../globals';
 
-.#{$prefix}--#{$charts-prefix}--zoom-bar {
+.#{globals.$prefix}--#{globals.$charts-prefix}--zoom-bar {
 	rect.zoom-bg {
-		fill: $background;
-		stroke: $layer-01;
+		fill: theme.$background;
+		stroke: theme.$layer-01;
 	}
 
 	rect.zoom-slider-bg {
-		fill: $layer-01;
+		fill: theme.$layer-01;
 	}
 
 	rect.zoom-slider-selected-area {
-		fill: $icon-secondary;
+		fill: theme.$icon-secondary;
 	}
 
 	path.zoom-bg-baseline {
-		stroke: $border-strong-01;
+		stroke: theme.$border-strong-01;
 		stroke-width: 2;
 	}
 
 	path.zoom-graph-area {
-		fill: $layer-accent-01;
-		stroke: $border-strong-01;
+		fill: theme.$layer-accent-01;
+		stroke: theme.$border-strong-01;
 		stroke-width: 1;
 	}
 
 	path.zoom-graph-area-unselected {
-		fill: $layer-01;
+		fill: theme.$layer-01;
 		stroke: none;
 	}
 
 	g.zoom-bar-brush {
 		rect.handle {
-			fill: $icon-secondary;
+			fill: theme.$icon-secondary;
 		}
 
 		rect.handle-bar {
-			fill: $layer-02;
+			fill: theme.$layer-02;
 		}
 
 		// clear d3.brush selection style
@@ -47,7 +49,7 @@
 	}
 
 	rect[class^='highlight-'] {
-		fill: $magenta-50;
-		stroke: $magenta-50;
+		fill: colors.$magenta-50;
+		stroke: colors.$magenta-50;
 	}
 }

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