* Change WooCommerce Card to WordPress Card in the WelcomeCard component.
Use isElevated and margin-bottom to make the Card look close to previous UI.
* Use WordPress Card in KnowledgeBase.
For the description in Card header, it will be rendered as a p element instead of h2, which should be more semantically correct. Test is updated to reflect this.
* Add Card component wrapper that supports title and description props.
* Use WordPress Card component wrapper in recommended extensions.
* Code refactor to use WordPress Card wrapper.
* Use WordPress Card wrapper in installed extension.
* Use margin-bottom for children layout at the parent CSS level.
* Add test for Card.
* Fix no margin between cards in Coupons page, and remove previous css for WooCommerce Card.
* Remove old WooCommerce Card css.
* Don't use isElevated in Card, to match the style in WooCommerce Home screen.
* Make item border color consistent with WordPress Card in Installed Extension card.
Use WordPress Card without CardBody here because we don't want the padding from CardBody.
* Make the card description look similar to previous WooCommerce Card description.
* Fix spelling in CSS class names.
* Fix WooCommerce spelling in comment.
* Change the Marketing Card style to match with WooCommerce Home style.
Also change the text gray color to use CSS variable instead of hardcoded gray value.
Also remove the usage of h2 in the Card header to follow WooCommerce Home style.
* Use $gray-200 as light borders between items in card.
* Remove unneeded CSS code based on TODO in comment.
Fixeswoocommerce/woocommerce-admin#4732
This updates `@wordpress/base-styles`, and because `@wordpress/components` depends on variables from it, that must be updated as well.
There are 3 major changes required as part of updating:
1. The $theme-color variable is no longer exposed by base-styles. Instead there are 3 css vars exposed. These are made available by use of a provided mixin. Situations where $theme-color was darkened using scss have been mapped as best as possible to the 2 other darkened shades of the css var that are available such as `--wp-admin-theme-color-darker-20` and `--wp-admin-theme-color-darker-10`. In some cases this means the colors are not exactly the same as before.
2. The post css `theme()` call is no longer available. All uses of this have been consolidated to use of the main theme css var `--wp-admin-theme-color`. This means that calls like `theme(secondary)` or `theme(outline)` etc have all been consolidated to the one color.
3. Many of the variables used for different shades of gray have been deprecated. These have been mapped across to the new gray variables. (Mapped according to the list described in woocommerce/woocommerce-admin#4732)
* Fix incorrect woocommere-admin spelling
* Update styles
* Add icons
* Add hover effect for coupon icons
* Remove variable comment
* Update color case
* Style lint fixes
* Use $theme-color
* Update icons, use wordpress/icons where possible
* Adjustment for using smaller default icons and no fills in the svgs
* Use var(--wp-admin-theme-color) instead of $theme-color
* Reorg coupons stylesheet
* Update PropTypes for ProductIcon
* Adjust icon export
* Rever to using $theme-color
* Add versions of link, people and currency-dollar
* Overide coupons icon background color
* Add background transition to icon wrapper
* refactor slider component to be functional
* Refactor RecommendedExtensions
* Refactor KnowledgeBase
* Refactor API to account for component location changes and categories
* Fix missing param description
* Remove unnessary use
* Pass down the category of the received plugins.
* Store the recommended plugins for the different categories separately.
* Pass down the category.
* Add new functions to get by category.
* set categories
* Handle new object for posts and recommendations
* Update tests
* Finish off implementing category param for data store resolvers
* Update js tests
* Fix incorrect reference to kb component
Co-authored-by: Dan Bitzer <danielbitzer@gmail.com>
Tomek Wytrębowicz
Gan Eng Chin
Sam Seay
Jason Conroy