@carbon/charts 1.13.4 → 1.13.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@carbon/charts",
-	"version": "1.13.4",
+	"version": "1.13.6",
 	"description": "Carbon Charts component library",
 	"module": "./dist/index.mjs",
 	"main": "./dist/umd/bundle.umd.js",
@@ -107,18 +107,18 @@
 	"devDependencies": {
 		"@carbon/import-once": "^10.7.0",
 		"@carbon/layout": "^11.19.0",
-		"@carbon/styles": "^1.38.0",
+		"@carbon/styles": "^1.39.0",
 		"@carbon/themes": "^11.25.0",
 		"@rollup/plugin-replace": "^5.0.2",
-		"@rushstack/eslint-patch": "^1.4.0",
+		"@rushstack/eslint-patch": "^1.5.0",
 		"@stackblitz/sdk": "^1.9.0",
 		"@types/d3": "^7.4.1",
 		"@types/d3-cloud": "^1.2.6",
 		"@types/d3-sankey": "^0.12.2",
 		"@types/lodash-es": "^4.17.9",
 		"@types/topojson": "^3.2.4",
-		"@typescript-eslint/eslint-plugin": "^6.7.2",
-		"@typescript-eslint/parser": "^6.7.2",
+		"@typescript-eslint/eslint-plugin": "^6.7.3",
+		"@typescript-eslint/parser": "^6.7.3",
 		"concurrently": "^8.2.1",
 		"downlevel-dts": "^0.11.0",
 		"eslint": "^8.50.0",
@@ -130,8 +130,8 @@
 		"typedoc": "^0.25.1",
 		"typescript": "^5.2.2",
 		"vite": "^4.4.9",
-		"vite-plugin-dts": "^3.5.4",
-		"vitest": "^0.34.5"
+		"vite-plugin-dts": "^3.6.0",
+		"vitest": "^0.34.6"
 	},
 	"publishConfig": {
 		"access": "public"
@@ -180,5 +180,5 @@
 			"url": "https://github.com/theiliad"
 		}
 	],
-	"gitHead": "d25fea36e3bb2319a3dfb498dc2a042d1b331124"
+	"gitHead": "43009e695df030a8398a256bbab6c387a3c6a24b"
 }

package/scss/demos.scss

@@ -1,39 +1,18 @@
-$charts-prefix: 'cc';
+@use 'globals'; // Load Carbon Charts global variables
+@use 'index'; // Load Carbon Charts styles
 
-// Variables picked up by @carbon/styles/scss/config in imports
-$prefix: 'cds'; // Default value
+$css--font-face: false; // Don't load Plex
 $css--default-type: false; // Do not include default type
 $css--reset: false; // Do not include reset CSS
 
-// IBM Plex font for demo is loaded in .storybook/preview-head.html - don't include here
-@use '@carbon/styles/scss/config' with (
-	$css--font-face: false
-);
-@use '@carbon/styles'; // primarily needed for toolbar
-@use '@carbon/styles/scss/type' as *; // used on line 230
-
-// Custom charting tokens
+@use '@carbon/styles';
+@use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/theme';
-@import 'tokens';
-@include theme.add-component-tokens($custom-charting-tokens);
-@import '@carbon/styles/scss/components/button/tokens.scss';
-
-@mixin default_transition { // used by colors
-	transition: all 0.1s ease-out;
-}
-@import '@carbon/colors';
-@import 'colors';
-
-@import '@carbon/import-once/scss';
-@import 'components';
-
-@import 'graphs';
-@import 'type';
-@import 'chart-holder';
+@use '@carbon/colors';
 
-.#{$prefix}--#{$charts-prefix}--chart-wrapper {
+.#{globals.$prefix}--#{globals.$charts-prefix}--chart-wrapper {
 	overflow: visible;
