@wordpress/edit-site 4.9.0 → 4.12.0

package/src/components/add-new-template/style.scss

@@ -12,33 +12,45 @@
 
 .edit-site-custom-template-modal {
 	&__contents {
-		> div {
-			text-align: center;
-			cursor: pointer;
+		> .components-button {
 			padding: $grid-unit-30;
-			border: 1px solid $gray-300;
+			box-shadow: inset 0 0 0 $border-width $gray-600;
 			border-radius: $radius-block-ui;
 			width: 256px;
+			height: auto;
 			display: flex;
 			flex-direction: column;
 			gap: $grid-unit;
-			align-items: center;
-			justify-content: center;
+
+			// Show the boundary of the button, in High Contrast Mode.
+			outline: 1px solid transparent;
+
+			span:first-child {
+				color: $gray-900;
+			}
 
 			span {
 				color: $gray-700;
 			}
 
 			&:hover {
-				border-color: var(--wp-admin-theme-color);
+				color: var(--wp-admin-theme-color-darker-10);
+				box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color-darker-10);
 
-				h5 {
+				span:first-child {
 					color: var(--wp-admin-theme-color);
 				}
 			}
 
 			&:focus {
 				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+				// Windows High Contrast mode will show this outline, but not the box-shadow.
+				outline: 3px solid transparent;
+
+				span:first-child {
+					color: var(--wp-admin-theme-color);
+				}
 			}
 		}
 	}
@@ -125,3 +137,24 @@
 	margin-bottom: 0;
 	margin-top: $grid-unit-20;
 }
+
+
+.edit-site-custom-generic-template__modal {
+	.components-base-control {
+		@include break-medium() {
+			width: $grid-unit * 40;
+		}
+	}
+
+	.components-modal__header {
+		border-bottom: none;
+	}
+
+	.components-modal__content::before {
+		margin-bottom: $grid-unit-05;
+	}
+}
+
+.edit-site-custom-generic-template__modal-actions {
+	margin-top: $grid-unit-15;
+}