Don't use @wordpress/base-styles package (#135)

Author: t-hamano

package-lock.json

@@ -33,7 +33,6 @@
 	},
 	"devDependencies": {
 		"@deboxsoft/cpx": "^1.5.0",
-		"@wordpress/base-styles": "^5.20.0",
 		"@wordpress/e2e-test-utils": "^11.20.0",
 		"@wordpress/env": "^10.20.0",
 		"@wordpress/scripts": "^30.13.0",

package.json

@@ -1,15 +1,17 @@
+@use "../../../wp-base-styles.scss" as wpBaseStyles;
+
 .chbe-admin-header {
-	padding: $grid-unit-20 0;
-	background-color: $white;
+	padding: wpBaseStyles.$grid-unit-20 0;
+	background-color: wpBaseStyles.$white;
 
 	.chbe-admin-header__info {
 		position: absolute;
 		top: 0;
-		right: $grid-unit-20 + $grid-unit-05;
+		right: wpBaseStyles.$grid-unit-20 + wpBaseStyles.$grid-unit-05;
 
 		@media screen and (max-width: 782px) {
 			position: static;
-			margin-top: $grid-unit-20;
+			margin-top: wpBaseStyles.$grid-unit-20;
 		}
 	}
 }

src/admin/components/header/style.scss

@@ -1,7 +1,9 @@
+@use "../../../wp-base-styles" as wpBaseStyles;
+
 .chbe-admin-welcome-guide-modal {
 	width: 312px;
 
 	img {
-		margin-bottom: $grid-unit-20;
+		margin-bottom: wpBaseStyles.$grid-unit-20;
 	}
 }

src/admin/components/welcome-guide/style.scss

@@ -1,6 +1,8 @@
+@use "../../../../wp-base-styles.scss" as wpBaseStyles;
+
 .chbe-admin-editor-config-filter {
 
 	.components-input-control__container {
-		background: $white;
+		background: wpBaseStyles.$white;
 	}
 }

src/admin/editor-config/components/filter/style.scss

@@ -1,3 +1,5 @@
+@use "../../../../wp-base-styles.scss" as wpBaseStyles;
+
 // Toggle button
 .chbe-admin-editor-config-item-help-toggle {
 	margin-top: -2px;
@@ -24,7 +26,7 @@
 	.chbe-admin-editor-config-item-help-modal__items {
 		display: flex;
 		flex-wrap: wrap;
-		gap: $grid-unit-30;
+		gap: wpBaseStyles.$grid-unit-30;
 
 		@media screen and (max-width: 782px) {
 			flex-flow: column;
@@ -49,6 +51,6 @@
 
 	.chbe-admin-editor-config-item-help-modal__item-button {
 		height: auto;
-		padding: $grid-unit-05;
+		padding: wpBaseStyles.$grid-unit-05;
 	}
 }

src/admin/editor-config/components/item-help/style.scss

@@ -1,6 +1,8 @@
-@import "./components/editor-preview/style";
-@import "./components/item-help/style";
-@import "./components/filter/style";
+@use "../../wp-base-styles.scss" as wpBaseStyles;
+
+@use "./components/editor-preview/style" as editorPreview;
+@use "./components/item-help/style" as itemHelp;
+@use "./components/filter/style" as filter;
 
 .chbe-admin-editor-config {
 
@@ -22,15 +24,15 @@
 	}
 
 	.chbe-admin-editor-config__basic-settings {
-		padding: $grid-unit-30;
-		background: $white;
-		border-top: $border-width solid $gray-300;
-		border-bottom: $border-width solid $gray-300;
+		padding: wpBaseStyles.$grid-unit-30;
+		background: wpBaseStyles.$white;
+		border-top: wpBaseStyles.$border-width solid wpBaseStyles.$gray-300;
+		border-bottom: wpBaseStyles.$border-width solid wpBaseStyles.$gray-300;
 	}
 
 	.chbe-admin-editor-config__preview {
 		position: sticky;
-		top: $grid-unit-50;
+		top: wpBaseStyles.$grid-unit-50;
 		width: 50%;
 
 		@media screen and (max-width: 782px) {