@wordpress/base-styles 3.6.0 → 4.0.1

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 4.0.0 (2021-09-09)
+
+### Breaking Change
+
+-   Remove the background-colors, foreground-colors, and gradient-colors mixins.
+
 ## 2.0.0 (2020-07-07)
 
 ### Breaking Changes

package/_colors.native.scss

@@ -53,6 +53,7 @@ $gray-text-min: darken($gray, 18%); //#537994
 $gray-lighten-10: lighten($gray, 10%); // #a8bece
 $gray-lighten-20: lighten($gray, 20%); // #c8d7e1
 $gray-lighten-30: lighten($gray, 30%); // #e9eff3
+$gray-darken-10: darken($gray, 10%);
 $gray-darken-20: darken($gray, 20%); // #4f748e
 $gray-darken-30: darken($gray, 30%); // #3d596d
 
@@ -102,6 +103,8 @@ $app-background-dark-alt: $background-dark-elevated;
 $modal-background: $white;
 $modal-background-dark: $background-dark-elevated;
 
+$sub-heading: $gray-text-min;
+$sub-heading-dark: $white;
 /**
  * Deprecated colors.
  * Please avoid using these.

package/_mixins.scss

@@ -479,186 +479,48 @@
 	}
 }
 
-@mixin background-colors() {
-	.has-pale-pink-background-color {
-		background-color: #f78da7;
-	}
-
-	.has-vivid-red-background-color {
-		background-color: #cf2e2e;
-	}
-
-	.has-luminous-vivid-orange-background-color {
-		background-color: #ff6900;
-	}
-
-	.has-luminous-vivid-amber-background-color {
-		background-color: #fcb900;
-	}
-
-	.has-light-green-cyan-background-color {
-		background-color: #7bdcb5;
-	}
-
-	.has-vivid-green-cyan-background-color {
-		background-color: #00d084;
-	}
-
-	.has-pale-cyan-blue-background-color {
-		background-color: #8ed1fc;
-	}
-
-	.has-vivid-cyan-blue-background-color {
-		background-color: #0693e3;
-	}
-
-	.has-vivid-purple-background-color {
-		background-color: #9b51e0;
-	}
-
-	.has-white-background-color {
-		background-color: #fff;
-	}
-
-	// Deprecated from UI, kept for back-compat.
+// Deprecated from UI, kept for back-compat.
+@mixin background-colors-deprecated() {
 	.has-very-light-gray-background-color {
 		background-color: #eee;
 	}
 
-	.has-cyan-bluish-gray-background-color {
-		background-color: #abb8c3;
-	}
-
-	// Deprecated from UI, kept for back-compat.
 	.has-very-dark-gray-background-color {
 		background-color: #313131;
 	}
-
-	.has-black-background-color {
-		background-color: #000;
-	}
 }
 
-@mixin foreground-colors() {
-	.has-pale-pink-color {
-		color: #f78da7;
-	}
-
-	.has-vivid-red-color {
-		color: #cf2e2e;
-	}
-
-	.has-luminous-vivid-orange-color {
-		color: #ff6900;
-	}
-
-	.has-luminous-vivid-amber-color {
-		color: #fcb900;
-	}
-
-	.has-light-green-cyan-color {
-		color: #7bdcb5;
-	}
-
-	.has-vivid-green-cyan-color {
-		color: #00d084;
-	}
-
-	.has-pale-cyan-blue-color {
-		color: #8ed1fc;
-	}
-
-	.has-vivid-cyan-blue-color {
-		color: #0693e3;
-	}
-
-	.has-vivid-purple-color {
-		color: #9b51e0;
-	}
-
-	.has-white-color {
-		color: #fff;
-	}
-
-	// Deprecated from UI, kept for back-compat.
+// Deprecated from UI, kept for back-compat.
+@mixin foreground-colors-deprecated() {
 	.has-very-light-gray-color {
 		color: #eee;
 	}
 
-	.has-cyan-bluish-gray-color {
-		color: #abb8c3;
-	}
-
-	// Deprecated from UI, kept for back-compat.
 	.has-very-dark-gray-color {
 		color: #313131;
 	}
-
-	.has-black-color {
-		color: #000;
-	}
 }
 
-@mixin gradient-colors() {
-	// Our classes uses the same values we set for gradient value attributes, and we can not use spacing because of WP multi site kses rule.
+// Deprecated from UI, kept for back-compat.
+@mixin gradient-colors-deprecated() {
+	/*
+	 * Our classes uses the same values we set for gradient value attributes,
+	 * and we can not use spacing because of WP multi site kses rule.
+	 */
 
 	/* stylelint-disable function-comma-space-after */
-	.has-vivid-cyan-blue-to-vivid-purple-gradient-background {
-		background: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
-	}
-
 	.has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background {
 		background: linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%);
 	}
 
-	.has-light-green-cyan-to-vivid-green-cyan-gradient-background {
-		background: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
-	}
-
-	.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
-		background: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
-	}
-
-	.has-luminous-vivid-orange-to-vivid-red-gradient-background {
-		background: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);
-	}
-
-	.has-very-light-gray-to-cyan-bluish-gray-gradient-background {
-		background: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
-	}
-
-	.has-cool-to-warm-spectrum-gradient-background {
-		background: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
-	}
-
-	.has-blush-light-purple-gradient-background {
-		background: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
-	}
-
-	.has-blush-bordeaux-gradient-background {
-		background: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
-	}
-
 	.has-purple-crush-gradient-background {
 		background: linear-gradient(135deg,rgb(52,226,228) 0%,rgb(71,33,251) 50%,rgb(171,29,254) 100%);
 	}
 
-	.has-luminous-dusk-gradient-background {
-		background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
-	}
-
 	.has-hazy-dawn-gradient-background {
 		background: linear-gradient(135deg,rgb(250,172,168) 0%,rgb(218,208,236) 100%);
 	}
 
-	.has-pale-ocean-gradient-background {
-		background: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
-	}
-
-	.has-electric-grass-gradient-background {
-		background: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
-	}
-
 	.has-subdued-olive-gradient-background {
 		background: linear-gradient(135deg,rgb(250,250,225) 0%,rgb(103,166,113) 100%);
 	}

package/_z-index.scss

@@ -43,8 +43,8 @@ $z-layers: (
 	".wp-block-template-part__placeholder-preview-filter-input": 1,
 
 	// Navigation menu dropdown.
-	".has-child .wp-block-navigation-link__container": 28,
-	".has-child:hover .wp-block-navigation-link__container": 29,
+	".has-child .wp-block-navigation__submenu-container": 28,
+	".has-child:hover .wp-block-navigation__submenu-container": 29,
 
 	// Active pill button
 	".components-button {:focus or .is-primary}": 1,
@@ -147,7 +147,7 @@ $z-layers: (
 	".components-popover.edit-widgets-more-menu__content": 99998,
 	".components-popover.block-editor-rich-text__inline-format-toolbar": 99998,
 	".components-popover.block-editor-warning__dropdown": 99998,
-	".components-popover.edit-navigation-header__menu-switcher-dropdown": 99998,
+	".components-popover.edit-navigation-menu-actions__switcher-dropdown": 99998,
 
 	".components-autocomplete__results": 1000000,
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/base-styles",
-	"version": "3.6.0",
+	"version": "4.0.1",
 	"description": "Base SCSS utilities and variables for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,5 +23,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "743b70f86f1e75fd66a583bf659f2b2fe5daf1cc"
+	"gitHead": "8f7f052bc04e3f4eb50f479ced14be1489b9fa79"
 }