@kiva/kv-tokens 3.6.3 → 3.7.0

package/AGENTS.md

@@ -72,7 +72,7 @@ npm test       # No tests specified (placeholder)
 
 ### Technology
 
-- **Node.js**: Version specified in [.nvmrc](../../.nvmrc) - Always run `nvm use`
+- **Node.js**: Version specified in [.nvmrc](../../.nvmrc) - Run `nvm use` before terminal commands
 - **Tailwind CSS**: ^3.4.3
 - **@tailwindcss/typography**: ^0.5.1 for prose styling
 

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.7.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@3.6.4...@kiva/kv-tokens@3.7.0) (2026-02-11)
+
+
+### Bug Fixes
+
+* apply semantic type size to small, add comments ([bc7fe4b](https://github.com/kiva/kv-ui-elements/commit/bc7fe4bb20a06a589340ee640b96e4540920655c))
+* remove comments about base style updates as they were reverted ([cf57f81](https://github.com/kiva/kv-ui-elements/commit/cf57f81857bef212ea2fa34a3a191f8518740168))
+* revert base styles and implement absolute line height mapping ([2bea294](https://github.com/kiva/kv-ui-elements/commit/2bea29451e4d44565c217cbc76bab4c8aeea2eb8))
+* revert new small text styles as they rely on updated base styles ([b1b4985](https://github.com/kiva/kv-ui-elements/commit/b1b49857e32580dd57f7382056fe7a16bd6ff5ea))
+
+
+### Features
+
+* add new sematic type derived primitives and utility classes ([4196d7c](https://github.com/kiva/kv-ui-elements/commit/4196d7c7b7aafcf2b19a484b4945b743db385e87))
+
+
+
+
+
+## [3.6.4](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@3.6.3...@kiva/kv-tokens@3.6.4) (2026-01-21)
+
+
+### Bug Fixes
+
+* clarify when to run nvm use instead of forcing agents to always run it ([db11d9f](https://github.com/kiva/kv-ui-elements/commit/db11d9f726a1d894655103cca4a2364942725129))
+
+
+
+
+
 ## [3.6.3](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@3.6.2...@kiva/kv-tokens@3.6.3) (2026-01-06)
 
 **Note:** Version bump only for package @kiva/kv-tokens

package/configs/kivaTypography.js

@@ -7,7 +7,9 @@ const {
 	fontWeights,
 	letterSpacings,
 	lineHeights,
+	lineHeightsAbsolute,
 	radii,
+	semanticFontSizes,
 	space,
 } = designTokens;
 
@@ -428,6 +430,106 @@ export const textStyles = (() => {
 		},
 	};
 
+	const textDisplay = {
+		fontFamily: fonts.serif,
+		fontWeight: fontWeights.medium,
+		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),
+		},
+	};
+
+	const textHeadline = {
+		fontFamily: fonts.serif,
+		fontWeight: fontWeights.medium,
+		fontSize: rem(semanticFontSizes.h1.sm),
+		letterSpacing: em(letterSpacings['-200'], semanticFontSizes.h1.sm),
+		lineHeight: em(lineHeightsAbsolute.h1.sm, semanticFontSizes.h1.sm),
+		'@screen md': {
+			fontSize: rem(semanticFontSizes.h1.md),
+			letterSpacing: em(letterSpacings['-200'], semanticFontSizes.h1.md),
+		},
+		'@screen lg': {
+			fontSize: rem(semanticFontSizes.h1.lg),
+			letterSpacing: em(letterSpacings['-300'], semanticFontSizes.h1.lg),
+			lineHeight: em(lineHeightsAbsolute.h1.lg, semanticFontSizes.h1.lg),
+		},
+	};
+
+	const textSubHeadline = {
+		fontFamily: fonts.serif,
+		fontWeight: fontWeights.medium,
+		fontSize: rem(semanticFontSizes.h2.sm),
+		letterSpacing: em(letterSpacings['-100'], semanticFontSizes.h2.sm),
+		lineHeight: em(lineHeightsAbsolute.h2.sm, semanticFontSizes.h2.sm),
+		'@screen md': {
+			fontSize: rem(semanticFontSizes.h2.md),
+			letterSpacing: em(letterSpacings['-100'], semanticFontSizes.h2.md),
+		},
+		'@screen lg': {
+			fontSize: rem(semanticFontSizes.h2.lg),
+			letterSpacing: em(letterSpacings['-200'], semanticFontSizes.h2.lg),
+			lineHeight: em(lineHeightsAbsolute.h2.lg, semanticFontSizes.h2.lg),
+		},
+	};
+
+	const textTitle = {
+		fontFamily: fonts.sans,
+		fontWeight: fontWeights.medium,
+		fontSize: rem(semanticFontSizes.h3.sm),
+		letterSpacing: em(letterSpacings.normal, semanticFontSizes.h3.sm),
+		lineHeight: em(lineHeightsAbsolute.h3.sm, semanticFontSizes.h3.sm),
+		'@screen md': {
+			fontSize: rem(semanticFontSizes.h3.md),
+		},
+		'@screen lg': {
+			fontSize: rem(semanticFontSizes.h3.lg),
+			lineHeight: em(lineHeightsAbsolute.h3.lg, semanticFontSizes.h3.lg),
+		},
+	};
+
+	const textButton = {
+		fontFamily: fonts.sans,
+		fontWeight: fontWeights.medium,
+		fontSize: rem(semanticFontSizes.button.button),
+		letterSpacing: em(letterSpacings.normal, semanticFontSizes.button.button),
+		lineHeight: em(lineHeightsAbsolute.button.sm, semanticFontSizes.button.button),
+	};
+
+	const textUpper = {
+		fontFamily: fonts.sans,
+		fontWeight: fontWeights.medium,
+		fontSize: rem(semanticFontSizes.small.small),
+		letterSpacing: em(letterSpacings.normal, semanticFontSizes.small.small),
+		lineHeight: em(lineHeightsAbsolute.upper.sm, semanticFontSizes.small.small),
+		textTransform: 'uppercase',
+	};
+
+	const textLabel = {
+		fontFamily: fonts.sans,
+		fontWeight: fontWeights.medium,
+		fontSize: rem(semanticFontSizes.small.small),
+		letterSpacing: em(letterSpacings.normal, semanticFontSizes.small.small),
+		lineHeight: em(lineHeightsAbsolute.label.sm, semanticFontSizes.small.small),
+	};
+
+	const textCaption = {
+		fontFamily: fonts.sans,
+		fontWeight: fontWeights.normal,
+		fontSize: rem(semanticFontSizes.small.small),
+		letterSpacing: em(letterSpacings.normal, semanticFontSizes.small.small),
+		lineHeight: em(lineHeightsAbsolute.caption.sm, semanticFontSizes.small.small),
+	};
+
 	return {
 		textJumbo,
 		textH1,
@@ -441,6 +543,14 @@ export const textStyles = (() => {
 		textLink,
 		textPlaceholder,
 		textBlockquote,
+		textDisplay,
+		textHeadline,
+		textSubHeadline,
+		textTitle,
+		textButton,
+		textUpper,
+		textLabel,
+		textCaption,
 	};
 })();
 

package/configs/tailwind.config.js

@@ -204,7 +204,7 @@ export default {
 					'-moz-osx-font-smoothing': 'grayscale',
 					'text-rendering': 'optimizeLegibility',
 				},
-				button: { fontWeight: 'inherit' },
+				button: { ...textStyles.textButton, fontWeight: 'inherit' },
 				h1: textStyles.textH1,
 				h2: textStyles.textH2,
 				h3: textStyles.textH3,
@@ -250,6 +250,14 @@ export default {
 				'.text-small': textStyles.textSmall,
 				'.text-link': textStyles.textLink,
 				'.text-blockquote': textStyles.textBlockquote,
+				// new (2026) semantic text styles
+				'.text-display': textStyles.textDisplay,
+				'.text-headline': textStyles.textHeadline,
+				'.text-subheadline': textStyles.textSubheadline,
+				'.text-title': textStyles.textTitle,
+				'.text-button': textStyles.textButton,
+				'.text-upper': textStyles.textUpper,
+				'.text-caption': textStyles.textCaption,
 			}, ['responsive']);
 		}),
 	],

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kiva/kv-tokens",
-    "version": "3.6.3",
+    "version": "3.7.0",
     "type": "module",
     "publishConfig": {
         "access": "public"
@@ -23,5 +23,5 @@
         "@tailwindcss/typography": "^0.5.1",
         "tailwindcss": "^3.4.3"
     },
-    "gitHead": "af1fc57775a90ad1b0a11069fc84bcc4ab1e2031"
+    "gitHead": "cb5df34ff13efd0b41b531161b308dba6c43a7af"
 }

package/primitives.js

@@ -476,6 +476,46 @@ export default {
 			lg: 24,
 		},
 	},
+	semanticFontSizes: {
+		jumbo: {
+			sm: 36,
+			md: 40,
+			lg: 44,
+		},
+		h1: {
+			sm: 22,
+			md: 22,
+			lg: 26,
+		},
+		h2: {
+			sm: 20,
+			md: 20,
+			lg: 22,
+		},
+		h3: {
+			sm: 18,
+			md: 18,
+			lg: 20,
+		},
+		base: {
+			base: 16,
+		},
+		button: {
+			button: 17,
+		},
+		caption: {
+			small: 14,
+		},
+		label: {
+			small: 14,
+		},
+		small: {
+			small: 14,
+		},
+		upper: {
+			small: 14,
+		},
+	},
 	fontWeights: {
 		light: 300,
 		normal: 400,
@@ -485,11 +525,33 @@ export default {
 		'nearly-none': 1.05,
 		tight: 1.25,
 		normal: 1.5,
+		100: 1,
+		125: 1.25,
+		130: 1.3,
+		140: 1.4,
+		150: 1.5,
+	},
+	lineHeightsAbsolute: {
+		jumbo: { sm: 47, 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 },
+		base: { sm: 22, md: 22, lg: 22 },
+		button: { sm: 21, md: 21, lg: 21 },
+		upper: { sm: 18, md: 18, lg: 18 },
+		label: { sm: 18, md: 18, lg: 18 },
+		caption: { sm: 18, md: 18, lg: 18 },
 	},
 	letterSpacings: {
 		normal: 0,
+		'-100': -0.2,
+		'-200': -0.22,
 		'-0.3': -0.3,
 		'-0.5': -0.5,
+		'-300': -0.52,
+		'-400': -0.72,
+		'-500': -0.8,
+		'-600': -0.88,
 		'-1': -1,
 		'-2': -2,
 	},