@kiva/kv-tokens 3.7.3-next.1 → 3.7.3-next.3

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.7.3-next.3](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@3.7.3-next.2...@kiva/kv-tokens@3.7.3-next.3) (2026-04-01)
+
+
+### Bug Fixes
+
+* sync latest from main, continued application of semantic classes, prose h1 override ([22ce4a6](https://github.com/kiva/kv-ui-elements/commit/22ce4a6389994244ccffcf67466dcfe01da8c8a5))
+
+
+
+
+
+## [3.7.3-next.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@3.7.3-next.1...@kiva/kv-tokens@3.7.3-next.2) (2026-03-30)
+
+
+### Bug Fixes
+
+* semantic style class ([cc62fce](https://github.com/kiva/kv-ui-elements/commit/cc62fce672058ab82d84abafae1d12c28cf9cdf0))
+* update global html headers + jumbo to match new type guidelines, refine underline sizes ([10e7295](https://github.com/kiva/kv-ui-elements/commit/10e7295686bca126525e3a4b5ff00de6fbe28dcc))
+
+
+
+
+
 ## [3.7.3-next.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@3.7.3-next.0...@kiva/kv-tokens@3.7.3-next.1) (2026-03-26)
 
 

package/configs/kivaTypography.js

@@ -291,71 +291,88 @@ export const textStyles = (() => {
 	const textJumbo = {
 		fontFamily: fonts.serif,
 		fontWeight: fontWeights.medium,
-		fontSize: rem(fontSizes.jumbo.sm),
-		letterSpacing: letterSpacings['-1'],
-		lineHeight: lineHeights.tight,
+		fontSize: rem(semanticFontSizes.jumbo.sm),
+		letterSpacing: em(letterSpacings['-400'], semanticFontSizes.jumbo.sm),
+		lineHeight: em(lineHeightsAbsolute.jumbo.sm, semanticFontSizes.jumbo.sm),
 		'@screen md': {
-			fontSize: rem(fontSizes.jumbo.md),
+			fontSize: rem(semanticFontSizes.jumbo.md),
+			letterSpacing: em(letterSpacings['-500'], semanticFontSizes.jumbo.md),
+			lineHeight: em(lineHeightsAbsolute.jumbo.md, semanticFontSizes.jumbo.md),
 		},
 		'@screen lg': {
-			fontSize: rem(fontSizes.jumbo.lg),
+			fontSize: rem(semanticFontSizes.jumbo.lg),
+			letterSpacing: em(letterSpacings['-600'], semanticFontSizes.jumbo.lg),
+			lineHeight: em(lineHeightsAbsolute.jumbo.lg, semanticFontSizes.jumbo.lg),
 		},
 	};
 
 	const textH1 = {
 		fontFamily: fonts.serif,
-		fontSize: rem(fontSizes.h1.sm),
+		fontSize: rem(semanticFontSizes.h1.sm),
 		fontWeight: fontWeights.medium,
-		letterSpacing: em(letterSpacings['-0.5'], fontSizes.h1.md),
-		lineHeight: lineHeights.tight,
+		letterSpacing: em(letterSpacings['-200'], semanticFontSizes.h1.sm),
+		lineHeight: em(lineHeightsAbsolute.h1.sm, semanticFontSizes.h1.sm),
 		'@screen md': {
-			fontSize: rem(fontSizes.h1.md),
+			fontSize: rem(semanticFontSizes.h1.md),
+			letterSpacing: em(letterSpacings['-200'], semanticFontSizes.h1.md),
+			lineHeight: em(lineHeightsAbsolute.h1.md, semanticFontSizes.h1.md),
 		},
 		'@screen lg': {
-			fontSize: rem(fontSizes.h1.lg),
+			fontSize: rem(semanticFontSizes.h1.lg),
+			letterSpacing: em(letterSpacings['-300'], semanticFontSizes.h1.lg),
+			lineHeight: em(lineHeightsAbsolute.h1.lg, semanticFontSizes.h1.lg),
 		},
 	};
 
 	const textH2 = {
 		fontFamily: fonts.serif,
-		fontSize: rem(fontSizes.h2.sm),
+		fontSize: rem(semanticFontSizes.h2.sm),
 		fontWeight: fontWeights.medium,
-		letterSpacing: em(letterSpacings.normal, fontSizes.h2.sm),
-		lineHeight: lineHeights.tight,
+		letterSpacing: em(letterSpacings['-100'], semanticFontSizes.h2.sm),
+		lineHeight: em(lineHeightsAbsolute.h2.sm, semanticFontSizes.h2.sm),
 		'@screen md': {
-			fontSize: rem(fontSizes.h2.md),
-			letterSpacing: em(letterSpacings['-0.3'], fontSizes.h2.md),
+			fontSize: rem(semanticFontSizes.h2.md),
+			letterSpacing: em(letterSpacings['-100'], semanticFontSizes.h2.md),
+			lineHeight: em(lineHeightsAbsolute.h2.md, semanticFontSizes.h2.md),
 		},
 		'@screen lg': {
-			fontSize: rem(fontSizes.h2.lg),
-			letterSpacing: em(letterSpacings['-0.3'], fontSizes.h2.lg),
-			lineHeight: lineHeights['nearly-none'],
+			fontSize: rem(semanticFontSizes.h2.lg),
+			letterSpacing: em(letterSpacings['-200'], semanticFontSizes.h2.lg),
+			lineHeight: em(lineHeightsAbsolute.h2.lg, semanticFontSizes.h2.lg),
 		},
 	};
 
 	const textH3 = {
-		fontSize: rem(fontSizes.h3.sm),
-		fontWeight: fontWeights.normal,
-		letterSpacing: em(letterSpacings['-1'], fontSizes.h3.sm),
-		lineHeight: lineHeights.tight,
+		fontSize: rem(semanticFontSizes.h3.sm),
+		fontWeight: fontWeights.light,
+		letterSpacing: em(letterSpacings.normal, semanticFontSizes.h3.sm),
+		lineHeight: em(lineHeightsAbsolute.h3.sm, semanticFontSizes.h3.sm),
 		'@screen md': {
-			fontSize: rem(fontSizes.h3.md),
+			fontSize: rem(semanticFontSizes.h3.md),
+			letterSpacing: em(letterSpacings.normal, semanticFontSizes.h3.md),
+			lineHeight: em(lineHeightsAbsolute.h3.md, semanticFontSizes.h3.md),
 		},
 		'@screen lg': {
-			fontSize: rem(fontSizes.h3.lg),
+			fontSize: rem(semanticFontSizes.h3.lg),
+			letterSpacing: em(letterSpacings.normal, semanticFontSizes.h3.lg),
+			lineHeight: em(lineHeightsAbsolute.h3.lg, semanticFontSizes.h3.lg),
 		},
 	};
 
 	const textH4 = {
-		fontSize: rem(fontSizes.h4.sm),
+		fontSize: rem(semanticFontSizes.h3.sm),
 		fontWeight: fontWeights.normal,
-		lineHeight: lineHeights.normal,
-		textTransform: 'uppercase',
+		letterSpacing: em(letterSpacings.normal, semanticFontSizes.h3.sm),
+		lineHeight: em(lineHeightsAbsolute.h3.sm, semanticFontSizes.h3.sm),
 		'@screen md': {
-			fontSize: rem(fontSizes.h4.md),
+			fontSize: rem(semanticFontSizes.h3.md),
+			letterSpacing: em(letterSpacings.normal, semanticFontSizes.h3.md),
+			lineHeight: em(lineHeightsAbsolute.h3.md, semanticFontSizes.h3.md),
 		},
 		'@screen lg': {
-			fontSize: rem(fontSizes.h4.lg),
+			fontSize: rem(semanticFontSizes.h3.lg),
+			letterSpacing: em(letterSpacings.normal, semanticFontSizes.h3.lg),
+			lineHeight: em(lineHeightsAbsolute.h3.lg, semanticFontSizes.h3.lg),
 		},
 	};
 
@@ -368,36 +385,32 @@ export const textStyles = (() => {
 	};
 
 	const textSubhead = {
+		// Replaced with styles for new text-subhealine class
 		fontFamily: fonts.sans,
-		fontSize: rem(fontSizes.subhead.sm),
 		fontWeight: fontWeights.light,
-		letterSpacing: em(letterSpacings.normal, fontSizes.subhead.sm),
-		lineHeight: lineHeights.tight,
+		fontSize: rem(semanticFontSizes.h3.sm),
+		letterSpacing: em(letterSpacings.normal, semanticFontSizes.h3.sm),
+		lineHeight: em(lineHeightsAbsolute.h3.sm, semanticFontSizes.h3.sm),
 		'@screen md': {
-			fontSize: rem(fontSizes.subhead.md),
+			fontSize: rem(semanticFontSizes.h3.md),
 		},
 		'@screen lg': {
-			fontSize: rem(fontSizes.subhead.lg),
+			fontSize: rem(semanticFontSizes.h3.lg),
+			lineHeight: em(lineHeightsAbsolute.h3.lg, semanticFontSizes.h3.lg),
 		},
 	};
 
 	const textBase = {
 		fontWeight: fontWeights.light,
 		fontSize: rem(fontSizes.base.sm),
-		letterSpacing: em(letterSpacings.normal, fontSizes.base.sm),
-		lineHeight: lineHeights['140'],
-		'@screen lg': {
-			fontSize: rem(fontSizes.base.lg),
-			letterSpacing: em(letterSpacings.normal, fontSizes.base.sm),
-		},
+		lineHeight: em(lineHeightsAbsolute.base.sm, fontSizes.base.sm),
 	};
 
 	const textSmall = {
 		fontSize: rem(fontSizes.small.sm),
-		lineHeight: lineHeights.normal,
-		'@screen lg': {
-			fontSize: rem(fontSizes.small.lg),
-		},
+		fontWeight: fontWeights.light,
+		letterSpacing: em(letterSpacings.normal, fontSizes.small.sm),
+		lineHeight: em(lineHeightsAbsolute.caption.sm, fontSizes.small.sm),
 	};
 
 	const textLink = {
@@ -482,7 +495,7 @@ export const textStyles = (() => {
 		},
 	};
 
-	const textSubHeadline = {
+	const textSubheadline = {
 		fontFamily: fonts.sans,
 		fontWeight: fontWeights.light,
 		fontSize: rem(semanticFontSizes.h3.sm),
@@ -561,7 +574,7 @@ export const textStyles = (() => {
 		textDisplay,
 		textHeadline,
 		textHeadlineTwo,
-		textSubHeadline,
+		textSubheadline,
 		textTitle,
 		textButtonLink,
 		textUpper,
@@ -647,11 +660,22 @@ export const proseOverrides = () => ({
 				padding: `0 0 0 ${rem(space['6'])}`,
 			},
 			h1: {
-				fontSize: false,
-				letterSpacing: false,
 				marginTop: '0',
 				marginBottom: rem(space[2]),
 				color: textBaseColor,
+				fontSize: rem(semanticFontSizes.jumbo.sm),
+				letterSpacing: em(letterSpacings['-400'], semanticFontSizes.jumbo.sm),
+				lineHeight: em(lineHeightsAbsolute.jumbo.sm, semanticFontSizes.jumbo.sm),
+				'@screen md': {
+					fontSize: rem(semanticFontSizes.jumbo.md),
+					letterSpacing: em(letterSpacings['-500'], semanticFontSizes.jumbo.md),
+					lineHeight: em(lineHeightsAbsolute.jumbo.md, semanticFontSizes.jumbo.md),
+				},
+				'@screen lg': {
+					fontSize: rem(semanticFontSizes.jumbo.lg),
+					letterSpacing: em(letterSpacings['-600'], semanticFontSizes.jumbo.lg),
+					lineHeight: em(lineHeightsAbsolute.jumbo.lg, semanticFontSizes.jumbo.lg),
+				},
 			},
 			h2: {
 				fontSize: false,

package/configs/tailwind.config.js

@@ -205,17 +205,17 @@ export default {
 					'text-rendering': 'optimizeLegibility',
 				},
 				button: { fontWeight: 'inherit' },
-				h1: textStyles.textDisplay,
-				h2: textStyles.textHeadline,
-				h3: textStyles.textHeadlineTwo,
-				h4: textStyles.textSubheadline,
-				h5: textStyles.textTitle,
+				h1: textStyles.textHeadline,
+				h2: textStyles.textHeadlineTwo,
+				h3: textStyles.textSubheadline,
+				h4: textStyles.textTitle,
+				h5: textStyles.textH5,
 				small: textStyles.textSmall,
 				code: {
 					fontSize: '0.875em',
 				},
 				blockquote: textStyles.textBlockquote,
-				'figure figcaption': textStyles.textBase,
+				'figure figcaption': textStyles.textCaption,
 				'button:focus': {
 					outline: 'revert', // undo tailwind button focus styling
 				},
@@ -240,13 +240,13 @@ export default {
 			});
 			addUtilities({
 				'.text-base': textStyles.textBase,
-				'.text-h1': textStyles.textH1,
-				'.text-h2': textStyles.textH2,
-				'.text-h3': textStyles.textH3,
-				'.text-h4': textStyles.textH4,
+				'.text-h1': textStyles.textHeadline,
+				'.text-h2': textStyles.textHeadlineTwo,
+				'.text-h3': textStyles.textSubheadline,
+				'.text-h4': textStyles.textTitle,
 				'.text-h5': textStyles.textH5,
-				'.text-subhead': textStyles.textSubhead,
-				'.text-jumbo': textStyles.textJumbo,
+				'.text-subhead': textStyles.textSubheadline,
+				'.text-jumbo': textStyles.textDisplay,
 				'.text-small': textStyles.textSmall,
 				'.text-link': textStyles.textLink,
 				'.text-blockquote': textStyles.textBlockquote,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kiva/kv-tokens",
-    "version": "3.7.3-next.1",
+    "version": "3.7.3-next.3",
     "type": "module",
     "publishConfig": {
         "access": "public"
@@ -23,5 +23,5 @@
         "@tailwindcss/typography": "^0.5.1",
         "tailwindcss": "^3.4.3"
     },
-    "gitHead": "825341736b7a824336db7b9fc1f373f1ba38e94f"
+    "gitHead": "ae5f6a2a15e8a20e665bcb1c8c629d69b38251ca"
 }

package/primitives.js

@@ -517,6 +517,7 @@ export default {
 		},
 	},
 	fontWeights: {
+		// Conicides with "book" for Post Grotesk in Figma
 		light: 300,
 		// Note: this is referred to as "medium" in the figma files for Post Grotesk but matches the font-weight of the font file we load
 		normal: 400,
@@ -534,7 +535,7 @@ export default {
 		150: 1.5,
 	},
 	lineHeightsAbsolute: {
-		jumbo: { sm: 47, md: 52, lg: 57 },
+		jumbo: { sm: 52, md: 52, lg: 57 },
 		h1: { sm: 31, md: 31, lg: 36 },
 		h2: { sm: 26, md: 26, lg: 31 },
 		h3: { sm: 23, md: 23, lg: 26 },