@wordpress/ui 0.10.0 → 0.11.0

package/src/popover/title.tsx

@@ -0,0 +1,47 @@
+import { Popover as _Popover } from '@base-ui/react/popover';
+import { useMergeRefs } from '@wordpress/compose';
+import { forwardRef, useLayoutEffect, useRef } from '@wordpress/element';
+import { Text } from '../text';
+import { usePopoverValidationContext } from './context';
+import type { TitleProps } from './types';
+
+/**
+ * Renders a heading that labels the popover for accessibility.
+ *
+ * **Required** — every popover must include a `Popover.Title`, even if
+ * visually hidden. The rendered element is linked to the popup via
+ * `aria-labelledby`. Uses the `heading-xl` text variant, matching Dialog.
+ *
+ * To visually hide the title while keeping it accessible, wrap it with
+ * `VisuallyHidden` using the `render` prop:
+ *
+ * ```jsx
+ * <VisuallyHidden render={ <Popover.Title /> }>
+ *   Accessible title text
+ * </VisuallyHidden>
+ * ```
+ */
+const Title = forwardRef< HTMLHeadingElement, TitleProps >(
+	function PopoverTitle( { className, children, ...props }, forwardedRef ) {
+		const validationContext = usePopoverValidationContext();
+		const internalRef = useRef< HTMLHeadingElement >( null );
+		const mergedRef = useMergeRefs( [ internalRef, forwardedRef ] );
+
+		useLayoutEffect( () => {
+			validationContext?.registerTitle( internalRef.current );
+		}, [ validationContext ] );
+
+		return (
+			<Text
+				ref={ mergedRef }
+				variant="heading-xl"
+				render={ <_Popover.Title { ...props } /> }
+				className={ className }
+			>
+				{ children }
+			</Text>
+		);
+	}
+);
+
+export { Title };

package/src/popover/trigger.tsx

@@ -0,0 +1,17 @@
+import { Popover as _Popover } from '@base-ui/react/popover';
+import { forwardRef } from '@wordpress/element';
+import type { TriggerProps } from './types';
+
+/**
+ * Renders a button that toggles the popover popup when clicked.
+ *
+ * Renders as a `<button>` by default. Also supports hover-triggered
+ * popovers via the `openOnHover`, `delay`, and `closeDelay` props.
+ */
+const Trigger = forwardRef< HTMLButtonElement, TriggerProps >(
+	function PopoverTrigger( props, ref ) {
+		return <_Popover.Trigger ref={ ref } { ...props } />;
+	}
+);
+
+export { Trigger };

package/src/popover/types.ts