-	font-family: var(--#{$prefix}-charts-font-family-condensed);
+	font-family: var(--#{globals.$prefix}-charts-font-family-condensed);
 }
 
 html {
@@ -214,7 +193,7 @@ div.container {
 		}
 
 		.welcome__heading {
-			@include type-style('productive-heading-07');
+			@include type.type-style('productive-heading-07');
 
 			color: #fff; // theme.$text-inverse;
 		}
@@ -224,7 +203,7 @@ div.container {
 		}
 
 		.welcome__heading--other {
-			@include type-style('productive-heading-04');
+			@include type.type-style('productive-heading-04');
 
 			font-weight: 600;
 			color: #4587fd;
@@ -283,17 +262,17 @@ div.container {
 	margin-top: 30px;
 	max-width: 700px;
 
-	.#{$prefix}--col-md-6.#{$prefix}--col-lg-6 {
+	.#{globals.$prefix}--col-md-6.#{globals.$prefix}--col-lg-6 {
 		border: 1px solid theme.$background;
 		padding: 0;
 	}
 
-	.#{$prefix}--col-lg-6 {
+	.#{globals.$prefix}--col-lg-6 {
 		width: 100%;
 	}
 
 	@media (min-width: 42rem) {
-		.#{$prefix}--col-md-6 {
+		.#{globals.$prefix}--col-md-6 {
 			display: block;
 			max-width: 75%;
 			flex: 0 0 75%;
@@ -301,7 +280,7 @@ div.container {
 	}
 
 	@media (min-width: 66rem) {
-		.#{$prefix}--col-lg-6 {
+		.#{globals.$prefix}--col-lg-6 {
 			display: block;
 			max-width: 50%;
 			flex: 0 0 50%;
@@ -309,7 +288,7 @@ div.container {
 	}
 }
 
-.#{$prefix}--aspect-ratio--object {
+.#{globals.$prefix}--aspect-ratio--object {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -317,7 +296,7 @@ div.container {
 	height: 100%;
 }
 
-.#{$prefix}--resource-card .#{$prefix}--tile {
+.#{globals.$prefix}--resource-card .#{globals.$prefix}--tile {
 	background: theme.$layer-01;
 	height: 100%;
 	padding: 1rem 25% 1rem 1rem;
@@ -326,24 +305,24 @@ div.container {
 	text-decoration: none;
 }
 
-.#{$prefix}--resource-card .#{$prefix}--tile:hover {
+.#{globals.$prefix}--resource-card .#{globals.$prefix}--tile:hover {
 	background: theme.$background-hover;
 }
 
-.#{$prefix}--resource-card__title {
-	@include type-style('productive-heading-03');
+.#{globals.$prefix}--resource-card__title {
+	@include type.type-style('productive-heading-03');
 	text-decoration: none;
 	color: theme.$text-primary;
 }
 
-.#{$prefix}--resource-card__subtitle {
-	@include type-style('heading-01');
+.#{globals.$prefix}--resource-card__subtitle {
+	@include type.type-style('heading-01');
 	font-weight: 400;
 	text-decoration: none;
 	color: theme.$text-primary;
 }
 
-.#{$prefix}--resource-card__icon--img {
+.#{globals.$prefix}--resource-card__icon--img {
 	position: absolute;
 	bottom: 1rem;
 	left: 1rem;
@@ -353,17 +332,17 @@ div.container {
 	align-items: flex-end;
 }
 
-.#{$prefix}--resource-card__icon--img .gatsby-resp-image-wrapper,
-.#{$prefix}--resource-card__icon--img img[src*='gif'],
-.#{$prefix}--resource-card__icon--img img[src*='svg'] {
+.#{globals.$prefix}--resource-card__icon--img .gatsby-resp-image-wrapper,
+.#{globals.$prefix}--resource-card__icon--img img[src*='gif'],
+.#{globals.$prefix}--resource-card__icon--img img[src*='svg'] {
 	margin-bottom: 0;
 }
 
-.#{$prefix}--resource-card__icon--img .gatsby-resp-image-wrapper {
+.#{globals.$prefix}--resource-card__icon--img .gatsby-resp-image-wrapper {
 	position: static !important; //important needed to override inline style added by Gatsby
 }
 
-.#{$prefix}--resource-card__icon--action {
+.#{globals.$prefix}--resource-card__icon--action {
 	position: absolute;
 	bottom: 1rem;
 	right: 1rem;
@@ -371,62 +350,62 @@ div.container {
 	height: 20px;
 }
 
-.#{$prefix}--resource-card .#{$prefix}--resource-card__icon--action svg {
+.#{globals.$prefix}--resource-card .#{globals.$prefix}--resource-card__icon--action svg {
 	fill: theme.$icon-primary;
 }
 
 // Dark
