@wordpress/base-styles 5.5.0 → 5.7.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 5.7.0 (2024-09-05)
+
+## 5.6.0 (2024-08-21)
+
 ## 5.5.0 (2024-08-07)
 
 ## 5.4.0 (2024-07-24)

package/_animations.scss

@@ -1,5 +1,5 @@
-@mixin edit-post__fade-in-animation($speed: 0.2s, $delay: 0s) {
-	animation: edit-post__fade-in-animation $speed ease-out $delay;
+@mixin edit-post__fade-in-animation($speed: 0.08s, $delay: 0s) {
+	animation: edit-post__fade-in-animation $speed linear $delay;
 	animation-fill-mode: forwards;
 	@include reduce-motion("animation");
 }

package/_colors.scss

@@ -17,7 +17,6 @@ $gray-100: #f0f0f0;		// Used for light gray backgrounds.
 $white: #fff;
 
 // Opacities & additional colors.
-$dark-theme-focus: $white;	// Focus color when the theme is dark.
 $dark-gray-placeholder: rgba($gray-900, 0.62);
 $medium-gray-placeholder: rgba($gray-900, 0.55);
 $light-gray-placeholder: rgba($white, 0.65);
@@ -26,3 +25,6 @@ $light-gray-placeholder: rgba($white, 0.65);
 $alert-yellow: #f0b849;
 $alert-red: #cc1818;
 $alert-green: #4ab866;
+
+// Deprecated, please avoid using these.
+$dark-theme-focus: $white;	// Focus color when the theme is dark.

package/_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;

package/_variables.scss

@@ -47,9 +47,25 @@ $radius-x-small: 1px;   // Applied to elements like buttons nested within primit
 $radius-small: 2px;     // Applied to most primitives.
 $radius-medium: 4px;    // Applied to containers with smaller padding.
 $radius-large: 8px;     // Applied to containers with larger padding.
-$radius-full: 9999px;   // For lozenges.
+$radius-full: 9999px;   // For pills.
 $radius-round: 50%;     // For circles and ovals.
 
+/**
+ * Elevation scale.
+ */
+
+// For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame.
+$elevation-x-small: 0 0.7px 1px rgba($black, 0.1), 0 1.2px 1.7px -0.2px rgba($black, 0.1), 0 2.3px 3.3px -0.5px rgba($black, 0.1);
+
+// For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar.
+$elevation-small: 0 0.7px 1px 0 rgba(0, 0, 0, 0.12), 0 2.2px 3.7px -0.2px rgba(0, 0, 0, 0.12), 0 5.3px 7.3px -0.5px rgba(0, 0, 0, 0.12);
+
+// For components that offer additional actions. Example: Menus, Command Palette
+$elevation-medium: 0 0.7px 1px 0 rgba(0, 0, 0, 0.14), 0 4.2px 5.7px -0.2px rgba(0, 0, 0, 0.14), 0 7.3px 9.3px -0.5px rgba(0, 0, 0, 0.14);
+
+// For components that confirm decisions or handle necessary interruptions. Example: Modals.
+$elevation-large: 0 0.7px 1px rgba($black, 0.15), 0 2.7px 3.8px -0.2px rgba($black, 0.15), 0 5.5px 7.8px -0.3px rgba($black, 0.15), 0.1px 11.5px 16.4px -0.5px rgba($black, 0.15);
+
 /**
  * Dimensions.
  */
@@ -74,14 +90,6 @@ $modal-width-large: 840px;
 $spinner-size: 16px;
 $canvas-padding: $grid-unit-20;
 
-
-/**
- * Shadows.
- */
-
-$shadow-popover: 0 0.7px 1px rgba($black, 0.1), 0 1.2px 1.7px -0.2px rgba($black, 0.1), 0 2.3px 3.3px -0.5px rgba($black, 0.1);
-$shadow-modal: 0 0.7px 1px rgba($black, 0.15), 0 2.7px 3.8px -0.2px rgba($black, 0.15), 0 5.5px 7.8px -0.3px rgba($black, 0.15), 0.1px 11.5px 16.4px -0.5px rgba($black, 0.15);
-
 /**
  * Editor widths.
  */
@@ -107,6 +115,8 @@ $radio-input-size-sm: 24px; // Width & height for small viewports.
 // Deprecated, please avoid using these.
 $block-padding: 14px; // Used to define space between block footprint and surrouding borders.
 $radius-block-ui: $radius-small;
+$shadow-popover: $elevation-x-small;
+$shadow-modal: $elevation-large;
 
 
 /**

package/_z-index.scss

@@ -131,7 +131,6 @@ $z-layers: (
 	".block-editor-template-part__selection-modal": 1000001,
 	".block-editor-block-rename-modal": 1000001,
 	".edit-site-list__rename-modal": 1000001,
-	".dataviews-bulk-actions__modal": 1000001,
 	".dataviews-action-modal": 1000001,
 	".editor-action-modal": 1000001,
 	".editor-post-template__swap-template-modal": 1000001,
@@ -194,7 +193,6 @@ $z-layers: (
 	// Site editor layout
 	".edit-site-page-header": 2,
 	".edit-site-page-content": 1,
-	".edit-site-patterns__dataviews-list-pagination": 2,
 	".edit-site-templates__dataviews-list-pagination": 2,
 	".edit-site-layout__canvas-container": 2,
 	".edit-site-layout__sidebar": 1,
@@ -211,8 +209,8 @@ $z-layers: (
 	// Ensure selection checkbox stays above the preview field.
 	".dataviews-view-grid__card .dataviews-selection-checkbox": 1,
 
-	// Ensure quick actions toolbar appear above pagination
-	".dataviews-bulk-actions-toolbar": 2,
+	// Ensure footer stays above the preview field.
+	".dataviews-footer": 2,
 );
 
 @function z-index( $key ) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/base-styles",
-	"version": "5.5.0",
+	"version": "5.7.0",
 	"description": "Base SCSS utilities and variables for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,5 +27,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c3101ab024e2bfc85d525c6d247e0d57cafc9fd9"
+	"gitHead": "c90d920de07c53dff82c5914635b56fafa503b7f"
 }