@automattic/vip-design-system 1.2.3 → 1.3.1

package/build/system/theme/{getColor.d.ts → getPropValue.d.ts}

@@ -1,8 +1,9 @@
 declare function _default(theme: any): {
     ValetTheme: any;
-    getColor: (color: any, variant?: string) => any;
+    getPropValue: (prop: any, variant?: string) => any;
     getVariants: (color: any) => {};
     traverse: (root: any) => any;
     resolvePath: (object: any, path: any, defaultValue: any) => any;
+    getHeadingStyles: () => {};
 };
 export default _default;

package/{src/system/theme/getColor.js → build/system/theme/getPropValue.js}

@@ -6,12 +6,12 @@
 // https://www.figma.com/file/sILtW5Cs2tAnPWrSOEVyER/Productive-Color?node-id=1%3A17&t=4kHdpoprxntk5Ilw-0
 
 export default theme => {
-	const getColor = ( color, variant = 'default' ) => {
-		if ( ! theme[ color ] ) {
+	const getPropValue = ( prop, variant = 'default' ) => {
+		if ( ! theme[ prop ] ) {
 			return '#000000';
 		}
 
-		return theme[ color ][ variant ].value;
+		return theme[ prop ][ variant ].value;
 	};
 
 	const resolvePath = ( object, path, defaultValue ) => {
@@ -43,11 +43,43 @@ export default theme => {
 		);
 	};
 
+	// We get the following format: '1', '2', '3', 'caps'.
+	// We need to build h1: {}, h2: {}, h3: {}, caps: {}.
+	const getHeadingStyles = () => {
+		const variantValues = getVariants( 'heading' );
+
+		const headingStyles = {};
+		const baseProps = {
+			fontWeight: 'heading',
+			color: 'heading',
+		};
+
+		Object.keys( variantValues ).forEach( variant => {
+			if ( variant === 'caps' ) {
+				headingStyles.caps = {
+					...variantValues[ variant ],
+					...baseProps,
+				};
+			}
+
+			if ( parseInt( variant, 10 ) > 0 ) {
+				headingStyles[ `h${ variant }` ] = {
+					...variantValues[ variant ],
+					...baseProps,
+					fontFamily: variant.toString() === '1' ? 'serif' : 'body',
+				};
+			}
+		} );
+
+		return headingStyles;
+	};
+
 	return {
 		ValetTheme: traverse( theme ),
-		getColor,
+		getPropValue,
 		getVariants,
 		traverse,
 		resolvePath,
+		getHeadingStyles,
 	};
 };

package/build/system/theme/index.d.ts

@@ -1,32 +1,31 @@
 declare namespace _default {
     export { outline };
-    export let space: number[];
+    export let space: {};
     export { fonts };
-    export let fontSizes: number[];
+    export let fontSizes: {};
     export namespace fontWeights {
-        let body: number;
-        let heading: number;
-        let bold: number;
-    }
-    export namespace lineHeights {
-        let body_1: number;
-        export { body_1 as body };
-        let heading_1: number;
-        export { heading_1 as heading };
+        let body: any;
+        let heading: any;
+        let regular: any;
+        let bold: any;
+        let medium: any;
+        let light: any;
     }
+    export let lineHeights: {};
     export namespace sizes {
         let sidebar: number;
     }
-    export let radii: number[];
+    export let radii: {};
     export namespace config {
         let useColorSchemeMediaQuery: boolean;
     }
     export let initialColorModeName: string;
     export let colors: any;
     export namespace shadows {
-        let low: string;
-        let medium: string;
-        let high: string;
+        export let low: string;
+        let medium_1: string;
+        export { medium_1 as medium };
+        export let high: string;
     }
     export namespace tag {
         let gold: {};
@@ -182,7 +181,8 @@ declare namespace _default {
             };
         };
     }
-    export { textStyles as text };
+    let text_1: {};
+    export { text_1 as text };
     export namespace dialog {
         export namespace modal {
             export let position: string;
@@ -232,50 +232,6 @@ declare namespace _default {
     }
     export namespace styles {
         let root: {
-            h1: {
-                fontSize: number;
-                marginBottom: number;
-                letterSpacing: string;
-                fontWeight: string;
-                fontFamily: string;
-                color: string;
-            };
-            h2: {
-                fontSize: number;
-                marginBottom: number;
-                letterSpacing: string;
-                fontWeight: number;
-                color: string;
-            };
-            h3: {
-                fontSize: number;
-                marginBottom: number;
-                letterSpacing: string;
-                lineHeight: number;
-                fontWeight: string;
-                color: string;
-            };
-            h4: {
-                fontSize: number;
-                marginBottom: number;
-                lineHeight: number;
-                fontWeight: string;
-                color: string;
-            };
-            h5: {
-                fontSize: number;
-                marginBottom: number;
-                lineHeight: number;
-                fontWeight: string;
-                color: string;
-            };
-            caps: {
-                fontSize: number;
-                marginBottom: number;
-                color: string;
-                fontWeight: string;
-                letterSpacing: string;
-            };
             fontFamily: string;
             lineHeight: string;
             fontWeight: string;
@@ -312,11 +268,10 @@ declare namespace outline {
     export { boxShadow_5 as boxShadow };
 }
 declare namespace fonts {
-    let body_2: string;
-    export { body_2 as body };
-    let heading_2: string;
-    export { heading_2 as heading };
+    let body_1: string;
+    export { body_1 as body };
+    let heading_1: string;
+    export { heading_1 as heading };
     export let monospace: string;
     export let serif: string;
 }
-import { textStyles } from './textStyles';

package/build/system/theme/index.js

@@ -1,20 +1,19 @@
 /**
  * Internal dependencies
  */
-import ThemeBuilder from './getColor';
+import ThemeBuilder from './getPropValue';
 
 import Valet from './generated/valet-theme-light.json';
 import ValetDark from './generated/valet-theme-dark.json';
 import ColorBuilder from './colors';
-import { textStyles } from './textStyles';
 
 // Light
-const { getColor, getVariants, ValetTheme } = ThemeBuilder( Valet );
+const { getPropValue, getVariants, ValetTheme, getHeadingStyles } = ThemeBuilder( Valet );
 const light = ColorBuilder( ValetTheme );
 
 // Dark
 const {
-	getColor: getColorDark,
+	getPropValue: getPropValueDark,
 	getVariants: getVariantsDark,
 	ValetTheme: ValetThemeDark,
 } = ThemeBuilder( ValetDark );
@@ -23,15 +22,17 @@ const dark = ColorBuilder( ValetThemeDark );
 
 const outline = {
 	outlineStyle: 'solid',
-	outlineColor: getColor( 'focus', 'inset' ),
+	outlineColor: getPropValue( 'focus', 'inset' ),
 	outlineWidth: '1px',
-	boxShadow: `0 0 0 1px ${ getColor( 'focus', 'inset' ) }, 0 0 0 3px ${ getColor( 'focus' ) }`,
+	boxShadow: `0 0 0 1px ${ getPropValue( 'focus', 'inset' ) }, 0 0 0 3px ${ getPropValue(
+		'focus'
+	) }`,
 };
 
 const fonts = {
-	body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
+	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',
+	monospace: 'inherit',
 	serif: 'recoletaregular, Georgia, serif',
 };
 
@@ -41,7 +42,6 @@ const getComponentColors = ( theme, gColor, gVariants ) => ( {
 	// This has to be in the plural because we already have a flag: text
 	texts: {
 		...theme.text,
-		disabled: '#716e6e',
 	},
 
 	button: {
@@ -175,18 +175,11 @@ const getComponentColors = ( theme, gColor, gVariants ) => ( {
 	secondary: light.gray[ '70' ],
 	muted: gColor( 'text', 'helper' ),
 	border: gColor( 'border', '1' ),
-	borders: {
-		1: gColor( 'border', '1' ),
-		2: gColor( 'border', '2' ),
-		3: gColor( 'border', '3' ),
-		4: gColor( 'border', '4' ),
-		inverse: gColor( 'border', 'inverse' ),
-		accent: gColor( 'border', 'accent' ),
-	},
+	borders: gVariants( 'border' ),
 	hover: 'rgba(0,0,0,.02)',
 	darken: 'rgba(0,0,0,.05)',
 	placeholder: gVariants( 'input.text' ).placeholder,
-	midnight: '#13191E',
+	midnight: gVariants( 'input.background' ).primary,
 	dialog: light.gray[ '0' ],
 	backgroundMuted: gColor( 'layer', '1' ),
 
@@ -201,60 +194,37 @@ const getComponentColors = ( theme, gColor, gVariants ) => ( {
 
 	// Link
 	link: gColor( 'link', 'default' ),
-	links: {
-		default: gColor( 'link', 'default' ),
-		hover: gColor( 'link', 'hover' ),
-		active: gColor( 'link', 'active' ),
-		visited: gColor( 'link', 'visited' ),
-	},
+	links: gVariants( 'link' ),
 } );
 
 export default {
 	outline,
-	space: [ 0, 4, 8, 16, 32, 64, 128, 256, 512 ],
+	space: getVariants( 'space' ),
 	fonts,
-	fontSizes: [ 10, 12, 14, 19, 32, 40, 56, 64, 96 ],
+	fontSizes: getVariants( 'fontSize.static' ),
 	fontWeights: {
-		body: 400,
-		heading: 500,
-		bold: 600,
-	},
-	lineHeights: {
-		body: 1.6,
-		heading: 1.125,
+		body: getPropValue( 'fontWeight', 'body' ),
+		heading: getPropValue( 'fontWeight', 'heading' ),
+		regular: getPropValue( 'fontWeight', 'regular' ),
+		bold: getPropValue( 'fontWeight', 'bold' ),
+		medium: getPropValue( 'fontWeight', 'medium' ),
+		light: getPropValue( 'fontWeight', 'light' ),
 	},
+	lineHeights: getVariants( 'lineHeight' ),
 	sizes: {
 		sidebar: 260,
 	},
-	radii: [ 0, 4, 8 ],
+	radii: getVariants( 'borderRadius.static' ),
 	config: {
 		useColorSchemeMediaQuery: false,
 	},
 	initialColorModeName: 'light',
 	colors: {
-		...getComponentColors( ValetTheme, getColor, getVariants ),
+		...getComponentColors( ValetTheme, getPropValue, getVariants ),
 		...light,
 		modes: {
 			dark: {
-				...getComponentColors( ValetThemeDark, getColorDark, getVariantsDark ),
-				// text: dark.grey[ '90' ],
-				// heading: dark.grey[ '100' ],
-				// background: dark.grey[ '5' ],
-				// backgroundSecondary: dark.grey[ '10' ],
-				// primary: light.brand[ '70' ],
-				// secondary: '#30c',
-				// muted: dark.grey[ '90' ],
-				// link: dark.brand[ '90' ],
-				// card: dark.grey[ '20' ],
-				// placeholder: dark.grey[ '70' ],
-				// border: dark.grey[ '30' ],
-				// hover: 'rgba(255,255,255,.02)',
-				// midnight: dark.grey[ '90' ],
-				// success: dark.green[ '90' ],
-				// error: dark.red[ '90' ],
-				// warning: dark.yellow[ '90' ],
-				// dialog: dark.grey[ '40' ],
-				// backgroundMuted: dark.grey[ '10' ],
+				...getComponentColors( ValetThemeDark, getPropValueDark, getVariantsDark ),
 				...dark,
 			},
 		},
@@ -304,7 +274,7 @@ export default {
 			bg: 'button.primary.background.default',
 			border: '1px solid transparent',
 			cursor: 'pointer',
-			fontWeight: '500',
+			fontWeight: 'medium',
 			boxShadow: 'none',
 			borderRadius: 1,
 			'&:hover, &:focus': {
@@ -433,7 +403,7 @@ export default {
 		},
 	},
 
-	text: textStyles,
+	text: getHeadingStyles(),
 
 	dialog: {
 		modal: {
@@ -494,7 +464,7 @@ export default {
 			p: {
 				color: 'text',
 			},
-			...textStyles,
+			...getHeadingStyles(),
 		},
 	},
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "1.2.3",
+  "version": "1.3.1",
   "main": "build/system/index.js",
   "scripts": {
     "build-storybook": "storybook build",
@@ -20,8 +20,8 @@
     "theme-builder-copy-light": "mkdir -p build/system/theme/generated/ && cp src/system/theme/generated/valet-theme-light.json build/system/theme/generated/valet-theme-light.json",
     "theme-builder-copy-dark": "mkdir -p build/system/theme/generated/ && cp src/system/theme/generated/valet-theme-dark.json build/system/theme/generated/valet-theme-dark.json",
     "theme-update": "npm run theme-update-light && npm run theme-update-dark",
-    "theme-update-light": "token-transformer tokens/valet-core src/system/theme/generated/valet-theme-light.json valet-core,wpvip-productive-color",
-    "theme-update-dark": "token-transformer tokens/valet-core src/system/theme/generated/valet-theme-dark.json valet-core,wpvip-productive-color-dark",
+    "theme-update-light": "token-transformer tokens/valet-core src/system/theme/generated/valet-theme-light.json valet-core,wpvip-product-core",
+    "theme-update-dark": "token-transformer tokens/valet-core src/system/theme/generated/valet-theme-dark.json valet-core,wpvip-product-core,wpvip-product-dark",
     "lint": "npm run cmd:lint .",
     "lint:fix": "npm run cmd:lint . -- --fix",
     "storybook": "storybook dev -p 6006",
@@ -106,7 +106,7 @@
     "react-dom": "18.2.0",
     "storybook": "7.4.5",
     "theme-ui": "0.16.0",
-    "token-transformer": "^0.0.29",
+    "token-transformer": "0.0.33",
     "typescript": "5.2.2"
   }
 }

package/src/system/Accordion/Accordion.stories.tsx

@@ -53,7 +53,7 @@ const ExampleAccordion = () => (
 export const Default = () => <ExampleAccordion />;
 
 export const WithLargeText = () => (
-	<Box sx={ { '.vip-heading-component > button': { fontSize: '25px' } } }>
+	<Box sx={ { '.vip-heading-component > button': { fontSize: 4 } } }>
 		<ExampleAccordion />
 	</Box>
 );

package/src/system/Accordion/Accordion.test.tsx

@@ -1,3 +1,6 @@
+// TODO: Fix this
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
 /** @jsxImportSource theme-ui */
 
 /**

package/src/system/Accordion/Accordion.tsx

@@ -66,12 +66,12 @@ export const Item = ( { children, ...props }: AccordionItemProps ) => (
 
 			'&:first-of-type': {
 				borderTopWidth: '1px',
-				borderTopLeftRadius: 4,
-				borderTopRightRadius: 4,
+				borderTopLeftRadius: 1,
+				borderTopRightRadius: 1,
 			},
 			'&:last-child': {
-				borderBottomLeftRadius: 4,
-				borderBottomRightRadius: 4,
+				borderBottomLeftRadius: 1,
+				borderBottomRightRadius: 1,
 			},
 			'&:focus-within': ( theme: AccordionTheme ) => theme.outline,
 		} }
@@ -104,7 +104,7 @@ export const Trigger = React.forwardRef< HTMLButtonElement, TriggerProps >(
 					alignItems: 'center',
 					justifyContent: 'space-between',
 					fontSize: 1,
-					fontWeight: 600,
+					fontWeight: 'bold',
 
 					'&[data-state="closed"]': {
 						backgroundColor: 'accordion.background.closed',
@@ -193,7 +193,7 @@ export const Root = React.forwardRef< HTMLDivElement, RootProps >(
 			type="single"
 			ref={ forwardRef }
 			sx={ {
-				borderRadius: 6,
+				borderRadius: 2,
 				...sx,
 			} }
 			{ ...props }

package/src/system/Avatar/Avatar.tsx

@@ -27,7 +27,7 @@ export const Avatar = forwardRef< HTMLElement, AvatarImageProps >(
 	) => (
 		<Box
 			sx={ {
-				borderRadius: 9999,
+				borderRadius: '100%',
 				height: size + 2, // +2 to compensate padding on both sides
 				width: size + 2, // +2 to compensate padding on both sides
 				border: '2px solid',
@@ -38,7 +38,7 @@ export const Avatar = forwardRef< HTMLElement, AvatarImageProps >(
 				alignItems: 'center',
 				justifyContent: 'center',
 				color: 'white',
-				padding: '1px',
+				padding: '1px', // this should probably be replaced with a token
 				textAlign: 'center',
 			} }
 			className={ classNames( 'vip-avatar-component', className ) }
@@ -51,7 +51,7 @@ export const Avatar = forwardRef< HTMLElement, AvatarImageProps >(
 					src={ src }
 					alt={ `Avatar image from ${ name }` }
 					sx={ {
-						borderRadius: 9999,
+						borderRadius: '100%',
 						width: '100%',
 						display: 'block',
 					} }

package/src/system/Badge/Badge.tsx

@@ -20,7 +20,7 @@ export const Badge = forwardRef< HTMLDivElement, BadgeProps >(
 			as="span"
 			sx={ {
 				fontSize: 0,
-				padding: 0,
+				padding: 0, // do we need padding declared twice here?
 				bg: `tag.${ variant }.background`,
 				color: `tag.${ variant }.text`,
 				py: 1,

package/src/system/Button/Button.stories.tsx

@@ -10,8 +10,7 @@ import { BiCalendarHeart } from 'react-icons/bi';
  * Internal dependencies
  */
 import ScreenReaderText from '../ScreenReaderText';
-import { Button } from '..';
-import variants from './variants';
+import { Button, ButtonVariant } from '..';
 
 export default {
 	title: 'Button',
@@ -23,7 +22,7 @@ export default {
 		},
 		variant: {
 			type: 'select',
-			options: variants,
+			options: Object.values( ButtonVariant ),
 		},
 	},
 	parameters: {

package/src/system/Button/{Button.test.js → Button.test.tsx}

@@ -23,7 +23,7 @@ describe( '<Button />', () => {
 		expect( onClick ).toHaveBeenCalledTimes( 1 );
 
 		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
+		expect( await axe( container ) ).toHaveNoViolations();
 	} );
 
 	it( 'renders the Button with disabled prop', async () => {
@@ -43,6 +43,6 @@ describe( '<Button />', () => {
 		expect( onClick ).toHaveBeenCalledTimes( 0 );
 
 		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
+		expect( await axe( container ) ).toHaveNoViolations();
 	} );
 } );

package/src/system/Button/Button.tsx

@@ -11,9 +11,21 @@ interface ButtonTheme extends Theme {
 	outline?: Record< string, string >;
 }
 
+export enum ButtonVariant {
+	'danger',
+	'display',
+	'ghost',
+	'icon',
+	'primary',
+	'secondary',
+	'tertiary',
+	'text',
+}
+
 export interface ButtonProps extends ThemeButtonProps {
 	disabled?: boolean;
 	onClick?: ( event: ButtonClickType ) => void;
+	variant?: keyof typeof ButtonVariant; // converts the enum to a string union type
 }
 
 const Button = forwardRef< HTMLButtonElement, ButtonProps >(

package/src/system/Button/ButtonSubmit.stories.tsx

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { ButtonSubmit } from '..';
+
+export default {
+	title: 'ButtonSubmit',
+	component: ButtonSubmit,
+};
+
+type Story = StoryObj< typeof ButtonSubmit >;
+
+export const Primary: Story = {
+	render: () => <ButtonSubmit label="Primary" variant="primary" sx={ { ml: 2 } } />,
+};
+
+export const Secondary: Story = {
+	render: () => <ButtonSubmit label="Secondary" variant="secondary" sx={ { ml: 2 } } />,
+};
+
+export const Loading: Story = {
+	render: () => (
+		<ButtonSubmit label="Loading" loading={ true } variant="primary" sx={ { ml: 2 } } />
+	),
+};

package/src/system/Button/{ButtonSubmit.test.js → ButtonSubmit.test.tsx}

@@ -17,15 +17,15 @@ describe( '<ButtonSubmit />', () => {
 	it( 'renders the ButtonSubmit component', async () => {
 		const { container } = render( <ButtonSubmit { ...defaultProps } /> );
 
-		expect( screen.getByRole( 'button', { label: 'Load more items' } ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'Load more items' } ) ).toBeInTheDocument();
 
 		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
+		expect( await axe( container ) ).toHaveNoViolations();
 	} );
 
-	it( 'renders the ButtonSubmit loading', async () => {
+	it( 'renders the ButtonSubmit loading', () => {
 		render( <ButtonSubmit { ...defaultProps } loading={ true } /> );
-		const button = screen.getByRole( 'button', { label: 'Load more items' } );
+		const button = screen.getByRole( 'button', { name: 'Load more items Loading' } );
 
 		// Button
 		expect( button ).toHaveAttribute( 'aria-disabled', 'true' );