@carbon/charts 1.8.0 → 1.9.0-next.0

package/dist/styles/colors.scss

@@ -0,0 +1,131 @@
+@use 'sass:color';
+@use 'sass:map';
+
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/theme' as *;
+
+@import './color-palatte.scss';
+
+@function generateCSSCustomProperty($token, $fallback) {
+	@return var(--cds-charts-#{$token}, $fallback);
+}
+
+@function getThemeColors($theme_type) {
+	@if $theme_type == 'dark' {
+		@return color-property(null, $dark-theme-colors);
+	} @else {
+		@return color-property(null, $white-theme-colors);
+	}
+}
+
+@function getGradientColors() {
+	$monochrome: color-property(null, $monochrome-quantize-colors);
+	$divergent: color-property(null, $divergent-quantize-colors);
+
+	@return map-merge($monochrome, $divergent);
+}
+
+@function color-property($name, $theme-colors) {
+	$color-items: ();
+
+	@if type-of($theme-colors) == map {
+		@each $category, $value in $theme-colors {
+			@if $name == null {
+				$color-items: map-merge($color-items, color-property('#{$category}', $value));
+			} @else {
+				$color-items: map-merge($color-items, color-property('#{$name}-#{$category}', $value));
+			}
+		}
+		@return $color-items;
+	} @else {
+		@return (#{$name}: $theme-colors);
+	}
+}
+
+$color-map-light: map-merge(getThemeColors('light'), getGradientColors());
+.#{$prefix}--chart-holder {
+	@each $token, $color in $color-map-light {
+		--cds-charts-#{$token}: #{$color};
+		--cds-charts-#{$token}-hovered: #{darken($color, 7%)};
+	}
+}
+
+$color-map-dark: map-merge(getThemeColors('dark'), getGradientColors());
+.#{$prefix}--chart-holder[data-carbon-theme='g90'],
+.#{$prefix}--chart-holder[data-carbon-theme='g100'] {
+	@each $token, $color in $color-map-dark {
+		--cds-charts-#{$token}: #{$color};
+		--cds-charts-#{$token}-hovered: #{darken($color, 7%)};
+	}
+}
+
+$color-map: map-merge(getThemeColors('light'), getGradientColors());
+.#{$prefix}--#{$charts-prefix}--chart-wrapper {
+	@each $token, $color in $color-map {
+		.fill-#{$token} {
+			fill: generateCSSCustomProperty($token, $color);
+
+			&.hovered {
+				fill: generateCSSCustomProperty(#{$token}-hovered, $color);
+				@include default_transition;
+			}
+		}
+
+		.background-#{$token} {
+			background-color: generateCSSCustomProperty($token, $color);
+
+			&.hovered {
+				background-color: generateCSSCustomProperty(#{$token}-hovered, $color);
+				@include default_transition;
+			}
+		}
+
+		.stroke-#{$token} {
+			stroke: generateCSSCustomProperty($token, $color);
+		}
+
+		.stop-color-#{$token} {
+			stop-color: generateCSSCustomProperty($token, $color);
+		}
+	}
+}
+
+.#{$prefix}--#{$charts-prefix}--tooltip {
+	$color-map: getThemeColors('light');
+
+	@each $token, $color in $color-map {
+		.tooltip-#{$token} {
+			background-color: generateCSSCustomProperty($token, $color);
+		}
+	}
+}
+
+.#{$prefix}--#{$charts-prefix}--legend {
+	.additional > .icon {
+		.area-1 {
+			fill: $zone-fill-01;
+			stroke: $zone-stroke-01;
+		}
+
+		.area-2 {
+			fill: $zone-fill-02;
+			stroke: $zone-stroke-02;
+		}
+
+		.area-3 {
+			fill: $zone-fill-03;
+			stroke: $zone-stroke-03;
+		}
+
+		.quartile {
+			&-wrapper {
+				fill: $zone-fill-02;
+				stroke: $zone-stroke-01;
+			}
+
+			&-line {
+				fill: $layer-inverse-absolute;
+			}
+		}
+	}
+}

package/dist/styles/components/_color-legend.scss

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

package/dist/styles/components/_edge.scss

@@ -0,0 +1,65 @@
+@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/dist/styles/components/_grid.scss

@@ -0,0 +1,30 @@
+@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/dist/styles/components/_marker.scss

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

package/dist/styles/components/_meter-title.scss

@@ -0,0 +1,37 @@
+@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/dist/styles/components/_tooltip.scss

@@ -0,0 +1,132 @@
+@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/dist/styles/components/diagrams/_card-node.scss

@@ -0,0 +1,97 @@
+@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/dist/styles/components/diagrams/_edge.scss

@@ -0,0 +1,66 @@
+@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/dist/styles/components/diagrams/_shape-node.scss

@@ -0,0 +1,89 @@
+@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/dist/styles/components/diagrams/index.scss

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

package/dist/styles/graphs/_alluvial.scss

@@ -0,0 +1,17 @@
+@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;
+	}
+}