@@ -0,0 +1,113 @@
+import type { ReactNode } from 'react';
+import type { Popover as _Popover } from '@base-ui/react/popover';
+import type { ComponentProps } from '../utils/types';
+
+export interface RootProps
+	extends Pick<
+		_Popover.Root.Props,
+		'open' | 'onOpenChange' | 'defaultOpen' | 'modal'
+	> {
+	/**
+	 * The popover sub-components (`Popover.Trigger`, `Popover.Popup`, etc.).
+	 */
+	children?: ReactNode;
+}
+
+export interface TriggerProps
+	extends ComponentProps< 'button' >,
+		Pick< _Popover.Trigger.Props, 'openOnHover' | 'delay' | 'closeDelay' > {
+	/**
+	 * The content to be rendered inside the component.
+	 */
+	children?: ReactNode;
+}
+
+/**
+ * `Popover.Popup` maps to two Base UI elements internally: the
+ * **Positioner** (outer, handles fixed positioning and z-index) and the
+ * **Popup** (inner, holds content and visual styles).
+ *
+ * `style` and `className` are forwarded to the **Positioner** so that
+ * z-index overrides (`--wp-ui-popover-z-index`) and Base UI CSS variables
+ * (`--available-height`, `--available-width`) work correctly. All other
+ * HTML attributes are forwarded to the inner **Popup** element.
+ */
+export interface PopupProps
+	extends ComponentProps< 'div' >,
+		Pick<
+			_Popover.Positioner.Props,
+			| 'align'
+			| 'alignOffset'
+			| 'anchor'
+			| 'arrowPadding'
+			| 'collisionAvoidance'
+			| 'collisionBoundary'
+			| 'collisionPadding'
+			| 'side'
+			| 'sideOffset'
+			| 'sticky'
+		>,
+		Pick< _Popover.Popup.Props, 'initialFocus' | 'finalFocus' > {
+	/**
+	 * Whether to render a backdrop overlay behind the popover.
+	 *
+	 * Typically used with `modal` to signal that interaction with the rest
+	 * of the page is blocked. The backdrop is a semi-transparent dark overlay.
+	 *
+	 * @default false
+	 */
+	backdrop?: boolean;
+
+	/**
+	 * The content to be rendered inside the component.
+	 */
+	children?: ReactNode;
+
+	/**
+	 * A parent element to render the portal into.
+	 *
+	 * Useful for cross-document rendering, such as rendering a popover
+	 * in a parent document when the trigger is inside an iframe.
+	 */
+	container?: _Popover.Portal.Props[ 'container' ];
+
+	/**
+	 * The visual style variant of the popup.
+	 *
+	 * - `'default'` — standard surface styling with background, padding,
+	 *    border radius, and shadow.
+	 * - `'unstyled'` — no visual treatment; useful as a blank positioning
+	 *    container for fully custom content.
+	 *
+	 * @default 'default'
+	 */
+	variant?: 'default' | 'unstyled';
+}
+
+export interface ArrowProps extends ComponentProps< 'div' > {
+	/**
+	 * Custom arrow visuals to render inside the positioned container.
+	 */
+	children?: ReactNode;
+}
+
+export interface TitleProps extends ComponentProps< 'h2' > {
+	/**
+	 * The title content to be rendered.
+	 */
+	children?: ReactNode;
+}
+
+export interface DescriptionProps extends ComponentProps< 'p' > {
+	/**
+	 * The description content to be rendered.
+	 */
+	children?: ReactNode;
+}
+
+export interface CloseProps extends ComponentProps< 'button' > {
+	/**
+	 * The content to be rendered inside the component.
+	 */
+	children?: ReactNode;
+}

package/src/tabs/list.tsx

@@ -21,7 +21,6 @@ export const List = forwardRef< HTMLDivElement, TabListProps >(
 			variant = 'default',
 			className,
 			activateOnFocus,
-			render,
 			...otherProps
 		},
 		forwardedRef

package/src/tabs/style.module.css

@@ -122,8 +122,8 @@
 		cursor: var(--wpds-cursor-control);
 
 		/* Typography */
-		font-family: var(--wpds-font-family-body);
-		font-size: var(--wpds-font-size-md);
+		font-family: var(--wpds-typography-font-family-body);
+		font-size: var(--wpds-typography-font-size-md);
 		white-space: nowrap;
 
 		/* Characters in some languages (e.g. Japanese) may have a native higher line-height. */

package/src/text/stories/index.story.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/heading-has-content */
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Text } from '../index';
 import { Stack } from '../../stack';
@@ -18,6 +17,10 @@ export const Default: Story = {
 	},
 };
 
