diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md index 7faa28d3063d5..ac07171de711a 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 diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index fed727e4e4a6e..2a9a65520f07e 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -479,186 +479,44 @@ } } -@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() { /* 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%); } @@ -670,9 +528,5 @@ .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 709ed1182a250..eccd2681c7d27 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 diff --git a/packages/block-library/src/common.scss b/packages/block-library/src/common.scss index 6cf9854943376..7eea70ea7dc2c 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 a3f9b9ce885c3..5b8df1cf86ebb 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(); + @include background-colors-deprecated(); // Foreground colors. - @include foreground-colors(); + @include foreground-colors-deprecated(); // Gradients - @include gradient-colors(); + @include gradient-colors-deprecated(); } // Font sizes.