@carbon/charts 1.8.0 → 1.9.0-next.1.0

package/styles/components/_edge.scss

@@ -1,65 +0,0 @@
-@import "@carbon/themes/scss/tokens";
-@import "@carbon/layout/scss/spacing";
-@import "@carbon/import-once/scss/index";
-
-@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-inverse;
-	}
-
-	.#{$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: mini-units(0.25) mini-units(0.5);
-	}
-
-	.#{$prefix}--#{$charts-prefix}--edge--dash-md {
-		stroke-dasharray: mini-units(0.5) mini-units(0.5);
-	}
-
-	.#{$prefix}--#{$charts-prefix}--edge--dash-lg {
-		stroke-dasharray: mini-units(1) mini-units(0.5);
-	}
-
-	.#{$prefix}--#{$charts-prefix}--edge--dash-xl {
-		stroke-dasharray: mini-units(2) mini-units(0.5);
-	}
-
-	.#{$prefix}--#{$charts-prefix}--edge--tunnel {
-		.#{$prefix}--#{$charts-prefix}--edge__outer {
-			stroke: $layer-accent-01;
-			stroke-width: mini-units(0.75);
-		}
-	}
-
-	.#{$prefix}--#{$charts-prefix}--edge--double {
-		.#{$prefix}--#{$charts-prefix}--edge__inner {
-			stroke: $background;
-		}
-
-		.#{$prefix}--#{$charts-prefix}--edge__outer {
-			stroke: $border-inverse;
-			stroke-width: mini-units(0.5625);
-		}
-	}
-}

package/styles/components/_grid.scss

@@ -1,30 +0,0 @@
-@use "@carbon/styles/scss/themes";
-@use "@carbon/styles/scss/theme" as *;
-
-.#{$prefix}--#{$charts-prefix}--grid {
-	rect.chart-grid-backdrop {
-		fill: $grid-bg;
-	}
-
-	rect.chart-grid-backdrop.stroked {
-		stroke: $layer-accent-01;
-	}
-
-	rect.stroke {
-		stroke: $layer-accent-01;
-	}
-
-	g.x.grid g.tick,
-	g.y.grid g.tick {
-		line {
-			pointer-events: none;
-			stroke-width: 1px;
-			stroke: $layer-accent-01;
-		}
-
-		&.active line {
-			stroke-dasharray: 2px;
-			stroke: $focus;
-		}
-	}
-}

package/styles/components/_marker.scss

@@ -1,7 +0,0 @@
-@import "@carbon/import-once/scss/index";
-
-@include exports("cc-marker") {
-	.#{$prefix}--#{$charts-prefix}--marker {
-		fill: $border-inverse;
-	}
-}

package/styles/components/_meter-title.scss

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

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