Update the border colors in the Cart and Checkout blocks

assets/css/abstracts/_colors.scss

@@ -17,6 +17,8 @@ $select-item-dark: rgba(0, 0, 0, 0.4);
 $image-placeholder-border-color: #f2f2f2;
 
 // Universal colors for use on the frontend, currently being applied to checkout blocks.
-$universal-border: rgba(17, 17, 17, 0.3); // Used for form step borders.
-$universal-border-light: rgba(17, 17, 17, 0.115); // e7e7e7 on white.
+$universal-border-light: rgba(17, 17, 17, 0.11); // #e7e7e7 on white. Used for low contrast decorative elements such as section borders.
+$universal-border-medium: rgba(25, 23, 17, 0.48); // Used for radio and checkbox resting state.
+$universal-border-strong: rgba(17, 17, 17, 0.8); // #1e1e1e on white. Used for low contrast decorative elements such as input borders.
 $universal-body-low-emphasis: rgba(17, 17, 17, 0.5); // Used for low emphasis text such as input labels.
+$universal-background: rgba(17, 17, 17, 0.02); // Used for low contrast decorative elements background color.

assets/css/abstracts/_variables.scss

@@ -1,6 +1,7 @@
 @import "node_modules/@wordpress/base-styles/variables";
 
 // grid-unit from base-styles is 8px.
+$gap-huge:     7 * $grid-unit;		// 56px
 $gap-largest:  6 * $grid-unit;		// 48px
 $gap-larger:   4.5 * $grid-unit;	// 36px
 $gap-large:    3 * $grid-unit;		// 24px

assets/js/base/components/cart-checkout/cart-line-items-table/style.scss

