jb/paseo
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(app): align interface typography to base size

Browse Source 
Treat the appearance setting as the rendered base size so the type ramp scales predictably. Native starts one pixel larger while web and desktop preserve the authored 14px base, with legacy values migrated on load.
This commit is contained in:
Mohamed Boudra
2026-08-17 22:55:46 +02:00
parent df3e646fbe
commit 5ec26f0c09
171 changed files with 709 additions and 645 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/desktop/browser/pane/index.electron.tsx
+8 -8
View File
@@ -1738,7 +1738,7 @@ const styles = StyleSheet.create((theme) => ({
urlInput: {
flex: 1,
minWidth: 0,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
paddingVertical: 0,
paddingHorizontal: 0,
},
@@ -1750,7 +1750,7 @@ const styles = StyleSheet.create((theme) => ({
backgroundColor: theme.colors.surface0,
},
metaError: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
webviewWrap: {
flex: 1,
@@ -1771,7 +1771,7 @@ const styles = StyleSheet.create((theme) => ({
gap: theme.spacing[1],
},
toolbarTooltipText: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
color: theme.colors.popoverForeground,
},
annotationOverlay: {
@@ -1803,7 +1803,7 @@ const styles = StyleSheet.create((theme) => ({
},
annotationTitle: {
flex: 1,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: "600",
color: theme.colors.foreground,
},
@@ -1815,13 +1815,13 @@ const styles = StyleSheet.create((theme) => ({
borderRadius: theme.borderRadius.md,
},
annotationElement: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
color: theme.colors.foregroundMuted,
marginBottom: theme.spacing[2],
},
annotationInput: {
minHeight: 64,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.foreground,
borderRadius: theme.borderRadius.md,
borderWidth: 1,
@@ -1844,10 +1844,10 @@ const styles = StyleSheet.create((theme) => ({
gap: 8,
},
unavailableTitle: {
fontSize: 16,
fontSize: theme.fontSize.base,
fontWeight: "600",
},
unavailableSubtitle: {
fontSize: 12,
fontSize: theme.fontSize.sm,
},
}));
packages/app/src/desktop/browser/pane/index.tsx
+3 -3
View File
@@ -32,7 +32,7 @@ export function BrowserPane({ browserId }: BrowserPaneProps) {
);
}
const styles = StyleSheet.create(() => ({
const styles = StyleSheet.create((theme) => ({
container: {
flex: 1,
alignItems: "center",
@@ -41,10 +41,10 @@ const styles = StyleSheet.create(() => ({
padding: 16,
},
title: {
fontSize: 16,
fontSize: theme.fontSize.base,
fontWeight: "600",
},
subtitle: {
fontSize: 12,
fontSize: theme.fontSize.sm,
},
}));
packages/app/src/desktop/browser/pane/index.web.tsx
+3 -3
View File
@@ -33,7 +33,7 @@ export function BrowserPane({ browserId }: BrowserPaneProps) {
);
}
const styles = StyleSheet.create(() => ({
const styles = StyleSheet.create((theme) => ({
container: {
flex: 1,
alignItems: "center",
@@ -42,10 +42,10 @@ const styles = StyleSheet.create(() => ({
padding: 16,
},
title: {
fontSize: 16,
fontSize: theme.fontSize.base,
fontWeight: "600",
},
subtitle: {
fontSize: 12,
fontSize: theme.fontSize.sm,
},
}));
packages/app/src/desktop/components/desktop-permission-row.tsx
+2 -2
View File
@@ -89,12 +89,12 @@ const styles = StyleSheet.create((theme) => ({
justifyContent: "center",
},
permissionStatusText: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
color: theme.colors.foregroundMuted,
},
permissionDetailText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
maxWidth: 220,
textAlign: "right",
},
packages/app/src/desktop/components/desktop-updates-section.tsx
+4 -4
View File
@@ -489,11 +489,11 @@ const styles = StyleSheet.create((theme) => ({
},
valueText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
valueSubtext: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
warningCard: {
marginTop: theme.spacing[3],
@@ -506,7 +506,7 @@ const styles = StyleSheet.create((theme) => ({
},
warningText: {
color: theme.colors.palette.amber[500],
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
modalBody: {
gap: theme.spacing[3],
@@ -514,7 +514,7 @@ const styles = StyleSheet.create((theme) => ({
},
logOutput: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
lineHeight: 18,
},
packages/app/src/desktop/components/integrations-section.tsx
+1 -1
View File
@@ -322,7 +322,7 @@ const styles = StyleSheet.create((theme) => ({
},
mutedText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
actionsRow: {
flexDirection: "row",
packages/app/src/desktop/components/pair-device-section.tsx
+8 -8
View File
@@ -280,7 +280,7 @@ function PairingQr({ svg, isError }: { svg: string | null; isError: boolean }) {
const styles = StyleSheet.create((theme) => ({
stateLine: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
textAlign: "center",
paddingVertical: theme.spacing[6],
},
@@ -309,8 +309,8 @@ const styles = StyleSheet.create((theme) => ({
},
consentDescription: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
lineHeight: theme.fontSize.sm * 1.5,
fontSize: theme.fontSize.base,
lineHeight: theme.fontSize.base * 1.5,
},
actions: {
flexDirection: "row",
@@ -331,15 +331,15 @@ const styles = StyleSheet.create((theme) => ({
directHint: {
flex: 1,
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
lineHeight: theme.fontSize.xs * 1.5,
fontSize: theme.fontSize.sm,
lineHeight: theme.fontSize.sm * 1.5,
},
offer: {
gap: theme.spacing[4],
},
offerHint: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
textAlign: "center",
},
qrTile: {
@@ -375,13 +375,13 @@ const styles = StyleSheet.create((theme) => ({
linkInput: {
color: theme.colors.foregroundMuted,
fontFamily: theme.fontFamily.mono,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
paddingVertical: theme.spacing[2],
paddingHorizontal: theme.spacing[3],
outlineStyle: "none",
} as object,
hint: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
}));