@carbon/charts 1.7.6 → 1.9.0-next.0

package/styles/components/_tooltip.scss

@@ -1,132 +0,0 @@
-@use "@carbon/styles/scss/type" as *;
-@use "@carbon/styles/scss/motion" as *;
-@use "@carbon/styles/scss/theme" as *;
-
-.#{$prefix}--#{$charts-prefix}--tooltip {
-	background-color: $layer-02;
-	pointer-events: none;
-	@include 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: font-family('sans-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);
-	}
-
-	.content-box {
-		color: $text-primary;
-
-		.title-tooltip {
-			width: auto;
-			padding: 4px;
-			min-width: 20px;
-			max-width: 270px;
-
-			p {
-				margin: 2px;
-				font-size: 12px;
-				line-height: 1rem;
-			}
-		}
-
-		.datapoint-tooltip {
-			display: flex;
-			padding: 4px;
-			flex-flow: row nowrap;
-			width: auto;
-			min-width: 20px;
-			justify-content: flex-start;
-			align-items: center;
-
-			div.label {
-				display: flex;
-				flex: 1;
-
-				p {
-					flex: 1;
-					padding-right: 8px;
-				}
-
-				span.label-icon svg {
-					height: 12px;
-					padding-top: 3px;
-					vertical-align: top;
-					padding-left: 4px;
-					width: auto;
-					fill: $layer-inverse-absolute;
-				}
-			}
-
-			&.bold {
-				// TODO-V11
-				// font-weight: font-weight('semibold');
-
-				div.label p {
-					font-weight: 600;
-				}
-			}
-
-			p {
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				line-height: 16px;
-				font-size: 12px;
-				display: inline-block;
-				margin: 0;
-				padding: 0;
-				border: 0;
-
-				&.value {
-					width: auto;
-					margin-left: 6px;
-				}
-			}
-		}
-
-		ul.multi-tooltip {
-			margin: 0;
-			padding: 0;
-
-			li {
-				list-style: none;
-				position: relative;
-
-				&:not(:last-child) {
-					border-bottom: 1px solid $tooltip-line-border;
-				}
-			}
-		}
-
-		svg.arrow-right {
-			rect {
-				fill: none;
-			}
-		}
-	}
-
-	.tooltip-color {
-		position: absolute;
-		left: 0;
-		top: 0;
-		width: 4px;
-		height: 100%;
-
-		@media (forced-colors: active) {
-			forced-color-adjust: none;
-		}
-
-		& + div.label p {
-			margin-left: 4px;
-		}
-	}
-}

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

@@ -1,97 +0,0 @@
-@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 *;
-
-@mixin stacked-card-node {
-	content: '';
-	height: 100%;
-	width: 100%;
-	position: absolute;
-	z-index: 0;
-	border-top: 0.125rem solid $layer-accent-01;
-	border-right: 0.125rem solid $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: font-family('sans');
-		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;
-	}
-
-	.#{$prefix}--#{$charts-prefix}--card-node--button {
-		font-family: font-family('sans');
-		text-align: left;
-		width: 100%;
-	}
-
-	.#{$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;
-	}
-
-	.#{$prefix}--#{$charts-prefix}--card-node--a:focus,
-	.#{$prefix}--#{$charts-prefix}--card-node--button:focus {
-		@include focus-outline($type: outline);
-	}
-
-	.#{$prefix}--#{$charts-prefix}--card-node--stacked {
-		&::before {
-			@include stacked-card-node();
-			left: 0.3125rem;
-			bottom: 0.3125rem;
-		}
-
-		&::after {
-			@include stacked-card-node();
-			left: 0.6875rem;
-			bottom: 0.6875rem;
-		}
-	}
-
-	.#{$prefix}--#{$charts-prefix}--card-node__column {
-		padding: 0 $spacing-03;
-	}
-
-	.#{$prefix}--#{$charts-prefix}--card-node__column--farside {
-		margin-left: auto;
-	}
-
-	.#{$prefix}--#{$charts-prefix}--card-node__title {
-		@include type-style($name: productive-heading-01);
-		margin: 0;
-	}
-
-	.#{$prefix}--#{$charts-prefix}--card-node__subtitle {
-		@include type-style($name: body-short-01);
-		margin: 0;
-	}
-
-	.#{$prefix}--#{$charts-prefix}--card-node__label {
-		display: block;
-		@include type-style($name: label-01);
-		color: $text-secondary;
-		padding-top: $spacing-06;
-	}
-}

