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

Author: t-hamano

package-lock.json

@@ -24,7 +24,6 @@
 		"npm": "10.5.0"
 	},
 	"devDependencies": {
-		"@wordpress/base-styles": "5.20.0",
 		"@wordpress/env": "^10.20.0",
 		"@wordpress/icons": "^10.20.0",
 		"@wordpress/scripts": "^30.13.0",

package.json

@@ -0,0 +1,68 @@
+// These mixins are taken from the WordPress Base Styles package.
+// https://github.com/WordPress/gutenberg/blob/trunk/packages/base-styles/_mixins.scss
+// There are some small changes to make it work properly with Dart Sass.
+
+@use "sass:color";
+
+@mixin admin-scheme($color-primary) {
+	// Define RGB equivalents for use in rgba function.
+	// Hexadecimal css vars do not work in the rgba function.
+	--wp-admin-theme-color: #{$color-primary};
+	--wp-admin-theme-color--rgb: #{hex-to-rgb($color-primary)};
+	// Darker shades.
+	--wp-admin-theme-color-darker-10: #{color.adjust($color-primary, $lightness: -5%)};
+	--wp-admin-theme-color-darker-10--rgb: #{hex-to-rgb(color.adjust($color-primary, $lightness: -5%))};
+	--wp-admin-theme-color-darker-20: #{color.adjust($color-primary, $lightness: -10%)};
+	--wp-admin-theme-color-darker-20--rgb: #{hex-to-rgb(color.adjust($color-primary, $lightness: -10%))};
+
+	// Focus style width.
+	// Avoid rounding issues by showing a whole 2px for 1x screens, and 1.5px on high resolution screens.
+	--wp-admin-border-width-focus: 2px;
+
+	@media ( -webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+		--wp-admin-border-width-focus: 1.5px;
+	}
+}
+
+@mixin wordpress-admin-schemes() {
+
+	body.admin-color-light {
+
+		@include admin-scheme(#0085ba);
+	}
+
+	body.admin-color-modern {
+
+		@include admin-scheme(#3858e9);
+	}
+
+	body.admin-color-blue {
+
+		@include admin-scheme(#096484);
+	}
+
+	body.admin-color-coffee {
+
+		@include admin-scheme(#46403c);
+	}
+
+	body.admin-color-ectoplasm {
+
+		@include admin-scheme(#523f6d);
+	}
+
+	body.admin-color-midnight {
+
+		@include admin-scheme(#e14d43);
+	}
+
+	body.admin-color-ocean {
+
+		@include admin-scheme(#627c83);
+	}
+
+	body.admin-color-sunrise {
+
+		@include admin-scheme(#dd823b);
+	}
+}

src/admin-schemes.scss

@@ -1,5 +1,5 @@
-@import "~@wordpress/base-styles/mixins";
-@include wordpress-admin-schemes();
+@use "./admin-schemes" as wp-admin-schemes;
+@include wp-admin-schemes.wordpress-admin-schemes();
 
 $default-scheme-color: #007cba;
 $border-color: #c3c4c7;