@wordpress/base-styles 6.17.1-next.v.202603102151.0 → 6.18.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 6.18.0 (2026-03-18)
+
+### Deprecations
+
+-   Deprecate `$modal-min-width`, `$modal-width-small`, `$modal-width-medium`, and `$modal-width-large` SCSS variables in favor of `--wpds-dimension-surface-width-*` design tokens. Variable values have been updated to align with the token scale ([#76494](https://github.com/WordPress/gutenberg/pull/76494)).
+
 ## 6.17.0 (2026-03-04)
 
 ## 6.16.0 (2026-02-18)

package/_mixins.scss

@@ -689,6 +689,7 @@
 	outline-style: solid;
 	outline-width: calc(#{$widthRatio} * (var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
 	outline-offset: calc(#{$widthRatio} * ((-1 * var(--wp-admin-border-width-focus) ) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
+	box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, #{variables.$border-width-focus-fallback}) + #{variables.$border-width}) colors.$white, 0 0 0 variables.$border-width colors.$white, variables.$elevation-x-small;
 }
 
 @mixin selected-block-focus($widthRatio: 1) {

package/_variables.scss

@@ -105,14 +105,16 @@ $admin-bar-height-big: 46px;
 $admin-sidebar-width: 160px;
 $admin-sidebar-width-big: 190px;
 $admin-sidebar-width-collapsed: 36px;
-$modal-min-width: 350px;
-$modal-width-small: 384px;
-$modal-width-medium: 512px;
-$modal-width-large: 840px;
 $spinner-size: 16px;
 $canvas-padding: $grid-unit-20;
 $palette-max-height: 368px;
 
+// Deprecated, please use --wpds-dimension-surface-width-* design tokens instead.
+$modal-min-width: 320px;
+$modal-width-small: 400px;
+$modal-width-medium: 560px;
+$modal-width-large: 960px;
+
 /**
  * Mobile specific styles
  */

package/_z-index.scss

@@ -137,6 +137,7 @@ $z-layers: (
 	".editor-post-template__swap-template-modal": 1000001,
 	".editor-post-template__create-template-modal": 1000001,
 	".edit-site-template-panel__replace-template-modal": 1000001,
+	".editor-sync-connection-error-modal": 1000001,
 
 	// Note: The ConfirmDialog component's z-index is being set to 1000001 in packages/components/src/confirm-dialog/styles.ts
 	// because it uses emotion and not sass. We need it to render on top its parent popover.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/base-styles",
-	"version": "6.17.1-next.v.202603102151.0+59e17f9ec",
+	"version": "6.18.0",
 	"description": "Base SCSS utilities and variables for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -45,5 +45,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "86db21e727d89e8f0dbba9300d2f97fd22b08693"
+	"gitHead": "c20787b1778ae64c2db65643b1c236309d68e6ba"
 }