Add theme-level global styles to Cart and Checkout block

assets/css/abstracts/_mixins.scss

@@ -123,8 +123,11 @@ $fontSizes: (
 	vertical-align: baseline;
 }
 
-@mixin reset-typography() {
+@mixin reset-color() {
 	color: inherit;
+}
+
+@mixin reset-typography() {
 	font-family: inherit;
 	font-size: inherit;
 	font-style: inherit;
@@ -138,6 +141,7 @@ $fontSizes: (
 // Reset <h1>, <h2>, etc. styles as if they were text. Useful for elements that must be headings for a11y but don't need those styles.
 @mixin text-heading() {
 	@include reset-box();
+	@include reset-color();
 	@include reset-typography();
 	box-shadow: none;
 	display: inline;
@@ -148,6 +152,7 @@ $fontSizes: (
 // Reset <button> style as if it was text. Useful for elements that must be `<button>` for a11y but don't need those styles.
 @mixin text-button() {
 	@include reset-box();
+	@include reset-color();
 	@include reset-typography();
 	background: transparent;
 	box-shadow: none;

assets/js/base/components/button/style.scss

@@ -57,12 +57,7 @@
 }
 
 body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link) {
-	@include reset-typography();
-	font-weight: bold;
-	line-height: 1;
 	padding: 0 em($gap);
-	text-decoration: none;
-	text-transform: none;
 
 	&:focus {
 		box-shadow: 0 0 0 2px $studio-blue;
@@ -77,21 +72,4 @@ body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button
 			opacity: 0.9;
 		}
 	}
-
-	&.contained {
-		background-color: $gray-900;
-		color: $white;
-
-		&:disabled,
-		&:hover,
-		&:focus,
-		&:active {
-			background-color: $gray-900;
-			color: $white;
-		}
-
-		&:hover {
-			opacity: 0.9;
-		}
-	}
 }

assets/js/base/components/cart-checkout/order-summary/index.tsx

@@ -35,7 +35,6 @@ const OrderSummary = ( {
 					{ __( 'Order summary', 'woo-gutenberg-products-block' ) }
 				</span>
 			}
-			titleTag="h2"
 		>
 			<div className="wc-block-components-order-summary__content">
 				{ cartItems.map( ( cartItem ) => {

assets/js/base/components/cart-checkout/order-summary/style.scss

@@ -8,97 +8,97 @@
 	.wc-block-components-panel__content {
 		margin-bottom: 0;
 	}
-}
 
-.wc-block-components-order-summary__content {
-	display: table;
-	width: 100%;
-}
+	.wc-block-components-order-summary__content {
+		display: table;
+		width: 100%;
+	}
 
-.wc-block-components-order-summary-item {
-	@include with-translucent-border(0 0 1px);
-	@include font-size(small);
-	display: flex;
-	padding-bottom: 1px;
-	padding-top: $gap;
-	width: 100%;
+	.wc-block-components-order-summary-item {
+		@include with-translucent-border(0 0 1px);
+		@include font-size(small);
+		display: flex;
+		padding-bottom: 1px;
+		padding-top: $gap;
+		width: 100%;
 
-	&:first-child {
-		padding-top: 0;
-	}
+		&:first-child {
+			padding-top: 0;
+		}
 
-	&:last-child {
-		> div {
-			padding-bottom: 0;
+		&:last-child {
+			> div {
+				padding-bottom: 0;
+			}
+
+			&::after {
+				display: none;
+			}
 		}
 
-		&::after {
-			display: none;
+		.wc-block-components-product-metadata {
+			@include font-size(regular);
 		}
 	}
 
-	.wc-block-components-product-metadata {
-		@include font-size(regular);
+	.wc-block-components-order-summary-item__image,
+	.wc-block-components-order-summary-item__description {
+		display: table-cell;
+		vertical-align: top;
 	}
-}
-
-.wc-block-components-order-summary-item__image,
-.wc-block-components-order-summary-item__description {
-	display: table-cell;
-	vertical-align: top;
-}
-
-.wc-block-components-order-summary-item__image {
-	width: #{$gap-large * 2};
-	padding-bottom: $gap;
-	position: relative;
 
-	> img {
+	.wc-block-components-order-summary-item__image {
 		width: #{$gap-large * 2};
-		max-width: #{$gap-large * 2};
+		padding-bottom: $gap;
+		position: relative;
+
+		> img {
+			width: #{$gap-large * 2};
+			max-width: #{$gap-large * 2};
+		}
 	}
-}
 
-.wc-block-components-order-summary-item__quantity {
-	align-items: center;
-	background: #fff;
-	border: 2px solid;
-	border-radius: 1em;
-	box-shadow: 0 0 0 2px #fff;
-	color: #000;
-	display: flex;
-	line-height: 1;
-	min-height: 20px;
-	padding: 0 0.4em;
-	position: absolute;
-	justify-content: center;
-	min-width: 20px;
-	right: 0;
-	top: 0;
-	transform: translate(50%, -50%);
-	white-space: nowrap;
-	z-index: 1;
-}
+	.wc-block-components-order-summary-item__quantity {
+		align-items: center;
+		background: #fff;
+		border: 2px solid;
+		border-radius: 1em;
+		box-shadow: 0 0 0 2px #fff;
+		color: #000;
+		display: flex;
+		line-height: 1;
+		min-height: 20px;
+		padding: 0 0.4em;
+		position: absolute;
+		justify-content: center;
+		min-width: 20px;
+		right: 0;
+		top: 0;
+		transform: translate(50%, -50%);
+		white-space: nowrap;
+		z-index: 1;
+	}
 
-.wc-block-components-order-summary-item__description {
-	padding-left: $gap-large;
-	padding-right: $gap-small;
-	padding-bottom: $gap;
+	.wc-block-components-order-summary-item__description {
+		padding-left: $gap-large;
+		padding-right: $gap-small;
+		padding-bottom: $gap;
 
-	p,
-	.wc-block-components-product-metadata {
-		line-height: 1.375;
-		margin-top: #{ ($gap-large - $gap) * 0.5 };
+		p,
+		.wc-block-components-product-metadata {
+			line-height: 1.375;
+			margin-top: #{ ($gap-large - $gap) * 0.5 };
+		}
 	}
-}
 
-.wc-block-components-order-summary-item__total-price {
-	font-weight: bold;
-	margin-left: auto;
-	text-align: right;
-}
+	.wc-block-components-order-summary-item__total-price {
+		font-weight: bold;
+		margin-left: auto;
+		text-align: right;
+	}
 
 
-.wc-block-components-order-summary-item__individual-prices {
-	display: block;
+	.wc-block-components-order-summary-item__individual-prices {
+		display: block;
+	}
 }

assets/js/base/components/cart-checkout/product-image/index.tsx

@@ -4,11 +4,6 @@
 import { decodeEntities } from '@wordpress/html-entities';
 import { PLACEHOLDER_IMG_SRC } from '@woocommerce/settings';
 
-/**
- * Internal dependencies
- */
-import './style.scss';
-
 interface ProductImageProps {
 	image: { alt?: string; thumbnail?: string };
 	fallbackAlt: string;
@@ -37,13 +32,7 @@ const ProductImage = ( {
 				alt: '',
 		  };
 
-	return (
-		<img
-			className="wc-block-components-product-image"
-			{ ...imageProps }
-			alt={ imageProps.alt }
-		/>
-	);
+	return <img { ...imageProps } alt={ imageProps.alt } />;
 };
 
 export default ProductImage;

assets/js/base/components/radio-control/style.scss

@@ -1,4 +1,5 @@
 .wc-block-components-radio-control__option {
+	@include reset-color();
 	@include reset-typography();
 	display: block;
 	margin: em($gap) 0;

assets/js/base/components/sidebar-layout/style.scss

@@ -49,11 +49,14 @@
 .is-large {
 	.wc-block-components-sidebar {
 		.wc-block-components-totals-item,
-		.wc-block-components-totals-coupon-link,
 		.wc-block-components-panel {
 			padding-left: $gap;
 			padding-right: $gap;
 		}
+		.wc-block-components-totals-coupon-link {
+			margin-left: $gap;
+			margin-right: $gap;
+		}
 
 		.wc-block-components-panel {
 			.wc-block-components-totals-item {

assets/js/base/components/title/style.scss

@@ -3,6 +3,11 @@
 	@include reset-box();
 	@include font-size(large);
 	word-break: break-word;
+
+	textarea {
+		letter-spacing: inherit;
+		text-transform: inherit;
+	}
 }
 
 // For Twenty Twenty we need to increase specificity a bit more.

assets/js/blocks/cart-checkout-shared/payment-methods/style.scss

@@ -59,6 +59,7 @@
 	}
 
 	label {
+		@include reset-color();
 		@include reset-typography();
 		@include font-size(regular);
 		line-height: 1.375; // =22px when font-size is 16px.

assets/js/blocks/cart/cart-cross-sells-product-list/cart-cross-sells-product.tsx

@@ -16,7 +16,6 @@ import { Block as ProductRating } from '../../../atomic/blocks/product-elements/
 import { Block as ProductSaleBadge } from '../../../atomic/blocks/product-elements/sale-badge/block';
 import { Block as ProductPrice } from '../../../atomic/blocks/product-elements/price/block';
 import { Block as ProductButton } from '../../../atomic/blocks/product-elements/button/block';
-import AddToCartButton from '../../../atomic/blocks/product-elements/add-to-cart/block';
 import { ImageSizing } from '../../../atomic/blocks/product-elements/image/types';
 
 interface CrossSellsProductProps {
@@ -60,11 +59,7 @@ const CartCrossSellsProduct = ( {
 						/>
 						<ProductPrice />
 					</div>
-					{ product.is_in_stock ? (
-						<AddToCartButton />
-					) : (
-						<ProductButton />
-					) }
+					<ProductButton />
 				</ProductDataContextProvider>
 			</InnerBlockLayoutContextProvider>
 		</div>

assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import Title from '@woocommerce/base-components/title';
 import classnames from 'classnames';
 
 const Block = ( {
@@ -12,12 +11,11 @@ const Block = ( {
 	content: string;
 } ): JSX.Element => {
 	return (
-		<Title
-			headingLevel="2"
+		<span
 			className={ classnames( className, 'wc-block-cart__totals-title' ) }
 		>
 			{ content }
-		</Title>
+		</span>
 	);
 };
 

assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/edit.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { PlainText, useBlockProps } from '@wordpress/block-editor';
-import Title from '@woocommerce/base-components/title';
 import classnames from 'classnames';
 
 /**
@@ -24,8 +23,7 @@ export const Edit = ( {
 	const blockProps = useBlockProps();
 	return (
 		<div { ...blockProps }>
-			<Title
-				headingLevel="2"
+			<span
 				className={ classnames(
 					className,
 					'wc-block-cart__totals-title'
@@ -39,7 +37,7 @@ export const Edit = ( {
 					}
 					style={ { backgroundColor: 'transparent' } }
 				/>
-			</Title>
+			</span>
 		</div>
 	);
 };

assets/js/blocks/checkout/inner-blocks/checkout-actions-block/style.scss

@@ -10,8 +10,6 @@
 			height: auto;
 
 			.wc-block-components-button__text {
-				line-height: 24px;
-
 				> svg {
 					fill: $white;
 					vertical-align: top;