Skip to content

Bump type scale to a 15px base for the IBM Plex switch #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fakechris merged 1 commit into from
Jul 23, 2026
Merged

Bump type scale to a 15px base for the IBM Plex switch #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/web/src/components/BoardLoadMoreNotice.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export function BoardLoadMoreNotice({
role={errorMessage ? 'alert' : undefined}
style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap', padding: '6px 14px', margin: '0 var(--content-gutter)', flexShrink: 0 }}
>
<p style={{ margin: 0, fontSize: 11 }}>
<p style={{ margin: 0, fontSize: 13 }}>
{errorMessage ??
'Showing the current page of issues. Load more to continue browsing this team.'}
</p>
Expand Down
4 changes: 2 additions & 2 deletions packages/web/src/components/IssueDetailDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@ export function IssueDetailDrawer({
<div className="issue-panel__header">
<div className="issue-panel__title-row">
{team ? <span className="context-chip context-chip--team">{team.key}</span> : null}
<span className="mono" style={{ fontSize: 11, color: 'var(--fg-dim)' }}>
<span className="mono" style={{ fontSize: 13, color: 'var(--fg-dim)' }}>
{activeIssue.identifier}
</span>
</div>
Expand Down Expand Up @@ -359,7 +359,7 @@ export function IssueDetailDrawer({
{description ? (
<MarkdownRenderer content={description} />
) : (
<span style={{ color: 'var(--fg-dim)', fontSize: 13 }}>Add a description…</span>
<span style={{ color: 'var(--fg-dim)', fontSize: 15 }}>Add a description…</span>
)}
</div>
)}
Expand Down
4 changes: 2 additions & 2 deletions packages/web/src/components/KanbanView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,8 @@ function KanbanColumn({
{group.meta?.priority !== undefined && (
<PriorityIcon level={group.meta.priority} size={12} />
)}
<span style={{ fontSize: 12, fontWeight: 600 }}>{group.label}</span>
<span className="mono" style={{ fontSize: 11, color: 'var(--fg-dim)' }}>
<span style={{ fontSize: 14, fontWeight: 600 }}>{group.label}</span>
<span className="mono" style={{ fontSize: 13, color: 'var(--fg-dim)' }}>
{group.issues.length}
</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/web/src/components/Primitives.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export function Btn({
padding: icon && !children ? 0 : (size === 'md' ? '0 10px' : '0 8px'),
width: icon && !children ? (size === 'md' ? 28 : 24) : undefined,
justifyContent: 'center',
fontSize: 12, fontWeight: 500,
fontSize: 14, fontWeight: 500,
borderRadius: 'var(--r-2)',
transition: 'background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease)',
border: '1px solid transparent',
Expand Down
6 changes: 3 additions & 3 deletions packages/web/src/components/RichTextEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,7 @@ export function RichTextEditor({
title="Code (`code`)"
disabled={disabled}
onClick={handleCode}
style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}
style={{ fontFamily: 'var(--font-mono)', fontSize: 14 }}
>
{'</>'}
</button>
Expand Down Expand Up @@ -354,7 +354,7 @@ export function RichTextEditor({
↑ Uploading {uploadingCount} file{uploadingCount > 1 ? 's' : ''}…
</span>
) : null}
<span style={{ fontSize: 10, color: 'var(--fg-dim)', marginRight: 4 }}>
<span style={{ fontSize: 12, color: 'var(--fg-dim)', marginRight: 4 }}>
<Kbd keys={['⌘', '↵']} /> to submit
</span>
<button
Expand All @@ -364,7 +364,7 @@ export function RichTextEditor({
onClick={() => onSubmit?.()}
style={{
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
height: 24, padding: '0 10px', fontSize: 12, fontWeight: 500,
height: 24, padding: '0 10px', fontSize: 14, fontWeight: 500,
borderRadius: 'var(--r-2)', border: '1px solid transparent', cursor: 'pointer',
whiteSpace: 'nowrap',
...(value.trim()
Expand Down
78 changes: 39 additions & 39 deletions packages/web/src/routes/BoardPage.tsx
View file
Open in desktop

Large diffs are not rendered by default.

44 changes: 22 additions & 22 deletions packages/web/src/routes/CyclesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ export function CyclesPage() {
}}>
<div style={{ width: `${pct}%`, height: '100%', background: 'var(--accent)', borderRadius: 2 }} />
</div>
<span style={{ fontSize: 11, color: 'var(--fg-dim)' }}>{pct}%</span>
<span style={{ fontSize: 13, color: 'var(--fg-dim)' }}>{pct}%</span>
</div>
);
}
Expand All @@ -188,12 +188,12 @@ export function CyclesPage() {
<div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: 'var(--bg)' }}>
<div className="page-header">
<span style={{ color: 'var(--fg-dim)', display: 'inline-flex' }}><IcoCycle /></span>
<span style={{ fontSize: 13, fontWeight: 500 }}>Cycles</span>
<span style={{ fontSize: 15, fontWeight: 500 }}>Cycles</span>
{teamKey && (
<>
<span style={{ color: 'var(--fg-faint)', fontSize: 12 }}>·</span>
<span style={{ color: 'var(--fg-faint)', fontSize: 14 }}>·</span>
<span className="mono" style={{
fontSize: 10, padding: '1px 5px', borderRadius: 3,
fontSize: 12, padding: '1px 5px', borderRadius: 3,
background: 'var(--bg-hover)', border: '1px solid var(--border)',
color: 'var(--fg-muted)',
}}>
Expand All @@ -209,7 +209,7 @@ export function CyclesPage() {

<div className="page-content">
{loading ? (
<div style={{ padding: 40, textAlign: 'center', color: 'var(--fg-dim)', fontSize: 12 }}>
<div style={{ padding: 40, textAlign: 'center', color: 'var(--fg-dim)', fontSize: 14 }}>
Loading cycles…
</div>
) : cycles.length === 0 ? (
Expand All @@ -231,16 +231,16 @@ export function CyclesPage() {
<div style={{ padding: '20px var(--pad-x)' }}>
{activeCycle && (
<section style={{ marginBottom: 32 }}>
<div style={{ fontSize: 11, fontWeight: 500, color: 'var(--fg-dim)', marginBottom: 8, letterSpacing: '0.03em' }}>
<div style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg-dim)', marginBottom: 8, letterSpacing: '0.03em' }}>
ACTIVE CYCLE
</div>
<div style={{
border: '1px solid var(--accent-border)', borderRadius: 'var(--r-3)',
padding: 16, background: 'var(--bg-raised)',
}}>
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
<span style={{ fontSize: 14, fontWeight: 500 }}>{activeCycle.name}</span>
<span style={{ fontSize: 11, color: 'var(--fg-dim)' }}>
<span style={{ fontSize: 15, fontWeight: 500 }}>{activeCycle.name}</span>
<span style={{ fontSize: 13, color: 'var(--fg-dim)' }}>
{formatDate(activeCycle.startsAt)} – {formatDate(activeCycle.endsAt)}
</span>
<div style={{ flex: 1 }} />
Expand All @@ -259,11 +259,11 @@ export function CyclesPage() {
style={{
display: 'flex', alignItems: 'center', gap: 8,
width: '100%', padding: '6px 0', background: 'none', border: 'none',
cursor: 'pointer', fontSize: 12.5, color: 'var(--fg)', textAlign: 'left',
cursor: 'pointer', fontSize: 14.5, color: 'var(--fg)', textAlign: 'left',
}}
>
<StatusIconPrimitive stateType={getStateType(issue.state.type)} stateColor={getStateColor(issue.state.type)} size={14} />
<span className="mono" style={{ fontSize: 10, color: 'var(--fg-dim)' }}>{issue.identifier}</span>
<span className="mono" style={{ fontSize: 12, color: 'var(--fg-dim)' }}>{issue.identifier}</span>
<span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{issue.title}</span>
</button>
))}
Expand All @@ -275,7 +275,7 @@ export function CyclesPage() {

{upcomingCycles.length > 0 && (
<section style={{ marginBottom: 32 }}>
<div style={{ fontSize: 11, fontWeight: 500, color: 'var(--fg-dim)', marginBottom: 8, letterSpacing: '0.03em' }}>
<div style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg-dim)', marginBottom: 8, letterSpacing: '0.03em' }}>
UPCOMING
</div>
{upcomingCycles.map((cycle) => (
Expand All @@ -286,7 +286,7 @@ export function CyclesPage() {

{completedCycles.length > 0 && (
<section>
<div style={{ fontSize: 11, fontWeight: 500, color: 'var(--fg-dim)', marginBottom: 8, letterSpacing: '0.03em' }}>
<div style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg-dim)', marginBottom: 8, letterSpacing: '0.03em' }}>
COMPLETED
</div>
{completedCycles.map((cycle) => (
Expand All @@ -300,13 +300,13 @@ export function CyclesPage() {

<dialog ref={dialogRef} className="dialog-modal" onClick={(e) => { if (e.target === dialogRef.current) dialogRef.current?.close(); }}>
<form onSubmit={handleSubmit} style={{ padding: 20, minWidth: 340 }}>
<h3 style={{ margin: '0 0 16px', fontSize: 14, fontWeight: 500 }}>
<h3 style={{ margin: '0 0 16px', fontSize: 15, fontWeight: 500 }}>
{dialogMode === 'create' ? 'New cycle' : 'Edit cycle'}
</h3>
<label style={{ display: 'block', marginBottom: 12 }}>
<span style={{ fontSize: 12, color: 'var(--fg-dim)', display: 'block', marginBottom: 4 }}>Name</span>
<span style={{ fontSize: 14, color: 'var(--fg-dim)', display: 'block', marginBottom: 4 }}>Name</span>
<input
style={{ width: '100%', height: 30, padding: '0 10px', background: 'var(--bg-raised)', border: '1px solid var(--border)', borderRadius: 'var(--r-2)', fontSize: 12.5, color: 'var(--fg)' }}
style={{ width: '100%', height: 30, padding: '0 10px', background: 'var(--bg-raised)', border: '1px solid var(--border)', borderRadius: 'var(--r-2)', fontSize: 14.5, color: 'var(--fg)' }}
value={formName}
onChange={(e) => setFormName(e.target.value)}
placeholder="e.g. Sprint 1"
Expand All @@ -315,20 +315,20 @@ export function CyclesPage() {
</label>
<div style={{ display: 'flex', gap: 12, marginBottom: 16 }}>
<label style={{ flex: 1 }}>
<span style={{ fontSize: 12, color: 'var(--fg-dim)', display: 'block', marginBottom: 4 }}>Start date</span>
<span style={{ fontSize: 14, color: 'var(--fg-dim)', display: 'block', marginBottom: 4 }}>Start date</span>
<input
type="date"
style={{ width: '100%', height: 30, padding: '0 8px', background: 'var(--bg-raised)', border: '1px solid var(--border)', borderRadius: 'var(--r-2)', fontSize: 12, color: 'var(--fg)' }}
style={{ width: '100%', height: 30, padding: '0 8px', background: 'var(--bg-raised)', border: '1px solid var(--border)', borderRadius: 'var(--r-2)', fontSize: 14, color: 'var(--fg)' }}
value={formStartsAt}
onChange={(e) => setFormStartsAt(e.target.value)}
required
/>
</label>
<label style={{ flex: 1 }}>
<span style={{ fontSize: 12, color: 'var(--fg-dim)', display: 'block', marginBottom: 4 }}>End date</span>
<span style={{ fontSize: 14, color: 'var(--fg-dim)', display: 'block', marginBottom: 4 }}>End date</span>
<input
type="date"
style={{ width: '100%', height: 30, padding: '0 8px', background: 'var(--bg-raised)', border: '1px solid var(--border)', borderRadius: 'var(--r-2)', fontSize: 12, color: 'var(--fg)' }}
style={{ width: '100%', height: 30, padding: '0 8px', background: 'var(--bg-raised)', border: '1px solid var(--border)', borderRadius: 'var(--r-2)', fontSize: 14, color: 'var(--fg)' }}
value={formEndsAt}
onChange={(e) => setFormEndsAt(e.target.value)}
required
Expand Down Expand Up @@ -356,11 +356,11 @@ function CycleRow({ cycle, onEdit, onDelete }: { cycle: CycleSummary; onEdit: ()
border: '1px solid var(--border)', marginBottom: 6, background: 'var(--bg-raised)',
}}>
<IcoCycle size={14} style={{ color: 'var(--fg-dim)' }} />
<span style={{ fontSize: 13, fontWeight: 500, flex: 1 }}>{cycle.name}</span>
<span style={{ fontSize: 11, color: 'var(--fg-dim)' }}>
<span style={{ fontSize: 15, fontWeight: 500, flex: 1 }}>{cycle.name}</span>
<span style={{ fontSize: 13, color: 'var(--fg-dim)' }}>
{formatDate(cycle.startsAt)} – {formatDate(cycle.endsAt)}
</span>
<span className="mono" style={{ fontSize: 11, color: 'var(--fg-dim)' }}>{issueCount} issues</span>
<span className="mono" style={{ fontSize: 13, color: 'var(--fg-dim)' }}>{issueCount} issues</span>
<Btn variant="ghost" size="sm" onClick={onEdit}>Edit</Btn>
<Btn variant="ghost" size="sm" onClick={onDelete} style={{ color: 'var(--danger)' }}>Delete</Btn>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/web/src/routes/InboxPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ export function InboxPage() {
<header className="inbox-page__header">
<IcoInbox size={14} style={{ color: 'var(--fg-dim)' }} />
<span className="inbox-page__title">Inbox</span>
<span className="mono" style={{ fontSize: 11, color: 'var(--fg-dim)' }}>
<span className="mono" style={{ fontSize: 13, color: 'var(--fg-dim)' }}>
{unreadCount}
</span>
<div style={{ flex: 1 }} />
Expand Down
24 changes: 12 additions & 12 deletions packages/web/src/routes/IssuePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -557,7 +557,7 @@ export function IssuePage() {
onClick={() => navigate(`/issue/${activeIssue.parent!.id}`)}
style={{
background: 'none', border: 'none', cursor: 'pointer',
fontSize: 11, color: 'var(--fg-muted)', padding: '2px 4px',
fontSize: 13, color: 'var(--fg-muted)', padding: '2px 4px',
borderRadius: 'var(--r-1)',
}}
className="mono"
Expand All @@ -572,7 +572,7 @@ export function IssuePage() {
<span style={{ color: 'var(--fg-faint)', display: 'inline-flex' }}>
<IcoChevR size={10} />
</span>
<span className="mono" style={{ fontSize: 11, color: 'var(--fg-dim)' }}>
<span className="mono" style={{ fontSize: 13, color: 'var(--fg-dim)' }}>
{activeIssue.identifier}
</span>
</div>
Expand All @@ -590,7 +590,7 @@ export function IssuePage() {
}}>
<button
type="button"
style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '6px 10px', fontSize: 12, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--fg)', borderRadius: 'var(--r-1)' }}
style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '6px 10px', fontSize: 14, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--fg)', borderRadius: 'var(--r-1)' }}
onClick={() => { setMoreMenuOpen(false); handleCopyLink(); }}
onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--bg-hover)'; }}
onMouseLeave={(e) => { e.currentTarget.style.background = 'none'; }}
Expand All @@ -599,7 +599,7 @@ export function IssuePage() {
</button>
<button
type="button"
style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '6px 10px', fontSize: 12, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--danger)', borderRadius: 'var(--r-1)' }}
style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '6px 10px', fontSize: 14, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--danger)', borderRadius: 'var(--r-1)' }}
onClick={() => {
setMoreMenuOpen(false);
if (confirmIssueDelete()) {
Expand Down Expand Up @@ -664,7 +664,7 @@ export function IssuePage() {
<button
type="button"
style={{
height: 26, padding: '0 12px', fontSize: 12, fontWeight: 500,
height: 26, padding: '0 12px', fontSize: 14, fontWeight: 500,
borderRadius: 'var(--r-2)', border: '1px solid var(--border)', cursor: 'pointer',
background: 'transparent', color: 'var(--fg-muted)',
}}
Expand All @@ -687,13 +687,13 @@ export function IssuePage() {
{description ? (
<MarkdownRenderer content={description} />
) : (
<span style={{ color: 'var(--fg-dim)', fontSize: 13 }}>Add a description…</span>
<span style={{ color: 'var(--fg-dim)', fontSize: 15 }}>Add a description…</span>
)}
<button
type="button"
style={{
position: 'absolute', top: 0, right: 0,
height: 22, padding: '0 8px', fontSize: 11, fontWeight: 500,
height: 22, padding: '0 8px', fontSize: 13, fontWeight: 500,
borderRadius: 'var(--r-2)', border: '1px solid var(--border)', cursor: 'pointer',
background: 'var(--bg-hover)', color: 'var(--fg-muted)',
opacity: 0.7,
Expand All @@ -711,7 +711,7 @@ export function IssuePage() {
type="button"
className="issue-children__row"
onClick={() => navigate(`/issue/${activeIssue.parent!.id}`)}
style={{ display: 'flex', gap: 6, padding: '4px 0', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--fg)', fontSize: 13 }}
style={{ display: 'flex', gap: 6, padding: '4px 0', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--fg)', fontSize: 15 }}
>
{activeIssue.parent.identifier} — {activeIssue.parent.title}
</button>
Expand Down Expand Up @@ -750,10 +750,10 @@ export function IssuePage() {
<Avatar user={{ name: renderCommentAuthor(entry.comment) }} size={22} />
<div style={{ flex: 1, minWidth: 0 }}>
<div className="issue-activity__comment-meta">
<span style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--fg)' }}>
<span style={{ fontSize: 14.5, fontWeight: 500, color: 'var(--fg)' }}>
{renderCommentAuthor(entry.comment)}
</span>
<span style={{ fontSize: 11, color: 'var(--fg-dim)' }}>
<span style={{ fontSize: 13, color: 'var(--fg-dim)' }}>
{formatTimestamp(entry.timestamp)}
</span>
<button
Expand Down Expand Up @@ -785,7 +785,7 @@ export function IssuePage() {
{entry.body ? (
<span style={{ color: 'var(--fg-muted)' }}>{entry.body}</span>
) : null}
<span style={{ marginLeft: 'auto', fontSize: 11 }}>
<span style={{ marginLeft: 'auto', fontSize: 13 }}>
{formatTimestamp(entry.timestamp)}
</span>
</div>
Expand Down Expand Up @@ -950,7 +950,7 @@ export function IssuePage() {
<div className="issue-panel__prop-label">Team</div>
<div className="issue-panel__prop-value">
<span className="mono" style={{
fontSize: 10, padding: '1px 5px', borderRadius: 3,
fontSize: 12, padding: '1px 5px', borderRadius: 3,
background: 'var(--bg-hover)', border: '1px solid var(--border)',
color: 'var(--fg-muted)',
}}>
Expand Down
Loading
Loading