Apply radius scale in the editor (#64930)

Co-authored-by: jameskoster <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: jasmussen <[email protected]>
WordPress · Sep 4, 2024 · cd77dd9 · cd77dd9
1 parent 9691105
commit cd77dd9
Show file tree

Hide file tree

Showing 55 changed files with 89 additions and 111 deletions.
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
@@ -74,7 +74,7 @@
 @mixin input-style__neutral() {
 	box-shadow: 0 0 0 transparent;
 	transition: box-shadow 0.1s linear;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	border: $border-width solid $gray-600;
 	@include reduce-motion("transition");
 }
@@ -227,7 +227,7 @@
 	border: $border-width solid $gray-900;
 	margin-right: $grid-unit-15;
 	transition: none;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 
 	&:focus {
 		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus-fallback) var(--wp-admin-theme-color);
@@ -363,7 +363,7 @@
 	&:focus {
 		color: var(--wp-admin-theme-color--rgb);
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 	}
 }
 
@@ -375,7 +375,7 @@
 	padding: $grid-unit-15 !important;
 	border: $border-width solid $gray-900 !important;
 	box-shadow: none !important;
-	border-radius: $radius-block-ui !important;
+	border-radius: $radius-small !important;
 
 	// Fonts smaller than 16px causes mobile safari to zoom.
 	font-size: $mobile-text-min-font-size !important;

diff --git a/packages/block-editor/src/components/block-breadcrumb/style.scss b/packages/block-editor/src/components/block-breadcrumb/style.scss
@@ -41,7 +41,7 @@
 		content: "";
 		display: block;
 		position: absolute;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 		top: $border-width;
 		right: $border-width;
 		bottom: $border-width;

diff --git a/packages/block-editor/src/components/block-draggable/content.scss b/packages/block-editor/src/components/block-draggable/content.scss
@@ -3,7 +3,7 @@
 .block-editor-block-list__layout .is-dragging {
 	background-color: currentColor !important;
 	opacity: 0.05 !important;
-	border-radius: $radius-block-ui !important;
+	border-radius: $radius-small !important;
 
 	// Disabling pointer events during the drag event is necessary,
 	// lest the block might affect your drag operation.

diff --git a/packages/block-editor/src/components/block-draggable/style.scss b/packages/block-editor/src/components/block-draggable/style.scss
@@ -7,7 +7,7 @@
 
 .block-editor-block-draggable-chip {
 	background-color: $gray-900;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	box-shadow: 0 6px 8px rgba($black, 0.3);
 	color: $white;
 	cursor: grabbing;

diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
@@ -107,7 +107,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 			right: 0;
 			left: 0;
 			top: -$default-block-margin * 0.5;
-			border-radius: $radius-block-ui;
+			border-radius: $radius-small;
 			border-top: 4px solid $gray-400;
 			bottom: auto;
 			box-shadow: none;
@@ -215,7 +215,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		right: 0;
 		bottom: 0;
 		left: 0;
-		border-radius: $radius-block-ui;
 		background-color: rgba($white, 0.4);
 	}
 

diff --git a/packages/block-editor/src/components/block-lock/style.scss b/packages/block-editor/src/components/block-lock/style.scss
@@ -41,7 +41,7 @@
 
 	&:hover {
 		background-color: $gray-100;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 	}
 }
 

diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
@@ -76,7 +76,7 @@
 		content: "";
 		position: absolute;
 		display: block;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 		height: $grid-unit-40;
 
 		// Position the focus rectangle.

