@automattic/vip-design-system 2.18.1 → 2.19.0

package/build/system/theme/index.js

@@ -16,6 +16,7 @@ var _ThemeBuilder = ThemeBuilder(Valet),
   ValetTheme = _ThemeBuilder.ValetTheme,
   getHeadingStyles = _ThemeBuilder.getHeadingStyles;
 var light = ColorBuilder(ValetTheme);
+var supportLabelDefaultTypography = getPropValue('support', 'label-default');
 
 // Dark
 var _ThemeBuilder2 = ThemeBuilder(ValetDark),
@@ -29,12 +30,6 @@ var outline = {
   outlineWidth: '1px',
   boxShadow: "0 0 0 1px " + getPropValue('focus', 'inset') + ", 0 0 0 3px " + getPropValue('focus')
 };
-var fonts = {
-  body: '-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
-  heading: 'inherit',
-  monospace: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace',
-  serif: 'recoletaregular, Georgia, serif'
-};
 var getComponentColors = function getComponentColors(theme, gColor, gVariants) {
   return {
     // Valet Theme Colors
@@ -175,13 +170,15 @@ var getComponentColors = function getComponentColors(theme, gColor, gVariants) {
 export default {
   outline: outline,
   space: getVariants('space'),
-  fonts: fonts,
+  fonts: {
+    monospace: getPropValue('fontFamily', 'monospace'),
+    "default": getPropValue('fontFamily', 'default')
+  },
   fontSizes: getVariants('fontSize.static'),
   breakpoints: generateBreakpoints(getVariants('breakpoint')),
   fontWeights: {
-    body: getPropValue('fontWeight', 'body'),
-    heading: getPropValue('fontWeight', 'heading'),
     regular: getPropValue('fontWeight', 'regular'),
+    semibold: getPropValue('fontWeight', 'semibold'),
     bold: getPropValue('fontWeight', 'bold'),
     medium: getPropValue('fontWeight', 'medium'),
     light: getPropValue('fontWeight', 'light')
@@ -276,9 +273,13 @@ export default {
       }
     }
   },
+  forms: {
+    label: _extends({}, supportLabelDefaultTypography)
+  },
   buttons: {
-    primary: {
-      fontFamily: 'body',
+    primary: _extends({}, supportLabelDefaultTypography, {
+      // Button label weight: theme `medium` (500).
+      fontWeight: 'medium',
       color: 'button.primary.label.default',
       bg: 'button.primary.background.default',
       border: '1px solid transparent',
@@ -287,7 +288,6 @@ export default {
       minHeight: '38px',
       display: 'inline-flex',
       cursor: 'pointer',
-      fontWeight: 'medium',
       boxShadow: 'none',
       borderRadius: 1,
       '&:hover': {
@@ -326,7 +326,7 @@ export default {
         backgroundColor: 'button.secondary.background.disabled',
         color: 'button.secondary.label.default'
       }
-    },
+    }),
     secondary: {
       variant: 'buttons.primary',
       color: 'button.secondary.label.default',
@@ -490,7 +490,14 @@ export default {
       variant: 'buttons.tertiary'
     }
   },
-  text: getHeadingStyles(),
+  text: _extends({}, getHeadingStyles(), getVariants('body'), {
+    'support-helper-text': getPropValue('support', 'helper-text'),
+    'support-label-xs': getPropValue('support', 'label-xs'),
+    'support-label-small': getPropValue('support', 'label-small'),
+    'support-label-default': getPropValue('support', 'label-default'),
+    'support-label-default-quiet': getPropValue('support', 'label-default-quiet'),
+    'support-label-default-loud': getPropValue('support', 'label-default-loud')
+  }),
   dialog: {
     modal: {
       position: 'fixed',
@@ -569,10 +576,10 @@ export default {
     }
   },
   styles: {
-    root: _extends({
-      fontFamily: 'body',
-      lineHeight: 'body',
-      fontWeight: 'body',
+    root: {
+      fontFamily: getPropValue('body', 'default').fontFamily,
+      lineHeight: getPropValue('body', 'default').lineHeight,
+      fontWeight: getPropValue('body', 'default').fontWeight,
       color: 'text',
       backgroundColor: 'backgrounds.primary',
       webkitFontSmoothing: 'antialiased',
@@ -589,11 +596,11 @@ export default {
         display: 'block'
       },
       pre: {
-        fontFamily: 'body'
+        fontFamily: 'default'
       },
       p: {
         color: 'text'
       }
-    }, getHeadingStyles())
+    }
   }
 };

package/docs/SETUP.md

@@ -41,7 +41,7 @@ Run:
 npm run dev
 ```
 
-You can then visit [http://localhost:60006/](http://localhost:60006/) to view.
+You can then visit [http://localhost:6006/](http://localhost:6006/) to view.
 
 ## Updating dependencies
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "2.18.1",
+  "version": "2.19.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/Automattic/vip-design-system"

package/src/system/Badge/Badge.tsx

@@ -27,6 +27,7 @@ export const Badge = forwardRef< HTMLDivElement, BadgeProps >(
 			as="span"
 			sx={ {
 				fontSize: 0,
+				letterSpacing: '0.01em',
 				padding: 0, // do we need padding declared twice here?
 				bg: `tag.${ variant }.background`,
 				color: `tag.${ variant }.text`,
@@ -35,7 +36,7 @@ export const Badge = forwardRef< HTMLDivElement, BadgeProps >(
 				px: 2,
 				display: 'inline-block',
 				borderRadius: 1,
-				fontWeight: 'heading',
+				fontWeight: 'medium',
 				a: {
 					color: `tag.${ variant }.text`,
 					'&:hover, &:focus, &:active': {

package/src/system/DescriptionList/DescriptionList.tsx

@@ -42,7 +42,6 @@ const TableComponent = ( { list, className, sx, title }: DescriptionListProps )
 			minWidth: 'auto',
 			'> tbody > tr': {
 				'> td, > th': {
-					fontWeight: 'heading',
 					border: 'none',
 					pl: 0,
 					'&:first-of-type': { pl: 0 },

package/src/system/Form/Label.tsx

@@ -13,9 +13,7 @@ import { RequiredLabel } from './RequiredLabel';
 
 export const baseLabelColor = 'input.label.default';
 export const baseLabelStyle = {
-	fontWeight: 'heading',
-	fontSize: 2,
-	lineHeight: 1.5,
+	variant: 'forms.label',
 	color: baseLabelColor,
 };
 

package/src/system/Form/RadioBoxGroup.jsx

@@ -72,7 +72,14 @@ const RadioOption = ( {
 				{ ...restOption }
 			/>
 			<div
-				sx={ { mb: 0, color: 'input.radio-box.label.primary.default', p: 3, pr: 0, flex: 'auto' } }
+				sx={ {
+					mb: 0,
+					color: 'input.radio-box.label.primary.default',
+					fontWeight: 'semibold',
+					p: 3,
+					pr: 0,
+					flex: 'auto',
+				} }
 			>
 				<label htmlFor={ forLabel } { ...labelProps }>
 					{ label }
@@ -82,7 +89,11 @@ const RadioOption = ( {
 						sx={ {
 							color: 'input.radio-box.label.secondary.default',
 							mb: 0,
+							mt: 1,
 							fontSize: 1,
+							fontWeight: 'regular',
+							letterSpacing: '0.01em',
+							lineHeight: '140%',
 							display: 'block',
 						} }
 						id={ describedById }

package/src/system/Form/RadioBoxGroup.stories.jsx

@@ -60,7 +60,12 @@ export const Primary = {
 	args: {
 		defaultValue: 'one',
 		options: [
-			{ label: 'One', value: 'one', description: 'This is a description' },
+			{
+				label: 'One',
+				value: 'one',
+				description:
+					'This is a longer description that allows us to see the text wrap and determine if the line height is correct',
+			},
 			{ label: 'Two', value: 'two', description: 'This is a description' },
 			{ label: 'Three', value: 'three', description: 'This is a description' },
 		],

package/src/system/Heading/Heading.stories.tsx

@@ -27,7 +27,16 @@ export const Default: Story = {
 			<Heading variant="h3">Heading Three</Heading>
 			<Heading variant="h4">Heading Four</Heading>
 			<Heading variant="h5">Heading Five</Heading>
-			<Heading variant="h6">Heading Six</Heading>
+
+			<Heading variant="h3" as="h1">
+				Heading One with Heading Three Styles
+			</Heading>
+			<Heading as="p" sx={ { variant: 'text.caps' } }>
+				Paragraph with Caps Styles
+			</Heading>
+			<Heading as="h3" sx={ { variant: 'text.caps' } }>
+				Heading Three with Caps Styles
+			</Heading>
 		</Box>
 	),
 };

package/src/system/Heading/Heading.tsx

@@ -20,10 +20,9 @@ export const Heading = forwardRef< HTMLHeadingElement, HeadingProps >(
 	( { variant = 'h3', sx, className, ...rest }: HeadingProps, ref: Ref< HTMLHeadingElement > ) => (
 		<ThemeHeading
 			as={ variant }
+			variant={ variant }
 			sx={ {
 				color: 'heading',
-				// pass variant prop to sx
-				variant: `text.${ variant.toString() }`,
 				...sx,
 			} }
 			className={ classNames( 'vip-heading-component', className ) }

package/src/system/Nav/styles/variants/menu.ts

@@ -51,8 +51,7 @@ export const menuItemLinkStyles: MixedStyleProp = {
 	borderRadius: 1,
 	color: 'text',
 	display: 'inline-flex',
-	fontSize: '0.875rem',
-	fontWeight: 'body',
+	variant: 'text.default',
 	height: 38,
 	mx: 0,
 	mb: 0,

package/src/system/Notice/Notice.tsx

@@ -240,7 +240,7 @@ export const Notice = React.forwardRef< HTMLDivElement, NoticeProps >(
 							as={ headingVariant }
 							sx={ {
 								color: textColor,
-								mb: 0,
+								mb: 1,
 								fontSize: 2,
 								fontWeight: 'bold',
 							} }

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 }