@carbon/charts 1.11.21 → 1.13.0

package/scss/components/_axis.scss

@@ -1,7 +1,8 @@
-@use '@carbon/styles/scss/type' as *;
-@use '@carbon/styles/scss/theme' as *;
+@use '../globals';
+@use '@carbon/styles/scss/theme';
 
-.#{$prefix}--#{$charts-prefix}--axes {
+.#{globals.$prefix}--#{globals.$charts-prefix}--axes {
+	font-family: var(--#{globals.$prefix}-charts-font-family-condensed);
 	overflow: visible;
 
 	g.axis {
@@ -18,19 +19,19 @@
 		g.tick-hover:hover,
 		g.tick-hover:focus {
 			rect.axis-holder {
-				fill: $layer-selected-inverse;
-				stroke: $layer-selected-inverse;
+				fill: theme.$layer-selected-inverse;
+				stroke: theme.$layer-selected-inverse;
 				stroke-width: 2px;
 			}
 
 			text {
-				fill: $layer-selected;
+				fill: theme.$layer-selected;
 			}
 		}
 
 		g.tick text {
-			fill: $text-secondary;
-			font-family: var(--#{$prefix}-charts-font-family-condensed);
+			fill: theme.$text-secondary;
+			font-family: var(--#{globals.$prefix}-charts-font-family-condensed);
 		}
 
 		g.tick line {
@@ -38,15 +39,15 @@
 		}
 
 		path.domain {
-			stroke: $border-strong-01;
+			stroke: theme.$border-strong-01;
 		}
 
 		.axis-title {
-			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;
-			fill: $text-primary;
+			fill: theme.$text-primary;
 		}
 	}
 }

package/scss/components/_callouts.scss

@@ -1,5 +1,6 @@
-@use '@carbon/styles/scss/theme' as *;
+@use '../globals';
+@use '@carbon/styles/scss/theme';
 
-.#{$prefix}--#{$charts-prefix}--chart-wrapper g.callouts {
-	stroke: $text-secondary;
+.#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper g.callouts {
+	stroke: theme.$text-secondary;
 }

package/scss/components/_color-legend.scss

@@ -1,11 +1,11 @@
-@use '@carbon/styles/scss/themes';
-@use '@carbon/styles/scss/theme';
+@use '../globals';
+@use '../tokens';
 
-svg.#{$prefix}--#{$charts-prefix}--color-legend {
+svg.#{globals.$prefix}--#{globals.$charts-prefix}--color-legend {
 	display: flex;
 	user-select: none;
 
 	g.legend-title text {
-		fill: $layer-inverse-absolute;
+		fill: tokens.$layer-inverse-absolute;
 	}
 }

package/scss/components/_grid-brush.scss

@@ -1,6 +1,8 @@
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/components/button';
+@use '../globals';
 
-.#{$prefix}--#{$charts-prefix}--grid-brush {
+.#{globals.$prefix}--#{globals.$charts-prefix}--grid-brush {
 	// disable default d3 brush selection
 	g.grid-brush {
 		rect.selection {
@@ -11,10 +13,10 @@
 	}
 }
 
-.#{$prefix}--#{$charts-prefix}--grid-brush {
+.#{globals.$prefix}--#{globals.$charts-prefix}--grid-brush {
 	rect.frontSelection {
-		fill: $layer-accent-01;
+		fill: theme.$layer-accent-01;
 		fill-opacity: 0.3;
-		stroke: $button-tertiary;
+		stroke: button.$button-tertiary;
 	}
 }

package/scss/components/_grid.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}--grid {
+.#{globals.$prefix}--#{globals.$charts-prefix}--grid {
 	rect.chart-grid-backdrop {
-		fill: $grid-bg;
+		fill: tokens.$grid-bg;
 	}
 
 	rect.chart-grid-backdrop.stroked {
-		stroke: $layer-accent-01;
+		stroke: theme.$layer-accent-01;
 	}
 
 	rect.stroke {
-		stroke: $layer-accent-01;
+		stroke: theme.$layer-accent-01;
 	}
 
 	g.x.grid g.tick,
@@ -19,12 +20,12 @@
 		line {
 			pointer-events: none;
 			stroke-width: 1px;
-			stroke: $layer-accent-01;
+			stroke: theme.$layer-accent-01;
 		}
 
 		&.active line {
 			stroke-dasharray: 2px;
-			stroke: $focus;
+			stroke: theme.$focus;
 		}
 	}
 }

package/scss/components/_highlights.scss

@@ -1,7 +1,10 @@
-.#{$prefix}--#{$charts-prefix}--highlight {
+@use '../globals';
+@use '@carbon/colors';
+
+.#{globals.$prefix}--#{globals.$charts-prefix}--highlight {
 	rect.highlight-bar {
 		pointer-events: none;
-		fill: $magenta-50;
-		stroke: $magenta-50;
+		fill: colors.$magenta-50;
+		stroke: colors.$magenta-50;
 	}
 }

package/scss/components/_layout.scss

@@ -1,4 +1,6 @@
-.#{$prefix}--#{$charts-prefix}--layout {
+@use '../globals';
+
+.#{globals.$prefix}--#{globals.$charts-prefix}--layout {
 	&-row {
 		display: flex;
 		flex-direction: row;
@@ -24,11 +26,11 @@
 	}
 }
 