package/styles/components/diagrams/_edge.scss

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

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

@@ -1,89 +0,0 @@
-@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 *;
-
-@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: font-family('sans');
-		width: 100%;
-		height: 100%;
-		position: relative;
-	}
-
-	.#{$prefix}--#{$charts-prefix}--shape-node--circle {
-		border-radius: 100%;
-	}
-
-	.#{$prefix}--#{$charts-prefix}--shape-node--square {
-		border-radius: 0;
-	}
-
-	.#{$prefix}--#{$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;
-	}
-
-	.#{$prefix}--#{$charts-prefix}--shape-node--button {
-		font-family: font-family('sans');
-		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;
-
-		.#{$prefix}--#{$charts-prefix}--shape-node__title,
-		.#{$prefix}--#{$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;
-		}
-	}
-
-	.#{$prefix}--#{$charts-prefix}--shape-node__body {
-		position: absolute;
-		top: calc(100% + #{$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;
-	}
-
-	.#{$prefix}--#{$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;
-	}
-}

package/styles/components/diagrams/index.scss

@@ -1,4 +0,0 @@
-@import "./card-node";
-@import "./shape-node";
-@import "./edge";
-@import "./marker";

package/styles/graphs/_alluvial.scss

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

package/styles/graphs/_bullet.scss

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

package/styles/graphs/_circle-pack.scss

@@ -1,36 +0,0 @@
-@use "@carbon/styles/scss/theme" as *;
-
-.#{$prefix}--#{$charts-prefix}--circle-pack {
-	circle.node {
-		stroke-width: 1.5px;
-
-		&.hovered {
-			fill-opacity: 1;
-		}
-
-		&.non-focal {
-			fill: $icon-disabled;
-			fill-opacity: 30%;
-			stroke: $icon-disabled;
-		}
-
-		&.clickable {
-			cursor: zoom-in;
-		}
-	}
-}
-
-.#{$prefix}--#{$charts-prefix}--chart-wrapper.zoomed-in {
-	cursor: zoom-out;
-	.#{$prefix}--#{$charts-prefix}--circle-pack {
-		circle.node {
-			&.hovered-child {
-				stroke: 1.5px solid initial;
-			}
-
-			&.clickable {
-				cursor: zoom-out;
-			}
-		}
-	}
-}

package/styles/graphs/_gauge.scss

@@ -1,23 +0,0 @@
-@use "@carbon/styles/scss/theme" as *;
-
-.#{$prefix}--#{$charts-prefix}--gauge {
-	overflow: visible;
-
-	path.arc-background {
-		fill: $layer-01;
-	}
-
-	.gauge-delta-arrow {
-		&.status--danger {
-			fill: $support-error;
-		}
-
-		&.status--warning {
-			fill: $support-warning;
-		}
-
-		&.status--success {
-			fill: $support-success;
-		}
-	}
-}

package/styles/graphs/_heatmap.scss

@@ -1,60 +0,0 @@
-@use "@carbon/styles/scss/themes";
-@use "@carbon/styles/scss/theme" as *;
-
-.#{$prefix}--#{$charts-prefix}--heatmap {
-	g.highlighter-hidden {
-		visibility: hidden;
-	}
-
-	g.cell-highlight {
-		line {
-			stroke: white;
-			stroke-width: 1px;
-		}
-	}
-
-	g.cell-2 {
-		line {
-			stroke: white;
-			stroke-width: 2px !important;
-		}
-	}
-
-	g.multi-cell {
-		line {
-			stroke: white;
-			stroke-width: 2px;
-		}
-	}
-
-	rect.pattern-fill {
-		fill: $border-strong-01;
-	}
-
-	g.shadows {
-		line.top {
-			filter: drop-shadow(0px -3px 2px black);
-		}
-
-		line.down {
-			filter: drop-shadow(0px 3px 2px black);
-		}
-
-		line.left {
-			filter: drop-shadow(-3px 0px 2px black);
-		}
-
-		line.right {
-			filter: drop-shadow(3px 0px 2px black);
-		}
-	}
-
-	rect.heat {
-		stroke-width: 0px;
-		stroke: $background;
-	}
-
-	rect.null-state {
-		fill: $icon-inverse;
-	}
-}

