Use CSS design tokens instead of Text component

Author: simison

packages/admin-ui/src/breadcrumbs/index.tsx

@@ -3,8 +3,10 @@
  */
 import { Link } from '@wordpress/route';
 import { __ } from '@wordpress/i18n';
-import { Text } from '@wordpress/ui';
-import { __experimentalHStack as HStack } from '@wordpress/components';
+import {
+	__experimentalHeading as Heading,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -22,23 +24,16 @@ const BreadcrumbItem = ( {
 	if ( ! to ) {
 		return (
 			<li>
-				<Text
-					className="admin-ui-page__header-title"
-					// eslint-disable-next-line jsx-a11y/heading-has-content -- content provided via render prop
-					render={ <h1 /> }
-					variant="heading-lg"
-				>
+				<Heading level={ 1 } truncate>
 					{ label }
-				</Text>
+				</Heading>
 			</li>
 		);
 	}
 
 	return (
 		<li>
-			<Link to={ to }>
-				<Text variant="heading-lg">{ label }</Text>
-			</Link>
+			<Link to={ to }>{ label }</Link>
 		</li>
 	);
 };

packages/admin-ui/src/breadcrumbs/style.scss

@@ -1,7 +1,11 @@
 @use "@wordpress/base-styles/variables";
 
 .admin-ui-breadcrumbs__list {
+	// @TODO: use Text component from UI when available.
+	font-family: var(--wpds-font-family-heading);
 	font-size: var(--wpds-font-size-lg);
+	font-weight: var(--wpds-font-weight-medium);
+	line-height: var(--wpds-font-line-height-lg);
 	list-style: none;
 	padding: 0;
 	margin: 0;

packages/admin-ui/src/page/header.tsx

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Stack, Text } from '@wordpress/ui';
+import { Stack } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -41,13 +41,9 @@ export default function Header( {
 						/>
 					) }
 					{ title && (
-						<Text
-							className="admin-ui-page__header-title"
-							render={ <HeadingTag /> }
-							variant="heading-lg"
-						>
+						<HeadingTag className="admin-ui-page__header-title">
 							{ title }
-						</Text>
+						</HeadingTag>
 					) }
 					{ breadcrumbs }
 					{ badges }

packages/admin-ui/src/page/style.scss

@@ -19,9 +19,13 @@
 }
 
 .admin-ui-page__header-title {
+	// @TODO: use Text component from UI when available.
+	font-family: var(--wpds-font-family-heading);
+	font-size: var(--wpds-font-size-lg);
+	font-weight: var(--wpds-font-weight-medium);
+	line-height: var(--wpds-font-line-height-lg);
 	margin: 0;
 	overflow: hidden;
-	font-size: var(--wpds-font-size-lg);
 }
 
 .admin-ui-page__sidebar-toggle-slot:empty {