@automattic/vip-design-system 0.7.0 → 0.9.0

package/src/system/theme/index.js

@@ -1,261 +1,303 @@
 /**
  * Internal dependencies
  */
- import colors from './colors';
+import { light, dark } from './colors';
 
- export default {
-	 initialColorModeName: 'light',
-	 space: [ 0, 4, 8, 16, 32, 64, 128, 256, 512 ],
-	 fonts: {
-		 body:
-			 '"SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
-		 heading: 'inherit',
-		 monospace: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace',
-	 },
-	 fontSizes: [ 11, 13, 15, 20, 32, 48, 56, 64, 96 ],
-	 fontWeights: {
-		 body: 400,
-		 heading: 500,
-		 bold: 600,
-	 },
-	 lineHeights: {
-		 body: 1.6,
-		 heading: 1.125,
-	 },
-	 sizes: {
-		 sidebar: 260,
-	 },
-	 radii: [ 0, 3, 5 ],
-	 colors: {
-		 text: colors.grey[ '70' ],
-		 heading: colors.grey[ '100' ],
-		 background: colors.brand[ '0' ],
-		 backgroundSecondary: colors.brand[ '3' ],
-		 primary: colors.brand[ '50' ],
-		 secondary: '#30c',
-		 muted: colors.grey[ '60' ],
-		 link: colors.brand[ '70' ],
-		 card: '#fefefe',
-		 border: colors.brand[ '7' ],
-		 hover: 'rgba(0,0,0,.025)',
-		 lightenBackground: 'rgba(255,255,255,.5)',
-		 placeholder: colors.grey[ '40' ],
-		 midnight: '#13191E',
-		 modes: {
-			 dark: {
-				 text: colors.grey[ '30' ],
-				 heading: colors.grey[ '10' ],
-				 background: colors.grey[ '90' ],
-				 backgroundSecondary: colors.grey[ '80' ],
-				 lightenBackground: 'rgba(0,0,0,.1)',
-				 primary: colors.brand[ '50' ],
-				 muted: colors.grey[ '40' ],
-				 link: colors.brand[ '30' ],
-				 card: colors.grey[ '80' ],
-				 placeholder: colors.grey[ '70' ],
-				 border: 'rgba(255,255,255,.08)',
-				 hover: 'rgba(255,255,255,.02)',
-				 midnight: colors.grey[ '90' ],
-			 },
-		 },
-		 ...colors,
-	 },
-	 shadows: {
-		 low:
-		 // eslint-disable-next-line max-len
-			 '0px 0.11069px 0.193708px rgba(0, 0, 0, 0.0196802), 0px 0.266004px 0.465507px rgba(0, 0, 0, 0.0282725), 0px 0.500862px 0.876509px rgba(0, 0, 0, 0.035), 0px 0.893452px 1.56354px rgba(0, 0, 0, 0.0417275), 0px 1.6711px 2.92443px rgba(0, 0, 0, 0.0503198), 0px 4px 7px rgba(0, 0, 0, 0.07)',
-		 medium:
-		 // eslint-disable-next-line max-len
-			 '0px 1.97961px 2.21381px rgba(0, 0, 0, 0.0196802), 0px 4.36146px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 7.34273px 10.0172px rgba(0, 0, 0, 0.035), 0px 11.2752px 17.869px rgba(0, 0, 0, 0.0417275), 0px 16.7372px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 24px 80px rgba(0, 0, 0, 0.07)',
-		 high:
-		 // eslint-disable-next-line max-len
-			 '0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 100px 80px rgba(0, 0, 0, 0.07)',
-	 },
-	 cards: {
-		 primary: {
-			 padding: 3,
-			 borderRadius: 2,
-			 backgroundColor: 'card',
-			 boxShadow: 'low',
-		 },
-		 secondary: {
-			 borderRadius: 2,
-			 p: 3,
-			 boxShadow: 'none',
-			 border: '1px solid',
-			 borderColor: 'border',
-		 },
-		 indent: {
-			 borderRadius: 2,
-			 p: 3,
-			 boxShadow: 'none',
-			 backgroundColor: 'backgroundSecondary',
-		 },
-	 },
+const textStyles = {
+	h1: {
+		fontSize: 5,
+		marginBottom: 3,
+		letterSpacing: '-.02em',
+		fontWeight: 'body',
+		fontFamily: 'serif',
+		color: 'heading',
+	},
+	h2: {
+		fontSize: 4,
+		marginBottom: 2,
+		letterSpacing: '-.005em',
+		fontWeight: 400,
+		color: 'heading',
+	},
+	h3: {
+		fontSize: 3,
+		marginBottom: 3,
+		letterSpacing: '-.005em',
+		lineHeight: 1.4,
+		fontWeight: 'heading',
+		color: 'heading',
+	},
+	h4: {
+		fontSize: 2,
+		marginBottom: 1,
+		lineHeight: 1.5,
+		fontWeight: 'heading',
+		color: 'heading',
+	},
+	h5: {
+		fontSize: 1,
+		marginBottom: 1,
+		lineHeight: 1.5,
+		fontWeight: 'heading',
+		color: 'heading',
+	},
+	caps: {
+		fontSize: 1,
+		marginBottom: 2,
+		textTransform: 'uppercase',
+		color: 'muted',
+		fontWeight: 'bold',
+		letterSpacing: '.05em',
+	},
+};
 
-	 buttons: {
-		 primary: {
-			 // you can reference other values defined in the theme
-			 color: 'white',
-			 bg: colors.brand[ '70' ],
-			 cursor: 'pointer',
-			 fontWeight: 'heading',
-			 boxShadow: 'low',
-			 borderRadius: 1,
-			 border: '1px solid transparent',
-			 svg: { position: 'relative', top: '0.125em' },
-			 '&:hover, &:focus': {
-				 backgroundColor: 'brand.80',
-				 color: 'white',
-			 },
-		 },
-		 danger: {
-			 // you can reference other values defined in the theme
-			 variant: 'buttons.primary',
-			 bg: colors.red[ '70' ],
-			 '&:hover, &:focus': {
-				 backgroundColor: 'red.80',
-			 },
-		 },
-		 secondary: {
-			 color: 'inherit',
-			 cursor: 'pointer',
-			 boxShadow: 'none',
-			 borderRadius: 1,
-			 backgroundColor: 'backgroundSecondary',
-			 svg: { position: 'relative', top: '0.125em' },
-			 '&:hover, &:focus': {
-				 bg: 'brand.7',
-			 },
-		 },
-		 text: {
-			 background: 'none',
-			 boxShadow: 'none',
-			 color: 'link',
-			 cursor: 'pointer',
-			 fontWeight: 'heading',
-			 '&:hover, &:focus': {
-				 color: 'heading',
-				 backgroundColor: 'hover',
-			 },
-		 },
-		 icon: {
-			 background: 'none',
-			 boxShadow: 'none',
-			 color: 'text',
-			 cursor: 'pointer',
-			 fontWeight: 'heading',
-			 padding: 1,
-			 svg: {
-				 display: 'block',
-			 },
-			 '&:hover, &:focus': {
-				 backgroundColor: 'border',
-			 },
-		 },
-	 },
-	 links: {
-		 dark: {
-			 color: 'modes.dark.muted',
-			 '&:hover': { color: 'modes.dark.heading' },
-		 },
-		 hover: {
-			 display: 'block',
-			 color: 'inherit',
-			 py: 1,
-			 px: 2,
-			 my: -1,
-			 mx: -2,
-			 borderRadius: 2,
-			 '&:hover': {
-				 backgroundColor: 'hover',
-			 },
-		 },
-	 },
-	 text: {
-		 h1: {
-			 fontSize: 5,
-			 marginBottom: 3,
-			 letterSpacing: '-.02em',
-			 fontWeight: 'heading',
-		 },
-		 h2: {
-			 fontSize: 4,
-			 marginBottom: 2,
-			 letterSpacing: '-.005em',
-			 fontWeight: 400,
-		 },
-		 h3: {
-			 fontSize: 3,
-			 marginBottom: 3,
-			 letterSpacing: '-.005em',
-			 lineHeight: 1.25,
-			 fontWeight: 'heading',
-		 },
-		 h4: {
-			 fontSize: 2,
-			 marginBottom: 1,
-			 lineHeight: 1.5,
-			 fontWeight: 'heading',
-		 },
-		 h5: {
-			 fontSize: 1,
-			 marginBottom: 1,
-			 lineHeight: 1.5,
-			 fontWeight: 'body',
-		 },
-		 caps: {
-			 fontSize: 1,
-			 marginBottom: 2,
-			 textTransform: 'uppercase',
-			 color: 'muted',
-			 fontWeight: 'bold',
-			 letterSpacing: '.05em',
-		 },
-	 },
-	 dialog: {
-		 modal: {
-			 position: 'fixed',
-			 top: '10vh',
-			 left: '50%',
-			 maxWidth: '90%',
-		 },
-		 sidebar: {
-			 position: 'fixed',
-			 top: '0',
-			 height: '100vh',
-			 left: '0',
-			 overflow: 'auto',
-			 margin: 0,
-			 borderRadius: 0,
-			 backgroundColor: 'background',
-		 },
-		 cover: {
-			 position: 'fixed',
-			 backgroundColor: 'background',
-			 width: '100%',
-			 left: 0,
-			 top: 0,
-			 height: '100vh',
-			 transform: 'none',
-			 borderRadius: 0,
-			 opacity: 0.97,
-		 },
-	 },
-	 styles: {
-		 root: {
-			 fontFamily: 'body',
-			 lineHeight: 'body',
-			 fontWeight: 'body',
-			 letterSpacing: '-.011em',
-			 fontSize: 2,
-			 color: 'text',
-			 backgroundColor: 'background',
-			 'WebkitFontSmoothing': 'antialiased',
-			 'MozOsxFontSmoothing': 'grayscale',
-			 svg: {
-				 fill: 'currentColor',
-			 },
-		 },
-	 },
- };
+export default {
+	space: [ 0, 4, 8, 16, 32, 64, 128, 256, 512 ],
+	fonts: {
+		body:
+			'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
+		heading: 'inherit',
+		monospace: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace',
+		serif: 'recoletaregular, Georgia, serif',
+	},
+	fontSizes: [ 10, 12, 14, 19, 32, 40, 56, 64, 96 ],
+	fontWeights: {
+		body: 400,
+		heading: 500,
+		bold: 600,
+	},
+	lineHeights: {
+		body: 1.6,
+		heading: 1.125,
+	},
+	sizes: {
+		sidebar: 260,
+	},
+	radii: [ 0, 5, 10 ],
+	config: {
+		useColorSchemeMediaQuery: false,
+	},
+	initialColorModeName: 'light',
+	colors: {
+		text: light.grey[ '90' ],
+		heading: light.grey[ '100' ],
+		background: '#fdfdfd',
+		backgroundSecondary: light.grey[ '10' ],
+		primary: light.brand[ '70' ],
+		secondary: '#30c',
+		muted: light.grey[ '90' ],
+		link: light.brand[ '90' ],
+		card: '#fff',
+		border: light.grey[ '20' ],
+		hover: 'rgba(0,0,0,.02)',
+		lightenBackground: 'rgba(255,255,255,.5)',
+		darken: 'rgba(0,0,0,.05)',
+		placeholder: light.grey[ '70' ],
+		midnight: '#13191E',
+		navigationStart: light.grey[ '5' ],
+		navigationEnd: light.grey[ '5' ],
+		success: light.green[ '90' ],
+		error: light.red[ '90' ],
+		warning: light.yellow[ '90' ],
+		dialog: light.grey[ '0' ],
+		backgroundMuted: light.grey[ '5' ],
+		...light,
+		modes: {
+			dark: {
+				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' ],
+				navigationStart: dark.grey[ '5' ],
+				navigationEnd: dark.grey[ '5' ],
+				success: dark.green[ '90' ],
+				error: dark.red[ '90' ],
+				warning: dark.yellow[ '90' ],
+				dialog: dark.grey[ '40' ],
+				backgroundMuted: dark.grey[ '10' ],
+				...dark,
+			},
+		},
+	},
+	shadows: {
+		low: '0px 1px 5px rgba(0, 0, 0, 0.05), 0px 1px 1px rgba(0, 0, 0, 0.15)',
+		medium:
+		// eslint-disable-next-line max-len
+			'0px 15px 30px rgba(0, 0, 0, 0.07), 0px 1px 2px rgba(0, 0, 0, 0.03)',
+		high:
+		// eslint-disable-next-line max-len
+			'0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 100px 80px rgba(0, 0, 0, 0.07)',
+	},
+	cards: {
+		primary: {
+			padding: 3,
+			borderRadius: 2,
+			backgroundColor: 'card',
+			boxShadow: 'low',
+		},
+		secondary: {
+			borderRadius: 2,
+			p: 3,
+			boxShadow: 'none',
+			border: '1px solid',
+			borderColor: 'border',
+		},
+		indent: {
+			borderRadius: 2,
+			p: 3,
+			boxShadow: 'none',
+			backgroundColor: 'backgroundMuted',
+		},
+	},
+
+	buttons: {
+		primary: {
+			// you can reference other values defined in the theme
+			color: 'grey.0',
+			bg: 'grey.100',
+			cursor: 'pointer',
+			fontWeight: 'bold',
+			boxShadow: 'none',
+			borderRadius: 1,
+			border: '1px solid transparent',
+			'&:hover, &:focus': {
+				backgroundColor: 'grey.90',
+				color: 'grey.0',
+			},
+		},
+		border: {
+			background: 'none',
+			border: '1px solid',
+			borderColor: 'border',
+			cursor: 'pointer',
+			display: 'inline-flex',
+			alignItems: 'center',
+			color: 'text',
+			'&:hover': {
+				bg: 'hover',
+			},
+		},
+		danger: {
+			// you can reference other values defined in the theme
+			variant: 'buttons.primary',
+			bg: 'red.70',
+			'&:hover, &:focus': {
+				backgroundColor: 'red.80',
+			},
+		},
+		secondary: {
+			color: 'text',
+			cursor: 'pointer',
+			boxShadow: 'none',
+			fontWeight: 'heading',
+			borderRadius: 1,
+			bg: 'grey.10',
+			'&:hover, &:focus': {
+				color: 'grey.100',
+				bg: 'grey.20',
+			},
+		},
+		text: {
+			background: 'none',
+			boxShadow: 'none',
+			color: 'link',
+			cursor: 'pointer',
+			fontWeight: 'heading',
+			'&:hover, &:focus': {
+				color: 'heading',
+				backgroundColor: 'hover',
+			},
+		},
+		icon: {
+			background: 'none',
+			boxShadow: 'none',
+			color: 'text',
+			cursor: 'pointer',
+			fontWeight: 'heading',
+			padding: 1,
+			'&:hover, &:focus': {
+				backgroundColor: 'border',
+			},
+		},
+	},
+	links: {
+		dark: {
+			color: 'modes.dark.muted',
+			'&:hover': { color: 'modes.dark.heading' },
+		},
+		hover: {
+			display: 'block',
+			color: 'inherit',
+			py: 1,
+			px: 2,
+			my: -1,
+			mx: -2,
+			borderRadius: 2,
+			'&:hover': {
+				backgroundColor: 'hover',
+			},
+		},
+	},
+	text: textStyles,
+	dialog: {
+		modal: {
+			position: 'fixed',
+			top: '10vh',
+			left: '50%',
+			maxWidth: '90%',
+			backgroundColor: 'background',
+			boxShadow: 'high',
+		},
+		sidebar: {
+			position: 'fixed',
+			top: '0',
+			height: '100vh',
+			left: '0',
+			overflow: 'auto',
+			margin: 0,
+			borderRadius: 0,
+			boxShadow: 'high',
+			backgroundColor: 'background',
+		},
+		cover: {
+			position: 'fixed',
+			backgroundColor: 'background',
+			width: '100%',
+			left: 0,
+			top: 0,
+			height: '100vh',
+			transform: 'none',
+			borderRadius: 0,
+			opacity: 0.97,
+		},
+	},
+	styles: {
+		root: {
+			fontFamily: 'body',
+			lineHeight: 'body',
+			fontWeight: 'body',
+			fontSize: 2,
+			color: 'text',
+			backgroundColor: 'background',
+			'-webkit-font-smoothing': 'antialiased',
+			'-moz-osx-font-smoothing': 'grayscale',
+			svg: {
+				fill: 'currentColor',
+				display: 'block',
+			},
+			pre: {
+				fontFamily: 'body',
+			},
+			...textStyles,
+		},
+	},
+};