diff --git a/packages/block-editor/src/components/block-pattern-setup/style.scss b/packages/block-editor/src/components/block-pattern-setup/style.scss
@@ -4,7 +4,7 @@
 	justify-content: center;
 	align-items: flex-start;
 	width: 100%;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 
 	&.view-mode-grid {
 		padding-top: $grid-unit-05;
@@ -60,7 +60,7 @@
 
 				.block-editor-block-preview__container {
 					min-height: 100px;
-					border-radius: $radius-block-ui;
+					border-radius: $radius-medium;
 					border: $border-width solid $gray-300;
 				}
 

diff --git a/packages/block-editor/src/components/block-patterns-list/style.scss b/packages/block-editor/src/components/block-patterns-list/style.scss
@@ -36,12 +36,12 @@
 		display: flex;
 		align-items: center;
 		overflow: hidden;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-medium;
 
 		&::after {
 			outline: $border-width solid rgba($black, 0.1);
 			outline-offset: -$border-width;
-			border-radius: $radius-block-ui;
+			border-radius: $radius-medium;
 		}
 	}
 

diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
@@ -99,7 +99,7 @@
 		width: 300px;
 		border: $border-width solid $gray-900;
 		background: $white;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-medium;
 		outline: none;
 		box-shadow: none;
 		overflow: auto;