package/styles/graphs/_meter.scss

@@ -1,34 +0,0 @@
-@use '@carbon/styles/scss/themes';
-@use "@carbon/styles/scss/theme" as *;
-
-.#{$prefix}--#{$charts-prefix}--meter {
-	rect.container {
-		fill: $layer-01;
-	}
-
-	line.rangeIndicator {
-		stroke: $meter-range-indicator;
-		stroke-width: 1px;
-	}
-
-	rect.value {
-		&.status--danger {
-			fill: $support-error;
-		}
-
-		&.status--warning {
-			fill: $support-warning;
-			stroke-width: 1px;
-			stroke: $alert-stroke;
-		}
-
-		&.status--success {
-			fill: $support-success;
-		}
-	}
-
-	line.peak {
-		stroke: $border-inverse;
-		stroke-width: 2px;
-	}
-}

package/styles/graphs/_radar.scss

@@ -1,18 +0,0 @@
-@use '@carbon/styles/scss/themes';
-@use "@carbon/styles/scss/theme" as *;
-
-.#{$prefix}--#{$charts-prefix}--radar {
-	.blobs path {
-		stroke-width: 1.5px;
-	}
-
-	.y-axes path,
-	.x-axes line {
-		stroke-width: 1px;
-		stroke: $layer-accent-01;
-	}
-
-	.x-axes line.hovered {
-		stroke: $layer-inverse-absolute;
-	}
-}

package/styles/graphs/_scatter-stacked.scss

@@ -1,12 +0,0 @@
-@use "@carbon/styles/scss/theme" as *;
-
-.#{$prefix}--#{$charts-prefix}--scatter-stacked {
-	circle.dot.unfilled {
-		fill: $layer-01;
-		stroke-width: 1.5;
-	}
-
-	circle.dot.threshold-anomaly {
-		stroke-width: 3;
-	}
-}

package/styles/graphs/_tree.scss

@@ -1,47 +0,0 @@
-@use "@carbon/styles/scss/theme" as *;
-
-.#{$prefix}--#{$charts-prefix}--chart-wrapper
-	.#{$prefix}--#{$charts-prefix}--tree {
-	g.links {
-		fill: none;
-		stroke: $border-strong-01;
-		stroke-opacity: 0.4;
-		stroke-width: 1.5;
-	}
-
-	g.clickable {
-		cursor: pointer;
-
-		&:hover {
-			text {
-				// TODO-V11
-				// font-weight: font-weight('semibold');
-				font-weight: 600;
-			}
-
-			circle {
-				fill: $text-primary;
-				@include default_transition;
-			}
-		}
-	}
-
-	circle {
-		&.parent {
-			fill: $text-secondary;
-		}
-
-		&.child {
-			fill: $border-strong-01;
-		}
-	}
-
-	text {
-		fill: $text-primary;
-
-		&.text-stroke {
-			stroke: $text-inverse;
-			stroke-width: 2px;
-		}
-	}
-}

package/styles/graphs/index.scss

@@ -1,18 +0,0 @@
-@import './area';
-@import './bubble';
-@import './bullet';
-@import './donut';
-@import './line';
-@import './scatter';
-@import './meter';
-@import './scatter-stacked';
-@import './radar';
-@import './tree';
-@import './treemap';
-@import './gauge';
-@import './pie';
-@import './lollipop';
-@import './circle-pack';
-@import './wordcloud';
-@import './alluvial';
-@import './heatmap';