+/**
+ * Important: Setting the `variant` prop to a `heading` variant will not automatically render a heading element.
+ * Use the `render` prop to render a heading element with the appropriate level.
+ */
 export const AllVariants: Story = {
 	render: () => (
 		<Stack
@@ -65,4 +68,3 @@ export const WithRenderProp: Story = {
 		</Stack>
 	),
 };
-/* eslint-enable jsx-a11y/heading-has-content */

package/src/text/style.module.css

@@ -1,67 +1,93 @@
 @layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
 
 @layer wp-ui-components {
+	.text {
+		margin: 0;
+	}
+
 	.heading-2xl {
-		font-family: var(--wpds-font-family-heading);
-		font-size: var(--wpds-font-size-2xl);
-		line-height: var(--wpds-font-line-height-2xl);
-		font-weight: var(--wpds-font-weight-medium);
+		--_gcd-heading-font-size: var(--wpds-typography-font-size-2xl);
+
+		font-family: var(--wpds-typography-font-family-heading);
+		font-size: var(--wpds-typography-font-size-2xl);
+		line-height: var(--wpds-typography-line-height-2xl);
+		font-weight: var(--wpds-typography-font-weight-medium);
 	}
 
 	.heading-xl {
-		font-family: var(--wpds-font-family-heading);
-		font-size: var(--wpds-font-size-xl);
-		line-height: var(--wpds-font-line-height-md);
-		font-weight: var(--wpds-font-weight-medium);
+		--_gcd-heading-font-size: var(--wpds-typography-font-size-xl);
+
+		font-family: var(--wpds-typography-font-family-heading);
+		font-size: var(--wpds-typography-font-size-xl);
+		line-height: var(--wpds-typography-line-height-md);
+		font-weight: var(--wpds-typography-font-weight-medium);
 	}
 
 	.heading-lg {
-		font-family: var(--wpds-font-family-heading);
-		font-size: var(--wpds-font-size-lg);
-		line-height: var(--wpds-font-line-height-sm);
-		font-weight: var(--wpds-font-weight-medium);
+		--_gcd-heading-font-size: var(--wpds-typography-font-size-lg);
+
+		font-family: var(--wpds-typography-font-family-heading);
+		font-size: var(--wpds-typography-font-size-lg);
+		line-height: var(--wpds-typography-line-height-sm);
+		font-weight: var(--wpds-typography-font-weight-medium);
 	}
 
 	.heading-md {
-		font-family: var(--wpds-font-family-heading);
-		font-size: var(--wpds-font-size-md);
-		line-height: var(--wpds-font-line-height-sm);
-		font-weight: var(--wpds-font-weight-medium);
+		--_gcd-heading-font-size: var(--wpds-typography-font-size-md);
+
+		font-family: var(--wpds-typography-font-family-heading);
+		font-size: var(--wpds-typography-font-size-md);
+		line-height: var(--wpds-typography-line-height-sm);
+		font-weight: var(--wpds-typography-font-weight-medium);
 	}
 
 	.heading-sm {
-		font-family: var(--wpds-font-family-heading);
-		font-size: var(--wpds-font-size-xs);
-		line-height: var(--wpds-font-line-height-xs);
-		font-weight: var(--wpds-font-weight-medium);
+		--_gcd-heading-font-size: var(--wpds-typography-font-size-xs);
+
+		font-family: var(--wpds-typography-font-family-heading);
+		font-size: var(--wpds-typography-font-size-xs);
+		line-height: var(--wpds-typography-line-height-xs);
+		font-weight: var(--wpds-typography-font-weight-medium);
 		text-transform: uppercase;
 	}
 
 	.body-xl {
-		font-family: var(--wpds-font-family-body);
-		font-size: var(--wpds-font-size-xl);
-		line-height: var(--wpds-font-line-height-xl);
-		font-weight: var(--wpds-font-weight-regular);
+		--_gcd-p-font-size: var(--wpds-typography-font-size-xl);
+		--_gcd-p-line-height: var(--wpds-typography-line-height-xl);
+
+		font-family: var(--wpds-typography-font-family-body);
+		font-size: var(--wpds-typography-font-size-xl);
+		line-height: var(--wpds-typography-line-height-xl);
+		font-weight: var(--wpds-typography-font-weight-regular);
 	}
 
 	.body-lg {
-		font-family: var(--wpds-font-family-body);
-		font-size: var(--wpds-font-size-lg);
-		line-height: var(--wpds-font-line-height-md);
-		font-weight: var(--wpds-font-weight-regular);
+		--_gcd-p-font-size: var(--wpds-typography-font-size-lg);
+		--_gcd-p-line-height: var(--wpds-typography-line-height-md);
+
+		font-family: var(--wpds-typography-font-family-body);
+		font-size: var(--wpds-typography-font-size-lg);
+		line-height: var(--wpds-typography-line-height-md);
+		font-weight: var(--wpds-typography-font-weight-regular);
 	}
 
 	.body-md {
-		font-family: var(--wpds-font-family-body);
-		font-size: var(--wpds-font-size-md);
-		line-height: var(--wpds-font-line-height-sm);
-		font-weight: var(--wpds-font-weight-regular);
+		--_gcd-p-font-size: var(--wpds-typography-font-size-md);
+		--_gcd-p-line-height: var(--wpds-typography-line-height-sm);
+
+		font-family: var(--wpds-typography-font-family-body);
+		font-size: var(--wpds-typography-font-size-md);
+		line-height: var(--wpds-typography-line-height-sm);
+		font-weight: var(--wpds-typography-font-weight-regular);
 	}
 
 	.body-sm {
-		font-family: var(--wpds-font-family-body);
-		font-size: var(--wpds-font-size-sm);
-		line-height: var(--wpds-font-line-height-xs);
-		font-weight: var(--wpds-font-weight-regular);
+		--_gcd-p-font-size: var(--wpds-typography-font-size-sm);
+		--_gcd-p-line-height: var(--wpds-typography-line-height-xs);
+
+		font-family: var(--wpds-typography-font-family-body);
+		font-size: var(--wpds-typography-font-size-sm);
+		line-height: var(--wpds-typography-line-height-xs);
+		font-weight: var(--wpds-typography-font-weight-regular);
 	}
 }

package/src/text/test/index.test.tsx

@@ -34,10 +34,7 @@ describe( 'Text', () => {
 	} );
 
 	it( 'supports the render prop', () => {
-		render(
-			// eslint-disable-next-line jsx-a11y/heading-has-content
-			<Text render={ <h2 /> }>Section title</Text>
-		);
+		render( <Text render={ <h2 /> }>Section title</Text> );
 
 		expect(
 			screen.getByRole( 'heading', { level: 2, name: 'Section title' } )

package/src/text/text.tsx

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
 import { type TextProps } from './types';
 import styles from './style.module.css';
+import defenseStyles from '../utils/css/global-css-defense.module.css';
 
 /**
  * A text component for rendering content with predefined typographic variants.
@@ -17,7 +18,13 @@ export const Text = forwardRef< HTMLSpanElement, TextProps >( function Text(
 		defaultTagName: 'span',
 		ref,
 		props: mergeProps< 'span' >( props, {
-			className: clsx( styles[ variant ], className ),
+			className: clsx(
+				styles.text,
+				variant.startsWith( 'heading-' ) && defenseStyles.heading,
+				variant.startsWith( 'body-' ) && defenseStyles.p,
+				styles[ variant ],
+				className
+			),
 		} ),
 	} );
 

package/src/tooltip/popup.tsx

@@ -16,6 +16,7 @@ const ThemeProvider: typeof ThemeProviderType =
 const Popup = forwardRef< HTMLDivElement, PopupProps >( function TooltipPopup(
 	{
 		align = 'center',
+		container,
 		side = 'top',
 		sideOffset = 4,
 		children,
@@ -26,7 +27,7 @@ const Popup = forwardRef< HTMLDivElement, PopupProps >( function TooltipPopup(
 	ref
 ) {
 	return (
-		<Tooltip.Portal>
+		<Tooltip.Portal container={ container }>
 			<Tooltip.Positioner
 				align={ align }
 				side={ side }

package/src/tooltip/root.tsx

@@ -2,16 +2,17 @@ import { Tooltip } from '@base-ui/react/tooltip';
 import type { RootProps } from './types';
 
 /**
- * `Tooltip` is used to visually show the label of an icon button, or other such interactive controls
- * that don't have a visual text label.
+ * `Tooltip` is used to visually show the label of an icon button, or other such
+ * interactive controls that don't have a visual text label.
  *
- * Tooltips are not available on touch devices, and thus should not be used for infotips,
- * descriptions, or dynamic status messages.
+ * Tooltip popups are visual-only and not exposed to assistive technologies.
+ * The trigger's accessible name (e.g. `aria-label`) is the source of truth
+ * for screen reader users. Tooltips are not available on touch devices,
+ * and thus should not be used for infotips, descriptions, or dynamic status
+ * messages.
  *
- * The tooltip itself does not provide any accessible labeling, so when using the
- * `Tooltip` primitive you must ensure that the trigger is accessibly labeled (e.g. with an `aria-label`).
- *
- * See also: [IconButton](https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-iconbutton--docs)
+ * @see {@link https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-tooltip-usage-guidelines--docs Usage Guidelines}
+ * @see {@link https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-iconbutton--docs IconButton}
  */
 function Root( props: RootProps ) {
 	return <Tooltip.Root { ...props } />;

package/src/tooltip/stories/usage-guidelines.mdx

@@ -0,0 +1,91 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import * as UsageGuidelinesStories from './usage-guidelines.story';
+
+<Meta of={ UsageGuidelinesStories } />
+
+# Tooltip usage guidelines
+
+## Usage guidelines
+
+-   **Use tooltips as visual labels only.** Tooltips should act as
+    supplementary visual labels for sighted mouse and keyboard users.
+    Tooltip popups are not exposed to assistive technologies — the
+    trigger's accessible name (e.g. `aria-label`) is what provides the
+    label for screen reader users.
+    See [_Alternatives to tooltips_](#alternatives-to-tooltips) below for
+    more details.
+-   **Provide an accessible name for the trigger.** Tooltips are visual-only
+    elements and are not a replacement for labeling the trigger. The
+    tooltip's trigger must have an `aria-label` that matches or is a concise
+    equivalent of the tooltip's content to ensure consistency for screen
+    reader users. If the tooltip also displays a keyboard shortcut, use
+    `aria-keyshortcuts` on the trigger.
+
+<Canvas of={ UsageGuidelinesStories.RecommendedUsage } />
+
+`IconButton` has built-in tooltip support via the `label` prop, making it
+the easiest way to provide a tooltip for icon-only actions.
+
+<Canvas of={ UsageGuidelinesStories.IconButtonWithTooltip } />
+
+## Alternatives to tooltips
+
+Tooltips should be supplementary popups that provide non-essential clarity in
+high-density UIs. A user should not miss critical information if they never
+see a tooltip.
+
+Tooltips don't work well with touch input. Unlike mouse pointers with hover
+capability, there's no easily discoverable way to reveal a tooltip before
+tapping its trigger on a touch device.
+
+iOS doesn't provide a system-standard, touch-friendly tooltip affordance,
+while Android may show a tooltip on long press. However, on the web,
+long press is often used to trigger contextual menus in the browser, which
+can lead to potential conflicts. For this reason, tooltips are disabled on
+touch devices.
+
+### Infotips
+
+Popups that open when hovering an info icon should use
+[Popover](?path=/docs/design-system-components-popover--docs) with the
+`openOnHover` prop on the trigger instead of a tooltip. This way, touch
+users and screen reader users can access the content.
+
+To know when to reach for a popover instead of a tooltip, consider the
+**purpose** of the trigger element: if the trigger's purpose is to open the
+popup itself, it's a popover. If the trigger's purpose is unrelated to
+opening the popup, it's a tooltip.
+
+<Canvas of={ UsageGuidelinesStories.InfotipWithPopover } />
+
+See also the [Popover Infotip story](?path=/story/design-system-components-popover--infotip).
+
+Infotips opened on hover can be dismissed by pressing `Escape`.
+
+### Description text
+
+Tooltips are designed for sighted mouse and keyboard users and are not a reliable way to deliver
+important information to touch users or assistive technologies. If the
+description is important to understanding the element, don't hide it behind a
+tooltip — use inline text or
+[Popover](?path=/docs/design-system-components-popover--docs) if space is
+limited, so the information is accessible to everyone.
+
+Since tooltips serve sighted mouse and keyboard users, iconography should
+clearly communicate the purpose of icon-only triggers, especially on mobile
+where the text label may not be visible.
+
+If the description is not critical, a tooltip can still be used to provide
+extra clarity for sighted mouse or keyboard users.
+
+### Contextual feedback messages
+
+For contextual feedback after an action (e.g. "Copied!"), prefer a pattern
+that ensures the message is announced to screen readers and supports complex
+content, such as a
+[Notice](?path=/docs/design-system-components-notice--docs).
+
+## References
+
+-   [WCAG 1.4.13: Content on Hover or Focus](https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html) — tooltips must be dismissible (Escape), hoverable, and persistent.
+-   [WAI-ARIA APG: Tooltip pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) — note that this component intentionally diverges from the traditional `role="tooltip"` + `aria-describedby` pattern. The trigger's `aria-label` is the source of truth for assistive technologies, and the tooltip popup is a visual-only supplement.

package/src/tooltip/stories/usage-guidelines.story.tsx

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+	formatBold,
+	formatItalic,
+	formatUnderline,
+	info,
+} from '@wordpress/icons';
+import { Icon, IconButton, Popover, Tooltip, VisuallyHidden } from '../..';
+
+const meta: Meta = {
+	title: 'Design System/Components/Tooltip/Usage Guidelines',
+	parameters: {
+		controls: { disable: true },
+	},
+	tags: [ '!dev' ],
+};
+export default meta;
+
+type Story = StoryObj;
+
+/**
+ * Tooltips work best as visual labels for icon-only controls. Each trigger
+ * must have its own accessible name via `aria-label`.
+ */
+export const RecommendedUsage: Story = {
+	render: () => (
+		<Tooltip.Provider delay={ 0 }>
+			<div style={ { display: 'flex', gap: '0.25rem' } }>
+				<Tooltip.Root>
+					<Tooltip.Trigger aria-label="Bold">
+						<Icon icon={ formatBold } />
+					</Tooltip.Trigger>
+					<Tooltip.Popup>Bold</Tooltip.Popup>
+				</Tooltip.Root>
+
+				<Tooltip.Root>
+					<Tooltip.Trigger aria-label="Italic">
+						<Icon icon={ formatItalic } />
+					</Tooltip.Trigger>
+					<Tooltip.Popup>Italic</Tooltip.Popup>
+				</Tooltip.Root>
+
+				<Tooltip.Root>
+					<Tooltip.Trigger aria-label="Underline">
+						<Icon icon={ formatUnderline } />
+					</Tooltip.Trigger>
+					<Tooltip.Popup>Underline</Tooltip.Popup>
+				</Tooltip.Root>
+			</div>
+		</Tooltip.Provider>
+	),
+};
+
+/**
+ * Popups that open when hovering an info icon should use `Popover` with
+ * `openOnHover` instead of a Tooltip. This ensures the content is accessible
+ * to touch and screen reader users.
+ */
+export const InfotipWithPopover: Story = {
+	render: () => (
+		<div
+			style={ {
+				display: 'flex',
+				alignItems: 'center',
+				gap: 'var(--wpds-dimension-gap-xs)',
+			} }
+		>
+			<span>Label</span>
+			<Popover.Root>
+				<Popover.Trigger
+					openOnHover
+					delay={ 200 }
+					closeDelay={ 200 }
+					aria-label="More information"
+					style={ {
+						background: 'none',
+						border: 'none',
+						padding: 0,
+						cursor: 'var(--wpds-cursor-control)',
+						display: 'inline-flex',
+						alignItems: 'center',
+						borderRadius: 'var(--wpds-border-radius-sm)',
+					} }
+				>
+					<Icon icon={ info } size={ 20 } />
+				</Popover.Trigger>
+				<Popover.Popup>
+					<Popover.Arrow />
+					<VisuallyHidden render={ <Popover.Title /> }>
+						More information
+					</VisuallyHidden>
+					<Popover.Description>
+						This is additional context about the label. Unlike
+						tooltips, this content is accessible to touch and screen
+						reader users.
+					</Popover.Description>
+				</Popover.Popup>
+			</Popover.Root>
+		</div>
+	),
+};
+
+/**
+ * `IconButton` has built-in tooltip support via the `label` prop,
+ * making it the easiest way to provide a tooltip for icon-only actions.
+ */
+export const IconButtonWithTooltip: Story = {
+	render: () => (
+		<div style={ { display: 'flex', gap: '0.25rem' } }>
+			<IconButton icon={ formatBold } label="Bold" size="compact" />
+			<IconButton icon={ formatItalic } label="Italic" size="compact" />
+			<IconButton
+				icon={ formatUnderline }
+				label="Underline"
+				size="compact"
+			/>
+		</div>
+	),
+};

package/src/tooltip/style.module.css

@@ -11,8 +11,8 @@
 			var(--wpds-dimension-padding-xs)
 			var(--wpds-dimension-padding-sm);
 		border-radius: var(--wpds-border-radius-sm);
-		font-family: var(--wpds-font-family-body);
-		font-size: var(--wpds-font-size-sm);
+		font-family: var(--wpds-typography-font-family-body);
+		font-size: var(--wpds-typography-font-size-sm);
 		line-height: 1.4; /* TODO: use DS token for line height */
 		color: var(--wpds-color-fg-content-neutral);
 		box-shadow: var(--wpds-elevation-sm);