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

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 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.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),
 		},
 	};
 
@@ -482,7 +499,7 @@ export const textStyles = (() => {
 		},
 	};
 
-	const textSubHeadline = {
+	const textSubheadline = {
 		fontFamily: fonts.sans,
 		fontWeight: fontWeights.light,
 		fontSize: rem(semanticFontSizes.h3.sm),
@@ -561,7 +578,7 @@ export const textStyles = (() => {
 		textDisplay,
 		textHeadline,
 		textHeadlineTwo,
-		textSubHeadline,
+		textSubheadline,
 		textTitle,
 		textButtonLink,
 		textUpper,

package/configs/tailwind.config.js

@@ -205,11 +205,11 @@ 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',

package/package.json

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

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 },