@@ -81,7 +81,7 @@ table.wc-block-cart-items {
 		}
 		&:not(.wc-block-mini-cart-items):not(:last-child) {
 			.wc-block-cart-items__row {
-				@include with-translucent-border( 0 0 1px );
+				border-bottom: 1px solid $universal-border-light;
 			}
 		}
 		.wc-block-cart-items__row {
@@ -124,14 +124,15 @@ table.wc-block-cart-items {
 	margin-bottom: 3em;
 
 	.wc-block-cart-items {
-		@include with-translucent-border( 0 0 1px );
+		border-spacing: 0;
+		border-bottom: 1px solid $universal-border-light;
 
 		th {
 			padding: 0.25rem $gap 0.25rem 0;
 			white-space: nowrap;
 		}
 		td {
-			@include with-translucent-border( 1px 0 0 );
+			border-top: 1px solid $universal-border-light;
 			padding: $gap 0 $gap $gap;
 			vertical-align: top;
 		}

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

@@ -15,7 +15,7 @@
 	}
 
 	.wc-block-components-order-summary-item {
-		@include with-translucent-border(0 0 1px);
+		border-bottom: 1px solid $universal-border-light;
 		@include font-size(small);
 		display: flex;
 		padding-bottom: 1px;
@@ -27,6 +27,8 @@
 		}
 
 		&:last-child {
+			border-bottom: 0;
+
 			> div {
 				padding-bottom: 0;
 			}
@@ -39,6 +41,7 @@
 		.wc-block-components-product-metadata {
 			@include font-size(regular);
 		}
+
 	}
 
 	.wc-block-components-order-summary-item__image,
@@ -64,6 +67,7 @@
 		border: 2px solid;
 		border-radius: 1em;
 		box-shadow: 0 0 0 2px #fff;
+		border-color: $universal-border-light;
 		color: #000;
 		display: flex;
 		line-height: 1;

assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss

@@ -1,6 +1,6 @@
 .wc-block-components-shipping-rates-control__package {
 	margin: 0;
-	@include with-translucent-border( 0 0 1px );
+	border-bottom: 1px solid $universal-border-light;
 
 	&.wc-block-components-panel {
 		margin-bottom: 0;
@@ -14,7 +14,7 @@
 	}
 
 	&:last-child {
-		@include with-translucent-border( 0 );
+		border-bottom: 0;
 
 		.wc-block-components-panel__button {
 			padding-bottom: 0;

assets/js/base/components/quantity-selector/style.scss

@@ -22,11 +22,10 @@
 
 	&::after {
 		border-radius: $universal-border-radius;
-		border: 1px solid currentColor;
+		border: 1px solid $universal-border-light;
 		bottom: 0;
 		content: "";
 		left: 0;
-		opacity: 0.45;
 		pointer-events: none;
 		position: absolute;
 		right: 0;

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

@@ -52,11 +52,11 @@ $border-width: 1px;
 			border-left: $border-width solid currentColor;
 			border-top: $border-width solid currentColor;
 			border-radius: $universal-border-radius 0 0 0;
+			border-color: $universal-border-light;
 			content: "";
 			display: block;
 			height: $universal-border-radius - $border-width;
 			margin-right: $gap-small;
-			opacity: 0.3;
 			pointer-events: none;
 			width: #{$gap-large - $gap-small - $border-width * 2};
 		}
@@ -65,11 +65,11 @@ $border-width: 1px;
 			border-right: $border-width solid currentColor;
 			border-top: $border-width solid currentColor;
 			border-radius: 0 $universal-border-radius 0 0;
+			border-color: $universal-border-light;
 			content: "";
 			display: block;
 			height: $universal-border-radius - $border-width;
 			margin-left: $gap-small;
-			opacity: 0.3;
 			pointer-events: none;
 			flex-grow: 1;
 		}
@@ -81,12 +81,10 @@ $border-width: 1px;
 	}
 
 	.wc-block-components-express-payment__content {
-		@include with-translucent-border(0 $border-width $border-width);
+		border: $border-width solid $universal-border-light;
+		border-top: 0;
 		padding: #{$gap-large - $universal-border-radius} $gap-large $gap-large;
-
-		&::after {
-			border-radius: 0 0 $universal-border-radius $universal-border-radius;
-		}
+		border-radius: 0 0 $universal-border-radius $universal-border-radius;
 
 		> p {
 			margin-bottom: em($gap);
@@ -127,8 +125,7 @@ $border-width: 1px;
 	&::after {
 		content: " ";
 		flex: 1;
-		border-bottom: 1px solid;
-		opacity: 0.3;
+		border-bottom: 1px solid $universal-border-light;
 	}
 }
 

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

@@ -172,7 +172,7 @@
 
 .wc-block-checkout__payment-method {
 	.wc-block-components-radio-control__option {
-		padding-left: 56px;
+		padding-left: em($gap-huge);
 
 		&::after {
 			content: none;
@@ -196,9 +196,20 @@
 		font-weight: bold;
 	}
 
+	.wc-block-components-radio-control {
+		border: 1px solid $universal-border-light;
+		border-radius: $universal-border-radius;
+	}
 	.wc-block-components-radio-control-accordion-option,
 	.wc-block-components-radio-control__option {
-		@include with-translucent-border(1px 1px 0 1px);
+		border-top: 1px solid $universal-border-light;
+		&:first-child {
+			border-top: 0;
+		}
+	}
+	.wc-block-components-radio-control-accordion-option
+	.wc-block-components-radio-control__option {
+		border-width: 0;
 	}
 
 	.wc-block-components-radio-control-accordion-option:first-child::after {
@@ -224,6 +235,7 @@
 			display: flex;
 			align-items: center;
 			justify-content: flex-start;
+			border-width: 0;
 		}
 		.wc-block-components-radio-control__label img {
 			height: 24px;

assets/js/blocks/checkout/address-card/style.scss

@@ -1,5 +1,5 @@
 .wc-block-components-address-card {
-	border: 1px solid $universal-border;
+	border: 1px solid $universal-border-light;
 	@include font-size(regular);
 	padding: em($gap);
 	margin: 0;

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

@@ -37,7 +37,7 @@
 
 .is-large {
 	.wc-block-checkout__actions {
-		@include with-translucent-border(1px 0 0);
+		border-top: 1px solid $universal-border-light;
 		padding: em($gap-large) 0;
 	}
 }

assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/style.scss

@@ -6,7 +6,7 @@
 .is-small,
 .is-medium {
 	.wc-block-checkout__add-note {
-		@include with-translucent-border(1px 0);
+		border-bottom: 1px solid $universal-border-light;
 		margin-bottom: em($gap);
 		margin-top: em($gap);
 		padding: em($gap) 0;

assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/style.scss

@@ -2,9 +2,9 @@
 .wp-block-woocommerce-checkout-pickup-options-block {
 	.wc-block-components-local-pickup-rates-control {
 		.wc-block-components-radio-control__option {
-			@include with-translucent-border(0 0 1px);
+			border-bottom: 1px solid $universal-border-light;
 			margin: 0;
-			padding: em($gap-small) 0 em($gap-small) em($gap-largest);
+			padding: em($gap-small) 0 em($gap-small) em($gap-huge);
 		}
 		.wc-block-components-shipping-rates-control__no-results-notice {
 			margin: em($gap-small) 0;
@@ -42,7 +42,7 @@
 		.wc-block-components-radio-control__description-group {
 			width: 100%;
 			box-sizing: border-box;
-			background-color: $gray-100;
+			background-color: $universal-background;
 			border-radius: $universal-border-radius;
 			padding: 1px em($gap-small);
 			margin-top: em($gap-smaller);

assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/style.scss

@@ -21,18 +21,19 @@
 	background-color: transparent;
 	border: none;
 	box-shadow: none !important;
-	outline: 1px solid currentColor;
+	outline: 1px solid $universal-border-light;
 	border-radius: $universal-border-radius;
 	&.components-button:hover:not(:disabled),
 	&.components-button:focus:not(:disabled),
 	&:focus,
 	&:hover {
-		background-color: #d5d5d5;
+		background-color: $universal-background;
 		border-color: #d5d5d5;
 		color: #333;
 	}
 	&.wc-block-checkout__shipping-method-option--selected {
-		outline: 3px solid currentColor;
+		outline: 1px solid $universal-border-strong;
+		background-color: $universal-background;
 	}
 }
 

assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/style.scss

@@ -1,8 +1,8 @@
 .wc-block-checkout__shipping-option {
 	.wc-block-components-radio-control__option {
-		@include with-translucent-border(0 0 1px);
+		border-bottom: 1px solid $universal-border-light;
 		margin: 0;
-		padding: em($gap-small) 0 em($gap-small) em($gap-largest);
+		padding: em($gap-small) 0 em($gap-small) em($gap-huge);
 	}
 
 	.wc-block-components-shipping-rates-control__no-results-notice {

assets/js/blocks/checkout/styles/style.scss

@@ -4,6 +4,9 @@
 	.with-scroll-to-top__scroll-point {
 		top: -96px;
 	}
+	.wc-block-components-shipping-rates-control__package {
+		border-bottom: 0;
+	}
 }
 
 .wp-block-woocommerce-checkout.is-loading {

packages/components/checkbox-control/style.scss

@@ -19,7 +19,7 @@
 	.wc-block-components-checkbox__input[type="checkbox"] {
 		font-size: 1em;
 		appearance: none;
-		border: 2px solid $input-border-gray;
+		border: 1px solid $universal-border-medium;
 		border-radius: $universal-border-radius;
 		box-sizing: border-box;
 		height: em(24px);
@@ -35,11 +35,10 @@
 
 		&:checked {
 			background: #fff;
-			border-color: $input-border-gray;
 		}
 
 		&:focus {
-			outline: 2px solid $input-border-gray;
+			outline: 1px solid $universal-border-strong;
 			outline-offset: 2px;
 		}
 

packages/components/form-step/style.scss

@@ -96,7 +96,7 @@
 	.wc-block-components-checkout-step__container::after {
 		content: "";
 		height: 100%;
-		border-left: 1px solid $universal-border;
+		border-left: 1px solid $universal-border-light;
 		position: absolute;
 		left: -$gap-large;
 		top: 0;

packages/components/radio-control/style.scss

@@ -5,6 +5,7 @@
 	margin: em($gap) 0;
 	margin-top: 0;
 	padding: 0 0 0 em($gap-larger);
+
 	position: relative;
 	cursor: pointer;
 
@@ -58,7 +59,7 @@
 	.wc-block-components-radio-control__input {
 		appearance: none;
 		background: #fff;
-		border: 2px solid $input-border-gray;
+		border: 1px solid $universal-border-medium;
 		border-radius: 50%;
 		display: inline-block;
 		height: em(24px); // =1.5rem
@@ -67,14 +68,17 @@
 		width: em(24px);
 		// The code belows centers the input vertically.
 		position: absolute;
-		left: 0;
+		left: $gap;
 		top: 50%;
 		transform: translate(0, -45%);
 		margin: inherit;
 		cursor: pointer;
+		&:checked {
+			border: 1px solid $universal-border-strong;
+		}
 
 		&:focus {
-			outline: 2px solid $input-border-gray;
+			outline: 1px solid $universal-border-strong;
 			outline-offset: 2px;
 		}
 

packages/components/text-input/style.scss

@@ -49,7 +49,7 @@
 		line-height: em($gap);
 		width: 100%;
 		border-radius: $universal-border-radius;
-		border: 1px solid $input-border-gray;
+		border: 1px solid $universal-border-strong;
 		font-family: inherit;
 		margin: 0;
 		box-sizing: border-box;

packages/components/textarea/style.scss

@@ -1,7 +1,7 @@
 .wc-block-components-textarea {
 	@include font-size(regular);
 	background-color: #fff;
-	border: 1px solid $input-border-gray;
+	border: 1px solid $universal-border-strong;
 	border-radius: $universal-border-radius;
 	color: $input-text-active;
 	font-family: inherit;