package/test/setupAfterEnv.js

@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import 'jest-axe/extend-expect';
+import '@testing-library/jest-dom';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+if ( process.env.NODE_ENV !== 'production' ) {
+	const axe = require( '@axe-core/react' );
+
+	axe( React, ReactDOM, 1000 );
+}

package/test/setupTests.js

@@ -0,0 +1,4 @@
+/**
+ * External dependencies
+ */
+import 'regenerator-runtime/runtime';

package/src/system/Timeline/index.js

@@ -1,40 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import { Flex, Text } from 'theme-ui';
-import { MdWatchLater } from 'react-icons/md';
-import PropTypes from 'prop-types';
-
-const VerticalLine = () => {
-	return (
-		<div
-			sx={ {
-				borderLeft: '2px solid',
-				borderColor: 'border',
-				height: 'calc( 50% - 16px )',
-				borderRadius: '2px',
-			} }>
-		</div>
-	);
-};
-
-const Timeline = ( { time, ...props } ) => (
-	<Flex { ...props }>
-		<Flex sx={ { flexDirection: 'column', justifyContent: 'space-evenly', alignItems: 'center' } }>
-			<VerticalLine />
-			<MdWatchLater sx={ { color: 'border' } } size={ 18 }/>
-			<VerticalLine />
-		</Flex>
-		<Flex sx={ { alignItems: 'center', ml: 2 } }>
-			<Text as="span" sx={ { color: 'muted' } }>{ time }</Text>
-		</Flex>
-	</Flex>
-);
-
-Timeline.propTypes = {
-	time: PropTypes.string,
-};
-
-export { Timeline };