Spacing values

assets/css/abstracts/_colors.scss

@@ -19,3 +19,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-body-low-emphasis: rgba(17, 17, 17, 0.5); // Used for low emphasis text such as input labels.

assets/js/base/components/cart-checkout/form-step/style.scss

@@ -29,11 +29,11 @@
 }
 
 .wc-block-components-checkout-step__content > * {
-	margin-bottom: em($gap);
+	margin-bottom: $gap;
 }
 .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__content > :last-child {
 	margin-bottom: 0;
-	padding-bottom: em($gap-large);
+	padding-bottom: $gap;
 }
 
 .wc-block-components-checkout-step__heading {

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

@@ -25,10 +25,6 @@
 		padding-bottom: em($gap-small);
 	}
 
-	.wc-block-components-radio-control {
-		margin-bottom: em($gap-small);
-	}
-
 	.wc-block-components-radio-control,
 	.wc-block-components-radio-control__option-layout {
 		padding-bottom: 0;

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

@@ -6,6 +6,7 @@
 
 		.components-base-control__field {
 			@include reset-box();
+			position: relative;
 		}
 		.components-combobox-control__suggestions-container {
 			@include reset-typography();
@@ -15,7 +16,8 @@
 		input.components-combobox-control__input {
 			@include reset-typography();
 			@include font-size(regular);
-
+			padding: em($gap + $gap-smaller) em($gap-smaller) em($gap-smaller);
+			line-height: em($gap);
 			box-sizing: border-box;
 			outline: inherit;
 			border: 1px solid $input-border-gray;
@@ -24,10 +26,7 @@
 			color: $input-text-active;
 			font-family: inherit;
 			font-weight: normal;
-			height: 3em;
 			letter-spacing: inherit;
-			line-height: 1;
-			padding: em($gap-large) $gap em($gap-smallest);
 			text-align: left;
 			text-overflow: ellipsis;
 			text-transform: none;
@@ -67,7 +66,7 @@
 			background-color: $select-dropdown-light;
 			border: 1px solid $input-border-gray;
 			border-top: 0;
-			margin: 3em 0 0 0;
+			margin: 3em 0 0 -1px;
 			padding: 0;
 			max-height: 300px;
 			min-width: 100%;
@@ -110,14 +109,16 @@
 		label.components-base-control__label {
 			@include reset-typography();
 			@include font-size(regular);
-			line-height: 1.375; // =22px when font-size is 16px.
 			position: absolute;
-			transform: translateY(0.75em);
+			transform: translateY(em($gap));
+			line-height: 1.25; // =20px when font-size is 16px.
+			left: em($gap-smaller);
+			top: 0;
 			transform-origin: top left;
 			transition: all 200ms ease;
-			color: $gray-700;
+			color: $universal-body-low-emphasis;
 			z-index: 1;
-			margin: 0 0 0 #{$gap + 1px};
+			margin: 0;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			max-width: calc(100% - #{2 * $gap});
@@ -132,10 +133,16 @@
 		}
 	}
 
+	.wc-block-components-combobox-control:has(input:-webkit-autofill) {
+		label {
+			transform: translateY(em($gap-smaller)) scale(0.875);
+		}
+	}
+
 	&.is-active,
 	&:focus-within {
 		.wc-block-components-combobox-control label.components-base-control__label {
-			transform: translateY(#{$gap-smallest}) scale(0.75);
+			transform: translateY(em($gap-smaller)) scale(0.875);
 		}
 	}
 

assets/js/base/components/country-input/style.scss

@@ -3,7 +3,7 @@
 @import "node_modules/wordpress-components/src/combobox-control/style";
 
 .wc-block-components-country-input {
-	margin-top: em($gap-large);
+	margin-top: $gap;
 
 	// Fixes width in the editor.
 	.components-flex {

assets/js/base/components/state-input/style.scss

@@ -1,5 +1,5 @@
 .wc-block-components-state-input {
-	margin-top: em($gap-large);
+	margin-top: $gap;
 
 	// Fixes width in the editor.
 	.components-flex {

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

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

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

@@ -22,7 +22,7 @@
 			.wc-block-components-text-input,
 			.wc-block-components-country-input,
 			.wc-block-components-state-input {
-				flex: 0 0 calc(50% - #{$gap-small});
+				flex: 0 0 calc(50% - #{$gap-smaller});
 				box-sizing: border-box;
 
 				&:nth-of-type(2),

packages/checkout/components/checkbox-control/style.scss

@@ -9,6 +9,7 @@
 		position: relative;
 		cursor: pointer;
 		@include font-size(small);
+		margin-bottom: 0 !important;
 
 		input[type="checkbox"] {
 			cursor: inherit;

packages/checkout/components/text-input/style.scss

@@ -1,22 +1,22 @@
 .wc-block-components-form .wc-block-components-text-input,
 .wc-block-components-text-input {
 	position: relative;
-	margin-top: em($gap-large);
+	margin-top: $gap;
 	white-space: nowrap;
 
 	label {
 		@include reset-color();
 		@include reset-typography();
 		@include font-size(regular);
 		position: absolute;
-		transform: translateY(0.75em);
-		left: 0;
+		transform: translateY(em($gap));
+		line-height: 1.25; // =20px when font-size is 16px.
+		left: em($gap-smaller + 1px);
 		top: 0;
 		transform-origin: top left;
-		line-height: 1.375; // =22px when font-size is 16px.
-		color: $gray-700;
-		transition: transform 200ms ease;
-		margin: 0 0 0 #{$gap + 1px};
+		color: $universal-body-low-emphasis;
+		transition: all 200ms ease;
+		margin: 0;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		max-width: calc(100% - #{2 * $gap});
@@ -30,12 +30,13 @@
 		}
 	}
 
-	input:-webkit-autofill + label {
-		transform: translateY(#{$gap-smallest}) scale(0.75);
-	}
-
-	&.is-active label {
-		transform: translateY(#{$gap-smallest}) scale(0.75);
+	input[type="number"] {
+		-moz-appearance: textfield;
+		&::-webkit-outer-spin-button,
+		&::-webkit-inner-spin-button {
+			appearance: none;
+			margin: 0;
+		}
 	}
 
 	input[type="tel"],
@@ -44,18 +45,16 @@
 	input[type="number"],
 	input[type="email"] {
 		@include font-size(regular);
-		background-color: #fff;
-		padding: em($gap-small) 0;
-		text-indent: $gap;
+		padding: em($gap);
+		line-height: em($gap);
+		width: 100%;
 		border-radius: $universal-border-radius;
 		border: 1px solid $input-border-gray;
-		width: 100%;
-		line-height: 1.375; // =22px when font-size is 16px.
 		font-family: inherit;
 		margin: 0;
 		box-sizing: border-box;
-		height: 3em;
 		min-height: 0;
+		background-color: #fff;
 		color: $input-text-active;
 
 		&:focus {
@@ -78,22 +77,18 @@
 		}
 	}
 
-	input[type="number"] {
-		-moz-appearance: textfield;
-
-		&::-webkit-outer-spin-button,
-		&::-webkit-inner-spin-button {
-			appearance: none;
-			margin: 0;
-		}
-	}
-
+	input:-webkit-autofill,
 	&.is-active input[type="tel"],
 	&.is-active input[type="url"],
 	&.is-active input[type="text"],
 	&.is-active input[type="number"],
 	&.is-active input[type="email"] {
-		padding: em($gap-large) 0 em($gap-smallest);
+		padding: em($gap + $gap-smaller) em($gap-smaller) em($gap-smaller);
+	}
+
+	&.is-active label,
+	input:-webkit-autofill + label {
+		transform: translateY(em($gap-smaller)) scale(0.875);
 	}
 
 	&.has-error input {
@@ -121,6 +116,7 @@
 
 	&.has-error label {
 		color: $alert-red;
+		opacity: 1;
 
 		.has-dark-controls & {
 			color: color.adjust($alert-red, $lightness: 30%);