fix(#2976): update header name line height across multiple templates

This commit is contained in:
Amruth Pillai
2026-05-07 21:34:01 +02:00
parent 2b3af1f7b7
commit 1b0bb067b6
15 changed files with 30 additions and 28 deletions
@@ -19,7 +19,7 @@ import { getTemplatePageSize } from "../shared/page-size";
import { hasTemplatePicture } from "../shared/picture";
import { Heading, Icon, Link, Text } from "../shared/primitives";
import { Section } from "../shared/sections";
import { composeStyles, resolvePlacementColor } from "../shared/styles";
import { composeStyles, headerNameLineHeight, resolvePlacementColor } from "../shared/styles";
type AzurillStyles = Omit<TemplateStyleSlots, "page"> & {
page: Style;
@@ -263,7 +263,7 @@ const useAzurillTemplate = (): AzurillTemplate => {
},
headerName: {
fontSize: metadata.typography.heading.fontSize * 1.5,
lineHeight: 1,
lineHeight: headerNameLineHeight,
},
headerContactRow: {
justifyContent: "center",
@@ -13,7 +13,7 @@ import { getTemplatePageSize } from "../shared/page-size";
import { hasTemplatePicture } from "../shared/picture";
import { Heading, Icon, Link, Text } from "../shared/primitives";
import { Section } from "../shared/sections";
import { composeStyles } from "../shared/styles";
import { composeStyles, headerNameLineHeight } from "../shared/styles";
type BronzorStyles = Omit<TemplateStyleSlots, "page"> & {
page: Style;
@@ -259,7 +259,7 @@ const useBronzorTemplate = (): BronzorTemplate => {
},
headerName: {
fontSize: metadata.typography.heading.fontSize * 1.5,
lineHeight: 1,
lineHeight: headerNameLineHeight,
},
headerContactRow: {
justifyContent: "center",
@@ -13,7 +13,7 @@ import { getTemplatePageSize } from "../shared/page-size";
import { hasTemplatePicture } from "../shared/picture";
import { Heading, Icon, Link, Text } from "../shared/primitives";
import { Section } from "../shared/sections";
import { composeStyles, resolvePlacementColor } from "../shared/styles";
import { composeStyles, headerNameLineHeight, resolvePlacementColor } from "../shared/styles";
type ChikoritaStyles = Omit<TemplateStyleSlots, "page"> & {
page: Style;
@@ -290,7 +290,7 @@ const useChikoritaTemplate = (): ChikoritaTemplate => {
},
headerName: {
fontSize: metadata.typography.heading.fontSize * 1.5,
lineHeight: 1,
lineHeight: headerNameLineHeight,
},
headerContactList: {
rowGap: metrics.gapY(0.125),
@@ -13,7 +13,7 @@ import { getTemplatePageSize } from "../shared/page-size";
import { hasTemplatePicture } from "../shared/picture";
import { Heading, Icon, Link, Text } from "../shared/primitives";
import { Section } from "../shared/sections";
import { composeStyles, resolvePlacementColor } from "../shared/styles";
import { composeStyles, headerNameLineHeight, resolvePlacementColor } from "../shared/styles";
type DitgarStyles = Omit<TemplateStyleSlots, "page"> & {
page: Style;
@@ -273,7 +273,7 @@ const useDitgarTemplate = (): DitgarTemplate => {
},
headerName: {
fontSize: metadata.typography.heading.fontSize * 1.5,
lineHeight: 1,
lineHeight: headerNameLineHeight,
color: background,
},
headerText: { color: background },
@@ -13,7 +13,7 @@ import { getTemplatePageSize } from "../shared/page-size";
import { hasTemplatePicture } from "../shared/picture";
import { Heading, Icon, Link, Text } from "../shared/primitives";
import { Section } from "../shared/sections";
import { composeStyles } from "../shared/styles";
import { composeStyles, headerNameLineHeight } from "../shared/styles";
type DittoStyles = Omit<TemplateStyleSlots, "page"> & {
page: Style;
@@ -299,7 +299,7 @@ const useDittoTemplate = (): DittoTemplate => {
headerName: {
fontSize: metadata.typography.heading.fontSize * 1.5,
color: background,
lineHeight: 1,
lineHeight: headerNameLineHeight,
},
headerHeadline: {
color: background,
@@ -13,7 +13,7 @@ import { getTemplatePageSize } from "../shared/page-size";
import { hasTemplatePicture } from "../shared/picture";
import { Heading, Icon, Link, Text } from "../shared/primitives";
import { Section } from "../shared/sections";
import { composeStyles, resolvePlacementColor } from "../shared/styles";
import { composeStyles, headerNameLineHeight, resolvePlacementColor } from "../shared/styles";
type GengarStyles = Omit<TemplateStyleSlots, "page"> & {
page: Style;
@@ -318,7 +318,7 @@ const useGengarTemplate = (): GengarTemplate => {
headerName: {
fontSize: metadata.typography.heading.fontSize * 1.5,
color: background,
lineHeight: 1,
lineHeight: headerNameLineHeight,
},
headerText: {
color: background,
@@ -13,7 +13,7 @@ import { getTemplatePageSize } from "../shared/page-size";
import { hasTemplatePicture } from "../shared/picture";
import { Heading, Icon, Link, Text } from "../shared/primitives";
import { Section } from "../shared/sections";
import { composeStyles, resolvePlacementColor } from "../shared/styles";
import { composeStyles, headerNameLineHeight, resolvePlacementColor } from "../shared/styles";
type GlalieStyles = Omit<TemplateStyleSlots, "page"> & {
page: Style;
@@ -254,7 +254,7 @@ const useGlalieTemplate = (): GlalieTemplate => {
},
headerTitle: { alignItems: "center", textAlign: "center" },
headerIdentity: { alignItems: "center", textAlign: "center", rowGap: metrics.gapY(0.35) },
headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: 1 },
headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: headerNameLineHeight },
contactList: {
width: "100%",
borderWidth: 1,
@@ -13,7 +13,7 @@ import { getTemplatePageSize } from "../shared/page-size";
import { hasTemplatePicture } from "../shared/picture";
import { Heading, Icon, Link, Text } from "../shared/primitives";
import { Section } from "../shared/sections";
import { composeStyles } from "../shared/styles";
import { composeStyles, headerNameLineHeight } from "../shared/styles";
type KakunaStyles = Omit<TemplateStyleSlots, "page"> & {
page: Style;
@@ -259,7 +259,7 @@ const useKakunaTemplate = (): KakunaTemplate => {
headerName: {
width: "100%",
fontSize: metadata.typography.heading.fontSize * 1.5,
lineHeight: 1,
lineHeight: headerNameLineHeight,
textAlign: "center",
},
headerText: {
@@ -13,7 +13,7 @@ import { getTemplatePageSize } from "../shared/page-size";
import { hasTemplatePicture } from "../shared/picture";
import { Heading, Icon, Link, Text } from "../shared/primitives";
import { Section } from "../shared/sections";
import { composeStyles } from "../shared/styles";
import { composeStyles, headerNameLineHeight } from "../shared/styles";
type LaprasStyles = Omit<TemplateStyleSlots, "page"> & {
page: Style;
@@ -224,7 +224,7 @@ const useLaprasTemplate = (): LaprasTemplate => {
},
headerTitle: { rowGap: metrics.gapY(0.5) },
headerIdentity: { textAlign: "left", alignItems: "flex-start", rowGap: metrics.gapY(0.35) },
headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: 1 },
headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: headerNameLineHeight },
contactList: {
flexDirection: "row",
flexWrap: "wrap",
@@ -13,7 +13,7 @@ import { getTemplatePageSize } from "../shared/page-size";
import { hasTemplatePicture } from "../shared/picture";
import { Heading, Icon, Link, Text } from "../shared/primitives";
import { Section } from "../shared/sections";
import { composeStyles } from "../shared/styles";
import { composeStyles, headerNameLineHeight } from "../shared/styles";
type LeafishStyles = Omit<TemplateStyleSlots, "page"> & {
page: Style;
@@ -221,7 +221,7 @@ const useLeafishTemplate = (): LeafishTemplate => {
rowGap: metrics.gapY(0.5),
},
headerIdentity: { textAlign: "left", alignItems: "flex-start", rowGap: metrics.gapY(0.35) },
headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: 1 },
headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: headerNameLineHeight },
headerContactBand: {
backgroundColor: primaryTintDark,
paddingHorizontal: metrics.page.paddingHorizontal,
@@ -13,7 +13,7 @@ import { getTemplatePageSize } from "../shared/page-size";
import { hasTemplatePicture } from "../shared/picture";
import { Heading, Icon, Link, Text } from "../shared/primitives";
import { Section } from "../shared/sections";
import { composeStyles } from "../shared/styles";
import { composeStyles, headerNameLineHeight } from "../shared/styles";
type MeowthStyles = Omit<TemplateStyleSlots, "page"> & {
page: Style;
@@ -194,7 +194,7 @@ const useMeowthTemplate = (): MeowthTemplate => {
header: { flexDirection: "row", alignItems: "flex-start", columnGap: metrics.gapX(1) },
headerTitle: { flex: 1, rowGap: metrics.gapY(0.5) },
headerIdentity: { textAlign: "left", alignItems: "flex-start", rowGap: metrics.gapY(0.35) },
headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: 1 },
headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: headerNameLineHeight },
headerHeadline: { opacity: 0.8 },
contactList: {
flexDirection: "row",
+2 -2
View File
@@ -13,7 +13,7 @@ import { getTemplatePageSize } from "../shared/page-size";
import { hasTemplatePicture } from "../shared/picture";
import { Heading, Icon, Link, Text } from "../shared/primitives";
import { Section } from "../shared/sections";
import { composeStyles } from "../shared/styles";
import { composeStyles, headerNameLineHeight } from "../shared/styles";
type OnyxStyles = Omit<TemplateStyleSlots, "page"> & {
page: Style;
@@ -196,7 +196,7 @@ const useOnyxTemplate = (): OnyxTemplate => {
},
headerTitle: { rowGap: metrics.gapY(0.5) },
headerIdentity: { textAlign: "left", alignItems: "flex-start", rowGap: metrics.gapY(0.35) },
headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: 1 },
headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: headerNameLineHeight },
contactList: {
flexDirection: "row",
flexWrap: "wrap",
@@ -13,7 +13,7 @@ import { getTemplatePageSize } from "../shared/page-size";
import { hasTemplatePicture } from "../shared/picture";
import { Heading, Icon, Link, Text } from "../shared/primitives";
import { Section } from "../shared/sections";
import { composeStyles, resolvePlacementColor } from "../shared/styles";
import { composeStyles, headerNameLineHeight, resolvePlacementColor } from "../shared/styles";
type PikachuStyles = Omit<TemplateStyleSlots, "page"> & {
page: Style;
@@ -240,7 +240,7 @@ const usePikachuTemplate = (): PikachuTemplate => {
headerName: {
color: background,
fontSize: metadata.typography.heading.fontSize * 1.5,
lineHeight: 1,
lineHeight: headerNameLineHeight,
},
headerText: { color: background },
contactList: {
@@ -13,7 +13,7 @@ import { getTemplatePageSize } from "../shared/page-size";
import { hasTemplatePicture } from "../shared/picture";
import { Heading, Icon, Link, Text } from "../shared/primitives";
import { Section } from "../shared/sections";
import { composeStyles } from "../shared/styles";
import { composeStyles, headerNameLineHeight } from "../shared/styles";
type RhyhornStyles = Omit<TemplateStyleSlots, "page"> & {
page: Style;
@@ -194,7 +194,7 @@ const useRhyhornTemplate = (): RhyhornTemplate => {
header: { flexDirection: "row", alignItems: "center", columnGap: metrics.gapX(0.5) },
headerTitle: { flex: 1, rowGap: metrics.gapY(0.5) },
headerIdentity: { textAlign: "left", alignItems: "flex-start", rowGap: metrics.gapY(0.35) },
headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: 1 },
headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: headerNameLineHeight },
contactList: { flexDirection: "row", flexWrap: "wrap", rowGap: metrics.gapY(0.125) },
contactItem: {
flexDirection: "row",
@@ -21,6 +21,8 @@ export const mergeStyles = (...styles: StyleInput[]): Style => Object.assign({},
export const mergeLinkStyles = (...styles: StyleInput[]): Style => mergeStyles(...styles, linkUnderlineStyle);
export const headerNameLineHeight = 1.2;
export type ResolvePlacementColorOptions = {
placement: TemplatePlacement;
defaultForeground: string;