@wordpress/components 30.6.1 → 30.7.0

package/build-types/focal-point-picker/styles/focal-point-picker-style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focal-point-picker-style.d.ts","sourceRoot":"","sources":["../../../src/focal-point-picker/styles/focal-point-picker-style.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AAG9D,eAAO,MAAM,YAAY;;SAOH,MAAQ,WAAU;yGAFvC,CAAC;AAEF,eAAO,MAAM,cAAc;;SAAL,MAAQ,WAAU;yGAmCvC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;SArCP,MAAQ,WAAU;yGA6CvC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;UAE7B,CAAC;AAsBF,eAAO,MAAM,cAAc;;;;0CAM1B,CAAC;AAEF,eAAO,MAAM,QAAQ;;SA/EC,MAAQ,WAAU;;kBA4FQ,OAAO;yGAEtD,CAAC;AAEF,eAAO,MAAM,QAAQ;;SAhGC,MAAQ,WAAU;yGAqGvC,CAAC;AAEF,eAAO,MAAM,SAAS;;SAvGA,MAAQ,WAAU;;;UA2GvC,CAAC;AAEF,eAAO,MAAM,SAAS;;SA7GA,MAAQ,WAAU;;;UAiHvC,CAAC"}
+{"version":3,"file":"focal-point-picker-style.d.ts","sourceRoot":"","sources":["../../../src/focal-point-picker/styles/focal-point-picker-style.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AAG9D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAOrB,CAAC;AAEF,eAAO,MAAM,YAAY;;SALX,MAAO,WAAW;yGAU/B,CAAC;AAEF,eAAO,MAAM,cAAc;;SAZb,MAAO,WAAW;yGA+C/B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;SAjDf,MAAO,WAAW;yGAyD/B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;UAE7B,CAAC;AAsBF,eAAO,MAAM,cAAc;;;;0CAM1B,CAAC;AAEF,eAAO,MAAM,QAAQ;;SA3FP,MAAO,WAAW;;kBAwGgB,OAAO;yGAEtD,CAAC;AAEF,eAAO,MAAM,QAAQ;;SA5GP,MAAO,WAAW;yGAiH/B,CAAC;AAEF,eAAO,MAAM,SAAS;;SAnHR,MAAO,WAAW;;;UAuH/B,CAAC;AAEF,eAAO,MAAM,SAAS;;SAzHR,MAAO,WAAW;;;UA6H/B,CAAC"}

package/build-types/popover/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/popover/index.tsx"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,KAAK,EACX,YAAY,EAGZ,gBAAgB,EAChB,MAAM,SAAS,CAAC;AAIjB;;;;GAIG;AACH,eAAO,MAAM,SAAS,YAAY,CAAC;AAuanC,eAAO,MAAM,WAAW,6GAWvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,OAAO;IAGlB;;OAEG;;;;IAIH;;;;OAIG;;;;CAKJ,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/popover/index.tsx"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,KAAK,EACX,YAAY,EAGZ,gBAAgB,EAChB,MAAM,SAAS,CAAC;AAIjB;;;;GAIG;AACH,eAAO,MAAM,SAAS,YAAY,CAAC;AA4bnC,eAAO,MAAM,WAAW,6GAWvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,OAAO;IAGlB;;OAEG;;;;IAIH;;;;OAIG;;;;CAKJ,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/build-types/utils/base-label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-label.d.ts","sourceRoot":"","sources":["../../src/utils/base-label.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,mBAAmB,2CAK/B,CAAC"}
+{"version":3,"file":"base-label.d.ts","sourceRoot":"","sources":["../../src/utils/base-label.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,mBAAmB,2CAK/B,CAAC"}

package/build-types/utils/config-values.d.ts

@@ -37,6 +37,7 @@ declare const _default: {
     fontSizeXSmall: string;
     fontLineHeightBase: string;
     fontWeight: string;
+    fontWeightMedium: string;
     fontWeightHeading: string;
     gridBase: string;
     cardPaddingXSmall: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "30.6.1",
+	"version": "30.7.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -54,24 +54,24 @@
 		"@types/gradient-parser": "1.1.0",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.33.1",
-		"@wordpress/base-styles": "^6.9.1",
-		"@wordpress/compose": "^7.33.1",
-		"@wordpress/date": "^5.33.1",
-		"@wordpress/deprecated": "^4.33.1",
-		"@wordpress/dom": "^4.33.1",
-		"@wordpress/element": "^6.33.1",
-		"@wordpress/escape-html": "^3.33.1",
-		"@wordpress/hooks": "^4.33.1",
-		"@wordpress/html-entities": "^4.33.1",
-		"@wordpress/i18n": "^6.6.1",
-		"@wordpress/icons": "^11.0.1",
-		"@wordpress/is-shallow-equal": "^5.33.1",
-		"@wordpress/keycodes": "^4.33.1",
-		"@wordpress/primitives": "^4.33.1",
-		"@wordpress/private-apis": "^1.33.1",
-		"@wordpress/rich-text": "^7.33.1",
-		"@wordpress/warning": "^3.33.1",
+		"@wordpress/a11y": "^4.34.0",
+		"@wordpress/base-styles": "^6.10.0",
+		"@wordpress/compose": "^7.34.0",
+		"@wordpress/date": "^5.34.0",
+		"@wordpress/deprecated": "^4.34.0",
+		"@wordpress/dom": "^4.34.0",
+		"@wordpress/element": "^6.34.0",
+		"@wordpress/escape-html": "^3.34.0",
+		"@wordpress/hooks": "^4.34.0",
+		"@wordpress/html-entities": "^4.34.0",
+		"@wordpress/i18n": "^6.7.0",
+		"@wordpress/icons": "^11.1.0",
+		"@wordpress/is-shallow-equal": "^5.34.0",
+		"@wordpress/keycodes": "^4.34.0",
+		"@wordpress/primitives": "^4.34.0",
+		"@wordpress/private-apis": "^1.34.0",
+		"@wordpress/rich-text": "^7.34.0",
+		"@wordpress/warning": "^3.34.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -97,5 +97,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5f84bafdec1bed05247c1080c12f6a237951b862"
+	"gitHead": "ceebff807958d2e8fc755b5a20473939c78b4d1d"
 }

package/src/button/style.scss

@@ -15,13 +15,14 @@
 	text-decoration: none;
 	font-family: inherit;
 	font-size: $default-font-size;
+	font-weight: $font-weight-medium;
 	margin: 0;
 	border: 0;
 	cursor: pointer;
 	-webkit-appearance: none;
 	background: none;
 
-	@media not (prefers-reduced-motion) {
+	@media not ( prefers-reduced-motion ) {
 		transition: box-shadow 0.1s linear;
 	}
 
@@ -251,6 +252,7 @@
 		background: none;
 		outline: none;
 		text-align: left;
+		font-weight: $font-weight-regular;
 		color: $components-color-accent;
 		text-decoration: underline;
 
@@ -385,6 +387,7 @@
 	svg {
 		fill: currentColor;
 		outline: none;
+		flex-shrink: 0;
 
 		// Optimize for high contrast modes.
 		// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.

package/src/card/types.ts

@@ -1,12 +1,8 @@
-/**
- * External dependencies
- */
-import type { CSSProperties } from 'react';
-
 /**
  * Internal dependencies
  */
 import type { SurfaceProps } from '../surface/types';
+import type { FlexProps } from '../flex/types';
 
 type DeprecatedSizeOptions = 'extraSmall';
 export type SizeOptions = 'xSmall' | 'small' | 'medium' | 'large';
@@ -90,8 +86,6 @@ type MarginalSubComponentProps = BaseSubComponentProps & {
 	isBorderless?: boolean;
 };
 
-export type HeaderProps = MarginalSubComponentProps;
+export type HeaderProps = MarginalSubComponentProps & Partial< FlexProps >;
 
-export type FooterProps = MarginalSubComponentProps & {
-	justify?: CSSProperties[ 'justifyContent' ];
-};
+export type FooterProps = MarginalSubComponentProps & Partial< FlexProps >;

package/src/color-palette/styles.ts

@@ -7,11 +7,12 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { Heading } from '../heading';
+import { CONFIG } from '../utils';
 
 export const ColorHeading = styled( Heading )`
 	text-transform: uppercase;
 	line-height: 24px;
-	font-weight: 500;
+	font-weight: ${ CONFIG.fontWeightMedium };
 	&&& {
 		font-size: 11px;
 		margin-bottom: 0;

package/src/combobox-control/index.tsx

@@ -365,13 +365,10 @@ function ComboboxControl( props: ComboboxControlProps ) {
 							/>
 						</FlexBlock>
 						{ isLoading && <Spinner /> }
-						{ allowReset && (
+						{ allowReset && Boolean( value ) && ! isExpanded && (
 							<Button
 								size="small"
 								icon={ closeSmall }
-								// Disable reason: Focus returns to input field when reset is clicked.
-								// eslint-disable-next-line no-restricted-syntax
-								disabled={ ! value }
 								onClick={ handleOnReset }
 								onKeyDown={ handleResetStopPropagation }
 								label={ __( 'Reset' ) }

package/src/combobox-control/stories/index.story.tsx

@@ -79,7 +79,6 @@ export const Default = Template.bind( {} );
 Default.args = {
 	__next40pxDefaultSize: true,
 	__nextHasNoMarginBottom: true,
-	allowReset: false,
 	label: 'Select a country',
 	options: countryOptions,
 };

package/src/combobox-control/test/index.tsx

@@ -356,7 +356,7 @@ describe.each( [
 		expect( input ).toHaveValue( targetOption.label );
 	} );
 
-	it( 'should render with Reset button disabled', () => {
+	it( 'should not render Reset button when no value is set', () => {
 		render(
 			<Component
 				options={ timezones }
@@ -365,10 +365,23 @@ describe.each( [
 			/>
 		);
 
-		const resetButton = screen.getByRole( 'button', { name: 'Reset' } );
+		const resetButton = screen.queryByRole( 'button', { name: 'Reset' } );
+
+		expect( resetButton ).not.toBeInTheDocument();
+	} );
+
+	it( 'should not render Reset button when allowReset is false', () => {
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				allowReset={ false }
+			/>
+		);
+
+		const resetButton = screen.queryByRole( 'button', { name: 'Reset' } );
 
-		expect( resetButton ).toBeVisible();
-		expect( resetButton ).toBeDisabled();
+		expect( resetButton ).not.toBeInTheDocument();
 	} );
 
 	it( 'should reset input when clicking the Reset button', async () => {
@@ -400,8 +413,8 @@ describe.each( [
 
 		await user.click( resetButton );
 
+		expect( resetButton ).not.toBeInTheDocument();
 		expect( input ).toHaveValue( '' );
-		expect( resetButton ).toBeDisabled();
 		expect( input ).toHaveFocus();
 	} );
 
@@ -439,8 +452,8 @@ describe.each( [
 		// Pressing Enter/Return resets the input.
 		await user.keyboard( '{Enter}' );
 
+		expect( resetButton ).not.toBeInTheDocument();
 		expect( input ).toHaveValue( '' );
-		expect( resetButton ).toBeDisabled();
 		expect( input ).toHaveFocus();
 	} );
 
@@ -478,8 +491,8 @@ describe.each( [
 		// Pressing Spacebar resets the input.
 		await user.keyboard( '[Space]' );
 
+		expect( resetButton ).not.toBeInTheDocument();
 		expect( input ).toHaveValue( '' );
-		expect( resetButton ).toBeDisabled();
 		expect( input ).toHaveFocus();
 	} );
 } );

package/src/date-time/date/styles.ts

@@ -79,6 +79,7 @@ export const DayButton = styled( Button, {
 		border-radius: ${ CONFIG.radiusRound };
 		height: ${ space( 7 ) };
 		width: ${ space( 7 ) };
+		font-weight: 400;
 
 		${ ( props ) =>
 			props.isSelected &&

package/src/dimension-control/test/__snapshots__/index.test.js.snap

@@ -74,7 +74,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
 
 .emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   box-sizing: border-box;
@@ -356,7 +356,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
 
 .emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   box-sizing: border-box;
@@ -648,7 +648,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
 
 .emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   box-sizing: border-box;
@@ -952,7 +952,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
 
 .emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   box-sizing: border-box;

package/src/dropdown-menu/style.scss

@@ -18,6 +18,7 @@
 		outline: none;
 		cursor: pointer;
 		white-space: nowrap;
+		font-weight: $font-weight-regular;
 
 		&.has-separator {
 			margin-top: 6px;

package/src/focal-point-picker/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import type { KeyboardEventHandler } from 'react';
 
 /**
  * WordPress dependencies
@@ -10,19 +11,19 @@ import { __ } from '@wordpress/i18n';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import {
 	__experimentalUseDragging as useDragging,
-	useInstanceId,
 	useIsomorphicLayoutEffect,
 } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
-import BaseControl from '../base-control';
 import Controls from './controls';
 import FocalPoint from './focal-point';
 import Grid from './grid';
 import Media from './media';
 import {
+	Container,
 	MediaWrapper,
 	MediaContainer,
 } from './styles/focal-point-picker-style';
@@ -33,7 +34,11 @@ import type {
 	FocalPoint as FocalPointType,
 	FocalPointPickerProps,
 } from './types';
-import type { KeyboardEventHandler } from 'react';
+import {
+	StyledLabel,
+	StyledHelp,
+} from '../base-control/styles/base-control-styles';
+import { VisuallyHidden } from '../visually-hidden';
 
 const GRID_OVERLAY_TIMEOUT = 600;
 
@@ -88,6 +93,7 @@ export function FocalPointPicker( {
 	autoPlay = true,
 	className,
 	help,
+	hideLabelFromVision,
 	label,
 	onChange,
 	onDrag,
@@ -104,6 +110,14 @@ export function FocalPointPicker( {
 	const [ point, setPoint ] = useState( valueProp );
 	const [ showGridOverlay, setShowGridOverlay ] = useState( false );
 
+	if ( ! __nextHasNoMarginBottom ) {
+		deprecated( 'Bottom margin styles for wp.components.FocalPointPicker', {
+			since: '6.7',
+			version: '7.0',
+			hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
+		} );
+	}
+
 	const { startDrag, endDrag, isDragging } = useDragging( {
 		onDragStart: ( event ) => {
 			dragAreaRef.current?.focus();
@@ -233,9 +247,7 @@ export function FocalPointPicker( {
 	};
 
 	const classes = clsx( 'components-focal-point-picker-control', className );
-
-	const instanceId = useInstanceId( FocalPointPicker );
-	const id = `inspector-focal-point-picker-control-${ instanceId }`;
+	const Label = hideLabelFromVision ? VisuallyHidden : StyledLabel;
 
 	useUpdateEffect( () => {
 		setShowGridOverlay( true );
@@ -247,15 +259,8 @@ export function FocalPointPicker( {
 	}, [ x, y ] );
 
 	return (
-		<BaseControl
-			{ ...restProps }
-			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-			__associatedWPComponentName="FocalPointPicker"
-			label={ label }
-			id={ id }
-			help={ help }
-			className={ classes }
-		>
+		<Container { ...restProps } as="fieldset" className={ classes }>
+			{ !! label && <Label as="legend">{ label }</Label> }
 			<MediaWrapper className="components-focal-point-picker-wrapper">
 				<MediaContainer
 					className="components-focal-point-picker"
@@ -291,7 +296,12 @@ export function FocalPointPicker( {
 					onChange?.( getFinalValue( value ) );
 				} }
 			/>
-		</BaseControl>
+			{ !! help && (
+				<StyledHelp __nextHasNoMarginBottom={ __nextHasNoMarginBottom }>
+					{ help }
+				</StyledHelp>
+			) }
+		</Container>
 	);
 }
 

package/src/focal-point-picker/styles/focal-point-picker-style.ts

@@ -9,10 +9,20 @@ import styled from '@emotion/styled';
  */
 import { Flex } from '../../flex';
 import UnitControl from '../../unit-control';
-import { COLORS, CONFIG } from '../../utils';
+import { View } from '../../view';
+import { COLORS, CONFIG, boxSizingReset, font } from '../../utils';
 import type { FocalPointPickerControlsProps } from '../types';
 import { INITIAL_BOUNDS } from '../utils';
 
+export const Container = styled( View )`
+	border: 0;
+	padding: 0;
+	margin: 0;
+	font-family: ${ font( 'default.fontFamily' ) };
+	font-size: ${ font( 'default.fontSize' ) };
+	${ boxSizingReset }
+`;
+
 export const MediaWrapper = styled.div`
 	background-color: transparent;
 	display: flex;

package/src/menu-group/style.scss

@@ -23,6 +23,6 @@
 	color: $gray-700;
 	text-transform: uppercase;
 	font-size: 11px;
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 	white-space: nowrap;
 }

package/src/menu-item/style.scss

@@ -6,6 +6,7 @@
 .components-menu-item__button,
 .components-menu-item__button.components-button {
 	width: 100%;
+	font-weight: $font-weight-regular;
 
 	&[role="menuitemradio"],
 	&[role="menuitemcheckbox"] {

package/src/modal/style.scss

@@ -151,7 +151,7 @@
 	left: 0;
 
 	.components-modal__header-heading {
-		font-size: 1.2rem;
+		font-size: $font-size-x-large;
 		font-weight: 600;
 	}
 

package/src/palette-edit/styles.ts

@@ -52,7 +52,7 @@ export const NameContainer = styled.div`
 export const PaletteHeading = styled( Heading )`
 	text-transform: uppercase;
 	line-height: ${ space( 6 ) };
-	font-weight: 500;
+	font-weight: ${ CONFIG.fontWeightMedium };
 	&&& {
 		font-size: 11px;
 		margin-bottom: 0;

package/src/panel/style.scss

@@ -89,7 +89,7 @@
 	padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20;
 	outline: none;
 	width: 100%;
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 	text-align: left;
 	color: $gray-900;
 	border: none;

package/src/popover/index.tsx

@@ -268,9 +268,30 @@ const UnforwardedPopover = (
 		onDialogClose = ( type: string | undefined, event: SyntheticEvent ) => {
 			// Ideally the popover should have just a single onClose prop and
 			// not three props that potentially do the same thing.
-			if ( type === 'focus-outside' && onFocusOutside ) {
-				onFocusOutside( event );
+			if ( type === 'focus-outside' ) {
+				// Check if this blur event is actually relevant to this popover
+				const blurTarget = event?.target as Element;
+				const referenceElement = refs.reference.current;
+				const floatingElement = refs.floating.current;
+
+				// Check if blur is from this popover's reference element or its floating content
+				const isBlurFromThisPopover =
+					( referenceElement &&
+						'contains' in referenceElement &&
+						referenceElement.contains( blurTarget ) ) ||
+					floatingElement?.contains( blurTarget );
+				// Only proceed if the blur is actually from this popover
+				if ( ! isBlurFromThisPopover ) {
+					return;
+				}
+				// Call onFocusOutside if defined or call onClose.
+				if ( onFocusOutside ) {
+					onFocusOutside( event );
+				} else if ( onClose ) {
+					onClose();
+				}
 			} else if ( onClose ) {
+				// onClose should be called for other event types if it exists.
 				onClose();
 			}
 		};

package/src/tab-panel/style.scss

@@ -21,7 +21,7 @@
 	cursor: pointer;
 	padding: 3px $grid-unit-20; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
-	font-weight: 500;
+	font-weight: $font-weight-regular;
 
 	&:focus:not(:disabled) {
 		position: relative;

package/src/tabs/styles.ts

@@ -58,7 +58,7 @@ export const StyledTabList = styled( Ariakit.TabList )`
 			when scaling in the transform, see: https://stackoverflow.com/a/52159123 */
 	--antialiasing-factor: 100;
 	&[aria-orientation='horizontal'] {
-		--fade-width: 4rem;
+		--fade-width: 64px;
 		--fade-gradient-base: transparent 0%, black var( --fade-width );
 		--fade-gradient-composed: var( --fade-gradient-base ), black 60%,
 			transparent 50%;

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -26,7 +26,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 
 .emotion-6 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   display: block;
@@ -391,7 +391,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
 
 .emotion-6 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   display: block;
@@ -660,7 +660,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 
 .emotion-6 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   display: block;
@@ -1019,7 +1019,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
 
 .emotion-6 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   display: block;

package/src/tools-panel/styles.ts

@@ -86,7 +86,7 @@ export const ToolsPanelHeader = css`
 
 export const ToolsPanelHeading = css`
 	font-size: inherit;
-	font-weight: 500;
+	font-weight: ${ CONFIG.fontWeightMedium };
 	line-height: normal;
 
 	/* Required to meet specificity requirements to ensure zero margin */
@@ -150,7 +150,7 @@ export const DropdownMenu = css`
 export const ResetLabel = styled.span`
 	color: ${ COLORS.theme.accentDarker10 };
 	font-size: 11px;
-	font-weight: 500;
+	font-weight: ${ CONFIG.fontWeightMedium };
 	line-height: 1.4;
 	${ rtl( { marginLeft: space( 3 ) } ) }
 	text-transform: uppercase;

package/src/utils/base-label.ts

@@ -3,11 +3,16 @@
  */
 import { css } from '@emotion/react';
 
+/**
+ * Internal dependencies
+ */
+import CONFIG from './config-values.js';
+
 // This is a very low-level mixin which you shouldn't have to use directly.
 // Try to use BaseControl's StyledLabel or BaseControl.VisualLabel if you can.
 export const baseLabelTypography = css`
 	font-size: 11px;
-	font-weight: 500;
+	font-weight: ${ CONFIG.fontWeightMedium };
 	line-height: 1.4;
 	text-transform: uppercase;
 `;

package/src/utils/config-values.js

@@ -51,6 +51,7 @@ export default Object.assign( {}, CONTROL_PROPS, {
 	fontSizeXSmall: 'calc(0.75 * 13px)',
 	fontLineHeightBase: '1.4',
 	fontWeight: 'normal',
+	fontWeightMedium: '499', // ensures fallback to 400 (instead of 600)
 	fontWeightHeading: '600',
 	gridBase: '4px',
 	cardPaddingXSmall: `${ space( 2 ) }`,

package/src/validated-form-controls/style.scss

@@ -61,7 +61,7 @@
 	gap: 4px;
 	margin: 8px 0 0;
 	font-family: $font-family-body;
-	font-size: 0.75rem;
+	font-size: $font-size-small;
 	line-height: 16px; // matches the icon size
 	color: $components-color-gray-700;
 	animation: