This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Standardise & refactor colors scss to align with Gutenberg colors and WooCommerce brand. #3300
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Aljullu
added
status: needs review
focus: global styles
remove when `@woocommerce/base-styles` is updated.remove when `@woocommerce/base-styles` is updated. Greys Use only when you truly need pure black. For UI, use $gray-900. Used for light gray backgrounds. Used sparingly for light borders. Used for most borders. https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/77e0be9f1022aa8b9ea9d14e26c2c5be28179590/assets/css/abstracts/_colors.scss#L4-L20🚀 This comment was generated by the automations bot based on a
|
replace with $grid-unit values when `@woocommerce/base-st...replace with $grid-unit values when `@woocommerce/base-styles` is updated. github.com/WordPress/gutenberg/blob/master/packages/base-styles/_variables.scss#L23-L36 $grid-unit-50 https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/77e0be9f1022aa8b9ea9d14e26c2c5be28179590/assets/css/abstracts/_variables.scss#L3-L14🚀 This comment was generated by the automations bot based on a
|
refactor breakpoints so they use the mixins from Gutenber...refactor breakpoints so they use the mixins from Gutenberg github.com/WordPress/gutenberg/blob/master/packages/base-styles/_mixins.scss https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/77e0be9f1022aa8b9ea9d14e26c2c5be28179590/assets/css/abstracts/_breakpoints.scss#L11-L15🚀 This comment was generated by the automations bot based on a
|
replace with $grid-unit values when `@woocommerce/base-st...replace with $grid-unit values when `@woocommerce/base-styles` is updated. github.com/WordPress/gutenberg/blob/master/packages/base-styles/_variables.scss#L23-L36 $grid-unit-50 https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/800fd8a46ef9d89872b0880736cb2cf21d0bc0fc/assets/css/abstracts/_variables.scss#L3-L14🚀 This comment was generated by the automations bot based on a
|
remove when `@woocommerce/base-styles` is updated.remove when `@woocommerce/base-styles` is updated. Greys Use only when you truly need pure black. For UI, use $gray-900. Used for light gray backgrounds. Used sparingly for light borders. Used for most borders. https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/800fd8a46ef9d89872b0880736cb2cf21d0bc0fc/assets/css/abstracts/_colors.scss#L4-L20🚀 This comment was generated by the automations bot based on a
|
|
Size Change: -240 B (0%) Total Size: 1.12 MB
ℹ️ View Unchanged
|
budzanowski
approved these changes
Oct 21, 2020
Aljullu
force-pushed
the
update/styles-source
branch
from
800fd8a
to
c8de449
Compare
remove when `@woocommerce/base-styles` is updated.remove when `@woocommerce/base-styles` is updated. Greys Use only when you truly need pure black. For UI, use $gray-900. Used for light gray backgrounds. Used sparingly for light borders. Used for most borders. https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/c8de44956cc0071565950bfbac6fb66352897159/assets/css/abstracts/_colors.scss#L4-L20🚀 This comment was generated by the automations bot based on a
|
replace with $grid-unit values when `@woocommerce/base-st...replace with $grid-unit values when `@woocommerce/base-styles` is updated. github.com/WordPress/gutenberg/blob/master/packages/base-styles/_variables.scss#L23-L36 $grid-unit-50 https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/c8de44956cc0071565950bfbac6fb66352897159/assets/css/abstracts/_variables.scss#L3-L14🚀 This comment was generated by the automations bot based on a
|
This was referenced Oct 22, 2020
haszari
changed the title
6 tasks
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #1331.
This PR:
@wordpress/base-stylesand@automattic/color-studioin order to align our colors with Gutenberg and WooCommerce brand. Notice that means this PR introduces some visual changes, but none should be too drastic since I tried to always use the closer match. We used to have many different shades of gray that are now reduced to 7, that's in line with what Gutenberg did to reduce the number of colors (Remove more colors WordPress/gutenberg#23648).encode-color()) so SCSS variables can be used in SVG data-urls.Tip: it might be easier to review this PR with the
Hide whitespace changesoption on GH.Accessibility
I tested color contrast in several blocks to ensure there were no regressions.
Screenshots
Some screenshots:
How to test the changes in this Pull Request:
Test all blocks in editor/frontend and verify there are no evident issues with its display (layout completely broken or colors that are not correctly assigned). You can copy & paste this gist into the editor to automatically add all blocks. You might need to paste it with Ctrl+Shift+V so styles are removed and the editor can transform it into blocks.
Changelog