From f161b02c2522f248150d99c83644e3447594a09f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Fri, 6 Aug 2021 12:37:29 +0200 Subject: [PATCH 1/5] Do not import the CSS that comes from theme.json --- packages/base-styles/_mixins.scss | 101 ++++++++++++++----------- packages/block-library/src/common.scss | 6 +- packages/block-library/src/editor.scss | 4 +- 3 files changed, 62 insertions(+), 49 deletions(-) diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index fed727e4e4a6e1..dd9b3dc3a9b3c8 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -479,7 +479,20 @@ } } +// Deprecated from UI, kept for back-compat. +@mixin background-colors-deprecated() { + .has-very-light-gray-background-color { + background-color: #eee; + } + + .has-very-dark-gray-background-color { + background-color: #313131; + } +} + @mixin background-colors() { + @include background-colors-deprecated(); + .has-pale-pink-background-color { background-color: #f78da7; } @@ -520,26 +533,29 @@ 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() { + .has-very-light-gray-color { + color: #eee; + } + + .has-very-dark-gray-color { + color: #313131; + } +} + @mixin foreground-colors() { + @include foreground-colors-deprecated(); + .has-pale-pink-color { color: #f78da7; } @@ -580,37 +596,54 @@ 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; } } +@mixin gradient-colors-deprecated() { + /* stylelint-disable function-comma-space-after */ + + .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-purple-crush-gradient-background { + background: linear-gradient(135deg,rgb(52,226,228) 0%,rgb(71,33,251) 50%,rgb(171,29,254) 100%); + } + + .has-hazy-dawn-gradient-background { + background: linear-gradient(135deg,rgb(250,172,168) 0%,rgb(218,208,236) 100%); + } + + .has-subdued-olive-gradient-background { + background: linear-gradient(135deg,rgb(250,250,225) 0%,rgb(103,166,113) 100%); + } + + .has-atomic-cream-gradient-background { + background: linear-gradient(135deg,rgb(253,215,154) 0%,rgb(0,74,89) 100%); + } + + .has-nightshade-gradient-background { + background: linear-gradient(135deg,rgb(51,9,104) 0%,rgb(49,205,207) 100%); + } + /* stylelint-enable function-comma-space-after */ +} + @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. + @include gradient-colors-deprecated(); + /* 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%); } @@ -639,18 +672,10 @@ 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%); } @@ -659,18 +684,6 @@ 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%); - } - - .has-atomic-cream-gradient-background { - background: linear-gradient(135deg,rgb(253,215,154) 0%,rgb(0,74,89) 100%); - } - - .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%); } diff --git a/packages/block-library/src/common.scss b/packages/block-library/src/common.scss index 6cf9854943376d..7eea70ea7dc2c3 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(); + @include background-colors-deprecated(); // Foreground colors. - @include foreground-colors(); + @include foreground-colors-deprecated(); // Gradients - @include gradient-colors(); + @include gradient-colors-deprecated(); } diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index a3f9b9ce885c3b..a3691b50aa1960 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -55,10 +55,10 @@ :root .editor-styles-wrapper { // Background colors. - @include background-colors(); + @include background-colors-deprecated(); // Foreground colors. - @include foreground-colors(); + @include foreground-colors-deprecated(); // Gradients @include gradient-colors(); From b5134f4cd759599a6102329430e5b8e8f733b8bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Fri, 6 Aug 2021 12:44:11 +0200 Subject: [PATCH 2/5] Use gradient-colors-deprecated --- packages/block-library/src/editor.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index a3691b50aa1960..5b8df1cf86ebbd 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -61,7 +61,7 @@ @include foreground-colors-deprecated(); // Gradients - @include gradient-colors(); + @include gradient-colors-deprecated(); } // Font sizes. From 90dd2460a5473dbe531af5d821982ddcc1f2d0d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Wed, 11 Aug 2021 10:04:18 +0200 Subject: [PATCH 3/5] Remove no longer user mixins --- packages/base-styles/_mixins.scss | 161 +----------------------------- 1 file changed, 1 insertion(+), 160 deletions(-) diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index dd9b3dc3a9b3c8..2a9a65520f07ec 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -490,58 +490,6 @@ } } -@mixin background-colors() { - @include background-colors-deprecated(); - - .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; - } - - .has-cyan-bluish-gray-background-color { - background-color: #abb8c3; - } - - .has-black-background-color { - background-color: #000; - } -} - // Deprecated from UI, kept for back-compat. @mixin foreground-colors-deprecated() { .has-very-light-gray-color { @@ -553,58 +501,7 @@ } } -@mixin foreground-colors() { - @include foreground-colors-deprecated(); - - .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; - } - - .has-cyan-bluish-gray-color { - color: #abb8c3; - } - - .has-black-color { - color: #000; - } -} - +// Deprecated from UI, kept for back-compat. @mixin gradient-colors-deprecated() { /* stylelint-disable function-comma-space-after */ @@ -633,59 +530,3 @@ } /* stylelint-enable function-comma-space-after */ } - -@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. - - @include gradient-colors-deprecated(); - - /* 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-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-luminous-dusk-gradient-background { - background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 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-midnight-gradient-background { - background: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%); - } - /* stylelint-enable function-comma-space-after */ -} From 465777f898ea756bedf324cf264dbf25862a5812 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Wed, 11 Aug 2021 10:05:25 +0200 Subject: [PATCH 4/5] Add deprecation note --- packages/base-styles/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md index 7faa28d3063d59..ac07171de711a2 100644 --- a/packages/base-styles/CHANGELOG.md +++ b/packages/base-styles/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Remove the background-colors, foreground-colors, and gradient-colors mixins. + ## 2.0.0 (2020-07-07) ### Breaking Changes From 0d1a0ec73638900f544759f108fee2628e1f43c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Wed, 11 Aug 2021 11:55:49 +0200 Subject: [PATCH 5/5] Add changelog for block-library --- packages/block-library/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md index 709ed1182a2504..eccd2681c7d277 100644 --- a/packages/block-library/CHANGELOG.md +++ b/packages/block-library/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Change + +- Remove the background-colors, foreground-colors, and gradient-colors mixins. + ## 5.0.0 (2021-07-29) ### Breaking Change