alice.pds.demo.boltless.dev
This repository has no description
web/fmt: text-* ➔ typography-*
Signed-off-by: eti <eti@eti.tf>
author
eti
date
(Aug 3, 2026, 4:11 PM +0300)
commit
038b7254
038b72540291a65781eca49ca7d3f58e83596b2a
parent
2d6ebc50
2d6ebc504293445d0b57633972506a82edec399f
+82
-82
+2
-2
web/src/lib/components/comment/Comment.svelte
+2
-2
web/src/lib/components/comment/Comment.svelte
···
36
36
37
37
{#if deleted}
38
38
<div
39
-
class={`text-sm text-foreground-subtle italic ${variant === "top" ? "border-b border-border-default bg-background-default px-6 py-4" : "py-4 pr-4"}`}
39
+
class={`typography-paragraph-small text-foreground-subtle italic ${variant === "top" ? "border-b border-border-default bg-background-default px-6 py-4" : "py-4 pr-4"}`}
40
40
>
41
41
This comment was deleted.
42
42
</div>
···
48
48
<Avatar did={authorDid} handle={authorHandle} size="size-8" tiny />
49
49
</div>
50
50
<div class="min-w-0 flex-1">
51
-
<div class="flex flex-wrap items-center gap-1 text-sm text-foreground-subtle">
51
+
<div class="flex flex-wrap items-center gap-1 typography-paragraph-small text-foreground-subtle">
52
52
<span class="text-foreground-default">{authorHandle}</span>
53
53
<span class="before:mr-1 before:content-['·']">
54
54
<TimeAgo value={createdAt} />
+2
-2
web/src/lib/components/comment/CommentBox.svelte
+2
-2
web/src/lib/components/comment/CommentBox.svelte
···
67
67
<Avatar did={authorDid} handle={authorHandle} size="size-8" tiny />
68
68
</div>
69
69
<div class="flex min-w-0 flex-1 flex-col gap-2">
70
-
<div class="flex flex-wrap items-center gap-1 text-sm text-foreground-subtle">
70
+
<div class="flex flex-wrap items-center gap-1 typography-paragraph-small text-foreground-subtle">
71
71
<span class="text-foreground-default">{authorHandle}</span>
72
72
</div>
73
73
{@render editor()}
···
75
75
</div>
76
76
{:else}
77
77
<div class="rounded-sm border border-border-default bg-background-default p-4 drop-shadow-xs">
78
-
<div class="pb-2 text-sm text-foreground-subtle">
78
+
<div class="pb-2 typography-paragraph-small text-foreground-subtle">
79
79
<User handle={authorHandle} did={authorDid} />
80
80
</div>
81
81
{@render editor()}
+1
-1
web/src/lib/components/home/MarketingHome.svelte
+1
-1
web/src/lib/components/home/MarketingHome.svelte
···
74
74
<div class="absolute inset-x-0 bottom-14 h-px bg-border-default"></div>
75
75
{#each activityCards as card, index (card.right)}
76
76
<div
77
-
class={`activity-card absolute ${card.x} ${card.y} ${card.width} overflow-hidden rounded-sm border border-border-strong bg-background-default/95 text-sm text-foreground-muted shadow-2xl`}
77
+
class={`activity-card absolute ${card.x} ${card.y} ${card.width} overflow-hidden rounded-sm border border-border-strong bg-background-default/95 typography-paragraph-small text-foreground-muted shadow-2xl`}
78
78
>
79
79
<div class="flex items-center gap-2 border-l border-border-strong px-4 py-3">
80
80
<span class="size-5 rounded-full bg-orange-300/90"></span>
+2
-2
web/src/lib/components/profile/FollowCardContent.svelte
+2
-2
web/src/lib/components/profile/FollowCardContent.svelte
···
30
30
{person.handle}
31
31
</a>
32
32
{#if person.description}
33
-
<p class="pb-2 text-sm wrap-break-word text-foreground-muted md:pb-2">
33
+
<p class="pb-2 typography-paragraph-small wrap-break-word text-foreground-muted md:pb-2">
34
34
{person.description}
35
35
</p>
36
36
{/if}
37
-
<div class="my-2 flex max-w-full items-center gap-2 truncate text-sm text-foreground-subtle">
37
+
<div class="my-2 flex max-w-full items-center gap-2 truncate typography-paragraph-small text-foreground-subtle">
38
38
<Users class="size-4 shrink-0" />
39
39
<span
40
40
><a
+1
-1
web/src/lib/components/profile/FollowerFollowing.svelte
+1
-1
web/src/lib/components/profile/FollowerFollowing.svelte
···
11
11
let { handle, followers, following }: Props = $props();
12
12
</script>
13
13
14
-
<div class="my-2 flex max-w-full items-center gap-2 truncate text-sm">
14
+
<div class="my-2 flex max-w-full items-center gap-2 truncate typography-paragraph-small">
15
15
<span class="shrink-0"><Users class="size-4" aria-hidden="true" /></span>
16
16
<span>
17
17
<a href={resolve(`/${handle}?tab=followers` as "/")} class="no-underline hover:underline"
+1
-1
web/src/lib/components/profile/ProfileCard.svelte
+1
-1
web/src/lib/components/profile/ProfileCard.svelte
+1
-1
web/src/lib/components/profile/ProfileEditForm.svelte
+1
-1
web/src/lib/components/profile/ProfileEditForm.svelte
···
57
57
);
58
58
</script>
59
59
60
-
<form class="my-2 flex max-w-full flex-col gap-4 text-sm" onsubmit={save.run}>
60
+
<form class="my-2 flex max-w-full flex-col gap-4 typography-paragraph-small" onsubmit={save.run}>
61
61
<div class="flex flex-col gap-1">
62
62
<label for="profile-bio">Bio</label>
63
63
<textarea
+1
-1
web/src/lib/components/profile/StringCardContent.svelte
+1
-1
web/src/lib/components/profile/StringCardContent.svelte
+2
-2
web/src/lib/components/profile/VouchCard.svelte
+2
-2
web/src/lib/components/profile/VouchCard.svelte
···
45
45
{:else}
46
46
<span class="font-medium">{profileLabel}</span>
47
47
{/if}
48
-
<span class="text-sm text-foreground-placeholder">{relativeTime(vouch.createdAt)}</span>
48
+
<span class="typography-paragraph-small text-foreground-placeholder">{relativeTime(vouch.createdAt)}</span>
49
49
</div>
50
50
{#if vouch.reason}
51
-
<p class="text-sm text-foreground-subtle">{vouch.reason}</p>
51
+
<p class="typography-paragraph-small text-foreground-subtle">{vouch.reason}</p>
52
52
{/if}
53
53
</div>
54
54
</div>
+1
-1
web/src/lib/components/reaction/Reaction.svelte
+1
-1
web/src/lib/components/reaction/Reaction.svelte
···
18
18
});
19
19
20
20
const chipClass = $derived(
21
-
`flex min-h-6 items-center justify-center gap-1.5 rounded border px-2 text-xs leading-4 text-foreground-default ${
21
+
`flex min-h-6 items-center justify-center gap-1.5 rounded border px-2 typography-paragraph-mini leading-4 text-foreground-default ${
22
22
reaction.isReacted
23
23
? "border-border-strong bg-background-info-subtle"
24
24
: "border-border-default"
+3
-3
web/src/lib/components/repo/CloneDropdown.svelte
+3
-3
web/src/lib/components/repo/CloneDropdown.svelte
···
64
64
{/snippet}
65
65
66
66
<div class="flex items-center justify-between">
67
-
<h3 class="text-sm font-medium text-foreground-default">Clone this repository</h3>
67
+
<h3 class="typography-paragraph-small font-medium text-foreground-default">Clone this repository</h3>
68
68
{#if repo.repoDid}
69
69
<Checkbox bind:checked={permalink} class="typography-paragraph-small text-foreground-muted">
70
70
Use permalink
···
82
82
class="flex items-stretch divide-x divide-border-default rounded-sm border border-border-default"
83
83
>
84
84
<span
85
-
class="flex-1 overflow-x-auto bg-background-inset px-3 py-2 font-mono text-sm whitespace-nowrap text-foreground-default select-all"
85
+
class="flex-1 overflow-x-auto bg-background-inset px-3 py-2 font-mono typography-paragraph-small whitespace-nowrap text-foreground-default select-all"
86
86
>{value}</span
87
87
>
88
88
<button
···
112
112
<a
113
113
href={archiveUrl(archive.format)}
114
114
rel="external noopener noreferrer"
115
-
class="flex flex-1 items-center justify-center gap-2 rounded-sm border border-border-default px-2 py-1.5 text-sm text-foreground-default no-underline hover:bg-background-subtle hover:no-underline"
115
+
class="flex flex-1 items-center justify-center gap-2 rounded-sm border border-border-default px-2 py-1.5 typography-paragraph-small text-foreground-default no-underline hover:bg-background-subtle hover:no-underline"
116
116
>
117
117
<Download class="size-4" aria-hidden="true" />
118
118
{archive.format === "zip" ? ".zip" : archive.format}
+1
-1
web/src/lib/components/repo/CommitList.svelte
+1
-1
web/src/lib/components/repo/CommitList.svelte
···
43
43
</div>
44
44
45
45
{#if commit.body && expanded[commit.hash]}
46
-
<p class="mt-1 pb-2 text-sm whitespace-pre-wrap text-foreground-muted">{commit.body}</p>
46
+
<p class="mt-1 pb-2 typography-paragraph-small whitespace-pre-wrap text-foreground-muted">{commit.body}</p>
47
47
{/if}
48
48
49
49
<div
+3
-3
web/src/lib/components/repo/EmptyRepo.svelte
+3
-3
web/src/lib/components/repo/EmptyRepo.svelte
···
56
56
{/snippet}
57
57
58
58
{#snippet codeBlock(lines: string[])}
59
-
<pre class="overflow-x-auto rounded-sm bg-background-inset p-3 font-mono text-sm">{lines.join(
59
+
<pre class="overflow-x-auto rounded-sm bg-background-inset p-3 font-mono typography-paragraph-small">{lines.join(
60
60
"\n"
61
61
)}</pre>
62
62
{/snippet}
···
66
66
<div class="py-6" aria-hidden="true"></div>
67
67
{:else if keyStatus.data}
68
68
<div class="flex w-full place-content-center">
69
-
<div class="flex w-fit flex-col gap-5 py-6 text-sm">
69
+
<div class="flex w-fit flex-col gap-5 py-6 typography-paragraph-small">
70
70
<p>This is an empty repository.</p>
71
71
<div class="flex flex-col gap-2">
72
72
<p class="text-foreground-subtle">…create a new repository on the command line</p>
···
94
94
</div>
95
95
{:else}
96
96
<div class="flex w-full place-content-center">
97
-
<div class="flex w-fit flex-col gap-4 py-6 text-sm">
97
+
<div class="flex w-fit flex-col gap-4 py-6 typography-paragraph-small">
98
98
<p>This is an empty repository. To get started:</p>
99
99
<p>
100
100
{@render bullet(1)}First, generate a new
+1
-1
web/src/lib/components/repo/FileTree.svelte
+1
-1
web/src/lib/components/repo/FileTree.svelte
+1
-1
web/src/lib/components/repo/LastCommitPanel.svelte
+1
-1
web/src/lib/components/repo/LastCommitPanel.svelte
···
16
16
</script>
17
17
18
18
<div
19
-
class="mb-3 hidden flex-wrap items-center justify-between gap-2 border-b border-border-default pb-2 text-sm md:flex"
19
+
class="mb-3 hidden flex-wrap items-center justify-between gap-2 border-b border-border-default pb-2 typography-paragraph-small md:flex"
20
20
>
21
21
<div class="flex min-w-0 flex-wrap items-center gap-2">
22
22
{#if commit.authorName}
+2
-2
web/src/lib/components/repo/Readme.svelte
+2
-2
web/src/lib/components/repo/Readme.svelte
···
16
16
<div class="border-b border-border-default px-4 py-2">
17
17
<span class="flex items-center gap-2">
18
18
<FileText class="size-4 text-foreground-subtle" aria-hidden="true" />
19
-
<span class="font-mono text-sm text-foreground-muted">{filename}</span>
19
+
<span class="font-mono typography-paragraph-small text-foreground-muted">{filename}</span>
20
20
</span>
21
21
</div>
22
22
{#if html}
···
24
24
<div class="markup overflow-x-auto px-6 py-4">{@html html}</div>
25
25
{:else}
26
26
<div class="overflow-x-auto px-6 py-4">
27
-
<pre class="font-mono text-sm whitespace-pre text-foreground-default">{contents}</pre>
27
+
<pre class="font-mono typography-paragraph-small whitespace-pre text-foreground-default">{contents}</pre>
28
28
</div>
29
29
{/if}
30
30
</div>
+1
-1
web/src/lib/components/repo/RepoCardContent.svelte
+1
-1
web/src/lib/components/repo/RepoCardContent.svelte
···
49
49
</div>
50
50
51
51
{#if repo.description}
52
-
<p class="line-clamp-2 text-sm text-foreground-muted">{repo.description}</p>
52
+
<p class="line-clamp-2 typography-paragraph-small text-foreground-muted">{repo.description}</p>
53
53
{/if}
54
54
55
55
{#if repo.language !== undefined || stats.length > 0}
+1
-1
web/src/lib/components/repo/RepoHeader.svelte
+1
-1
web/src/lib/components/repo/RepoHeader.svelte
···
86
86
</div>
87
87
88
88
{#if repo.source}
89
-
<div class="flex flex-wrap items-center gap-1 text-sm text-foreground-muted">
89
+
<div class="flex flex-wrap items-center gap-1 typography-paragraph-small text-foreground-muted">
90
90
<GitFork class="size-3 shrink-0" aria-hidden="true" />
91
91
<span>forked from</span>
92
92
<a
+1
-1
web/src/lib/components/repo/TagCard.svelte
+1
-1
web/src/lib/components/repo/TagCard.svelte
···
70
70
71
71
<div class="px-2 py-3 md:col-span-10 md:py-0 md:pb-6">
72
72
{#if messageParts.length > 0}
73
-
<p class="text-lg font-bold">{messageParts[0]}</p>
73
+
<p class="typography-paragraph-large font-bold">{messageParts[0]}</p>
74
74
{#if messageParts.length > 1}
75
75
<p class="cursor-text py-2 whitespace-pre-wrap">{messageParts[1]}</p>
76
76
{/if}
+1
-1
web/src/lib/components/repo/issues/IssueCardContent.svelte
+1
-1
web/src/lib/components/repo/issues/IssueCardContent.svelte
···
25
25
</a>
26
26
</div>
27
27
28
-
<div class="flex flex-wrap items-center gap-x-1 gap-y-1.5 text-sm text-foreground-subtle">
28
+
<div class="flex flex-wrap items-center gap-x-1 gap-y-1.5 typography-paragraph-small text-foreground-subtle">
29
29
<IssueStatePill state={issue.state} />
30
30
31
31
<span class="ml-1 flex items-center gap-1">
+2
-2
web/src/lib/components/repo/issues/IssueForm.svelte
+2
-2
web/src/lib/components/repo/issues/IssueForm.svelte
···
70
70
71
71
<form onsubmit={save.run} class="flex flex-col gap-4">
72
72
<div class="flex flex-col gap-1.5">
73
-
<label for="issue-title" class="text-sm text-foreground-default">Title</label>
73
+
<label for="issue-title" class="typography-paragraph-small text-foreground-default">Title</label>
74
74
<Input id="issue-title" name="title" required bind:value={title} disabled={save.loading} />
75
75
</div>
76
76
77
77
<div class="flex flex-col gap-1.5">
78
-
<span class="text-sm text-foreground-default">Body</span>
78
+
<span class="typography-paragraph-small text-foreground-default">Body</span>
79
79
80
80
<MarkdownEditor
81
81
id="issue-body"
+1
-1
web/src/lib/components/repo/issues/IssueInfoBar.svelte
+1
-1
web/src/lib/components/repo/issues/IssueInfoBar.svelte
···
15
15
let { state, authorHandle, authorDid, createdAt, actions }: Props = $props();
16
16
</script>
17
17
18
-
<div class="flex flex-wrap items-center gap-x-1 gap-y-1.5 text-sm text-foreground-subtle">
18
+
<div class="flex flex-wrap items-center gap-x-1 gap-y-1.5 typography-paragraph-small text-foreground-subtle">
19
19
<IssueStatePill {state} />
20
20
21
21
<span class="ml-1 flex items-center gap-1">
+1
-1
web/src/lib/components/repo/issues/IssueLabelPanel.svelte
+1
-1
web/src/lib/components/repo/issues/IssueLabelPanel.svelte
+2
-2
web/src/lib/components/settings/KeyCardContent.svelte
+2
-2
web/src/lib/components/settings/KeyCardContent.svelte
···
23
23
<span class="font-bold text-foreground-default">{name}</span>
24
24
</div>
25
25
{#if fingerprint}
26
-
<span class="truncate font-mono text-sm text-foreground-subtle">{fingerprint}</span>
26
+
<span class="truncate font-mono typography-paragraph-small text-foreground-subtle">{fingerprint}</span>
27
27
{/if}
28
-
<span class="text-sm text-foreground-subtle">added {relativeTime(createdAt)}</span>
28
+
<span class="typography-paragraph-small text-foreground-subtle">added {relativeTime(createdAt)}</span>
29
29
</div>
30
30
<Button
31
31
variant="danger"
+1
-1
web/src/lib/components/settings/tabs/NotificationsTab.svelte
+1
-1
web/src/lib/components/settings/tabs/NotificationsTab.svelte
···
159
159
<ErrorAlert label={save.error} />
160
160
161
161
{#if loaded.loading}
162
-
<div class="flex items-center justify-center gap-2 p-4 text-sm text-foreground-subtle">
162
+
<div class="flex items-center justify-center gap-2 p-4 typography-paragraph-small text-foreground-subtle">
163
163
<Spinner /> Loading…
164
164
</div>
165
165
{:else}
+1
-1
web/src/lib/components/settings/tabs/SitesTab.svelte
+1
-1
web/src/lib/components/settings/tabs/SitesTab.svelte
···
99
99
{/if}
100
100
101
101
{#if loaded.loading}
102
-
<div class="flex items-center justify-center gap-2 p-4 text-sm text-foreground-subtle">
102
+
<div class="flex items-center justify-center gap-2 p-4 typography-paragraph-small text-foreground-subtle">
103
103
<Spinner /> Loading…
104
104
</div>
105
105
{:else if loaded.data}
+1
-1
web/src/lib/components/shell/Topbar.svelte
+1
-1
web/src/lib/components/shell/Topbar.svelte
···
66
66
67
67
<Button variant="ghost" href={resolve("/login")}>Login</Button>
68
68
69
-
<span class="text-sm text-foreground-muted">or</span>
69
+
<span class="typography-paragraph-small text-foreground-muted">or</span>
70
70
71
71
<Button variant="primary" href={resolve("/signup")} insetShadow={true}>
72
72
<span>Join now</span>
+4
-4
web/src/lib/components/strings/StringForm.svelte
+4
-4
web/src/lib/components/strings/StringForm.svelte
···
71
71
required
72
72
bind:value={filename}
73
73
disabled={publish.loading}
74
-
class="rounded-sm border border-border-default bg-background-default p-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none disabled:opacity-50 md:max-w-64"
74
+
class="rounded-sm border border-border-default bg-background-default p-2 typography-paragraph-small text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none disabled:opacity-50 md:max-w-64"
75
75
/>
76
76
<input
77
77
type="text"
···
81
81
maxlength={280}
82
82
bind:value={description}
83
83
disabled={publish.loading}
84
-
class="flex-1 rounded-sm border border-border-default bg-background-default p-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none disabled:opacity-50"
84
+
class="flex-1 rounded-sm border border-border-default bg-background-default p-2 typography-paragraph-small text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none disabled:opacity-50"
85
85
/>
86
86
</div>
87
87
···
94
94
spellcheck={false}
95
95
bind:value={content}
96
96
disabled={publish.loading}
97
-
class="w-full resize-y rounded-sm border border-border-default bg-background-default p-2 font-mono text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none disabled:opacity-50"
97
+
class="w-full resize-y rounded-sm border border-border-default bg-background-default p-2 font-mono typography-paragraph-small text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none disabled:opacity-50"
98
98
></textarea>
99
99
</div>
100
100
101
101
<div class="flex items-center justify-between px-4 py-3">
102
-
<div class="text-sm text-foreground-subtle">
102
+
<div class="typography-paragraph-small text-foreground-subtle">
103
103
<span>{lineCount} line{lineCount !== 1 ? "s" : ""}</span>
104
104
<span class="px-1 select-none">·</span>
105
105
<span>{byteCount} byte{byteCount !== 1 ? "s" : ""}</span>
+1
-1
web/src/lib/components/timeline/TimelineCard.svelte
+1
-1
web/src/lib/components/timeline/TimelineCard.svelte
···
7
7
8
8
<Card border shadow background padding="none">
9
9
<div
10
-
class="flex flex-wrap items-center gap-2 border-b border-border-default px-6 py-3 text-sm text-foreground-muted"
10
+
class="flex flex-wrap items-center gap-2 border-b border-border-default px-6 py-3 typography-paragraph-small text-foreground-muted"
11
11
>
12
12
{@render header()}
13
13
</div>
+1
-1
web/src/lib/components/ui/ButtonCard.svelte
+1
-1
web/src/lib/components/ui/ButtonCard.svelte
···
91
91
{#if Icon}
92
92
<Icon class="size-4 shrink-0" aria-hidden="true" />
93
93
{/if}
94
-
<span class="text-sm font-medium text-foreground-default">{title}</span>
94
+
<span class="typography-paragraph-small font-medium text-foreground-default">{title}</span>
95
95
</div>
96
96
{/if}
97
97
{#if description}
+1
-1
web/src/lib/components/ui/Dropdown.svelte
+1
-1
web/src/lib/components/ui/Dropdown.svelte
···
7
7
root: "relative inline-block",
8
8
plainTrigger:
9
9
"flex cursor-pointer items-center gap-1 border-0 bg-transparent p-0 text-inherit",
10
-
menu: "dropdown-menu fixed z-50 m-0 max-h-[calc(100dvh-1rem)] w-56 max-w-[calc(100vw-1rem)] divide-y divide-border-default overflow-auto rounded-sm border border-border-default bg-background-default text-sm text-foreground-default shadow-regular"
10
+
menu: "dropdown-menu fixed z-50 m-0 max-h-[calc(100dvh-1rem)] w-56 max-w-[calc(100vw-1rem)] divide-y divide-border-default overflow-auto rounded-sm border border-border-default bg-background-default typography-paragraph-small text-foreground-default shadow-regular"
11
11
},
12
12
variants: {
13
13
align: {
+4
-4
web/src/lib/components/ui/Error.svelte
+4
-4
web/src/lib/components/ui/Error.svelte
···
15
15
variants: {
16
16
size: {
17
17
small: {
18
-
header: "px-3 py-2 text-sm",
18
+
header: "px-3 py-2 typography-paragraph-small",
19
19
icon: "size-4",
20
-
toggle: "px-3 py-2 text-sm",
20
+
toggle: "px-3 py-2 typography-paragraph-small",
21
21
chevron: "size-4",
22
22
body: "px-3 py-2 typography-paragraph-small"
23
23
},
24
24
large: {
25
25
header: "px-4 py-3 typography-paragraph-large",
26
26
icon: "size-5",
27
-
toggle: "px-4 py-3 text-sm",
27
+
toggle: "px-4 py-3 typography-paragraph-small",
28
28
chevron: "size-4",
29
-
body: "px-4 py-3 text-sm"
29
+
body: "px-4 py-3 typography-paragraph-small"
30
30
}
31
31
}
32
32
},
+3
-3
web/src/lib/components/ui/MarkdownEditor.svelte
+3
-3
web/src/lib/components/ui/MarkdownEditor.svelte
···
105
105
/>
106
106
{:else}
107
107
{#await preview}
108
-
<div class={`${pane} ${surface} text-sm text-foreground-subtle italic`}>Rendering…</div>
108
+
<div class={`${pane} ${surface} typography-paragraph-small text-foreground-subtle italic`}>Rendering…</div>
109
109
{:then html}
110
110
{#if html}
111
111
<div class={`markup ${pane} ${surface}`}>
···
113
113
{@html html}
114
114
</div>
115
115
{:else}
116
-
<div class={`${pane} ${surface} text-sm text-foreground-subtle italic`}>
116
+
<div class={`${pane} ${surface} typography-paragraph-small text-foreground-subtle italic`}>
117
117
Nothing to preview.
118
118
</div>
119
119
{/if}
120
120
{:catch}
121
-
<div class={`${pane} ${surface} text-sm text-foreground-subtle italic`}>
121
+
<div class={`${pane} ${surface} typography-paragraph-small text-foreground-subtle italic`}>
122
122
Could not render preview.
123
123
</div>
124
124
{/await}
+2
-2
web/src/lib/components/ui/Section.stories.svelte
+2
-2
web/src/lib/components/ui/Section.stories.svelte
···
43
43
listClass="grid grid-cols-2 gap-4"
44
44
>
45
45
{#snippet header()}
46
-
<p class="px-2 pb-2 text-sm text-foreground-subtle">Up to four pinned repositories.</p>
46
+
<p class="px-2 pb-2 typography-paragraph-small text-foreground-subtle">Up to four pinned repositories.</p>
47
47
{/snippet}
48
48
{@render items()}
49
49
</Section>
···
53
53
<Section title="Repositories" empty={false} emptyMessage="Nothing here.">
54
54
{@render items()}
55
55
{#snippet footer()}
56
-
<div class="mt-4 flex justify-center text-sm text-foreground-subtle">footer</div>
56
+
<div class="mt-4 flex justify-center typography-paragraph-small text-foreground-subtle">footer</div>
57
57
{/snippet}
58
58
</Section>
59
59
</Story>
+1
-1
web/src/lib/components/ui/SignupPrompt.svelte
+1
-1
web/src/lib/components/ui/SignupPrompt.svelte
···
10
10
</script>
11
11
12
12
<div
13
-
class="flex flex-wrap items-center gap-2 rounded-sm border border-foreground-warning bg-background-warning-subtle p-4 text-sm text-foreground-warning-strong drop-shadow-xs"
13
+
class="flex flex-wrap items-center gap-2 rounded-sm border border-foreground-warning bg-background-warning-subtle p-4 typography-paragraph-small text-foreground-warning-strong drop-shadow-xs"
14
14
>
15
15
<Button variant="primary" href={resolve("/signup")}>Sign up</Button>
16
16
<span>or</span>
+2
-2
web/src/lib/components/ui/Tabs.svelte
+2
-2
web/src/lib/components/ui/Tabs.svelte
···
32
32
33
33
const itemClass = (isActive: boolean) =>
34
34
vertical
35
-
? `flex items-center gap-3 px-3 py-2 text-sm no-underline hover:no-underline ${
35
+
? `flex items-center gap-3 px-3 py-2 typography-paragraph-small no-underline hover:no-underline ${
36
36
isActive
37
37
? "bg-background-default text-foreground-default dark:bg-background-inset"
38
38
: "bg-background-inset text-foreground-muted hover:text-foreground-default dark:bg-background-default"
···
67
67
</span>
68
68
{/if}
69
69
{#if tab.count}
70
-
<span class="rounded-sm bg-background-inset px-1 text-sm {vertical ? 'ml-auto' : 'ml-1'}"
70
+
<span class="rounded-sm bg-background-inset px-1 typography-paragraph-small {vertical ? 'ml-auto' : 'ml-1'}"
71
71
>{tab.count}</span
72
72
>
73
73
{/if}
+1
-1
web/src/lib/components/ui/Textarea.svelte
+1
-1
web/src/lib/components/ui/Textarea.svelte
···
14
14
// box's own minimum and leave dead space under the field. keep this in sync with
15
15
// textareaMinHeight above — it's 2px shorter because the root's border sits outside it.
16
16
textarea:
17
-
"min-h-63.5 flex-1 self-stretch bg-transparent py-2 text-sm leading-6 outline-none placeholder:text-foreground-placeholder read-only:resize-none disabled:cursor-not-allowed disabled:resize-none"
17
+
"min-h-63.5 flex-1 self-stretch bg-transparent py-2 typography-paragraph-small leading-6 outline-none placeholder:text-foreground-placeholder read-only:resize-none disabled:cursor-not-allowed disabled:resize-none"
18
18
},
19
19
variants: {
20
20
error: {
+4
-4
web/src/routes/login/+page.svelte
+4
-4
web/src/routes/login/+page.svelte
···
44
44
45
45
<form class="mt-4" onsubmit={login.run}>
46
46
<div class="flex flex-col">
47
-
<label for="identifier" class="py-2 text-sm text-foreground-default">Handle</label>
47
+
<label for="identifier" class="py-2 typography-paragraph-small text-foreground-default">Handle</label>
48
48
<input
49
49
id="identifier"
50
50
bind:value={identifier}
···
58
58
placeholder="akshay.tngl.sh"
59
59
class="w-full rounded-sm border border-border-default bg-background-default p-3 typography-paragraph-large text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
60
60
/>
61
-
<p class="mt-1 text-sm text-foreground-subtle">
61
+
<p class="mt-1 typography-paragraph-small text-foreground-subtle">
62
62
Use your <span class="text-foreground-default">AT Protocol</span> handle to log in. If
63
63
you're unsure, this is likely your Tangled
64
64
<code
···
86
86
</Button>
87
87
</form>
88
88
89
-
<p class="text-sm text-foreground-subtle">
89
+
<p class="typography-paragraph-small text-foreground-subtle">
90
90
Don't have an account? <a href={appPath("/signup")} class="text-foreground-default underline"
91
91
>Create an account</a
92
92
>
···
100
100
<span class="py-1" aria-hidden="true"><CircleAlert class="size-4" /></span>
101
101
<div>
102
102
<h5 class="font-medium">Login error</h5>
103
-
<p class="text-sm">{auth.state.message} Please try again.</p>
103
+
<p class="typography-paragraph-small">{auth.state.message} Please try again.</p>
104
104
</div>
105
105
</div>
106
106
{/if}
+17
-17
web/src/routes/repo/new/+page.svelte
+17
-17
web/src/routes/repo/new/+page.svelte
···
24
24
<div class="mx-auto w-full max-w-2xl px-4 py-12">
25
25
<div class="px-6 py-2">
26
26
<h1 class="typography-heading-4 font-bold text-foreground-default">Create a new repository</h1>
27
-
<p class="mb-1 text-sm text-foreground-subtle">
27
+
<p class="mb-1 typography-paragraph-small text-foreground-subtle">
28
28
Repositories contain a project's files and version history. All repositories are publicly
29
29
accessible.
30
30
</p>
···
35
35
<div class="relative flex gap-4 border-l border-border-default pl-6">
36
36
<div class="absolute top-0 -left-3">
37
37
<div
38
-
class="mt-1 flex size-6 items-center justify-center rounded-full bg-background-inset text-sm font-medium text-foreground-muted"
38
+
class="mt-1 flex size-6 items-center justify-center rounded-full bg-background-inset typography-paragraph-small font-medium text-foreground-muted"
39
39
>
40
40
1
41
41
</div>
···
43
43
44
44
<div class="flex-1 pb-12">
45
45
<h2 class="typography-paragraph-large font-medium text-foreground-default">General</h2>
46
-
<div class="mb-4 text-sm text-foreground-subtle">Basic repository information.</div>
46
+
<div class="mb-4 typography-paragraph-small text-foreground-subtle">Basic repository information.</div>
47
47
48
48
<div class="space-y-2">
49
49
<div>
50
-
<label class="mb-1 block text-sm font-bold text-foreground-default">
50
+
<label class="mb-1 block typography-paragraph-small font-bold text-foreground-default">
51
51
Repository name
52
52
</label>
53
53
<div class="flex w-full flex-col gap-2 md:flex-row md:items-center md:gap-0">
54
54
<div
55
-
class="hidden shrink-0 items-center gap-1 p-2 text-sm text-foreground-muted md:flex md:rounded-l md:border md:border-r-0 md:border-border-default md:bg-background-inset"
55
+
class="hidden shrink-0 items-center gap-1 p-2 typography-paragraph-small text-foreground-muted md:flex md:rounded-l md:border md:border-r-0 md:border-border-default md:bg-background-inset"
56
56
>
57
57
<Avatar did={user?.did} handle={user?.handle} size="size-5" tiny />
58
58
<span>{user?.handle ?? "…"}</span>
···
64
64
placeholder="repository-name"
65
65
bind:value={repoName}
66
66
required
67
-
class="flex-1 rounded-sm border border-border-default bg-background-default p-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none md:rounded-l-none md:rounded-r"
67
+
class="flex-1 rounded-sm border border-border-default bg-background-default p-2 typography-paragraph-small text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none md:rounded-l-none md:rounded-r"
68
68
/>
69
69
</div>
70
-
<p class="mt-1 text-sm text-foreground-subtle">
70
+
<p class="mt-1 typography-paragraph-small text-foreground-subtle">
71
71
Choose a unique, descriptive name for your repository. Use letters, numbers, and
72
72
hyphens.
73
73
</p>
74
74
</div>
75
75
76
76
<div>
77
-
<label for="description" class="mb-1 block text-sm font-bold text-foreground-default">
77
+
<label for="description" class="mb-1 block typography-paragraph-small font-bold text-foreground-default">
78
78
Description
79
79
</label>
80
80
<input
···
84
84
placeholder="A brief description of your project..."
85
85
maxlength={140}
86
86
bind:value={description}
87
-
class="w-full rounded-sm border border-border-default bg-background-default p-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
87
+
class="w-full rounded-sm border border-border-default bg-background-default p-2 typography-paragraph-small text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
88
88
/>
89
-
<p class="mt-1 text-sm text-foreground-subtle">
89
+
<p class="mt-1 typography-paragraph-small text-foreground-subtle">
90
90
Optional. A short description to help others understand what your project does (max
91
91
140 characters).
92
92
</p>
···
98
98
<div class="relative flex gap-4 border-l border-border-default pl-6">
99
99
<div class="absolute top-0 -left-3">
100
100
<div
101
-
class="mt-1 flex size-6 items-center justify-center rounded-full bg-background-inset text-sm font-medium text-foreground-muted"
101
+
class="mt-1 flex size-6 items-center justify-center rounded-full bg-background-inset typography-paragraph-small font-medium text-foreground-muted"
102
102
>
103
103
2
104
104
</div>
···
108
108
<h2 class="typography-paragraph-large font-medium text-foreground-default">
109
109
Configuration
110
110
</h2>
111
-
<div class="mb-4 text-sm text-foreground-subtle">Repository settings and hosting.</div>
111
+
<div class="mb-4 typography-paragraph-small text-foreground-subtle">Repository settings and hosting.</div>
112
112
113
113
<div class="space-y-2">
114
114
<div>
115
-
<label for="branch" class="mb-1 block text-sm font-bold text-foreground-default">
115
+
<label for="branch" class="mb-1 block typography-paragraph-small font-bold text-foreground-default">
116
116
Default branch
117
117
</label>
118
118
<input
···
121
121
type="text"
122
122
bind:value={defaultBranch}
123
123
required
124
-
class="w-full rounded-sm border border-border-default bg-background-default p-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
124
+
class="w-full rounded-sm border border-border-default bg-background-default p-2 typography-paragraph-small text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
125
125
/>
126
-
<p class="mt-1 text-sm text-foreground-subtle">
126
+
<p class="mt-1 typography-paragraph-small text-foreground-subtle">
127
127
The primary branch where development happens. Common choices are "main" or "master".
128
128
</p>
129
129
</div>
130
130
131
131
<div>
132
-
<label class="mb-1 block text-sm font-bold text-foreground-default">
132
+
<label class="mb-1 block typography-paragraph-small font-bold text-foreground-default">
133
133
Select a knot
134
134
</label>
135
135
<div class="w-full space-y-2">
···
139
139
</Radio>
140
140
{/each}
141
141
</div>
142
-
<p class="mt-1 text-sm text-foreground-subtle">
142
+
<p class="mt-1 typography-paragraph-small text-foreground-subtle">
143
143
A knot hosts repository data and handles Git operations. You can also
144
144
<a href={resolve("/settings/knots" as "/")} class="underline"
145
145
>register your own knot</a
+1
-1
web/src/routes/strings/new/+page.svelte
+1
-1
web/src/routes/strings/new/+page.svelte
···
18
18
<div class="mx-auto w-full max-w-screen-lg px-4 py-12">
19
19
<div class="p-2">
20
20
<h1 class="typography-heading-4 font-bold text-foreground-default">Create a new string</h1>
21
-
<p class="text-sm text-foreground-subtle">Store and share code snippets with ease.</p>
21
+
<p class="typography-paragraph-small text-foreground-subtle">Store and share code snippets with ease.</p>
22
22
</div>
23
23
24
24
<div class="mt-4">