-.#{$prefix}--#{$charts-prefix}--chart-wrapper .layout-child {
+.#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper .layout-child {
 	overflow: visible;
 }
 
-.#{$prefix}--#{$charts-prefix}--chart-wrapper svg.layout-svg-wrapper {
+.#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper svg.layout-svg-wrapper {
 	height: inherit;
 	width: inherit;
 	overflow: visible;

package/scss/components/_legend.scss

@@ -1,6 +1,9 @@
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/theme';
+@use '@carbon/colors';
+@use '../globals';
 
-div.#{$prefix}--#{$charts-prefix}--legend {
+div.#{globals.$prefix}--#{globals.$charts-prefix}--legend {
+	font-family: var(--#{globals.$prefix}-charts-font-family-condensed);
 	display: flex;
 	user-select: none;
 	-webkit-flex-wrap: wrap;
@@ -21,7 +24,7 @@ div.#{$prefix}--#{$charts-prefix}--legend {
 			height: 13px;
 			margin-right: 4px;
 			border-radius: 2px;
-			border: solid 1px $background;
+			border: solid 1px theme.$background;
 			box-shadow: 0 0 0 2px transparent;
 
 			@media (forced-colors: active) {
@@ -29,15 +32,15 @@ div.#{$prefix}--#{$charts-prefix}--legend {
 			}
 
 			&:not(.active) {
-				border-color: $text-secondary;
-				background: $background;
+				border-color: theme.$text-secondary;
+				background: theme.$background;
 			}
 
 			svg {
 				display: none;
 				vertical-align: text-top;
-				fill: $background;
-				stroke: $background;
+				fill: theme.$background;
+				stroke: theme.$background;
 			}
 		}
 
@@ -49,7 +52,7 @@ div.#{$prefix}--#{$charts-prefix}--legend {
 
 		p {
 			font-size: 12px;
-			fill: $text-secondary;
+			fill: theme.$text-secondary;
 			line-height: 1rem;
 		}
 	}
@@ -86,11 +89,11 @@ div.#{$prefix}--#{$charts-prefix}--legend {
 		cursor: pointer;
 
 		div.checkbox {
-			border: solid 1px $background;
-			box-shadow: 0 0 0 2px $blue-60;
+			border: solid 1px theme.$background;
+			box-shadow: 0 0 0 2px colors.$blue-60;
 
 			&:not(.active) {
-				border-color: $text-secondary;
+				border-color: theme.$text-secondary;
 			}
 		}
 	}

package/scss/components/_meter-title.scss

@@ -1,37 +1,39 @@
-@use '@carbon/styles/scss/themes';
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/colors';
+@use '@carbon/styles/scss/theme';
+@use '../globals';
+@use '../tokens';
 
-.#{$prefix}--#{$charts-prefix}--meter-title {
+.#{globals.$prefix}--#{globals.$charts-prefix}--meter-title {
 	overflow: visible;
 
 	text.meter-title,
 	text.proportional-meter-title,
 	text.proportional-meter-total,
 	text.percent-value {
-		fill: $text-primary;
+		fill: theme.$text-primary;
 	}
 
 	g.status-indicator {
 		&.status--danger circle.status {
-			fill: $support-error;
+			fill: theme.$support-error;
 		}
 
 		&.status--warning {
 			circle.status {
-				fill: $support-warning;
+				fill: theme.$support-warning;
 			}
 
 			path.innerFill {
-				fill: $black-100;
+				fill: colors.$black-100;
 			}
 		}
 
 		&.status--success circle.status {
-			fill: $support-success;
+			fill: theme.$support-success;
 		}
 
 		path.innerFill {
-			fill: $layer-01-absolute;
+			fill: tokens.$layer-01-absolute;
 		}
 	}
 }

package/scss/components/_modal.scss

@@ -1,14 +1,17 @@
-@use '@carbon/styles/scss/themes';
-@use '@carbon/styles/scss/theme';
-
-.#{$prefix}--chart-holder {
-	.#{$prefix}--modal {
+@use '@carbon/styles/scss/components/modal';
+@use '@carbon/styles/scss/components/data-table';
+@use '@carbon/styles/scss/components/button';
+@use '../globals';
+@use '../tokens';
+
+.#{globals.$prefix}--chart-holder {
+	.#{globals.$prefix}--modal {
 		&.is-visible {
 			z-index: 99999;
 		}
 
-		.#{$prefix}--modal-container {
-			.#{$prefix}--modal-header {
+		.#{globals.$prefix}--modal-container {
+			.#{globals.$prefix}--modal-header {
 				&__label {
 					margin-top: 0;
 					margin-bottom: 0;
@@ -20,10 +23,10 @@
 				}
 			}
 
-			.#{$prefix}--modal-content {
+			.#{globals.$prefix}--modal-content {
 				padding: 0;
 				margin-bottom: 0;
-				color-scheme: $color-scheme;
+				color-scheme: tokens.$color-scheme;
 
 				table {
 					position: relative;
@@ -36,10 +39,10 @@
 				}
 			}
 
-			.#{$prefix}--modal-footer {
+			.#{globals.$prefix}--modal-footer {
 				background-color: transparent;
 
-				.#{$prefix}--#{$charts-prefix}-modal-footer-spacer {
+				.#{globals.$prefix}--#{globals.$charts-prefix}-modal-footer-spacer {
 					width: 50%;
 				}
 			}

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