fix(CSS pollution) (#1671)

* fix(scss): load tokens at beginning of _chart-holder.scss

* chore(app): bump vitest

* fix(css-pollution): prevent global styles from entering generated CSS file

* fix(css-pollution): prevent global styles from entering generated CSS file

* fix(focus): Add focus handling for buttons

* chore(app): bump @babel/core, @babel/preset-typescript for storybook

package.json

@@ -27,28 +27,28 @@
   "packageManager": "[email protected]",
   "prettier": "./prettier.config.mjs",
   "devDependencies": {
-    "@babel/core": "^7.22.20",
+    "@babel/core": "^7.23.0",
     "@babel/plugin-external-helpers": "^7.22.5",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-transform-react-jsx": "^7.22.15",
     "@babel/preset-env": "^7.22.20",
     "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.22.15",
-    "@storybook/addon-essentials": "^7.4.3",
-    "@storybook/addon-interactions": "^7.4.3",
-    "@storybook/addon-links": "^7.4.3",
-    "@storybook/blocks": "^7.4.3",
-    "@storybook/html-vite": "^7.4.3",
-    "@storybook/manager-api": "^7.4.3",
-    "@storybook/react": "^7.4.3",
-    "@storybook/react-vite": "^7.4.3",
-    "@storybook/react-webpack5": "^7.4.3",
-    "@storybook/svelte": "^7.4.3",
-    "@storybook/sveltekit": "^7.4.3",
+    "@babel/preset-typescript": "^7.23.0",
+    "@storybook/addon-essentials": "^7.4.5",
+    "@storybook/addon-interactions": "^7.4.5",
+    "@storybook/addon-links": "^7.4.5",
+    "@storybook/blocks": "^7.4.5",
+    "@storybook/html-vite": "^7.4.5",
+    "@storybook/manager-api": "^7.4.5",
+    "@storybook/react": "^7.4.5",
+    "@storybook/react-vite": "^7.4.5",
+    "@storybook/react-webpack5": "^7.4.5",
+    "@storybook/svelte": "^7.4.5",
+    "@storybook/sveltekit": "^7.4.5",
     "@storybook/testing-library": "^0.2.1",
-    "@storybook/theming": "^7.4.3",
-    "@storybook/vue3": "^7.4.3",
-    "@storybook/vue3-vite": "^7.4.3",
+    "@storybook/theming": "^7.4.5",
+    "@storybook/vue3": "^7.4.5",
+    "@storybook/vue3-vite": "^7.4.5",
     "commitizen": "^4.3.0",
     "css-loader": "6.8.1",
     "cz-conventional-changelog": "^3.3.0",

packages/angular/package.json

@@ -56,7 +56,7 @@
 		"@carbon/icon-helpers": "^10.44.0",
 		"@carbon/icons": "^11.27.0",
 		"@stackblitz/sdk": "^1.9.0",
-		"@storybook/angular": "^7.4.3",
+		"@storybook/angular": "^7.4.5",
 		"@types/carbon__icon-helpers": "^10.7.2",
 		"@typescript-eslint/eslint-plugin": "^6.7.2",
 		"@typescript-eslint/parser": "^6.7.2",
@@ -65,13 +65,13 @@
 		"d3-cloud": "^1.2.7",
 		"d3-sankey": "^0.12.3",
 		"downlevel-dts": "^0.11.0",
-		"eslint": "^8.49.0",
+		"eslint": "^8.50.0",
 		"eslint-config-prettier": "^9.0.0",
 		"eslint-plugin-prettier": "^5.0.0",
 		"ng-packagr": "^16.2.3",
 		"prettier-eslint": "^15.0.1",
 		"rxjs": "~7.8.1",
-		"storybook": "^7.4.3",
+		"storybook": "^7.4.5",
 		"typescript": "~5.1.6",
 		"zone.js": "~0.13.3"
 	},

packages/core/package.json

@@ -112,21 +112,21 @@
 		"@rollup/plugin-replace": "^5.0.2",
 		"@rushstack/eslint-patch": "^1.4.0",
 		"@stackblitz/sdk": "^1.9.0",
-		"@types/d3": "^7.4.0",
-		"@types/d3-cloud": "^1.2.5",
-		"@types/d3-sankey": "^0.12.1",
+		"@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",
 		"concurrently": "^8.2.1",
 		"downlevel-dts": "^0.11.0",
-		"eslint": "^8.49.0",
+		"eslint": "^8.50.0",
 		"eslint-config-prettier": "^9.0.0",
 		"jsdom": "^22.1.0",
 		"resize-observer-polyfill": "^1.5.1",
 		"sass": "^1.68.0",
-		"storybook": "^7.4.3",
+		"storybook": "^7.4.5",
 		"typedoc": "^0.25.1",
 		"typescript": "^5.2.2",
 		"vite": "^4.4.9",

packages/core/scss/components/_grid-brush.scss

@@ -1,5 +1,5 @@
-@use '@carbon/styles/scss/theme';
-@use '@carbon/styles/scss/components/button';
+@use '@carbon/themes/scss/generated/tokens' as theme;
+@use '@carbon/styles/scss/components/button/tokens' as button;
 @use '../globals';
 
 .#{globals.$prefix}--#{globals.$charts-prefix}--grid-brush {

packages/core/scss/components/_title.scss

@@ -1,4 +1,4 @@
-@use '@carbon/styles/scss/theme';
+@use '@carbon/themes/scss/generated/tokens' as theme;
 @use '../globals';
 
 .#{globals.$prefix}--#{globals.$charts-prefix}--title {
@@ -16,7 +16,9 @@
 	}
 }
 
-.layout-child.title {
-	height: unset !important;
-	overflow: hidden;
-}
+.#{globals.$prefix}--chart-holder {
+	.layout-child.title {
+		height: unset !important;
+		overflow: hidden;
+	}
+}

packages/core/scss/components/index.scss

@@ -8,7 +8,6 @@
 @use 'layout';
 @use 'legend';
 @use 'meter-title';
-@use 'modal';
 @use 'ruler';
 @use 'skeleton';
 @use 'skeleton-lines';