@automattic/vip-design-system 2.18.1 → 2.20.0

package/src/system/Pagination/styles.ts

@@ -26,8 +26,7 @@ export const pageButtonStyles: ThemeUIStyleObject = {
 	bg: 'transparent',
 	color: 'heading',
 	cursor: 'pointer',
-	fontSize: 2,
-	fontFamily: 'body',
+	variant: 'text.default',
 	px: 2,
 	borderBottom: '3px solid',
 	borderColor: 'transparent',
@@ -89,8 +88,6 @@ export const compactTriggerStyles: ThemeUIStyleObject = {
 	bg: 'transparent',
 	color: 'heading',
 	cursor: 'pointer',
-	fontSize: 2,
-	fontFamily: 'body',
 	fontWeight: 'bold',
 	px: 2,
 	borderRadius: 1,

package/src/system/Table/TableCell.tsx

@@ -31,7 +31,7 @@ export const TableCell = ( { children, head, sx, ...rest }: TableCellProps ) =>
 		borderTop: head ? '1px solid' : 'none',
 		// borderColor should come after borderTop so it can override it
 		borderColor: 'table.border',
-		fontWeight: 'body',
+		variant: 'text.default',
 		px: 3,
 		py: 2,
 		textAlign: 'left',

package/src/system/Text/Text.stories.tsx

@@ -33,16 +33,19 @@ export const Default: Story = {
 				with silver.{ ' ' }
 			</Text>
 
-			<Text sx={ { color: 'texts.accent' } }>Text Accent</Text>
+			<Text variant="default">Body Default</Text>
+			<Text variant="small">Body Small</Text>
+			<Text variant="large">Body Large</Text>
+			<Text variant="mono">Body Mono</Text>
+			<Text variant="mono-bold">Body Mono Bold</Text>
 
+			<Text sx={ { color: 'texts.accent' } }>Text Accent</Text>
 			<Text sx={ { color: 'texts.helper' } }>Text Helper</Text>
 
-			<Text sx={ { color: 'texts.helper', fontWeight: 'body' } }>Text Helper</Text>
-			<Text sx={ { color: 'texts.helper', fontWeight: 'heading' } }>Text Helper</Text>
+			<Text sx={ { color: 'texts.helper', fontWeight: 'light' } }>Text Helper</Text>
 			<Text sx={ { color: 'texts.helper', fontWeight: 'regular' } }>Text Helper</Text>
 			<Text sx={ { color: 'texts.helper', fontWeight: 'medium' } }>Text Helper</Text>
 			<Text sx={ { color: 'texts.helper', fontWeight: 'bold' } }>Text Helper</Text>
-			<Text sx={ { color: 'texts.helper', fontWeight: 'light' } }>Text Helper</Text>
 
 			<Text sx={ { color: 'texts.secondary' } }>Text Secondary</Text>
 

package/src/system/Text/Text.tsx

@@ -13,7 +13,6 @@ export const Text = forwardRef< HTMLDivElement, ThemeTextProps >(
 		<ThemeText
 			as="p"
 			sx={ {
-				lineHeight: 'body',
 				marginBottom: 2,
 				color: 'text',
 				...sx,

package/src/system/Toolbar/Logo.tsx

@@ -37,11 +37,28 @@ export const Logo = ( { className, as = 'a', href }: LogoProps ) => (
 		<svg
 			className={ classNames( VIP_LOGO, className ) }
 			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 55 24"
+			viewBox="0 0 393.6 176.6"
 			role="img"
 			aria-label="WordPress VIP Logo"
+			sx={ {
+				display: 'block',
+				width: '100%',
+				height: 'auto',
+			} }
 		>
-			<path d="m12.014 0c-6.6103 0-12.014 5.3911-12.014 11.986 0 6.6226 5.4034 12.014 12.014 12.014 6.6377 0 12.041-5.3911 12.041-12.014 0-6.5952-5.4035-11.986-12.041-11.986zm-10.807 11.986c0-1.5598 0.32914-3.0376 0.93257-4.3786l5.1566 14.094c-3.5931-1.7515-6.0891-5.4459-6.0891-9.715zm10.807 10.782c-1.0697 0-2.0846-0.1642-3.0446-0.4378l3.2366-9.4139 3.3189 9.0855c0.0274 0.0547 0.0548 0.1094 0.0823 0.1368-1.1246 0.4105-2.3315 0.6294-3.5932 0.6294zm1.5086-15.818c0.6583-0.02737 1.2343-0.10946 1.2343-0.10946 0.576-0.0821 0.5211-0.93045-0.0823-0.87572 0 0-1.7554 0.13683-2.88 0.13683-1.0697 0-2.8526-0.13683-2.8526-0.13683-0.576-0.02736-0.65828 0.84835-0.05485 0.87572 0 0 0.54857 0.05473 1.1245 0.10946l1.6732 4.5975-2.3589 7.0604-3.9223-11.658c0.65828-0.02737 1.2343-0.10946 1.2343-0.10946 0.576-0.0821 0.52115-0.93045-0.08228-0.87572 0 0-1.7554 0.13683-2.88 0.13683h-0.68572c1.9474-2.9555 5.2663-4.8985 9.024-4.8985 2.8252 0 5.376 1.0673 7.296 2.8187h-0.1371c-1.0697 0-1.8103 0.93044-1.8103 1.9156 0 0.87571 0.5211 1.642 1.0697 2.5177 0.4114 0.71152 0.8777 1.642 0.8777 2.9829 0 0.9304-0.2743 2.0798-0.8228 3.4755l-1.0698 3.5849-3.8948-11.548zm3.9223 14.367l3.2914-9.5233c0.6034-1.5325 0.8229-2.764 0.8229-3.8586 0-0.41049-0.0275-0.76625-0.0823-1.122 0.8503 1.5325 1.3165 3.3113 1.3165 5.1722 0.0275 3.9955-2.112 7.4709-5.3485 9.3318zm17.472-14.86l-2.4412 7.1425c-0.2468 0.8757-0.4663 1.6967-0.5485 2.463h-0.0549c-0.0549-0.7663-0.2743-1.6146-0.5486-2.463l-2.4411-7.1425h-3.2092l4.608 12.068h3.2915l4.608-12.068h-3.264zm4.8548 0l-0.9051 2.3808v9.6602h3.2366v-12.041h-2.3315zm13.879 1.423c-0.7954-1.0946-1.92-1.642-3.3463-1.642-1.5086 0-2.5509 0.60206-3.3189 1.7788h-0.1645l-0.4663-1.5599h-2.6332v17.542h3.2366v-5.0627c0-0.1642-0.0548-0.7389-0.1646-1.7514h0.1646c0.7954 1.0399 1.8103 1.5325 3.2366 1.5325 0.9326 0 1.7554-0.2463 2.4686-0.7389 0.6857-0.4926 1.2342-1.2315 1.6182-2.1619 0.384-0.9579 0.576-2.0799 0.576-3.3661 0-1.9429-0.4114-3.4754-1.2068-4.5701zm-4.2514 8.1825c-0.8229 0-1.4538-0.2737-1.8378-0.8484-0.384-0.5473-0.576-1.4778-0.576-2.7913v-0.3558c0.0275-1.1494 0.2195-1.9703 0.576-2.4629 0.384-0.49259 0.96-0.73888 1.7829-0.73888 0.768 0 1.344 0.30103 1.7006 0.90308 0.3565 0.60203 0.5485 1.4777 0.5485 2.6818 0.0275 2.3809-0.7131 3.6124-2.1942 3.6124z" />
+			<path
+				fill="currentColor"
+				d="m88.3,0C39.6,0,0,39.6,0,88.3s39.6,88.3,88.3,88.3,88.3-39.5,88.3-88.3S137.1,0,88.3,0ZM8.8,88.3c0-11.5,2.5-22.5,6.8-32.4l37.8,103.8c-26-13-44.6-39.9-44.6-71.4Zm79.5,79.5c-7.7,0-15.3-1.1-22.5-3.2l23.7-69.2,24.4,66.9c.2.4.4.7.5,1.1-8.1,2.8-16.7,4.4-26.1,4.4Zm11-116.8c4.8-.4,9-.7,9-.7,4.1-.5,3.8-6.8-.5-6.5,0,0-13,.9-21.2.9-7.7,0-20.9-.9-20.9-.9-4.1-.4-4.8,6.3-.5,6.5,0,0,4.1.5,8.3.7l12.2,34-17.2,52-28.6-86c4.8-.4,9-.7,9-.7,4.1-.5,3.8-6.8-.5-6.5,0,0-13,.9-21.2.9-1.6,0-3.2,0-5.2-.2C36.1,23,60.5,8.8,88.2,8.8c20.7,0,39.5,7.9,53.6,20.9h-1.1c-7.7,0-13.3,6.8-13.3,14.2,0,6.5,3.8,12.2,7.7,18.7,2.9,5.2,6.5,12.2,6.5,21.9,0,6.8-2,15.5-6.1,25.7l-7.9,26.3-28.3-85.5Zm29.2,106l24.3-70.1c4.5-11.3,6.1-20.3,6.1-28.4,0-2.9-.2-5.5-.5-8.1,6.3,11.3,9.7,24.3,9.7,38.1-.3,29.1-16.3,54.8-39.6,68.5Z"
+			/>
+			<path
+				fill="currentColor"
+				d="m323.7,39.2h33.4c7.2,0,13.1.9,17.8,2.5,4.7,1.6,8.5,3.8,11.1,6.5,2.9,2.7,4.7,5.8,5.8,9.3,1.1,3.4,1.8,7.2,1.8,11,0,4.1-.5,8.1-1.8,11.9-1.1,3.8-3.1,7-5.8,10.1-2.7,2.9-6.5,5.1-11,6.6-4.5,1.6-10.4,2.5-17.5,2.5h-14.7v33.4h-19.2V39.2h.1Zm33.3,44.1c3.4,0,6.3-.4,8.5-1.1,2.4-.7,4.1-1.6,5.4-2.9,1.3-1.3,2.1-2.7,2.7-4.5.5-1.8.7-3.8.7-5.9s-.2-4.1-.7-5.8c-.5-1.6-1.4-3.1-2.7-4.1-1.3-1.1-3.1-2-5.4-2.7-2.1-.5-5.1-.9-8.5-.9h-14v27.8h14v.1Z"
+			/>
+			<path
+				fill="currentColor"
+				d="m197.5,39.2h21.9l22.8,66.3,23.4-66.3h21l-35.3,93.9h-18.5l-35.3-93.9Z"
+			/>
+			<path fill="currentColor" fillRule="evenodd" d="m311,39.2h-13.3l-6.3,16.9v76.9h19.6V39.2Z" />
 		</svg>
 	</Link>
 );

package/src/system/Wizard/Wizard.stories.tsx

@@ -30,18 +30,18 @@ export const Primary: Story = {
 		steps: [
 			{
 				title: 'Step One',
-				titleVariant: 'h2',
+				titleVariant: 'h3',
 				subTitle: 'First step description.',
 				children: 'Step one content',
 			},
 			{
 				title: 'Step Two',
-				titleVariant: 'h2',
+				titleVariant: 'h3',
 				subTitle: 'Second step description.',
 			},
 			{
 				title: 'Step Three',
-				titleVariant: 'h2',
+				titleVariant: 'h3',
 			},
 		],
 	},
@@ -52,7 +52,7 @@ export const Default: Story = {
 		const steps: WizardStepProps[] = [
 			{
 				title: 'Choose Domain',
-				titleVariant: 'h2',
+				titleVariant: 'h3',
 				subTitle: 'You can bring a domain name you already own, or buy a new one.',
 				children: (
 					<Box>
@@ -64,16 +64,16 @@ export const Default: Story = {
 			},
 			{
 				title: 'Configure DNS',
-				titleVariant: 'h2',
+				titleVariant: 'h3',
 				summaryTitle: 'Summary of Configure DNS',
 			},
 			{
 				title: 'Configure Certificate',
-				titleVariant: 'h2',
+				titleVariant: 'h3',
 			},
 			{
 				title: 'Verify Domain',
-				titleVariant: 'h2',
+				titleVariant: 'h3',
 			},
 		];
 		return (
@@ -99,7 +99,7 @@ export const WithTitleAutoFocus: Story = {
 		const steps: WizardStepProps[] = [
 			{
 				title: 'Choose Domain',
-				titleVariant: 'h2',
+				titleVariant: 'h3',
 				summary: [
 					{
 						label: 'Demo Label',
@@ -119,7 +119,7 @@ export const WithTitleAutoFocus: Story = {
 			},
 			{
 				title: 'Configure DNS',
-				titleVariant: 'h2',
+				titleVariant: 'h3',
 				onChange: () => setActiveStep( 1 ),
 				actionLabel: 'Edit',
 				actionDisabled: true,
@@ -136,7 +136,7 @@ export const WithTitleAutoFocus: Story = {
 
 			{
 				title: 'Certificate',
-				titleVariant: 'h2',
+				titleVariant: 'h3',
 				summary: [
 					{
 						label: 'Certificate status',
@@ -192,7 +192,7 @@ export const HideStepText: Story = {
 		const steps: WizardStepProps[] = [
 			{
 				title: 'Included Logs',
-				titleVariant: 'h2',
+				titleVariant: 'h3',
 				subTitle: '',
 				children: <Text sx={ { mb: 0 } }>Error Logs</Text>,
 				onChange: () => {

package/src/system/Wizard/WizardStep.tsx

@@ -171,8 +171,6 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
 						sx={ {
 							mb: 0,
 							color: headingColor,
-							fontSize: 2,
-							fontWeight: 'heading',
 							flexGrow: 1,
 						} }
 						ref={ titleRef }