@carbon/charts 1.11.21 → 1.12.0

package/scss/_tokens.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '@carbon/styles/scss/themes';
+@use '@carbon/colors';
 @use '@carbon/styles/scss/utilities/component-tokens';
-@use '@carbon/colors' as *;
 
 // THEMES
 $color-scheme: (
@@ -28,15 +28,15 @@ $color-scheme: (
 
 // ELEMENTS
 $alert-stroke: (
-	fallback: $yellow-50,
+	fallback: colors.$yellow-50,
 	values: (
 		(
 			theme: themes.$white,
-			value: $yellow-50
+			value: colors.$yellow-50
 		),
 		(
 			theme: themes.$g10,
-			value: $yellow-50
+			value: colors.$yellow-50
 		),
 		(
 			theme: themes.$g90,
@@ -50,45 +50,45 @@ $alert-stroke: (
 ) !default;
 
 $layer-01-absolute: (
-	fallback: $white-0,
+	fallback: colors.$white-0,
 	values: (
 		(
 			theme: themes.$white,
-			value: $white-0
+			value: colors.$white-0
 		),
 		(
 			theme: themes.$g10,
-			value: $white-0
+			value: colors.$white-0
 		),
 		(
 			theme: themes.$g90,
-			value: $black-100
+			value: colors.$black-100
 		),
 		(
 			theme: themes.$g100,
-			value: $black-100
+			value: colors.$black-100
 		)
 	)
 ) !default;
 
 $layer-inverse-absolute: (
-	fallback: $black-100,
+	fallback: colors.$black-100,
 	values: (
 		(
 			theme: themes.$white,
-			value: $black-100
+			value: colors.$black-100
 		),
 		(
 			theme: themes.$g10,
-			value: $black-100
+			value: colors.$black-100
 		),
 		(
 			theme: themes.$g90,
-			value: $white-0
+			value: colors.$white-0
 		),
 		(
 			theme: themes.$g100,
-			value: $white-0
+			value: colors.$white-0
 		)
 	)
 ) !default;
@@ -129,7 +129,7 @@ $grid-bg: (
 		),
 		(
 			theme: themes.$g90,
-			value: $gray-100
+			value: colors.$gray-100
 		),
 		(
 			theme: themes.$g100,
@@ -140,23 +140,23 @@ $grid-bg: (
 
 // METER
 $meter-range-indicator: (
-	fallback: $gray-40,
+	fallback: colors.$gray-40,
 	values: (
 		(
 			theme: themes.$white,
-			value: $gray-40
+			value: colors.$gray-40
 		),
 		(
 			theme: themes.$g10,
-			value: $gray-40
+			value: colors.$gray-40
 		),
 		(
 			theme: themes.$g90,
-			value: $gray-60
+			value: colors.$gray-60
 		),
 		(
 			theme: themes.$g100,
-			value: $gray-60
+			value: colors.$gray-60
 		)
 	)
 ) !default;
@@ -209,130 +209,130 @@ $tooltip-line-border: (
 
 // ZONES
 $zone-fill-01: (
-	fallback: $gray-10,
+	fallback: colors.$gray-10,
 	values: (
 		(
 			theme: themes.$white,
-			value: $gray-10
+			value: colors.$gray-10
 		),
 		(
 			theme: themes.$g10,
-			value: $gray-10
+			value: colors.$gray-10
 		),
 		(
 			theme: themes.$g90,
-			value: $gray-90
+			value: colors.$gray-90
 		),
 		(
 			theme: themes.$g100,
-			value: $gray-90
+			value: colors.$gray-90
 		)
 	)
 ) !default;
 $zone-stroke-01: (
-	fallback: $gray-50,
+	fallback: colors.$gray-50,
 	values: (
 		(
 			theme: themes.$white,
-			value: $gray-50
+			value: colors.$gray-50
 		),
 		(
 			theme: themes.$g10,
-			value: $gray-50
+			value: colors.$gray-50
 		),
 		(
 			theme: themes.$g90,
-			value: $gray-60
+			value: colors.$gray-60
 		),
 		(
 			theme: themes.$g100,
-			value: $gray-60
+			value: colors.$gray-60
 		)
 	)
 ) !default;
 
 $zone-fill-02: (
-	fallback: $gray-20,
+	fallback: colors.$gray-20,
 	values: (
 		(
 			theme: themes.$white,
-			value: $gray-20
+			value: colors.$gray-20
 		),
 		(
 			theme: themes.$g10,
-			value: $gray-20
+			value: colors.$gray-20
 		),
 		(
 			theme: themes.$g90,
-			value: $gray-80
+			value: colors.$gray-80
 		),
 		(
 			theme: themes.$g100,
-			value: $gray-80
+			value: colors.$gray-80
 		)
 	)
 ) !default;
 $zone-stroke-02: (
-	fallback: $gray-50,
+	fallback: colors.$gray-50,
 	values: (
 		(
 			theme: themes.$white,
-			value: $gray-50
+			value: colors.$gray-50
 		),
 		(
 			theme: themes.$g10,
-			value: $gray-50
+			value: colors.$gray-50
 		),
 		(
 			theme: themes.$g90,
-			value: $gray-60
+			value: colors.$gray-60
 		),
 		(
 			theme: themes.$g100,
-			value: $gray-60
+			value: colors.$gray-60
 		)
 	)
 ) !default;
 
 $zone-fill-03: (
-	fallback: $gray-30,
+	fallback: colors.$gray-30,
 	values: (
 		(
 			theme: themes.$white,
-			value: $gray-30
+			value: colors.$gray-30
 		),
 		(
 			theme: themes.$g10,
-			value: $gray-30
+			value: colors.$gray-30
 		),
 		(
 			theme: themes.$g90,
-			value: $gray-70
+			value: colors.$gray-70
 		),
 		(
 			theme: themes.$g100,
-			value: $gray-70
+			value: colors.$gray-70
 		)
 	)
 ) !default;
 $zone-stroke-03: (
-	fallback: $gray-50,
+	fallback: colors.$gray-50,
 	values: (
 		(
 			theme: themes.$white,
-			value: $gray-50
+			value: colors.$gray-50
 		),
 		(
 			theme: themes.$g10,
-			value: $gray-50
+			value: colors.$gray-50
 		),
 		(
 			theme: themes.$g90,
-			value: $gray-60
+			value: colors.$gray-60
 		),
 		(
 			theme: themes.$g100,
-			value: $gray-60
+			value: colors.$gray-60
 		)
 	)
 ) !default;

package/scss/_transition.scss

@@ -0,0 +1,4 @@
+// Used by ./colors and ./components/tree
+@mixin default_transition {
+	transition: all 0.1s ease-out;
+}

package/scss/_type.scss

@@ -1,14 +1,14 @@
-@use '@carbon/styles/scss/type' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/layout' as *;
+@use '@carbon/styles/scss/theme';
+@use '@carbon/layout';
+@use 'globals';
 
-.#{$prefix}--#{$charts-prefix}--chart-wrapper {
-	// Set CSS custom properties using font-family mixin then reuse them
-	--#{$prefix}-charts-font-family: #{font-family('sans')};
-	--#{$prefix}-charts-font-family-condensed: #{font-family('sans-condensed')};
-
-	font-family: var(--#{$prefix}-charts-font-family-condensed);
+.#{globals.$prefix}--chart-holder {
+	--#{globals.$prefix}-charts-font-family: #{globals.$font-family};
+	--#{globals.$prefix}-charts-font-family-condensed: #{globals.$font-family-condensed};
+	font-family: var(--#{globals.$prefix}-charts-font-family);
+}
 
+.#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper {
 	p {
 		padding: 0;
 		margin: 0;
@@ -16,7 +16,7 @@
 		// TODO-V11
 		// font-weight: font-weight('regular');
 		font-weight: 400;
-		color: $text-secondary;
+		color: theme.$text-secondary;
 	}
 
 	text {
@@ -24,11 +24,11 @@
 		// TODO-V11
 		// font-weight: font-weight('regular');
 		font-weight: 400;
-		fill: $text-secondary;
+		fill: theme.$text-secondary;
 	}
 
 	g.gauge-numbers text.gauge-value-number {
-		font-family: var(--#{$prefix}-charts-font-family);
+		font-family: var(--#{globals.$prefix}-charts-font-family);
 		// TODO-V11
 		// font-weight: font-weight('light');
 		font-weight: 300;
@@ -36,8 +36,8 @@
 
 	text.meter-title,
 	text.percent-value {
-		font-size: $base-font-size;
-		font-family: var(--#{$prefix}-charts-font-family);
+		font-size: layout.$base-font-size;
+		font-family: var(--#{globals.$prefix}-charts-font-family);
 	}
 
 	text.meter-title {

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