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
docs/design.md
+5 -3
View File
@@ -28,11 +28,13 @@ Before adding a new component, read `components/ui/`. The primitive usually exis
## 3. Hierarchy
Hierarchy is conveyed through weight and color, not size. Most interface text is `fontSize.sm`; compact metadata and hints use `fontSize.xs`. The distinction between a row's primary line and its secondary line is `foreground` versus `foregroundMuted`.
Hierarchy is conveyed through weight and color, not size. Most interface text is `fontSize.base`; compact metadata and hints use `fontSize.sm`. The distinction between a row's primary line and its secondary line is `foreground` versus `foregroundMuted`.
The authored ramp uses a 14px base. New native installs default to 15px; web and desktop default to 14px. The Appearance **Base size** setting is the rendered `fontSize.base` value and scales the rest of the UI ramp proportionally. Code size remains independent.
Weight has three tiers, applied by role:
- **Screen titles** — the title at the top of a screen — use `<ScreenTitle>` (`packages/app/src/components/headers/screen-title.tsx`), which renders `fontSize.base` at weight `400` on compact and `300` on desktop. Top-of-screen titles are lighter on desktop, not heavier. The workspace header overrides the size to `fontSize.sm` so its title, project name, tabs, pane chrome, conversation text, and composer share the desktop working-surface scale (`packages/app/src/screens/workspace/workspace-screen.tsx`).
- **Screen titles** — the title in app chrome — use `<ScreenTitle>` (`packages/app/src/components/headers/screen-title.tsx`), which renders `fontSize.base` at weight `400` on compact and `300` on desktop. The New workspace hero is the only larger product title; it uses `fontSize["2xl"]` (`packages/app/src/screens/new-workspace-screen.tsx`).
- **Structural labels** use `fontWeight.medium`. This applies to section labels above a stack of rows (`packages/app/src/components/agent-list.tsx:519-523`, `packages/app/src/components/keyboard-shortcuts-dialog.tsx:63-67`), form field labels above an input inside a modal (`packages/app/src/components/add-host-modal.tsx:19-23`, `packages/app/src/components/pair-link-modal.tsx:24-28`), the title at the top of a modal/sheet/dialog (`packages/app/src/components/adaptive-modal-sheet.tsx:90-94`, `packages/app/src/components/ui/combobox.tsx:1607-1611`, `packages/app/src/components/welcome-screen.tsx:48-53`), action button labels in tight components such as the sidebar callout actions (`packages/app/src/components/sidebar-callout.tsx:218-221`), and inline data emphasis on dense metadata rows (`packages/app/src/components/git-diff-pane.tsx:2322-2327`, `packages/app/src/components/file-explorer-pane.tsx:1115-1122`).
- **Content** uses `fontWeight.normal`. This applies to settings rows (`packages/app/src/styles/settings.ts`), sidebar primary list-item titles (`packages/app/src/components/sidebar-workspace-list.tsx:2680-2686`, `packages/app/src/components/agent-list.tsx:572-578`), `<Button>` text (`packages/app/src/components/ui/button.tsx:80-84`), `<StatusBadge>` text (`packages/app/src/components/ui/status-badge.tsx:56-60`), and `<SidebarCallout>` titles (`packages/app/src/components/sidebar-callout.tsx:175-180`).
@@ -64,7 +66,7 @@ The button is `<Button>` (`packages/app/src/components/ui/button.tsx`). It has f
Sizes: `xs` for ultra-tight inline triggers. `sm` for any button sitting in a row. `md` is the page default. `lg` is reserved for large standalone CTAs.
Sizes are a shared contract across control kinds, defined once in `control-geometry.ts`: `xs` = 28px tall with `fontSize.xs` labels, `sm` = 32px with `fontSize.sm`, `md`/`lg` = 44px with `fontSize.sm`. `<SegmentedControl>` (`packages/app/src/components/ui/segmented-control.tsx`) takes the same `xs`/`sm`/`md` sizes — a segmented control next to a `<Button>` of the same size always matches in height, label size, and corner radius. Its segments run one padding step tighter than a button, because the gap between segments already reads as padding. The selected segment is a `surface3` fill with `foreground` text, not an inverted one — inverting it inside thin chrome puts a white slab in the toolbar. Thin chrome such as the file toolbar uses `xs`; settings rows use `sm`. Never shrink a control's font or padding locally to fit a context — if the context needs a smaller control, the size tier is missing or the wrong one is in use.
Sizes are a shared contract across control kinds, defined once in `control-geometry.ts`: `xs` = 28px tall with `fontSize.sm` labels, `sm` = 32px with `fontSize.base`, `md`/`lg` = 44px with `fontSize.base`. `<SegmentedControl>` (`packages/app/src/components/ui/segmented-control.tsx`) takes the same `xs`/`sm`/`md` sizes — a segmented control next to a `<Button>` of the same size always matches in height, label size, and corner radius. Its segments run one padding step tighter than a button, because the gap between segments already reads as padding. The selected segment is a `surface3` fill with `foreground` text, not an inverted one — inverting it inside thin chrome puts a white slab in the toolbar. Thin chrome such as the file toolbar uses `xs`; settings rows use `sm`. Never shrink a control's font or padding locally to fit a context — if the context needs a smaller control, the size tier is missing or the wrong one is in use.
A `<Pressable>` wrapping a `<Text>` is a sixth variant. It is wrong. `<Button>` accepts `style`, `textStyle`, `leftIcon`, `disabled`, `size`, and `variant`.
packages/app/src/agent-profiles/settings/agent-profile-edit-modal.tsx
+3 -3
View File
@@ -523,11 +523,11 @@ const styles = StyleSheet.create((theme) => ({
},
featureLabel: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
featureDescription: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
notesInput: {
minHeight: 88,
@@ -535,7 +535,7 @@ const styles = StyleSheet.create((theme) => ({
},
submitError: {
color: theme.colors.statusDanger,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
actions: {
flexDirection: "row",
packages/app/src/agent-profiles/settings/agent-profile-row.tsx
+2 -2
View File
@@ -168,7 +168,7 @@ const styles = StyleSheet.create((theme) => ({
summary: {
flexShrink: 1,
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
notes: {
flexDirection: "row",
@@ -179,7 +179,7 @@ const styles = StyleSheet.create((theme) => ({
notesText: {
flex: 1,
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
rowActions: {
flexDirection: "row",
packages/app/src/agent-profiles/settings/agent-profiles-section.tsx
+1 -1
View File
@@ -213,7 +213,7 @@ const styles = StyleSheet.create((theme) => ({
},
emptyText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
textAlign: "center",
},
}));
packages/app/src/agent-stream/chat-outline/rail.web.tsx
+1 -1
View File
@@ -249,7 +249,7 @@ const styles = StyleSheet.create((theme) => ({
...theme.shadow.md,
},
previewText: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
color: theme.colors.foreground,
},
}));
packages/app/src/app/_layout.tsx
+2 -2
View File
@@ -684,7 +684,7 @@ function ProvidersWrapper({ children }: { children: ReactNode }) {
applyAppearance({
uiFontFamily: settings.uiFontFamily,
monoFontFamily: settings.monoFontFamily,
uiFontSize: settings.uiFontSize,
uiBaseFontSize: settings.uiBaseFontSize,
codeFontSize: settings.codeFontSize,
syntaxTheme: settings.syntaxTheme,
});
@@ -692,7 +692,7 @@ function ProvidersWrapper({ children }: { children: ReactNode }) {
settingsLoading,
settings.uiFontFamily,
settings.monoFontFamily,
settings.uiFontSize,
settings.uiBaseFontSize,
settings.codeFontSize,
settings.syntaxTheme,
]);
packages/app/src/app/pair-scan.tsx
+1 -1
View File
@@ -90,7 +90,7 @@ const styles = StyleSheet.create((theme) => ({
},
permissionTitle: {
color: theme.colors.foreground,
fontSize: theme.fontSize.lg,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.semibold,
},
permissionBody: {
packages/app/src/assistant-file-links/link.tsx
+1 -1
View File
@@ -238,7 +238,7 @@ function preventAnchorNavigation(event: MouseEvent<HTMLAnchorElement>): void {
const styles = StyleSheet.create((theme) => ({
tooltipPath: {
color: theme.colors.foreground,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.normal,
},
}));
packages/app/src/command-center/command-center.tsx
+8 -8
View File
@@ -867,14 +867,14 @@ const styles = StyleSheet.create((theme) => ({
},
scopeChipLabel: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: "500",
},
results: { flex: 1 },
sectionLabel: {
paddingHorizontal: theme.spacing[4],
paddingBottom: theme.spacing[2],
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
color: theme.colors.foregroundMuted,
},
sectionDivider: {
@@ -902,14 +902,14 @@ const styles = StyleSheet.create((theme) => ({
textContent: { flex: 1, minWidth: 0 },
title: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
lineHeight: 18,
flexShrink: 1,
},
fileLine: { flex: 1, minWidth: 0, fontSize: theme.fontSize.sm, lineHeight: 20 },
fileLine: { flex: 1, minWidth: 0, fontSize: theme.fontSize.base, lineHeight: 20 },
fileName: { color: theme.colors.foreground },
filePath: { color: theme.colors.foregroundMuted },
subtitle: { color: theme.colors.foregroundMuted, fontSize: theme.fontSize.xs, lineHeight: 16 },
subtitle: { color: theme.colors.foregroundMuted, fontSize: theme.fontSize.sm, lineHeight: 16 },
iconSlot: { width: 16, height: 20, alignItems: "center", justifyContent: "center" },
rowShortcut: { flexShrink: 0 },
breadcrumb: {
@@ -927,7 +927,7 @@ const styles = StyleSheet.create((theme) => ({
},
breadcrumbGroup: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
lineHeight: 20,
flexShrink: 0,
},
@@ -936,7 +936,7 @@ const styles = StyleSheet.create((theme) => ({
paddingVertical: theme.spacing[6],
textAlign: "center",
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
errorText: {
paddingHorizontal: theme.spacing[4],
@@ -944,7 +944,7 @@ const styles = StyleSheet.create((theme) => ({
borderBottomWidth: 1,
borderBottomColor: theme.colors.border,
color: theme.colors.statusDanger,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
sheetBackground: { backgroundColor: theme.colors.surface0 },
sheetHandle: { backgroundColor: theme.colors.palette.zinc[600] },
packages/app/src/components/adaptive-modal-sheet.tsx
+3 -3
View File
@@ -112,7 +112,7 @@ const styles = StyleSheet.create((theme) => ({
minWidth: 0,
},
title: {
fontSize: theme.fontSize.lg,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.medium,
},
headerActions: {
@@ -157,7 +157,7 @@ const styles = StyleSheet.create((theme) => ({
},
inlineTitle: {
flex: 1,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.medium,
color: theme.colors.foreground,
},
@@ -165,7 +165,7 @@ const styles = StyleSheet.create((theme) => ({
flex: 1,
paddingVertical: theme.spacing[2],
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
desktopScrollContainer: {
flexShrink: 1,
packages/app/src/components/add-host-method-modal.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ const styles = StyleSheet.create((theme) => ({
},
optionSubtext: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
marginTop: theme.spacing[1],
},
optionBody: {
packages/app/src/components/add-host-modal.tsx
+4 -4
View File
@@ -51,7 +51,7 @@ const styles = StyleSheet.create((theme) => ({
},
label: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.medium,
},
input: {
@@ -120,7 +120,7 @@ const styles = StyleSheet.create((theme) => ({
},
advancedText: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.medium,
},
actions: {
@@ -130,11 +130,11 @@ const styles = StyleSheet.create((theme) => ({
},
helper: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
error: {
color: theme.colors.destructive,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
}));
packages/app/src/components/add-project-flow.tsx
+8 -8
View File
@@ -1008,14 +1008,14 @@ const styles = StyleSheet.create((theme) => ({
minWidth: 0,
flexShrink: 1,
color: theme.colors.foreground,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.normal,
},
hostContext: {
minWidth: 0,
flexShrink: 1,
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.normal,
},
input: {
@@ -1043,11 +1043,11 @@ const styles = StyleSheet.create((theme) => ({
disabled: { opacity: theme.opacity[50] },
iconSlot: { width: 18, alignItems: "center" },
rowText: { flex: 1, minWidth: 0 },
rowTitle: { color: theme.colors.foreground, fontSize: theme.fontSize.sm },
rowSubtitle: { color: theme.colors.foregroundMuted, fontSize: theme.fontSize.xs, marginTop: 2 },
rowTitle: { color: theme.colors.foreground, fontSize: theme.fontSize.base },
rowSubtitle: { color: theme.colors.foregroundMuted, fontSize: theme.fontSize.sm, marginTop: 2 },
preview: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
paddingHorizontal: theme.spacing[4],
paddingVertical: theme.spacing[2],
},
@@ -1059,7 +1059,7 @@ const styles = StyleSheet.create((theme) => ({
},
errorText: {
color: theme.colors.destructive,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
paddingHorizontal: theme.spacing[4],
paddingVertical: theme.spacing[3],
},
@@ -1081,10 +1081,10 @@ const styles = StyleSheet.create((theme) => ({
},
footerKeyText: {
color: theme.colors.foreground,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
footerAction: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
}));
packages/app/src/components/agent-list.tsx
+11 -11
View File
@@ -259,8 +259,8 @@ function SessionRow({
);
const archivedIcon = useMemo(
() => <Archive size={theme.fontSize.xs} color={theme.colors.foregroundMuted} />,
[theme.fontSize.xs, theme.colors.foregroundMuted],
() => <Archive size={theme.fontSize.sm} color={theme.colors.foregroundMuted} />,
[theme.fontSize.sm, theme.colors.foregroundMuted],
);
const showDesktopAttention =
!isMobile && showAttentionIndicator && Boolean(agent.requiresAttention);
@@ -617,7 +617,7 @@ const styles = StyleSheet.create((theme) => ({
marginBottom: theme.spacing[2],
},
sectionTitle: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.medium,
color: theme.colors.foregroundMuted,
},
@@ -655,7 +655,7 @@ const styles = StyleSheet.create((theme) => ({
workspaceTitleText: {
flexShrink: 0,
maxWidth: 220,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.foregroundMuted,
},
rowMetaRow: {
@@ -680,7 +680,7 @@ const styles = StyleSheet.create((theme) => ({
sessionTitle: {
flexShrink: 1,
minWidth: 0,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: "400",
color: theme.colors.foreground,
opacity: 0.86,
@@ -690,11 +690,11 @@ const styles = StyleSheet.create((theme) => ({
},
sessionMetaText: {
maxWidth: "100%",
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.foregroundMuted,
},
sessionMetaSeparator: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.foregroundMuted,
opacity: 0.7,
},
@@ -705,20 +705,20 @@ const styles = StyleSheet.create((theme) => ({
gap: theme.spacing[3],
},
columnMeta: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.foregroundMuted,
flexShrink: 0,
width: 132,
},
columnMetaFixed: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.foregroundMuted,
flexShrink: 0,
width: 72,
textAlign: "right" as const,
},
columnMetaHost: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.foregroundMuted,
flexShrink: 0,
width: 120,
@@ -754,7 +754,7 @@ const styles = StyleSheet.create((theme) => ({
opacity: 0.3,
},
sheetTitle: {
fontSize: theme.fontSize.lg,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.semibold,
color: theme.colors.foreground,
textAlign: "center",
packages/app/src/components/app-diagnostic-sheet.tsx
+1 -1
View File
@@ -339,7 +339,7 @@ const styles = StyleSheet.create((theme) => ({
},
mutedText: {
flex: 1,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.foregroundMuted,
},
headerActions: {
packages/app/src/components/appearance-style-boundary.tsx
-1
View File
@@ -15,7 +15,6 @@ const appearanceStyleBoundaryMapping = (theme: Theme): Partial<AppearanceStyleBo
appearanceKey: [
theme.fontFamily.ui,
theme.fontFamily.mono,
theme.fontSize.xs,
theme.fontSize.sm,
theme.fontSize.base,
theme.fontSize.lg,
packages/app/src/components/archived-agent-callout.tsx
+1 -1
View File
@@ -116,7 +116,7 @@ const styles = StyleSheet.create((theme: Theme) => ({
},
errorText: {
color: theme.colors.statusDanger,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
textAlign: "center",
},
})) as unknown as Record<string, object>;
packages/app/src/components/assistant-fork-menu.tsx
+1 -1
View File
@@ -138,6 +138,6 @@ const styles = StyleSheet.create((theme) => ({
},
tooltipText: {
color: theme.colors.foreground,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
}));
packages/app/src/components/attachment-lightbox.tsx
+1 -1
View File
@@ -160,7 +160,7 @@ const styles = StyleSheet.create((theme) => ({
},
errorText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
closeButton: {
width: 32,
packages/app/src/components/attachment-pill.tsx
+2 -2
View File
@@ -174,11 +174,11 @@ const styles = StyleSheet.create((theme) => ({
},
labelTitle: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
labelSubtitle: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
thumbnail: {
width: ATTACHMENT_CONTENT_HEIGHT,
packages/app/src/components/branch-switcher.tsx
+2 -2
View File
@@ -150,13 +150,13 @@ const styles = StyleSheet.create((theme) => ({
backgroundColor: theme.colors.surface1,
},
branchLabel: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
color: theme.colors.foregroundMuted,
fontWeight: theme.fontWeight.normal,
flexShrink: 1,
},
tooltipText: {
color: theme.colors.popoverForeground,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
}));
packages/app/src/components/combined-model-selector.tsx
+2 -2
View File
@@ -298,7 +298,7 @@ const styles = StyleSheet.create((theme) => ({
minWidth: 0,
flexShrink: 1,
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
},
customTriggerWrapper: {
@@ -322,6 +322,6 @@ const styles = StyleSheet.create((theme) => ({
},
sheetLoadingText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
}));
packages/app/src/components/context-window-meter.tsx
+7 -7
View File
@@ -261,12 +261,12 @@ const styles = StyleSheet.create((theme) => ({
},
percentageLabel: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
},
skeletonLabel: {
width: 22,
height: theme.fontSize.sm,
height: theme.fontSize.base,
borderRadius: theme.borderRadius.full,
backgroundColor: theme.colors.surface3,
},
@@ -276,16 +276,16 @@ const styles = StyleSheet.create((theme) => ({
},
tooltipTitle: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
tooltipText: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
lineHeight: theme.fontSize.sm * 1.4,
fontSize: theme.fontSize.base,
lineHeight: theme.fontSize.base * 1.4,
},
tooltipDetail: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
lineHeight: theme.fontSize.xs * 1.4,
fontSize: theme.fontSize.sm,
lineHeight: theme.fontSize.sm * 1.4,
},
}));
packages/app/src/components/dictation-controls.tsx
+4 -4
View File
@@ -288,7 +288,7 @@ const styles = StyleSheet.create((theme) => ({
justifyContent: "center",
},
timerText: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.semibold,
fontVariant: ["tabular-nums"],
},
@@ -326,7 +326,7 @@ const styles = StyleSheet.create((theme) => ({
justifyContent: "center",
},
statusLabel: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.semibold,
},
}));
@@ -367,12 +367,12 @@ const overlayStyles = StyleSheet.create((theme) => ({
gap: theme.spacing[4],
},
timerText: {
fontSize: theme.fontSize.xl,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.semibold,
fontVariant: ["tabular-nums"],
},
transcriptText: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
textAlign: "center",
paddingHorizontal: theme.spacing[2],
packages/app/src/components/diff-stat.tsx
+2 -2
View File
@@ -34,12 +34,12 @@ const styles = StyleSheet.create((theme) => ({
flexShrink: 0,
},
additions: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.normal,
color: theme.colors.statusSuccess,
},
deletions: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.normal,
color: theme.colors.statusDanger,
},
packages/app/src/components/diff-viewer.tsx
+1 -1
View File
@@ -271,7 +271,7 @@ const styles = StyleSheet.create((theme) => {
justifyContent: "center" as const,
},
emptyText: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.foregroundMuted,
},
};
packages/app/src/components/download-toast.tsx
+2 -2
View File
@@ -130,12 +130,12 @@ const styles = StyleSheet.create((theme) => ({
},
fileName: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.semibold,
},
status: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
progressBar: {
height: 3,
packages/app/src/components/explorer-sidebar.tsx
+1 -1
View File
@@ -543,7 +543,7 @@ const styles = StyleSheet.create((theme) => ({
backgroundColor: theme.colors.surfaceSidebarHover,
},
tabText: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
color: theme.colors.foregroundMuted,
},
packages/app/src/components/file-explorer-pane.tsx
+10 -10
View File
@@ -1684,7 +1684,7 @@ const styles = StyleSheet.create((theme) => ({
backgroundColor: theme.colors.surface2,
},
sortTriggerText: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
color: theme.colors.foregroundMuted,
},
headerActions: {
@@ -1714,7 +1714,7 @@ const styles = StyleSheet.create((theme) => ({
},
loadingText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
errorText: {
color: theme.colors.destructive,
@@ -1730,7 +1730,7 @@ const styles = StyleSheet.create((theme) => ({
},
retryButtonText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.semibold,
},
errorActions: {
@@ -1745,7 +1745,7 @@ const styles = StyleSheet.create((theme) => ({
},
binaryMetaText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
entryInfo: {
flex: 1,
@@ -1764,13 +1764,13 @@ const styles = StyleSheet.create((theme) => ({
entryName: {
flex: 1,
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
userSelect: "none",
},
draftInput: {
flex: 1,
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
paddingVertical: 0,
paddingHorizontal: 0,
},
@@ -1788,12 +1788,12 @@ const styles = StyleSheet.create((theme) => ({
paddingHorizontal: theme.spacing[3],
},
contextMetaLabel: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.foregroundMuted,
flexShrink: 0,
},
contextMetaValue: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.foreground,
fontWeight: theme.fontWeight.medium,
flex: 1,
@@ -1803,7 +1803,7 @@ const styles = StyleSheet.create((theme) => ({
previewHeaderText: {
flex: 1,
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
},
iconButton: {
@@ -1870,7 +1870,7 @@ const styles = StyleSheet.create((theme) => ({
borderBottomColor: theme.colors.border,
},
sheetTitle: {
fontSize: theme.fontSize.lg,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.semibold,
color: theme.colors.foreground,
flex: 1,
packages/app/src/components/headers/header-toggle-button.tsx
+1 -1
View File
@@ -85,7 +85,7 @@ const styles = StyleSheet.create((theme) => ({
gap: theme.spacing[2],
},
tooltipText: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.popoverForeground,
},
shortcut: {},
packages/app/src/components/hosts/host-filter.tsx
+1 -1
View File
@@ -115,7 +115,7 @@ const styles = StyleSheet.create((theme) => ({
},
filterTriggerText: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.medium,
},
}));
packages/app/src/components/import-session-sheet.tsx
+5 -5
View File
@@ -583,7 +583,7 @@ const styles = StyleSheet.create((theme) => ({
},
filterTriggerText: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.medium,
},
list: {
@@ -629,16 +629,16 @@ const styles = StyleSheet.create((theme) => ({
},
rowMeta: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
rowPreview: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
lineHeight: 20,
},
rowCwd: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
statusRow: {
flexDirection: "row",
@@ -648,7 +648,7 @@ const styles = StyleSheet.create((theme) => ({
},
statusText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
emptyState: {
alignItems: "center",
packages/app/src/components/keyboard-shortcuts-dialog.tsx
+5 -5
View File
@@ -103,7 +103,7 @@ const styles = StyleSheet.create((theme) => ({
gap: theme.spacing[2],
},
sectionTitle: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.medium,
color: theme.colors.foregroundMuted,
},
@@ -128,12 +128,12 @@ const styles = StyleSheet.create((theme) => ({
minWidth: 0,
},
rowLabel: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.foreground,
},
rowNote: {
marginTop: 2,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
color: theme.colors.foregroundMuted,
},
rowShortcut: {
@@ -143,13 +143,13 @@ const styles = StyleSheet.create((theme) => ({
// same state the same way.
rowUnassigned: {
alignSelf: "flex-start",
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.foregroundMuted,
},
empty: {
paddingVertical: theme.spacing[6],
textAlign: "center",
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.foregroundMuted,
},
}));
packages/app/src/components/left-sidebar.tsx
+4 -4
View File
@@ -1044,7 +1044,7 @@ const styles = StyleSheet.create((theme) => ({
},
workspacesSectionTitle: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.normal,
},
workspacesSectionActions: {
@@ -1118,7 +1118,7 @@ const styles = StyleSheet.create((theme) => ({
minWidth: 0,
flexShrink: 1,
color: theme.colors.accentForeground,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.medium,
},
sidebarFooter: {
@@ -1153,7 +1153,7 @@ const styles = StyleSheet.create((theme) => ({
footerAddProjectLabel: {
minWidth: 0,
flexShrink: 1,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
color: theme.colors.foregroundMuted,
},
@@ -1174,7 +1174,7 @@ const styles = StyleSheet.create((theme) => ({
gap: theme.spacing[2],
},
tooltipText: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.popoverForeground,
},
}));
packages/app/src/components/markdown/renderer.tsx
+1 -1
View File
@@ -756,7 +756,7 @@ const detailsStyles = StyleSheet.create((theme) => ({
flex: 1,
minWidth: 0,
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
lineHeight: 18,
},
packages/app/src/components/message.tsx
+13 -13
View File
@@ -194,7 +194,7 @@ let webToolCallShimmerRegistered = false;
const SCROLL_EDGE_EPSILON = 0.5;
// Font size for stream metadata (timestamps, durations, live elapsed timer).
// Lives between theme.fontSize.xs (12) and theme.fontSize.sm (14); no token.
// Lives between theme.fontSize.sm (12) and theme.fontSize.base (14); no token.
export const STREAM_METADATA_FONT_SIZE = 13;
type ScrollAxis = "x" | "y";
@@ -354,9 +354,9 @@ const userMessageStylesheet = StyleSheet.create((theme) => ({
},
text: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
...(isWeb
? { lineHeight: Math.round(theme.fontSize.sm * 1.4), overflowWrap: "anywhere" as const }
? { lineHeight: Math.round(theme.fontSize.base * 1.4), overflowWrap: "anywhere" as const }
: {}),
},
imagePreviewContainer: {
@@ -787,7 +787,7 @@ export const assistantMessageStylesheet = StyleSheet.create((theme) => ({
},
imageErrorText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
textAlign: "center",
},
}));
@@ -1095,7 +1095,7 @@ const expandableBadgeStylesheet = StyleSheet.create((theme) => ({
},
label: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
flexShrink: 0,
},
@@ -1110,7 +1110,7 @@ const expandableBadgeStylesheet = StyleSheet.create((theme) => ({
flexShrink: 1,
minWidth: 0,
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
marginLeft: theme.spacing[2],
},
@@ -1119,7 +1119,7 @@ const expandableBadgeStylesheet = StyleSheet.create((theme) => ({
},
shimmerText: {
color: "transparent",
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
},
spacer: {
@@ -1952,14 +1952,14 @@ const speakMessageStylesheet = StyleSheet.create((theme) => ({
},
headerLabel: {
fontFamily: theme.fontFamily.ui,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
color: theme.colors.foregroundMuted,
},
text: {
fontFamily: theme.fontFamily.ui,
fontSize: theme.fontSize.sm,
lineHeight: Math.round(theme.fontSize.sm * 1.4),
fontSize: theme.fontSize.base,
lineHeight: Math.round(theme.fontSize.base * 1.4),
color: theme.colors.foreground,
},
}));
@@ -2044,7 +2044,7 @@ const activityLogStylesheet = StyleSheet.create((theme) => ({
flex: 1,
},
messageText: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
lineHeight: 20,
},
detailsRow: {
@@ -2054,7 +2054,7 @@ const activityLogStylesheet = StyleSheet.create((theme) => ({
},
detailsText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
marginRight: theme.spacing[1],
},
metadataContainer: {
@@ -2262,7 +2262,7 @@ const todoListCardStylesheet = StyleSheet.create((theme) => ({
},
emptyText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
}));
packages/app/src/components/model-browser.tsx
+7 -7
View File
@@ -1270,7 +1270,7 @@ const styles = StyleSheet.create((theme) => ({
},
sectionHeadingText: {
flex: 1,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.normal,
color: theme.colors.foregroundMuted,
},
@@ -1314,17 +1314,17 @@ const styles = StyleSheet.create((theme) => ({
gap: theme.spacing[2],
},
browserRowLabel: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.foreground,
flexShrink: 0,
},
browserRowLabelMuted: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.foregroundMuted,
flexShrink: 0,
},
browserRowDescription: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
color: theme.colors.foregroundMuted,
flexShrink: 1,
},
@@ -1345,7 +1345,7 @@ const styles = StyleSheet.create((theme) => ({
gap: theme.spacing[1],
},
drillDownCount: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
color: theme.colors.foregroundMuted,
},
rowStateInline: {
@@ -1377,11 +1377,11 @@ const styles = StyleSheet.create((theme) => ({
gap: theme.spacing[2],
},
emptyStateText: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.foregroundMuted,
},
tooltipText: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
color: theme.colors.foreground,
},
virtualizedModelList: {
packages/app/src/components/pair-link-modal.tsx
+3 -3
View File
@@ -17,14 +17,14 @@ const FLEX_ONE_STYLE = { flex: 1 } as const;
const styles = StyleSheet.create((theme) => ({
helper: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
field: {
gap: theme.spacing[2],
},
label: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.medium,
},
input: {
@@ -38,7 +38,7 @@ const styles = StyleSheet.create((theme) => ({
},
error: {
color: theme.colors.destructive,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
actions: {
flexDirection: "row",
packages/app/src/components/plan-card.tsx
+1 -1
View File
@@ -243,7 +243,7 @@ const styles = StyleSheet.create((theme) => ({
lineHeight: 22,
},
description: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
lineHeight: 20,
},
footer: {
packages/app/src/components/provider-catalog-list.tsx
+6 -6
View File
@@ -202,7 +202,7 @@ const styles = StyleSheet.create((theme) => ({
minWidth: 0,
paddingVertical: theme.spacing[3],
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
list: {
borderRadius: theme.borderRadius.lg,
@@ -240,18 +240,18 @@ const styles = StyleSheet.create((theme) => ({
},
name: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.medium,
flexShrink: 1,
},
version: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
flexShrink: 0,
},
description: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
installLink: {
alignSelf: "flex-start",
@@ -262,7 +262,7 @@ const styles = StyleSheet.create((theme) => ({
},
installLinkText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
actionButton: {
width: 92,
@@ -281,6 +281,6 @@ const styles = StyleSheet.create((theme) => ({
},
stateText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
}));
packages/app/src/components/provider-diagnostic-sheet.tsx
+7 -7
View File
@@ -731,7 +731,7 @@ export function ProviderDiagnosticSheet({
const sheetStyles = StyleSheet.create((theme) => ({
mutedText: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.foregroundMuted,
},
monoHint: {
@@ -742,11 +742,11 @@ const sheetStyles = StyleSheet.create((theme) => ({
},
descriptionInline: {
flex: 1,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
color: theme.colors.foregroundMuted,
},
errorText: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
color: theme.colors.destructive,
},
formInput: {
@@ -757,7 +757,7 @@ const sheetStyles = StyleSheet.create((theme) => ({
color: theme.colors.foreground,
borderWidth: 1,
borderColor: theme.colors.border,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
iconButton: {
width: 28,
@@ -804,7 +804,7 @@ const sheetStyles = StyleSheet.create((theme) => ({
},
modelTitle: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
flexShrink: 0,
},
modelRowFiller: {
@@ -828,7 +828,7 @@ const sheetStyles = StyleSheet.create((theme) => ({
},
footerMeta: {
flex: 1,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
color: theme.colors.foregroundMuted,
},
compactFooterMeta: {
@@ -849,7 +849,7 @@ const sheetStyles = StyleSheet.create((theme) => ({
gap: theme.spacing[3],
},
formLabel: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.medium,
color: theme.colors.foreground,
},
packages/app/src/components/question-form-card.tsx
+4 -4
View File
@@ -651,7 +651,7 @@ const styles = StyleSheet.create((theme) => ({
borderWidth: theme.borderWidth[1],
},
questionNavText: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.medium,
},
optionItem: {
@@ -680,7 +680,7 @@ const styles = StyleSheet.create((theme) => ({
lineHeight: 22,
},
optionDescription: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
lineHeight: 20,
},
selectionControl: {
@@ -707,7 +707,7 @@ const styles = StyleSheet.create((theme) => ({
borderRadius: theme.borderRadius.lg,
paddingHorizontal: theme.spacing[3],
paddingVertical: theme.spacing[3],
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
actionsContainer: {
gap: theme.spacing[2],
@@ -730,6 +730,6 @@ const styles = StyleSheet.create((theme) => ({
gap: theme.spacing[2],
},
actionText: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
}));
packages/app/src/components/quitting-overlay.tsx
+1 -1
View File
@@ -64,6 +64,6 @@ const styles = StyleSheet.create((theme) => ({
},
detail: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
}));
packages/app/src/components/rename-modal.tsx
+1 -1
View File
@@ -185,7 +185,7 @@ const styles = StyleSheet.create((theme) => ({
},
errorText: {
color: theme.colors.palette.red[300],
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
actions: {
flexDirection: "row",
packages/app/src/components/rewind/rewind-menu.tsx
+2 -2
View File
@@ -161,7 +161,7 @@ const styles = StyleSheet.create((theme) => ({
},
tooltipText: {
color: theme.colors.foreground,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
warningHeader: {
paddingHorizontal: theme.spacing[3],
@@ -170,6 +170,6 @@ const styles = StyleSheet.create((theme) => ({
},
warningText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
}));
packages/app/src/components/root-error-boundary.tsx
+3 -3
View File
@@ -128,13 +128,13 @@ const styles = StyleSheet.create((theme) => ({
},
title: {
color: theme.colors.foreground,
fontSize: theme.fontSize.xl,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.medium,
textAlign: "center",
},
body: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
lineHeight: 20,
textAlign: "center",
},
@@ -144,7 +144,7 @@ const styles = StyleSheet.create((theme) => ({
},
detailsLabel: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.medium,
},
detailsSurface: {
packages/app/src/components/schedules/cadence-editor.tsx
+2 -2
View File
@@ -132,11 +132,11 @@ const styles = StyleSheet.create((theme) => ({
fontFamily: theme.fontFamily.mono,
},
preview: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
color: theme.colors.foregroundMuted,
},
error: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
color: theme.colors.palette.red[300],
},
}));
packages/app/src/components/schedules/schedule-form-sheet.tsx
+2 -2
View File
@@ -1056,7 +1056,7 @@ const styles = StyleSheet.create((theme) => {
color: theme.colors.foreground,
},
readonlyTextSm: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
readonlyTextMd: {
fontSize: theme.fontSize.base,
@@ -1077,7 +1077,7 @@ const styles = StyleSheet.create((theme) => {
},
submitError: {
color: theme.colors.palette.red[300],
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
providerIcon: {
color: theme.colors.foregroundMuted,
packages/app/src/components/schedules/schedule-row.tsx
+1 -1
View File
@@ -400,7 +400,7 @@ const styles = StyleSheet.create((theme) => ({
target: {
marginTop: theme.spacing[1],
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
trailing: {
flexDirection: "row",
packages/app/src/components/settings-textarea.tsx
+1 -1
View File
@@ -49,7 +49,7 @@ export function SettingsTextAreaCard(props: SettingsTextAreaProps) {
const styles = StyleSheet.create((theme) => ({
input: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
paddingVertical: theme.spacing[3],
paddingHorizontal: theme.spacing[4],
minHeight: 96,
packages/app/src/components/sidebar-callout.tsx
+3 -3
View File
@@ -183,12 +183,12 @@ const styles = StyleSheet.create((theme) => ({
title: {
flexShrink: 1,
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
},
description: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
descriptionSlot: {
flexShrink: 1,
@@ -224,7 +224,7 @@ const styles = StyleSheet.create((theme) => ({
opacity: 0.5,
},
actionLabel: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.medium,
},
actionLabelPrimary: {
packages/app/src/components/sidebar-workspace-list.tsx
+11 -11
View File
@@ -407,7 +407,7 @@ const prBadgeStyles = StyleSheet.create((theme) => ({
opacity: 0.82,
},
text: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.normal,
lineHeight: 14,
color: theme.colors.foregroundMuted,
@@ -2548,12 +2548,12 @@ const styles = StyleSheet.create((theme) => ({
},
newWorkspaceGhostText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
minWidth: 0,
flexShrink: 1,
},
newWorkspaceGhostTextHovered: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
minWidth: 0,
flexShrink: 1,
color: theme.colors.foreground,
@@ -2571,13 +2571,13 @@ const styles = StyleSheet.create((theme) => ({
},
emptyTitle: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.medium,
textAlign: "center",
},
emptyText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
textAlign: "center",
},
projectRow: {
@@ -2623,7 +2623,7 @@ const styles = StyleSheet.create((theme) => ({
},
projectTitle: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: "400",
minWidth: 0,
flexShrink: 1,
@@ -2642,7 +2642,7 @@ const styles = StyleSheet.create((theme) => ({
},
projectActionButtonText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
projectIconActionButton: {
width: 24,
@@ -2695,7 +2695,7 @@ const styles = StyleSheet.create((theme) => ({
},
projectActionTooltipText: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
projectActionTooltipShortcut: {},
projectShortcutBadgeOverlay: {
@@ -2777,12 +2777,12 @@ const styles = StyleSheet.create((theme) => ({
},
workspaceArchivingText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: "600",
},
workspaceBranchText: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: "400",
lineHeight: 20,
opacity: 0.76,
@@ -2803,7 +2803,7 @@ const styles = StyleSheet.create((theme) => ({
},
workspaceCreatingText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
flexShrink: 0,
},
kebabButton: {
packages/app/src/components/sidebar/pinned-section-header.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ const styles = StyleSheet.create((theme) => ({
},
title: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.normal,
},
}));
packages/app/src/components/sidebar/sidebar-group-toggle-row.tsx
+2 -2
View File
@@ -114,13 +114,13 @@ const styles = StyleSheet.create((theme) => ({
},
text: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
minWidth: 0,
flexShrink: 1,
},
textHovered: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
minWidth: 0,
flexShrink: 1,
},
packages/app/src/components/sidebar/sidebar-header-row.tsx
+1 -1
View File
@@ -149,7 +149,7 @@ const styles = StyleSheet.create((theme) => ({
backgroundColor: theme.colors.surfaceSidebarHover,
},
label: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
color: theme.colors.foregroundMuted,
},
packages/app/src/components/sidebar/sidebar-help-menu.tsx
+1 -1
View File
@@ -194,7 +194,7 @@ const styles = StyleSheet.create((theme) => ({
paddingHorizontal: theme.spacing[1],
},
tooltipText: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.popoverForeground,
},
versionList: {
packages/app/src/components/sidebar/sidebar-status-list.tsx
+1 -1
View File
@@ -1095,7 +1095,7 @@ const styles = StyleSheet.create((theme) => ({
},
statusGroupTitle: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: "400",
minWidth: 0,
flexShrink: 1,
packages/app/src/components/sidebar/sidebar-workspace-row-content.tsx
+2 -2
View File
@@ -301,7 +301,7 @@ export const sidebarWorkspaceRowStyles = StyleSheet.create((theme) => ({
},
shortcutBadgeText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.medium,
lineHeight: 14,
},
@@ -500,7 +500,7 @@ const styles = StyleSheet.create((theme) => ({
// to the meta row, so it takes the full width the trailing slot leaves behind.
workspaceBranchText: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: "400",
lineHeight: 20,
opacity: 0.76,
packages/app/src/components/sidebar/sidebar-workspace-row.tsx
+1 -1
View File
@@ -539,7 +539,7 @@ const styles = StyleSheet.create((theme) => ({
},
workspaceCreatingText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
flexShrink: 0,
},
}));
packages/app/src/components/sidebar/workspace-meta-row/index.tsx
+9 -9
View File
@@ -310,7 +310,7 @@ const styles = StyleSheet.create((theme) => ({
},
identityText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
lineHeight: 16,
flexShrink: 1,
},
@@ -319,7 +319,7 @@ const styles = StyleSheet.create((theme) => ({
},
separator: {
color: theme.colors.foregroundExtraMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
lineHeight: 16,
flexShrink: 0,
},
@@ -333,44 +333,44 @@ const styles = StyleSheet.create((theme) => ({
},
serviceName: {
color: theme.colors.statusSuccess,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
lineHeight: 16,
flexShrink: 1,
},
serviceNameUnhealthy: {
color: theme.colors.statusDanger,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
lineHeight: 16,
flexShrink: 1,
},
prText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
lineHeight: 16,
flexShrink: 0,
},
prTextHovered: {
color: theme.colors.foreground,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
lineHeight: 16,
flexShrink: 0,
},
// Matches the indicator — see COLOR_MAPPINGS in check-indicator.tsx.
checksTextPassed: {
color: theme.colors.statusSuccess,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
lineHeight: 16,
flexShrink: 0,
},
checksTextFailed: {
color: theme.colors.statusDanger,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
lineHeight: 16,
flexShrink: 0,
},
checksTextRunning: {
color: theme.colors.statusWarning,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
lineHeight: 16,
flexShrink: 0,
},
packages/app/src/components/sidebar/workspace-trailing/index.tsx
+1 -1
View File
@@ -76,7 +76,7 @@ const styles = StyleSheet.create((theme) => ({
height: 20,
lineHeight: 20,
color: theme.colors.foregroundExtraMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.normal,
flexShrink: 0,
},
packages/app/src/components/split-container.tsx
+1 -1
View File
@@ -1349,7 +1349,7 @@ const styles = StyleSheet.create((theme) => ({
maxWidth: 200,
},
dragOverlayLabel: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
flexShrink: 1,
},
}));
packages/app/src/components/task-list-row.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ const styles = StyleSheet.create((theme) => ({
flexBasis: "auto",
minWidth: 0,
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
runningText: {
color: theme.colors.foreground,
packages/app/src/components/terminal-copy-paste-actions.tsx
+2 -2
View File
@@ -119,7 +119,7 @@ const styles = StyleSheet.create((theme) => ({
},
keyButtonText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.medium,
textAlign: "center",
},
@@ -134,7 +134,7 @@ const styles = StyleSheet.create((theme) => ({
},
floatingButtonText: {
color: "#f5f5f5",
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.medium,
textAlign: "center",
},
packages/app/src/components/terminal-pane.tsx
+3 -3
View File
@@ -1151,7 +1151,7 @@ const styles = StyleSheet.create((theme) => ({
},
statusError: {
color: theme.colors.destructive,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
keyboardContainer: {
borderTopWidth: 1,
@@ -1189,7 +1189,7 @@ const styles = StyleSheet.create((theme) => ({
},
keyButtonText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.medium,
textAlign: "center",
},
@@ -1204,7 +1204,7 @@ const styles = StyleSheet.create((theme) => ({
},
stateText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
textAlign: "center",
},
}));
packages/app/src/components/toast-host.tsx
+1 -1
View File
@@ -339,7 +339,7 @@ const styles = StyleSheet.create((theme) => ({
message: {
flexShrink: 1,
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
},
messageError: {
packages/app/src/components/tool-call-details.tsx
+4 -4
View File
@@ -793,7 +793,7 @@ const styles = StyleSheet.create((theme) => {
},
groupHeaderText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
},
section: {
@@ -812,14 +812,14 @@ const styles = StyleSheet.create((theme) => {
},
sectionTitle: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.semibold,
textTransform: "uppercase",
letterSpacing: 0.5,
},
rangeText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
diffContainer: {
borderWidth: theme.borderWidth[1],
@@ -916,7 +916,7 @@ const styles = StyleSheet.create((theme) => {
},
emptyStateText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontStyle: "italic",
},
loadingContainer: {
packages/app/src/components/tool-call-sheet.tsx
+1 -1
View File
@@ -193,7 +193,7 @@ const styles = StyleSheet.create((theme) => ({
flex: 1,
},
headerTitle: {
fontSize: theme.fontSize.lg,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.semibold,
color: theme.colors.foreground,
flex: 1,
packages/app/src/components/ui/alert.tsx
+2 -2
View File
@@ -102,12 +102,12 @@ const styles = StyleSheet.create((theme) => ({
},
title: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.medium,
},
description: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
descriptionSlot: {
flexShrink: 1,
packages/app/src/components/ui/autocomplete.tsx
+8 -8
View File
@@ -301,17 +301,17 @@ const styles = StyleSheet.create((theme: Theme) => ({
},
detailLabel: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
},
detailDescription: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
marginTop: theme.spacing[1],
},
detailHint: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
marginTop: theme.spacing[1],
},
container: {
@@ -363,22 +363,22 @@ const styles = StyleSheet.create((theme: Theme) => ({
},
itemLabel: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
},
itemDetail: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
itemDescription: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
marginTop: 2,
},
itemDescriptionInline: {
flex: 1,
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
emptyItem: {
paddingHorizontal: theme.spacing[3],
@@ -386,6 +386,6 @@ const styles = StyleSheet.create((theme: Theme) => ({
},
emptyText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
})) as unknown as Record<string, object>;
packages/app/src/components/ui/combobox.tsx
+5 -5
View File
@@ -1683,7 +1683,7 @@ const styles = StyleSheet.create((theme) => ({
flex: 1,
paddingVertical: theme.spacing[3],
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
comboboxItem: {
flexDirection: "row",
@@ -1744,12 +1744,12 @@ const styles = StyleSheet.create((theme) => ({
justifyContent: "center",
},
comboboxItemLabel: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.foreground,
flexShrink: 0,
},
comboboxItemDescription: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
color: theme.colors.foregroundMuted,
flexShrink: 1,
},
@@ -1757,7 +1757,7 @@ const styles = StyleSheet.create((theme) => ({
paddingHorizontal: theme.spacing[3],
paddingVertical: theme.spacing[2],
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
footer: {
borderTopWidth: 1,
@@ -1768,7 +1768,7 @@ const styles = StyleSheet.create((theme) => ({
paddingBottom: theme.spacing[2],
},
comboboxTitle: {
fontSize: theme.fontSize.lg,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.medium,
textAlign: "left",
},
packages/app/src/components/ui/control-geometry.test.ts
+9 -9
View File
@@ -21,9 +21,9 @@ const theme = {
borderAccent: "#2F3534",
},
fontSize: {
xs: 12,
sm: 14,
base: 16,
xs: 10,
sm: 12,
base: 14,
},
opacity: {
50: 0.5,
@@ -78,12 +78,12 @@ describe("control geometry", () => {
expect(geometry.fieldTextSm.fontSize).toBe(14);
expect(geometry.fieldTextSm.lineHeight).toBe(20);
expect(geometry.fieldTextMd.fontSize).toBe(16);
expect(geometry.fieldTextMd.lineHeight).toBe(22);
expect(geometry.fieldTextMd.fontSize).toBe(14);
expect(geometry.fieldTextMd.lineHeight).toBe(20);
expect(geometry.formTextInputSm.fontSize).toBe(14);
expect(geometry.formTextInputSm.lineHeight).toBe(20);
expect(geometry.formTextInputMd.fontSize).toBe(16);
expect(geometry.formTextInputMd.lineHeight).toBe(22);
expect(geometry.formTextInputMd.fontSize).toBe(14);
expect(geometry.formTextInputMd.lineHeight).toBe(20);
});
it("derives field padding from line height without changing the control height", () => {
@@ -96,13 +96,13 @@ describe("control geometry", () => {
);
expect(geometry.fieldControlMd.minHeight).toBe(44);
expect(geometry.fieldControlMd.paddingVertical).toBe(11);
expect(geometry.fieldControlMd.paddingVertical).toBe(12);
expect(geometry.fieldTextMd.lineHeight + geometry.fieldControlMd.paddingVertical * 2).toBe(
geometry.fieldControlMd.minHeight,
);
expect(geometry.formTextInputSm.paddingVertical).toBe(6);
expect(geometry.formTextInputMd.paddingVertical).toBe(11);
expect(geometry.formTextInputMd.paddingVertical).toBe(12);
});
it("keeps segmented controls ghost with button-radius segments in a button-sized track", () => {
packages/app/src/components/ui/control-geometry.ts
+7 -7
View File
@@ -111,7 +111,7 @@ export function resolveControlInteractionStyles(
}
export function createControlGeometry(theme: Theme) {
const fieldTextSmLineHeight = fieldLineHeight(theme.fontSize.sm);
const fieldTextSmLineHeight = fieldLineHeight(theme.fontSize.base);
const fieldTextMdLineHeight = fieldLineHeight(theme.fontSize.base);
const fieldControlSm = {
minHeight: CONTROL_HEIGHTS.compact,
@@ -126,7 +126,7 @@ export function createControlGeometry(theme: Theme) {
borderRadius: theme.borderRadius.lg,
};
const fieldTextSm = {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
lineHeight: fieldTextSmLineHeight,
};
const fieldTextMd = {
@@ -160,10 +160,10 @@ export function createControlGeometry(theme: Theme) {
borderRadius: theme.borderRadius.xl,
},
buttonText: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
buttonTextXs: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
formTextInputSm: {
...fieldControlSm,
@@ -232,13 +232,13 @@ export function createControlGeometry(theme: Theme) {
borderRadius: theme.borderRadius.lg,
},
segmentedLabelXs: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
segmentedLabelSm: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
segmentedLabelMd: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
};
}
packages/app/src/components/ui/external-link.tsx
+3 -3
View File
@@ -66,12 +66,12 @@ const styles = StyleSheet.create((theme) => ({
},
label: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
tooltipText: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
maxWidth: 280,
lineHeight: theme.fontSize.sm * 1.4,
lineHeight: theme.fontSize.base * 1.4,
},
}));
packages/app/src/components/ui/form-field.tsx
+5 -5
View File
@@ -226,18 +226,18 @@ const styles = StyleSheet.create((theme) => ({
},
label: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
},
hintText: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
lineHeight: Math.round(theme.fontSize.xs * 1.4),
fontSize: theme.fontSize.sm,
lineHeight: Math.round(theme.fontSize.sm * 1.4),
},
errorText: {
color: theme.colors.palette.red[300],
fontSize: theme.fontSize.xs,
lineHeight: Math.round(theme.fontSize.xs * 1.4),
fontSize: theme.fontSize.sm,
lineHeight: Math.round(theme.fontSize.sm * 1.4),
},
}));
packages/app/src/components/ui/menu/menu-item.tsx
+5 -5
View File
@@ -314,7 +314,7 @@ const styles = StyleSheet.create((theme) => ({
paddingBottom: theme.spacing[1],
},
labelText: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
color: theme.colors.foregroundMuted,
},
// `border` sits between surface1 and surface2, which put it within a hair of the hover fill and
@@ -343,12 +343,12 @@ const styles = StyleSheet.create((theme) => ({
gap: theme.spacing[2],
},
hintText: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
color: theme.colors.foregroundMuted,
flexShrink: 1,
},
tooltipText: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.foreground,
},
// The fill is inset from the surface's edges and rounded, so a hovered row reads as a chip
@@ -392,7 +392,7 @@ const styles = StyleSheet.create((theme) => ({
opacity: 0.72,
},
itemText: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
lineHeight: MENU_ITEM_LINE_HEIGHT,
color: theme.colors.foreground,
fontWeight: theme.fontWeight.normal,
@@ -408,7 +408,7 @@ const styles = StyleSheet.create((theme) => ({
},
itemDescription: {
marginTop: 2,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
color: theme.colors.foregroundMuted,
},
checkSlot: {
packages/app/src/components/ui/menu/menu-sub.tsx
+1 -1
View File
@@ -131,7 +131,7 @@ const styles = StyleSheet.create((theme) => ({
gap: theme.spacing[1.5],
},
valueText: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.foregroundMuted,
flexShrink: 1,
},
packages/app/src/components/ui/search-field.tsx
+1 -1
View File
@@ -108,6 +108,6 @@ const styles = StyleSheet.create((theme) => ({
// native, so this needs neither a cast nor a platform branch.
outlineWidth: 0,
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
}));
packages/app/src/components/ui/shortcut.tsx
+1 -1
View File
@@ -72,7 +72,7 @@ const styles = StyleSheet.create((theme) => ({
gap: theme.spacing[1],
},
text: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.normal,
color: theme.colors.foregroundMuted,
},
packages/app/src/components/ui/status-badge.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ const styles = StyleSheet.create((theme) => ({
paddingVertical: 3,
},
pillText: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.normal,
color: theme.colors.foregroundMuted,
},
packages/app/src/components/welcome-screen.tsx
+4 -4
View File
@@ -49,13 +49,13 @@ const styles = StyleSheet.create((theme) => ({
},
title: {
color: theme.colors.foreground,
fontSize: theme.fontSize.xl,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.medium,
textAlign: "center",
},
subtitle: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
textAlign: "center",
},
copyBlock: {
@@ -99,12 +99,12 @@ const styles = StyleSheet.create((theme) => ({
},
setupLinkText: {
color: theme.colors.accent,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.medium,
},
versionLabel: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
textAlign: "center",
marginTop: theme.spacing[6],
},
packages/app/src/components/workspace-hover-card.tsx
+6 -6
View File
@@ -600,7 +600,7 @@ const styles = StyleSheet.create((theme) => ({
},
cardTitle: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
flex: 1,
minWidth: 0,
@@ -616,7 +616,7 @@ const styles = StyleSheet.create((theme) => ({
flex: 1,
minWidth: 0,
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.normal,
},
cardInfoTextHovered: {
@@ -638,7 +638,7 @@ const styles = StyleSheet.create((theme) => ({
minHeight: 28,
},
checksSummaryLabel: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.normal,
color: theme.colors.foregroundMuted,
},
@@ -658,17 +658,17 @@ const styles = StyleSheet.create((theme) => ({
gap: 3,
},
checksStatusTextFailed: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.normal,
color: theme.colors.statusDanger,
},
checksStatusTextPending: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.normal,
color: theme.colors.statusWarning,
},
checksStatusTextPassed: {
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.normal,
color: theme.colors.statusSuccess,
},
packages/app/src/components/workspace-setup-dialog.tsx
+2 -2
View File
@@ -466,7 +466,7 @@ const styles = StyleSheet.create((theme) => ({
fontSize: 9,
},
projectTitle: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.foregroundMuted,
},
section: {
@@ -475,7 +475,7 @@ const styles = StyleSheet.create((theme) => ({
marginVertical: -theme.spacing[2],
},
errorText: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.destructive,
lineHeight: 20,
},
packages/app/src/composer/agent-controls/control.tsx
+3 -3
View File
@@ -116,7 +116,7 @@ const styles = StyleSheet.create((theme) => ({
minWidth: 0,
flexShrink: 1,
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
},
sheetRow: {
@@ -144,7 +144,7 @@ const styles = StyleSheet.create((theme) => ({
flex: 1,
minWidth: 0,
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
},
sheetValue: {
@@ -152,7 +152,7 @@ const styles = StyleSheet.create((theme) => ({
minWidth: 0,
flexShrink: 1,
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
},
hovered: {
packages/app/src/composer/agent-controls/index.tsx
+3 -3
View File
@@ -1926,13 +1926,13 @@ const styles = StyleSheet.create((theme) => ({
minWidth: 0,
flexShrink: 1,
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
},
tooltipText: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
lineHeight: theme.fontSize.sm * 1.4,
fontSize: theme.fontSize.base,
lineHeight: theme.fontSize.base * 1.4,
},
combinedSheetControls: {
gap: theme.spacing[1],
packages/app/src/composer/agent-controls/mode-control.tsx
+2 -2
View File
@@ -317,7 +317,7 @@ const styles = StyleSheet.create((theme) => ({
},
tooltipText: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
lineHeight: theme.fontSize.sm * 1.4,
fontSize: theme.fontSize.base,
lineHeight: theme.fontSize.base * 1.4,
},
}));
packages/app/src/composer/agent-controls/model-sheet.tsx
+2 -2
View File
@@ -363,7 +363,7 @@ const styles = StyleSheet.create((theme) => ({
minWidth: 0,
flexShrink: 1,
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
},
triggerLabels: {
@@ -376,7 +376,7 @@ const styles = StyleSheet.create((theme) => ({
triggerThinking: {
flexShrink: 0,
color: theme.colors.foregroundExtraMuted,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
},
providerIcon: {
packages/app/src/composer/index.tsx
+3 -3
View File
@@ -2430,7 +2430,7 @@ const styles = StyleSheet.create((theme: Theme) => ({
gap: theme.spacing[2],
},
tooltipText: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.popoverForeground,
},
buttonDisabled: {
@@ -2455,7 +2455,7 @@ const styles = StyleSheet.create((theme: Theme) => ({
queueText: {
flex: 1,
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
queueActions: {
flexDirection: "row",
@@ -2475,7 +2475,7 @@ const styles = StyleSheet.create((theme: Theme) => ({
},
sendErrorText: {
color: theme.colors.palette.red[500],
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
},
})) as unknown as Record<string, object>;
packages/app/src/composer/input/input.tsx
+5 -5
View File
@@ -1966,16 +1966,16 @@ const styles = StyleSheet.create((theme: Theme) => ({
position: "absolute",
top: 0,
right: 0,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
color: theme.colors.foregroundMuted,
opacity: 0.5,
},
textInput: {
width: "100%",
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,
lineHeight: theme.fontSize.sm * 1.4,
lineHeight: theme.fontSize.base * 1.4,
...(isWeb
? ({
outlineStyle: "none",
@@ -2050,7 +2050,7 @@ const styles = StyleSheet.create((theme: Theme) => ({
borderRadius: theme.borderRadius.full,
},
sendButtonLabel: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.medium,
color: theme.colors.accentForeground,
},
@@ -2063,7 +2063,7 @@ const styles = StyleSheet.create((theme: Theme) => ({
gap: theme.spacing[2],
},
tooltipText: {
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
color: theme.colors.popoverForeground,
},
buttonDisabled: {
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,
},
}));
packages/app/src/file-pane/bar.tsx
+4 -4
View File
@@ -139,9 +139,9 @@ const styles = StyleSheet.create((theme) => ({
alignItems: "center",
gap: theme.spacing[2],
},
secondary: { color: theme.colors.foregroundMuted, fontSize: theme.fontSize.xs },
whisper: { color: theme.colors.foregroundExtraMuted, fontSize: theme.fontSize.xs },
error: { color: theme.colors.palette.red[300], fontSize: theme.fontSize.xs },
secondary: { color: theme.colors.foregroundMuted, fontSize: theme.fontSize.sm },
whisper: { color: theme.colors.foregroundExtraMuted, fontSize: theme.fontSize.sm },
error: { color: theme.colors.palette.red[300], fontSize: theme.fontSize.sm },
dirtyDot: {
width: 6,
height: 6,
@@ -157,6 +157,6 @@ const styles = StyleSheet.create((theme) => ({
vim: {
color: theme.colors.foregroundMuted,
fontFamily: theme.fontFamily.mono,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
}));
packages/app/src/file-pane/conflict-alert.tsx
+2 -2
View File
@@ -73,12 +73,12 @@ const styles = StyleSheet.create((theme) => ({
},
title: {
color: theme.colors.palette.amber[500],
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.medium,
},
description: {
color: theme.colors.foregroundMuted,
fontSize: theme.fontSize.xs,
fontSize: theme.fontSize.sm,
},
actions: {
flexShrink: 0,
packages/app/src/file-pane/editor/view.tsx
+1 -1
View File
@@ -32,5 +32,5 @@ export function FileEditorView(_props: {
const styles = StyleSheet.create((theme) => ({
container: { flex: 1, alignItems: "center", justifyContent: "center" },
text: { color: theme.colors.foregroundMuted, fontSize: theme.fontSize.sm },
text: { color: theme.colors.foregroundMuted, fontSize: theme.fontSize.base },
}));
packages/app/src/file-pane/markdown-preview/index.tsx
+2 -2
View File
@@ -84,12 +84,12 @@ const styles = StyleSheet.create((theme) => ({
frontMatterKey: {
color: theme.colors.foregroundMuted,
fontFamily: theme.fontFamily.mono,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
lineHeight: 20,
},
frontMatterValue: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
fontSize: theme.fontSize.base,
lineHeight: 20,
},
}));

Some files were not shown because too many files have changed in this diff Show More