@automattic/vip-design-system 1.2.3 → 1.3.1

package/{build/system/theme/getColor.js → src/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/src/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/tokens/utilities/colors/color output/blue.json

@@ -0,0 +1,305 @@
+{
+  "0": {
+    "output": "#fafbff"
+  },
+  "1": {
+    "output": "#f5f9fc"
+  },
+  "2": {
+    "output": "#f0f6fa"
+  },
+  "3": {
+    "output": "#ecf4f8"
+  },
+  "4": {
+    "output": "#e8f2f7"
+  },
+  "5": {
+    "output": "#e5eff6"
+  },
+  "6": {
+    "output": "#e1edf5"
+  },
+  "7": {
+    "output": "#ddebf3"
+  },
+  "8": {
+    "output": "#d8e9f0"
+  },
+  "9": {
+    "output": "#d3e8ee"
+  },
+  "10": {
+    "output": "#cde6eb"
+  },
+  "11": {
+    "output": "#c8e4e9"
+  },
+  "12": {
+    "output": "#c2e3e8"
+  },
+  "13": {
+    "output": "#bde1e7"
+  },
+  "14": {
+    "output": "#b8dfe7"
+  },
+  "15": {
+    "output": "#b2dde6"
+  },
+  "16": {
+    "output": "#acdbe5"
+  },
+  "17": {
+    "output": "#a6d9e3"
+  },
+  "18": {
+    "output": "#a0d8e1"
+  },
+  "19": {
+    "output": "#9ad6e0"
+  },
+  "20": {
+    "output": "#94d4de"
+  },
+  "21": {
+    "output": "#8ed2dd"
+  },
+  "22": {
+    "output": "#89d0dc"
+  },
+  "23": {
+    "output": "#83cedb"
+  },
+  "24": {
+    "output": "#7dccd9"
+  },
+  "25": {
+    "output": "#77cad8"
+  },
+  "26": {
+    "output": "#71c8d6"
+  },
+  "27": {
+    "output": "#6ac6d4"
+  },
+  "28": {
+    "output": "#63c4d2"
+  },
+  "29": {
+    "output": "#5bc2cf"
+  },
+  "30": {
+    "output": "#54c0cd"
+  },
+  "31": {
+    "output": "#4dbecb"
+  },
+  "32": {
+    "output": "#45bcc9"
+  },
+  "33": {
+    "output": "#3ebac8"
+  },
+  "34": {
+    "output": "#37b7c6"
+  },
+  "35": {
+    "output": "#30b5c4"
+  },
+  "36": {
+    "output": "#2ab3c2"
+  },
+  "37": {
+    "output": "#25b0bf"
+  },
+  "38": {
+    "output": "#21adbd"
+  },
+  "39": {
+    "output": "#1dabba"
+  },
+  "40": {
+    "output": "#19a8b8"
+  },
+  "41": {
+    "output": "#14a5b6"
+  },
+  "42": {
+    "output": "#0fa3b4"
+  },
+  "43": {
+    "output": "#09a0b1"
+  },
+  "44": {
+    "output": "#049daf"
+  },
+  "45": {
+    "output": "#009bad"
+  },
+  "46": {
+    "output": "#0099ab"
+  },
+  "47": {
+    "output": "#0097a8"
+  },
+  "48": {
+    "output": "#0095a6"
+  },
+  "49": {
+    "output": "#0092a3"
+  },
+  "50": {
+    "output": "#0190a0"
+  },
+  "51": {
+    "output": "#018d9d"
+  },
+  "52": {
+    "output": "#018b9a"
+  },
+  "53": {
+    "output": "#018897"
+  },
+  "54": {
+    "output": "#008595"
+  },
+  "55": {
+    "output": "#008292"
+  },
+  "56": {
+    "output": "#007f8f"
+  },
+  "57": {
+    "output": "#007d8d"
+  },
+  "58": {
+    "output": "#007a8b"
+  },
+  "59": {
+    "output": "#078"
+  },
+  "60": {
+    "output": "#007586"
+  },
+  "61": {
+    "output": "#007383"
+  },
+  "62": {
+    "output": "#007081"
+  },
+  "63": {
+    "output": "#006e7e"
+  },
+  "64": {
+    "output": "#006c7c"
+  },
+  "65": {
+    "output": "#006979"
+  },
+  "66": {
+    "output": "#006676"
+  },
+  "67": {
+    "output": "#006374"
+  },
+  "68": {
+    "output": "#006171"
+  },
+  "69": {
+    "output": "#005e6f"
+  },
+  "70": {
+    "output": "#005b6d"
+  },
+  "71": {
+    "output": "#00586b"
+  },
+  "72": {
+    "output": "#005669"
+  },
+  "73": {
+    "output": "#005366"
+  },
+  "74": {
+    "output": "#005063"
+  },
+  "75": {
+    "output": "#004d5f"
+  },
+  "76": {
+    "output": "#004a5c"
+  },
+  "77": {
+    "output": "#00485a"
+  },
+  "78": {
+    "output": "#004657"
+  },
+  "79": {
+    "output": "#004454"
+  },
+  "80": {
+    "output": "#004252"
+  },
+  "81": {
+    "output": "#003f51"
+  },
+  "82": {
+    "output": "#003c50"
+  },
+  "83": {
+    "output": "#00394d"
+  },
+  "84": {
+    "output": "#003648"
+  },
+  "85": {
+    "output": "#034"
+  },
+  "86": {
+    "output": "#003143"
+  },
+  "87": {
+    "output": "#013042"
+  },
+  "88": {
+    "output": "#012e41"
+  },
+  "89": {
+    "output": "#012b3d"
+  },
+  "90": {
+    "output": "#012839"
+  },
+  "91": {
+    "output": "#012637"
+  },
+  "92": {
+    "output": "#002435"
+  },
+  "93": {
+    "output": "#023"
+  },
+  "94": {
+    "output": "#001f2f"
+  },
+  "95": {
+    "output": "#001c2a"
+  },
+  "96": {
+    "output": "#001927"
+  },
+  "97": {
+    "output": "#001625"
+  },
+  "98": {
+    "output": "#001323"
+  },
+  "99": {
+    "output": "#000f23"
+  },
+  "100": {
+    "output": "#000a23"
+  }
+}