@automattic/vip-design-system 2.18.1 → 2.19.0

package/.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="https://use.typekit.net/yym8qzc.css" />

package/build/system/Badge/Badge.js

@@ -25,6 +25,7 @@ export var Badge = /*#__PURE__*/forwardRef(function (_ref, ref) {
     as: "span",
     sx: _extends({
       fontSize: 0,
+      letterSpacing: '0.01em',
       padding: 0,
       // do we need padding declared twice here?
       bg: "tag." + variant + ".background",
@@ -34,7 +35,7 @@ export var Badge = /*#__PURE__*/forwardRef(function (_ref, ref) {
       px: 2,
       display: 'inline-block',
       borderRadius: 1,
-      fontWeight: 'heading',
+      fontWeight: 'medium',
       a: {
         color: "tag." + variant + ".text",
         '&:hover, &:focus, &:active': {

package/build/system/DescriptionList/DescriptionList.js

@@ -21,7 +21,6 @@ var TableComponent = function TableComponent(_ref) {
       minWidth: 'auto',
       '> tbody > tr': {
         '> td, > th': {
-          fontWeight: 'heading',
           border: 'none',
           pl: 0,
           '&:first-of-type': {

package/build/system/Form/Label.d.ts

@@ -6,9 +6,7 @@ import React from 'react';
 import { BoxProps } from 'theme-ui';
 export declare const baseLabelColor = "input.label.default";
 export declare const baseLabelStyle: {
-    fontWeight: string;
-    fontSize: number;
-    lineHeight: number;
+    variant: string;
     color: string;
 };
 export interface LabelProps extends BoxProps {

package/build/system/Form/Label.js

@@ -16,9 +16,7 @@ import { RequiredLabel } from './RequiredLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 export var baseLabelColor = 'input.label.default';
 export var baseLabelStyle = {
-  fontWeight: 'heading',
-  fontSize: 2,
-  lineHeight: 1.5,
+  variant: 'forms.label',
   color: baseLabelColor
 };
 /**

package/build/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/build/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/build/system/Heading/Heading.js

@@ -19,10 +19,9 @@ export var Heading = /*#__PURE__*/forwardRef(function (_ref, ref) {
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   return _jsx(ThemeHeading, _extends({
     as: variant,
+    variant: variant,
     sx: _extends({
-      color: 'heading',
-      // pass variant prop to sx
-      variant: "text." + variant.toString()
+      color: 'heading'
     }, sx),
     className: classNames('vip-heading-component', className),
     ref: ref

package/build/system/Heading/Heading.stories.js

@@ -32,8 +32,21 @@ export var Default = {
         variant: "h5",
         children: "Heading Five"
       }), _jsx(Heading, {
-        variant: "h6",
-        children: "Heading Six"
+        variant: "h3",
+        as: "h1",
+        children: "Heading One with Heading Three Styles"
+      }), _jsx(Heading, {
+        as: "p",
+        sx: {
+          variant: 'text.caps'
+        },
+        children: "Paragraph with Caps Styles"
+      }), _jsx(Heading, {
+        as: "h3",
+        sx: {
+          variant: 'text.caps'
+        },
+        children: "Heading Three with Caps Styles"
       })]
     });
   }

package/build/system/Nav/styles/variants/menu.js

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

package/build/system/Notice/Notice.js

@@ -236,7 +236,7 @@ export var Notice = /*#__PURE__*/React.forwardRef(function (_ref2, forwardRef) {
         as: headingVariant,
         sx: {
           color: textColor,
-          mb: 0,
+          mb: 1,
           fontSize: 2,
           fontWeight: 'bold'
         },

package/build/system/Pagination/styles.js

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

package/build/system/Table/TableCell.js

@@ -27,7 +27,7 @@ export var TableCell = function TableCell(_ref) {
     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/build/system/Text/Text.js

@@ -19,7 +19,6 @@ export var Text = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return _jsx(ThemeText, _extends({
     as: "p",
     sx: _extends({
-      lineHeight: 'body',
       marginBottom: 2,
       color: 'text'
     }, sx),

package/build/system/Text/Text.stories.js

@@ -20,6 +20,21 @@ export var Default = {
     return _jsxs(_Fragment, {
       children: [_jsxs(Text, {
         children: ["Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.", ' ']
+      }), _jsx(Text, {
+        variant: "default",
+        children: "Body Default"
+      }), _jsx(Text, {
+        variant: "small",
+        children: "Body Small"
+      }), _jsx(Text, {
+        variant: "large",
+        children: "Body Large"
+      }), _jsx(Text, {
+        variant: "mono",
+        children: "Body Mono"
+      }), _jsx(Text, {
+        variant: "mono-bold",
+        children: "Body Mono Bold"
       }), _jsx(Text, {
         sx: {
           color: 'texts.accent'
@@ -33,13 +48,7 @@ export var Default = {
       }), _jsx(Text, {
         sx: {
           color: 'texts.helper',
-          fontWeight: 'body'
-        },
-        children: "Text Helper"
-      }), _jsx(Text, {
-        sx: {
-          color: 'texts.helper',
-          fontWeight: 'heading'
+          fontWeight: 'light'
         },
         children: "Text Helper"
       }), _jsx(Text, {
@@ -60,12 +69,6 @@ export var Default = {
           fontWeight: 'bold'
         },
         children: "Text Helper"
-      }), _jsx(Text, {
-        sx: {
-          color: 'texts.helper',
-          fontWeight: 'light'
-        },
-        children: "Text Helper"
       }), _jsx(Text, {
         sx: {
           color: 'texts.secondary'

package/build/system/Toolbar/Logo.js

@@ -10,7 +10,7 @@ import { Link } from 'theme-ui';
 /**
  * Internal dependencies
  */
-import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 var VIP_LOGO = 'vip-logo-component';
 /**
  * The WordPress VIP logo rendered as an SVG inside a themed link.
@@ -29,15 +29,31 @@ export var Logo = function Logo(_ref) {
     },
     href: href,
     as: as,
-    children: _jsx("svg", {
+    children: _jsxs("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",
-      children: _jsx("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"
-      })
+      sx: {
+        display: 'block',
+        width: '100%',
+        height: 'auto'
+      },
+      children: [_jsx("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"
+      }), _jsx("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"
+      }), _jsx("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"
+      }), _jsx("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "m311,39.2h-13.3l-6.3,16.9v76.9h19.6V39.2Z"
+      })]
     })
   });
 };

package/build/system/Wizard/Wizard.stories.js

@@ -24,16 +24,16 @@ export var Primary = {
     summaryAs: 'dl',
     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'
     }]
   }
 };
@@ -41,7 +41,7 @@ export var Default = {
   render: function render() {
     var steps = [{
       title: 'Choose Domain',
-      titleVariant: 'h2',
+      titleVariant: 'h3',
       subTitle: 'You can bring a domain name you already own, or buy a new one.',
       children: _jsxs(Box, {
         children: [_jsx(Label, {
@@ -57,14 +57,14 @@ export var Default = {
       })
     }, {
       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 _jsx(React.Fragment, {
       children: _jsx(Box, {
@@ -90,7 +90,7 @@ export var WithTitleAutoFocus = {
       setAutoFocus = _React$useState2[1];
     var steps = [{
       title: 'Choose Domain',
-      titleVariant: 'h2',
+      titleVariant: 'h3',
       summary: [{
         label: 'Demo Label',
         value: 'Demo value'
@@ -115,7 +115,7 @@ export var WithTitleAutoFocus = {
       })
     }, {
       title: 'Configure DNS',
-      titleVariant: 'h2',
+      titleVariant: 'h3',
       onChange: function onChange() {
         return setActiveStep(1);
       },
@@ -137,7 +137,7 @@ export var WithTitleAutoFocus = {
       })
     }, {
       title: 'Certificate',
-      titleVariant: 'h2',
+      titleVariant: 'h3',
       summary: [{
         label: 'Certificate status',
         value: 'Not found'
@@ -202,7 +202,7 @@ export var HideStepText = {
       setActiveStep = _React$useState3[1];
     var steps = [{
       title: 'Included Logs',
-      titleVariant: 'h2',
+      titleVariant: 'h3',
       subTitle: '',
       children: _jsx(Text, {
         sx: {

package/build/system/Wizard/WizardStep.js

@@ -104,8 +104,6 @@ export var WizardStep = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef
         sx: {
           mb: 0,
           color: headingColor,
-          fontSize: 2,
-          fontWeight: 'heading',
           flexGrow: 1
         },
         ref: titleRef,