@@ -161,7 +161,7 @@
 
 		.block-editor-block-switcher__preview-patterns-container-list__item {
 			height: 100%;
-			border-radius: $radius-block-ui;
+			border-radius: $radius-small;
 			transition: all 0.05s ease-in-out;
 			position: relative;
 			border: $border-width solid transparent;

diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
@@ -63,7 +63,6 @@
 	.block-editor-inserter__toggle.components-button.has-icon {
 		// Basic look
 		background: $gray-900;
-		border-radius: $radius-block-ui;
 		color: $white;
 		padding: 0;
 
@@ -95,7 +94,7 @@
 	z-index: z-index(".block-editor-block-list__block-selection-button");
 
 	// Dark block UI appearance.
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	background-color: $gray-900;
 
 	font-size: $default-font-size;
@@ -188,7 +187,7 @@
 
 	.block-editor-block-contextual-toolbar {
 		border: $border-width solid $gray-900;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 		overflow: visible; // allow the parent selector to be visible
 		position: static;
 		width: auto;

diff --git a/packages/block-editor/src/components/block-variation-transforms/style.scss b/packages/block-editor/src/components/block-variation-transforms/style.scss
@@ -4,7 +4,7 @@
 
 	.components-dropdown-menu__toggle {
 		border: $border-width solid $gray-700;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 		min-height: 30px;
 		width: 100%;
 		position: relative;

diff --git a/packages/block-editor/src/components/button-block-appender/content.scss b/packages/block-editor/src/components/button-block-appender/content.scss
@@ -52,7 +52,6 @@
 			left: 0;
 			pointer-events: none;
 			border: $border-width dashed currentColor;
-			border-radius: $radius-block-ui;
 		}
 
 		.block-editor-inserter {

diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -73,15 +73,15 @@ $swatch-gap: 12px;
 	// Identify the first visible instance as placeholder items will not have this class.
 	&:nth-child(1 of &) {
 		margin-top: $grid-unit-30;
-		border-top-left-radius: $radius-block-ui;
-		border-top-right-radius: $radius-block-ui;
+		border-top-left-radius: $radius-small;
+		border-top-right-radius: $radius-small;
 		border-top: 1px solid $gray-300;
 	}
 
 	// Identify the last visible instance as placeholder items will not have this class.
 	&:nth-last-child(1 of &) {
-		border-bottom-left-radius: $radius-block-ui;
-		border-bottom-right-radius: $radius-block-ui;
+		border-bottom-left-radius: $radius-small;
+		border-bottom-right-radius: $radius-small;
 	}
 
 	> div,

diff --git a/packages/block-editor/src/components/default-block-appender/content.scss b/packages/block-editor/src/components/default-block-appender/content.scss
@@ -48,7 +48,6 @@
 	.block-editor-inserter__toggle.components-button.has-icon {
 		// Basic look
 		background: $gray-900;
-		border-radius: $radius-block-ui;
 		color: $white;
 		padding: 0;
 

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
@@ -39,7 +39,7 @@
 .block-editor-global-styles__shadow-indicator {
 	color: $gray-800;
 	border: $gray-200 $border-width solid;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	cursor: pointer;
 	padding: 0;
 
@@ -207,7 +207,7 @@
 	.components-focal-point-picker-wrapper {
 		background-color: $gray-100;
 		width: 100%;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 		border: $border-width solid $gray-300;
 	}
 

diff --git a/packages/block-editor/src/components/grid/style.scss b/packages/block-editor/src/components/grid/style.scss
@@ -117,7 +117,7 @@
 			content: "";
 			position: absolute;
 			display: block;
-			border-radius: $radius-block-ui;
+			border-radius: $radius-small;
 			height: $grid-unit-40;
 
 			// Position the focus rectangle.

diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss
@@ -43,7 +43,6 @@
 	cursor: pointer;
 	background: transparent;
 	word-break: break-word;
-	border-radius: $radius-block-ui;
 	transition: all 0.05s ease-in-out;
 	@include reduce-motion("transition");
 	position: relative;
@@ -72,7 +71,7 @@
 				bottom: 0;
 				left: 0;
 				right: 0;
-				border-radius: $radius-block-ui;
+				border-radius: $radius-small;
 				opacity: 0.04;
 				background: var(--wp-admin-theme-color);
 				// This fixes drag-and-drop in Firefox.
@@ -97,7 +96,6 @@
 
 .block-editor-block-types-list__item-icon {
 	padding: 12px 20px;
-	border-radius: $radius-block-ui;
 	color: $gray-900;
 	transition: all 0.05s ease-in-out;
 	@include reduce-motion("transition");

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -44,12 +44,12 @@ $block-inserter-tabs-height: 44px;
 
 			&:first-child {
 				border-top: $border-width solid $gray-400;
-				border-radius: $radius-block-ui $radius-block-ui 0 0;
+				border-radius: $radius-medium $radius-medium 0 0;
 			}
 
 			&:last-child {
 				border-bottom: $border-width solid $gray-400;
-				border-radius: 0 0 $radius-block-ui $radius-block-ui;
+				border-radius: 0 0 $radius-medium $radius-medium;
 			}
 
 			&.components-button {
@@ -276,7 +276,7 @@ $block-inserter-tabs-height: 44px;
 				bottom: 0;
 				left: 0;
 				right: 0;
-				border-radius: $radius-block-ui;
+				border-radius: $radius-small;
 				opacity: 0.04;
 				background: var(--wp-admin-theme-color);
 				height: 100%;
@@ -359,7 +359,7 @@ $block-inserter-tabs-height: 44px;
 	min-height: $grid-unit-60 * 3;
 	color: $gray-700;
 	background: $gray-100;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 }
 
 .block-editor-inserter__tips {
@@ -577,7 +577,6 @@ $block-inserter-tabs-height: 44px;
 
 		> button {
 			background: $white;
-			border-radius: $radius-block-ui;
 			display: none;
 
 			// These styles are important so as focus isn't lost
@@ -611,7 +610,6 @@ $block-inserter-tabs-height: 44px;
 			max-width: 100%;
 			outline: $border-width solid rgba($black, 0.1);
 			outline-offset: -$border-width;
-			border-radius: $radius-block-ui;
 		}
 
 		.block-editor-inserter__media-list__item-preview-spinner {

diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
@@ -78,7 +78,6 @@ $block-editor-link-control-number-of-actions: 1;
 		@include input-control;
 		display: block;
 		border: $border-width solid $gray-600;
-		border-radius: $radius-block-ui;
 		height: $button-size-next-default-40px; // components do not properly support unstable-large yet.
 		margin: 0;
 		padding: $grid-unit-10 $button-size-next-default-40px $grid-unit-10 $grid-unit-20;
@@ -230,7 +229,7 @@ $block-editor-link-control-number-of-actions: 1;
 		background-color: $gray-100;
 		width: $grid-unit-40;
 		height: $grid-unit-40;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 	}
 
 	.block-editor-link-control__search-item-icon {
@@ -252,7 +251,6 @@ $block-editor-link-control-number-of-actions: 1;
 	}
 
 	.block-editor-link-control__search-item-title {
-		border-radius: $radius-block-ui;
 		line-height: 1.1;