@kiva/kv-tokens 2.10.0 → 2.11.0

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.11.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@2.10.0...@kiva/kv-tokens@2.11.0) (2024-04-23)
+
+
+### Bug Fixes
+
+* adjust type styles for dovetail-mvb 500, adjust font weights to match tailwind naming ([75e32d1](https://github.com/kiva/kv-ui-elements/commit/75e32d110b0c0c99fce77366b6bef621bbcd2401))
+* import serif from primitives ([dd96190](https://github.com/kiva/kv-ui-elements/commit/dd961906c359c9d67943ea05762224fd5500ed0a))
+* refine letter spacing to match figma to our dynamic em calculations ([6567f6c](https://github.com/kiva/kv-ui-elements/commit/6567f6c9b147bdab812c006ea9f7c403d5937a8e))
+* remove h6, re-apply letter spacing, remove bold dovetail styles ([163b657](https://github.com/kiva/kv-ui-elements/commit/163b65793cd1490210368f5fac9325a881e11354))
+* set h3 bold, remove unused italic/em element style ([9835f05](https://github.com/kiva/kv-ui-elements/commit/9835f05358f03cc8903db835b95dd7dd03399aba))
+* testing baseline configs for including new dovetail webfont ([7079590](https://github.com/kiva/kv-ui-elements/commit/7079590f9b3ab0bbfb91b81ab6aa98fd4ae2f113))
+
+
+### Features
+
+* implement kiva ecosystem default type styles ([c87d6fc](https://github.com/kiva/kv-ui-elements/commit/c87d6fc700cb130a4c55b0723438a89202c985ee))
+
+
+
+
+
 # [2.10.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@2.9.0...@kiva/kv-tokens@2.10.0) (2023-09-07)
 
 

package/configs/kivaTypography.cjs

@@ -2,6 +2,7 @@ const { rem, em } = require('./util.cjs');
 const designtokens = require('../primitives.json');
 
 const {
+	fonts,
 	fontSizes,
 	fontWeights,
 	letterSpacings,
@@ -14,24 +15,29 @@ const {
  WEB FONT DEFINITIONS
 */
 const webFonts = [
+	// Note corresponding font weight in Tailwind is "normal"
 	{
 		'@font-face': {
 			fontFamily: 'PostGrotesk',
 			fontWeight: '400',
 			fontStyle: 'normal',
 			fontDisplay: 'swap',
+			// eslint-disable-next-line max-len
 			src: 'url(//www-kiva-org.freetls.fastly.net/static/fonts/PostGrotesk-Medium.8c8a585.woff2) format(\'woff2\')',
 		},
 	},
+	// Note corresponding font weight in Tailwind is "normal"
 	{
 		'@font-face': {
 			fontFamily: 'PostGrotesk',
 			fontWeight: '400',
 			fontStyle: 'italic',
 			fontDisplay: 'swap',
+			// eslint-disable-next-line max-len
 			src: 'url(//www-kiva-org.freetls.fastly.net/static/fonts/PostGrotesk-MediumItalic.133f41d.woff2) format(\'woff2\')',
 		},
 	},
+	// Note corresponding font weight in Tailwind is "light"
 	{
 		'@font-face': {
 			fontFamily: 'PostGrotesk',
@@ -41,12 +47,14 @@ const webFonts = [
 			src: 'url(//www-kiva-org.freetls.fastly.net/static/fonts/PostGrotesk-Book.246fc8e.woff2) format(\'woff2\')',
 		},
 	},
+	// Note corresponding font weight in Tailwind is "light"
 	{
 		'@font-face': {
 			fontFamily: 'PostGrotesk',
 			fontWeight: '300',
 			fontStyle: 'italic',
 			fontDisplay: 'swap',
+			// eslint-disable-next-line max-len
 			src: 'url(//www-kiva-org.freetls.fastly.net/static/fonts/PostGrotesk-BookItalic.4d06d39.woff2) format(\'woff2\')',
 		},
 	},
@@ -60,9 +68,10 @@ const textBaseColor = 'rgb(var(--text-primary))';
 */
 const textStyles = (() => {
 	const textJumbo = {
+		fontFamily: fonts.serif,
 		fontWeight: fontWeights.medium,
 		fontSize: rem(fontSizes.jumbo.sm),
-		letterSpacing: letterSpacings['-2'],
+		letterSpacing: letterSpacings['-1'],
 		lineHeight: lineHeights.tight,
 		'@screen md': {
 			fontSize: rem(fontSizes.jumbo.md),
@@ -73,54 +82,52 @@ const textStyles = (() => {
 	};
 
 	const textH1 = {
+		fontFamily: fonts.serif,
 		fontSize: rem(fontSizes.h1.sm),
 		fontWeight: fontWeights.medium,
-		letterSpacing: em(letterSpacings['-0.3'], fontSizes.h1.sm),
+		letterSpacing: em(letterSpacings['-0.5'], fontSizes.h1.md),
 		lineHeight: lineHeights.tight,
 		'@screen md': {
 			fontSize: rem(fontSizes.h1.md),
-			letterSpacing: em(letterSpacings['-1'], fontSizes.h1.md),
 		},
 		'@screen lg': {
 			fontSize: rem(fontSizes.h1.lg),
-			letterSpacing: em(letterSpacings['-2'], fontSizes.h1.lg),
 		},
 	};
 
 	const textH2 = {
+		fontFamily: fonts.serif,
 		fontSize: rem(fontSizes.h2.sm),
 		fontWeight: fontWeights.medium,
-		letterSpacing: em(letterSpacings['-1'], fontSizes.h2.sm),
+		letterSpacing: em(letterSpacings.normal, fontSizes.h2.sm),
 		lineHeight: lineHeights.tight,
 		'@screen md': {
 			fontSize: rem(fontSizes.h2.md),
-			letterSpacing: em(letterSpacings['-1'], fontSizes.h2.md),
+			letterSpacing: em(letterSpacings['-0.3'], fontSizes.h2.md),
 		},
 		'@screen lg': {
 			fontSize: rem(fontSizes.h2.lg),
-			letterSpacing: em(letterSpacings['-1'], fontSizes.h2.lg),
-			lineHeight: lineHeights.normal,
+			letterSpacing: em(letterSpacings['-0.3'], fontSizes.h2.lg),
+			lineHeight: lineHeights['nearly-none'],
 		},
 	};
 
 	const textH3 = {
 		fontSize: rem(fontSizes.h3.sm),
-		fontWeight: fontWeights.medium,
-		letterSpacing: em(letterSpacings['-1'], fontSizes.h3.sm),
+		fontWeight: fontWeights.normal,
+		letterSpacing: em(letterSpacings['-0.3'], fontSizes.h3.sm),
 		lineHeight: lineHeights.tight,
 		'@screen md': {
 			fontSize: rem(fontSizes.h3.md),
-			letterSpacing: em(letterSpacings['-0.3'], fontSizes.h3.md),
 		},
 		'@screen lg': {
 			fontSize: rem(fontSizes.h3.lg),
-			letterSpacing: em(letterSpacings['-1'], fontSizes.h3.lg),
 		},
 	};
 
 	const textH4 = {
 		fontSize: rem(fontSizes.h4.sm),
-		fontWeight: fontWeights.medium,
+		fontWeight: fontWeights.normal,
 		lineHeight: lineHeights.normal,
 		textTransform: 'uppercase',
 		'@screen md': {
@@ -131,27 +138,36 @@ const textStyles = (() => {
 		},
 	};
 
+	const textH5 = {
+		fontFamily: fonts.sans,
+		fontSize: rem(fontSizes.h4.sm),
+		fontWeight: fontWeights.normal,
+		letterSpacing: em(letterSpacings.normal, fontSizes.subhead.sm),
+		lineHeight: lineHeights['nearly-none'],
+	};
+
 	const textSubhead = {
+		fontFamily: fonts.sans,
 		fontSize: rem(fontSizes.subhead.sm),
-		fontWeight: fontWeights.book,
-		letterSpacing: em(letterSpacings['-0.5'], fontSizes.subhead.sm),
-		lineHeight: lineHeights.normal,
+		fontWeight: fontWeights.light,
+		letterSpacing: em(letterSpacings.normal, fontSizes.subhead.sm),
+		lineHeight: lineHeights.tight,
 		'@screen md': {
 			fontSize: rem(fontSizes.subhead.md),
-			letterSpacing: em(letterSpacings['-0.5'], fontSizes.subhead.md),
 		},
 		'@screen lg': {
 			fontSize: rem(fontSizes.subhead.lg),
-			letterSpacing: em(letterSpacings['-0.5'], fontSizes.subhead.lg),
 		},
 	};
 
 	const textBase = {
-		fontWeight: fontWeights.book,
+		fontWeight: fontWeights.light,
 		fontSize: rem(fontSizes.base.sm),
+		letterSpacing: em(letterSpacings.normal, fontSizes.base.sm),
 		lineHeight: lineHeights.normal,
 		'@screen lg': {
 			fontSize: rem(fontSizes.base.lg),
+			letterSpacing: em(letterSpacings.normal, fontSizes.base.sm),
 		},
 	};
 
@@ -175,7 +191,22 @@ const textStyles = (() => {
 	const textPlaceholder = {
 		color: 'rgb(var(--text-tertiary))',
 		opacity: 1,
-		fontWeight: fontWeights.book,
+		fontWeight: fontWeights.light,
+	};
+
+	const textBlockquote = {
+		fontFamily: fonts.serif,
+		fontSize: rem(fontSizes.h2.sm),
+		fontStyle: 'italic',
+		fontWeight: fontWeights.medium,
+		letterSpacing: em(letterSpacings['-0.5'], fontSizes.h2.sm),
+		lineHeight: lineHeights.tight,
+		'@screen md': {
+			fontSize: rem(fontSizes.h2.md),
+		},
+		'@screen lg': {
+			fontSize: rem(fontSizes.h2.lg),
+		},
 	};
 
 	return {
@@ -184,11 +215,13 @@ const textStyles = (() => {
 		textH2,
 		textH3,
 		textH4,
+		textH5,
 		textSubhead,
 		textBase,
 		textSmall,
 		textLink,
 		textPlaceholder,
+		textBlockquote,
 	};
 })();
 
@@ -260,39 +293,45 @@ const proseOverrides = () => ({
 			fontSize: false,
 			lineHeight: false,
 			p: {
-				marginTop: rem(space[4]),
-				marginBottom: rem(space[4]),
+				marginTop: rem(space[2]),
+				marginBottom: rem(space[2]),
 			},
 			blockquote: {
-				marginTop: rem(space[4]),
-				marginBottom: rem(space[4]),
+				marginTop: rem(space[2]),
+				marginBottom: rem(space[2]),
 				padding: `0 0 0 ${rem(space['6'])}`,
 			},
 			h1: {
 				fontSize: false,
 				letterSpacing: false,
 				marginTop: '0',
-				marginBottom: rem(space[4]),
+				marginBottom: rem(space[2]),
 				color: textBaseColor,
 			},
 			h2: {
 				fontSize: false,
 				letterSpacing: false,
-				marginTop: rem(space[4]),
-				marginBottom: rem(space[4]),
+				marginTop: rem(space[2]),
+				marginBottom: rem(space[2]),
 				color: textBaseColor,
 			},
 			h3: {
 				fontSize: false,
 				letterSpacing: false,
-				marginTop: rem(space[4]),
+				marginTop: rem(space[2]),
 				marginBottom: rem(space[2]),
 				color: textBaseColor,
 			},
 			h4: {
 				letterSpacing: false,
 				marginTop: false,
-				marginBottom: rem(space[4]),
+				marginBottom: rem(space[2]),
+				color: textBaseColor,
+			},
+			h5: {
+				letterSpacing: false,
+				marginTop: false,
+				marginBottom: rem(space[2]),
 				color: textBaseColor,
 			},
 			img: false,
@@ -308,7 +347,7 @@ const proseOverrides = () => ({
 			'figure figcaption': {
 				fontSize: false,
 				lineHeight: false,
-				marginTop: rem(space[4]),
+				marginTop: rem(space[2]),
 			},
 			code: false,
 			'code::before': false,
@@ -329,16 +368,16 @@ const proseOverrides = () => ({
 			},
 			'pre code': false,
 			ol: {
-				marginTop: rem(space[4]),
-				marginBottom: rem(space[4]),
+				marginTop: rem(space[2]),
+				marginBottom: rem(space[2]),
 				paddingLeft: em(18, 16),
 			},
 			'ol > li': {
 				paddingLeft: em(10, 16),
 			},
 			ul: {
-				marginTop: rem(space[4]),
-				marginBottom: rem(space[4]),
+				marginTop: rem(space[2]),
+				marginBottom: rem(space[2]),
 				paddingLeft: em(18, 16),
 			},
 			'ul > li': {

package/configs/tailwind.config.cjs

@@ -74,10 +74,16 @@ module.exports = {
 			16: rem(space['16']),
 		},
 		fontFamily: {
+			// eslint-disable-next-line max-len
 			sans: [`${fonts.sans}, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif`],
+			// eslint-disable-next-line max-len
+			serif: [`${fonts.serif}, ui-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Palatino', Georgia, 'Times New Roman', serif`],
 		},
 		fontWeight: {
-			book: `${fontWeights.book}`,
+			// Keeping "book" defined here for backwards compatibility
+			book: `${fontWeights.light}`,
+			light: `${fontWeights.light}`,
+			normal: `${fontWeights.normal}`,
 			medium: `${fontWeights.medium}`,
 		},
 		borderWidth: {
@@ -192,18 +198,19 @@ module.exports = {
 				h2: textStyles.textH2,
 				h3: textStyles.textH3,
 				h4: textStyles.textH4,
+				h5: textStyles.textH5,
 				small: textStyles.textSmall,
 				code: {
 					fontSize: '0.875em',
 				},
-				blockquote: textStyles.textSubhead,
+				blockquote: textStyles.textBlockquote,
 				'figure figcaption': textStyles.textSmall,
 				'button:focus': {
 					outline: 'revert', // undo tailwind button focus styling
 				},
 				a: textStyles.textLink,
 				'strong, b': {
-					fontWeight: fontWeights.medium,
+					fontWeight: fontWeights.normal,
 				},
 				hr: {
 					borderColor: colors.gray['500'],
@@ -226,10 +233,12 @@ module.exports = {
 				'.text-h2': textStyles.textH2,
 				'.text-h3': textStyles.textH3,
 				'.text-h4': textStyles.textH4,
+				'.text-h5': textStyles.textH5,
 				'.text-subhead': textStyles.textSubhead,
 				'.text-jumbo': textStyles.textJumbo,
 				'.text-small': textStyles.textSmall,
 				'.text-link': textStyles.textLink,
+				'.text-blockquote': textStyles.textBlockquote,
 			}, ['responsive']);
 		}),
 	],

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kiva/kv-tokens",
-    "version": "2.10.0",
+    "version": "2.11.0",
     "type": "module",
     "publishConfig": {
         "access": "public"
@@ -16,5 +16,5 @@
         "@tailwindcss/typography": "^0.5.1",
         "tailwindcss": "^3.0.18"
     },
-    "gitHead": "4ce025324410f92a58a6e235886145d501290f79"
+    "gitHead": "9cd04b768af71aead30d08320229402bf3c79989"
 }

package/primitives.json

@@ -190,7 +190,8 @@
 		"16": 128
 	},
 	"fonts": {
-		"sans": "PostGrotesk"
+		"sans": "PostGrotesk",
+		"serif": "dovetail-mvb"
 	},
 	"fontSizes": {
 		"base": {
@@ -199,9 +200,9 @@
 			"lg": 17
 		},
 		"jumbo": {
-			"sm": 64,
-			"md": 96,
-			"lg": 112
+			"sm": 42,
+			"md": 48,
+			"lg": 72
 		},
 		"small": {
 			"sm": 13,
@@ -209,36 +210,43 @@
 			"lg": 14
 		},
 		"h1": {
-			"sm": 40,
-			"md": 50,
-			"lg": 54
+			"sm": 36,
+			"md": 40,
+			"lg": 48
 		},
 		"h2": {
-			"sm": 24,
+			"sm": 28,
 			"md": 28,
 			"lg": 32
 		},
 		"h3": {
-			"sm": 20,
+			"sm": 22,
 			"md": 22,
 			"lg": 24
 		},
 		"h4": {
-			"sm": 12,
+			"sm": 14,
 			"md": 14,
 			"lg": 14
 		},
+		"h5": {
+			"sm": 13,
+			"md": 13,
+			"lg": 14
+		},
 		"subhead": {
-			"sm": 20,
+			"sm": 22,
 			"md": 22,
 			"lg": 24
 		}
 	},
 	"fontWeights": {
-		"book": 300,
-		"medium": 400
+		"light": 300,
+		"normal": 400,
+		"medium": 500
 	},
 	"lineHeights": {
+		"nearly-none": 1.05,
 		"tight": 1.25,
 		"normal": 1.5
 	},