@yahoo/uds 3.66.1 → 3.67.0-beta.1

package/dist/tokens/configs/typography.js

@@ -0,0 +1,398 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+//#region src/tokens/configs/typography.ts
+const fontFamily = {
+	display1: "sans",
+	display2: "sans",
+	display3: "sans",
+	title1: "sans",
+	title2: "sans",
+	title3: "sans",
+	title4: "sans",
+	headline1: "sans",
+	body1: "sans",
+	label1: "sans",
+	label2: "sans",
+	label3: "sans",
+	label4: "sans",
+	caption1: "sans",
+	caption2: "sans",
+	legal1: "sans",
+	ui1: "sans",
+	ui2: "sans",
+	ui3: "sans",
+	ui4: "sans",
+	ui5: "sans",
+	ui6: "sans"
+};
+/** @deprecated Descriptive font weights vary based on font, so this is not correct for each font we support
+* This is used as a baseline for using native font weights in the system IE. <Text fontWeight="bold" />
+*/
+const fontWeightMap = {
+	thin: "100",
+	extralight: "200",
+	light: "300",
+	regular: "400",
+	medium: "500",
+	semibold: "600",
+	bold: "700",
+	extrabold: "800",
+	black: "900"
+};
+const fontWeight = {
+	display1: 850,
+	display2: 800,
+	display3: 800,
+	title1: 700,
+	title2: 700,
+	title3: 700,
+	title4: 700,
+	headline1: 600,
+	body1: 450,
+	label1: 600,
+	label2: 450,
+	label3: 450,
+	label4: 450,
+	caption1: 600,
+	caption2: 450,
+	legal1: 600,
+	ui1: 450,
+	ui2: 450,
+	ui3: 450,
+	ui4: 450,
+	ui5: 450,
+	ui6: 450
+};
+const fontSlant = {
+	display1: 0,
+	display2: 0,
+	display3: 0,
+	title1: 0,
+	title2: 0,
+	title3: 0,
+	title4: 0,
+	headline1: 0,
+	body1: 0,
+	label1: 0,
+	label2: 0,
+	label3: 0,
+	label4: 0,
+	caption1: 0,
+	caption2: 0,
+	legal1: 0,
+	ui1: 0,
+	ui2: 0,
+	ui3: 0,
+	ui4: 0,
+	ui5: 0,
+	ui6: 0
+};
+const fontWidth = {
+	display1: 75,
+	display2: 75,
+	display3: 75,
+	title1: 75,
+	title2: 75,
+	title3: 75,
+	title4: 75,
+	headline1: 75,
+	body1: 75,
+	label1: 75,
+	label2: 75,
+	label3: 75,
+	label4: 75,
+	caption1: 75,
+	caption2: 75,
+	legal1: 75,
+	ui1: 75,
+	ui2: 75,
+	ui3: 75,
+	ui4: 75,
+	ui5: 75,
+	ui6: 75
+};
+const textTransform = {
+	display1: "uppercase",
+	display2: "none",
+	display3: "none",
+	title1: "none",
+	title2: "none",
+	title3: "none",
+	title4: "none",
+	headline1: "none",
+	body1: "none",
+	label1: "none",
+	label2: "none",
+	label3: "none",
+	label4: "none",
+	caption1: "none",
+	caption2: "none",
+	legal1: "none",
+	ui1: "none",
+	ui2: "none",
+	ui3: "none",
+	ui4: "none",
+	ui5: "none",
+	ui6: "none"
+};
+const xSmall = {
+	fontSize: {
+		display1: 46,
+		display2: 37,
+		display3: 33,
+		title1: 29,
+		title2: 25,
+		title3: 21,
+		title4: 17,
+		headline1: 13,
+		body1: 13,
+		label1: 12,
+		label2: 12,
+		label3: 12,
+		label4: 10,
+		caption1: 11,
+		caption2: 11,
+		legal1: 10,
+		ui1: 12,
+		ui2: 12,
+		ui3: 12,
+		ui4: 12,
+		ui5: 12,
+		ui6: 12
+	},
+	lineHeight: {
+		display1: 44,
+		display3: 44,
+		display2: 44,
+		title1: 36,
+		title2: 32,
+		title3: 28,
+		title4: 24,
+		headline1: 16,
+		body1: 16,
+		label1: 16,
+		label2: 16,
+		label3: 16,
+		label4: 13.5,
+		caption1: 16,
+		caption2: 16,
+		legal1: 12,
+		ui1: 12,
+		ui2: 12,
+		ui3: 12,
+		ui4: 12,
+		ui5: 12,
+		ui6: 12
+	}
+};
+const small = {
+	fontSize: {
+		display1: 46,
+		display2: 38,
+		display3: 34,
+		title1: 30,
+		title2: 26,
+		title3: 22,
+		title4: 18,
+		headline1: 14,
+		body1: 14,
+		label1: 13,
+		label2: 13,
+		label3: 13,
+		label4: 11,
+		caption1: 12,
+		caption2: 12,
+		legal1: 11,
+		ui1: 12,
+		ui2: 12,
+		ui3: 12,
+		ui4: 12,
+		ui5: 12,
+		ui6: 12
+	},
+	lineHeight: {
+		...xSmall.lineHeight,
+		title1: 40,
+		headline1: 20,
+		body1: 20,
+		legal1: 16,
+		label3: 16,
+		label4: 13.5
+	}
+};
+const medium = {
+	fontSize: {
+		display1: 47,
+		display2: 39,
+		display3: 35,
+		title1: 31,
+		title2: 27,
+		title3: 23,
+		title4: 19,
+		headline1: 15,
+		body1: 15,
+		label1: 13,
+		label2: 13,
+		label3: 13,
+		label4: 11,
+		caption1: 12,
+		caption2: 12,
+		legal1: 11,
+		ui1: 12,
+		ui2: 12,
+		ui3: 12,
+		ui4: 12,
+		ui5: 12,
+		ui6: 12
+	},
+	lineHeight: {
+		...small.lineHeight,
+		title2: 36,
+		title3: 32,
+		label3: 16,
+		label4: 13.5
+	}
+};
+const large = {
+	fontSize: {
+		...medium.fontSize,
+		display1: 48,
+		display2: 40,
+		display3: 36,
+		title1: 32,
+		title2: 28,
+		title3: 24,
+		title4: 20,
+		headline1: 16,
+		body1: 16,
+		label1: 14,
+		label2: 14,
+		label3: 14,
+		label4: 12
+	},
+	lineHeight: {
+		...medium.lineHeight,
+		title2: 36,
+		title3: 32,
+		headline1: 20,
+		body1: 20,
+		label1: 20,
+		label2: 20,
+		label3: 20,
+		label4: 17.5
+	}
+};
+const xLarge = {
+	fontSize: {
+		display1: 50,
+		display2: 42,
+		display3: 38,
+		title1: 34,
+		title2: 30,
+		title3: 26,
+		title4: 22,
+		headline1: 18,
+		body1: 16,
+		label1: 16,
+		label2: 16,
+		label3: 16,
+		label4: 14,
+		caption1: 14,
+		caption2: 14,
+		legal1: 13,
+		ui1: 14,
+		ui2: 14,
+		ui3: 14,
+		ui4: 14,
+		ui5: 14,
+		ui6: 14
+	},
+	lineHeight: {
+		...large.lineHeight,
+		title1: 44,
+		headline1: 24,
+		body1: 24,
+		caption1: 20,
+		caption2: 20,
+		label3: 20,
+		label4: 17.5
+	}
+};
+const xxLarge = {
+	fontSize: {
+		display1: 52,
+		display2: 44,
+		display3: 40,
+		title1: 36,
+		title2: 32,
+		title3: 28,
+		title4: 26,
+		headline1: 20,
+		body1: 20,
+		label1: 18,
+		label2: 18,
+		label3: 18,
+		label4: 16,
+		caption1: 16,
+		caption2: 16,
+		legal1: 15,
+		ui1: 16,
+		ui2: 16,
+		ui3: 16,
+		ui4: 16,
+		ui5: 16,
+		ui6: 16
+	},
+	lineHeight: {
+		...xLarge.lineHeight,
+		title2: 40,
+		title3: 36,
+		headline1: 28,
+		body1: 28,
+		label1: 24,
+		label2: 24,
+		label3: 24,
+		label4: 21.5,
+		legal1: 20
+	}
+};
+const xxxLarge = {
+	fontSize: {
+		display1: 54,
+		display2: 46,
+		display3: 42,
+		title1: 38,
+		title2: 34,
+		title3: 30,
+		title4: 28,
+		headline1: 22,
+		body1: 22,
+		label1: 20,
+		label2: 20,
+		label3: 20,
+		label4: 18,
+		caption1: 18,
+		caption2: 18,
+		legal1: 17,
+		ui1: 18,
+		ui2: 18,
+		ui3: 18,
+		ui4: 18,
+		ui5: 18,
+		ui6: 18
+	},
+	lineHeight: {
+		...xxLarge.lineHeight,
+		title1: 48,
+		title2: 44,
+		title4: 32,
+		label1: 28,
+		label2: 28,
+		label3: 28,
+		label4: 25.5,
+		caption1: 24,
+		caption2: 24
+	}
+};
+
+//#endregion
+export { fontFamily, fontSlant, fontWeight, fontWeightMap, fontWidth, large, medium, small, textTransform, xLarge, xSmall, xxLarge, xxxLarge };