alice.pds.demo.boltless.dev
This repository has no description
web: use canonical tailwind class names
mechanical sweep of everything the new lint rule can fix on its own:
rounded -> rounded-sm, flex-grow -> grow, px-2 py-2 -> p-2, arbitrary px
values onto the spacing scale (size-[26px] -> size-6.5), and v4 variant
forms ([&>*]: -> *:).
left alone: max-w-screen-* keeps its breakpoint linkage, and the
text-*/leading-* pairs that collapse into typography-* utilities are a
design-system call, not a rename.
Signed-off-by: eti <eti@eti.tf>
author
eti
committer
dawn
date
(Jul 31, 2026, 10:57 PM +0300)
commit
33beb610
33beb6106036fb1a1270f24775a523c6476acd32
parent
3ff6c49e
3ff6c49edabf8440b54ca033c3d1abbb52f5b67b
change-id
xnmzrmwm
xnmzrmwmuzwxuusnrruqqvpskolqkkku
+98
-101
+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-x-1 gap-y-1 text-sm text-foreground-subtle">
70
+
<div class="flex flex-wrap items-center gap-1 text-sm text-foreground-subtle">
71
71
<span class="text-foreground-default">{authorHandle}</span>
72
72
</div>
73
73
{@render editor()}
74
74
</div>
75
75
</div>
76
76
{:else}
77
-
<div class="rounded border border-border-default bg-background-default px-4 py-4 drop-shadow-xs">
77
+
<div class="rounded-sm border border-border-default bg-background-default p-4 drop-shadow-xs">
78
78
<div class="pb-2 text-sm text-foreground-subtle">
79
79
<User handle={authorHandle} did={authorDid} />
80
80
</div>
+5
-5
web/src/lib/components/home/MarketingHome.svelte
+5
-5
web/src/lib/components/home/MarketingHome.svelte
···
14
14
15
15
{#snippet marketingButton(label: string, showArrow: boolean, className: string)}
16
16
<button
17
-
class="inline-flex cursor-pointer items-center justify-center gap-2 rounded border border-border-success bg-background-success-emphasis px-4 py-2 typography-paragraph-large font-medium text-foreground-on-emphasis hover:bg-background-success-emphasis-hover {className}"
17
+
class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-sm border border-border-success bg-background-success-emphasis px-4 py-2 typography-paragraph-large font-medium text-foreground-on-emphasis hover:bg-background-success-emphasis-hover {className}"
18
18
type="submit"
19
19
>
20
20
{label}
···
39
39
name="id"
40
40
required
41
41
placeholder="Enter your email"
42
-
class="min-w-0 flex-1 rounded border border-border-strong bg-background-default px-3 py-2 typography-paragraph-large text-foreground-default placeholder:text-foreground-placeholder focus:border-foreground-subtle focus:outline-none"
42
+
class="min-w-0 flex-1 rounded-sm border border-border-strong bg-background-default px-3 py-2 typography-paragraph-large text-foreground-default placeholder:text-foreground-placeholder focus:border-foreground-subtle focus:outline-none"
43
43
/>
44
44
{@render marketingButton(label, showArrow, buttonClass)}
45
45
</form>
···
48
48
<section class="overflow-hidden px-6 pt-28 pb-24 md:pt-36 md:pb-32">
49
49
<div class="mx-auto grid max-w-screen-xl grid-cols-1 items-center gap-14 md:grid-cols-2">
50
50
<h1
51
-
class="text-6xl leading-[0.98] font-bold tracking-[-0.05em] text-foreground-default md:text-7xl lg:text-8xl"
51
+
class="text-6xl leading-[0.98] font-bold tracking-tighter text-foreground-default md:text-7xl lg:text-8xl"
52
52
>
53
53
tightly-knit<br />social coding.
54
54
</h1>
···
66
66
</div>
67
67
68
68
<div class="relative mx-auto mt-28 hidden h-72 max-w-screen-xl md:block" aria-hidden="true">
69
-
<div class="absolute inset-x-0 bottom-10 flex items-end gap-[5px] opacity-35">
69
+
<div class="absolute inset-x-0 bottom-10 flex items-end gap-1.25 opacity-35">
70
70
{#each ticks as tick (tick)}
71
71
<span class="h-4 w-px bg-border-strong" class:h-7={tick % 24 === 0}></span>
72
72
{/each}
···
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 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 text-sm 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>
+6
-6
web/src/lib/components/profile/FollowCardContent.svelte
+6
-6
web/src/lib/components/profile/FollowCardContent.svelte
···
18
18
19
19
<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
20
20
<div class="flex min-w-0 flex-1 items-center gap-4">
21
-
<div class="flex h-24 w-24 shrink-0 items-center justify-center">
21
+
<div class="flex size-24 shrink-0 items-center justify-center">
22
22
<Avatar did={person.did} handle={person.handle} size="size-24" class="p-2" />
23
23
</div>
24
24
25
25
<div class="flex min-w-0 flex-1 flex-col justify-around">
26
26
<a
27
27
href={resolve(`/${person.handle}` as "/")}
28
-
class="max-w-full overflow-hidden font-bold text-ellipsis whitespace-nowrap text-foreground-default hover:underline"
28
+
class="max-w-full truncate font-bold text-foreground-default hover:underline"
29
29
>
30
30
{person.handle}
31
31
</a>
32
32
{#if person.description}
33
-
<p class="pb-2 text-sm break-words text-foreground-muted md:pb-2">{person.description}</p>
33
+
<p class="pb-2 text-sm wrap-break-word text-foreground-muted md:pb-2">
34
+
{person.description}
35
+
</p>
34
36
{/if}
35
-
<div
36
-
class="my-2 flex max-w-full items-center gap-2 overflow-hidden text-sm text-ellipsis whitespace-nowrap text-foreground-subtle"
37
-
>
37
+
<div class="my-2 flex max-w-full items-center gap-2 truncate text-sm text-foreground-subtle">
38
38
<Users class="size-4 shrink-0" />
39
39
<span
40
40
><a
+2
-4
web/src/lib/components/profile/FollowerFollowing.svelte
+2
-4
web/src/lib/components/profile/FollowerFollowing.svelte
···
11
11
let { handle, followers, following }: Props = $props();
12
12
</script>
13
13
14
-
<div
15
-
class="my-2 flex max-w-full items-center gap-2 overflow-hidden text-sm text-ellipsis whitespace-nowrap"
16
-
>
17
-
<span class="flex-shrink-0"><Users class="size-4" aria-hidden="true" /></span>
14
+
<div class="my-2 flex max-w-full items-center gap-2 truncate text-sm">
15
+
<span class="shrink-0"><Users class="size-4" aria-hidden="true" /></span>
18
16
<span>
19
17
<a href={resolve(`/${handle}?tab=followers` as "/")} class="no-underline hover:underline"
20
18
>{followers} followers</a
+5
-10
web/src/lib/components/profile/ProfileCard.svelte
+5
-10
web/src/lib/components/profile/ProfileCard.svelte
···
51
51
52
52
<div class="col-span-2">
53
53
<div class="flex flex-row flex-nowrap items-center gap-2">
54
-
<h1
55
-
title={identity.handle}
56
-
class="overflow-hidden typography-heading-4 font-bold text-ellipsis whitespace-nowrap"
57
-
>
54
+
<h1 title={identity.handle} class="truncate typography-heading-4 font-bold">
58
55
{identity.handle}
59
56
</h1>
60
57
{#if shown?.pronouns}
···
87
84
</div>
88
85
89
86
{#if shown?.location || links.length > 0 || blueskyUrl}
90
-
<div
91
-
class="mb-2 flex max-w-full flex-col gap-2 overflow-hidden text-ellipsis whitespace-nowrap"
92
-
>
87
+
<div class="mb-2 flex max-w-full flex-col gap-2 truncate">
93
88
{#if shown?.location}
94
89
<div class="flex items-center gap-2">
95
-
<span class="flex-shrink-0"><MapPin class="size-4" aria-hidden="true" /></span>
90
+
<span class="shrink-0"><MapPin class="size-4" aria-hidden="true" /></span>
96
91
<span>{shown.location}</span>
97
92
</div>
98
93
{/if}
99
94
{#if blueskyUrl}
100
95
<div class="flex items-center gap-2">
101
-
<span class="flex-shrink-0"><Link class="size-4" aria-hidden="true" /></span>
96
+
<span class="shrink-0"><Link class="size-4" aria-hidden="true" /></span>
102
97
<a
103
98
href={blueskyUrl}
104
99
target="_blank"
···
109
104
{/if}
110
105
{#each links as link, index (index)}
111
106
<div class="flex items-center gap-2">
112
-
<span class="flex-shrink-0"><Link class="size-4" aria-hidden="true" /></span>
107
+
<span class="shrink-0"><Link class="size-4" aria-hidden="true" /></span>
113
108
<a
114
109
href={link}
115
110
target="_blank"
+1
-1
web/src/lib/components/profile/tabs/RepoListTab.svelte
+1
-1
web/src/lib/components/profile/tabs/RepoListTab.svelte
···
29
29
/>
30
30
<a
31
31
href={resolve(`${page.url.pathname}?tab=repos` as "/")}
32
-
class="absolute top-1/2 right-3 hidden -translate-y-1/2 text-foreground-subtle peer-[&:not(:placeholder-shown)]:block hover:text-foreground-default"
32
+
class="absolute top-1/2 right-3 hidden -translate-y-1/2 text-foreground-subtle peer-not-placeholder-shown:block hover:text-foreground-default"
33
33
>
34
34
<X class="size-4" />
35
35
</a>
+1
-1
web/src/lib/components/profile/tabs/VouchTab.svelte
+1
-1
web/src/lib/components/profile/tabs/VouchTab.svelte
···
18
18
emptyMessage="No vouches yet."
19
19
listClass="relative ml-5 flex flex-col gap-6 border border-transparent px-4"
20
20
>
21
-
<div class="absolute top-8 bottom-8 z-0 w-0.5 bg-border-default"></div>
21
+
<div class="absolute inset-y-8 z-0 w-0.5 bg-border-default"></div>
22
22
{#each vouches as vouch (vouch.uri)}
23
23
<VouchCard {vouch} {profileLabel} />
24
24
{/each}
+2
-2
web/src/lib/components/repo/CloneDropdown.svelte
+2
-2
web/src/lib/components/repo/CloneDropdown.svelte
···
87
87
>{entry.label}</span
88
88
>
89
89
<div
90
-
class="flex items-stretch divide-x divide-border-default rounded border border-border-default"
90
+
class="flex items-stretch divide-x divide-border-default rounded-sm border border-border-default"
91
91
>
92
92
<span
93
93
class="flex-1 overflow-x-auto bg-background-inset px-3 py-2 font-mono text-sm whitespace-nowrap text-foreground-default select-all"
···
120
120
<a
121
121
href={archiveUrl(archive.format)}
122
122
rel="external noopener noreferrer"
123
-
class="flex flex-1 items-center justify-center gap-2 rounded border border-border-default px-2 py-1.5 text-sm text-foreground-default no-underline hover:bg-background-subtle hover:no-underline"
123
+
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"
124
124
>
125
125
<Download class="size-4" aria-hidden="true" />
126
126
{archive.format === "zip" ? ".zip" : archive.format}
+2
-2
web/src/lib/components/repo/CommitList.svelte
+2
-2
web/src/lib/components/repo/CommitList.svelte
···
31
31
{#if commit.body}
32
32
<button
33
33
type="button"
34
-
class="mt-1 shrink-0 cursor-pointer rounded bg-background-inset px-1 py-0.5 text-foreground-muted hover:bg-background-muted"
34
+
class="mt-1 shrink-0 cursor-pointer rounded-sm bg-background-inset px-1 py-0.5 text-foreground-muted hover:bg-background-muted"
35
35
aria-expanded={expanded[commit.hash] === true}
36
36
aria-label="Toggle commit body"
37
37
onclick={() => (expanded[commit.hash] = !expanded[commit.hash])}
···
51
51
<a
52
52
href={resolve(`${base}/commit/${commit.hash}` as "/")}
53
53
title={commit.changeId ? `jj change id: ${commit.changeId}` : undefined}
54
-
class="rounded bg-background-inset px-2 py-0.5 font-mono text-foreground-muted no-underline hover:underline"
54
+
class="rounded-sm bg-background-inset px-2 py-0.5 font-mono text-foreground-muted no-underline hover:underline"
55
55
>
56
56
{commit.shortHash}
57
57
</a>
+2
-2
web/src/lib/components/repo/EmptyRepo.svelte
+2
-2
web/src/lib/components/repo/EmptyRepo.svelte
···
69
69
{/snippet}
70
70
71
71
{#snippet codeBlock(lines: string[])}
72
-
<pre class="overflow-x-auto rounded bg-background-inset p-3 font-mono text-sm">{lines.join(
72
+
<pre class="overflow-x-auto rounded-sm bg-background-inset p-3 font-mono text-sm">{lines.join(
73
73
"\n"
74
74
)}</pre>
75
75
{/snippet}
···
123
123
</p>
124
124
<p>
125
125
{@render bullet(3)}Configure your remote to
126
-
<code class="rounded bg-background-inset px-1 font-mono">{remote}</code>
126
+
<code class="rounded-sm bg-background-inset px-1 font-mono">{remote}</code>
127
127
</p>
128
128
<p>{@render bullet(4)}Push!</p>
129
129
</div>
+1
-1
web/src/lib/components/repo/LastCommitPanel.svelte
+1
-1
web/src/lib/components/repo/LastCommitPanel.svelte
···
33
33
</div>
34
34
<a
35
35
{href}
36
-
class="w-fit rounded bg-background-inset px-2 py-1 font-mono typography-monospace-small text-foreground-muted no-underline hover:underline"
36
+
class="w-fit rounded-sm bg-background-inset px-2 py-1 font-mono typography-monospace-small text-foreground-muted no-underline hover:underline"
37
37
>
38
38
{commit.shortHash}
39
39
</a>
+1
-1
web/src/lib/components/repo/PanelHeader.svelte
+1
-1
web/src/lib/components/repo/PanelHeader.svelte
···
22
22
<Glyph class="size-4 shrink-0" aria-hidden="true" />
23
23
{title}
24
24
{#if count !== undefined}
25
-
<span class="rounded bg-background-inset px-1 text-sm font-normal">
25
+
<span class="rounded-sm bg-background-inset px-1 text-sm font-normal">
26
26
{approximate && count > 0 ? `${count}+` : count}
27
27
</span>
28
28
{/if}
+3
-1
web/src/lib/components/repo/Readme.svelte
+3
-1
web/src/lib/components/repo/Readme.svelte
···
10
10
let { filename, contents, html = null }: Props = $props();
11
11
</script>
12
12
13
-
<div class="mt-4 w-full overflow-hidden rounded border border-border-default bg-background-default">
13
+
<div
14
+
class="mt-4 w-full overflow-hidden rounded-sm border border-border-default bg-background-default"
15
+
>
14
16
<div class="border-b border-border-default px-4 py-2">
15
17
<span class="flex items-center gap-2">
16
18
<FileText class="size-4 text-foreground-subtle" aria-hidden="true" />
+1
-1
web/src/lib/components/repo/RefSelector.svelte
+1
-1
web/src/lib/components/repo/RefSelector.svelte
···
47
47
</div>
48
48
<a
49
49
href={resolve(`${base}/compare?base=${encodeURIComponent(current)}` as "/")}
50
-
class="flex items-center rounded border border-border-default px-2 text-foreground-muted no-underline hover:bg-background-subtle hover:no-underline"
50
+
class="flex items-center rounded-sm border border-border-default px-2 text-foreground-muted no-underline hover:bg-background-subtle hover:no-underline"
51
51
title="Compare branches or tags"
52
52
aria-label="Compare branches or tags"
53
53
>
+1
-1
web/src/lib/components/repo/RepoIndexView.svelte
+1
-1
web/src/lib/components/repo/RepoIndexView.svelte
···
29
29
const refsCapped = $derived(data.refs.capped);
30
30
</script>
31
31
32
-
<TabPanel class="relative mx-auto w-full mt-[1px]">
32
+
<TabPanel class="relative mx-auto mt-px w-full">
33
33
{#if data.needsUpgrade}
34
34
<div class="flex h-96 items-center justify-center text-center text-foreground-danger">
35
35
<div>
+1
-1
web/src/lib/components/repo/RepoToolbar.svelte
+1
-1
web/src/lib/components/repo/RepoToolbar.svelte
+2
-2
web/src/lib/components/repo/TreeHeader.svelte
+2
-2
web/src/lib/components/repo/TreeHeader.svelte
···
37
37
<div class="mb-3 flex items-center justify-between gap-2 text-sm">
38
38
<div class="flex min-w-0 items-center gap-3">
39
39
<div
40
-
class="flex w-fit items-center gap-1 overflow-x-auto rounded border border-border-default bg-background-inset px-3 py-2 whitespace-nowrap"
40
+
class="flex w-fit items-center gap-1 overflow-x-auto rounded-sm border border-border-default bg-background-inset px-3 py-2 whitespace-nowrap"
41
41
>
42
42
{#each crumbs as crumb (crumb.href)}
43
43
{#if crumb.last}
···
66
66
</div>
67
67
68
68
<div
69
-
class="hidden w-fit items-center gap-1 rounded border border-border-default bg-background-inset p-2 whitespace-nowrap text-foreground-muted md:flex"
69
+
class="hidden w-fit items-center gap-1 rounded-sm border border-border-default bg-background-inset p-2 whitespace-nowrap text-foreground-muted md:flex"
70
70
>
71
71
at <a
72
72
href={resolve(`${base}/tree/${encodedRef}` as "/")}
+1
-1
web/src/lib/components/repo/issues/IssueStatePill.svelte
+1
-1
web/src/lib/components/repo/issues/IssueStatePill.svelte
···
2
2
import { tv, type VariantProps } from "tailwind-variants";
3
3
4
4
export const issueStatePill = tv({
5
-
base: "inline-flex items-center gap-1.5 rounded px-2 py-1 text-sm text-foreground-on-emphasis select-none",
5
+
base: "inline-flex items-center gap-1.5 rounded-sm px-2 py-1 text-sm text-foreground-on-emphasis select-none",
6
6
variants: {
7
7
state: {
8
8
open: "bg-background-success-emphasis",
+1
-1
web/src/lib/components/settings/SettingsList.svelte
+1
-1
web/src/lib/components/settings/SettingsList.svelte
···
7
7
// of them — the line ends up centred in the space rather than flush against the
8
8
// row above. That leaves py-1 for the card itself, which is the rest of the 12px
9
9
// Figma puts between the card edge and the first row.
10
-
base: "flex w-full flex-col divide-y divide-border-default rounded-sm border border-border-default py-1 [&>*]:py-2",
10
+
base: "flex w-full flex-col divide-y divide-border-default rounded-sm border border-border-default py-1 *:py-2",
11
11
variants: {
12
12
padding: {
13
13
default: "px-4",
+1
-1
web/src/lib/components/settings/SettingsPanel.svelte
+1
-1
web/src/lib/components/settings/SettingsPanel.svelte
···
16
16
desktop, and below md a full-bleed panel that only keeps its top and bottom
17
17
hairlines, since the phone frame already supplies the side margins. -->
18
18
<div
19
-
class="flex w-full flex-col items-stretch gap-4 border-y border-border-default bg-background-default px-3 pt-3 pb-6 md:min-h-[600px] md:flex-row md:items-start md:overflow-hidden md:rounded-sm md:border md:p-0"
19
+
class="flex w-full flex-col items-stretch gap-4 border-y border-border-default bg-background-default px-3 pt-3 pb-6 md:min-h-150 md:flex-row md:items-start md:overflow-hidden md:rounded-sm md:border md:p-0"
20
20
>
21
21
<SettingsNav {items} {active} {label} />
22
22
+4
-4
web/src/lib/components/settings/ThemePicker.svelte
+4
-4
web/src/lib/components/settings/ThemePicker.svelte
···
15
15
<!-- three 135px thumbnails need 437px, so on a phone they wrap two-up and Dark
16
16
drops onto a second line -->
17
17
<div class="flex w-full flex-wrap gap-4 sm:w-auto">
18
-
<label class="flex w-[135px] cursor-pointer flex-col gap-2">
18
+
<label class="flex w-33.75 cursor-pointer flex-col gap-2">
19
19
<!-- Auto is the one thumbnail that tracks the live theme, since that is
20
20
exactly what the option does -->
21
21
<span
22
-
class="flex aspect-[135/84] w-full items-center justify-center rounded-sm border border-border-default bg-background-default"
22
+
class="flex aspect-135/84 w-full items-center justify-center rounded-sm border border-border-default bg-background-default"
23
23
aria-hidden="true"
24
24
>
25
25
<SunMoon class="size-6 text-foreground-muted" />
···
27
27
<Radio value="auto" bind:group={value} {name}>Auto</Radio>
28
28
</label>
29
29
30
-
<label class="flex w-[135px] cursor-pointer flex-col gap-2">
30
+
<label class="flex w-33.75 cursor-pointer flex-col gap-2">
31
31
<ThemePreview palette="light" />
32
32
<Radio value="light" bind:group={value} {name}>Light</Radio>
33
33
</label>
34
34
35
-
<label class="flex w-[135px] cursor-pointer flex-col gap-2">
35
+
<label class="flex w-33.75 cursor-pointer flex-col gap-2">
36
36
<ThemePreview palette="dark" />
37
37
<Radio value="dark" bind:group={value} {name}>Dark</Radio>
38
38
</label>
+1
-1
web/src/lib/components/settings/ThemePreview.svelte
+1
-1
web/src/lib/components/settings/ThemePreview.svelte
···
86
86
</script>
87
87
88
88
<div
89
-
class="relative aspect-[135/84] w-full overflow-hidden rounded-sm border"
89
+
class="relative aspect-135/84 w-full overflow-hidden rounded-sm border"
90
90
style="background-color: {colors.canvas}; border-color: {colors.border}"
91
91
aria-hidden="true"
92
92
>
+4
-2
web/src/lib/components/shell/Topbar.svelte
+4
-2
web/src/lib/components/shell/Topbar.svelte
···
120
120
>
121
121
<Spinner class="size-4" />
122
122
</span>
123
-
<span class="hidden h-4 w-24 rounded bg-background-inset md:block" aria-hidden="true"
123
+
<span
124
+
class="hidden h-4 w-24 rounded-sm bg-background-inset md:block"
125
+
aria-hidden="true"
124
126
></span>
125
127
</div>
126
128
{:else if user}
···
142
144
{:else}
143
145
<div class="flex items-center gap-2" aria-hidden="true">
144
146
<span class="size-8 rounded-full bg-background-inset md:size-5"></span>
145
-
<span class="hidden h-4 w-24 rounded bg-background-inset md:block"></span>
147
+
<span class="hidden h-4 w-24 rounded-sm bg-background-inset md:block"></span>
146
148
</div>
147
149
{/if}
148
150
</div>
+4
-4
web/src/lib/components/strings/StringForm.svelte
+4
-4
web/src/lib/components/strings/StringForm.svelte
···
68
68
};
69
69
</script>
70
70
71
-
<div class="rounded border border-border-default bg-background-default">
71
+
<div class="rounded-sm border border-border-default bg-background-default">
72
72
<form onsubmit={handleSubmit}>
73
73
<div class="flex flex-col gap-2 p-4">
74
74
<div class="flex flex-col gap-2 md:flex-row">
···
80
80
required
81
81
bind:value={filename}
82
82
disabled={isPublishing}
83
-
class="rounded border border-border-default bg-background-default px-2 py-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"
83
+
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"
84
84
/>
85
85
<input
86
86
type="text"
···
90
90
maxlength={280}
91
91
bind:value={description}
92
92
disabled={isPublishing}
93
-
class="flex-1 rounded border border-border-default bg-background-default px-2 py-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none disabled:opacity-50"
93
+
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"
94
94
/>
95
95
</div>
96
96
···
103
103
spellcheck={false}
104
104
bind:value={content}
105
105
disabled={isPublishing}
106
-
class="w-full resize-y rounded border border-border-default bg-background-default px-2 py-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"
106
+
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"
107
107
></textarea>
108
108
</div>
109
109
+2
-2
web/src/lib/components/ui/ButtonGroup.svelte
+2
-2
web/src/lib/components/ui/ButtonGroup.svelte
···
21
21
spaced: {
22
22
true: "gap-2",
23
23
false: [
24
-
"items-stretch gap-0 rounded border border-border-default bg-background-subtle dark:bg-background-canvas",
25
-
"*:relative [&>*]:border-y-0",
24
+
"items-stretch gap-0 rounded-sm border border-border-default bg-background-subtle dark:bg-background-canvas",
25
+
"*:relative *:border-y-0",
26
26
"[&>*:first-child]:-ml-px [&>*:last-child]:-mr-px",
27
27
"[&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:[--btn-radius-l:0px]",
28
28
"[&>*:not(:last-child)]:[--btn-radius-r:0px]",
+1
-1
web/src/lib/components/ui/Card.svelte
+1
-1
web/src/lib/components/ui/Card.svelte
+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 border border-border-default bg-background-default text-sm text-foreground-default shadow-menu"
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-menu"
11
11
},
12
12
variants: {
13
13
align: {
+1
-1
web/src/lib/components/ui/DropdownItem.svelte
+1
-1
web/src/lib/components/ui/DropdownItem.svelte
···
5
5
base: "flex w-full cursor-pointer items-center gap-2 bg-transparent p-2 text-left no-underline hover:no-underline",
6
6
variants: {
7
7
danger: {
8
-
false: "hover:bg-background-subtle dark:hover:bg-[rgb(55_65_81_/_0.5)]",
8
+
false: "hover:bg-background-subtle dark:hover:bg-[rgb(55_65_81/0.5)]",
9
9
true: "text-foreground-danger hover:bg-background-danger-subtle"
10
10
}
11
11
},
+1
-1
web/src/lib/components/ui/Error.svelte
+1
-1
web/src/lib/components/ui/Error.svelte
···
3
3
4
4
export const error = tv({
5
5
slots: {
6
-
root: "overflow-hidden rounded border border-border-danger bg-background-danger-subtle text-foreground-danger dark:border-border-danger/60 dark:bg-background-danger-subtle/20",
6
+
root: "overflow-hidden rounded-sm border border-border-danger bg-background-danger-subtle text-foreground-danger dark:border-border-danger/60 dark:bg-background-danger-subtle/20",
7
7
header: "flex items-center gap-2",
8
8
icon: "shrink-0",
9
9
label: "min-w-0",
+4
-4
web/src/lib/components/ui/Field.stories.svelte
+4
-4
web/src/lib/components/ui/Field.stories.svelte
···
28
28
id="field-default"
29
29
type="text"
30
30
placeholder="Placeholder"
31
-
class="w-full rounded border border-border-default bg-background-default px-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
31
+
class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
32
32
/>
33
33
</Field>
34
34
{/snippet}
···
41
41
id="field-label-only"
42
42
type="text"
43
43
placeholder="Placeholder"
44
-
class="w-full rounded border border-border-default bg-background-default px-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
44
+
class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
45
45
/>
46
46
</Field>
47
47
{/snippet}
···
54
54
id="field-required"
55
55
type="text"
56
56
placeholder="Placeholder"
57
-
class="w-full rounded border border-border-default bg-background-default px-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
57
+
class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
58
58
/>
59
59
</Field>
60
60
{/snippet}
···
79
79
id="field-input"
80
80
type="text"
81
81
placeholder="Placeholder"
82
-
class="w-full rounded border border-border-default bg-background-default px-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
82
+
class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
83
83
/>
84
84
</Field>
85
85
{/snippet}
+1
-1
web/src/lib/components/ui/Input.svelte
+1
-1
web/src/lib/components/ui/Input.svelte
···
2
2
import { tv, type VariantProps } from "tailwind-variants";
3
3
4
4
export const inputField = tv({
5
-
base: "flex min-h-9 items-center gap-2 rounded border bg-background-default px-2 py-1 transition-colors",
5
+
base: "flex min-h-9 items-center gap-2 rounded-sm border bg-background-default px-2 py-1 transition-colors",
6
6
variants: {
7
7
error: {
8
8
false:
+1
-1
web/src/lib/components/ui/Logo.stories.svelte
+1
-1
web/src/lib/components/ui/Logo.stories.svelte
···
39
39
</Story>
40
40
41
41
<Story name="On Emphasis" asChild>
42
-
<div class="flex flex-col items-start gap-4 rounded bg-background-success-emphasis p-4">
42
+
<div class="flex flex-col items-start gap-4 rounded-sm bg-background-success-emphasis p-4">
43
43
<Logo class="text-foreground-on-emphasis" />
44
44
<Logo wordmark class="text-foreground-on-emphasis" />
45
45
</div>
+1
-1
web/src/lib/components/ui/Logo.svelte
+1
-1
web/src/lib/components/ui/Logo.svelte
···
73
73
<span class="inline-flex items-center gap-2 select-none">
74
74
{@render mark()}
75
75
<span
76
-
class="rounded bg-background-subtle px-1 text-[10px] leading-4 font-normal text-foreground-default not-italic"
76
+
class="rounded-sm bg-background-subtle px-1 text-[10px] leading-4 font-normal text-foreground-default not-italic"
77
77
>
78
78
alpha
79
79
</span>
+1
-1
web/src/lib/components/ui/Select.svelte
+1
-1
web/src/lib/components/ui/Select.svelte
···
2
2
import { tv, type VariantProps } from "tailwind-variants";
3
3
4
4
export const select = tv({
5
-
base: "w-full appearance-none rounded border bg-background-default px-3 py-2 pr-9 text-sm transition-colors outline-none disabled:cursor-not-allowed",
5
+
base: "w-full appearance-none rounded-sm border bg-background-default px-3 py-2 pr-9 text-sm transition-colors outline-none disabled:cursor-not-allowed",
6
6
variants: {
7
7
error: {
8
8
false:
+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 border border-foreground-warning bg-background-warning-subtle px-4 py-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 text-sm 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>
+1
-1
web/src/lib/components/ui/TabPanel.svelte
+1
-1
web/src/lib/components/ui/TabPanel.svelte
···
6
6
// background hides the seam — producing the connected "folder tab" look. keep it
7
7
// flush against the tab bar (no margin between them) for the join to line up.
8
8
export const tabPanel = tv({
9
-
base: "-mt-px rounded border border-border-default bg-background-default text-foreground-default",
9
+
base: "-mt-px rounded-sm border border-border-default bg-background-default text-foreground-default",
10
10
variants: {
11
11
// the common surface padding; turn off to lay out children yourself
12
12
padded: {
+2
-2
web/src/lib/components/ui/Tabs.svelte
+2
-2
web/src/lib/components/ui/Tabs.svelte
···
53
53
class={itemClass(isActive)}
54
54
>
55
55
{#if Glyph}
56
-
<Glyph class={vertical ? "size-4 shrink-0" : "mr-2 h-4 w-4"} aria-hidden="true" />
56
+
<Glyph class={vertical ? "size-4 shrink-0" : "mr-2 size-4 "} aria-hidden="true" />
57
57
{/if}
58
58
{#if vertical}
59
59
{tab.label}
···
66
66
</span>
67
67
{/if}
68
68
{#if tab.count}
69
-
<span class="rounded bg-background-inset px-1 text-sm {vertical ? 'ml-auto' : 'ml-1'}"
69
+
<span class="rounded-sm bg-background-inset px-1 text-sm {vertical ? 'ml-auto' : 'ml-1'}"
70
70
>{tab.count}</span
71
71
>
72
72
{/if}
+1
-1
web/src/lib/components/ui/Tag.svelte
+1
-1
web/src/lib/components/ui/Tag.svelte
···
2
2
import { tv, type VariantProps } from "tailwind-variants";
3
3
4
4
export const tag = tv({
5
-
base: "inline-flex items-center gap-1 rounded leading-none font-medium select-none",
5
+
base: "inline-flex items-center gap-1 rounded-sm leading-none font-medium select-none",
6
6
variants: {
7
7
color: {
8
8
default: "border border-border-default bg-background-default text-foreground-default",
+2
-2
web/src/lib/components/ui/Textarea.svelte
+2
-2
web/src/lib/components/ui/Textarea.svelte
···
8
8
9
9
export const textareaField = tv({
10
10
slots: {
11
-
root: "relative flex items-start gap-1 rounded border bg-background-default transition-colors",
11
+
root: "relative flex items-start gap-1 rounded-sm border bg-background-default transition-colors",
12
12
// the floor has to live on the textarea, not the root: the resize handle only ever
13
13
// shrinks the textarea, so a min-height on the root would let the handle drag past the
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-[calc(16rem-2px)] 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 text-sm 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: {
+1
-1
web/src/lib/components/ui/Toggle.svelte
+1
-1
web/src/lib/components/ui/Toggle.svelte
···
47
47
</script>
48
48
49
49
<label class={labelClasses}>
50
-
<span class="relative inline-flex h-[18px] w-[33px] shrink-0">
50
+
<span class="relative inline-flex h-4.5 w-8.25 shrink-0">
51
51
<input type="checkbox" role="switch" bind:checked {disabled} class={inputClasses} {...rest} />
52
52
<span class={thumbClasses} aria-hidden="true"></span>
53
53
</span>
+5
-5
web/src/lib/components/ui/User.svelte
+5
-5
web/src/lib/components/ui/User.svelte
···
12
12
size: {
13
13
header: {
14
14
root: "gap-2",
15
-
avatar: "size-[26px]"
15
+
avatar: "size-6.5"
16
16
},
17
17
large: {
18
18
root: "gap-1.5",
19
-
avatar: "size-[26px]"
19
+
avatar: "size-6.5"
20
20
},
21
21
regular: {
22
22
root: "gap-1",
23
-
avatar: "size-[21px]"
23
+
avatar: "size-5.25"
24
24
},
25
25
small: {
26
26
root: "gap-1",
27
-
avatar: "size-[17px]"
27
+
avatar: "size-4.25"
28
28
},
29
29
mini: {
30
30
root: "gap-1",
31
-
avatar: "size-[13px]"
31
+
avatar: "size-3.25"
32
32
}
33
33
}
34
34
},
+4
-4
web/src/routes/login/+page.svelte
+4
-4
web/src/routes/login/+page.svelte
···
62
62
inputmode="url"
63
63
required
64
64
placeholder="akshay.tngl.sh"
65
-
class="w-full rounded 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"
65
+
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"
66
66
/>
67
67
<p class="mt-1 text-sm text-foreground-subtle">
68
68
Use your <span class="text-foreground-default">AT Protocol</span> handle to log in. If
69
69
you're unsure, this is likely your Tangled
70
70
<code
71
-
class="rounded bg-background-inset px-1 font-mono typography-monospace-small text-foreground-default"
71
+
class="rounded-sm bg-background-inset px-1 font-mono typography-monospace-small text-foreground-default"
72
72
>(.tngl.sh)</code
73
73
>
74
74
or Bluesky
75
75
<code
76
-
class="rounded bg-background-inset px-1 font-mono typography-monospace-small text-foreground-default"
76
+
class="rounded-sm bg-background-inset px-1 font-mono typography-monospace-small text-foreground-default"
77
77
>(.bsky.social)</code
78
78
>
79
79
account.
···
102
102
103
103
{#if auth.error}
104
104
<div
105
-
class="my-2 flex gap-2 rounded border border-border-danger bg-background-danger-subtle px-3 py-2 text-foreground-danger shadow-xs"
105
+
class="my-2 flex gap-2 rounded-sm border border-border-danger bg-background-danger-subtle px-3 py-2 text-foreground-danger shadow-xs"
106
106
>
107
107
<span class="py-1" aria-hidden="true"><CircleAlert class="size-4" /></span>
108
108
<div>
+7
-7
web/src/routes/repo/new/+page.svelte
+7
-7
web/src/routes/repo/new/+page.svelte
···
30
30
</p>
31
31
</div>
32
32
33
-
<div class="rounded border border-border-default bg-background-default p-6">
33
+
<div class="rounded-sm border border-border-default bg-background-default p-6">
34
34
<form>
35
35
<div class="relative flex gap-4 border-l border-border-default pl-6">
36
-
<div class="absolute -top-0 -left-3">
36
+
<div class="absolute top-0 -left-3">
37
37
<div
38
38
class="mt-1 flex size-6 items-center justify-center rounded-full bg-background-inset text-sm font-medium text-foreground-muted"
39
39
>
···
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 px-2 py-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 text-sm 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 border border-border-default bg-background-default px-2 py-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 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"
68
68
/>
69
69
</div>
70
70
<p class="mt-1 text-sm text-foreground-subtle">
···
84
84
placeholder="A brief description of your project..."
85
85
maxlength={140}
86
86
bind:value={description}
87
-
class="w-full rounded border border-border-default bg-background-default px-2 py-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 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
88
88
/>
89
89
<p class="mt-1 text-sm text-foreground-subtle">
90
90
Optional. A short description to help others understand what your project does (max
···
96
96
</div>
97
97
98
98
<div class="relative flex gap-4 border-l border-border-default pl-6">
99
-
<div class="absolute -top-0 -left-3">
99
+
<div class="absolute top-0 -left-3">
100
100
<div
101
101
class="mt-1 flex size-6 items-center justify-center rounded-full bg-background-inset text-sm font-medium text-foreground-muted"
102
102
>
···
121
121
type="text"
122
122
bind:value={defaultBranch}
123
123
required
124
-
class="w-full rounded border border-border-default bg-background-default px-2 py-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 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
125
125
/>
126
126
<p class="mt-1 text-sm text-foreground-subtle">
127
127
The primary branch where development happens. Common choices are "main" or "master".
+1
-1
web/src/routes/settings/+layout.svelte
+1
-1
web/src/routes/settings/+layout.svelte
···
34
34
<!-- the panel runs edge to edge on a phone, so the page gutters and the generous
35
35
desktop breathing room only kick in from md up -->
36
36
<div class="flex w-full flex-col items-center md:px-4 md:pt-16 md:pb-32">
37
-
<div class="flex w-full max-w-[1200px] flex-col">
37
+
<div class="flex w-full max-w-300 flex-col">
38
38
<SettingsPanel {items} {active}>
39
39
{@render children()}
40
40
</SettingsPanel>
+1
-1
web/src/routes/strings/new/+page.svelte
+1
-1
web/src/routes/strings/new/+page.svelte
···
16
16
</svelte:head>
17
17
18
18
<div class="mx-auto w-full max-w-screen-lg px-4 py-12">
19
-
<div class="px-2 py-2">
19
+
<div class="p-2">
20
20
<h1 class="typography-heading-4 font-bold text-foreground-default">Create a new string</h1>
21
21
<p class="text-sm text-foreground-subtle">Store and share code snippets with ease.</p>
22
22
</div>