-.#{$prefix}--resource-card--dark .#{$prefix}--tile {
-	background: $gray-90; //$background for gray 90 theme
+.#{globals.$prefix}--resource-card--dark .#{globals.$prefix}--tile {
+	background: colors.$gray-90; //$background for gray 90 theme
 }
 
-.#{$prefix}--resource-card--dark .#{$prefix}--tile:hover {
-	background: $gray-80; //$background-hover for gray 90 theme
+.#{globals.$prefix}--resource-card--dark .#{globals.$prefix}--tile:hover {
+	background: colors.$gray-80; //$background-hover for gray 90 theme
 }
 
-.#{$prefix}--resource-card--dark .#{$prefix}--resource-card__title,
-.#{$prefix}--resource-card--dark .#{$prefix}--resource-card__subtitle {
+.#{globals.$prefix}--resource-card--dark .#{globals.$prefix}--resource-card__title,
+.#{globals.$prefix}--resource-card--dark .#{globals.$prefix}--resource-card__subtitle {
 	color: theme.$text-on-color;
 }
 
-.#{$prefix}--resource-card--dark .#{$prefix}--resource-card__icon--action svg {
-	fill: $gray-10;
+.#{globals.$prefix}--resource-card--dark .#{globals.$prefix}--resource-card__icon--action svg {
+	fill: colors.$gray-10;
 }
 
 // Disabled
-.#{$prefix}--resource-card--disabled .#{$prefix}--tile:hover {
+.#{globals.$prefix}--resource-card--disabled .#{globals.$prefix}--tile:hover {
 	background: theme.$layer-01;
 	cursor: not-allowed;
 }
 
-.#{$prefix}--resource-card--disabled .#{$prefix}--resource-card__title,
-.#{$prefix}--resource-card--disabled .#{$prefix}--resource-card__subtitle {
+.#{globals.$prefix}--resource-card--disabled .#{globals.$prefix}--resource-card__title,
+.#{globals.$prefix}--resource-card--disabled .#{globals.$prefix}--resource-card__subtitle {
 	color: theme.$icon-on-color-disabled;
 }
 
-.#{$prefix}--resource-card--disabled .#{$prefix}--resource-card__icon--action svg {
+.#{globals.$prefix}--resource-card--disabled .#{globals.$prefix}--resource-card__icon--action svg {
 	fill: theme.$icon-disabled;
 }
 
-.#{$prefix}--resource-card--disabled .#{$prefix}--resource-card__icon--img {
+.#{globals.$prefix}--resource-card--disabled .#{globals.$prefix}--resource-card__icon--img {
 	filter: grayscale(100%);
 	opacity: 0.5;
 }
 
 // Disabled dark
-.#{$prefix}--resource-card--disabled.#{$prefix}--resource-card--dark .#{$prefix}--tile:hover {
-	background: $gray-90; //$background for gray 90 theme
+.#{globals.$prefix}--resource-card--disabled.#{globals.$prefix}--resource-card--dark .#{globals.$prefix}--tile:hover {
+	background: colors.$gray-90; //$background for gray 90 theme
 }
 
-.#{$prefix}--resource-card--disabled.#{$prefix}--resource-card--dark
-	.#{$prefix}--resource-card__title,
-.#{$prefix}--resource-card--disabled.#{$prefix}--resource-card--dark
-	.#{$prefix}--resource-card__subtitle {
-	color: $gray-50; //$icon-on-color-disabled for gray 90
+.#{globals.$prefix}--resource-card--disabled.#{globals.$prefix}--resource-card--dark
+	.#{globals.$prefix}--resource-card__title,
+.#{globals.$prefix}--resource-card--disabled.#{globals.$prefix}--resource-card--dark
+	.#{globals.$prefix}--resource-card__subtitle {
+	color: colors.$gray-50; //$icon-on-color-disabled for gray 90
 }
 
-.#{$prefix}--resource-card--disabled.#{$prefix}--resource-card--dark
-	.#{$prefix}--resource-card__icon--action
+.#{globals.$prefix}--resource-card--disabled.#{globals.$prefix}--resource-card--dark
+	.#{globals.$prefix}--resource-card__icon--action
 	svg {
-	fill: $gray-70; //$disabled-02 for gray 90
+	fill: colors.$gray-70; //$disabled-02 for gray 90
 }