diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index ecbdfb029ffa9..9497191f4f81d 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -480,7 +480,205 @@ } } -// It is important to include these styles in all built stylesheets +@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; + } +} + +@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; + } +} + +@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%); + } + + .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%); + } + /* stylelint-enable function-comma-space-after */ +} + +// It is important to include these styles in all built stylesheets. // This allows to CSS variables post CSS plugin to generate fallbacks. :root { @include admin-scheme(#007cba); diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index 21e6f3b037a1b..c7c23d390dca1 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -57,6 +57,42 @@ */ @import "./block/edit-panel/editor.scss"; +:root .editor-styles-wrapper { + // Background colors. + @include background-colors(); + + // Foreground colors. + @include foreground-colors(); + + // Gradients + @include gradient-colors(); +} + +// Font sizes. +// The reason we add the editor class wrapper here is +// to avoid enqueing the classes twice: here and in ./editor.scss +.editor-styles-wrapper .has-small-font-size { + font-size: 13px; +} + +.editor-styles-wrapper .has-regular-font-size, // Not used now, kept because of backward compatibility. +.editor-styles-wrapper .has-normal-font-size { + font-size: 16px; +} + +.editor-styles-wrapper .has-medium-font-size { + font-size: 20px; +} + +.editor-styles-wrapper .has-large-font-size { + font-size: 36px; +} + +.editor-styles-wrapper .has-larger-font-size, // Not used now, kept because of backward compatibility. +.editor-styles-wrapper .has-huge-font-size { + font-size: 42px; +} + /** * Editor Normalization Styles * diff --git a/packages/block-library/src/latest-posts/editor.scss b/packages/block-library/src/latest-posts/editor.scss index a8a538967a3e8..431a0794704b4 100644 --- a/packages/block-library/src/latest-posts/editor.scss +++ b/packages/block-library/src/latest-posts/editor.scss @@ -8,3 +8,7 @@ .wp-block-latest-posts li a > div { display: inline; } + +.edit-post-visual-editor .wp-block-latest-posts.is-grid li { + margin-bottom: 20px; +} diff --git a/packages/block-library/src/latest-posts/style.scss b/packages/block-library/src/latest-posts/style.scss index a70c8615617c2..c818cd94def02 100644 --- a/packages/block-library/src/latest-posts/style.scss +++ b/packages/block-library/src/latest-posts/style.scss @@ -64,7 +64,3 @@ text-align: center; } } - -.edit-post-visual-editor .wp-block-latest-posts.is-grid li { - margin-bottom: 20px; -} diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index 605843d78d665..0b2f0339131f7 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -39,203 +39,15 @@ // to assure colors take effect over another base class color, mainly to let // the colors override the added specificity by link states such as :hover. -:root .editor-styles-wrapper, :root { // 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; - } + @include background-colors(); // 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; - } + @include foreground-colors(); // Gradients - // 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%); - } - - .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%); - } - /* stylelint-enable function-comma-space-after */ + @include gradient-colors(); .has-link-color a { color: var(--wp--style--color--link, #00e); @@ -243,32 +55,23 @@ } // Font sizes. -// The reason we add the editor class wrapper here is -// to avoid enqueing the classes twice: here and in ./editor.scss -.editor-styles-wrapper .has-small-font-size, .has-small-font-size { font-size: 13px; } -.editor-styles-wrapper .has-regular-font-size, -.editor-styles-wrapper .has-normal-font-size, .has-regular-font-size, // Not used now, kept because of backward compatibility. .has-normal-font-size { font-size: 16px; } -.editor-styles-wrapper .has-medium-font-size, .has-medium-font-size { font-size: 20px; } -.editor-styles-wrapper .has-large-font-size, .has-large-font-size { font-size: 36px; } -.editor-styles-wrapper .has-larger-font-size, -.editor-styles-wrapper .has-huge-font-size, .has-larger-font-size, // Not used now, kept because of backward compatibility. .has-huge-font-size { font-size: 42px;