@kiva/kv-tokens 3.4.1 → 3.5.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.5.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@3.5.0...@kiva/kv-tokens@3.5.1) (2025-11-06)
+
+
+### Bug Fixes
+
+* add half sizes to remaining space primitives to ensure they render in storybook ([d94e24b](https://github.com/kiva/kv-ui-elements/commit/d94e24be12974b8f54b40fc4076c93cace9ad86e))
+
+
+
+
+
+# [3.5.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@3.4.1...@kiva/kv-tokens@3.5.0) (2025-09-26)
+
+
+### Features
+
+* fallback font styles adjusted to match primary styles ([c57ddc1](https://github.com/kiva/kv-ui-elements/commit/c57ddc1190153dc4d5db264df52f2f0b45738c5b))
+
+
+
+
+
 ## [3.4.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@3.4.0...@kiva/kv-tokens@3.4.1) (2025-08-25)
 
 

package/configs/kivaTypography.js

@@ -11,10 +11,107 @@ const {
 	space,
 } = designTokens;
 
+/**
+ * Calculates the necessary font adjustments for a fallback font to match
+ * the appearance of a web font as closely as possible.
+ * For more info, see https://developer.chrome.com/blog/font-fallbacks
+ *
+ * @param {Object} params - The parameters for the calculation.
+ * @param {number} params.ascent - The ascent value of the web font.
+ * @param {number} params.descent - The descent value of the web font.
+ * @param {number} params.lineGap - The line gap value of the web font.
+ * @param {number} params.unitsPerEm - The units per em value of the web font.
+ * @param {number} params.avgCharWidth - The average character width of the web font.
+ * @param {number} params.fallbackUnitsPerEm - The units per em value of the fallback font.
+ * @param {number} params.fallbackAvgCharWidth - The average character width of the fallback font.
+ * @returns {Object} CSS properties for font adjustments to be spread into a @font-face rule.
+ */
+export const adjustFallbackFont = ({
+	ascent,
+	descent,
+	lineGap,
+	unitsPerEm,
+	avgCharWidth = 1,
+	fallbackUnitsPerEm = unitsPerEm,
+	fallbackAvgCharWidth = avgCharWidth,
+} = {}) => {
+	const asPercent = (value) => `${value * 100}%`;
+	// avgCharacterWidth of web font / avgCharacterWidth of fallback font
+	const sizeAdjust = ((avgCharWidth / unitsPerEm) / (fallbackAvgCharWidth / fallbackUnitsPerEm));
+	return {
+		sizeAdjust: asPercent(sizeAdjust),
+		// web font ascent / (web font UPM * size-adjust)
+		ascentOverride: asPercent(ascent / (unitsPerEm * sizeAdjust)),
+		// web font descent / (web font UPM * size-adjust)
+		descentOverride: asPercent(descent / (unitsPerEm * sizeAdjust)),
+		// web font lineGap / (web font UPM * size-adjust)
+		lineGapOverride: asPercent(lineGap / (unitsPerEm * sizeAdjust)),
+	};
+};
+
 /**
  WEB FONT DEFINITIONS
 */
 export const webFonts = [
+	/**
+	 * Fallback for Dovetail MVB Medium
+	 *
+	 * Dovetail MVB Medium metrics:
+	 * - ascent: 1081
+	 * - descent: -253
+	 * - lineGap: 0
+	 * - unitsPerEm: 1000
+	 * - xWidthAvg: 453
+	 *
+	 * Georgia metrics:
+	 * - unitPerEm: 2048
+	 * - xWidthAvg: 913
+	 */
+	{
+		'@font-face': {
+			fontFamily: 'dovetail-mvb-fallback',
+			src: 'local("Georgia")',
+			...adjustFallbackFont({
+				ascent: 1081,
+				descent: 253,
+				lineGap: 0,
+				unitsPerEm: 1000,
+				avgCharWidth: 453,
+				fallbackUnitsPerEm: 2048,
+				fallbackAvgCharWidth: 913,
+			}),
+		},
+	},
+	/**
+	 * Fallback for Dovetail MVB Medium Italic
+	 *
+	 * Dovetail MVB Medium Italic metrics:
+	 * - ascent: 1081
+	 * - descent: -253
+	 * - lineGap: 0
+	 * - unitsPerEm: 1000
+	 * - xWidthAvg: 430
+	 *
+	 * Georgia Italic metrics:
+	 * - unitPerEm: 2048
+	 * - xWidthAvg: 931
+	 */
+	{
+		'@font-face': {
+			fontFamily: 'dovetail-mvb-fallback',
+			src: 'local("Georgia Italic")',
+			fontStyle: 'italic',
+			...adjustFallbackFont({
+				ascent: 1081,
+				descent: 253,
+				lineGap: 0,
+				unitsPerEm: 1000,
+				avgCharWidth: 430,
+				fallbackUnitsPerEm: 2048,
+				fallbackAvgCharWidth: 931,
+			}),
+		},
+	},
 	// Note corresponding font weight in Tailwind is "normal"
 	{
 		'@font-face': {
@@ -26,6 +123,36 @@ export const webFonts = [
 			src: 'url(//www.kiva.org/static/fonts/PostGrotesk-Medium.8c8a585.woff2) format(\'woff2\')',
 		},
 	},
+	/**
+	 * Fallback for Post Grotesk Medium
+	 *
+	 * Post Grotesk Medium metrics:
+	 * - ascent:948
+	 * - descent: -262
+	 * - lineGap: 0
+	 * - unitsPerEm: 1000
+	 * - xWidthAvg: 451
+	 *
+	 * Arial Bold metrics:
+	 * - unitsPerEm: 2048
+	 * - xWidthAvg: 983
+	 */
+	{
+		'@font-face': {
+			fontFamily: 'PostGrotesk-fallback',
+			src: 'local("Arial Bold")',
+			fontWeight: '400',
+			...adjustFallbackFont({
+				ascent: 948,
+				descent: 262,
+				lineGap: 0,
+				unitsPerEm: 1000,
+				avgCharWidth: 451,
+				fallbackUnitsPerEm: 2048,
+				fallbackAvgCharWidth: 983,
+			}),
+		},
+	},
 	// Note corresponding font weight in Tailwind is "normal"
 	{
 		'@font-face': {
@@ -37,6 +164,37 @@ export const webFonts = [
 			src: 'url(//www.kiva.org/static/fonts/PostGrotesk-MediumItalic.133f41d.woff2) format(\'woff2\')',
 		},
 	},
+	/**
+	 * Fallback for Post Grotesk Medium Italic
+	 *
+	 * Post Grotesk Medium Italic metrics:
+	 * - ascent: 949
+	 * - descent: -259
+	 * - lineGap: 0
+	 * - unitsPerEm: 1000
+	 * - xWidthAvg: 451
+	 *
+	 * Arial Bold Italic metrics:
+	 * - unitsPerEm: 2048
+	 * - xWidthAvg: 983
+	 */
+	{
+		'@font-face': {
+			fontFamily: 'PostGrotesk-fallback',
+			src: 'local("Arial Bold Italic")',
+			fontWeight: '400',
+			fontStyle: 'italic',
+			...adjustFallbackFont({
+				ascent: 949,
+				descent: 259,
+				lineGap: 0,
+				unitsPerEm: 1000,
+				avgCharWidth: 451,
+				fallbackUnitsPerEm: 2048,
+				fallbackAvgCharWidth: 983,
+			}),
+		},
+	},
 	// Note corresponding font weight in Tailwind is "light"
 	{
 		'@font-face': {
@@ -47,6 +205,36 @@ export const webFonts = [
 			src: 'url(//www.kiva.org/static/fonts/PostGrotesk-Book.246fc8e.woff2) format(\'woff2\')',
 		},
 	},
+	/**
+	 * Fallback for Post Grotesk Book
+	 *
+	 * Post Grotesk Book metrics:
+	 * - ascent: 927
+	 * - descent: -252
+	 * - lineGap: 0
+	 * - unitsPerEm: 1000
+	 * - xWidthAvg: 440
+	 *
+	 * Arial metrics:
+	 * - unitsPerEm: 2048
+	 * - xWidthAvg: 913
+	 */
+	{
+		'@font-face': {
+			fontFamily: 'PostGrotesk-fallback',
+			src: 'local("Arial")',
+			fontWeight: '300',
+			...adjustFallbackFont({
+				ascent: 927,
+				descent: 252,
+				lineGap: 0,
+				unitsPerEm: 1000,
+				avgCharWidth: 440,
+				fallbackUnitsPerEm: 2048,
+				fallbackAvgCharWidth: 913,
+			}),
+		},
+	},
 	// Note corresponding font weight in Tailwind is "light"
 	{
 		'@font-face': {
@@ -58,6 +246,37 @@ export const webFonts = [
 			src: 'url(//www.kiva.org/static/fonts/PostGrotesk-BookItalic.4d06d39.woff2) format(\'woff2\')',
 		},
 	},
+	/**
+	 * Fallback for Post Grotesk Book Italic
+	 *
+	 * Post Grotesk Book Italic metrics:
+	 * - ascent: 927
+	 * - descent: -251
+	 * - lineGap: 0
+	 * - unitsPerEm: 1000
+	 * - xWidthAvg: 439
+	 *
+	 * Arial Italic metrics:
+	 * - unitsPerEm: 2048
+	 * - xWidthAvg: 913
+	 */
+	{
+		'@font-face': {
+			fontFamily: 'PostGrotesk-fallback',
+			src: 'local("Arial Italic")',
+			fontWeight: '300',
+			fontStyle: 'italic',
+			...adjustFallbackFont({
+				ascent: 927,
+				descent: 251,
+				lineGap: 0,
+				unitsPerEm: 1000,
+				avgCharWidth: 439,
+				fallbackUnitsPerEm: 2048,
+				fallbackAvgCharWidth: 913,
+			}),
+		},
+	},
 ];
 
 /** BASE TEXT COLOR */

package/configs/tailwind.config.js

@@ -89,10 +89,8 @@ export default {
 			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`],
+			sans: [fonts.sans],
+			serif: [fonts.serif],
 		},
 		fontWeight: {
 			// Keeping "book" defined here for backwards compatibility

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kiva/kv-tokens",
-    "version": "3.4.1",
+    "version": "3.5.1",
     "type": "module",
     "publishConfig": {
         "access": "public"
@@ -15,5 +15,5 @@
         "@tailwindcss/typography": "^0.5.1",
         "tailwindcss": "^3.4.3"
     },
-    "gitHead": "d6faecba8a629cf10ff434d9fdcbad291a517fe1"
+    "gitHead": "68824d91cf73da7a300823b297446636863362a0"
 }

package/primitives.js

@@ -400,22 +400,34 @@ export default {
 		4: 32,
 		4.5: 36,
 		5: 40,
+		5.5: 44,
 		6: 48,
 		6.5: 52,
 		7: 56,
+		7.5: 60,
 		8: 64,
+		8.5: 68,
 		9: 72,
+		9.5: 76,
 		10: 80,
+		10.5: 84,
 		11: 88,
+		11.5: 92,
 		12: 96,
+		12.5: 100,
 		13: 104,
+		13.5: 108,
 		14: 112,
+		14.5: 116,
 		15: 120,
+		15.5: 124,
 		16: 128,
 	},
 	fonts: {
-		sans: 'PostGrotesk',
-		serif: 'dovetail-mvb',
+		// eslint-disable-next-line max-len
+		sans: "PostGrotesk, PostGrotesk-fallback, 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: "dovetail-mvb, dovetail-mvb-fallback, ui-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Palatino', Georgia, 'Times New Roman', serif",
 	},
 	fontSizes: {
 		base: {