fix: reduce default list item row gap

This commit is contained in:
Amruth Pillai
2026-05-26 00:13:38 +02:00
parent 7557ab13ab
commit 17cddbad65
15 changed files with 688 additions and 183 deletions
@@ -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;