From 17cddbad65a3f3c5e54cb92e15979e0ce0a9a4aa Mon Sep 17 00:00:00 2001 From: Amruth Pillai Date: Tue, 26 May 2026 00:13:38 +0200 Subject: [PATCH] fix: reduce default list item row gap --- .../pdf/src/templates/azurill/AzurillPage.tsx | 3 +- .../pdf/src/templates/bronzor/BronzorPage.tsx | 3 +- .../src/templates/chikorita/ChikoritaPage.tsx | 3 +- .../pdf/src/templates/ditgar/DitgarPage.tsx | 84 +++++++++--- .../pdf/src/templates/ditto/DittoPage.tsx | 3 +- .../pdf/src/templates/gengar/GengarPage.tsx | 3 +- .../pdf/src/templates/glalie/GlaliePage.tsx | 113 ++++++++++++---- .../pdf/src/templates/kakuna/KakunaPage.tsx | 3 +- .../pdf/src/templates/lapras/LaprasPage.tsx | 87 +++++++++--- .../pdf/src/templates/leafish/LeafishPage.tsx | 95 +++++++++++--- .../pdf/src/templates/meowth/MeowthPage.tsx | 124 ++++++++++++++---- packages/pdf/src/templates/onyx/OnyxPage.tsx | 92 ++++++++++--- .../pdf/src/templates/pikachu/PikachuPage.tsx | 85 +++++++++--- .../pdf/src/templates/rhyhorn/RhyhornPage.tsx | 87 +++++++++--- .../pdf/src/templates/scizor/ScizorPage.tsx | 86 +++++++++--- 15 files changed, 688 insertions(+), 183 deletions(-) diff --git a/packages/pdf/src/templates/azurill/AzurillPage.tsx b/packages/pdf/src/templates/azurill/AzurillPage.tsx index 35881a470..1c76602ef 100644 --- a/packages/pdf/src/templates/azurill/AzurillPage.tsx +++ b/packages/pdf/src/templates/azurill/AzurillPage.tsx @@ -208,8 +208,9 @@ const useAzurillTemplate = (): AzurillTemplate => { textAlign: r.listMarkerTextAlign, }, richListItemContent: { - flex: 1, ...bodyText, + flex: 1, + lineHeight: metadata.typography.body.lineHeight * 0.5, }, splitRow: { flexDirection: r.row, diff --git a/packages/pdf/src/templates/bronzor/BronzorPage.tsx b/packages/pdf/src/templates/bronzor/BronzorPage.tsx index dfe3cc1cc..bf6501278 100644 --- a/packages/pdf/src/templates/bronzor/BronzorPage.tsx +++ b/packages/pdf/src/templates/bronzor/BronzorPage.tsx @@ -204,8 +204,9 @@ const useBronzorTemplate = (): BronzorTemplate => { textAlign: r.listMarkerTextAlign, }, richListItemContent: { - flex: 1, ...bodyText, + flex: 1, + lineHeight: metadata.typography.body.lineHeight * 0.5, }, splitRow: { flexDirection: r.row, diff --git a/packages/pdf/src/templates/chikorita/ChikoritaPage.tsx b/packages/pdf/src/templates/chikorita/ChikoritaPage.tsx index c8b6b455b..77bf791c1 100644 --- a/packages/pdf/src/templates/chikorita/ChikoritaPage.tsx +++ b/packages/pdf/src/templates/chikorita/ChikoritaPage.tsx @@ -218,8 +218,9 @@ const useChikoritaTemplate = (): ChikoritaTemplate => { textAlign: r.listMarkerTextAlign, }, richListItemContent: { - flex: 1, ...bodyText, + flex: 1, + lineHeight: metadata.typography.body.lineHeight * 0.5, }, splitRow: { flexDirection: r.row, diff --git a/packages/pdf/src/templates/ditgar/DitgarPage.tsx b/packages/pdf/src/templates/ditgar/DitgarPage.tsx index d54aa8822..2f3a62344 100644 --- a/packages/pdf/src/templates/ditgar/DitgarPage.tsx +++ b/packages/pdf/src/templates/ditgar/DitgarPage.tsx @@ -212,15 +212,44 @@ const useDitgarTemplate = (): DitgarTemplate => { color: foreground, ...r.text, }, - div: { rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(1 / 3) }, - inline: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 3) }, - link: { textDecoration: "none", color: foreground }, - small: { fontSize: metadata.typography.body.fontSize * 0.875 }, - bold: { fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600" }, - richParagraph: { margin: 0, ...bodyText }, - richListItemRow: { flexDirection: "row", columnGap: metrics.gapX(1 / 3), alignItems: "flex-start" }, - richListItemMarker: { ...bodyText, width: metadata.typography.body.fontSize, textAlign: r.listMarkerTextAlign }, - richListItemContent: { flex: 1, ...bodyText }, + div: { + rowGap: metrics.gapY(0.125), + columnGap: metrics.gapX(1 / 3), + }, + inline: { + flexDirection: r.row, + alignItems: "center", + columnGap: metrics.gapX(1 / 3), + }, + link: { + textDecoration: "none", + color: foreground, + }, + small: { + fontSize: metadata.typography.body.fontSize * 0.875, + }, + bold: { + fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600", + }, + richParagraph: { + margin: 0, + ...bodyText, + }, + richListItemRow: { + flexDirection: "row", + columnGap: metrics.gapX(1 / 3), + alignItems: "flex-start", + }, + richListItemMarker: { + ...bodyText, + width: metadata.typography.body.fontSize, + textAlign: r.listMarkerTextAlign, + }, + richListItemContent: { + ...bodyText, + flex: 1, + lineHeight: metadata.typography.body.lineHeight * 0.5, + }, splitRow: { flexDirection: r.row, flexWrap: "wrap", @@ -228,8 +257,13 @@ const useDitgarTemplate = (): DitgarTemplate => { justifyContent: "space-between", columnGap: metrics.gapX(2 / 3), }, - alignEnd: { ...r.alignEnd }, - section: { flexDirection: "column", rowGap: metrics.gapY(0.25) }, + alignEnd: { + ...r.alignEnd, + }, + section: { + flexDirection: "column", + rowGap: metrics.gapY(0.25), + }, sectionHeading: { fontSize: metadata.typography.heading.fontSize * 0.9, color: primary, @@ -237,10 +271,18 @@ const useDitgarTemplate = (): DitgarTemplate => { borderBottomColor: primary, paddingBottom: metrics.gapY(0.125), }, - item: { rowGap: metrics.gapY(0.125) }, - levelContainer: { width: "70%" }, - levelItem: { borderColor: primary }, - levelItemActive: { backgroundColor: primary }, + item: { + rowGap: metrics.gapY(0.125), + }, + levelContainer: { + width: "70%", + }, + levelItem: { + borderColor: primary, + }, + levelItemActive: { + backgroundColor: primary, + }, sidebarColumn: { flexShrink: 0, backgroundColor: primaryTint, @@ -250,7 +292,9 @@ const useDitgarTemplate = (): DitgarTemplate => { paddingTop: metrics.page.paddingVertical, paddingBottom: metrics.page.paddingVertical, }, - mainColumn: { flex: 1 }, + mainColumn: { + flex: 1, + }, mainContent: { paddingHorizontal: metrics.page.paddingHorizontal, paddingTop: metrics.page.paddingVertical, @@ -290,8 +334,12 @@ const useDitgarTemplate = (): DitgarTemplate => { lineHeight: headerNameLineHeight, color: background, }, - headerText: { color: background }, - contactList: { rowGap: metrics.gapY(0.125) }, + headerText: { + color: background, + }, + contactList: { + rowGap: metrics.gapY(0.125), + }, contactItem: { flexDirection: r.row, alignItems: "center", diff --git a/packages/pdf/src/templates/ditto/DittoPage.tsx b/packages/pdf/src/templates/ditto/DittoPage.tsx index b234dd862..fff1fe046 100644 --- a/packages/pdf/src/templates/ditto/DittoPage.tsx +++ b/packages/pdf/src/templates/ditto/DittoPage.tsx @@ -214,8 +214,9 @@ const useDittoTemplate = (): DittoTemplate => { textAlign: r.listMarkerTextAlign, }, richListItemContent: { - flex: 1, ...bodyText, + flex: 1, + lineHeight: metadata.typography.body.lineHeight * 0.5, }, splitRow: { flexDirection: r.row, diff --git a/packages/pdf/src/templates/gengar/GengarPage.tsx b/packages/pdf/src/templates/gengar/GengarPage.tsx index e2bd2f3bd..15a2275cc 100644 --- a/packages/pdf/src/templates/gengar/GengarPage.tsx +++ b/packages/pdf/src/templates/gengar/GengarPage.tsx @@ -243,8 +243,9 @@ const useGengarTemplate = (): GengarTemplate => { textAlign: r.listMarkerTextAlign, }, richListItemContent: { - flex: 1, ...bodyText, + flex: 1, + lineHeight: metadata.typography.body.lineHeight * 0.5, }, splitRow: { flexDirection: r.row, diff --git a/packages/pdf/src/templates/glalie/GlaliePage.tsx b/packages/pdf/src/templates/glalie/GlaliePage.tsx index 99cda99b3..395f75991 100644 --- a/packages/pdf/src/templates/glalie/GlaliePage.tsx +++ b/packages/pdf/src/templates/glalie/GlaliePage.tsx @@ -189,15 +189,44 @@ const useGlalieTemplate = (): GlalieTemplate => { color: foreground, ...r.text, }, - div: { rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(1 / 3) }, - inline: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 3) }, - link: { textDecoration: "none", color: foreground }, - small: { fontSize: metadata.typography.body.fontSize * 0.875 }, - bold: { fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600" }, - richParagraph: { margin: 0, ...bodyText }, - richListItemRow: { flexDirection: "row", columnGap: metrics.gapX(1 / 3), alignItems: "flex-start" }, - richListItemMarker: { ...bodyText, width: metadata.typography.body.fontSize, textAlign: r.listMarkerTextAlign }, - richListItemContent: { flex: 1, ...bodyText }, + div: { + rowGap: metrics.gapY(0.125), + columnGap: metrics.gapX(1 / 3), + }, + inline: { + flexDirection: r.row, + alignItems: "center", + columnGap: metrics.gapX(1 / 3), + }, + link: { + textDecoration: "none", + color: foreground, + }, + small: { + fontSize: metadata.typography.body.fontSize * 0.875, + }, + bold: { + fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600", + }, + richParagraph: { + margin: 0, + ...bodyText, + }, + richListItemRow: { + flexDirection: "row", + columnGap: metrics.gapX(1 / 3), + alignItems: "flex-start", + }, + richListItemMarker: { + ...bodyText, + width: metadata.typography.body.fontSize, + textAlign: r.listMarkerTextAlign, + }, + richListItemContent: { + ...bodyText, + flex: 1, + lineHeight: metadata.typography.body.lineHeight * 0.5, + }, splitRow: { flexDirection: r.row, flexWrap: "wrap", @@ -205,13 +234,29 @@ const useGlalieTemplate = (): GlalieTemplate => { justifyContent: "space-between", columnGap: metrics.gapX(2 / 3), }, - alignEnd: { ...r.alignEnd }, - section: { flexDirection: "column", rowGap: metrics.gapY(0.25) }, - sectionHeading: { borderBottomWidth: 1, borderBottomColor: primary }, - item: { rowGap: metrics.gapY(0.125) }, - levelContainer: { width: "100%" }, - levelItem: { borderColor: primary }, - levelItemActive: { backgroundColor: primary }, + alignEnd: { + ...r.alignEnd, + }, + section: { + flexDirection: "column", + rowGap: metrics.gapY(0.25), + }, + sectionHeading: { + borderBottomWidth: 1, + borderBottomColor: primary, + }, + item: { + rowGap: metrics.gapY(0.125), + }, + levelContainer: { + width: "100%", + }, + levelItem: { + borderColor: primary, + }, + levelItemActive: { + backgroundColor: primary, + }, sidebarBackground: { position: "absolute", top: 0, @@ -220,7 +265,10 @@ const useGlalieTemplate = (): GlalieTemplate => { width: `${metadata.layout.sidebarWidth}%`, backgroundColor: primaryTint, }, - layout: { flexDirection: r.row, minHeight: "100%" }, + layout: { + flexDirection: r.row, + minHeight: "100%", + }, sidebarColumn: { zIndex: 1, backgroundColor: primaryTint, @@ -228,8 +276,13 @@ const useGlalieTemplate = (): GlalieTemplate => { paddingTop: metrics.page.paddingVertical, rowGap: metrics.sectionGap, }, - sidebarContent: { overflow: "hidden" }, - mainColumn: { flex: 1, zIndex: 1 }, + sidebarContent: { + overflow: "hidden", + }, + mainColumn: { + flex: 1, + zIndex: 1, + }, mainContent: { paddingHorizontal: metrics.page.paddingHorizontal, paddingTop: metrics.page.paddingVertical, @@ -250,9 +303,19 @@ const useGlalieTemplate = (): GlalieTemplate => { shadowWidth: picture.shadowWidth, transform: `rotate(${picture.rotation}deg)`, }, - headerTitle: { alignItems: "center", textAlign: "center" }, - headerIdentity: { alignItems: "center", textAlign: "center", rowGap: metrics.gapY(0.35) }, - headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: headerNameLineHeight }, + headerTitle: { + alignItems: "center", + textAlign: "center", + }, + headerIdentity: { + alignItems: "center", + textAlign: "center", + rowGap: metrics.gapY(0.35), + }, + headerName: { + fontSize: metadata.typography.heading.fontSize * 1.5, + lineHeight: headerNameLineHeight, + }, contactList: { width: "100%", borderWidth: 1, @@ -261,7 +324,11 @@ const useGlalieTemplate = (): GlalieTemplate => { padding: metrics.gapX(0.75), rowGap: metrics.gapY(0.125), }, - contactItem: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 6) }, + contactItem: { + flexDirection: r.row, + alignItems: "center", + columnGap: metrics.gapX(1 / 6), + }, }); const accentFor = ({ colors }: TemplateStyleContext) => colors.primary; diff --git a/packages/pdf/src/templates/kakuna/KakunaPage.tsx b/packages/pdf/src/templates/kakuna/KakunaPage.tsx index 57aff7589..625b15022 100644 --- a/packages/pdf/src/templates/kakuna/KakunaPage.tsx +++ b/packages/pdf/src/templates/kakuna/KakunaPage.tsx @@ -186,8 +186,9 @@ const useKakunaTemplate = (): KakunaTemplate => { textAlign: r.listMarkerTextAlign, }, richListItemContent: { - flex: 1, ...bodyText, + flex: 1, + lineHeight: metadata.typography.body.lineHeight * 0.5, }, splitRow: { flexDirection: r.row, diff --git a/packages/pdf/src/templates/lapras/LaprasPage.tsx b/packages/pdf/src/templates/lapras/LaprasPage.tsx index 51f770ae8..40adf901b 100644 --- a/packages/pdf/src/templates/lapras/LaprasPage.tsx +++ b/packages/pdf/src/templates/lapras/LaprasPage.tsx @@ -154,15 +154,44 @@ const useLaprasTemplate = (): LaprasTemplate => { color: foreground, ...r.text, }, - div: { rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(1 / 3) }, - inline: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 3) }, - link: { textDecoration: "none", color: foreground }, - small: { fontSize: metadata.typography.body.fontSize * 0.875 }, - bold: { fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600" }, - richParagraph: { margin: 0, ...bodyText }, - richListItemRow: { flexDirection: "row", columnGap: metrics.gapX(1 / 3), alignItems: "flex-start" }, - richListItemMarker: { ...bodyText, width: metadata.typography.body.fontSize, textAlign: r.listMarkerTextAlign }, - richListItemContent: { flex: 1, ...bodyText }, + div: { + rowGap: metrics.gapY(0.125), + columnGap: metrics.gapX(1 / 3), + }, + inline: { + flexDirection: r.row, + alignItems: "center", + columnGap: metrics.gapX(1 / 3), + }, + link: { + textDecoration: "none", + color: foreground, + }, + small: { + fontSize: metadata.typography.body.fontSize * 0.875, + }, + bold: { + fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600", + }, + richParagraph: { + margin: 0, + ...bodyText, + }, + richListItemRow: { + flexDirection: "row", + columnGap: metrics.gapX(1 / 3), + alignItems: "flex-start", + }, + richListItemMarker: { + ...bodyText, + width: metadata.typography.body.fontSize, + textAlign: r.listMarkerTextAlign, + }, + richListItemContent: { + ...bodyText, + flex: 1, + lineHeight: metadata.typography.body.lineHeight * 0.5, + }, splitRow: { flexDirection: r.row, flexWrap: "wrap", @@ -170,7 +199,9 @@ const useLaprasTemplate = (): LaprasTemplate => { justifyContent: "space-between", columnGap: metrics.gapX(2 / 3), }, - alignEnd: { ...r.alignEnd }, + alignEnd: { + ...r.alignEnd, + }, section: { flexDirection: "column", rowGap: metrics.gapY(0.25), @@ -186,10 +217,18 @@ const useLaprasTemplate = (): LaprasTemplate => { backgroundColor: background, paddingHorizontal: metrics.gapX(1), }, - item: { rowGap: metrics.gapY(0.125) }, - levelContainer: { width: "100%" }, - levelItem: { borderColor: primary }, - levelItemActive: { backgroundColor: primary }, + item: { + rowGap: metrics.gapY(0.125), + }, + levelContainer: { + width: "100%", + }, + levelItem: { + borderColor: primary, + }, + levelItemActive: { + backgroundColor: primary, + }, header: { flexDirection: r.row, alignItems: "center", @@ -212,16 +251,28 @@ const useLaprasTemplate = (): LaprasTemplate => { shadowWidth: picture.shadowWidth, transform: `rotate(${picture.rotation}deg)`, }, - headerTitle: { rowGap: metrics.gapY(0.5) }, - headerIdentity: { ...r.headerIdentity, rowGap: metrics.gapY(0.35) }, - headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: headerNameLineHeight }, + headerTitle: { + rowGap: metrics.gapY(0.5), + }, + headerIdentity: { + ...r.headerIdentity, + rowGap: metrics.gapY(0.35), + }, + headerName: { + fontSize: metadata.typography.heading.fontSize * 1.5, + lineHeight: headerNameLineHeight, + }, contactList: { flexDirection: r.row, flexWrap: "wrap", rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(0.5), }, - contactItem: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 6) }, + contactItem: { + flexDirection: r.row, + alignItems: "center", + columnGap: metrics.gapX(1 / 6), + }, sectionGroup: {}, }); diff --git a/packages/pdf/src/templates/leafish/LeafishPage.tsx b/packages/pdf/src/templates/leafish/LeafishPage.tsx index 1786832e1..686ffef2a 100644 --- a/packages/pdf/src/templates/leafish/LeafishPage.tsx +++ b/packages/pdf/src/templates/leafish/LeafishPage.tsx @@ -180,15 +180,44 @@ const useLeafishTemplate = (): LeafishTemplate => { color: foreground, ...r.text, }, - div: { rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(1 / 3) }, - inline: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 3) }, - link: { textDecoration: "none", color: foreground }, - small: { fontSize: metadata.typography.body.fontSize * 0.875 }, - bold: { fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600" }, - richParagraph: { margin: 0, ...bodyText }, - richListItemRow: { flexDirection: "row", columnGap: metrics.gapX(1 / 3), alignItems: "flex-start" }, - richListItemMarker: { ...bodyText, width: metadata.typography.body.fontSize, textAlign: r.listMarkerTextAlign }, - richListItemContent: { flex: 1, ...bodyText }, + div: { + rowGap: metrics.gapY(0.125), + columnGap: metrics.gapX(1 / 3), + }, + inline: { + flexDirection: r.row, + alignItems: "center", + columnGap: metrics.gapX(1 / 3), + }, + link: { + textDecoration: "none", + color: foreground, + }, + small: { + fontSize: metadata.typography.body.fontSize * 0.875, + }, + bold: { + fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600", + }, + richParagraph: { + margin: 0, + ...bodyText, + }, + richListItemRow: { + flexDirection: "row", + columnGap: metrics.gapX(1 / 3), + alignItems: "flex-start", + }, + richListItemMarker: { + ...bodyText, + width: metadata.typography.body.fontSize, + textAlign: r.listMarkerTextAlign, + }, + richListItemContent: { + ...bodyText, + flex: 1, + lineHeight: metadata.typography.body.lineHeight * 0.5, + }, splitRow: { flexDirection: r.row, flexWrap: "wrap", @@ -196,13 +225,29 @@ const useLeafishTemplate = (): LeafishTemplate => { justifyContent: "space-between", columnGap: metrics.gapX(2 / 3), }, - alignEnd: { ...r.alignEnd }, - section: { flexDirection: "column", rowGap: metrics.gapY(0.25) }, - sectionHeading: { borderBottomWidth: 1, borderBottomColor: primary }, - item: { rowGap: metrics.gapY(0.125) }, - levelContainer: { width: "100%" }, - levelItem: { borderColor: primary }, - levelItemActive: { backgroundColor: primary }, + alignEnd: { + ...r.alignEnd, + }, + section: { + flexDirection: "column", + rowGap: metrics.gapY(0.25), + }, + sectionHeading: { + borderBottomWidth: 1, + borderBottomColor: primary, + }, + item: { + rowGap: metrics.gapY(0.125), + }, + levelContainer: { + width: "100%", + }, + levelItem: { + borderColor: primary, + }, + levelItemActive: { + backgroundColor: primary, + }, header: {}, headerIntro: { backgroundColor: primaryTintLight, @@ -218,8 +263,14 @@ const useLeafishTemplate = (): LeafishTemplate => { flex: 1, rowGap: metrics.gapY(0.5), }, - headerIdentity: { ...r.headerIdentity, rowGap: metrics.gapY(0.35) }, - headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: headerNameLineHeight }, + headerIdentity: { + ...r.headerIdentity, + rowGap: metrics.gapY(0.35), + }, + headerName: { + fontSize: metadata.typography.heading.fontSize * 1.5, + lineHeight: headerNameLineHeight, + }, headerContactBand: { backgroundColor: primaryTintDark, paddingHorizontal: metrics.page.paddingHorizontal, @@ -254,8 +305,12 @@ const useLeafishTemplate = (): LeafishTemplate => { paddingHorizontal: metrics.page.paddingHorizontal, paddingTop: metrics.page.paddingVertical, }, - mainColumn: { flex: 1 }, - sidebarColumn: { flexShrink: 0 }, + mainColumn: { + flex: 1, + }, + sidebarColumn: { + flexShrink: 0, + }, }); const accentFor = ({ colors }: TemplateStyleContext) => colors.primary; diff --git a/packages/pdf/src/templates/meowth/MeowthPage.tsx b/packages/pdf/src/templates/meowth/MeowthPage.tsx index 189c5b252..185756aed 100644 --- a/packages/pdf/src/templates/meowth/MeowthPage.tsx +++ b/packages/pdf/src/templates/meowth/MeowthPage.tsx @@ -155,15 +155,44 @@ const useMeowthTemplate = (): MeowthTemplate => { color: foreground, ...r.text, }, - div: { rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(1 / 3) }, - inline: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 3) }, - link: { textDecoration: "none", color: foreground }, - small: { fontSize: metadata.typography.body.fontSize * 0.875 }, - bold: { fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600" }, - richParagraph: { margin: 0, ...bodyText }, - richListItemRow: { flexDirection: "row", columnGap: metrics.gapX(1 / 3), alignItems: "flex-start" }, - richListItemMarker: { ...bodyText, width: metadata.typography.body.fontSize, textAlign: r.listMarkerTextAlign }, - richListItemContent: { flex: 1, ...bodyText }, + div: { + rowGap: metrics.gapY(0.125), + columnGap: metrics.gapX(1 / 3), + }, + inline: { + flexDirection: r.row, + alignItems: "center", + columnGap: metrics.gapX(1 / 3), + }, + link: { + textDecoration: "none", + color: foreground, + }, + small: { + fontSize: metadata.typography.body.fontSize * 0.875, + }, + bold: { + fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600", + }, + richParagraph: { + margin: 0, + ...bodyText, + }, + richListItemRow: { + flexDirection: "row", + columnGap: metrics.gapX(1 / 3), + alignItems: "flex-start", + }, + richListItemMarker: { + ...bodyText, + width: metadata.typography.body.fontSize, + textAlign: r.listMarkerTextAlign, + }, + richListItemContent: { + ...bodyText, + flex: 1, + lineHeight: metadata.typography.body.lineHeight * 0.5, + }, splitRow: { flexDirection: r.row, flexWrap: "wrap", @@ -171,12 +200,30 @@ const useMeowthTemplate = (): MeowthTemplate => { justifyContent: "space-between", columnGap: metrics.gapX(2 / 3), }, - alignEnd: { ...r.alignEnd }, - inlineItemHeader: { flexDirection: r.row, alignItems: "flex-start", columnGap: metrics.gapX(0.75) }, - inlineItemHeaderLeading: { flex: 1, minWidth: 0 }, - inlineItemHeaderMiddle: { flex: 1, minWidth: 0 }, - inlineItemHeaderTrailing: { flexShrink: 0, textAlign: "right" }, - section: { flexDirection: "column", rowGap: metrics.gapY(0.25) }, + alignEnd: { + ...r.alignEnd, + }, + inlineItemHeader: { + flexDirection: r.row, + alignItems: "flex-start", + columnGap: metrics.gapX(0.75), + }, + inlineItemHeaderLeading: { + flex: 1, + minWidth: 0, + }, + inlineItemHeaderMiddle: { + flex: 1, + minWidth: 0, + }, + inlineItemHeaderTrailing: { + flexShrink: 0, + textAlign: "right", + }, + section: { + flexDirection: "column", + rowGap: metrics.gapY(0.25), + }, sectionHeading: { color: primary, textTransform: "uppercase", @@ -186,22 +233,49 @@ const useMeowthTemplate = (): MeowthTemplate => { paddingBottom: metrics.gapY(0.125), textAlign: r.sectionHeadingTextAlign, }, - item: { rowGap: metrics.gapY(0.125) }, - levelContainer: { width: "100%" }, - levelItem: { borderColor: primary }, - levelItemActive: { backgroundColor: primary }, - header: { flexDirection: r.row, alignItems: "flex-start", columnGap: metrics.gapX(1) }, - headerTitle: { flex: 1, rowGap: metrics.gapY(0.5) }, - headerIdentity: { ...r.headerIdentity, rowGap: metrics.gapY(0.35) }, - headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: headerNameLineHeight }, - headerHeadline: { opacity: 0.8 }, + item: { + rowGap: metrics.gapY(0.125), + }, + levelContainer: { + width: "100%", + }, + levelItem: { + borderColor: primary, + }, + levelItemActive: { + backgroundColor: primary, + }, + header: { + flexDirection: r.row, + alignItems: "flex-start", + columnGap: metrics.gapX(1), + }, + headerTitle: { + flex: 1, + rowGap: metrics.gapY(0.5), + }, + headerIdentity: { + ...r.headerIdentity, + rowGap: metrics.gapY(0.35), + }, + headerName: { + fontSize: metadata.typography.heading.fontSize * 1.5, + lineHeight: headerNameLineHeight, + }, + headerHeadline: { + opacity: 0.8, + }, contactList: { flexDirection: r.row, flexWrap: "wrap", rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(0.75), }, - contactItem: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 6) }, + contactItem: { + flexDirection: r.row, + alignItems: "center", + columnGap: metrics.gapX(1 / 6), + }, picture: { width: picture.size, height: picture.size, diff --git a/packages/pdf/src/templates/onyx/OnyxPage.tsx b/packages/pdf/src/templates/onyx/OnyxPage.tsx index ca2ba69d8..ca953a4c4 100644 --- a/packages/pdf/src/templates/onyx/OnyxPage.tsx +++ b/packages/pdf/src/templates/onyx/OnyxPage.tsx @@ -150,15 +150,44 @@ const useOnyxTemplate = (): OnyxTemplate => { color: foreground, ...r.text, }, - div: { rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(1 / 3) }, - inline: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 3) }, - link: { textDecoration: "none", color: foreground }, - small: { fontSize: metadata.typography.body.fontSize * 0.875 }, - bold: { fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600" }, - richParagraph: { margin: 0, ...bodyText }, - richListItemRow: { flexDirection: "row", columnGap: metrics.gapX(1 / 3), alignItems: "flex-start" }, - richListItemMarker: { ...bodyText, width: metadata.typography.body.fontSize, textAlign: r.listMarkerTextAlign }, - richListItemContent: { flex: 1, ...bodyText }, + div: { + rowGap: metrics.gapY(0.125), + columnGap: metrics.gapX(1 / 3), + }, + inline: { + flexDirection: r.row, + alignItems: "center", + columnGap: metrics.gapX(1 / 3), + }, + link: { + textDecoration: "none", + color: foreground, + }, + small: { + fontSize: metadata.typography.body.fontSize * 0.875, + }, + bold: { + fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600", + }, + richParagraph: { + margin: 0, + ...bodyText, + }, + richListItemRow: { + flexDirection: "row", + columnGap: metrics.gapX(1 / 3), + alignItems: "flex-start", + }, + richListItemMarker: { + ...bodyText, + width: metadata.typography.body.fontSize, + textAlign: r.listMarkerTextAlign, + }, + richListItemContent: { + ...bodyText, + flex: 1, + lineHeight: metadata.typography.body.lineHeight * 0.5, + }, splitRow: { flexDirection: r.row, flexWrap: "wrap", @@ -166,12 +195,25 @@ const useOnyxTemplate = (): OnyxTemplate => { justifyContent: "space-between", columnGap: metrics.gapX(2 / 3), }, - alignEnd: { ...r.alignEnd }, - section: { flexDirection: "column", rowGap: metrics.gapY(0.25) }, - item: { rowGap: metrics.gapY(0.125) }, - levelContainer: { width: "100%" }, - levelItem: { borderColor: primary }, - levelItemActive: { backgroundColor: primary }, + alignEnd: { + ...r.alignEnd, + }, + section: { + flexDirection: "column", + rowGap: metrics.gapY(0.25), + }, + item: { + rowGap: metrics.gapY(0.125), + }, + levelContainer: { + width: "100%", + }, + levelItem: { + borderColor: primary, + }, + levelItemActive: { + backgroundColor: primary, + }, header: { flexDirection: r.row, alignItems: "center", @@ -192,16 +234,28 @@ const useOnyxTemplate = (): OnyxTemplate => { shadowWidth: picture.shadowWidth, transform: `rotate(${picture.rotation}deg)`, }, - headerTitle: { rowGap: metrics.gapY(0.5) }, - headerIdentity: { ...r.headerIdentity, rowGap: metrics.gapY(0.35) }, - headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: headerNameLineHeight }, + headerTitle: { + rowGap: metrics.gapY(0.5), + }, + headerIdentity: { + ...r.headerIdentity, + rowGap: metrics.gapY(0.35), + }, + headerName: { + fontSize: metadata.typography.heading.fontSize * 1.5, + lineHeight: headerNameLineHeight, + }, contactList: { flexDirection: r.row, flexWrap: "wrap", rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(0.75), }, - contactItem: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 6) }, + contactItem: { + flexDirection: r.row, + alignItems: "center", + columnGap: metrics.gapX(1 / 6), + }, sectionGroup: {}, }); diff --git a/packages/pdf/src/templates/pikachu/PikachuPage.tsx b/packages/pdf/src/templates/pikachu/PikachuPage.tsx index ac1811aed..bb40de482 100644 --- a/packages/pdf/src/templates/pikachu/PikachuPage.tsx +++ b/packages/pdf/src/templates/pikachu/PikachuPage.tsx @@ -187,15 +187,44 @@ const usePikachuTemplate = (): PikachuTemplate => { color: foreground, ...r.text, }, - div: { rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(1 / 3) }, - inline: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 3) }, - link: { textDecoration: "none", color: foreground }, - small: { fontSize: metadata.typography.body.fontSize * 0.875 }, - bold: { fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600" }, - richParagraph: { margin: 0, ...bodyText }, - richListItemRow: { flexDirection: "row", columnGap: metrics.gapX(1 / 3), alignItems: "flex-start" }, - richListItemMarker: { ...bodyText, width: metadata.typography.body.fontSize, textAlign: r.listMarkerTextAlign }, - richListItemContent: { flex: 1, ...bodyText }, + div: { + rowGap: metrics.gapY(0.125), + columnGap: metrics.gapX(1 / 3), + }, + inline: { + flexDirection: r.row, + alignItems: "center", + columnGap: metrics.gapX(1 / 3), + }, + link: { + textDecoration: "none", + color: foreground, + }, + small: { + fontSize: metadata.typography.body.fontSize * 0.875, + }, + bold: { + fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600", + }, + richParagraph: { + margin: 0, + ...bodyText, + }, + richListItemRow: { + flexDirection: "row", + columnGap: metrics.gapX(1 / 3), + alignItems: "flex-start", + }, + richListItemMarker: { + ...bodyText, + width: metadata.typography.body.fontSize, + textAlign: r.listMarkerTextAlign, + }, + richListItemContent: { + ...bodyText, + flex: 1, + lineHeight: metadata.typography.body.lineHeight * 0.5, + }, splitRow: { flexDirection: r.row, flexWrap: "wrap", @@ -203,13 +232,29 @@ const usePikachuTemplate = (): PikachuTemplate => { justifyContent: "space-between", columnGap: metrics.gapX(2 / 3), }, - alignEnd: { ...r.alignEnd }, - section: { flexDirection: "column", rowGap: metrics.gapY(0.25) }, - sectionHeading: { borderBottomWidth: 1, borderBottomColor: primary }, - item: { rowGap: metrics.gapY(0.125) }, - levelContainer: { width: "100%" }, - levelItem: { borderColor: primary }, - levelItemActive: { backgroundColor: primary }, + alignEnd: { + ...r.alignEnd, + }, + section: { + flexDirection: "column", + rowGap: metrics.gapY(0.25), + }, + sectionHeading: { + borderBottomWidth: 1, + borderBottomColor: primary, + }, + item: { + rowGap: metrics.gapY(0.125), + }, + levelContainer: { + width: "100%", + }, + levelItem: { + borderColor: primary, + }, + levelItemActive: { + backgroundColor: primary, + }, layout: { flexDirection: r.row, columnGap: metrics.columnGap, @@ -217,7 +262,9 @@ const usePikachuTemplate = (): PikachuTemplate => { sidebarColumn: { flexShrink: 0, }, - sidebarContent: { overflow: "hidden" }, + sidebarContent: { + overflow: "hidden", + }, mainColumn: { flex: 1, }, @@ -250,7 +297,9 @@ const usePikachuTemplate = (): PikachuTemplate => { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: headerNameLineHeight, }, - headerText: { color: background }, + headerText: { + color: background, + }, contactList: { flexDirection: r.row, flexWrap: "wrap", diff --git a/packages/pdf/src/templates/rhyhorn/RhyhornPage.tsx b/packages/pdf/src/templates/rhyhorn/RhyhornPage.tsx index 128df5d6b..bf68bdee9 100644 --- a/packages/pdf/src/templates/rhyhorn/RhyhornPage.tsx +++ b/packages/pdf/src/templates/rhyhorn/RhyhornPage.tsx @@ -73,7 +73,10 @@ export const RhyhornPage = ({ page, pageIndex }: TemplatePageProps) => { const Header = ({ styles }: { styles: RhyhornStyles }) => { const { basics, picture } = useRender(); const hasPicture = hasTemplatePicture(picture); - const contactItems: { id: string; content: ReactNode }[] = []; + const contactItems: { + id: string; + content: ReactNode; + }[] = []; if (basics.email) { contactItems.push({ @@ -195,12 +198,29 @@ const useRhyhornTemplate = (): RhyhornTemplate => { color: foreground, ...r.text, }, - div: { rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(1 / 3) }, - inline: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 3) }, - link: { textDecoration: "none", color: foreground }, - small: { fontSize: metadata.typography.body.fontSize * 0.875 }, - bold: { fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600" }, - richParagraph: { margin: 0, ...bodyText }, + div: { + rowGap: metrics.gapY(0.125), + columnGap: metrics.gapX(1 / 3), + }, + inline: { + flexDirection: r.row, + alignItems: "center", + columnGap: metrics.gapX(1 / 3), + }, + link: { + textDecoration: "none", + color: foreground, + }, + small: { + fontSize: metadata.typography.body.fontSize * 0.875, + }, + bold: { + fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "600", + }, + richParagraph: { + margin: 0, + ...bodyText, + }, richListItemRow: { // Stays `row` for both LTR and RTL; the
  • renderer swaps DOM order for RTL. flexDirection: "row", @@ -213,7 +233,11 @@ const useRhyhornTemplate = (): RhyhornTemplate => { width: metadata.typography.body.fontSize, textAlign: r.listMarkerTextAlign, }, - richListItemContent: { flex: 1, ...bodyText }, + richListItemContent: { + ...bodyText, + flex: 1, + lineHeight: metadata.typography.body.lineHeight * 0.5, + }, splitRow: { flexDirection: r.row, flexWrap: "wrap", @@ -221,26 +245,53 @@ const useRhyhornTemplate = (): RhyhornTemplate => { justifyContent: "space-between", columnGap: metrics.gapX(2 / 3), }, - alignEnd: { ...r.alignEnd }, - section: { flexDirection: "column", rowGap: metrics.gapY(0.25) }, + alignEnd: { + ...r.alignEnd, + }, + section: { + flexDirection: "column", + rowGap: metrics.gapY(0.25), + }, sectionHeading: { color: primary, borderBottomWidth: 1, borderBottomColor: primary, textAlign: r.sectionHeadingTextAlign, }, - item: { rowGap: metrics.gapY(0.125) }, - levelContainer: { width: "100%" }, - levelItem: { borderColor: primary }, - levelItemActive: { backgroundColor: primary }, - header: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(0.5) }, - headerTitle: { flex: 1, rowGap: metrics.gapY(0.5) }, + item: { + rowGap: metrics.gapY(0.125), + }, + levelContainer: { + width: "100%", + }, + levelItem: { + borderColor: primary, + }, + levelItemActive: { + backgroundColor: primary, + }, + header: { + flexDirection: r.row, + alignItems: "center", + columnGap: metrics.gapX(0.5), + }, + headerTitle: { + flex: 1, + rowGap: metrics.gapY(0.5), + }, headerIdentity: { ...r.headerIdentity, rowGap: metrics.gapY(0.35), }, - headerName: { fontSize: metadata.typography.heading.fontSize * 1.5, lineHeight: headerNameLineHeight }, - contactList: { flexDirection: r.row, flexWrap: "wrap", rowGap: metrics.gapY(0.125) }, + headerName: { + fontSize: metadata.typography.heading.fontSize * 1.5, + lineHeight: headerNameLineHeight, + }, + contactList: { + flexDirection: r.row, + flexWrap: "wrap", + rowGap: metrics.gapY(0.125), + }, contactItem: { flexDirection: r.row, alignItems: "center", diff --git a/packages/pdf/src/templates/scizor/ScizorPage.tsx b/packages/pdf/src/templates/scizor/ScizorPage.tsx index 8e940f489..2d1a06a7e 100644 --- a/packages/pdf/src/templates/scizor/ScizorPage.tsx +++ b/packages/pdf/src/templates/scizor/ScizorPage.tsx @@ -146,15 +146,45 @@ const useScizorTemplate = (): ScizorTemplate => { color: foreground, ...r.text, }, - div: { rowGap: metrics.gapY(0.125), columnGap: metrics.gapX(1 / 3) }, - inline: { flexDirection: r.row, alignItems: "center", columnGap: metrics.gapX(1 / 3) }, - link: { textDecoration: "none", color: foreground }, - small: { fontSize: metadata.typography.body.fontSize * 0.875 }, - bold: { fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "700", color: foreground }, - richParagraph: { margin: 0, ...bodyText }, - richListItemRow: { flexDirection: "row", columnGap: metrics.gapX(1 / 3), alignItems: "flex-start" }, - richListItemMarker: { ...bodyText, width: metadata.typography.body.fontSize, textAlign: r.listMarkerTextAlign }, - richListItemContent: { flex: 1, ...bodyText }, + div: { + rowGap: metrics.gapY(0.125), + columnGap: metrics.gapX(1 / 3), + }, + inline: { + flexDirection: r.row, + alignItems: "center", + columnGap: metrics.gapX(1 / 3), + }, + link: { + textDecoration: "none", + color: foreground, + }, + small: { + fontSize: metadata.typography.body.fontSize * 0.875, + }, + bold: { + fontWeight: metadata.typography.body.fontWeights.at(-1) ?? "700", + color: foreground, + }, + richParagraph: { + margin: 0, + ...bodyText, + }, + richListItemRow: { + flexDirection: "row", + columnGap: metrics.gapX(1 / 3), + alignItems: "flex-start", + }, + richListItemMarker: { + ...bodyText, + width: metadata.typography.body.fontSize, + textAlign: r.listMarkerTextAlign, + }, + richListItemContent: { + ...bodyText, + flex: 1, + lineHeight: metadata.typography.body.lineHeight * 0.5, + }, splitRow: { flexDirection: r.row, flexWrap: "wrap", @@ -162,7 +192,9 @@ const useScizorTemplate = (): ScizorTemplate => { justifyContent: "space-between", columnGap: metrics.gapX(2 / 3), }, - alignEnd: { ...r.alignEnd }, + alignEnd: { + ...r.alignEnd, + }, section: { flexDirection: "column", rowGap: metrics.gapY(0.25), @@ -176,18 +208,32 @@ const useScizorTemplate = (): ScizorTemplate => { fontWeight: metadata.typography.heading.fontWeights.at(-1) ?? "700", textTransform: "uppercase", }, - sectionItems: { rowGap: metrics.itemGapY }, - item: { rowGap: metrics.gapY(0.125) }, - levelContainer: { width: "100%" }, - levelItem: { borderColor: primary }, - levelItemActive: { backgroundColor: primary }, + sectionItems: { + rowGap: metrics.itemGapY, + }, + item: { + rowGap: metrics.gapY(0.125), + }, + levelContainer: { + width: "100%", + }, + levelItem: { + borderColor: primary, + }, + levelItemActive: { + backgroundColor: primary, + }, header: { flexDirection: r.row, alignItems: "flex-start", columnGap: metrics.gapX(1), paddingBottom: metrics.gapY(0.35), }, - headerIdentity: { flex: 1, ...r.headerIdentity, rowGap: metrics.gapY(0.45) }, + headerIdentity: { + flex: 1, + ...r.headerIdentity, + rowGap: metrics.gapY(0.45), + }, headerName: { color: foreground, fontSize: metadata.typography.heading.fontSize * 1.85, @@ -198,7 +244,9 @@ const useScizorTemplate = (): ScizorTemplate => { borderBottomWidth: 2, borderBottomColor: divider, }, - headerHeadline: { color: foreground }, + headerHeadline: { + color: foreground, + }, headerContactRow: { flexDirection: r.row, flexWrap: "wrap", @@ -223,7 +271,9 @@ const useScizorTemplate = (): ScizorTemplate => { shadowWidth: picture.shadowWidth, transform: `rotate(${picture.rotation}deg)`, }, - sections: { flexDirection: "column" }, + sections: { + flexDirection: "column", + }, }); const accentFor = ({ colors }: TemplateStyleContext) => colors.primary;