@wordpress/base-styles 5.23.0 → 6.1.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 6.1.0 (2025-06-04)
+
+## 6.0.0 (2025-05-22)
+
+### Breaking Changes
+
+-   This package now requires [Dart Sass](https://www.npmjs.com/package/sass) to compile. Legacy Sass compilers like [LibSass](https://sass-lang.com/blog/libsass-is-deprecated/) ([`node-sass`](https://www.npmjs.com/package/node-sass)) and [Ruby Sass](https://sass-lang.com/blog/ruby-sass-is-unsupported/) are no longer supported ([#70135](https://github.com/WordPress/gutenberg/pull/70135)).
+
 ## 5.23.0 (2025-05-07)
 
 ## 5.22.0 (2025-04-11)

package/README.md

@@ -2,6 +2,8 @@
 
 Base SCSS utilities and variables for WordPress.
 
+Note: This package requires [Dart Sass](https://www.npmjs.com/package/sass) to compile. When using this package, make sure you are using Sass version 1.23.0 or later, which is based on Dart Sass.
+
 ## Installation
 
 Install the module
@@ -10,33 +12,29 @@ Install the module
 npm install @wordpress/base-styles --save-dev
 ```
 
-## Use
-
-### SCSS utilities and variables
+## Usage
 
 In your application's SCSS file, include styles like so:
 
 ```scss
-@import 'node_modules/@wordpress/base-styles/colors';
-@import 'node_modules/@wordpress/base-styles/variables';
-@import 'node_modules/@wordpress/base-styles/mixins';
-@import 'node_modules/@wordpress/base-styles/breakpoints';
-@import 'node_modules/@wordpress/base-styles/animations';
-@import 'node_modules/@wordpress/base-styles/z-index';
-@import 'node_modules/@wordpress/base-styles/default-custom-properties';
+@use '@wordpress/base-styles/colors';
+@use '@wordpress/base-styles/variables';
+@use '@wordpress/base-styles/mixins';
+@use '@wordpress/base-styles/breakpoints';
+@use '@wordpress/base-styles/animations';
+@use '@wordpress/base-styles/z-index';
+@use '@wordpress/base-styles/default-custom-properties';
 ```
 
-If you use [Webpack](https://webpack.js.org/) for your SCSS pipeline, you can use `~` to resolve to `node_modules`:
+Make sure to use namespaces when accessing utilities, variables, functions, etc. For example:
 
 ```scss
-@import '~@wordpress/base-styles/colors';
-```
-
-To make that work with [`sass`](https://www.npmjs.com/package/sass) or [`node-sass`](https://www.npmjs.com/package/node-sass) NPM modules without Webpack, you'd have to use [includePaths option](https://sass-lang.com/documentation/js-api#includepaths):
+.selector {
+	color: colors.$gray-300;
 
-```json
-{
-	"includePaths": [ "node_modules" ]
+	@include mixins.break-medium() {
+		font-size: variables.$font-size-large;
+	}
 }
 ```
 

package/_colors.native.scss

@@ -1,5 +1,7 @@
 /** @format */
 
+@use "sass:color";
+
 // Hugo's new WordPress shades of gray, from http://codepen.io/hugobaeta/pen/grJjVp.
 $black: #000;
 $white: #fff;
@@ -41,23 +43,23 @@ $blue-30: #5198d9;
 
 // Grays
 $gray: #87a6bc;
-$gray-light: lighten($gray, 33%); //#f3f6f8
-$gray-dark: darken($gray, 38%); //#2e4453
+$gray-light: color.adjust($gray, $lightness: 33%); //#f3f6f8
+$gray-dark: color.adjust($gray, $lightness: -38%); //#2e4453
 $gray-900: #1a1a1a;
 $gray-700: #757575;
 
 // $gray-text: ideal for standard, non placeholder text
 // $gray-text-min: minimum contrast needed for WCAG 2.0 AA on white background
 $gray-text: $gray-dark;
-$gray-text-min: darken($gray, 18%); //#537994
+$gray-text-min: color.adjust($gray, $lightness: -18%); //#537994
 
 // Shades of gray
-$gray-lighten-10: lighten($gray, 10%); // #a8bece
-$gray-lighten-20: lighten($gray, 20%); // #c8d7e1
-$gray-lighten-30: lighten($gray, 30%); // #e9eff3
-$gray-darken-10: darken($gray, 10%);
-$gray-darken-20: darken($gray, 20%); // #4f748e
-$gray-darken-30: darken($gray, 30%); // #3d596d
+$gray-lighten-10: color.adjust($gray, $lightness: 10%); // #a8bece
+$gray-lighten-20: color.adjust($gray, $lightness: 20%); // #c8d7e1
+$gray-lighten-30: color.adjust($gray, $lightness: 30%); // #e9eff3
+$gray-darken-10: color.adjust($gray, $lightness: -10%);
+$gray-darken-20: color.adjust($gray, $lightness: -20%); // #4f748e
+$gray-darken-30: color.adjust($gray, $lightness: -30%); // #3d596d
 
 // Custom
 $toolbar-button: #7b9ab1;

package/_colors.scss

@@ -1,5 +1,3 @@
-@import "./functions";
-
 /**
  * Colors
  */

package/_default-custom-properties.scss

@@ -1,11 +1,14 @@
+@use "./mixins";
+@use "./functions";
+
 // It is important to include these styles in all built stylesheets.
 // This allows to CSS variables post CSS plugin to generate fallbacks.
 // It also provides default CSS variables for npm package consumers.
 :root {
-	@include admin-scheme(#007cba);
 	--wp-block-synced-color: #7a00df;
-	--wp-block-synced-color--rgb: #{hex-to-rgb(#7a00df)};
+	--wp-block-synced-color--rgb: #{functions.hex-to-rgb(#7a00df)};
 	// This CSS variable is not used in Gutenberg project,
 	// but is maintained for backwards compatibility.
 	--wp-bound-block-color: var(--wp-block-synced-color);
+	@include mixins.admin-scheme(#007cba);
 }

package/_functions.scss

@@ -4,6 +4,21 @@
 * @param {string} hex - the hexadecimal value to convert
 * @return {string} comma separated rgb values
 */
+
+@use "sass:color";
+@use "sass:meta";
+
 @function hex-to-rgb($hex) {
-	@return red($hex), green($hex), blue($hex);
+	/*
+	 * TODO: `color.{red|green|blue}` will trigger a deprecation warning in Dart Sass,
+	 * but the Sass used by the Gutenberg project doesn't support `color.channel()` yet,
+	 * so we can't migrate to it at this time.
+	 * In the future, after the Gutenberg project has been fully migrated to Dart Sass,
+	 * Remove this conditional statement and use only `color.channel()`.
+	 */
+	@if meta.function-exists("channel", "color") {
+		@return color.channel($hex, "red"), color.channel($hex, "green"), color.channel($hex, "blue");
+	} @else {
+		@return color.red($hex), color.green($hex), color.blue($hex);
+	}
 }

package/_mixins.scss

@@ -1,72 +1,77 @@
-@import "./functions";
-@import "./long-content-fade";
-
 /**
  * Typography
  */
 
+@use "sass:color";
+@use "sass:math";
+@use "./variables";
+@use "./colors";
+@use "./breakpoints";
+@use "./functions";
+@use "./long-content-fade";
+
 @mixin _text-heading() {
-	font-family: $font-family-headings;
-	font-weight: $font-weight-medium;
+	font-family: variables.$font-family-headings;
+	font-weight: variables.$font-weight-medium;
 }
 
 @mixin _text-body() {
-	font-family: $font-family-body;
-	font-weight: $font-weight-regular;
+	font-family: variables.$font-family-body;
+	font-weight: variables.$font-weight-regular;
 }
 
 @mixin heading-small() {
 	@include _text-heading();
-	font-size: $font-size-x-small;
-	line-height: $font-line-height-x-small;
+	font-size: variables.$font-size-x-small;
+	line-height: variables.$font-line-height-x-small;
 }
 
 @mixin heading-medium() {
 	@include _text-heading();
-	font-size: $font-size-medium;
-	line-height: $font-line-height-small;
+	font-size: variables.$font-size-medium;
+	line-height: variables.$font-line-height-small;
 }
 
 @mixin heading-large() {
 	@include _text-heading();
-	font-size: $font-size-large;
-	line-height: $font-line-height-small;
+	font-size: variables.$font-size-large;
+	line-height: variables.$font-line-height-small;
 }
 
 @mixin heading-x-large() {
 	@include _text-heading();
-	font-size: $font-size-x-large;
-	line-height: $font-line-height-medium;
+	font-size: variables.$font-size-x-large;
+	line-height: variables.$font-line-height-medium;
 }
 
 @mixin heading-2x-large() {
 	@include _text-heading();
-	font-size: $font-size-2x-large;
-	line-height: $font-line-height-2x-large;
+	font-size: variables.$font-size-2x-large;
+	line-height: variables.$font-line-height-2x-large;
 }
 
 @mixin body-small() {
 	@include _text-body();
-	font-size: $font-size-small;
-	line-height: $font-line-height-x-small;
+	font-size: variables.$font-size-small;
+	line-height: variables.$font-line-height-x-small;
 }
 
 @mixin body-medium() {
 	@include _text-body();
-	font-size: $font-size-medium;
-	line-height: $font-line-height-small;
+	font-size: variables.$font-size-medium;
+	line-height: variables.$font-line-height-small;
 }
 
 @mixin body-large() {
 	@include _text-body();
-	font-size: $font-size-large;
-	line-height: $font-line-height-medium;
+	font-size: variables.$font-size-large;
+	line-height: variables.$font-line-height-medium;
 }
 
 @mixin body-x-large() {
 	@include _text-body();
-	font-size: $font-size-x-large;
-	line-height: $font-line-height-x-large;
+	font-size: variables.$font-size-x-large;
+	line-height: variables.$font-line-height-x-large;
 }
 
 /**
@@ -74,55 +79,55 @@
  */
 
 @mixin break-xhuge() {
-	@media (min-width: #{ ($break-xhuge) }) {
+	@media (min-width: #{ (breakpoints.$break-xhuge) }) {
 		@content;
 	}
 }
 
 @mixin break-huge() {
-	@media (min-width: #{ ($break-huge) }) {
+	@media (min-width: #{ (breakpoints.$break-huge) }) {
 		@content;
 	}
 }
 
 @mixin break-wide() {
-	@media (min-width: #{ ($break-wide) }) {
+	@media (min-width: #{ (breakpoints.$break-wide) }) {
 		@content;
 	}
 }
 
 @mixin break-xlarge() {
-	@media (min-width: #{ ($break-xlarge) }) {
+	@media (min-width: #{ (breakpoints.$break-xlarge) }) {
 		@content;
 	}
 }
 
 @mixin break-large() {
-	@media (min-width: #{ ($break-large) }) {
+	@media (min-width: #{ (breakpoints.$break-large) }) {
 		@content;
 	}
 }
 
 @mixin break-medium() {
-	@media (min-width: #{ ($break-medium) }) {
+	@media (min-width: #{ (breakpoints.$break-medium) }) {
 		@content;
 	}
 }
 
 @mixin break-small() {
-	@media (min-width: #{ ($break-small) }) {
+	@media (min-width: #{ (breakpoints.$break-small) }) {
 		@content;
 	}
 }
 
 @mixin break-mobile() {
-	@media (min-width: #{ ($break-mobile) }) {
+	@media (min-width: #{ (breakpoints.$break-mobile) }) {
 		@content;
 	}
 }
 
 @mixin break-zoomed-in() {
-	@media (min-width: #{ ($break-zoomed-in) }) {
+	@media (min-width: #{ (breakpoints.$break-zoomed-in) }) {
 		@content;
 	}
 }
@@ -132,7 +137,7 @@
  */
 
 @mixin block-toolbar-button-style__focus() {
-	box-shadow: inset 0 0 0 $border-width $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	box-shadow: inset 0 0 0 variables.$border-width colors.$white, 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: 2px solid transparent;
@@ -141,13 +146,12 @@
 // Tabs, Inputs, Square buttons.
 @mixin input-style__neutral() {
 	box-shadow: 0 0 0 transparent;
+	border-radius: variables.$radius-small;
+	border: variables.$border-width solid colors.$gray-600;
 
 	@media not (prefers-reduced-motion) {
 		transition: box-shadow 0.1s linear;
 	}
-
-	border-radius: $radius-small;
-	border: $border-width solid $gray-600;
 }
 
 
@@ -168,7 +172,7 @@
 
 
 @mixin button-style-outset__focus($focus-color) {
-	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $white, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) $focus-color;
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) colors.$white, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) $focus-color;
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
@@ -184,18 +188,18 @@
 	#{$selector} { /* Set left position when auto-fold is not on the body element. */
 		left: 0;
 
-		@media (min-width: #{ ($break-medium + 1) }) {
-			left: $admin-sidebar-width;
+		@media (min-width: #{ (breakpoints.$break-medium + 1) }) {
+			left: variables.$admin-sidebar-width;
 		}
 	}
 
 	.auto-fold #{$selector} { /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
-		@media (min-width: #{ ($break-medium + 1) }) {
-			left: $admin-sidebar-width-collapsed;
+		@media (min-width: #{ (breakpoints.$break-medium + 1) }) {
+			left: variables.$admin-sidebar-width-collapsed;
 		}
 
-		@media (min-width: #{ ($break-large + 1) }) {
-			left: $admin-sidebar-width;
+		@media (min-width: #{ (breakpoints.$break-large + 1) }) {
+			left: variables.$admin-sidebar-width;
 		}
 	}
 
@@ -203,8 +207,8 @@
 	.folded #{$selector} {
 		left: 0;
 
-		@media (min-width: #{ ($break-medium + 1) }) {
-			left: $admin-sidebar-width-collapsed;
+		@media (min-width: #{ (breakpoints.$break-medium + 1) }) {
+			left: variables.$admin-sidebar-width-collapsed;
 		}
 	}
 
@@ -225,11 +229,11 @@
 
 @mixin caption-style-theme() {
 	color: #555;
-	font-size: $default-font-size;
+	font-size: variables.$default-font-size;
 	text-align: center;
 
 	.is-dark-theme & {
-		color: $light-gray-placeholder;
+		color: colors.$light-gray-placeholder;
 	}
 }
 
@@ -260,16 +264,16 @@
 }
 
 @mixin input-control($accent-color: var(--wp-admin-theme-color)) {
-	font-family: $default-font;
+	font-family: variables.$default-font;
 	padding: 6px 8px;
-	@include input-style__neutral();
-
 	/* Fonts smaller than 16px causes mobile safari to zoom. */
-	font-size: $mobile-text-min-font-size;
+	font-size: variables.$mobile-text-min-font-size;
 	/* Override core line-height. To be reviewed. */
 	line-height: normal;
+	@include input-style__neutral();
+
 	@include break-small {
-		font-size: $default-font-size;
+		font-size: variables.$default-font-size;
 		/* Override core line-height. To be reviewed. */
 		line-height: normal;
 	}
@@ -280,27 +284,27 @@
 
 	// Use opacity to work in various editor styles.
 	&::-webkit-input-placeholder {
-		color: $dark-gray-placeholder;
+		color: colors.$dark-gray-placeholder;
 	}
 
 	&::-moz-placeholder {
-		color: $dark-gray-placeholder;
+		color: colors.$dark-gray-placeholder;
 	}
 
 	&:-ms-input-placeholder {
-		color: $dark-gray-placeholder;
+		color: colors.$dark-gray-placeholder;
 	}
 }
 
 @mixin checkbox-control {
-	@include input-control;
-	border: $border-width solid $gray-900;
-	margin-right: $grid-unit-15;
+	border: variables.$border-width solid colors.$gray-900;
+	margin-right: variables.$grid-unit-15;
 	transition: none;
-	border-radius: $radius-small;
+	border-radius: variables.$radius-small;
+	@include input-control;
 
 	&: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);
+		box-shadow: 0 0 0 (variables.$border-width * 2) colors.$white, 0 0 0 (variables.$border-width * 2 + variables.$border-width-focus-fallback) var(--wp-admin-theme-color);
 
 		// Only visible in Windows High Contrast mode.
 		outline: 2px solid transparent;
@@ -319,7 +323,7 @@
 	&:checked::before,
 	&[aria-checked="mixed"]::before {
 		margin: -3px -5px;
-		color: $white;
+		color: colors.$white;
 
 		@include break-medium() {
 			margin: -4px 0 0 -5px;
@@ -353,8 +357,8 @@
 
 	&[aria-disabled="true"],
 	&:disabled {
-		background: $gray-100;
-		border-color: $gray-300;
+		background: colors.$gray-100;
+		border-color: colors.$gray-300;
 		cursor: default;
 
 		// Override style inherited from wp-admin. Required to avoid degraded appearance on different backgrounds.
@@ -363,46 +367,49 @@
 }
 
 @mixin radio-control {
-	@include input-control;
-	border: $border-width solid $gray-900;
-	margin-right: $grid-unit-15;
+	border: variables.$border-width solid colors.$gray-900;
+	margin-right: variables.$grid-unit-15;
 	transition: none;
-	border-radius: $radius-round;
-	width: $radio-input-size-sm;
-	height: $radio-input-size-sm;
-	min-width: $radio-input-size-sm;
-	max-width: $radio-input-size-sm;
+	border-radius: variables.$radius-round;
+	width: variables.$radio-input-size-sm;
+	height: variables.$radio-input-size-sm;
+	min-width: variables.$radio-input-size-sm;
+	max-width: variables.$radio-input-size-sm;
 	position: relative;
 
+	@media not (prefers-reduced-motion) {
+		transition: box-shadow 0.1s linear;
+	}
+
 	@include break-small() {
-		height: $radio-input-size;
-		width: $radio-input-size;
-		min-width: $radio-input-size;
-		max-width: $radio-input-size;
+		height: variables.$radio-input-size;
+		width: variables.$radio-input-size;
+		min-width: variables.$radio-input-size;
+		max-width: variables.$radio-input-size;
 	}
 
 	&:checked::before {
 		box-sizing: inherit;
-		width: math.div($radio-input-size-sm, 2);
-		height: math.div($radio-input-size-sm, 2);
+		width: math.div(variables.$radio-input-size-sm, 2);
+		height: math.div(variables.$radio-input-size-sm, 2);
 		position: absolute;
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 		margin: 0;
-		background-color: $white;
+		background-color: colors.$white;
 
 		// This border serves as a background color in Windows High Contrast mode.
-		border: 4px solid $white;
+		border: 4px solid colors.$white;
 
 		@include break-small() {
-			width: math.div($radio-input-size, 2);
-			height: math.div($radio-input-size, 2);
+			width: math.div(variables.$radio-input-size, 2);
+			height: math.div(variables.$radio-input-size, 2);
 		}
 	}
 
 	&: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);
+		box-shadow: 0 0 0 (variables.$border-width * 2) colors.$white, 0 0 0 (variables.$border-width * 2 + variables.$border-width-focus-fallback) var(--wp-admin-theme-color);
 
 		// Only visible in Windows High Contrast mode.
 		outline: 2px solid transparent;
@@ -433,29 +440,29 @@
 	&: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-small;
+		border-radius: variables.$radius-small;
 	}
 }
 
 // The editor input reset with increased specificity to avoid theme styles bleeding in.
 @mixin editor-input-reset() {
-	font-family: $editor-html-font !important;
-	color: $gray-900 !important;
-	background: $white !important;
-	padding: $grid-unit-15 !important;
-	border: $border-width solid $gray-900 !important;
+	font-family: variables.$editor-html-font !important;
+	color: colors.$gray-900 !important;
+	background: colors.$white !important;
+	padding: variables.$grid-unit-15 !important;
+	border: variables.$border-width solid colors.$gray-900 !important;
 	box-shadow: none !important;
-	border-radius: $radius-small !important;
+	border-radius: variables.$radius-small !important;
 
 	// Fonts smaller than 16px causes mobile safari to zoom.
-	font-size: $mobile-text-min-font-size !important;
+	font-size: variables.$mobile-text-min-font-size !important;
 	@include break-small {
-		font-size: $default-font-size !important;
+		font-size: variables.$default-font-size !important;
 	}
 
 	&:focus {
 		border-color: var(--wp-admin-theme-color) !important;
-		box-shadow: 0 0 0 ($border-width-focus-fallback - $border-width) var(--wp-admin-theme-color) !important;
+		box-shadow: 0 0 0 (variables.$border-width-focus-fallback - variables.$border-width) var(--wp-admin-theme-color) !important;
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent !important;
@@ -467,7 +474,7 @@
  */
 
 @mixin wp-admin-reset( $content-container ) {
-	background: $white;
+	background: colors.$white;
 
 	#wpcontent {
 		padding-left: 0;
@@ -494,7 +501,7 @@
 
 	ul#adminmenu a.wp-has-current-submenu::after,
 	ul#adminmenu > li.current > a.current::after {
-		border-right-color: $white;
+		border-right-color: colors.$white;
 	}
 
 	.media-frame select.attachment-filters:last-of-type {
@@ -507,12 +514,12 @@
 	// Define RGB equivalents for use in rgba function.
 	// Hexadecimal css vars do not work in the rgba function.
 	--wp-admin-theme-color: #{$color-primary};
-	--wp-admin-theme-color--rgb: #{hex-to-rgb($color-primary)};
+	--wp-admin-theme-color--rgb: #{functions.hex-to-rgb($color-primary)};
 	// Darker shades.
-	--wp-admin-theme-color-darker-10: #{darken($color-primary, 5%)};
-	--wp-admin-theme-color-darker-10--rgb: #{hex-to-rgb(darken($color-primary, 5%))};
-	--wp-admin-theme-color-darker-20: #{darken($color-primary, 10%)};
-	--wp-admin-theme-color-darker-20--rgb: #{hex-to-rgb(darken($color-primary, 10%))};
+	--wp-admin-theme-color-darker-10: #{color.adjust($color-primary, $lightness: -5%)};
+	--wp-admin-theme-color-darker-10--rgb: #{functions.hex-to-rgb(color.adjust($color-primary, $lightness: -5%))};
+	--wp-admin-theme-color-darker-20: #{color.adjust($color-primary, $lightness: -10%)};
+	--wp-admin-theme-color-darker-20--rgb: #{functions.hex-to-rgb(color.adjust($color-primary, $lightness: -10%))};
 
 	// Focus style width.
 	// Avoid rounding issues by showing a whole 2px for 1x screens, and 1.5px on high resolution screens.

package/_variables.scss

@@ -6,7 +6,7 @@
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
 
-@import "./colors";
+@use "./colors";
 
 /**
  * Fonts & basic variables.
@@ -77,16 +77,16 @@ $radius-round: 50%;     // For circles and ovals.
  */
 
 // For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame.
-$elevation-x-small: 0 1px 1px rgba($black, 0.03), 0 1px 2px rgba($black, 0.02), 0 3px 3px rgba($black, 0.02), 0 4px 4px rgba($black, 0.01);
+$elevation-x-small: 0 1px 1px rgba(colors.$black, 0.03), 0 1px 2px rgba(colors.$black, 0.02), 0 3px 3px rgba(colors.$black, 0.02), 0 4px 4px rgba(colors.$black, 0.01);
 
 // For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar.
-$elevation-small: 0 1px 2px rgba($black, 0.05), 0 2px 3px rgba($black, 0.04), 0 6px 6px rgba($black, 0.03), 0 8px 8px rgba($black, 0.02);
+$elevation-small: 0 1px 2px rgba(colors.$black, 0.05), 0 2px 3px rgba(colors.$black, 0.04), 0 6px 6px rgba(colors.$black, 0.03), 0 8px 8px rgba(colors.$black, 0.02);
 
 // For components that offer additional actions. Example: Menus, Command Palette
-$elevation-medium: 0 2px 3px rgba($black, 0.05), 0 4px 5px rgba($black, 0.04), 0 12px 12px rgba($black, 0.03), 0 16px 16px rgba($black, 0.02);
+$elevation-medium: 0 2px 3px rgba(colors.$black, 0.05), 0 4px 5px rgba(colors.$black, 0.04), 0 12px 12px rgba(colors.$black, 0.03), 0 16px 16px rgba(colors.$black, 0.02);
 
 // For components that confirm decisions or handle necessary interruptions. Example: Modals.
-$elevation-large: 0 5px 15px rgba($black, 0.08), 0 15px 27px rgba($black, 0.07), 0 30px 36px rgba($black, 0.04), 0 50px 43px rgba($black, 0.02);
+$elevation-large: 0 5px 15px rgba(colors.$black, 0.08), 0 15px 27px rgba(colors.$black, 0.07), 0 30px 36px rgba(colors.$black, 0.04), 0 50px 43px rgba(colors.$black, 0.02);
 
 /**
  * Dimensions.

package/_z-index.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 // Stores a list of z-index values in a central location.  For clarity, when a
 // specific value is needed, add a comment explaining why (what other rules the
 // value is designed to work with).
@@ -217,8 +219,8 @@ $z-layers: (
 );
 
 @function z-index( $key ) {
-	@if map-has-key( $z-layers, $key ) {
-		@return map-get( $z-layers, $key );
+	@if map.has-key( $z-layers, $key ) {
+		@return map.get( $z-layers, $key );
 	}
 
 	@error "Error: Specified z-index `#{$key}` does not exist in the mapping";

package/build-style/admin-schemes-rtl.css

@@ -1,15 +1,57 @@
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
 /**
  * Colors
  */
 /**
  * Breakpoints & Media Queries
  */
+/**
+ * Colors
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Colors
+ */
 /**
  * SCSS Variables.
  *
@@ -17,15 +59,91 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Breakpoints & Media Queries
+ */
 /**
 *  Converts a hex value into the rgb equivalent.
 *
 * @param {string} hex - the hexadecimal value to convert
 * @return {string} comma separated rgb values
 */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Typography
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
 /**
  * Colors
  */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
 /**
  * Fonts & basic variables.
  */
@@ -61,6 +179,9 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+/**
+ * Breakpoints & Media Queries
+ */
 /**
 *  Converts a hex value into the rgb equivalent.
 *
@@ -99,6 +220,9 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 :root {
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: var(--wp-block-synced-color);
   --wp-admin-theme-color: #007cba;
   --wp-admin-theme-color--rgb: 0, 124, 186;
   --wp-admin-theme-color-darker-10: #006ba1;
@@ -106,9 +230,6 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
-  --wp-block-synced-color: #7a00df;
-  --wp-block-synced-color--rgb: 122, 0, 223;
-  --wp-bound-block-color: var(--wp-block-synced-color);
 }
 @media (min-resolution: 192dpi) {
   :root {

package/build-style/admin-schemes.css

@@ -1,15 +1,57 @@
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
 /**
  * Colors
  */
 /**
  * Breakpoints & Media Queries
  */
+/**
+ * Colors
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Colors
+ */
 /**
  * SCSS Variables.
  *
@@ -17,15 +59,91 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Breakpoints & Media Queries
+ */
 /**
 *  Converts a hex value into the rgb equivalent.
 *
 * @param {string} hex - the hexadecimal value to convert
 * @return {string} comma separated rgb values
 */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Typography
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
 /**
  * Colors
  */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
 /**
  * Fonts & basic variables.
  */
@@ -61,6 +179,9 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+/**
+ * Breakpoints & Media Queries
+ */
 /**
 *  Converts a hex value into the rgb equivalent.
 *
@@ -99,6 +220,9 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 :root {
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: var(--wp-block-synced-color);
   --wp-admin-theme-color: #007cba;
   --wp-admin-theme-color--rgb: 0, 124, 186;
   --wp-admin-theme-color-darker-10: #006ba1;
@@ -106,9 +230,6 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
-  --wp-block-synced-color: #7a00df;
-  --wp-block-synced-color--rgb: 122, 0, 223;
-  --wp-bound-block-color: var(--wp-block-synced-color);
 }
 @media (min-resolution: 192dpi) {
   :root {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/base-styles",
-	"version": "5.23.0",
+	"version": "6.1.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": "ab5c79cd40adbb68898536c50e035b0a734338ea"
+	"gitHead": "d1acd76ffff33ab01f0a948d2f51e5e45c95158d"
 }