From 49dc110389227fb5136ae117bcbf95fa27715230 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Tue, 17 Aug 2021 12:52:37 +0200 Subject: [PATCH] Revert "Remove default colors from the block-library CSS bundle as they are generated from `theme.json` (#33924)" This reverts commit 29cd8eda717ec20a33ab4b95855652be758dd58d. 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. --- packages/base-styles/CHANGELOG.md | 4 - packages/base-styles/_mixins.scss | 158 ++++++++++++++++++++++++- packages/block-library/CHANGELOG.md | 4 - packages/block-library/src/common.scss | 6 +- packages/block-library/src/editor.scss | 6 +- 5 files changed, 158 insertions(+), 20 deletions(-) diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md index ac07171de711a2..7faa28d3063d59 100644 --- 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 index 2a9a65520f07ec..fed727e4e4a6e1 100644 --- 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 index eccd2681c7d277..709ed1182a2504 100644 --- 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 index 7eea70ea7dc2c3..6cf9854943376d 100644 --- 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 index 5b8df1cf86ebbd..a3f9b9ce885c3b 100644 --- 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.