Revert "Remove default colors from the block-library CSS bundle` (#33924

)" (#34108) This reverts commit 29cd8ed. There's one use case we need to fix before being able to remove this code: support for classic themes that use the default colors, whose classes wouldn't be longer enqueued.
WordPress · Aug 17, 2021 · 5df0cd5 · 5df0cd5
1 parent 0ebe9b3
commit 5df0cd5
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 20 deletions.
diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md
@@ -2,10 +2,6 @@
 
 ## Unreleased
 
-### Breaking Changes
-
--   Remove the background-colors, foreground-colors, and gradient-colors mixins.
-
 ## 2.0.0 (2020-07-07)
 
 ### Breaking Changes

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
@@ -479,44 +479,186 @@
 	}
 }
 
-// Deprecated from UI, kept for back-compat.
-@mixin background-colors-deprecated() {
+@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.
 	.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;
+	}
 }
 
-// Deprecated from UI, kept for back-compat.
-@mixin foreground-colors-deprecated() {
+@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.
 	.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;
+	}
 }
 
-// Deprecated from UI, kept for back-compat.
-@mixin gradient-colors-deprecated() {
+@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.
+
 	/* 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%);
 	}
@@ -528,5 +670,9 @@
 	.has-nightshade-gradient-background {
 		background: linear-gradient(135deg,rgb(51,9,104) 0%,rgb(49,205,207) 100%);
 	}
+
+	.has-midnight-gradient-background {
+		background: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);
+	}
 	/* stylelint-enable function-comma-space-after */
 }
diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
@@ -2,10 +2,6 @@
 
 ## Unreleased
 
-### Breaking Change
-
--   Remove the background-colors, foreground-colors, and gradient-colors mixins.
-
 ## 5.0.0 (2021-07-29)
 
 ### Breaking Change

diff --git a/packages/block-library/src/common.scss b/packages/block-library/src/common.scss
@@ -4,13 +4,13 @@
 
 :root {
 	// Background colors.
-	@include background-colors-deprecated();
+	@include background-colors();
 
 	// Foreground colors.
-	@include foreground-colors-deprecated();
+	@include foreground-colors();
 
 	// Gradients
-	@include gradient-colors-deprecated();
+	@include gradient-colors();
 
 }
 

diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
@@ -55,13 +55,13 @@
 
 :root .editor-styles-wrapper {
 	// Background colors.
-	@include background-colors-deprecated();
+	@include background-colors();
 
 	// Foreground colors.
-	@include foreground-colors-deprecated();
+	@include foreground-colors();
 
 	// Gradients
-	@include gradient-colors-deprecated();
+	@include gradient-colors();
 }
 
 // Font sizes.